El cuerpo de un documento es el lugar de nuestra página web donde se encuentra todo el contenido de nuestra web. Éste se encuentra bajo las etiquetas <BODY> y </BODY> que se encuentran localizadas bajo la etiqueta </HEAD>. Dentro de esta etiqueta pueden definirse propiedades comunes a toda la página, como el color de fondo y márgenes, aunque no es recomendable utilizar los atributos de la etiqueta, ya que se están declarando obsoletos, en favor de las hojas de estilo que veremos más adelante.
ETIQUETAS PARA EL FORMATO DE TEXTO
HTML implementa varias etiquetas que nos van a permitir formatear el texto. Sin embargo, vamos a pasar por alto una de las más utilizadas (<FONT>), que está dejando de ser usada debido a que hace el código poco legible.
| Etiquetas para formatear texto |
| Etiqueta |
Descripción |
| <B> |
Texto en negrita |
| <I> |
Texto en cursiva |
| <U> |
Texto subrayado |
| <DEL> |
Texto tachado |
| <SUP> |
SuperíndiceSuperindice |
| <SUB> |
SubíndiceSubindice |
| <BIG> |
Texto grande |
| <SMALL> |
Texto pequeño |
| <TT> |
Texto modo teletipo |
| <CITE> |
Texto modo cita |
| <DFN> |
Texto modo definición |
| <PRE> |
Mantiene el formato del texto, manteniendo espacios y saltos de línea |
COMENTARIOS
HTML, como cualquier otro lenguaje también nos permite agregar comentarios a nuestro código y que éstos no sean mostrados al cliente, de modo que nos faciliten a los programadores la comprensión y reutilización de otros.
Un comentario en HTML se realiza de la siguiente forma:
<!-- Texto del comentario -->
CONJUNTO DE CARACTERES Y CARACTERES ESPECIALES
Puesto que una página puede ser vista en distintos países, y entre éstos hay diferencias en cuanto a los caracteres utilizados, HTML crea un conjunto denominado "caracteres especiales" que nos permiten identificar de forma inequívoca un caracter. En la siguiente tabla podemos ver algunos de los más importantes.
| Etiquetas para formatear texto |
| Etiqueta | Literal |
Etiqueta | Literal |
| < | < |
> | > |
| & | & |
" | " |
| Á | Á |
Ñ | Ñ |
| á | á |
ñ | ñ |
| É | É |
© | © |
| é | é |
® | ® |
| Í | Í |
Ó | Ó |
| í | í |
ó | ó |
| Ú | Ú |
€ | € |
| ú | ú |
£ | £ |
ETIQUETAS PARA LISTAS
Dentro de HTML podemos definir 3 tipos de listas, mediante las cuales podemos estructurar nuestro documento:
- Listas ordenadas. Se definen mediante el elemento <OL> y se les añaden los distintos ítems mediante la etiqeuta <LI>. En el seiguiente ejemplo podemos ver cómo se forman las listas ordenadas.
<ol>
<li> Ítem 1 </li>
<li> Ítem 2 </li>
</ol>
Listas no ordenadas. En este caso se utiliza para definirlas el comando <UL> y para añadir los ítems se utiliza la etiqueta <LI>
<ul>
<li> Ítem 1 </li>
<li> Ítem 2 </li>
</ul>
Listas de definiciones. Son un tipo especial de listas donde cada elemento de la lista está compuesto por un término y una definición y cada una de estas partes tiene su propia etiqueta. Se definen mediante la etiqueta <DL>, el término <DT> y la definición <DD>. En el ejemplo siguiente podemos ver cómo se forma una lista de definiciones.
<dl>
<dt>Término 1</dt>
<dd>Definición 1</dd>
<dt>Término 2</dt>
<dd>Definición 2</dd>
</dl>
ETIQUETAS PARA TABLAS
La tabla es uno de los elementos de mayor utilidad debido a su funcionalidad y versatilidad, ya que nos va a permitir organizar y categorizar el contenido dentro de nuestro documento.
Es muy utilizada por los diseñadores para organizar la distribución de los elementos del portal, y aunque es un método bastante utilizado, no es muy recomendable.
| Listas ordenadas |
Listas no ordenadas |
Listas de definición |
- Ítem 1
- Ítem 2
|
|
- Término 1
- Definición 1
- Término 2
- Definición 2
|
Los elementos más utilizados para crear una tabla son:
- <TABLE>. Se utiliza para definir una tabña y asignarle propiedades generales como por ejemplo: el borde (atributo border), la anchura (atributo width).
- <TR>. Permite definir las distintas filas de la tabla. Debemos tener presente que se debe declarar una etiqueta por cada fila de la tabla. Por tanto, tendremos tantas etiquetas como filas.
- Y dentro de la fila debemos ir declarando las distintas celdas, para ello se irán añadiendo tantos elementos <TD> como celdas se quieran declarar, esta operación habrá de repetirla para cada fila. Para terminar dentro de cada elemento <TD> incluiremos el contenido de la celda.
En el siguiente ejemplo vamos a constriur una tabña sencilla de 3 filas y 3 columnas. Entre comentarios HTML se ha ido explicando la función de cada etiqueta.
| <table> |
<!--Definición Tabla--> |
| <tr> |
<!--Fila 1--> |
| <td>Mes</td> |
<!--Columna 1, Fila 1--> |
| <td>Ingresos</td> |
<!--Columna 2, Fila 1--> |
| <td>Gastos</td> |
<!--Columna 3, Fila 1--> |
| <tr> |
<!--Fin definición Fila 1--> |
| <tr> |
<!--Fila 2--> |
| <td>Enero</td> |
<!--Columna 1, Fila 2--> |
| <td>1050€</td> |
<!--Columna 2, Fila 2--> |
| <td>150€</td> |
<!--Columna 3, Fila 2--> |
| <tr> |
<!--Fin definición Fila 2--> |
| <tr> |
<!--Fila 3--> |
| <td>Febrero</td> |
<!--Columna 1, Fila 3--> |
| <td>1150€</td> |
<!--Columna 2, Fila 3--> |
| <td>450€</td> |
<!--Columna 3, Fila 3--> |
| <tr> |
<!--Fin definición Fila 3--> |
| <table> |
<!--Fin definición Tabla--> |
RESULTADO VISUAL DE LA CONSTRUCCION DE LA TABLA
| Mes |
Ingresos |
Gastos |
| Enero |
1050€ |
150€ |
| Febrero |
1150€ |
450€ |
