jairogarcíarincón

Estructura de un documento HTML

14.1K
Estructura de un documento HTML
23/08/2020

Contenidos

  1. Esquema de funcionamiento de un servicio web
  2. Lenguaje de marcas HTML
  3. Estructura de un documento HTML
  4. Hojas de estilo CSS (1/2)
  5. Hojas de estilo CSS (2/2)
  6. Diseño responsive con media-queries
  7. Ejercicios de Repaso HTML/CSS
  8. Introducción a JavaScript
  9. Elementos del lenguaje JavaScript
  10. Los operadores en JavaScript
  11. La gramática en JavaScript
  12. Ejercicios de repaso Javascript

Estructura de un documento HTML

Los documentos HTML se encuentran estrictamente organizados. Cada parte del documento está diferenciada, declarada y determinada por etiquetas específicas.

La primera etiqueta que debemos encontrarnos SIEMPRE, en la primera línea del archivo y sin espacios o líneas que la precedan, es el tipo de documento:

<!DOCTYPE html >


Lo siguiente que debemos hacer es construir la estructura html, en la medida de lo posible especificando el atributo del idioma lang en el que está escrito la página:

<!DOCTYPE html >

<html lang="es">



</html>


Una vez dentro de la estructura en árbol de html y antes de empezar a escribir el contenido, debemos declarar la etiqueta head, responsable, entre otras cosas, de definir:

  • El juego de caracteres en el que está escrito el documento, y que en el caso del idioma español será utf-8 a través de una etiqueta tipo meta charset

  • El título, a través de la etiqueta title

  • La descripción de nuestro documento, a través de la etiqueta meta description

  • Las palabras clave de nuestro documento, separadas por comas a través de la etiqueta meta keywords

  • Enlaces a archivos CSS y de fuentes, a través de etiquetas tipo link, que veremos más adelante

  • Código Javascript, a través de la etiqueta script y que también estudiaremos más adelante

  • Y muchas otras cosas...


Y por fin, declararemos la etiqueta body, correspondiente al cuerpo de nuestro documento, esto es, la parte visible.

El siguiente código muestra la estructura completa de una página web sencilla :

<!DOCTYPE html >

<html lang="es">

	<head>

		<meta charset="utf-8">

		<meta name="description" content="Ejemplo de HTML5">

		<meta name="keywords" content="HTML5, CSS, Javascript">

		<title>Título de la página</title>

	</head>

	<body>

		Cuerpo de la página

	</body>

</html>


Para facilitar la comprensión del contenido, se recomienda al alumno la visualización del siguiente video, extraído del canal de YouTube pildorasinformáticas:

Conceptos básicos


Estructura del cuerpo

La estructura del cuerpo (el código entre las etiquetas body) generará la parte visible del documento.

En versiones anteriores de HTML se estructuraba la información del body mediante tablas (table) y/o contenedores de división (div).

El problema es que ni table ni div dan información del tipo de contenido, algo poco importante para el usuario pero necesario desde el punto de la accesibilidad y del posicionamiento para que los navegadores y los robots interpreten qué tipo de información hay en cada bloque del documento.

Poniendo como ejemplo una página de un blog, normalmente nos encontramos con 5 partes diferenciadas, tal y como muestra la siguiente imagen:

Fuente: Juan Diego Gauchat. El gran libro de HTML5, CSS3 y Javascript

  • Cabecera (elemento header): espacio donde usualmente se ubica el logo, título, subtítulos y una corta descripción del sitio web o la página.

  • Barra de navegación (elemento nav): menú o lista de enlaces con el propósito de facilitar la navegación a través del sitio.

  • Información principal (elementos section y article): ubicada en el centro y en el caso de un blog normalmente con un listado de artículos, productos, imágenes o similar.

  • Barra lateral (elemento aside): es opcional, y podría mostrar, por ejemplo, una lista de enlaces apuntando hacia cada uno se esos ítems, un calendario de eventos o anuncios.

  • Pie (elemento footer): es el área en donde normalmente se muestra información acerca del sitio web, el autor o la empresa, además de algunos enlaces con respecto a reglas, términos y condiciones y toda información adicional que el desarrollador considere importante compartir.



De este modo, si el esquema clásico de diseño de una página web es similar al mostrado en la siguiente figura de la izquierda, HTML5 incorpora nuevos elementos que proporcionan dicha información, y que convertirían el diseño anterior en la siguiente estructura HTML5 (figura de la derecha):

Fuente: Juan Diego Gauchat. El gran libro de HTML5, CSS3 y Javascript
Fuente: Juan Diego Gauchat. El gran libro de HTML5, CSS3 y Javascript


Volviendo a nuestro ejemplo anterior, la estructura completa de nuestro sitio web introduciendo los nuevos elementos quedaría así:

<!DOCTYPE html >

<html lang="es">

	<head>

		<meta charset="utf-8">

		<meta name="description" content="Ejemplo de HTML5">

		<meta name="keywords" content="HTML5, CSS, Javascript">

		<title>Título de la página</title>

	</head>

	<body>

		<header>

			<h1>Este es el título principal del sitio web</h1>

		</header>

		<nav>

			<ul>

				<li>principal</li>

				<li>fotos</li>

				<li>videos</li>

				<li>contacto</li>

			</ul>

		</nav>

		<section>

			Primera sección de la web

			<article> Artículo 1 </article>

			<article> Artículo 2 </article>

			<article> etc </article>

		</section>

		<section>

			Segunda sección de la web

			<article> Artículo 1 </article>

		</section>

		<aside>

			<p> Texto 1 del aside </p>

			<p> Texto 2 del aside </p>

			<p> etc </p>

		</aside>

		<footer>

			Todos los derechos reservados © 2020

		</footer>

	</body>

</html>


El siguiente vídeo extraído del canal de YouTube pildorasinformaticas sirve para afianzar todo lo visto hasta el momento:

Nuevos elementos de estructura en HTML5


Dentro del cuerpo

El contenido de nuestra página estará compuesto por diferentes elementos visuales tales como títulos, textos, imágenes, videos y aplicaciones interactivas, entre otros. Necesitamos poder diferenciar estos elementos y establecer una relación entre ellos dentro de la estructura.

Fuente: Juan Diego Gauchat. El gran libro de HTML5, CSS3 y Javascript
Así, del mismo modo que los blogs están divididos en entradas, sitios web normalmente presentan información relevante dividida en partes que comparten similares características. El elemento article, normalmente ubicado dentro de un elemento de tipo section, nos permite identificar cada una de estas partes.

El elemento article identifica una unidad de contenido (noticia, artículo, producto, entrada, persona, etc.).


Las etiquetas h1, h2, h3, h4, h5 y h6 nos permite crear títulos de manera jerárquica, siendo h1 h6 el más pequeño, y se pueden añadir en cualquier parte del body, si bien es importante seguir el orden jerárquico (por ejemplo, un h3 no debe ir después de un h2).

<section>

	<article>

		<header>

			<h1>Título del mensaje uno</h1>

			<h2>Subtítulo del mensaje uno</h2>

		</header>

		Aquí el texto del artículo

	</article>

</section>


Como resumen de lo anterior y del final del capítulo, se recomienda al alumno la visualización de los siguientes videos, extraídos del canal de YouTube pildorasinformáticas:

Estructura del cuerpo y nuevos elementos
figure figcaption y Nuevos elementos


Respecto al texto, existen una serie de etiquetas que podemos utilizar para personalizarlo:

  • La etiqueta span hace referencia a un trozo de texto que se agrupa con la diea de luego aplicarle ciertos estilos, como veremos más adelante

  • La etiqueta p permite definir un párrafo de texto

  • La etiqueta mark fue agregada para resaltar parte de un texto que originalmente no era considerado importante pero ahora es relevante acorde con las acciones del usuario. El ejemplo que más se ajusta a este caso es un resultado de búsqueda.

  • La etiqueta em es para indicar énfasis, reemplazando la etiqueta i que se utilizaba antes.

  • La etiqueta strong es para indicar importancia, marcando en negrita el texto dentro de ella, y sustituye a la etiqueta b que se utilizaba antes.

  • La etiqueta small tiene el propósito de presentar la llamada letra pequeña, como impresiones legales, descargos, etc...
  • La etiqueta cite se utiliza para presentar títulos de libros, películas, etc.

  • La etiqueta address se debe utilizar para encerrar direcciones de correo electrónico o enlaces a páginas web

  • El elemento time nos permite declarar un texto comprensible para humanos y navegadores que representa fecha y hora


<span>Esto es un span</span>

<span>Esto es otro span</span>

<p>Esto es un párrafo</p>

<p>Esto es otro párrafo</p>

	Mi<mark>coche</mark> es rojo, esto es un <em>texto enfatizado</em> y esto es un <strong>texto importante<strong>.

	Esto es <small>letra pequeña</small> y esto es el <cite>título de una película</cite>.

<time datetime="2017-10-09T12:10:45">publicado el 09-10-2017 a las 12:10:45</time>


Esto es un spanEsto es otro span

Esto es un párrafo

Esto es otro párrafo


Mi coche es rojo, esto es un texto enfatizado y esto es un texto importante
Esto es letra pequeña y esto el título de una película


Comentarios, listas y tablas

Por último, existen etiquetas que permiten generar comentarios en el código (no salen en el navegador y se utilizan para organizar el código). Igualmente, es posible crear listas (numeradas o no), así como tablas.

<!--Esto es un comentario-->



<!--declaración de una lista sin numerar-->

<ul>

	<li>Ítem 1</li>

	<li>Ítem 2</li>

	<li>Ítem 3</li>

</ul>



<!--declaración de una lista numerada-->

<ol>

	<li>Ítem 1</li>

	<li>Ítem 2</li>

	<li>Ítem 3</li>

</ol>



<!--declaración de una tabla-->

<table>

<tr>

    <th>Nombre</th>

    <th>Apellido</th>

    <th>Edad</th>

  </tr>

  <tr>

    <td>Alba</td>

    <td>García</td>

    <td>27</td>

  </tr>

  <tr>

    <td>Sonia</td>

    <td>López</td>

    <td>21</td>

  </tr>

</table>

Lo que generará algo como esto:

  • Ítem 1
  • Ítem 2
  • Ítem 3

  1. Ítem 1
  2. Ítem 2
  3. Ítem 3


NombreApellidoEdad
AlbaGarcía 27
SoniaLópez 21


Ejercicios guiados:

  • Página web que se asemeje lo más posible a la mostrada en el documento PDF llamado SMR-AW Ejercicio guiado 1.
  • Página web siguiendo las especificaciones HTML5 que incluya un listado de todas las películas de Harry Potter. Debe haber un menú que permita acceder a cada uno de los artículos que se detallan a continuación. Cada article de cada película debe incluir foto, título, año, director, protagonistas y descripción. Al pinchar en cada una de ellas, debe abrirse un enlace en una pestaña nueva que lleve al sitio web oficial de la película o, en su defecto, a la Wikipedia de esa película. Agrega también un footer más pequeño que el resto.

Publicado el 23 de Noviembre de 2024

aplicacionesweb

Anterior
Siguiente