Las páginas web no son más que documentos escritos en el lenguaje de marcas HTML,
que utiliza etiquetas o marcas junto con el texto, que contienen información sobre su
estructura o formato.
Las etiquetas en HTML se indican entre los símbolos < y >, y generalmente, van por pa-
res: etiqueta de apertura <etiqueta> y de cierre </etiqueta>. El texto entre ambas
etiquetas es el que se ve afectado por ellas. A este conjunto de par de etiquetas y con-
tenido se le conoce como elemento HTML. Además, las etiquetas pueden ir anidadas.
Esto quiere decir que, dentro del texto contenido entre dos etiquetas, puede haber otros
pares de etiquetas, o, lo que es lo mismo, un elemento HTML puede contener otros ele-
mentos HTML.
Estructura de una página HTML
Las páginas HTML tienen un formato bien definido:
1. La declaración de documento HTML con DOCTYPE.
2. Elemento html, que describe la página propiamente dicha, y es definido entre las
etiquetas <html> y </html>.
3. Elemento head, que contiene la cabecera del documento. Esta cabecera contiene
información acerca del documento, tal como enlaces a hojas de estilo, metainforma-
ción, pero no tiene que ver con la cabecera que vemos en el resultado de la página.
4. Comentarios, indicados entre los símbolos <!-- y -->.
5. Elemento body, con el cuerpo en sí de la página y que contiene los elementos nece-
sarios para su visualización. En su contenido tenemos aquellos elementos que nos
ayudan a organizar y formatear la página, tales como cabeceras, párrafos, etc.
Elementos y atributos HTML
Como ya dijimos, un elemento HTML es todo aquello contenido entre una etiqueta de
apertura y una etiqueta de cierre. Además, un elemento HTML puede contener dentro
otros elementos HTML anidados
La sintaxis de los elementos HTML sigue las siguientes reglas:
1. Los elementos HTML empiezan con una etiqueta de apertura <etiqueta> y terminan
con una etiqueta de cierre </etiqueta>.
2. Puede haber elementos HTML que no tengan contenido, elementos vacíos. En este
caso, para respetar el estándar XHTML, toda etiqueta que se abra debe cerrarse,
puede abreviarse con una sola etiqueta <etiqueta/>.
Por otra parte, algunos de estos elementos pueden necesitar información adicional. Los
atributos proporcionan esta información acerca de los elementos HTML, y se especifican
siempre en la etiqueta de inicio mediante pares nombre=”valor”. Veámoslo con un par
de ejemplos:
Ejemplo 1: la etiqueta <img> inserta una imagen en el documento. El atributo src indica
la ruta hacia la imagen, así como los atributos width y height, que indican el ancho
y alto de la imagen.
<img src=”logo.png” width=”300” height=”200”/>
Ejemplo 2: la etiqueta <a>, utilizada para introducir enlaces, necesita del atributo href
para indicar la dirección a la que hace referencia el enlace. En este caso, el texto «Haz
clic para ver mi web» será un enlace a la página http://alumnosmr.weebly.com.
<a href=”http://alumnosmr.weebly.com/”>
Haz clic para ver mi web
</a>
Veamos en las siguientes tablas-resumen los principales elementos HTML, junto con su
descripción y algunos ejemplos.
Elementos del cuerpo de la página
Según la forma de visualizar los elementos del cuerpo de la página, estos pueden ser
en bloque o en línea.
Los elementos de bloque se muestran como objetos rectangulares, con márgenes, altura
y ancho independientes de sus elementos circundantes.
Los elementos en línea son tratados como parte del flujo de texto, sin márgenes, alto o
ancho, e insertando saltos de línea cuando se llega al final. Estos elementos no pueden
ser insertados directamente dentro del body, sino que deben estar dentro de un elemen-
to de bloque.
Ejemplo: inserción de imágenes
<html><body>
<h1>Ejemplo de imagen</h1>
<img src=”http://alumnosmr.weebly.com/files/theme/default _ header.jpg” width=”400px” height=”180px” />
</body></html>
En este ejemplo, se ha insertado una imagen a través de su URL, y se le ha especificado
un ancho de 400 píxeles y un alto de 180 píxeles.
Ejemplo: tablas
<html><body>
<h1>Navegadores más utilizados en Europa</h1>
<h3>Mayo de 2012</h3>
<table border=”1”>
<tr> <th>Navegador</th> <th>% de uso</th> </tr>
Debes tener en cuenta que lo que fija la estructura de las tablas son las etiquetas tr, th
y td, por lo que no es necesario introducir toda una fila en la misma línea, por ejemplo,
la línea: <tr> <td>Firefox</td> <td>29%</td> </tr>
se podría escribir como:
<tr>
<td>Firefox</td>
<td>29%</td>
</tr>
<tr> <td>Chrome</td> <td>31%</td> </tr>
<tr> <td>Firefox</td> <td>29%</td> </tr>
<tr> <td>Internet Explorer</td> <td>27%</td>
</tr>
</table>
</body></html>
Formularios
Los formularios HTML se utilizan para proporcionar información por parte del usuario, y
bien enviar esta a la aplicación web, para su procesamiento, o enviarse por correo a un
destinatario. Los formularios pueden tener elementos de diferentes tipos, tales como cam-
pos o áreas de texto, botones de radio, checkboxes, entre otros y botones para enviar los
datos.
