Estructura general de una pagina web XHTML

Ramón Torres

La estructura general de una pagina web XHTML prácticamente siempre poseerá las etiquetas: DOCTYPE, head, title, body. A continuación veremos un ejemplo de una pagina web XHTML muy básica para comprender un poco mejor:

1
2
3
4
5
6
7
8
9
10
11
12

<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
<head>
  <title>Mi primera pagina web</title> 
</head>
<body>
 
  <p>Hola mundo!!!</p>
 
</body>
</html>

Si copias estas lineas en un editor de texto plano (notepad en windows o gedit en linux, por ejemplo) y posteriormente lo guardas como un archivo .html (mi-primera-pagina.html) y después lo abrimos con nuestro navegador web veras una pagina web, muy sencilla pero esencial para comprender como trabajan las paginas web que vemos a diario.

A continuación te mostraremos una imagen que muestra nuestro código XHTML y el resultado en el navegador web:
La estructura general de una pagina web XHTML

Ahora nos centraremos en explicar cada una de las partes o secciones que nos ayudaran a conocer esta estructura general que componen nuestras paginas XHTML.

Etiqueta head:

1
2
3
4
5
6

<head>
  <title>Mi primera pagina web</title>
  <!-- referencias a: hojas de Estilos (.css) y archivos JavaScript (.js) -->
  <link rel="stylesheet" type="text/css" href="style.css" />
  <script type="text/javascript" src="mis-funciones.js"></script>
</head>

Entre estas etiquetas veremos lo que es el titulo de nuestra pagina web el cual aparecerá en la barra del navegador, el cual indicamos a su ves entre las etiquetas title, dentro de esta etiqueta también encontraremos referencias a: Hojas de estilo CSS, archivos Javascript y tambien segmentos Hojas de estilo CSS y de códigos Javascript en algunos casos asi como estilos en particular y codigos de google analitic por ejemplo.

Etiqueta title
Es la encargada de mostrar el titulo en la barra del navegador y también puede servir de referencia a los buscadores web como: google o yahoo.

Nuestra siguiente etiqueta es body

1
2
3

<body>
  <p>Hola mundo!!!</p>
</body>

La palabra «body» en ingles significa «cuerpo» y literalmente en este contexto se convierte en el cuerpo de nuestra pagina web, esta etiqueta se convierte en la contenedora en si de todo lo que veremos en nuestro navegador web, de momento nuestra pagina web que hemos creado con el código de ejemplo se verá de la siguiente manera:

mi primera pagina web - vista en el navegador -La estructura general de una pagina web XHTML

Etiqueta p
Nuestra etiqueta «p» indica al navegador que lo que se encuentre entre:

1

<p> </p>

será un «parrafo»

Bueno esperamos este post haya sido de ayuda para tu aprendizaje y posteriormente estaremos publicando un poco mas sobre el contenido entre nuestra etiqueta body para que puedas empezar a desarrollar tus propias paginas web con conocimiento sólido.

Puedes descargar los archivos del ejemplo en este enlace: estructura-basica-pagina-web-xhtml

Haciendo un poco de remembranza:
En nuestro pasado post explicamos un poco sobre lo que cambia en lo que trata una pagina XHTML de una HTML de la vieja escuela, puedes revisarlo por si no lo has leido ;)

Post relacionados:

Categories: XHTML