ESTRUCTURA BÁSICA DE UN DOCUMENTO HTML
Un documento escrito en HTML contendría básicamente las siguientes directivas:
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
</BODY>
|
Indica el inicio del documento.
Inicio de la cabecera.
Inicio del título del documento.
Final del título del documento.
Final de la cabecera del documento.
Inicio del cuerpo del documento.
Final del cuerpo del documento.
Final del documento.
|
NOTA: El documento Web se guarda dentro de una carpeta con extensión .html
EJEMPLO: Nombre.html
LAS 6 CABECERAS DEL TAMAÑO DE TEXTO
El HTML nos ofrece seis etiquetas distintas para mostrar cabeceras. Son éstas:
|
ETIQUETA |
RESULTADO |
|
<H1> ... </H1> |
CABECERA DE NIVEL 1 TEXTO GRANDE |
|
<H2> ... </H2> |
Cabecera de nivel 2 |
|
<H3> ... </H3> |
Cabecera de nivel 3 |
|
<H4> ... </H4> |
Cabecera de nivel 4 |
|
<H5> ... </H5> |
Cabecera de nivel 5 |
|
<H6> ... </H6> |
Cabecera de nivel 6 Texto muy pequeño |
LÍNEA DE SEPARACIÓN HORIZONTAL
|
ETIQUETA |
RESULTADO |
|
<HR> |
|
|
<HR SIZE=”7”COLOR=”Color en Inglés”> |
Crea una línea con grosor y color |
ETIQUETAS PARA DAR FORMATO AL TEXTO
|
TAMAÑOS DEL TEXTO |
|
<FONT SIZE= "#del 1 al 7"> ... </FONT> |
AQUÍ VEMOS LOS TAMAÑOS
SIZE=1 SIZE=2 SIZE=3 SIZE=4 SIZE=5 SIZE=6 SIZE=7
ETIQUETAS PARA DAR COLOR AL TEXTO
|
COLOR DEL TEXTO |
|
<FONT COLOR=”Color en inglés”> ... </FONT> |
LISTA DE COLORES EN INGLÉS
|
CASTELLANO |
INGLÉS |
CASTELLANO |
INGLÉS |
|
ROJO |
RED |
CELESTE |
SKY BLUE |
|
AZUL |
BLUE |
GRIS |
GREY |
|
AMARILLO |
YELLOW |
MARRÓN |
BROWN |
|
VERDE |
GREEN |
BLANCO |
WHITE |
|
NARANJA |
ORANGE |
NEGRO |
BLACK |
|
VIOLETA |
VIOLET |
PLATEADO |
SILVER |
|
ROSA |
PINK |
MARFIL |
IVORY |
APLICA ESTILOS EN EL TEXTO
Todas estas etiquetas nos permiten cambiar de una manera u otra el aspecto del tipo de letra que estemos utilizando y se pueden utilizar con tiras de caracteres dentro de un párrafo.
|
Etiqueta |
Utilidad |
Resultado |
|
<B> ... </B> |
Pone el texto en negrita. |
Soy un texto negro como el tizón |
|
<I> ... </I> |
Representa el texto en cursiva. |
Estoy ladeado |
|
<U> ... </U> |
Para subrayar algo. |
Como soy muy importante estoy subrayado |
ETIQUETAS DE PÁRRAFO
|
Etiqueta |
Utilidad |
|
<P> |
Salto de párrafo como dar 2 Enter |
|
<BR> |
Salto de línea como dar un Enter |
ALINEACIÓN DE TEXTO
Un párrafo puede alinearse a la izquierda, centro, derecha o justificarlo. El párrafo en cuestión debe estar contenido entre las etiquetas:
|
ETIQUETA |
|
P ALIGN="LEFT"> Este texto está alineado a la izquierda </P> |
|
<P ALIGN="CENTER"> Este texto está centrado </P> |
|
<P ALIGN="RIGHT"> Este texto está alineado a la derecha </P> |
|
<P ALIGN="JUSTIFY"> Este texto está justificado </P> |
LISTAS SIN ORDENAR
Están englobadas por las etiquetas <UL>...</UL> (unordered list). Cada uno de los elementos de la lista comenzará con una etiqueta <LI>, que puede o no llevar su correspondiente </LI> de cierre.
Veamos un ejemplo:
<P> Lenguajes en Internet </P>
<UL>
<LI> Inglés
<LI> Español
<LI> Francés
</UL>
ESTO NOS MOSTRARÁ:
Lenguajes en Internet
- Inglés
- Español
- Francés
ATRIBUTOS DE LA ETIQUETA <UL>
La etiqueta <UL> dispone una serie de atributos, con los cuales es posible configurar el aspecto que va a tener la lista.
TYPE="CIRCLE / DISC / SQUARE". Define la viñeta a emplear en la lista. El parámetro tipo puede tomar los valores:
ü CIRCLE : Punto redondeado negro y relleno
ü DISC : Línea circular
ü SQUARE : Cuadro relleno
|
IMPORTANTE: En algunos navegadores no funciona la opcián de cambiar el tipo de viñeta a mostrar y por mucho que lo intentemos, siempre saldrá el redondel negro. |
Lenguajes en Internet
<LI> Inglés
<LI> Español
<LI> Francés
ESTO NOS MOSTRARÁ:
Lenguajes en Internet
- Inglés
- Español
- Francés
EJEMPLO (2)
Lenguajes en Internet
<UL TYPE="SQUARE">
<LI> Inglés
<LI> Español
<LI> Francés
</UL>
ESTO NOS MOSTRARÁ:
Lenguajes en Internet
- Inglés
- Español
- Francés
LISTAS ORDENADAS
Están delimitadas por las etiquetas <OL> y </OL> (ordered list). Al igual que las desordenadas cada uno de los elementos de la lista comenzará con una etiqueta <LI>, que puede o no llevar su correspondiente </LI> de cierre.
VEAMOS UN EJEMPLO:
<P> Ciudades del Mundo <P>
<OL>
<LI> newyork </LI>
<LI> Tokio </LI>
<LI> Shangai </LI>
</OL>
ESTO NOS MOSTRARÁ:
Ciudades del Mundo
1. NewYork
2. Tokio
3. Shangai
ATRIBUTOS DE LA ETIQUETA <OL>
La etiqueta <OL> dispone una serie de atributos, con los cuales es posible configurar la apariencia que va a tener la lista. Los más importantes son:
(1) TYPE="1 / a / A / i / I ": define el tipo de secuenciador a usar en la lista. Los secuenciadores en una lista van en su orden natural lógico. El atributo tipo puede tomar los valores:
ü TYPE="1" - Para ordenar por números - Este el valor que tiene type por defecto
ü TYPE="a" - Numerar por letras minúsculas del alfabeto
ü TYPE="A" - Clasificar por letras mayúsculas del alfabeto
ü TYPE="i" - Numerar por números romanos en minúsculas
ü TYPE="I" - Ordenación por números romanos en mayúsculas
VEAMOS ALGUNOS EJEMPLOS:
|
CÓDIGO HTML |
VISUALIZACIÓN |
|
<OL TYPE="1"> <LI> primer elemento </LI> <LI> segundo elemento </LI> <LI> tercer elemento </LI> </OL> |
|
|
<OL TYPE="a"> <LI> primer elemento </LI> <LI> segundo elemento </LI> <LI> tercer elemento </LI> </OL> |
|
|
<OL TYPE="A"> <LI> primer elemento </LI> <LI> segundo elemento </LI> <LI> tercer elemento </LI> </OL> |
|
|
<OL TYPE="i"> <LI> primer elemento </LI> <LI> segundo elemento </LI> <LI> tercer elemento </LI> </OL> |
|
|
<OL TYPE="I"> <LI> primer elemento </LI> <LI> segundo elemento </LI> <LI> tercer elemento </LI> </OL> |
|
(2) START="n": donde n es el valor con el que comenzará la lista. Los valores del parámetro "n" son números enteros a partir de 1. Si se omite este atributo la lista comenzará por el número 1.
|
Código HTML |
Visualización |
|
<OL TYPE="1" START="4"> <LI> primer elemento </LI> <LI> segundo elemento </LI> <LI> tercer elemento </LI> </OL> |
|
|
<OL TYPE="A" START="5"> <LI> primer elemento </LI> <LI> segundo elemento </LI> <LI> tercer elemento </LI> </OL> |
|
ANIDANDO LISTAS
HTML también no plantea la posibilidad de anidar listas. Esta opción nos puede ser muy útil, puesto que nos permite obtener listas mixtas.
EJEMPLO:
<P> DEPORTES <P>
<UL>
<Li> Deportes de pelota
<OL>
<LI> Fútbol
<LI> Balon mano
</OL>
<LI> Atletismo
<OL>
<LI> Maraton
<LI> Relevos
</OL>
</UL>
OBTENIENDO UNA LISTA COMO ESTA:
DEPORTES
· Deportes de pelota
1. Fétbol
2. Balonmano
· Atletismo
1. Maraton
2. Relevos
ETIQUETAS HTML