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

En este ejercicio practicaremos cómo utilizar las etiquetas semánticas para crear la estructura de una página web con tres niveles. Para realizar este ejercicio vamos a crear un nuevo archivo llamado receta_cocina3.html, dentro de la carpeta de ejercicios/cocina, creada en el ejercicio anterior; y una nueva hoja de estilo receta3.css

Para realizar este ejercicio debes descargarte el archivo conejos-al-ajillo.jpg de la carpeta ejercicios/unidad-12/cocina/graficos

Ejercicio 2: Etiquetas semánticas. Tres niveles

En el ejercicio anterior sólo teníamos dos niveles sección y artículo, ¿y si necesitamos un tercer nivel? Por ejemplo si queremos tener tres puntos en cada receta para la Descripción con foto, los Ingrediente y el Modo de elaboración. Podríamos anidar otro article o usar el contenedor div. En esta ocasión, vamos a usar div con una clase, para crear el tercer nivel en el que incluiremos todo esto.

De esta forma un artículo quedaría como vemos a continuación.
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>
	  <link href="css/receta3.css" rel="stylesheet" />
  </head>
  <body>
  	<header>
  		<h1>La web de la cocina f&aacute;cil</h1>
  		<nav>
  			<ul>
 				<li><a href="#" >Inicio</a></li>
  				<li><a href="#" >Carnes</a></li>
  				<li><a href="#" >Pescados</a></li>
  				<li><a href="#" >Ayuda</a></li>
  			</ul>
  		</nav>
  	</header>
  	<div id="columna_izquierda">
  		<section >
  			<h2>Recetas de carne</h2>
  			<article>
  				<h3>Conejo al ajillo</h3>
  				<div class="descripcion">
  					<p>Una de las formas m&aacute;s tradicionales de preparar el conejo es esta, con abundantes ajos.</p>
  					<p><img src="graficos/conejos-al-ajillo.jpg" alt="Conejo al ajillo" width="400" height="218" align="right" /></p>
  				</div>
  				<div class="ingredientes">
  					<h4>Ingredientes:</h4>
  					<ul>
  						<li> 1 conejo</li>
  						<li> 1 cabeza ajos</li>
  						<li> 1 vaso vino blanco</li>
  						<li> aceite</li>
  						<li> sal</li>
  					</ul>
  				</div>
  				<div class="elaboracion">
  					<h4>Elaboración:</h4>
  					<p class="elaboracion">Primero partimos el conejo en trozos pequeños y ponemos a freírlos en una sartén con abundante aceite, a fuego lento. Le a&ntilde;adimos el vino y esperamos a que se dore.</p>
  				</div>
  			</article>
  			<article>
  				<h3>Cordero al horno</h3>
  				<div class="descripcion">
  					<p>Explicación de la receta 2 ...</p>
  				</div>
  			</article>
  		</section>
  		<section >
  			<h2>Recetas de pescado</h2>
  			<article>
  				<h3>Dorada a la sal</h3>
  				<p>Explicaci&oacute;n de la receta 3</p>
  			</article>
  		</section>
  		<footer>
  			<p>autor: aulaClic. Todos los derechos reservados. </p>
  			<p> Junio-2015.</p>
  		</footer>
  	</div>
  	<aside>
  		<p>En esta columna</p>
  		<p>va la Publicidad.</p>
  	</aside>
</body>
</html>

Pulsa en el menú Archivo y elige Guardar como sitúate en la carpeta ejercicios/cocina y da el nombre receta_cocina3.html al archivo. Visualiza la página web desde el editor Brackets con el botón .
Además de usar div para crear más niveles, también se pueden usar contenedores div para dar formato o posicionar elementos.
En nuestro caso, hemos utilizado div id="columna_izquierda" que contiene section, article y footer, para colocar el contenido en una colunma a la izquierda y la publicidad en una columna a la derecha, dentro de la etiqueta aside. No te preocupes si no entiendes como hemos creado las columnas, lo veremos en la siguiente unidad. También hemos dado un poco de formato al resto de la página.
Esta es la hoja de estilo.
Haz clic en Archivo, elige Nuevo y copia el siguiente código

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:#309;
  position: absolute;
  top:0; left: 0;
  height:20%;
  width:80%;
  background-color:white; }
footer {
  font-style:italic;
  font-size:0.8em;
  margin-left:25px;   }
section {
  margin-left:25px;
  font-style:italic;
  color: #900;  }
article {
  margin-left:25px;
  font-style:normal;
  color:green;
  font-family: Arial, Helvetica, sans-serif;  }
aside {
  background-color:#ddd;
  position: absolute;
  top:0; right: 0;
  bottom: 0;
  padding-left:15px;
  width: 15%;  }
nav ul  {
  margin:0;padding:0; 
  background-color: #900;  }
nav ul li {
  display:inline; margin:15px;   }
nav li a { color: #fff;
  text-decoration: none;  }
p {
  color:black;  }
.descripcion {
  margin-left:20px;  }
.ingredientes {
  font-style:italic;
  color:#300;
  margin-left:20px;  }
.elaboracion {
  font-family:"Times New Roman", Times, serif;
  color:#300;
  margin-left:20px;  }
p.elaboracion {
  margin-left:25px;  }
div#columna_izquierda {
  position: absolute;
  top:20%; left: 0;
  height: 100%;
  width:85%;
}

Pulsa en el menú Archivo y elige Guardar como, sitúate en la carpeta ejercicios/cocina/css y da el nombre receta3.css al archivo.
Ahora en el archivo receta_cocina3.html, que todavía tendrás abierto, añade el enlace a la hoja de estilo: <link href="css/receta3.css" rel="stylesheet" >
Pulsa en el menú Archivo y elige Guardar. Se guardará con el nombre que ya tenía, receta_cocina3.html. Visualiza la página web desde el editor Brackets con el botón .
También puedes ver el resultado desde este enlace : receta_cocina3
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