Dominando la Etiqueta HTML Div y el Estilado CSS

Introducción

En este laboratorio, aprenderá a usar la etiqueta HTML <div> para dividir una página web en diferentes secciones o partes. También aprenderá a aplicar CSS a los elementos que se agrupan usando la etiqueta <div>.

Nota: Puede practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Creando la Estructura de la Página Web

Abra el archivo index.html en su editor de texto.

Primero, cree la estructura básica del archivo HTML agregando la declaración del doctype, las etiquetas <html>, <head> y <body>.

<!doctype html>
<html>
  <head>
    <title>Mi página web</title>
  </head>
  <body></body>
</html>

Agregando el Encabezado

En este paso, agregaremos la sección de encabezado a la página web usando la etiqueta <div>.

Dentro de la etiqueta <body>, agregue una etiqueta <div> con el nombre de clase "header".

<div class="header"></div>

Agregue algún contenido dentro de la etiqueta <div> para representar la sección de encabezado. Por ejemplo:

<div class="header">
  <h1>Bienvenido a mi sitio web</h1>
</div>

Agregando las Secciones de Barra Lateral y Contenido Principal

A continuación, agregaremos las secciones de barra lateral y contenido principal a la página web usando la etiqueta <div>.

Dentro de la etiqueta <body>, agregue otra etiqueta <div> con el nombre de clase "container".

<div class="container"></div>

Dentro de la etiqueta <div> "container", agregue otras dos etiquetas <div>: una para la barra lateral y otra para el contenido principal. Asigneles los nombres de clase "sidebar" y "main-content", respectivamente.

<div class="container">
  <div class="sidebar">
    <!-- agregue el contenido de la barra lateral -->
  </div>
  <div class="main-content">
    <!-- agregue el contenido principal aquí -->
  </div>
</div>

Agregue contenido dentro de las etiquetas <div> para representar las secciones de barra lateral y contenido principal. Por ejemplo:

<div class="container">
  <div class="sidebar">
    <h2>Sobre mí</h2>
    <p>Hola, me llamo John y soy un desarrollador web.</p>
  </div>
  <div class="main-content">
    <h2>Mi último proyecto</h2>
    <p>Echa un vistazo a mi último proyecto web!</p>
  </div>
</div>

Agregando el Pie de Página

Finalmente, agregaremos la sección de pie de página a la página web usando la etiqueta <div>.

Dentro de la etiqueta <body>, agregue otra etiqueta <div> con el nombre de clase "footer".

<div class="footer"></div>

Agregue algún contenido dentro de la etiqueta <div> para representar la sección de pie de página. Por ejemplo:

<div class="footer">
  <p>&copy; 2021 Mi sitio web. Todos los derechos reservados.</p>
</div>

Dar estilo a la página web

Ahora que hemos creado la estructura básica de la página web usando la etiqueta <div>, podemos aplicar estilos CSS para que la página se vea mejor.

Abra el archivo style.css en su editor de texto, o cree un nuevo archivo llamado style.css y enlácelo al archivo index.html usando una etiqueta <link> dentro de la sección <head>.

<!doctype html>
<html>
  <head>
    <title>Mi página web</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body></body>
</html>

En el archivo style.css, agregue los siguientes estilos a los diferentes nombres de clase que usamos anteriormente:

/* Estilos del encabezado */
.header {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px;
}

/* Estilos del contenedor */
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

/* Estilos de la barra lateral */
.sidebar {
  width: 30%;
  padding: 10px;
  background-color: #f2f2f2;
}

/* Estilos del contenido principal */
.main-content {
  width: 65%;
  padding: 10px;
  background-color: #fff;
}

/* Estilos del pie de página */
.footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px;
}

Visualizando la página web

Ahora que hemos creado la estructura de la página web y aplicado estilos CSS usando la etiqueta <div>, veamos una vista previa de la página web en un navegador web.

Guarde los archivos index.html y style.css.
Abra el archivo index.html en un navegador web para ver la página web.

Debería ver una página web con un encabezado, barra lateral, contenido principal y sección de pie de página, todo bien estilado con CSS.

Resumen

En este laboratorio, has aprendido cómo usar la etiqueta HTML <div> para dividir una página web en diferentes secciones o partes. También has aprendido cómo aplicar estilos CSS a las diferentes secciones usando los nombres de clase asignados a ellas. Con estas técnicas, puedes crear páginas web más complejas y visualmente atractivas.

Etiqueta HTML Div y Estilado CSS