Saltar la navegación

Etiquetas básicas

Para entender la estructura de un documento HTML (es decir, de una página Web) revisemos el siguiente código que muestra la estructura HTML de una página web básica.

<!DOCTYPE html>
<html>
	<head>
		<title>Esto es el tìtulo de la p&aacute;gina.</title>
	</head>
	<body>
		Hola mundo!<br>
		<b>Esto es negrita.</b><br>
		<i>Y esto it&aacute;lica.</i><br>
	</body>
</html>

Este código HTML corresponde a una página web común y corriente como la que tu ya conoces. A continuación te explico la estructura del documento:

  • La línea 1, DOCTYPE, indica al navegador el tipo de documento. En el ejemplo, el tipo de documento es "html".
  • Sorpresa! El documento en sí inicia en la línea 2. Se inicia con la etiqueta <html>, la cual es la raíz del documento y que contendrá a todas las etiquetas del documento. Dentro de la raíz del documento, tenemos dos partes: la cabecera (o header) y el cuerpo (o body).
    • La cabecera está contenida en la etiqueta <head> (Línea 3-5). El contenido de la cabecera no es visible al usuario. Es decir, al momento de renderizar el código de esta página en el navegador, no podrás ver esta información. Las etiquetas dentro de la cabecera proveen información que es utilizada por los motores de búsqueda.
    • El cuerpo está contenido en la etiqueta <body> (líneas 6 - 10). El contenido encerrado en la etiqueta body (es decir, las etiquetas y el texto dentro del body) es el que se mostrará en el navegador y será visible al usuario.

Recuerda que toda etiqueta tiene su apertura y cierre. El cierre se lo realiza con la barra invertida (<\>). Por ejemplo, para la etiqueta html, la apertura es <html> y el cierre es </html>.

Actividad: Mi primera página Web

  1. Copia el código del ejemplo en un fichero de texto.
  2. Guarda el fichero con el nombre mipagina.html.
  3. Abre el fichero creado haciendo doble clic sobre el fichero
  4. Visualiza la página.

Esta es tu primera página web!