Para comenzar a familiarizaros con la estructura de un documento HTML, y las diferentes partes del código que la componen, vais a comenzar un proceso de diseño web: vuestro portfolio personal. Realizaréis un diseño común que cada uno personalizará finalmente con sus propios trabajos en materia de esta asignatura. Cuando lo finalicemos, ¡podrás ponerlo a disposición de todos en Internet creando una nueva entrada en tu blog de la materia!

Basándoos en la estructura básica que se proporciona en el código de la derecha, seguid atentamente los pasos indicados en la zona izquierda:

Estructura base HTML

<!DOCTYPE HTML>
<html lang="es">
<head>
  <title>Título de la página…</title>
  <meta charset="UTF-8">
  <meta name="description" content="Descripción de la página…">
</head>
<body>
  <body>
  <div class=”barra-lateral”>
    <h3>Título…</h3>
    <p>Texto</p>
  </div>
  <div class=”contenido”>
    <h1>Otro título…</h1>
    <p>Otro texto</p>
    <p>Más texto… </p>
  </div>
</body>
</body>
</html>

Usad la plantilla como sigue:

Personalizad el título en la etiqueta <title>.
Personalizad la meta-descripción en la etiqueta <meta name=”description” contenido=”… “>.
Dentro de la zona delimitada por las etiquetas <body> diseñad gráficamente el contenido de la página según como queráis montar el portfolio: qué secciones crearéis, si habrá imágenes, listas, distribución de párrafos según la información que contienen, ... Utilizad para la delimitación de zonas en este diseño gráfico el uso que se muestra en la plantilla de la etiqueta <div>.