42. Elementos y técnicas de diseño en HTML

Los sitios web a menudo muestran contenido en varias columnas (como una revista o un periódico).

Ejm

Elementos de diseño HTML

HTML tiene varios elementos semánticos que definen las diferentes partes de una página web:

  • <header>: define la cabecera para un documento o sección
  • <nav>: define un set de enlaces de navegación
  • <section>: define una sección en un documento
  • <article>: define un contenido independiente y autónomo
  • <aside>: define contenido aparte del contenido (como una barra lateral)
  • <footer>: define un pie para un documento o sección
  • <details>: define detalles adicionales que el usuario puede abrir y cerrar a pedido
  • <summary>: Define un encabezado para el elemento <details>

Ejm

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}

body {
font-family: Arial, Helvetica, sans-serif;
}

/* Style the header */
header {
background-color: #666;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}

/* Create two columns/boxes that floats next to each other */
nav {
float: left;
width: 30%;
height: 300px; /* only for demonstration, should be removed */
background: #ccc;
padding: 20px;
}

/* Style the list inside the menu */
nav ul {
list-style-type: none;
padding: 0;
}

article {
float: left;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
height: 300px; /* only for demonstration, should be removed */
}

/* Clear floats after the columns */
section::after {
content: "";
display: table;
clear: both;
}

/* Style the footer */
footer {
background-color: #777;
padding: 10px;
text-align: center;
color: white;
}

/* Responsive layout - makes the two columns/boxes stack
 on top of each other instead of next to each other, on small screens */
@media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}
</style>
</head>
<body>

<h2>CSS Layout Float</h2>
<p>In this example, we have created a header, two columns/boxes and a footer.
 On smaller screens, the columns will stack on top of each other.</p>
<p>Resize the browser window to see the responsive effect 
(you will learn more about this in our next chapter - HTML Responsive.)</p>

<header>
<h2>Cities</h2>
</header>

<section>
<nav>
<ul>
<li><a href="#">London</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Tokyo</a></li>
</ul>
</nav>

<article>
<h1>London</h1>
<p>London is the capital city of England. It is the most populous
 city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia,
 its history going back to its founding by the Romans, who named it Londinium.</p>
</article>
</section>

<footer>
<p>Footer</p>
</footer>

</body>
</html>

Técnicas de diseño HTML

Hay cuatro técnicas diferentes para crear diseños de varias columnas. Cada técnica tiene sus pros y sus contras:

  • Frameworks CSS
  • CSS Float Layout
  • CSS Flexbox Layout
  • CSS Grid Layout

Frameworks CSS

Si deseas crear su diseño rápidamente, puedes usar un marco CSS, como W3.CSS o Bootstrap.

CSS Float Layout

Es común hacer diseños web completos usando la propiedad flotante de CSS. Float es fácil de aprender: solo necesitas recordar cómo funcionan las propiedades float y clear. Desventajas: los elementos flotantes están vinculados al flujo de documentos, lo que puede dañar la flexibilidad.

CSS Flexbox Layout

El uso de flexbox garantiza que los elementos se comporten de manera predecible cuando el diseño de la página deba adaptarse a diferentes tamaños de pantalla y diferentes dispositivos de visualización.

CSS Grid Layout

El módulo grid CSS ofrece un sistema de diseño basado en cuadrículas, con filas y columnas, lo que facilita el diseño de páginas web sin tener que usar floats y posiciones.

Scroll al inicio