Unidad 12. Ejercicio: Estructura de una página web. Etiquetas semánticas

En este ejercicio practicaremos cómo utilizar las etiquetas semánticas para crear la estructura de una página web. Para realizar este ejercicio vamos a crear una nueva carpeta en la carpeta de ejercicios del curso llamada cocina y un nuevo archivo llamado receta_cocina1.html.

Ejercicio 1: Etiquetas semánticas

El uso de las etiquetas semánticas es bastante simple e intuitivo, según las características de cada una que acabamos de ver. Realmente no existen normas fijas, cada diseñador puede darles el uso que considere más apropiado. El único límite es el sentido común, no debemos perder de vista que los buscadores las utilizarán para indexar la página, por lo tanto, nos interesa usar las etiquetas semánticas con la lógica para la que fueron diseñadas.

Es importante aclarar que las etiquetas semánticas no añaden ningún formato. Es decir, por usar nav no se crea un menú, ni el header tiene un tipo de letra más grande. El formato debemos definirlo nosotros de la forma habitual, con CSS. La excepción es que muchos navegadores incorporan la propiedad display: block a las etiquetas semánticas.

Veamos un ejemplo sencillo. Un sitio de cocina con dos secciones, artículos dentro de cada sección, una cabecera, un pie y publicidad.

Esta es la estructura básica:

Desde el editor Brackets haz clic en Archivo, elige Nuevo y copia el siguiente código:

<!DOCTYPE html>
<html lang="es-ES">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Recetas de cocina</title>
</head><body>
 <header>
  <h1 >La web de la cocina fácil</h1>
  <nav>
  <a href="#" >Carnes</a>
  <a href="#" >Pescados</a>
  </nav>
 </header>
 <section >
  <h2>Recetas de carne</h2>
  <article>
    <h3>Conejo al ajillo</h3>
    <p>Explicación de la receta 1</p>
  </article>
  <article>
    <h3>Cordero al horno</h3>
    <p>Explicación de la receta 2</p>
  </article>
 </section>
 <section >
  <h2>Recetas de pescado</h2>
  <article>
    <h3>Dorada a la sal</h3>
    <p>Explicación de la receta 3</p>
  </article>
 </section>
 <aside>
  <p>Publicidad</p>
 </aside>
 <footer>
  <p>autor: aulaClic</p>
 </footer>
</body>
</html>

Pulsa en el menú Archivo y elige Guardar como sitúate en la carpeta ejercicios del curso y pulsa en Nueva carpeta y escribe el cocina para el nombre de la carpeta, luego da el nombre receta_cocina1.html al archivo. Visualiza la página web desde el editor Brackets con el botón .

También puedes ver el resultado desde este enlace: receta_cocina1.

Ahora le daremos un poco de formato, añadiendo esta hoja de estilo:

body {
	font-family:Verdana,sans-serif;font-size:0.9em;
}
header {
	margin:5px;margin-bottom:15px;padding:8px;
	font-family: Arial, Helvetica, sans-serif;
	color:blue
}
footer {
  font-style:italic;
  font-size:0.8em;
}
section {
  margin-left:25px;
  font-style:italic
}
article {
  margin-left:25px;
  font-style:normal;
  color:green;
  font-family: Arial, Helvetica, sans-serif;
 }
aside {
  background-color:#ddd;
}
nav ul  {
  margin:0;padding:0; background-color:#a44
}
nav ul li {
  display:inline; margin:15px;
 }
p {
  color:black;
}

Pulsa en el menú Archivo y elige Guardar como sitúate en la carpeta ejercicios/cocina y pulsa en Nueva carpeta y escribe el css para el nombre de la carpeta, luego da el nombre receta2.css al archivo.
Ahora en el archivo receta_cocina1.html, que todavía tendrás abierto, añade el enlace a la hoja de estilo: <link href="css/receta2.css" rel="stylesheet" >
Pulsa en el menú Archivo y elige Guardar como y dale el nombre receta_cocina2.html, dentro de la misma carpeta. Visualiza la página web desde el editor Brackets con el botón .
También puedes ver el resultado desde este enlace : receta_cocina2
Si no dispones de un editor de texto (por ejemplo, si estás viendo este curso desde un dispositivo móvil) puedes probar el código anterior seleccionándolo y pegándolo como se explica en esta página: Probar código desde el navegador.

Enero-2019 (V 2.2)

Cursos Informática Gratuitos

Síguenos en: Facebook Sobre aulaClic Política de Cookies