desafio html | HTML y CSS: ambientes de desarrollo, estructura de archivos y tags | Alura Latam

¡Vamos a ir paso a paso con cada uno de los desafíos que te han planteado! Aquí tienes ejemplos y explicaciones para cada uno de ellos.

1. Construyendo la estructura básica de HTML

En este primer desafío, debes crear un documento HTML con las etiquetas esenciales. Aquí está el ejemplo de la estructura básica:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Proyecto Web</title>
  </head>
  <body>
    <!-- El contenido va aquí -->
  </body>
</html>

<!DOCTYPE html>: Declara que el documento es HTML5.
<html lang="es">: Define el idioma del documento como español.
<head>: Contiene metadatos, como la codificación de caracteres y el título de la página.
<body>: Aquí irá el contenido visual de la página.

2. Añadiendo contenido a HTML

Ahora que tienes la estructura básica, es hora de agregar contenido. A continuación, un ejemplo con un encabezado y un párrafo:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Proyecto Web</title>
  </head>
  <body>
    <h1>Bienvenidos a mi sitio web</h1>
    <p>Este es un sitio donde comparto mis proyectos y aprendizajes sobre desarrollo web.</p>
  </body>
</html>

<h1>: Se usa para el título principal (más importante).
<p>: Se utiliza para el párrafo de texto.

3. Trabajando con metaetiquetas y título

Aquí tienes cómo optimizar el <head> con la metaetiqueta para la codificación y un título más descriptivo:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Sitio web personal para compartir proyectos de desarrollo web.">
    <title>Mi Sitio Web Personal</title>
  </head>
  <body>
    <h1>Bienvenidos a mi sitio web</h1>
    <p>Este es un sitio donde comparto mis proyectos y aprendizajes sobre desarrollo web.</p>
  </body>
</html>

<meta charset="UTF-8">: Asegura que se utilicen caracteres Unicode.
<meta name="description" content="...">: Proporciona una descripción del contenido de la página para motores de búsqueda.

4. Organizando contenido con etiquetas HTML

Aquí creamos un título principal, un subtítulo y un párrafo:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Proyecto Personal</title>
  </head>
  <body>
    <h1>Proyecto de Desarrollo Web</h1>
    <h2>Un sitio para compartir mis ideas</h2>
    <p>En este sitio encontrarás tutoriales y proyectos sobre desarrollo web, donde aprenderás sobre las mejores prácticas y herramientas.</p>
  </body>
</html>

<h1>: Título principal.
<h2>: Subtítulo que complementa al título principal.
<p>: Párrafo que explica el contenido.

5. Añadiendo imágenes con accesibilidad

Para agregar una imagen con un atributo alt para mejorar la accesibilidad, puedes hacerlo de esta manera:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Proyecto Web</title>
  </head>
  <body>
    <h1>Bienvenidos a mi sitio web</h1>
    <img src="logo.png" alt="Logo del sitio web, representa el tema de desarrollo web">
    <p>Este es un sitio donde comparto mis proyectos y aprendizajes sobre desarrollo web.</p>
  </body>
</html>

<img src="logo.png" alt="...">: La etiqueta <img> se utiliza para insertar una imagen, y el atributo alt describe la imagen para personas con discapacidades visuales o cuando la imagen no carga.

6. Listando elementos en HTML

Aquí te muestro cómo crear una lista no ordenada y una lista ordenada:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Proyecto Web</title>
  </head>
  <body>
    <h1>Características del Proyecto</h1>

    <ul>
      <li>Interfaz amigable</li>
      <li>Desarrollado en HTML, CSS y JavaScript</li>
      <li>Compatible con dispositivos móviles</li>
    </ul>

    <h2>Etapas del Desarrollo</h2>

    <ol>
      <li>Planificación</li>
      <li>Diseño</li>
      <li>Desarrollo</li>
      <li>Pruebas</li>
      <li>Lanzamiento</li>
    </ol>
  </body>
</html>

<ul>: Lista no ordenada (con viñetas).
<ol>: Lista ordenada (con números).
<li>: Elemento de la lista.