En la sesión anterior vimos el "document source" de alguna página escrita en HTML. Recuerda que aparecian unas palabras bastante crípticas entre los símbolos < y >. Estas palabras son los comandos que dicen al browser como debe visualizar el texto que hay fuera de < y >. Los símbolo < y > junto con las palabras que contienen reciben el nombre de "tags".
Los tags suelen ir por parejas, uno para empezar y otro para acabar, que es igual que el del principio pero añadiendole despues del < una /. Hay que tener en cuenta que algunos tags no van por parejas como veremos posteriormente.
Los siguientes tags deben aparecer en cualquier documento:
| <H1></H1> | Heading 1 |
| <H2></H2> | Heading 2 |
| <H3></H3> | Heading 3 |
| <H4></H4> | Heading 4 |
| <H5></H5> | Heading 5 |
| <H6></H6> | Heading 6 |
| <BLOCKQUOTE></BLOCKQUOTE> | Texto identado |
Generalmente texto identado |
| <EM></EM> | Texto enfatizado | Generalmente texto en cursiva |
| <BIG></BIG> | Normal big normal | Fuente de texto grande |
| <SMALL></SMALL> | Normal small normal | Fuente de texto pequeña |
Estilos de letra: lógicos.
| <B></B> | Negrita |
| <I></I> | Cursiva |
| <SUB></SUB> | Normal subíndice normal |
| <SUP></SUP> | Normal superíndice normal |
| <PRE></PRE> |
Este texto está preformateado
al principio
un poco mas a la derecha
aún mas a la derecha
|
| <CENTER></CENTER> |
| <P> | Primer párrafo. Segundo párafo. |
Se coloca al principio de cada párrafo. Suele ser un dobre return |
| <P></P> | Redefinido para que sea un "container" tag. | |
| <P ALIGN=LEFT(none)|CENTER|RIGTH></P> |
Izquierda Centrado Derecha |
|
| <BR></BR> | Primera línea. Segunda línea. |
Suele ser un return |
Areas de texto: separadores
| <HR> | Línea horizontal |
| <HR NO SHADE> | Línea horizontal sin apariencia 3D |
| <HR ALIGN=LEFT|RIGHT|CENTER> | Posición relativa |
| <HR SIZE=?> | Tamaño relativo |
| <HR WIDTH=?> | Porcentage de la anchura de la página |
<HR>
Pueden estar anidadas. Se debe poner <LI> antes de cada elemento.
| <UL><LI></UL> |
|
Lista no ordenada. |
| <UL TYPE=DISC|CERCLE|SQUARE><LI></UL> |
|
Lista no ordenada. <UL TYPE="square"> |
| <OL><LI></OL> |
|
Lista ordenada. |
| <OL TYPE=A|a|I|i|1><LI></OL> |
|
Se puede cambiar tipo de "numeración" <OL TYPE="A"> |
| <OL><LI VALUE=?></OL> |
|
Se puede indicar el primer valor <LI VALUE=3> |
|
<OL TYPE="a"> <LI>Primer elemento.</LI> <OL> <LI> sub-elemento 1 del primero <LI> sub-elemento 2 del primero </OL> <LI>Segundo elemento.</LI> <UL> <LI> un sub-elemento del segundo <LI>otro sub-elemento del segundo </UL> <LI>Tercer elemento.</LI> </OL> |
|
Ejemplo de lista anidada |
Para insertar una imagen
<img src="imagen.gif">
Para crear un link a otro documento
<A HREF="link-to-site">texto sensitivo</A>
Universitat de Girona.
(Para documentos que se encuentren en otro servidor se debe poner el camino absoluto: "http://host.domain/page.html")
Tambien puedes hacer que una imagen sea un link poniendo:
<A HREF="link-to-site"><img src="imagen.gif"></A>
Universitat de Girona
Dentro de un documento podemos definir un marcador para poder hacer un link a este punto del documento.
<A NAME="anchor_name">...</A>
Una vez definido un marcador, desde otro punto del documento podemos hacer un link
<A HREF="#anchor_name">...</A>
Tambien podemos hacer un link a un marcador de un documento externo
<A HREF="http://host.domain/page.html#anchor_name">...</A>
| <BLINK></BLINK> | ||
| <FONT COLOR="#$$$$$$"></FONT> |
COLOR=#FF0000 COLOR=#00FF00 COLOR=#0000FF COLOR=#FFFFFF COLOR=#000000 COLOR=#FFFF00 COLOR=#00FFFF COLOR=#FF00FF COLOR=#808000 COLOR=#008080 COLOR=#800080 |
|
| <FONT SIZE=?></FONT> | 1 2 3 4 5 6 7 | Desde 1 hasta 7, por defecto es 3. |
Podemos cambiar el color del fondo de nuestra pagina HTML, modificando el comando <body>. <BODY BGCOLOR="#$$$$$$">
| <BODY BGCOLOR=#FF0000> | PAGINA CON FONDO |
| <BODY BGCOLOR=#00FF00> | PAGINA CON FONDO |
| <BODY BGCOLOR=#0000FF> | PAGINA CON FONDO |
| <BODY BGCOLOR=#FFFFFF> | PAGINA CON FONDO |
| <BODY BGCOLOR=#000000> | PAGINA CON FONDO |
Tabla con una variedad de 228 posibles colores asociados a su valor hexadecimal #rrggbb
Tambien podemos poner una textura en el fondo utilizando un fichero gif o un fichero jpg, modificando el comando <body>. <BODY BACKGROUND="imagename.gif">
No es necesario que el fichero sea muy grande pues el browser automáticamente lo copia hasta cubrir completamente la página.
Algunos ejemplos de texturas:
Texture Land Más de 200 fondos diferentes para tus páginas.
TAMU Microelectronics Web ServerImages (backgrounds).
<TABLE BORDER=1>
<TR>
<TD>Primera columna de la primera fila</TD>
<TD>Segunda columna de la primer fila</TD>
</TR>
<TR>
<TD>Primera columna de la segunda fila</TD>
<TD>Segunda columna de la segunda fila</TD>
</TR>
</TABLE>
| Primera columna de la primera fila | Segunda columna de la primer fila |
| Primera columna de la segunda fila | Segunda columna de la segunda fila |
El texto y las imágenes estaran centradas verticalmente en la tabla. Poniendo <TD valign=top> empezaran arriba de todo como podemos ver en la segunda fila del ejemplo siguiente.
<TABLE BORDER=1>
<TR>
<TD>Universidad de Girona.</TD>
<TD><img src="fondos/aligap.gif" align="middle" width=132 height=80></TD>
</TR>
<TR>
<TD valign=top>Universidad de Girona.</TD>
<TD><img src="fondos/aligap.gif" align="middle" width=132 height=80></TD>
</TR>
</TABLE>
| Universidad de Girona. | |
| Universidad de Girona. | |
Podemos juntar filas usando <TD colspan=2> y columnas usando<TD rowspan=2>
<TABLE BORDER=1>
<TR>
<TD>Primera columna de la primera fila</TD>
<TD>Segunda columna de la primer fila</TD>
<TD rowspan=2>Tercera columna</TD>
</TR>
<TR>
<TD colspan=2>Primera y segunda columna de la segunda fila</TD>
</TR>
</TABLE>
| Primera columna de la primera fila | Segunda columna de la primer fila | Tercera columna |
| Primera y segunda columna de la segunda fila | ||