Zumbe.net

Comenzando a programar una web

Estructura de un Documento HTML

Vamos a ver a continuación la estructura que suele tener un documento HTML, ya que como deberías saber HTML es el lenguaje que define la estructura del documento web.

Sobreentiendo que estás mínimamente familiarizado con las etiquetas de HTML y su uso en general.

Repasemos las etiquetas fundamentales de un documento HTML:

Las etiquetas “html”, es el elemento raiz y representa al documento completo.

Código: html
  1. <html> (…) </html>

Dentro del elemento raiz van dos muy importantes: “head”, o cabecera…

Código: html
  1. <head> (…) </head>

… y “body” o cuerpo del documento.

Código: html
  1. <body> (…) </body>

De momento llevamos esto:

Código: html
  1. <html>
  3. <head>
  4. …
  5. </head>
  6. <body>
  7. …
  8. </body>
  10. </html>

Y ahora un dato muy importante: al principio del todo hay que darle al intérprete del documento información de la versión HTML. Hay varios tipos diferentes, pero lo más usual es poner esto:

Código: html
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2.  

Es el tipo de documento Transitional, que permite usar todas las etiquetas, desaprobadas o no. Pero limitémonos a incluirlo al comienzo de TODOS nuestros archivos. (más información sobre doctypes aquí)

Profundicemos en el elemento “head”:

Head

Lo primero de todo es poner un título a nuestra página con el elemento “title”:

Código: html
  1. <title>Titulo de la web</titulo>

Después una referencia a la hoja de estilo en cascada.

Código: html
  1. <link rel="stylesheet" href="estilo.css" type="text/css">

Y a continuación una etiqueta menos usada de lo que se debería, es realmente importante. Estoy hablando de los Metadatos.
Su sintáxis es generalmente, aunque hay diferentes tipos.

Código: html
  1. <meta name="Author" content="Alex Barros">
  2. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  3. <meta http-equiv="keywords" content="palabras, clave, separadas, por, comas">

Y ahora pasemos a la parte que se imprime en el navegador: el cuerpo.

Body

Dentro de body vamos a colocar nuestro contenido, pero no todo al “tun-tun”, sinó que vamos a darle formato con las etiquetas de HTML.
Elemento de párrafo, el más usado. Siempre que escribas un párrafo úsalo, simple.

Código: html
  1. <p> Me gusta ver cómo juega mi sobrina a las muñecas</p>
  2. <p>La familia es un bien que no debemos menospreciar.</p>

Encabezados. Siempre que se requiera un título de algo. Hay diferentes niveles di título.

Código: html
  1. <h1>Mis películas preferidas</h1>
  2. <p> A continuación expongo mis pelis favoritas:</p>
  3. <h2>Humor</h2>
  4. <p>El sentido de la vida y los Hnos. Marx en la ópera</p>
  5. …

Listas: usando la etiqueta “ul” para indicar una lista y “li” para cada elemento de la lista.

Código: html
  1. <ul>
  2. <li>El sentido de la vida</li>
  3. <li>Los Hnos. Marx en la ópera</li>
  4. <li>Los dos lados de la cama</li>
  5. </ul>

Hay muchas más etiquetas, pero sólo con estas tenemos suficiente para hacer una página sintácticamente correcta.

Esto podría ser el código fuente de una web:

Código: html
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  4. <head>
  5. <title>Mis Pelis favoritas</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  7. <meta http-equiv="description" content="Lista de mis películas preferidas">
  8. <meta name="author" content="Alex Barros Vidaurre">
  9. </head>
  11. <body>
  12. <h1>Mis películas preferidas</h1>
  13. <p>A continuación expongo mis pelis favoritas:</p>
  14. <h2>Humor</h2>
  15. <ul>
  16. <li>El sentido de la vida</li>
  17. <li>Los Hnos. Marx en la ópera</li>
  18. <li>Los dos lados de la cama</li>
  19. </ul>
  20. <h2>Otras…</h2>
  21. <ul>
  22. <li>Noviembre</li>
  23. <li>Big Fish</li>
  24. <li>Titanic</li>
  25. </ul>
  26. </body>
  28. </html>

14 Marzo 2006 · Tags Estándares, (X)HTML |

« Visualizar imágenes de un directorio | | INNER JOIN para unir Tablas »

Un comentario

MARCOS dice:

ESTOY MUY DECEPCIONADO POR ESTO POR QUE YO TENGO UNO MEJOR


3 de Abril del 2008 a las 3:11

Escribe un comentario!

Buscador

2005-2007 Zumbe.net Creada por Alex Barros con WordPress - Licencia Reconocimiento - RSS