Manual HTML para Impresion

HTML
El HTML (Hyper Text Markup Language) es un sistema para estructurar documentos; que se utiliza para la creacin de pginas Web. Estos documentos pueden ser Mostrados por cualquier navegador, ya sea Netscape, Microsoft Explorer. Mosaic, etc. Bsicamente, el HTML consta de una serie de rdenes o directivas, que indican al navegador que estemos utilizando, la forma de representar los elementos (texto, grficos, etc.) En ltima instancia el navegador es el que ejecuta todas las rdenes contenidas en el cdigo HTML, de forma que un navegador puede estar capacitado para realizar algunas rdenes, pero no para todas. As, podremos especificar que una pgina tenga una imagen de fondo, o un texto parpadeando, pero si nuestro navegador no est capacitado para realizar estas funciones, no podremos observarlas.
Las rdenes del HTML pueden ser de dos tipos, cerradas o abiertas. Las rdenes cerradas son aquellas que tienen una palabra clave que indica el principio y otra que indica el final. Entre la orden inicial y la final se pueden encontrar otras rdenes; en cambio las rdenes abiertas constan tan solo de una sola palabra clave. Para diferenciar las rdenes del resto del texto del documento se encierran entre los smbolos '<' y '>'. Las ordenes cerradas incluyen el carcter '/' antes de la palabra clave para indicar el final de la misma. Una orden puede contener "parmetros". Estos parmetros se indican a continuacin de la palabra clave de la orden. Directiva cerrada <CENTER> Mi pgina Web </CENTER> Directiva abierta <HR> Directiva con parmetros <BODY bgcolor="#FFFFFF"> </BODY> Los elementos pueden anidarse unos con otros, teniendo cuidado de poner los cierres en el lugar adecuado. Por ejemplo, el elemento <H1> combinado con <I> que sirve para generar texto en itlica, se escribir: <H1><I>Texto de prueba </I></H1>. y este sera el resultado:
Texto de prueba
1
LA ESTRUCTURA BSICA DE UN DOCUMENTO HTML.

Es recomendable que todo fichero HTML siga la siguiente estructura:
<HTML> Indica el inicio del documento. <HEAD> Inicio de la cabecera. <TITLE> Inicio del ttulo del documento/ttulo de la ventana. </TITLE> Final del ttulo del documento. </HEAD> Final de la cabecera del documento. <BODY> Inicio del cuerpo del documento. ------------- comandos y texto----------</BODY> Final del cuerpo del documento. </HTML> Final del documento.
<HTML><HEAD><TITLE>Bienvenido a la gua rpida</TITLE></HEAD> <BODY> Documento... </BODY></HTML> Los comandos pueden figurar en letras maysculas o en minsculas, indistintamente.
ESQUEMA DE TIPOS DE UN DOCUMENTO HTML

Cuando un visualizador recibe un fichero, antes de mostrarlo necesita saber el tipo de contenido que ste tiene, a fin de procesarlo adecuadamente. No es lo mismo recibir un documento de texto que una fotografa en formato GIF, o un vdeo en formato MPG, o si lo que estamos intentando es transferir un fichero.
En cada caso, el visualizador pondr en juego distintas habilidades, de las muchas que posee. Hay que tener presente que las extensiones de 4 o ms letras son propias de sistemas operativos como Unix, Macintosh o Windows95 y las de 3 o menos del DOS.
Estas son algunas de las extensiones Standard ms comunes y sus contenidos: .html o .htm Documento HTML. Contine texto e instrucciones HTML que sern interpretadas. .text o .txt Contiene texto plano. El visualizador presentar todo el fichero como si fuera un nico bloque de texto y no interpretar ninguna instruccin HTML que pudiera llevar. Esto lo har con cualquier fichero que lleve una extensin desconocida o simplemente no lleve ninguna. .gif Contiene un fichero de imagen en formato GIF. .npg Contiene un fichero de imagen en formato NPG. .xbm Contiene un fichero de imagen en formato X-Bitmap (blanco y negro). .xpm Contiene un fichero de imagen en formato X-Pixmap (color). .jpeg o .jpg Contiene un fichero de imagen en formato codificado jpeg. .mpeg o .mpg Contiene un fichero de imagen de video o cine (en movimiento). .au Contiene un fichero de audio (sonido) codificado en aiff-encoded. .mid Contiene un fichero de audio (sonido) generado con secuenciadores midi tpicos de Windows. .avi Contiene un fichero con video y sonido tpico de Windows. .mp3 Contiene un fichero con sonido tpico de Windows y otros sistemas. .exe Contiene un fichero binario ejecutable en DOS. .hqx Contiene un fichero binario ejecutable en Macintosh. .Z o .zip Contiene un (o varios) fichero/s comprimido/s de cualquier clase. Para poder utilizarlo hay que indicarle al visualizador una herramienta de compresin-descompresin.
Los documentos HTML los puedes escribir con lo que quieras... Siempre que los salves en modo Solo Texto. Es decir, que si utilizas, por ejemplo, Word de Windows o de MAC, por defecto estos programas salvan en formato Word. Y aunque luego los renombres como documentos .htm o .html, el formato interno sigue siendo Word. Tampoco vale dejarlos con la extensin .txt que les dejan la mayora de editores al salvarlos en modo Solo Texto. No seran interpretados correctamente. Por lo tanto si tienen extensin .txt (y por supuesto son .txt), entonces puedes renombrarlos a .htm, o bien en el momento de guardarlos en formato Solo Texto no dejar la extensin por defecto .txt y darle ya directamente la extensin .htm. Algunos procesadores de texto, ya incluyen entre sus tipos el .htm. Si es as lo que hacen es eliminar la codificacin propia, y convertirla a elementos de HTML. Por ejemplo, si tienes un texto en itlica, automticamente es convertido al elemento <I>, etc..
CABECERA DEL DOCUMENTO.

Las ordenes <HEAD> y </HEAD> delimitan la cabecera del documento. Dentro de la cabecera es importante definir el ttulo de la pgina por medio de las ordenes <TITLE> y </TITLE>.
Este ttulo ser el que aparezca en la barra de nuestro navegador de pginas Web. Ejemplo: <TITLE>La pgina de Jos Luis</TITLE> Dentro de la cabecera de nuestro documento podemos incluir otras rdenes adicionales. La orden <META> indica al navegador de Internet las palabras clave y contenido de nuestra pgina Web. Muchos de los buscadores de pginas Web de Internet (Yahoo, Lycos, etc...) utilizan el contenido de esta orden para incluir la pgina en sus bases de datos. La orden <META> lleva generalmente dos parmetros, name y content.
Por ejemplo: puedes poner las palabras clave que contiene la pgina separadas por comas
<HEAD> <TITLE> Head de un documento </TITLE> <META NAME="keywords" CONTENT="HTML, internet "> </HEAD>
Este otro sirve para que los buscadores puedan ofrecer un breve resumen de los contenidos de tu pgina:
<HEAD> <TITLE>Head de un documento </TITLE> <META NAME="description" CONTENT="Manual para escribir HTML."> </HEAD>
Puedes poner todos los elementos <META> que creas necesarios, pero sin repetirlos.
Ejemplo <html> <head> <title>Mi pagina del Web - 1</title> </head> <body> <h1><center>Primera pagina</center></h1> <hr> Esta es mi primera pgina, aunque todava es muy sencilla. Como el lenguaje HTML no es difcil, pronto estar en condiciones de hacer cosas ms interesantes. <p>Aqu va un segundo prrafo. </body> </html>
CUERPO DEL DOCUMENTO.

La orden <BODY></BODY> indica el inicio y final de nuestra pagina Web. Ser entre el inicio y el final de esta orden donde pongamos los contenidos de nuestra pgina, textos, grficos, enlaces, etc.... y por tanto, al contrario de la HEAD s se ve cuando navegamos por ella. Esta orden tiene una serie de parmetros opcionales que nos permiten indicar la "apariencia" global del documento: background "nombre de fichero grfico" Indica el nombre de un fichero grfico que servir como "fondo" de nuestra pgina. Si la imagen no rellena todo el fondo del documento, esta ser reproducida tantas veces como sea necesario.
bgcolor "cdigo de color" Indica un color para el fondo de nuestro documento. Se ignora si se ha usado el parmetro background. text "cdigo de color" Indica un color para el texto que incluyamos en nuestro documento. Por defecto es negro. link "cdigo de color" Indica el color de los textos que dan acceso a un Hyperenlace. Por defecto es azul. vlink "cdigo de color" Indica el color de los textos que dan acceso a un Hyperenlace que ya hemos visitado con nuestro navegador. Por defecto es prpura.
<BODY BACKGROUND="nubes.jpg" BGCOLOR="#CCFFFF" TEXT="#AA0000">
El cdigo de color es un nmero compuesto por tres pares de cifras hexadecimales que indican la proporcin de los colores "primarios", rojo, verde y azul. El cdigo de color se antecede del smbolo #. Ejemplos : #000000 #FF0000 #00FF00 #0000FF #FFFFFF Color Negro Color Rojo Color Verde Color Azul Color Blanco
El primer par de cifras indican la proporcin de color Rojo, el segundo par de cifras la proporcin de color Verde y las dos ltimas la proporcin de color Azul. Cada par de cifras hexadecimales nos permiten un rango de 0 a 255. Combinando las proporciones de cada color primario obtendremos diferentes colores. De cualquier forma la mayora de los editores de HTML nos permiten obtener el cdigo de color correspondiente escogiendo directamente el color de una paleta.
DAR COLOR A LA PGINA

Para modificar los colores de fondo del documento debemos aadir a la etiqueta de cuerpo de documento <BODY> el parmetro BGCOLOR="#RRGGBB" donde #RRGGBB indica la combinacin de tonos de rojo, verde y azul necesarios para conseguir el color que deseamos. No obstante HTML reconoce 16 colores simples black, gray, maroon, purple, green, olive, navy, teal, silver, red, white, lime, yelow, aqua, blue y fuchsia con nombre y apellidos, as que para poner un fondo azul, bastar con poner <BODY BGCOLOR="BLUE"> sin ms. Si lo queremos complicar ms, necesitamos saber el nmero en hexadecimal que define el color que queremos y lo ponemos en la etiqueta bgcolor, el color rojo sin ir mas lejos sera #FF0000. Para definir el color del texto, utilizaremos el parmetro TEXT="#RRGGBB". Para definir el color de los enlaces no visitados, LINK="#RRGGBB", para los enlaces visitados VLINK="#RRGGBB", para los enlaces en los que se haga click ALINK="#RRGGBB". Para insertar una imagen de fondo, usamos el parmetro
BACKGROUND="imagenfondo.gif". Los formatos de ficheros ms utilizados son el gif y jpg. Cabe resear que el fichero debe estar en el mismo directorio que el documento HTML que lo llama, en caso contrario se debe especificar el PATH a dicho fichero grfico. Y OJO, ya dije anteriormente que aunque en el cdigo HTML da igual escribir las etiquetas en maysculas o minsculas, cuando se hace una llamada a un fichero, enlace, etc... Si existen diferencias, con lo cual para evitar problemas, escribimos todo en minsculas.
EJEMPLO 2: <HTML> <HEAD> <TITLE> Mi pagina del Web - 7 </TITLE> </HEAD> <BODY BACKGROUND="nubes.jpg" BGCOLOR="#CCFFFF" TEXT="#AA0000"> <CENTER> <H1> Mi página del Web </H1> </CENTER> <HR> Esta es mi página del Web. No es muy extensa, pero tiene todos los elementos básicos. Espero que os guste. Poco a poco le iré añadiendo más cosas interesantes. </BODY> </HTML>
ESPACIADOS Y SALTOS DE LNEAS.

En HTML solo se reconoce un espacio entre palabra y palabra, el resto de los espacios sern ignorados por el navegador. Asimismo tampoco se respetan las tabulaciones, retornos de carro etc... Para ello existen una serie de rdenes que indican estos cdigos. Las ordenes <PRE> y </PRE> obliga al navegador a visualizar el texto tal y como ha sido escrito, respetando tabulaciones, espacios, retornos de carro, etc.. Ejemplo: <PRE> Este texto ha Sido Preformateado.</PRE> Se ver: Este texto ha Sido Preformateado. Para indicar un salto de lnea se utiliza la orden <BR> y para un cambio de prrafo (deja una lnea en blanco en medio) se utiliza la orden <P>. Ejemplo: Esto es un salto de lnea <BR> y esto es <p>un salto de prrafo Se ver: Esto es un salto de lnea Y esto es un salto de prrafo
La orden <P> puede usarse tambin como orden "cerrada" <P> y </P> indicando de esta manera los atributos de un prrafo en concreto. Cuando se usa de esta manera tiene el parmetro align que indica al navegador la forma de "justificar" el prrafo. Los valores posibles de este parmetro son LEFT, RIGHT y CENTER, estando aun en estudio el valor JUSTIFY.
Ejemplo: <P Align = right>Este es un ejemplo de un prrafo de texto justificado a la derecha.</P> <P Align = center>Este es un ejemplo de prrafo de texto centrado.</P> Se ver: Este es un ejemplo de un prrafo de texto justificado a la derecha. Este es un ejemplo de prrafo de texto centrado. La orden <HR> muestra una lnea horizontal de tamao determinable que sirve para separar prrafos o temas. Tiene los siguientes parmetros opcionales: align posicin Alinea la lnea a la izquierda (left), a la derecha (right) o la centra (center). noshade No muestra sombra, evitando el efecto en tres dimensiones. size nmero Indica el grosor de la lnea en pixeles. width num / % Indica el ancho de la lnea en tanto por ciento en funcin del ancho de la ventana del navegador. Tambin se puede especificar un nmero que indicara el ancho de la lnea en pixeles. Ejemplo: <HR align = center size = 20 width = 50%>
Se ver: La orden <HR> sin ningn parmetro mostrara una lnea horizontal que ocupara todo el ancho de la pgina. Estas lneas sencillas son las que ves en este manual para separar las diferentes secciones.
<FIELDSET>. Recuerda que si no tienes la versin adecuada de navegador, en los siguientes Si se escribe: <FIELDSET> Esto es una prueba de enmarcado </FIELDSET> Se obtiene: Esto es una prueba de enmarcado Este elemento tiene un parmetro que permite etiquetar el recuadro: <LEGEND> Si se escribe: <FIELDSET> <LEGEND>Esto es una etiqueta</LEGEND> Esto es una prueba de enmarcado </FIELDSET> Se obtiene: Esto es una etiquetaEsto es una prueba de enmarcado El parmetro <LEGEND> tiene tres atributos que indican la posicin de la etiqueta: LEFT (por defecto), RIGHT y CENTER, aunque no funciona en todos los navegadores. Por ejemplo: <FIELDSET> <LEGEND ALIGN=CENTER> Esto es una etiqueta </LEGEND> Esto es una prueba de enmarcado </FIELDSET> Se obtiene: Esto es una etiquetaEsto es una prueba de enmarcado Si en estos ejemplos no ves el recuadro o la etiqueta no est donde debiera, es porque no tienes una versin de navegador adecuada. Por supuesto, dentro del recuadro generado por <FIELDSET> se puede poner cualquier cosa: formularios, imgenes, texto, etc. ejemplos slo vers el texto, pero no los enmarcados.
10
CABECERAS.
En un documento de HTML se pueden indicar seis tipos de cabeceras (tamaos de letra) por medio de las rdenes <H1><H2><H3><H4><H5> y <H6>. El texto que escribamos entre el inicio y el fin de la orden ser el afectado por las cabeceras. La cabecera <H1> ser la que muestre el texto en mayor tamao. Ejemplo: <h1>Cabecera tipo 1</h1> <h2>Cabecera tipo 2</h2> <h3>Cabecera tipo 3</h3> <h4>Cabecera tipo 4</h4> <h5>Cabecera tipo 5</h5> <h6>Cabecera tipo 6</h6> Se ver:
Cabecera tipo 1
Cabecera tipo 2
Cabecera tipo 3
Cabecera tipo 4
Cabecera tipo 5
Cabecera tipo 6
11
ATRIBUTOS DEL TEXTO.

Para indicar atributos del texto (negrilla, subrayado, etc...) tenemos varias rdenes. Algunas de ellas no son reconocidas por determinados navegadores de Internet, es por ello que segn el navegador que este Ud. Este utilizando, ver el resultado correctamente o no. Atributo Orden Ejemplo <B>Texto de prueba</B> <I>Texto de prueba</I> <TT>Texto de prueba</TT> <U>Texto de prueba</U> <S>Texto de prueba</S> <BLINK>Texto de prueba</BLINK> <SUP>Texto de prueba</SUP> <SUB>Texto de prueba</SUB> <CENTER>Texto de prueba</CENTER>
Texto de prueba
Resultado Texto de prueba Texto de prueba
Negrita
<B></B>
Cursiva
<I></I>
Teletype
<TT></TT>
Texto de prueba
Subrayado
<U></U>
Texto de prueba
Tachado
<S></S>
Texto de prueba
Parpadeo
<BLINK></BLINK>
Texto de prueba
Superndice
<SUP></SUP>
Texto de prueba
Subndice
<SUB></SUB>
Centrado
<CENTER></CENTER>
Texto de prueba
Otra forma de cambiar los tamaos de letra es utilizar el elemento <FONT > con el atributo VALOR, que es un nmero entre 1 y 7. El valor por defecto del texto es 3. La gran diferencia de esta notacin respecto a la anterior es que no se produce un salto de prrafo despus de cada cambio, por lo que pueden hacerse cosas como esta:
12
<FONT SIZE=3>A</font><FONT SIZE=4>A</font><FONT SIZE=5>A</font> <FONT SIZE=6>A</font><FONT SIZE=7>A</font><FONT SIZE=6>A</font> <FONT SIZE=5>A</font><FONT SIZE=4>A</font><FONT SIZE=3>A</FONT> Dar como resultado:
AAA
AAAAAA
Utiliza para ello los parmetros size, color y face.
size valor Da al texto un tamao en puntos determinado. size +/- valor Da al texto un tamao tantas veces superior (+) o inferior (-) como indique el valor. color "cdigo de color" Escribe el texto en el color cuyo cdigo se especifica. face "nombre de font" Escribe el texto en el tipo de letra especificado. Si este tipo de letra no existe en el ordenador que "lee" la pagina se usara el font predeterminado del navegador. <FONT <FONT <FONT <FONT <FONT FACE="arial">Texto de prueba 12345 con tipo ARIAL</FONT> FACE="courier new">Texto de prueba 12345 con tipo COURIER NEW</FONT> FACE="courier">Texto de prueba 12345 con tipo COURIER</FONT> FACE="roman">Texto de prueba 12345 con tipo ROMAN</FONT> FACE="small fonts">Texto de prueba 12345 con tipo SMALL FONTS</FONT>
Se ver: Texto de prueba 12345 con tipo ARIAL Texto de prueba 12345 con tipo COURIER NEW Texto de prueba 12345 con tipo COURIER Texto de prueba 12345 con tipo ROMAN Texto de prueba 12345 con tipo VERDANA Texto de prueba 12345 con tipo SMALL FONTS
EJEMPLO <FONT SIZE=6 COLOR="red">E</FONT><FONT SIZE=4>sto es una </FONT> <FONT SIZE=6 COLOR="red">P</FONT><FONT SIZE=4>rueba </FONT> Resulta:
Esto es una Prueba

13
Ejemplo: <FONT size = +2 color = "#FF0000 face = "Arial"> Texto de prueba </FONT>
Se ver:
Texto de prueba
Existen otras rdenes que realizan las mismas operaciones que las antes vistas en tos del texto. Hace lo mismo que <B></B> <I></I> <S></S>
Orden
<STRONG></STRONG> <CITE></CITE> <STRIKE></STRIKE>
Para incluir comentarios en la pgina Web se utiliza la orden . Ejemplo:  Los comentarios no sern mostrados por el navegador y son tiles para realizar anotaciones en el documento HTML que nos indiquen lo que estamos haciendo en una determinada parte del documento. Asimismo veremos mas adelante que la orden de comentario nos ser de utilidad para incluir cdigo JavaScript en nuestra pgina Web.
En los navegadores de ltima generacin se ha implementado un efecto que permite incluir explicaciones ocultas que aparecen al pasar el ratn por encima, pero sin cambiar de pgina ni abrir ninguna ventana nueva. Por ejemplo, si escribes:
<ACRONYM TITLE="Hyper Text Markup Language">HTML</ACRONYM> Al pasar el ratn sobre la palabra HTML, se desvela su significado: HTML
JUEGO DE CARACTERES.
Todos los navegadores de pginas Web actuales soportan todos los caracteres grficos de la especificacin ISO 8859-1, que permiten escribir textos en la mayora de los pases occidentales. 14
De cualquier forma y como muchos sistemas tienen distintos juegos de caracteres ASCII, se han definido dos formas de representar caracteres especiales usando solamente el cdigo ASCII de 7 bits. Para hacer referencia a estos caracteres se les asigna un cdigo numrico o un nombre de "entidad". Asimismo hay caracteres que se utilizan para las ordenes de HTML, por ejemplo < y >. Estos caracteres pueden ser representados por un cdigo numrico o una entidad cuando deseemos que aparezcan en el documento "tal cual". Las entidades comienzan por el smbolo & (ampersand) y terminan con el smbolo ; (punto y coma). A continuacin veamos una tabla con las principales entidades :
Carcter Cdigo Entidad ! # % ' ) + / ; = ? [ ] _ { ! # % ' ) + - / ; = ? [ ] _ { ---------------Carcter Cdigo Entidad " $ & ( * , . : < > @ \ ^ ` | " $ & ( * , . : < > @ \ ^ ` | ----------------
15
}
-nbsp cent curren
~ 3 1 12
~ ¡ £ ¥ § © « ¯
-iexcl pound yen sect copy laquo shy macr
Espacio ? | ¢ ¤
¦ brvbar ¨ ª ¬ ® ° ² ´ ¶ ¸ º ¼ ¾ uml ordf not reg deg sup2 acute para cedil ordm frac14 frac34
± plusmn ³ µ sup3 micro
· middot ¹ » ½ ¿ sup1 raquo frac12 iquest
À Agrave Â Ä Æ Acirc Auml AElig
Á Aacute Ã Å Ç Atilde Aring Ccedil
16
È Egrave Ê Ì Î Ð Ecirc Igrave Icirc ETH
* Y
É Eacute Ë Í Ï Ñ Euml Iacute Iuml Ntilde
Ò Ograve Ô Ö Ocirc Ouml
Ó Oacute Õ × Otilde times
Ø Oslash Ú Uacute Ü Uuml
Ù Ugrave Û Ucirc
Ý Yacute ß szlig
Þ THORN à agrave â ä æ acirc auml aelig
á aacute ã å ç atilde aring ccedil
è egrave ê ì î ð ecirc igrave icirc eth
é eacute ë í ï ñ euml iacute iuml ntilde
17
ò ograve ô ö ø ocirc ouml oslash
ó oacute õ ÷ otilde divide
ù ugrave û ucirc
ú uacute ü þ uuml thorn
ý yacute ÿ yuml
Por lo tanto la palabra pgina la podramos escribir como: Pgina Página Página Es por ello que si deseamos que cualquier navegador de pginas Web pueda visualizar las letras acentuadas de nuestro documento debemos utilizar sus correspondientes entidades o cdigos para representarlas.
LISTAS.
Existen tres tipos de listas, numeradas, sin numerar y de definicin. Las listas numeradas representarn los elementos de la lista numerando cada uno de ellos segn el lugar que ocupan en la lista. Para este tipo de lista se utiliza las rdenes <OL> </OL>. Cada uno de los elementos de la lista ir precedido de la orden <LI>. La orden <OL> puede llevar los siguientes parmetros: start num Indica que nmero ser el primero de la lista. Si no se indica se entiende que empezar por el nmero 1. type tipo Indica el tipo de numeracin utilizada. Si no se indica se entiende que ser una lista ordenada numricamente. Los tipos posibles son : 18
1 a A i I
Numricamente. (1,2,3,4,... etc.) Letras minsculas. (a,b,c,d,... etc.) Letras maysculas. (A,B,C,D,... etc.) Nmeros romanos en minsculas. (i.ii,iii,iv,v,... etc.) Nmeros romanos en maysculas. (I,II,III,IV,V,... etc.) Ejemplo <OL> <LI>Colombia <LI>Mxico <LI>Brasil <LI>EE.UU. </OL> <OL type = A > <LI>Colombia <LI>Mxico <LI>Brasil <LI>EE.UU. </OL> D. EE.UU. B. Mxico C. Brasil 4. EE.UU. 2. 3. Mxico Brasil Resultado
1.
Colombia
A. Colombia
Las listas sin numerar representan los elementos de la lista con un "topo" o marca que antecede a cada uno de ellos. Se utiliza la orden <UL></UL> para delimitar la lista, y <LI> para indicar cada uno de los elementos. La orden <UL> puede contener el parmetro type que indica la forma del "topo" o marca que antecede a cada elemento de la lista. Los valores de type pueden ser disk, circle o square, con lo que el topo o marca puede ser un disco, un crculo o un cuadrado. En algunos casos puede interesarnos que la lista no comience por el nmero 1 (por ejemplo si es una lista que continua en otra pgina). Se puede conseguir con el atributo START combinado con TYPE. Esto es una lista ordenada con letras maysculas y que comienza por la E: E. Primera linea F. Segunda linea G. Tercera linea H. Cuarta linea
19
Se escribe: <OL TYPE=A START=5> <LI>Primera linea <LI>Segunda linea <LI>Tercera linea <LI>Cuarta linea </OL> El nmero que pones en el atributo START indica en que nmero o letra comenzar la lista, la E es la quinta letra. Ejemplo <UL type = disk > <LI>Colombia <LI>Mxico <LI>Brasil <LI>EE.UU. </UL> <UL type = square> <LI>Colombia <LI>Mxico <LI>Brasil <LI>EE.UU. </UL> EE.UU. Mxico Brasil EE.UU. Mxico Brasil Resultado
Colombia
Colombia
Las listas de definicin muestran los elementos tipo Diccionario, o sea, trmino y definicin. Se utiliza para ellas las rdenes <DL> y </DL>. El elemento marcado como trmino se antecede de la orden <DT>, el marcado como definicin se antecede de la orden <DD>. Ejemplo. <DL> <DT>WWW <DD>Abreviatura de World Wide Web <DT>FTP <DD>Abreviatura de File FTP Abreviatura de World Wide Web Resultado.
WWW
20
Transfer Protocol <DT>IRC <DD>Abreviatura de Internet Relay Chat </DL> IRC
Abreviatura de File Transfer Protocol
Abreviatura de Internet Relay Chat
Existen otros dos tipos de listas menos comunes. Las listas de Men o Directorio se comportan igual que las listas sin numerar. La lista de Men utiliza la orden
<MENU></MENU> y los elementos se anteceden de <LI> El resultado es una lista sin numerar ms "compacta" es decir, con menos espacio interlineal entre los elementos. La lista de Directorio utiliza la orden <DIR></DIR> y los elementos se anteceden de <LI>. Los elementos tienen un limite de 20 caracteres. Todas las listas se pueden "anidar", es decir incluir una lista dentro de otra, con lo que se consigue una estructura tipo "ndice de materias". Ejemplo <UL type= disk> <LI>Buscadores <UL> <LI>Yahoo o <LI>Ole o <LI>Lycos o </UL> <LI>Links <UL> o <LI>Microsoft o <LI>IBM </UL> </UL> IBM Microsoft Links Lycos Ole Yahoo Buscadores Resultado
21
Ejemplo de imgenes en listas Se escriben todas igual, slo hay que cambiar el nombre de los grficos: <DL> <DT><IMG SRC="bolaroja.gif">Linea de texto <DT><IMG SRC="bolaroja.gif">Linea de texto <DT><IMG SRC="bolaroja.gif">Linea de texto
IMGENES.
Hasta el momento hemos visto como se puede escribir texto en una pgina Web, as como sus posibles formatos. Ahora veremos como incluir una imagen en nuestra pgina, para ello utilizaremos la orden <IMG>. Hay dos formatos de imgenes que todos los navegadores modernos reconocen. Son las imgenes GIF y JPG. Cualquier otro tipo de fichero grfico o de imagen (BMP, PCX, CDR, etc...) no ser mostrado por el navegador, a no ser que dispongas de un programa externo que permita su visualizacin. La orden <IMG> tiene varios parmetros : src "imagen" Indica el nombre del fichero grfico a mostrar. alt "Texto" Mostrara el texto indicado en el caso de que el navegador utilizado para ver la pgina no sea capaz de visualizar la imagen. lowsrc "imagen" Muestra una segunda imagen "superpuesta" sobre la primera una vez se carga la pgina. Este parmetro no es reconocido por la totalidad de los navegadores ya que esta en estudio su aplicacin, as que en la mayora de los casos ser ignorado mostrndose solo la primera imagen (src). En Netscape muestra la imagen indicada por lowsrc en primer lugar, y posteriormente muestra la imagen indicada por src. Si las imgenes son iguales pero tienen distinta "resolucin" se conseguir un efecto tipo "Fade". Si las imgenes son de distinto tamao la imagen indicada en src se redimensionara al tamao indicado por la imagen indicada en lowsrc
22
align TOP / MIDDLE / BOTTOM Indica como se alinear el texto que siga a la imagen. TOP alinea el texto con la parte superior de la imagen, MIDDLE con la parte central, y BOTTOM con la parte inferior. border tamao Indica el tamao del "borde" de la imagen. A toda imagen se le asigna un borde que ser visible cuando la imagen forme parte de un Hyperenlace. height tamao Indica el alto de la imagen en puntos o en porcentaje. Se usa para variar el tamao de la imagen original. width tamao Indica el ancho de la imagen en puntos o en porcentaje. Se usa para variar el tamao de la imagen original. hspace margen Indica el numero de espacios horizontales, en puntos, que separarn la imagen del texto que la siga y la anteceda. vspace margen Indica el nmero de puntos verticales que separaran la imagen del texto que le siga y la anteceda. ismap / usemap Indica que la imagen es un MAPA. Veremos estos parmetros mas adelante en este manual. Ejemplo <IMG src ="caution.gif" alt = "Cuidado !!" > Si el navegador no pudiese visualizar el grfico..... La imagen a mostrar puede encontrase en el mismo lugar (URL) que la pgina Web. Si este no fuera el caso, el nombre de la imagen ha de contener la URL donde se encuentre la imagen. 23
Ejemplo: <IMG src = " http://www.microsoft.com/iexplorer.gif"> Veamos varios ejemplos "jugando" con los tamaos de la imagen, as como comprobando la alineacin de los textos. (Recuerde que en funcin del navegador que Ud. utilice pueden verse o no los efectos de cada parmetro). Ejemplo <IMG src="caution.gif" width=100 > <IMG src="caution.gif" height=20 > <IMG src="caution.gif" align=TOP>Atencin !!! <IMG src="caution.gif" align=MIDDLE>Atencin !!! <IMG src="caution.gif" align=BOTTOM>Atencion !!! Tenga en cuenta <IMG src="caution.gif" hspace=10> esta indicacin. Tenga en cuenta <IMG src="caution.gif"vspace=20> esta indicacin. Imagen con un texto alternativo Sirve para que, si no es posible cargar la imagen, aparezca un texto en su lugar. Tambin se utiliza para que al colocar el puntero del ratn sobre la imagen, sin pulsar, aparezca el texto. Para verlo tienes de deshabilitar la opcin de cargar imgenes de tu visualizador (slo es posible con Netscape). <IMG SRC="sugeren.gif" ALT="AQUI VA UNA IMAGEN">
ENLACES.
La caracterstica principal de una pgina Web es que podemos incluir Hypervinculos. Un Hypervinculo es un elemento de la pgina que hace que el navegador acceda a otro recurso, otra pgina Web, un archivo, etc. Para incluir un Hyperenlace se utiliza las ordenes <A> y </A>. El texto o imagen que se encuentre dentro de los lmites de esta orden ser sensible, esto quiere decir que si 24
pulsamos con el ratn sobre el, se realzar la funcin de Hypervinculo. Si el Hypervinculo esta indicado por un texto, este aparecer subrayado y en distinto color, si se trata de una imagen, esta aparecer con un borde rodendola. Esta orden tiene el parmetro href que indica el lugar a donde nos llevar el Hypervinculo si lo pulsamos. Ejemplo: <A href = "http://www.espacio.ya.com"> Pulse para ir a la pgina de Espacio.ya.com</A> Se vera: Pulse para ir a la pgina de Espacio.ya.com Lo mismo podramos hacer con un grfico. Ejemplo: Para buscar en Internet: <A href = "http://www.ya.com/" ><IMG src = "ya.gif"></A> Se vera: Para buscar en Internet: http://www.ya.com A continuacin analizamos los enlaces a recursos externos y los enlaces a partes de una pgina (ndices).
ENLACES A RECURSOS EXTERNOS.

Los recursos externos bsicos que pueden visualizarse son: Pginas HTML (http://...) Gopher (gopher://...) Servidores FTP (ftp://...) News (news:...) Imgenes (...)
En todos ellos se requieren la orden general: <A HREF ="direccin del recurso">Texto en el que hay que picar con el ratn para acceder al recurso</A>. 25
ENLACES A PARTES DE UN DOCUMENTO.

Para establecer un enlace con otra parte del documento, se utiliza la expresin:
<A HREF="#referencia">Texto de enlace</A>
en la que referencia indica la marca hacia la que hay que enlazar, y texto de enlace el texto sobre el que se picar para establecer dicho enlace.
Para que la orden se ejecute correctamente, deber existir en alguna parte del documento la expresin: <A NAME="referencia">..texto opcional..</A>, que ser el destino del enlace. Por ejemplo, podemos situar al inicio de una pgina HTML el siguiente cdigo:
<A NAME="m0">INDICE</A> <UL> <LI><A HREF="#m1">Introduccin</A> <LI><A HREF="#m2">Referencias histricas</A> <LI><A HREF="#m3">Aspectos de inters</A> </UL>
y despus desarrollar cada uno de los apartados:
<A NAME="m1>Introduccin</A><BR> ....texto de la introduccin.... <A NAME="m2">Referencias histricas</A> ....texto de las referencias histricas.... <A NAME="m3">Aspectos de inters</A> ....texto de los aspectos de inters.... <A HREF="#m0">ndice de contenidos</A>
Cada vez que se pique con el ratn el texto de la referencia (HREF), se enlazar con la seccin correspondiente (NAME).
26
El enlace se puede realizar tambin hacia una parte de un documento particular. As, la expresin: <A HREF="main.htm#m5">...texto a picar...</A>
permite enlazar con seccin m5 de la pgina main.htm. Ir al ndice <A HREF="indice.htm"> <img src="bolaroja.gif"> </A>. Y este sera el resultado: Ir al ndice Para que este la imagen sin borde Ir al ndice <A HREF="indice.htm"> <img src="bolaroja.gif" border=0> </A>. Y este sera el resultado: Ir al ndice
MARQUEE.
La orden <MARQUEE></MARQUEE> crea una marquesina con un texto en su interior que se desplaza. Funciona nicamente con Ms-Explorer. Sus parmetros son los siguientes : align top / middle / bottom Indica si el texto del interior de la marquesina se alinea en la zona alta (top), en la baja (bottom) o en el centro (middle) de la misma. bgcolor "cdigo de color" Indica el color del fondo de la marquesina. direction left / right Indica hacia que lugar se desplaza el texto, hacia la izquierda (left) o hacia la derecha (right) height nm o % Indica la altura de la marquesina en puntos o porcentaje en funcin de la ventana del navegador.
27
width nm o % Indica la anchura de la marquesina en puntos o porcentaje en funcin de la ventana del navegador. loop nm / infinite Indica el numero de veces que se desplazar el texto por la marquesina. Si se indica infinite, se desplazar indefinidamente. scrolldelay nm. Indica el nmero de milisegundos que tarda en reescribirse el texto por la marquesina, a mayor nmero mas lentamente se desplazar el texto. Veamos un ejemplo de esta orden: Ejemplo: <MARQUEE bgcolor = "#FFFFFF" width = 50% scrolldelay = 0 > La pgina de Los Computadores</MARQUEE> Si estas utilizando Ms-Explorer veras el efecto producido a continuacin:
La pagina de Los Computadores
TABLAS.
Ya es hora de ver otro tipo de funciones que adornaran nuestra pgina en esta parte del curso veremos las TABLAS, Las tablas son elemento que nos permiten representar cualquier elemento de nuestra pgina (texto, listas, imgenes, etc.) En diferentes filas y columnas separadas entre si. Es una herramienta muy til para "ordenar" contenidos de distintas partes de nuestra pgina. La informacin contenida en una tabla estar contenida entre las rdenes:
<TABLE BORDER=n> y </TABLE>
donde BORDER=n indica el grosor del borde de la tabla. Cuando n es 0 la tabla se visualizar sin borde y a medida que dicho nmero se incremente, el borde ser de mayor grosor. Los parmetros opcionales para esta orden son :
28
cellspacing num Indica el espacio en puntos que separa las celdas que estn dentro de la tabla. cellpadding num Indica el espacio en puntos que separa el borde de cada celda y el contenido de esta. width num % Indica la anchura de la tabla en puntos o en porcentaje en funcin del ancho de la ventana del navegador. Si no se indica este parmetro, el ancho se adecuar al tamao de los contenidos de las celdas. height num % Indica la altura de la tabla en puntos o en porcentaje en funcin del alto de la ventana del navegador. Si no se indica este parmetro, la altura se adecuar a la altura de los contenidos de las celdas. bgcolor cdigo de color Especifica el color de fondo de toda la Tabla. Para definir las celdas que componen la tabla se utilizan las ordenes <TD> y <TH>. <TD> indica una celda normal, y <TH> indica una celda de "cabecera", es decir, el contenido ser resaltado en negrita y en un tamao ligeramente superior al normal. Los parmetros opcionales de ambas ordenes son : align LEFT / CENTER / RIGHT / JUSTIFY Indica como se debe alinear el contenido de la celda, a la izquierda (LEFT), a la derecha (RIGHT), centrado (CENTER) o justificado (JUSTIFY). valign TOP / MIDDLE / BOTTOM Indica la alineacin vertical del contenido de la celda, en la parte superior (TOP), en la inferior (BOTTOM), o en el centro (MIDDLE). rowspan num Indica el nmero de filas que ocupar la celda. Por defecto ocupa una sola fila.
29
colspan num Indica el nmero de columnas que ocupar la celda. Por defecto ocupa una sola columna. width num % Indica la anchura de la columna en puntos o en porcentaje en funcin del ancho de la ventana del navegador. Si no se indica este parmetro, el ancho se adecuar al tamao de los contenidos. Este parmetro solo funciona en los navegadores modernos. bgcolor cdigo de color Especifica el color de fondo del elemento de la Tabla. Para indicar que acaba una fila de celdas se utiliza la orden <TR>. A continuacin mostraremos un ejemplo de una tabla que contiene solo texto. Como se indic anteriormente el contenido de las celtas puede ser cualquier elemento de HTML, un texto, una imagen, un Hyperenlace, una Lista, etc... Ejemplo: <TABLE border=0 cellspacing=2 cellpadding=2 width =80%> <TH align = center>Buscadores <TH align = center colspan = 2>Otros Links <TR> <TD align = CENTER>Ya.com <TD align = CENTER>Supermotor.com <TD align = CENTER>Rappelweb.com <TR> <TD align = CENTER>Red.ya.com <TD align = CENTER>Finanzas.com <TD align = CENTER>Tiendapc.com </TABLE>
30
se ver: Buscadores Ya.com Red.ya.com Supermotor.com Finanzas.com Otros Links Rappelweb.com Tiendapc.com
ejemplo: <TABLE BORDER=1> <TR><TH>Comando<TH>funcin <TR><TD>TR<TD>Siguiente fila <TR><TD>TH<TD>Encabezado en columna siguiente <TR><TD>TD<TD>Texto en la columna siguiente </TABLE> se ver: Comando TR TH TD Siguiente fila Encabezado en la columna siguiente Texto en la columna siguiente funcin
Observa como los encabezamientos de las columnas (TH) figuran en negrita y centrados, mientras que el texto de las celdas (TD) aparece sin resaltar y alineado a la izquierda.
Las celdas de una tabla pueden contener todo tipo de informacin: enlaces, grficos, listas, ... Las tablas tambin pueden centrarse en la pantalla, utilizando las rdenes <CENTER> y </CENTER> antes y despus, respectivamente, del conjunto de rdenes de la tabla.
31
Ejemplo: <CENTER> <TABLE BORDER=0> <TR><TH COLSPAN="2">Secciones del tutorial <TR><TD> <UL> <LI>Comandos bsicos <LI>Imgenes <LI>Enlaces </UL> <TD> <UL> <LI>Tablas <LI>Funciones especiales <LI>Recomendaciones </UL> <TR><TH COLSPAN="2">Introduccin de imgenes en una tabla <TR><TD>Logotipo de Espacio.ya.com<TD><IMG SRC="logo_espacio.gif"> <TR><TH COLSPAN="2">Acceso a otros recursos <TR><TD>URL del portal de Ya.com Internet_Factory<TD> <A HREF="http://www.ya.com">http://www.Ya.com </A> </TABLE> Se ver: Secciones del tutorial Comandos bsicos Imgenes Enlaces Tablas Funciones especiales Recomendaciones
Introduccin de imgenes en una tabla Logotipo de Espacio.ya.com Acceso a otros recursos URL del portal de Ya.com Internet_Factory http://www.Ya.com
32
TAMAOS DE LETRAS.
Los tamaos de letra puede variarse a lo largo de una pgina con la orden:
<font size="n">.....texto.....</font>
donde n es un nmero entre 1 y 7, siendo 1 el tamao menor y 7 el mayor: <font size="1">Tamao de letra 1</font><BR> <font size="2">Tamao de letra 2</font><BR> <font size="3">Tamao de letra 3</font><BR> <font size="4">Tamao de letra 4</font><BR> <font size="5">Tamao de letra 5</font><BR> <font size="6">Tamao de letra 6</font><BR> <font size="7">Tamao de letra 7</font><BR>
Tamao de letra 1
Tamao de letra 2
Tamao de letra 3
Tamao de letra 4
Tamao de letra 5
Tamao de letra 6
Tamao de letra 7
En el caso de no querer dar un valor al tamao a la letra el valor por defecto ser de 3. Sin embargo, el tamao de letra tambin puede modificarse incrementando o disminuyendo el tamao que ese momento tenga la letra. As, la orden <FONT SIZE="+1">..... texto .....</FONT> incrementa en un tamao el tamao actual. De la misma forma, la orden: <FONT SIZE="-1">..... texto .....</FONT> disminuye un tamao. Ejemplo: Los tamaos <FONT SIZE="+1">de letra </FONT><FONT SIZE="+2">pueden variarse 33
</FONT><FONT SIZE="+3"> a voluntad </FONT><FONT SIZE="+4">incrementndolos o </FONT><FONT SIZE="1"> disminuyndolos</FONT> Se vera:

Los tamaos de letra
pueden variarse
a voluntad incrementdolos o
disminuyndolos
FORMULARIOS PARA LA CAPTURA DE DATOS.

Otra de las posibilidades que proporciona HTML es la entrada de datos de los usuarios mediante un conjunto de elementos de control para luego procesarla. En un formulario podremos solicitar diferentes datos (campos) cada uno de los cuales quedar asociado a una variable. Una vez se hayan introducido los valores en los campos, el contenido de estos ser enviado a la direccin (URL) donde tengamos el programa que pueda procesar las variables. Para poder realizar este ltimo paso de procesar las variables necesitaremos realizar un programa externo en algn lenguaje de programacin. A este programa externo se le suele llamar CGI (Common Gateway Interface). La creacin de este tipo de programas sera tema de otro manual diferente, por lo que aqu veremos como se pueden enviar las variables a nuestra direccin de correo electrnico. La declaracin del formulario se pone entre las ordenes <FORM> y </FORM>. En el interior de la declaracin se indican los elementos (variables) de entrada. Se pueden incluir todas las ordenes que se deseen dentro de estas dos pero no es posible anidar formularios entre si. La orden <FORM> tiene los parmetros action y method. action = "programa" Indica el programa que va a "tratar" a las variables que se envien con el formulario. En nuestro caso enviaremos las variables por correo electrnico, con lo que el "programa" ser "mailto: direccion_de_correo".
method = POST / GET Indica el mtodo segn el que se transferiran las variables. POST produce la modificacin del documento de destino (como en el caso de enviar por correo las variables). GET no produce cambios en el documento destino (como en el caso de una consulta a una base de datos, p.ej. una pgina de bsqueda en Internet). 34
Campos de Entrada Para la introduccin de las variables se utiliza la orden <INPUT>. Esta orden tiene el parmetro type que indica el tipo de variable a introducir y name que indica el nombre que se le dar al campo. Cada tipo de variable tiene sus propios parmetros. type= text name = campo Indica que el campo a introducir ser un texto. Sus parmetros son : maxlenght = numero Numero mximo de caracteres a introducir en el campo. size = numero Tamao en caracteres que se mostrar en pantalla. value = "texto" Valor inicial del campo. Normalmente ser " ", o sea, vaci. type = password name = campo Indica que el campo sera una palabra de paso. Mostrar asteriscos (*) en lugar de las letras escritas. Sus parmetros opcionales son los mismos que para text. type = checkbox name = campo El campo se elegir marcando una casilla. Se permite marcar varias casillas. Los valores de las casillas sern indicados por : value = "valor" checked La casilla aparecer marcada por defecto.
type = radio name = campo El campo se elegir marcando una casilla. Solo permite marcar una sola de las casillas. Los valores de las casillas sern indicados por: value = "valor" 35
type = image name = campo El campo contendr el valor de las coordenadas del punto de la imagen pinchado. Debe indicarse la imagen con el parmetro: src = "fichero de imagen". type = hidden name = campo El usuario no puede modificar su valor, ya que el campo no es visible se manda siempre con el valor indicado por el parmetro: value = "valor" type = submit Representa un botn. Al pulsar este botn la informacin de todos los campos se enva al programa indicado en <FORM>. Tiene el parmetro value = "texto" que indica el texto que aparecer en el botn. type = reset Representa un botn. Al pulsar este botn se borra el contenido de todos los campos. El parmetro value = "texto" indica el texto que aparecer en el botn. Campos de Seleccin Este tipo de campos despliegan una lista de opciones, entre las que debemos escoger una o varias. Se utiliza para ellos la orden <SELECT> </SELECT> . Sus parmetros son : name = campo Nombre del campo size = num Numero de opciones visibles. Si se indica 1 se presenta como un men desplegable, se indica mas de uno se presenta como una lista con barra de desplazamiento. mltiple Permite seleccionar mas de un valor para el campo.
36
Las diferentes opciones de la lista se indican con la orden <OPTION>. Esta orden puede incluir el parmetro selected para indicar cual es la opcin por defecto. En caso de que no se especifique, se tomara por defecto la primera opcin de la lista. Areas de texto Representa un campo de texto de mltiples lneas. Normalmente se utiliza para que se incluyan en el comentario. La orden usada es <TEXTAREA> </TEXTAREA>, y sus parmetros: name = campo Nombre del campo. cols = num. Numero de columnas de texto visibles. rows = num. Numero de filas de texto visibles. wrap = VIRTUAL / PHYSICAL Justifica el texto automticamente en el interior de la caja. La opcin PHYSICAL enva las lneas de texto separadas en lneas fsicas. La opcin VIRTUAL enva todo el texto seguido. Veamos a continuacin un ejemplo de formulario utilizando todas las formas de introduccin de datos. Ejemplo: <FORM action = "mailto: julian@subdimension.com" method = post > Tu Nombre:<INPUT type = text name = nombre size = 30 > <P> Tu Edad : <INPUT type = radio name = edad value = "-20" > Menos de 20 aos <INPUT type = radio name = edad value = "20-40" > Entre 20 y 40 aos <INPUT type = radio name = edad value = "+40" > Mas de 40 aos <P> <INPUT type = hidden name = lugar value = "pagina personal" > Te parece til este manual? 37
<SELECT name = donde > <OPTION>Mucho </OPTION> <OPTION>Bastante</OPTION> <OPTION>Regular </OPTION> <OPTION>Nada </OPTION> </SELECT> <P> Tus Comentarios: <BR> <TEXTAREA name = comentario rows = 5 cols = 40 wrap = virtual ></TEXTAREA> <P> <INPUT type = submit value = "Enviar" > <INPUT type = reset value = "Borrar" > </FORM> se vera:
Tu Nombre: Tu Edad : Menos de 20 aos Mas de 40 aos
Te parece til este manual? Tus Comentarios:
Enviar
Restablecer
Si rellenas este FORM y pulsas sobre el botn Enviar, (estando conectado a Internet), se generar un mensaje de correo a mi direccin de correo julian@subdimension.com. Si pulsas el botn Borrar se borraran los datos que hayas introducido en el Formulario. Si en vez de enviar estas variables por correo electrnico, fuesen enviadas a un programa (CGI), este programa podra tratarlas y dar como respuesta una nueva pgina Web. IMPORTANTE : La opcin mailto: en el parmetro action de la orden <FORM> solo funciona correctamente con Netscape. En Microsoft Explorer esta opcin da como resultado un correo en blanco. Para enviar un formulario por e-mail sin importar el navegador utilizado se 38
ha de utilizar un programa externo que realic este proceso. En la pagina MAILFORM encontraras informacin de como implementar un programa externo para el envo de formularios va e-mail en tu pagina Web.
EXTENSIONES DEL HTML.

Netscape y Microsoft han aadido al estndar de HTML diversas ordenes para hacer ms atractiva la visualizacin de las pginas Web. Veremos aqu las ms interesantes y la forma de usarlas. Estas rdenes pueden no funcionar en algn navegador de HTML, pero el uso de ellas por parte de los dos "grandes" del software para Internet hace prever que sern inmediatamente incluidas en las nuevas versiones del resto de los navegadores.
APPLET.
La orden <APPLET></APPLET> indica la ejecucin de un programa (applet) externo escrito en lenguaje JAVA. Java es un lenguaje creado por Sun Microsystems que permite realizar operaciones multimedia sin incorporar nuevas ordenes HTML. Los applets son muy variados, y cada uno de ellos realiza una tarea distinta. Hay applets para hacer que el texto se mueva dentro de la hoja, se contraiga y expanda, etc. Esta orden tiene los siguientes parmetros : codebase URL Direccin donde se encuentra el applet Java ( Por ejemplo http://www.ucm.es/java). Si el Applet se encuentra en el mismo lugar que la pagina Web este parmetro no es necesario. code programa Indica el nombre del programa (applet) Java a ejecutar. width nm. height nm. Indican el espacio (ancho y alto) en puntos en el que el programa realizar su funcin.
39
Dentro de la orden <APPLET> se incluye la orden <PARAM> que enva al programa Java los parmetros necesarios para su funcionamiento. Esta orden suele tener como mnimo los parmetros : name campo Nombre de la variable a enviar. value valor Valor de la variable a enviar. Veamos un ejemplo en el que se ejecuta un programa Java que permite que un texto se desplace de un lado a otro de una zona de la pantalla: Ejemplo: <APPLET codebase="http://www.ucm.es/java" code="Laufschrift.class" width = 350 height = 25 > <PARAM name = bg.color value = "0,255,0"> <PARAM name = message value = "**Bienvenido a mi pagina WEB - Manual de HTML**"> </APPLET>
SONIDO DE FONDO.
Nuestra pgina Web puede tener un sonido que se active al entrar en la pgina. Esta caracterstica de Ms Explorer utiliza la orden <BGSOUND> y tiene los siguientes parmetros : src "fichero" Indica el nombre del fichero que contiene el sonido (.waw, .mid). loop num / infinite Indica el nmero de veces que se reproducir el sonido. Si se indica infinite, el sonido se reproducir de forma continua hasta que abandonemos la pgina. Un ejemplo de esta orden sera:
40
Ejemplo: <BGSOUND src= "yesterday.mid" loop= infinite> Para utilizar esta funcin en Netscape se utiliza la orden <EMBED>. Esta orden se utiliza realmente para "incrustar" un objeto en nuestra pagina Web. Dicho objeto puede ser un fichero de sonido, un vdeo, un grfico BMP, etc. Tiene los siguientes parmetros : src "fichero" Indica el nombre del fichero que contiene el sonido (.waw, .mid) o el video (.avi). autostart true Si deseamos que la reproduccin se inicie inmediatamente. loop true Incluirlo si deseamos que la reproduccin no se detenga. (cuando termina, vuelve a comenzar automticamente). volume nmero Volumen al que se reproducen los ficheros de sonido. width nmero height nmero Anchura y Altura de la representacin del objeto. (Si es un sonido no es necesario este parmetro). controls smallconsole Visualiza una serie de controles que nos permiten iniciar la reproduccin del fichero, as como realizar una pausa o detenerlo. Un ejemplo de esta orden sera: Ejemplo: <EMBED src= "yesterday.mid" loop= true autostart= true volume=50 width=50 height=15 controls=smallconsole>
41
FRAMES.
Las frames es una tcnica para subdividir la pantalla del navegador en diferentes ventanas. Cada una de estas ventanas se podr manipular por separado, permitindonos mostrar en cada una de ellas una pgina Web diferente. Esto es muy util para, por ejemplo, mostrar permanentemente en una ventana los diferentes contenidos de nuestra pgina, y en otra ventana mostrar el contenido seleccionado. Para definir las diferentes subventanas o frames se utilizan las ordenes <FRAMESET>, </FRAMESET> y <FRAME>. La orden <FRAMESET> indica como se va a dividir la ventana principal. Pueden incluirse varias ordenes <FRAMESET> anidadas con el objeto de subdividir una divisin u otra subdivisin. Los parmetros de <FRAMESET> son rows y cols en funcin de si la divisin de la pantalla se realiza por filas (rows) o columnas (cols). Los parmetros rows y cols se acompaan de un grupo de nmeros que indican en puntos o en porcentaje el tamao de cada una de las subventanas. En caso de utilizar rows los tamaos de las subventanas se entienden indicados de arriba a abajo, es decir, el primer valor ser el asignado a la ventana superior, el segundo a la ventana inmediatamente inferior, etc... En el caso de cols los tamaos se aplican de izquierda a derecha. Ejemplos Se ver Crea tres subventanas horizontales, la primera <FRAMESET rows = "25%,50%,25%"> ocupar un 20% de la ventana principal, la segunda un 50% y la tercera un 25%.
Crea tres subventanas verticales, la primera y la tercera tendrn un "ancho" fijo de 120 y 100 puntos <FRAMESET cols = "120,*,100"> respectivamente. La segunda ocupar el resto de la ventana principal (*).
En este caso "anidamos" dos ordenes. La primera divide la ventana principal en dos subventanas <FRAMESET cols = "15%,*"> <FRAMESET rows = 20%,*"> verticales, la primera ocupa un 15% de la ventana principal y la segunda el resto. La segunda orden vuelve a subdividir la primera subventana creada anteriormente, pero esta vez en dos subventanas horizontales, la superior ocupar un 20% de la
42
subventana, y la inferior el resto.
La orden <FRAME> indica las propiedades de cada subventana. Es necesario indicar una orden <FRAME> para cada subventana creada. Los parmetros de <FRAME> son: name = "nombre" Indica el nombre por el que nos referiremos a esa subventana. src = "URL" La ventana mostrar en principio el contenido del documento HTML que se indique. marginwidth = nm. Indica el margen izquierdo y derecho de la subventana en puntos. marginheight = nm Indica el margen superior e inferior de la subventana en puntos. scrolling = "yes / no / auto" Indica si se aplica una barra de desplazamiento a la subventana en el caso de que la pgina que se cargue en ella no quepa en los lmites de la subventana. el valor "yes" muestra siempre la barra de desplazamiento, "no" no la muestra nunca (la zona de la pgina que no quepa en la subventana no la veremos), y "auto" la muestra solo en caso de que sea necesario para poder ver la pgina. noresize Un usuario que este viendo una pagina con frames puede redimensionarla
seleccionando un borde de la subventana con el cursor y desplazndolo. Si se indica este parmetro, el usuario no podr "redimensionar" las subventanas con el navegador. border = nm. Indica el "borde" que separara esta frame de la siguiente. Si se indica cero (0) no se mostrara borde entre las frames, consiguiendo un efecto muy elegante, siempre y cuando el "fondo" de todas las frames sea el mismo, o sean colores slidos.
43
Los navegadores que no soportan la caracterstica de subventanas, no mostrarn nada de lo indicado con estas ordenes. Es por ello que existe una orden llamada <NOFRAMES> </NOFRAMES>. Todo los indicado entre esta orden ser lo que muestren los navegadores sin capacidad para visualizar Frames. Los navegadores que soporten Frames obviaran las ordenes incluidas entre <NOFRAMES> </NOFRAMES>. Si su navegador puede visualizar Frames tendr en estos momentos la pantalla dividida en dos zonas independientes, en la izquierda ver el ndice de materias de este manual, y en la derecha estar viendo la seccin del manual que haya seleccionado. En otro caso simplemente ver la seccin del manual. La definicin de las Frames debe ir antes de la definicin del cuerpo de documento (<BODY>). Veamos un ejemplo completo de Frames con comentarios: <HTML> <HEAD> <TITLE>Pgina con Frames</TITLE> </HEAD> <FRAMESET cols = "15%,*">  <FRAMESET rows = "35%,*">  <FRAME name = "upd" src = "update.htm" scrolling = "auto">  <FRAME name = "menu" src = "menu1.htm" scrolling = "auto">  </FRAMESET>
44
 <FRAME name = "home" src = "home.htm" scrolling = "auto">  <NOFRAMES>  <BODY> SU navegador NO MUESTRA FRAMES. Pulse <A href= "home.htm"> AQUI </A> para ir a la pgina sin Frames. </BODY> </NOFRAMES> </FRAMESET>  </HTML>
Al usar Frames, nos encontramos con un problema. Cuando queramos mostrar una pgina Web debemos indicarle al navegador en que subventana queremos que se muestre. Por defecto se mostrar en la ventana donde se encuentre el enlace. Para poder escoger la subventana de destino del Hyperenlace se aade un nuevo parmetro a la orden <A href= > </A>. Este parmetro se llama target y puede tener los siguientes valores : target "nombre _ ventana" Muestra el Hyperenlace en la ventana cuyo nombre se indica. target "_blank" Abre una nueva copia del navegador y muestra el Hyperenlace en ella. (Si usamos Netscape esto provoca que tengamos funcionando dos copias del programa).
45
target "_self" Se muestra el Hyperenlace en la subventana activa. target "_parent" El Hyperenlace se muestra en el <FRAMESET> definido anteriormente al actual. Si no hay ningn <FRAMESET> anterior se muestra a pantalla completa suprimiendo todas las subventanas de la pantalla. target "_top" Suprime todas las subventanas de la pantalla y muestra el Hyperenlace a pantalla completa. Ejemplos Muestra Resultado la pagina de
<A
ref.=
"http://www.microsoft.com/"
target
"_blank">
Microsoft en una nueva copia del navegador Muestra la pagina de Ibm en
<A href= "http://www.ibm.com/" target = "home">
la
subventanna
llamada
"home" Muestra <A href= "http://www.yahoo.com/" target = "_top"> la pagina del
buscador Yahoo a pantalla completa
SCRIPTS.
Un Script es un programa escrito en un lenguaje distinto al HTML que se puede incluir en una pgina Web "tal cual". Para incluir estos programas en una pgina Web se utiliza la orden <SCRIPT> </SCRIPT>. Esta orden tiene el parmetro language para indicar el lenguaje de programacin utilizado para el Script. El cdigo del programa debe "ocultarse" con las rdenes de comentario de HTML  con el objeto de que no sean mostradas por los navegadores que no reconocen la orden <SCRIPT>. Los scripts ms usados suelen estar escritos en lenguaje JAVA. Este lenguaje desarrollado por Sun Microsystems permite realizar operaciones de animacin y multimedia en una pgina Web. 46
La inclusin de un Script en una pgina Web se hara de la siguiente forma : <SCRIPT language = "JavaScript"> < !-instrucciones del programa ...... --> </SCRIPT>
47
ANEXOS
48
CDIGOS HEXADECIMALES DE COLOR

Estos cdigos de color se pueden utilizar como valor de atributo en los elementos <FONT COLOR> y <BODY BGCOLOR FGCOLOR TEXT LINK VLINK ALINK>. Algunos no funcionarn en ciertos visualizadores, as como si Windows no est configurado con 256 colores al menos. La codificacin de estos colores est basada en mezclas cromticas RGB (RED GREEN BLUE), es decir, se mezclan ciertas cantidades de los tres colores bsicos (rojo verde y azul), para conseguir el color deseado. La cantidad de cada color est definida por el cdigo que utilizamos, que tiene seis dgitos en hexadecimal. Si los cortamos en 3 grupos de dos de izquierda a derecha, obtendremos la cantidad (en hexadecimal) de cada color. La sintaxis para cambiar el fondo de la pgina (background) a color rojo es: <BODY BGCOLOR=#FF0000> y para dar color al texto, ver la pgina Texto de colores. Para combinaciones generales de colores, ver el ejemplo de control de colores. Lista de cdigos RGB Puedes probar los diez primeros para hacerte una idea, o puedes verlos todos desde aqu White rgb=#FFFFFF Red rgb=#FF0000 Green rgb=#00FF00 Blue rgb=#0000FF Magenta rgb=#FF00FF Cyan rgb=#00FFFF Yellow rgb=#FFFF00 Black rgb=#000000 Aquamarine rgb=#70DB93 Baker's Chocolate rgb=#5C3317 Blue Violet rgb=#9F5F9F Brass rgb=#B5A642 Bright Gold rgb=#D9D919 Brown rgb=#A62A2A Bronze rgb=#8C7853 Bronze II rgb=#A67D3D Cadet Blue rgb=#5F9F9F Cool Copper rgb=#D98719 Copper rgb=#B87333 Coral rgb=#FF7F00 Corn Flower Blue rgb=#42426F Dark Brown rgb=#5C4033 Dark Green rgb=#2F4F2F Dark Green Copper rgb=#4A766E Dark Olive Green rgb=#4F4F2F Dark Orchid rgb=#9932CD Dark Purple rgb=#871F78 Dark Slate Blue rgb=#6B238E Dark Slate Grey rgb=#2F4F4F 49
Dark Tan rgb=#97694F Dark Turquoise rgb=#7093DB Dark Wood rgb=#855E42 Dim Grey rgb=#545454 Dusty Rose rgb=#856363 Feldspar rgb=#D19275 Firebrick rgb=#8E2323 Forest Green rgb=#238E23 Gold rgb=#CD7F32 Goldenrod rgb=#DBDB70 Grey rgb=#C0C0C0 Green Copper rgb=#527F76 Green Yellow rgb=#93DB70 Hunter Green rgb=#215E21 Indian Red rgb=#4E2F2F Khaki rgb=#9F9F5F Light Blue rgb=#C0D9D9 Light Grey rgb=#A8A8A8 Light Steel Blue rgb=#8F8FBD Light Wood rgb=#E9C2A6 Lime Green rgb=#32CD32 Mandarian Orange rgb=#E47833 Maroon rgb=#8E236B Medium Aquamarine rgb=#32CD99 Medium Blue rgb=#3232CD Medium Forest Green rgb=#6B8E23 Medium Goldenrod rgb=#EAEAAE Medium Orchid rgb=#9370DB Medium Sea Green rgb=#426F42 Medium Slate Blue rgb=#7F00FF Medium Spring Green rgb=#7FFF00 Medium Turquoise rgb=#70DBDB Medium Violet Red rgb=#DB7093 Medium Wood rgb=#A68064 Midnight Blue rgb=#2F2F4F Navy Blue rgb=#23238E Neon Blue rgb=#4D4DFF Neon Pink rgb=#FF6EC7 New Midnight Blue rgb=#00009C New Tan rgb=#EBC79E Old Gold rgb=#CFB53B Orange rgb=#FF7F00 Orange Red rgb=#FF2400 Orchid rgb=#DB70DB Pale Green rgb=#8FBC8F Pink rgb=#BC8F8F Plum rgb=#EAADEA Quartz rgb=#D9D9F3 Rich Blue rgb=#5959AB Salmon rgb=#6F4242 Scarlet rgb=#8C1717 Sea Green rgb=#238E68 Semi-Sweet Chocolate rgb=#6B4226 Sienna rgb=#8E6B23 Silver rgb=#E6E8FA 50
Sky Blue rgb=#3299CC Slate Blue rgb=#007FFF Spicy Pink rgb=#FF1CAE Spring Green rgb=#00FF7F Steel Blue rgb=#236B8E Summer Sky rgb=#38B0DE Tan rgb=#DB9370 Thistle rgb=#D8BFD8 Turquoise rgb=#ADEAEA Very Dark Brown rgb=#5C4033 Very Light Grey rgb=#CDCDCD Violet rgb=#4F2F4F Violet Red rgb=#CC3299 Wheat rgb=#D8D8BF Yellow Green rgb=#99CC32
51
EJEMPLOS
52
EJEMPLO DE UN DOCUMENTO HTML:

<HTML> <HEAD> <TITLE>Este es mi primer documento HTML</TITLE> </HEAD> <BODY> PRACTICA # 1 </BODY> </HTML>
ETIQUETAS PARA TEXTO

ETIQUETA <ADDRESS> FUNCION EJEMPLO RESULTADO Mi direccin es:
Se utiliza para agregar <ADDRESS>Mi direccion el efecto de "itlico" al es:</ADDRESS> texto. Negritas o remarcado (bold). Define el tamao inicial del texto. Nota: El tamao base del texto por omisin es 3, pero con esta etiqueta se puede modificar, incrementar o disminuir. En los ejemplos 1 y 2, se obtiene el mismo resultado, ya que la base es 3. Resulta lo mismo definir la base a 4 que sumar 1 al valor por omisin (3). <B>Este es un texto remarcado</B> <BASE FONT SIZE=4>Texto base # 4</FONT> <BASE FONT SIZE=+1>Texto base +1</FONT> <BASE FONT SIZE=+2>Texto base +2</FONT> <BASE FONT SIZE= 1>Texto base -1</FONT>
<B> <BASE FONT SIZE=n>
Este es un texto remarcado
Texto base # 4 Texto base +1
Texto base +2
Texto base -1
<BLINK> <CENTER> <EM> <FONT SIZE=n>
Texto parpadeante (blinking) Centrar Itlico o enfatizado Define el tamao del texto. Nota: El tamao del texto por omisin es 3, pero con esta etiqueta
<BLINK>Este texto debe apagar y prender</BLINK> <CENTER>Texto centrado</CENTER> <EM>Este es un texto itlico</EM> <FONT SIZE=4>Texto # 4</FONT> <FONT SIZE=+1>Texto +1</FONT>
Este texto debe apagar y prender Texto centrado Este es un texto itlico
Texto base # 4 Texto base +1
53
se puede modificar, <FONT SIZE=+2>Texto incrementar o disminuir. +2</FONT>
Texto base +2
En los ejemplos 1 y 2, Texto base -1 se obtiene el mismo <FONT SIZE= -1>Texto base resultado, ya que la -1</FONT> base es 3. Resulta lo mismo definir el tamao a 4 que sumar 1 al valor por omisin (3). <H1> <H2> <H3> <H4> <H5> <H6> Encabezados o ttulos <H1>Ttulo Nivel 1</H1> (headers) <H2>Ttulo Nivel 2</H2>
Nota: Los encabezados tienen 6 niveles o tamaos de texto predefinidos. El <H1> es el primer nivel y por lo tanto el ms grande. Cada <Hn> es una lnea independiente y su texto es remarcado (bold).
Ttulo Nivel 1 Ttulo Nivel 2
<H3>Ttulo Nivel 3</H3> Ttulo Nivel 3 <H4>Ttulo Nivel 4</H4> Ttulo Nivel 4 <H5>Ttulo Nivel 5</H5> Ttulo Nivel 5 <H6>Ttulo Nivel 6</H6> Ttulo Nivel 6 <I>Este es un texto itlico</I> <STRIKE>Este es un texto marcado</STRIKE>
<I> <STRIKE> <STRONG> <SUB> <SUP> <U>
Itlico Marcado Negritas o remarcado Subscript Superscript Subrayado
Este es un texto itlico Este es un texto marcado
<STRONG>Este es un texto Este es un texto remarcado remarcado</STRONG> H<SUB>2</SUB>O Clima : 30<SUP>o</SUP>C <U>Este es un texto subrayado</U> H2O Clima : 30 C Este es un texto subrayado
o
OTROS ATRIBUTOS PARA TEXTO (COLOR, TIPO DE LETRA, ETC)

ETIQUETA <FONT COLOR="#FF0000"> <FONT FACE="Technical"> FUNCION EJEMPLO RESULTADO Este texto es rojo
Modifica el color <FONT COLOR="#FF0000">Este del texto texto es rojo </FONT> Modifica el tipo de letra (font)
<FACE="Technical">Este texto es de Este texto es de tipo tipo Technical</FONT> Technical
54
EJEMPLOS DE COMBINACIN DE ETIQUETAS PARA TEXTO

EJEMPLO <CENTER><B>Este es un texto remarcado y centrado</B><CENTER> <B><I>Este es un texto remarcado e itlico</I></B> <CENTER><H3>Ttulo Nivel 3 centrado</H3></CENTER <FONT SIZE=+1><B><I>Texto +1 remarcado e itlico</I></B></FONT> <BLINK><H4>Ttulo Nivel 4 parpadeante</H4></BLINK> <B><U><I>Este es un texto remarcado, subrayado e itlico</I></U></B> <FONT COLOR="#FF0000" FACE="Arial" SIZE=3>Este texto es rojo, tipo Arial y de tamao 3</FONT> RESULTADO Este es un texto remarcado y centrado Este es un texto remarcado e itlico
Ttulo Nivel 3 centrado Texto +1 remarcado e itlico

Ttulo Nivel 4 parpadeante Este es un texto remarcado, subrayado e itlico Este texto es rojo, tipo Arial y de tamao 3
PRIMER DOCUMENTO HTML: 1.- Elementos Bsicos 2.- Texto normal (sin atributos) 3.- Salto de lnea (break line)
<HTML> <HEAD> <TITLE>Pgina personal de: Ana Luisa Mndez</TITLE> </HEAD> <BODY> Curriculum Vitae:<BR> Nombre: Ana Luis Mndez<BR> Direccin: Blvd. Costero # 2845<BR> Ciudad: Ensenada, Baja California, Mxico<BR> </BODY> </HTML> Resultado: Curriculum Vitae: Nombre: Ana Luisa Mndez Direccin: Blvd. Costero # 2845 Ciudad: Ensenada, Baja California, Mxico
55
ATRIBUTOS AL TEXTO (EJEMPLO #1):

1.- Elementos Bsicos 2.- Ttulo (H2) centrado (center) 3.- Texto remarcado (bold) 4.- Texto itlico (italic) 5.- Texto subrayado (underline) 6.- Caracteres especiales <HTML> <HEAD> <TITLE>Página personal de: Ana Luisa Méndez</TITLE> </HEAD> <BODY> <CENTER> <H2>Curriculum Vitae:</H2> </CENTER> <B>Nombre:<I><U>Ana Luisa Méndez</U></I><BR> Dirección: <I><U>Blvd. Costero # 2845</U></I><BR> Ciudad: <I><U>Ensenada, Baja California, México</U></I><BR> </B> <P> <HR> </BODY> </HTML> Resultado:
Curriculum Vitae:
Nombre: Ana Luisa Mndez Direccin: Blvd. Costero # 2845 Ciudad: Ensenada, Baja California, Mxico
ATRIBUTOS AL TEXTO (EJEMPLO #2):

1.- Elementos Bsicos 2.- Ttulo (H3) centrado (center) 3.- Texto remarcado (bold) 4.- Tamao de la letra (font size) 5.- Caracteres especiales <HTML> <HEAD> <TITLE>Página personal de: Ana Luisa Méndez</TITLE> </HEAD> <BODY> <CENTER> <H3><U>Curriculum Vitae:</U></H3> </CENTER> <B>Nombre:<BR> <FONT SIZE=5>A</FONT>na <FONT SIZE=5>L</FONT>uisa <FONT SIZE=5>M</FONT>éndez<BR> Dirección: <BR> Blvd. Costero # 2845<BR> Ciudad:<BR> Resultado:
Curriculum Vitae:
Nombre:
Ana Luisa Mndez

Direccin: Blvd. Costero # 2845 Ciudad: Ensenada, Baja California, Mxico
56
Ensenada, Baja California, México<BR> <P> <HR> </BODY> </HTML>
LISTAS DE ELEMENTOS:
1.- Elementos Bsicos 2.- Ttulo (H4) centrado (center) Ejemplo # 1 Lista numerada (ordered list) Ejemplo # 2 Lista no numerada (Unordered list) <HTML> <HEAD> <TITLE>Unidades de la UABC</TITLE> </HEAD> <BODY> <CENTER> <H4><U>Universidad Autnoma de Baja California</U></H4> </CENTER> <OL> <LI>Unidad Mexicali <LI>Unidad Tijuana <LI>Unidad Ensenada <LI>Unidad Tecate </OL> </BODY> </HTML> <HTML> <HEAD> <TITLE>Unidades de la UABC</TITLE> </HEAD> <BODY> <CENTER> <H4><U>Universidad Autnoma de Baja California</U></H4> </CENTER> <UL> <LI>Unidad Mexicali <LI>Unidad Tijuana <LI>Unidad Ensenada <LI>Unidad Tecate </UL> Resultado: 1. 2. 3. 4. Ejemplo # 3 Listas anidadas Ejemplo # 4 Listas combinadas Resultado:
Universidad Autnoma de Baja California

Unidad Mexicali Unidad Tijuana Unidad Ensenada Unidad Tecate

Unidad Mexicali Unidad Tijuana Unidad Ensenada Unidad Tecate
57
</BODY> </HTML> <HTML> <HEAD> <TITLE>Unidades de la UABC</TITLE> </HEAD> <BODY> <CENTER> <H4><U>Universidad Autnoma de Baja California</U></H4> </CENTER> <OL> <LI>Unidad Mexicali <OL TYPE =a> <LI>Facultad de Derecho <LI>Facultad de Medicina <LI>Facultad de Contabilidad <LI>Escuela de Ingeniera </OL> <LI>Unidad Tijuana <OL TYPE =a> <LI>Facultad de Derecho <LI>Facultad de Odontologa <LI>Escuela de Turismo <LI>Escuela de Ingeniera </OL> <LI>Unidad Ensenada <OL TYPE =a> <LI>Facultad de Ciencias <LI>Facultad de Ciencias Marinas <LI>Escuela de Contabilidad y Admn. <LI>Escuela de Ingeniera </OL> <LI>Unidad Tecate <OL TYPE =a> <LI>Escuela de Ingeniera </OL> </OL> </BODY> </HTML> <HTML> <HEAD> <TITLE>Unidades de la UABC</TITLE> Resultado: 4. 3. 2. Resultado: Universidad Autnoma de Baja California 1. Unidad Mexicali a. b. c. d. Facultad de Derecho Facultad de Medicina Facultad de Contabilidad Escuela de Ingeniera
Unidad Tijuana a. b. c. d. Facultad de Derecho Facultad de Odontologa Escuela de Turismo Escuela de Ingeniera
Unidad Ensenada a. b. c. d. Facultad de Ciencias Facultad de Ciencias Marinas Escuela de Contabilidad y Admn. Escuela de Ingeniera
Unidad Tecate a. Escuela de Ingeniera

58
</HEAD> <BODY> <CENTER> <H4><U>Universidad Autnoma de Baja California</U></H4> </CENTER> <OL> <LI>Unidad Mexicali
1.
Unidad Mexicali o o o o Facultad de Derecho Facultad de Medicina Facultad de Contabilidad Escuela de Ingeniera
2. <UL TYPE =a> <LI>Facultad de Derecho <LI>Facultad de Medicina <LI>Facultad de Contabilidad <LI>Escuela de Ingeniera </UL> <LI>Unidad Tijuana <UL TYPE =a> <LI>Facultad de Derecho <LI>Facultad de Odontologa <LI>Escuela de Turismo <LI>Escuela de Ingeniera </UL> <LI>Unidad Ensenada <UL TYPE =a> <LI>Facultad de Ciencias <LI>Facultad de Ciencias Marinas <LI>Escuela de Contabilidad y Admn. <LI>Escuela de Ingeniera </UL> <LI>Unidad Tecate <UL TYPE =a> <LI>Escuela de Ingeniera </UL> </OL> </BODY> </HTML> 4. 3.
Unidad Tijuana o o o o Facultad de Derecho Facultad de Odontologa Escuela de Turismo Escuela de Ingeniera
Unidad Ensenada o o o o Facultad de Ciencias Facultad de Ciencias Marinas Escuela de Contabilidad y Admn. Escuela de Ingeniera
Unidad Tecate o Escuela de Ingeniera
59
ENLACES O LIGAS:
1.- Elementos Bsicos 2.- Enlaces externos 3.- Enlaces internos <HTML> <HEAD> <TITLE>Enlaces de Inters</TITLE> </HEAD> <BODY> <CENTER> <H4>Ejemplo de un enlace interno (al mismo documento):</H4> </CENTER> Esta liga te lleva al <A HREF="#principio">principio </A>de esta pgina <P> <HR> <P> <H4>Ejemplo de un enlace interno (a otro documento):</H4> Esta liga te lleva a la <A HREF="menu0.htm" TARGET=RIGHT>pgina principal </A> del manual de HTML y lo coloca en el marco (frame) derecho (right)</A><P> <P> <HR> <P> <H4>Ejemplo de un enlace externo:</H4> El <A HREF="http://www.ens.uabc.mx">CECUUE</A> se encuentra ubicado en la Unidad Ensenada de la <A HREF="http://www.uabc.mx">UABC</A><P> </BODY> </HTML> Resultado:
Ejemplo de un enlace interno (al mismo documento):

Esta liga te lleva al principio de esta pgina
Ejemplo de un enlace interno (a otro documento):

Esta liga te lleva a la pgina principal del manual de HTML y lo coloca en el marco (frame) derecho (right)
Ejemplo de un enlace externo:

El CECUUE se encuentra ubicado en la Unidad Ensenada de la UABC
60
IMGENES:
1.- Elementos Bsicos 2.- Imgenes (grficas) 3.- Imagen como enlace tipo mailto: (correo) </HTML> <HEAD> <TITLE>Imgenes</TITLE> </HEAD> <BODY> <CENTER> <H4>Comentarios y Sugerencias:</H4> </CENTER> <IMG SRC="linea.gif"><BR> <A HREF="mailto:delia@faro.ens.uabc.mx"><IMG SRC="correo.gif" BORDER=0></A> </CENTER> </BODY> </HTML> Resultado:
Comentarios y Sugerencias:
TABLAS:
1.- Ejemplo # 1 : Tabla de 2 columnas x 2 renglones 2.- Ejemplo # 2 : Tabla de 4 columnas x 5 renglones <HTML> <HEAD> <TITLE>Tablas</TITLE> </HEAD> <BODY> <CENTER> <H4>Universidad Autnoma de Baja California</H4> </CENTER> <HR> <TABLE BORDER=1> <TR> <TD>Mexicali</TD> <TD>Tijuana</TD> </TR> <TR> <TD>Ensenada</TD> <TD>>Tecate</TD> </TR> </TABLE> <HR> </CENTER> </BODY> </HTML> Resultado:
UNIVERSIDAD AUTONOMA DE BAJA CALIFORNIA Mexicali Tijuana Ensenada Tecate
61
<HTML> <HEAD> <TITLE>Tablas</TITLE> </HEAD> <BODY> <CENTER> <H4>Universidad Autnoma de Baja California</H4> </CENTER> <HR> <TABLE BORDER=1> <TR> <TD>Unidad</TD> <TD>Escuelas</TD> <TD>Facultades</TD> <TD>Institutos</TD> </TR> <TR> <TD>Mexicali</TD> <TD ALIGN=CENTER>5</TD> <TD ALIGN=CENTER>6</TD> <TD ALIGN=CENTER>2</TD> </TR> <TD>Tijuana</TD> <TD ALIGN=CENTER>6</TD> <TD ALIGN=CENTER>2</TD> <TD ALIGN=CENTER>1</TD> </TR> <TD>Ensenada</TD> <TD ALIGN=CENTER>2</TD> <TD ALIGN=CENTER>2</TD> <TD ALIGN=CENTER>2</TD> </TR> <TD>Tecate</TD> <TD ALIGN=CENTER>1</TD> </TR> </TABLE> <HR> </CENTER> </BODY> </HTML>
Resultado:
UNIVERSIDAD AUTONOMA DE BAJA CALIFORNIA Informacin al semestre 96-2 Unidad Facultades

Mexicali Tijuana Tecate Escuelas Institutos
5 6
6 2 1
2 1
Ensenada
62
EJEMPLOS DE IMAGENES
Imagen alineada a la izquierda (por defecto) <IMG SRC="sugeren.gif">texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto Imagen con un texto alternativo Sirve para que, si no es posible cargar la imagen, aparezca un texto en su lugar. Tambin se utiliza para que al colocar el puntero del ratn sobre la imagen, sin pulsar, aparezca el texto. Para verlo tienes de deshabilitar la opcin de cargar imgenes de tu visualizador (slo es posible con Netscape). <IMG SRC="sugeren.gif" ALT="AQUI VA UNA IMAGEN">
Imagen alineada a la izquierda.Texto alineado arriba <IMG SRC="sugeren.gif" ALIGN=TOP> texto texto texto texto texto texto exto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto Imagen alineada a la izquierda.Texto alineado abajo <IMG SRC="sugeren.gif" ALIGN=BOTTOM> texto texto texto texto texto texto exto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto Imagen alineada a la izquierda.Texto alineado al centro <IMG SRC="sugeren.gif" ALIGN=MIDDLE> texto texto texto texto texto texto exto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto Imagen alineada a la izquierda.Texto alineado a la derecha de la imagen <IMG SRC="sugeren.gif" ALIGN=LEFT> texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto Imagen alineada a la izquierda.Texto envolviendo la imagen <IMG SRC="sugeren.gif" ALIGN=LEFT> texto texto texto texto texto <BR CLEAR> texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto 63
Imagen alineada a la derecha.Texto alineado a la izquierda de la imagen <IMG SRC="sugeren.gif" ALIGN=RIGHT> texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto Si tu visualizador no soporta esto, hay un truco para conseguir algo parecido: <TABLE> <TR><TD>texto texto texto texto texto texto texto texto texto texto texto texto</TD><TD align=center><IMG SRC="sugeren.gif"></TD></TR> </TABLE> texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto Imagen redimensionada a ms.Texto alineado a la derecha de la imagen <IMG SRC="sugeren.gif" ALIGN=LEFT WIDTH=272 HEIGTH=92 > texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto. Aqu la imagen es la misma de los ejemplos anteriores, pero ha sido redimensionada por el visualizador. Su tamao original es de 136x46 puntos. Este es su aspecto al doble: 272x92. Imagen redimensionada a menos.Texto alineado a la derecha de la imagen <IMG SRC="sugeren.gif" ALIGN=LEFT WIDTH=75 HEIGTH=20 > texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto. Aqu la imagen es la misma de los ejemplos anteriores, pero ha sido redimensionada por el visualizador. Su tamao original es de 136x46 puntos. Este es su aspecto a la mitad: 75x23 Por ejemplo, en la siguiente imagen, la mitad izquierda nos enva a indice.htm y la mitad derecha a intro.htm. Mueve el puntero del ratn horizontalmente sobre la imagen y observa la ventanita de estado que hay en la parte inferior izquierda de la pantalla, vers como cambia el nombre del link.
Se escribe as: <MAP NAME="nombre1"> <AREA SHAPE="rect" COORDS="1,1,75,46" HREF="indice.htm"> <AREA SHAPE="rect" COORDS="76,1,136,46" HREF="intro.htm"> </MAP> <IMG SRC="sugeren.gif" USEMAP="#nombre1"> Aunque se comprende a simple vista, analicmoslo: En primer lugar tenemos el elemento MAP, que lo que est haciendo es definir un mapa de coordenadas. Va acompaado del atributo NAME que da nombre al mapa. Es
64
necesario nombrarlo porque podra haber ms de uno en la misma pgina, y evidentemente, sus nombres no debern repetirse. A continuacin tenemos el atributo AREA que define las reas de la imagen. El parmetro SHAPE="rect" indica la figura geomtrica que estamos utilizando para ello. Al igual que con los otros mapas, puede ser rect circ y poly. El parmetro COORDS fcilmente se adivina que indica las coordenadas del rea, en este caso vrtice superior izquierdo e inferior derecho, respectivamente. HREF ya sabemos lo que hace: indica un link con una pgina, pero esta vez no va acompaando al elemento <A>, digamos que es un atributo prestado. Hay un rea por cada link definido. Si un rea no queremos que tenga link se definir con NOHREF. IMG SRC tambin son conocidos: hacen que se visualice la imagen. Y por fin, USEMAP nos dice qu mapa de coordenadas hay que aplicar a la imagen. A una misma imagen se le pueden aplicar distintos mapas si se desea. Fjate en que nombre1, (el nombre del mapa) va precedido del smbolo #. Esto se debe a que, en este caso, el mapa al que se hace referencia est en la misma pgina que la instruccin IMG. Podra estar en otra, y en ese caso el smbolo tendra que estar despus del nombre de la pgina. Por ejemplo: otrapagina.htm#nombre1 Como ya se ha dicho ms arriba, hay tres figuras geomtricas definibles para las reas: rect, circle y poly. El rectngulo ya lo conocemos; consiste en parejas de coordenadas que indican los vrtices superior izquierdo e inferior derecho respectivamente del rea. Para el cculo (circ) son necesarios tres valores: x,y r donde x,y es el par de coordenas que indican el punto donde est el centro del cculo, y r es el radio del crculo medido en puntos. Para los polgonos (poly) se necesitan tantas parejas de coordenadas como vrtices tenga el polgono, procurando que la ltima pareja quede unida a la primera, ya que la figura debe estar cerrada. No es obligatorio que sean figuras regulares. En el caso de que se quiera emplear todo el grfico como rea de enlace, es decir, un solo link, se puede emplear default, y no es necesario indicar ninguna coordenada.
EJEMPLOS DE TABLAS
Tabla bsica de 3x2 A BC DE F
<TABLE BORDER> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE>
65
Dos ejemplos de lnea expandida <ROWSPAN> Item 1 Item 4 Item 2 Item 3 Item 5
<TABLE BORDER> <TR> <TD>Item 1</TD> <TD ROWSPAN=2>Item 2</TD> <TD>Item 3</TD> </TR> <TR> <TD>Item 4</TD> <TD>Item 5</TD> </TR> </TABLE>
Item 1
Item 2 Item 3 Item 4 Item 5 Item 6 Item 7
<TABLE BORDER> <TR> <TD ROWSPAN=2>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD> <TD>Item 4</TD> </TR> <TR> <TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD> </TR> </TABLE>
Ejemplo de columna expandida <COLSPAN> Item 1 Item 2 Item 3 Item 4 Item 5

<TABLE BORDER> <TR> <TD>Item 1</TD> <TD COLSPAN=2>Item 2</TD> </TR> <TR> <TD>Item 3</TD> <TD>Item 4</TD> <TD>Item 5</TD> </TR> </TABLE>
66
Tabla con cabeceras <TH> Head1 Head2 Head3 A D B E C F
<TABLE BORDER> <TR> <TH>Head1</TH> <TH>Head2</TH> <TH>Head3</TH> </TR> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE>
Combinacin de columna expandida y cabecera Head1 Head2 A E B F C G D H
<TABLE BORDER> <TR> <TH COLSPAN=2>Head1</TH> <TH COLSPAN=2>Head2</TH> </TR> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD> </TR> <TR> <TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD> </TR> </TABLE>
Combinacin de cabeceras mltiples y columnas expandidas Head1 A E B F C G Head2 D H Head 3 Head 4 Head 5 Head 6
<TABLE BORDER> <TR> <TH COLSPAN=2>Head1</TH> <TH COLSPAN=2>Head2</TH> </TR> <TR> <TH>Head 3</TH> <TH>Head 4</TH> <TH>Head 5</TH> <TH>Head 6</TH> </TR> <TR> 67
<TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD> </TR> <TR> <TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD> </TR> </TABLE>
Cabeceras laterales Head1 Item 1 Item 2 Item 3 Head2 Item 4 Item 5 Item 6 Head3 Item 7 Item 8 Item 9
<TABLE BORDER> <TR><TH>Head1</TH> <TD>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD></TR> <TR><TH>Head2</TH> <TD>Item 4</TD> <TD>Item 5</TD> <TD>Item 6</TD></TR> <TR><TH>Head3</TH> <TD>Item 7</TD> <TD>Item 8</TD> <TD>Item 9</TD></TR> </TABLE>
Combinacin de cabeceras laterales y lneas expandidas Head1 Item 1 Item 2 Item 5 Item 6 Item 3 Item 4 Item 7 Item 8
Head2 Item 9 Item 10 Item 3 Item 11

<TABLE BORDER> <TR><TH ROWSPAN=2>Head1</TH> <TD>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD> <TD>Item 4</TD> </TR> <TR><TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD> <TD>Item 8</TD> </TR> <TR><TH>Head2</TH> <TD>Item 9</TD> <TD>Item 10</TD> <TD>Item 3</TD> <TD>Item 11</TD> </TR> </TABLE>
68
Combinacin de cabeceras superiores y laterales. Tabla centrada. Contenidos centrados. Ttulo al pie. TABLE TR TD TH CAPTION BORDER ROWSPAN COLSPAN ALIGN VALIGN WIDTH HEIGTH CELLPADDING CELLSPACING X X X X X X X X X X X X X X X X -
Resumen de tablas
<CENTER> <TABLE BORDER> <CAPTION ALIGN=bottom>Resumen de tablas</CAPTION> <TR> <TD><TH>TABLE</TH><TH>TR</TH><TH>TD</TH><TH>TH</TH><TH>CAPTION</TH> </TD> </TR> <TR ALIGN=CENTER> <TH>BORDER</TH><TD>X</TD><TD>-</TD><TD>-</TD><TD>-</TD><TD>-</TD> </TR> <TR ALIGN=CENTER> <TH>ROWSPAN</TH><TD>-</TD><TD>-</TD><TD>X</TD><TD>X</TD><TD>-</TD> </TR> <TR ALIGN=CENTER> <TH>COLSPAN</TH><TD>-</TD><TD>-</TD><TD>X</TD><TD>X</TD><TD>-</TD> </TR> <TR ALIGN=CENTER> <TH>ALIGN</TH><TD>-</TD><TD>X</TD><TD>X</TD><TD>X</TD><TD>X</TD> </TR> <TR ALIGN=CENTER> <TH>VALIGN</TH><TD>-</TD><TD>-</TD><TD>X</TD><TD>-</TD><TD>-</TD> </TR> <TR ALIGN=CENTER> <TH>WIDTH</TH><TD>X</TD><TD>-</TD><TD>X</TD><TD>-</TD><TD>-</TD> </TR> <TR ALIGN=CENTER> <TH>HEIGTH</TH><TD>X</TD><TD>-</TD><TD>X</TD><TD>-</TD><TD>-</TD> </TR> 69
<TR ALIGN=CENTER> <TH>CELLPADDING</TH><TD>X</TD><TD>-</TD><TD>-</TD><TD>-</TD><TD></TD> </TR> <TR ALIGN=CENTER> <TH>CELLSPACING</TH><TD>X</TD><TD>-</TD><TD>-</TD><TD>-</TD><TD></TD> </TR> </TABLE> </CENTER>
Ejemplo con todos los elementos y parmetros Media Altura Peso Sexo Hombres 1.9 Mujeres 1.7 85 60
<TABLE BORDER> <TR> <TD><TH ROWSPAN=2></TH> <TH COLSPAN=2>Media</TH></TD> </TR> <TR> <TD><TH>Altura</TH><TH>Peso</TH></TD> </TR> <TR> <TH ROWSPAN=2>Sexo</TH> <TH>Hombres</TH><TD>1.9</TD><TD>85</TD> </TR> <TR> <TH>Mujeres</TH><TD>1.7</TD><TD>60</TD> </TR> </TABLE>
Otro ejemplo de lnea y columna expandidas A 12 34
C D
<TABLE BORDER> <TR> <TD ALIGN=center ROWSPAN=2 COLSPAN=2>A</TD> <TD>1</TD> <TD>2</TD> </TR> <TR> <TD>3</TD> <TD>4</TD> </TR> <TR> <TD ALIGN=center ROWSPAN=2 COLSPAN=2>C</TD> <TD ALIGN=center ROWSPAN=2 COLSPAN=2>D</TD> 70
</TR> <TR> </TR> </TABLE>
AJUSTANDO MRGENES Y BORDES

Tabla sin bordes Item 1 Item 3 Item 2 Item 4 Item 5
<TABLE> <TR> </TR> <TR> </TR> </TABLE> <TD>Item 1</TD> <TD ROWSPAN=2>Item 2</TD> <TD>Item 3</TD> <TD>Item 4</TD> <TD>Item 5</TD>
Aqu no es visible el borde de las celdas debido a que se ha omitido el atributo BORDER del elemento <TABLE>. La omisin o no es equivalente a parametrizarlo; se consigue lo mismo as: BORDER=0, y como ya habrs deducido, el valor de BORDER puede ser variable. Mira el siguiente ejemplo: Tabla con borde de 10 puntos Item 1 Item 2 Item 3 Item 4
<TABLE BORDER=10> <TR> <TD>Item 1</TD> <TD> Item 2</TD> </TR> <TR> <TD>Item 3</TD> <TD>Item 4</TD> </TR> </TABLE>
Dimensionado de celdas A D B E C F
<TABLE BORDER CELLPADDING=10 CELLSPACING=0> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE>
A B C D E F
71
A D
B E
C F
A D
B E
C F
<TABLE BORDER=5 CELLPADDING=10 CELLSPACING=10> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE>
ALINEACIN, TTULOS Y SUBTABLAS

Lneas mltiples en un tabla Enero Febrero Marzo Otra celda Celda 3
Celda 1 Celda 2 Celda 4
y esta Celda 6 es la celda 5
<TABLE BORDER> <TR> <TH>Enero</TH> <TH>Febrero</TH> <TH>Marzo</TH> 72
</TR> <TR> <TD>Celda 1</TD> <TD>Celda 2</TD> <TD>Otra celda<br> Celda 3</TD> </TR> <TR> <TD>Celda 4</TD> <TD>y esta<br>es la celda 5</TD> <TD>Celda 6</TD> </TR> </TABLE>
Alineado horizontal del contenido de las celdas. ALIGN=LEFT | RIGHT | CENTER Se puede aplicar individualmente a una celda o a toda la lnea Enero Todas alineadas al centro Febrero Celda 2 Marzo Otra celda Celda 3 Por defecto Alineado a la izquierda
Alineado a la derecha Alineado al centro
<TABLE BORDER> <TR> <TH>Enero</TH> <TH>Febrero</TH> <TH>Marzo</TH> </TR> <TR ALIGN=center> <TD>Todas alineadas al centro</TD> <TD>Celda 2</TD> <TD>Otra celda<br> Celda 3</TD> </TR> <TR> <TD ALIGN=right>Alineado a la derecha</TD> <TD ALIGN=center>Alineado al centro</TD> <TD>Por defecto<br>Alineado a la izquierdat</TD> </TR> </TABLE>
73
Alineado vertical del contenido de las celdas. VALIGN=TOP | BOTTOM | MIDDLE Se puede aplicar individualmente a una celda o a toda la columna Enero Febrero Marzo Celda 3 Todas alineadas arriba Esta es la Celda 2 Alineado arriba
Por defecto Alineado abajo Alineado al centro
<TABLE BORDER> <TR> <TH>Enero</TH> <TH>Febrero</TH> <TH>Marzo</TH> </TR> <TR VALIGN=top> <TD>Todas alineadas arriba</TD> <TD>Esta es la<br>Celda 2</TD> <TD>Celda 3</TD> </TR> <TR> <TD VALIGN=top>Alineado arriba</TD> <TD VALIGN=bottom>Alineado abajo</TD> <TD>Por defecto<br>Alineado al centro</TD> </TR> </TABLE>
Titulando las tablas. CAPTION=TOP | BOTTOM Ttulo arriba Enero Febrero Marzo Celda 1 Celda 2 Celda 3
<TABLE BORDER> <CAPTION ALIGN=top>Titulo arriba</CAPTION> <TR> <TH>Enero</TH> <TH>Febrero</TH> <TH>Marzo</TH> </TR> <TR> <TD>Celda 1</TD> <TD>Celda 2</TD> <TD>Celda 3</TD> </TR> </TABLE>
Enero Febrero Marzo Celda 1 Celda 2 Celda 3 Ttulo abajo

<TABLE BORDER> 74
<CAPTION ALIGN=bottom>Titulo abajo</CAPTION> <TR> <TH>Enero</TH> <TH>Febrero</TH> <TH>Marzo</TH> </TR> <TR> <TD>Celda 1</TD> <TD>Celda 2</TD> <TD>Celda 3</TD> </TR> </TABLE>
Anidando tablas. La tabla ABCD dentro de la tabla 12345 3 12 AB CD 456

<TABLE BORDER> <TR>  <TD>1</TD> <TD>2</TD> <TD>3 <TABLE BORDER> <TR>  <TD>A</TD> <TD>B</TD> </TR> <TR>  <TD>C</TD> <TD>D</TD> </TR> </TABLE> </TD> </TR> <TR>  <TD>4</TD> <TD>5</TD> <TD>6</TD> </TR> </TABLE>
75
LONGITUD HORIZONTAL DE LAS TABLAS

Tabla que ocupa el 50 % de la pantalla, y cuyas celdas estn dimensionadas al 50 % cada una respecto a la longitud total de la tabla
Width=50% Celda 3
Width=50% Celda 4
<TABLE BORDER WIDTH="50%"> <TR><TD>Width=50%</TD><TD>Width=50%</TD> </TR> <TR><TD>Celda 3</TD><TD>Celda 4</TD> </TR> </TABLE> Tabla dimensionada al 50 % de la pantalla, celdas sin dimensionar. Obsvese que se alargan ms de lo que lo haran sin forzar la longitud de la tabla
Celda 1 Celda 3
2 4
<TABLE BORDER WIDTH="50%"> <TR><TD>Celda 1</TD><TD>2</TD> </TR> <TR><TD>Celda 3</TD><TD>4</TD> </TR> </TABLE> El mismo efecto anterior, pero con la tabla dimensionada al 100 %
WIDTH=100% 3
Celda 2 Celda 4
<TABLE BORDER WIDTH="100%"> <TR><TD>WIDTH=100%</TD><TD>Celda 2</TD> </TR> <TR><TD>3</TD><TD>Celda 4</TD> </TR> </TABLE> Centrado de una tabla en la pgina
A D
B E
C F
<CENTER> <TABLE BORDER WIDTH="50%"> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE> </CENTER>
76
Tabla forzada al 50 % de la pgina, conteniendo otra tabla anidada en una de sus celdas. La segunda tabla est forzada a ocupar el 100 % de la celda receptora.
Item 1 Item A Item B
Item 2 Item 4
<TABLE BORDER WIDTH="50%"> <TR><TD>Item 1</TD><TD>Item 2</TD> </TR> <TR><TD> <TABLE BORDER WIDTH=100%> <TR><TD>Item A</TD><TD>Item B</TD> </TR> </TABLE> </TD> <TD>Item 4</TD> </TR> </TABLE>
LONGITUD VERTICAL DE LAS TABLAS

Tabla que ocupa el 50 % horizontal de la pantalla, y el 25 % vertical.
HEIGHT=25%
HEIGHT=25% 3
Item 2 4
<TABLE BORDER WIDTH="50%" HEIGHT="25%"> <TR><TD>HEIGHT=15%</TD> <TD>Item 2</TD> </TR> <TR><TD>3</TD><TD>4</TD> </TR> </TABLE>
FONDOS DE COLORES O GRFICOS EN LAS TABLAS

Una tabla de cuatro celdas. Cada una de un color. (Slo Netscape 3.0 o superior)
Texto ROJO Texto VERDE Texto AZUL Texto AMARILLO

<TABLE BORDER> <TR><TD BGCOLOR="RED">Texto ROJO</TD> <TD BGCOLOR="green">Texto VERDE</TD> </TR> <TR><TD BGCOLOR="blue">Texto AZUL</TD> <TD BGCOLOR="YELLOW">Texto AMARILLO</TD> </TR> </TABLE> En este ejemplo se ha dado color individualmente a cada celda. El atributo BGCOLOR="color" puede utilizarse en cada elemento de la tabla para efectos globales. Por ejemplo, para hacer toda la tabla en rojo, slo sera necesario escribir: <TABLE BORDER BGCOLOR="red"> 77
.... .... </TABLE>
Para toda la lnea:

<TABLE BORDER> <TR BGCOLOR="red"><TD> texto </TD></TR> .... </TABLE>
Tambin se puede usar una imagen como fondo de toda la tabla:

<TABLE BORDER BACKGROUND="yellow_r.gif"> .... .... </TABLE>
De slo una celda:

<TABLE BORDER> <TR><TD BACKGROUND="yellow_r.gif"> texto </TD></TR> .... </TABLE>
O de toda la fila:
<TABLE BORDER > <TR BACKGROUND="yellow_r.gif"><TD> texto </TD></TR> .... </TABLE> Utilizando una tcnica parecida, tambin se pueden conseguir recuadros con las esquinas redondeadas. Al igual que en el anterior ejemplo, es necesario tener un grfico previamente, pero este nos dar algo ms de trabajo. Con cualquier editor de grficos (el "Paint" de Windows, por ejemplo) generas un crculo del color que quieras, y con el borde transparente o de otro color. A continuacin lo cortas en cuatro porciones, como una tarta, y guardas cada trozo con un nombre cualquiera, por ejemplo, angulo1, angulo2, etc. As
Recuadro con ngulos redondeados Y este es el cdigo necesario:

<table border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#DDE0FC" width="20"><img src="angulo1.gif" width="20" height="20"> <td bgcolor="#DDE0FC"> <td bgcolor="#DDE0FC" width="20"><img src="angulo2.gif" width="20" height="20"> </tr> <tr> <td bgcolor="#DDE0FC" width="20"> <td bgcolor="#DDE0FC">Recuadro con ngulos redondeados <td bgcolor="#DDE0FC" width="20"> </tr> <tr> <td bgcolor="#DDE0FC" width="20"><img src="angulo4.gif" width="20" height="20"> <td bgcolor="#DDE0FC"> <td bgcolor="#E5E7FD" width="20"><img src="angulo3.gif" width="20" height="20"> </tr> </table>
78
Como puedes ver, para que el efecto sea completo hay que dar el mismo color que tienen los grficos como fondo de las celdas. Estos son los cuatro grficos necesarios: angulo1.gif angulo2.gif angullo4.gif angulo3.gif
79

Manual HTML para Impresion

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Manual HTML para Impresion

Uploaded by

Copyright:

Available Formats

HTML

LA ESTRUCTURA BSICA DE UN DOCUMENTO HTML.

ESQUEMA DE TIPOS DE UN DOCUMENTO HTML

CABECERA DEL DOCUMENTO.

CUERPO DEL DOCUMENTO.

<BODY BACKGROUND="nubes.jpg" BGCOLOR="#CCFFFF" TEXT="#AA0000">

DAR COLOR A LA PGINA

ESPACIADOS Y SALTOS DE LNEAS.

ATRIBUTOS DEL TEXTO.

Resultado Texto de prueba Texto de prueba

Esto es una Prueba

<STRONG></STRONG> <CITE></CITE> <STRIKE></STRIKE>

-nbsp cent curren

&#126; &#161; &#163; &#165; &#167; &#169; &#171; &#173; &#175;

-iexcl pound yen sect copy laquo shy macr

Espacio &#160; ? | &#162; &#164;

&#177; plusmn &#179; &#181; sup3 micro

&#192; Agrave &#194; &#196; &#198; Acirc Auml AElig

&#193; Aacute &#195; &#197; &#199; Atilde Aring Ccedil

&#210; Ograve &#212; &#214; Ocirc Ouml

&#211; Oacute &#213; &#215; Otilde times

&#216; Oslash &#218; Uacute &#220; Uuml

&#217; Ugrave &#219; Ucirc

&#221; Yacute &#223; szlig

&#225; aacute &#227; &#229; &#231; atilde aring ccedil

&#242; ograve &#244; &#246; &#248; ocirc ouml oslash

&#243; oacute &#245; &#247; otilde divide

&#249; ugrave &#251; ucirc

&#250; uacute &#252; &#254; uuml thorn

&#253; yacute &#255; yuml

Transfer Protocol <DT>IRC <DD>Abreviatura de Internet Relay Chat </DL> IRC

Abreviatura de File Transfer Protocol

Abreviatura de Internet Relay Chat

ENLACES A RECURSOS EXTERNOS.

ENLACES A PARTES DE UN DOCUMENTO.

<A HREF="#referencia">Texto de enlace</A>

y despus desarrollar cada uno de los apartados:

La pagina de Los Computadores

<TABLE BORDER=n> y </TABLE>

</FONT><FONT SIZE="+3"> a voluntad </FONT><FONT SIZE="+4">incrementndolos o </FONT><FONT SIZE="1"> disminuyndolos</FONT> Se vera:

FORMULARIOS PARA LA CAPTURA DE DATOS.

Tu Nombre: Tu Edad : Menos de 20 aos Mas de 40 aos

Te parece til este manual? Tus Comentarios:

EXTENSIONES DEL HTML.

subventana, y la inferior el resto.

Microsoft en una nueva copia del navegador Muestra la pagina de Ibm en

<A href= "http://www.ibm.com/" target = "home">

"home" Muestra <A href= "http://www.yahoo.com/" target = "_top"> la pagina del

buscador Yahoo a pantalla completa

CDIGOS HEXADECIMALES DE COLOR

EJEMPLO DE UN DOCUMENTO HTML:

ETIQUETAS PARA TEXTO

<B> <BASE FONT SIZE=n>

Este es un texto remarcado

Texto base # 4 Texto base +1

<BLINK> <CENTER> <EM> <FONT SIZE=n>

Texto base # 4 Texto base +1

se puede modificar, <FONT SIZE=+2>Texto incrementar o disminuir. +2</FONT>

Ttulo Nivel 1 Ttulo Nivel 2

<I> <STRIKE> <STRONG> <SUB> <SUP> <U>

Itlico Marcado Negritas o remarcado Subscript Superscript Subrayado

Este es un texto itlico Este es un texto marcado

OTROS ATRIBUTOS PARA TEXTO (COLOR, TIPO DE LETRA, ETC)

~ ¡ £ ¥ § © « ¯

Espacio ? | ¢ ¤

± plusmn ³ µ sup3 micro

À Agrave Â Ä Æ Acirc Auml AElig

Á Aacute Ã Å Ç Atilde Aring Ccedil

Ò Ograve Ô Ö Ocirc Ouml

Ó Oacute Õ × Otilde times

Ø Oslash Ú Uacute Ü Uuml

Ù Ugrave Û Ucirc

Ý Yacute ß szlig

á aacute ã å ç atilde aring ccedil

ò ograve ô ö ø ocirc ouml oslash

ó oacute õ ÷ otilde divide

ù ugrave û ucirc

ú uacute ü þ uuml thorn

ý yacute ÿ yuml

Ensenada, Baja California, México<BR> <P> <HR> </BODY> </HTML>