Crear la estructura HTML
Profesor: Javier López
Volver
Propuesta de la actividad
Creación de la estructura HTML
Resultado final

Creación de la estructura HTML5
Vamos a empezar por la primera página y lo primero que vamos a crear es la estructura, para lo cual seguimos los siguientes pasos:

Abrimos un documento nuevo en cualquier editor de texto, y creamos una estructura básica sencilla:

<!doctype html>
<html>

  <head>
	<meta charset="utf-8"/>
	<title>Título</title>
  </head>

  <body>
     <header>
 	 Logo y cabecera
     </header>

     <nav>
 	 Enlace 1 (Quiénes somos)
 	 Enlace 2 (Servicios)
 	 Enlace 3 (Contacto)
     </nav>

     <section>
 	 <div>
 	   Títular de la página
 	 </div>

 	 <article>
 	      Contenido 1
 	 </article>

 	 <article>
 	      Contenido 2
 	 </article>

 	 <article>
 	      Contenido 3
 	 </article>
     </section>

     <footer>
 	 Pie de página
     </footer>
  </body>
</html>
Etiquetas de inicio (no varían nunca)


utf-8 para que la página muestre acentos.
Dentro de <title> escribimos el título que tendrá la página y que se verá en la pestaña del navegador.

A partir del <body> empieza el contenido de la página.
Dentro del <header> colocaremos el logo y el nombre de la empresa



Dentro del <nav> van ubicados los enlaces a los diferentes apartados de la web.




Dentro del <section> colocaremos el contenido principal.
Colocamos un <div> sólo para el título de la sección, para poder maquetarlo individualmente, que será 'Quiénes somos'.

Cada apartado estará dentro de un <article>



En este <article> estará el contenido del segundo apartado.



Y aquí el último <article>.



La última caja es el <footer> o pie de página, donde pondremos la fecha y la firma.

Como podemos apreciar (haciendo clic en el botón azul), tenemos un resultado realmente desalentador a nivel visual, pero con una estructura semántica prometedora.

Es MUY IMPORTANTE que guardes este fichero como 'index.html' y con formato 'UTF-8' (ver cómo guardar con formato UTF-8).

En el siguiente tema añadiremos el contenido, etiquetas para párrafos <p> y saltos de línea <br>.

En el siguiente tema 2 (Etiquetas básicas) vamos a .