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 .