Estructura básica de una página web en HTML
Publicado en HTML Básico el 27 de Apr de 2007 -
La estructura de una página web es muy sencilla. Si alguna vez habéis echado un vistazo al código HTML de una página web, habréis visto que siempre sigue la misma estructura:
<html>
<head>
<title>Aquí va el título de la página web</title>
</head>
<body>
Aquí va el contenido de la página web....
...distribuido en diferentes líneas.
</body>
</html>
Veamos para qué sirven cada una de las etiquetas:
- <html> </html> nos indica cuando empieza y acaba una página html.
- <head> </head> nos indica cuando empieza y acaba la cabecera de la página, donde incluiremos códigos y textos invisibles que son necesarios para definir algunos aspectos de la página. Por ejemplo, aquí definiremos el nombre de la página web con la etiqueta <title>.
- <title> </title> sirve para definir el título de nuestra página web. Generalmente este texto se visualiza en la barra superior de los navegadores. Por ejemplo, vosotros debéis estar viendo “Las cosicas de Rekete” ahora mismo.
- <body> </body> nos indica cuando empieza y acaba el cuerpo de la página donde se coloca el contenido principal que queremos que se visualice en nuestra página.
Para practicar, podéis escribir en un editor de texto, tal como el bloc de notas, la estructura básica de una página web, sustituyendo el nombre del título y el contenido por lo que vosotros queráis. Tras guardar el archivo con la extensión .htm o .html, podéis comprobar el resultado en un navegador.
Esto es lo mínimo que se necesita para estructurar correctamente una página web. Sin embargo, aparte de esta estructura, muchas páginas web comienzan con la etiqueta <!DOCTYPE> justo antes de la etiqueta <html>. Por ejemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Aquí va el título de la página web</title>
</head>
<body>
Aquí va el contenido de la página web....
...distribuido en diferentes líneas.
</body>
</html>
Con ello estamos indicando qué versión de HTML o XHTML se usa (en el ejemplo anterior: XHTML 1.0 Strict). Cada una de estas versiones se llaman “Document Type Definition” o simplemente DTD. Existen tres tipos principales de DTDs:
- Strict: cuando queremos usar solamente código (X)HTML. Todos los elementos que ya han dejado de estar en uso no pueden usarse con esta versión. Si queremos aplicar estilo a nuestra página web, deberemos usar hojas de estilo CSS.
- Transitional: cuando queremos usar código (X)HTML y aplicar estilo a la vez todo mezclado bajo el mismo código. Debemos usar esto cuando nuestros lectores utilizan navegadores que no soportan hojas de estilo CSS.
- Frameset: es igual que la Transitional DTD pero lo usamos cuando queremos utilizar “frames” o navegación por marcos. Las navegación por marcos te permite dividir la estructura de una página web en secciones, llamadas “frame” o “marco”, de tal manera que el contenido de los marcos es independiente entre sí. Por ejemplo, imaginemos que tenemos una página web dividida en dos marcos. En un marco tenemos un menú, en otro el contenido. Conforme pulsamos sobre cualquiera de las opciones del menú, el contenido en el otro marco cambia sin que por ello cambie el propio menú.
Hoy en día están muy extendidas las dos primeras DTDs, ya que muchos navegadores no soportan frames y por lo tanto la última se está dejando de utilizar; la diferencia entre la primera y la segunda radica en que en la primera separas completamente el contenido del diseño, mientras que en la segunda puedes mezclarlo. Obviamente, la primera opción sería ideal, sin embargo, muchas personas se decantan por la segunda ya que desconocen el potencial de CSS.
Para añadir la etiqueta <!DOCTYPE>, no hace falta que sepamos que significa palabra por palabra estas líneas, solamente elegir la DTD que queramos usar y añadir una de las declaraciones <!DOCTYPE> del W3C al inicio de nuestra página. E incluso es algo opcional añadirlo. Pero haciéndolo conseguiremos que el navegador identifique mejor el tipo de (X)HTML que estamos usando y, por lo tanto, interpretará mejor y más rápido la página.
