lunes, 6 de octubre de 2008

Estructura de un documento HTML

Hasta ahora veníamos viendo las etiquetas que usamos cuando escribimos en lenguaje html, ahora vamos a ver la estructura básica de un documento html donde vamos a usar esas etiquetas.

Acá tienen un ejemplo del esquema más básico de la estructura de un documento html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Ejemplo</title>
  </head>
  <body>
    <p>ejemplo</p>
  </body>
</html>

Veamos un poco que significan y que función cumplen estas etiquetas que hasta ahora no habíamos visto:

<!DOCTYPE>.

Con esta etiqueta le decimos al navegador (browser) el tipo de documento que va a abrir mediante una declaración de "tipo de documento" (DTD). De esta manera le indicamos como debe interpretar las etiquetas que usamos en nuestro documento y en definitiva como debe mostrar nuestro documento en pantalla.

Existen varias DTD que han ido surgiendo a lo largo de los años. La tendencia es ir limpiando el html de aspectos estéticos y centrarse en declarar el significado de los contenidos. Todo lo relativo a diseño y presentación queda delegado a las Hojas de Estilo (CSS) que veremos más adelante.

En la etiqueta se incluye una url con el archivo que declaran esas reglas.

Para algunas versiones se pueden encontrar variantes (Strict, Transitional y Frameset) las que tienen pequeñas diferencias.

Las variantes "Transitional" admiten etiquetas y atributos que se empiezan a dejar de usar y que ya no se encuentran disponibles en la variante "Strict". La variante Frameset es para páginas que utilizan marcos o frames.

Más información sobre la etiqueta DOCTYPE

html

Define el inicio del documento HTML, le indica al navegador que lo que viene a continuación debe ser interpretado como código HTML. Esta etiqueta se abre luego de la declaración de DOCTYPE y de cierra al final del documento.

head

Define la cabecera del documento HTML, esta cabecera suele contener información sobre el documento que no se muestra directamente al usuario en el cuerpo de nuestra página, por ejemplo el título de la ventana del navegador, la hoja de estilos que vamos a usar, datos sobre autoría, etc.

body

Dentro de la la etiqueta body es donde encontramos todo lo que vamos a presentar al usuario. Es aquí donde vamos a escribir nuestro html: textos, imágenes, links, etc.

miércoles, 1 de octubre de 2008

Reglas del XHTML a tener en cuenta


Siempre cerrar las etiquetas
.
Los docuementos xhtml no pueden tener etiquetas abiertas, siempre que abrimos un <p> debemos cerrarlo con un </p> .

Las etiquetas que definien un elemento de manera independiente deben cerrarse en si mismas.
Debemos cerrar la etiqueta con una barra al final, dejando un espacio antes para evitar incompatibilidades con navegadores antiguos. Por ejemplo <br /> o <img src=”url_de_la_imagen” />

Anidación lógica de etiquetas.
Cuando incluimos etiquetas dentro de etiquetas (anidación de etiquetas) deben seguir una forma lógica. Debemos cerrar las etiquetas en el orden inverso al que fueron abiertos.

Sintaxis incorrecta:
<p> aqui tenemos un texto con una palabra en <strong> negrita </p> </strong>

Sintaxis correcta:
<p> aqui tenemos un texto con una palabra en <strong> negrita</strong> </p>

Todas las etiquetas y sus atributos deben escribirse en minúscula
.
Sintaxis incorrecta:
<P> aqui tenemos un párrafo con una palabra en </P>

Sintaxis correcta:
<p> aqui tenemos un párrafo con una palabra en </p>

Todos los valores de los atributos deben estar siempre entrecomillados.

Sintaxis incorrecta:
<img src=url_de_la_imagen />

Sintaxis correcta:
<img src=”url_de_la_imagen” />