lunes, 4 de noviembre de 2024

Etiqueta id en html

 Estructura básica

  • Crea una página HTML básica. Incluye las etiquetas necesarias (<html>, <head>, <body>).

  • Secciones identificadas
    Dentro del <body>, crea tres secciones principales:

    • header con id="header"
    • main con id="content"
    • footer con id="footer
     Encabezado y Contenido
  • En el header, incluye un título <h1> con el texto "Bienvenidos al Trabajo Práctico".
    En main, crea una lista <ul> con id="topics" con tres temas a eleccion.

  • Pie de página
    En el footer, agrega un <p> con un texto.

     

    Ejercicio 2: Estilizado con CSS y id

    1. Estilos básicos
      En el <head>, incluye una etiqueta <style> y aplica estilos a cada sección usando su id:

      • header: Fondo de color claro y texto centrado.
      • content: Color de fondo suave y un borde alrededor.
      • footer: Texto en cursiva y fondo de color más oscuro.
    2. Estilo de lista
      Usa el id="topics" para dar un estilo específico a los elementos de la lista (ej., color de texto, márgenes o viñetas personalizadas).

       

      Ejercicio 3: Referencia y Navegación con id

    3. Crear una barra de navegación
      Añade al header una barra de navegación con tres enlaces (<a>) para navegar entre secciones dentro de la misma página:

      • Enlace al header (usa href="#header")
      • Enlace al content (href="#content")
      • Enlace al footer (href="#footer")
    4. Efecto de desplazamiento
      Opcional: Usa CSS para añadir un efecto visual (por ejemplo, color o subrayado) cuando los enlaces de la barra de navegación se desplazan hacia sus respectivas secciones.


     

  • No hay comentarios:

    Publicar un comentario