Ir al contenido principal

Estructura de un documento

HTML es el lenguaje de marcas estándar utilizado para crear páginas web.

Cuestión de etimología: A partir de ahora, cuando nombramos el elemento [P] (en mayúscula), nos referiremos a las etiquetas <p> y </p> y a su contenido.

El uso es sencillo:

  • Paso 1: Se abre el bloc de notas o el editor Notepad++.
  • Paso 2: Se escribe elmodelo esta imagen en minúsculas.
  • Paso 3: Se guarda el archivo con extensión ".html".
  • Paso 4: Se carga el archivo con el navegador haciendo doble clic encima del fichero.

El estándar HTML5 no requiere etiquetas en minúsculas, pero W3C recomienda minúsculas en HTML, y exige minúsculas paratipos de documentos más estrictos como XHTML. Por esto, es preferible siempre hacerlo en minúsculas.

Presentación de los componentes del modelo HTML

Vamos a explicar cada uno de los elementos de la imagen anterior.
El DOCTYPE HTML especifica el tipo de HTML utilizado(aquí HTML5). Es la declaración del documento. Es él que rige el conjunto de reglas que se van aplicar a los elementos.

Luego vienen las etiquetas que debe de llevar cada fichero .html.
Salvo excepción:

  • Van por pares.
  • Se abren y se cierran.
Estructura básica de fichero HTML

<html> para abrir el documento.
</html> para cerrarlo.
<head> para abrir la parte que permite configurar la hoja (cabecera).
Se encuentra entre los elementos <html> y <body>.

[HEAD] Es un contenedor de metadatos que define el título, el tipo de fuente utilizado, las hojas de estilos, los scripts que hay que cargar y más cosas. Corresponde a lo que generalmente no se ve en el navegador.

<body> para abrir la parte que va a alojar los contenidos del documento, el cuerpo del documento. Lo que se va a ver en el navegador.
<h1> para abrir una etiqueta de título. Aquí el título principal.
<p> para abrir una etiqueta de párrafo y para alojar un párrafo de texto.

Cada uno de estos elementos se abren y se cierran: <head></head>, <body></body>, <p></p> y <h1></h1>

Representación visual de los elementos de un documento HTML
Representación visual en el navegador

¿Lo sabías?: El navegador no imprime las etiquetas en pantalla. Despliega su contenido según reglas especificadas por el tipo de documento declarado al principio del fichero con el DOCTYPE.

Visualizar el código fuente HTML de un documento

Viendo una animación o algún efecto especial de una página web, cuántas veces os habéis preguntado ¿Cómo se hace ésto?
Para visualizar el código fuente de una página web, hacemos clic derecho con el ratón y seleccionamos "ver código fuente de la página" en el menú que se despliega.
Para inspeccionar un elemento concreto, hacemos clic derecho con el ratón y seleccionamos "inspeccionar elemento".

Los encabezados

Existen 6 tipos de encabezados de mayor a menor importancia.
Desde [h1] hasta [h6].

Estas etiquetas son muy importantes. Intervienen en la estructura global de la página, pero también en la forma en que van indexar los navegadores su estructura y sus contenidos.

A día de hoy, una práctica bastante común consiste en limitar el [H1] a un único elemento para todo el documento.
Un elemento único que va a dar un título significativo al documento y que va a ayudar a los robots de los navegadores a saber de qué trata el documento.

Otra práctica importante consiste en hacer que el contenido de este elemento sea igual o parecido al contenido del elemento [TITLE] del [HEAD].
El uso de [H2] y de los demás niveles está reservado a los títulos de menor importancia.

La fuente de los encabezados está por defecto configurada para aparecer más grande. Este tamaño se puede configurar en el fichero de estilos (CSS) o usando el atributo style.

Los parráfos

Las etiquetas de los elementos [P] se utilizan para delimitar párrafos.

Todos los contenidos que se encuentran entre las etiquetas estarán desplegados en una sola línea.

Para mantener el mismo formato que en el ejemplo, podemos utilizar el elemento [PRE], el encargado de imprimir en pantalla un formato predefinido.

Es parecido al elemento [P] salvo que mantiene el formato propuesto con un tipo de fuente Courier y un tamaño de fuente predefinido.

Ejemplo de párrafo:

<p>RIMA XXI- GUSTAVO ADOLFO BÉCQUER
¿Qué es poesía? Dices mientras clavas
en mi pupila tu pupila azul;
¿Qué es poesía...? ¿Y tú me lo preguntas?
¡Poesía... eres tú!</p>

Newsletter

Si mandas tu email desde este formulario, te responderé con una oferta de 5% aplicable a tu próximo presupuesto. Más adelante, te enviaré ofertas y noticias acerca de mi actividad.
No spam. Tus datos están protegidos y no compartidos.

imagen Captcha correspondiente a tortuga

Por favor, escribir el nombre visible en esta imagen sin tilde, mayúscula, símbolo...

Parte inferior de la sección rellenada por fotos de gente