Introducción a HTML

-

 





Actividad: Entrega a los alumnos una noticia de un periódico impreso o una página de una revista que tenga varios elementos: un título grande, subtítulos, párrafos, una imagen y una lista (por ejemplo, "los puntos clave").

  • La Tarea: Pídeles que usen marcadores de colores para encerrar en cajas cada elemento y les pongan un nombre.

    • ¿Qué es el título principal? (H1)

    • ¿Qué son los textos largos? (Párrafos)

    • ¿Qué es el texto debajo de la foto? (Pie de página/figcaption)

  • -Definir que es HTML

    •          - características 

              - elementos 


    Crear  una página simple sobre su personaje favorito siguiendo estos pasos obligatorios:

    1. Título principal : Nombre del personaje.    (<h1>)

    2. Subtítulo: Sus poderes o bando.            (<h2>)

    3. Párrafo: Una breve biografía.                 (<p>)

    4. Lista  3 debilidades o aliados.     (<ul> y <li>)

    5. Imagen: Insertar una foto usando una URL de internet.      (<img>)

    6. Enlace Un link a Wikipedia para saber más.                            (<a>)



    ACTIVIDAD DEL 19 /05                                                                                                                      Cada grupo  debe armar un glosario digital (puede ser en un documento compartido, una presentación o en sus cuadernos si es físico) con una lista de 12 términos esenciales. Para cada término deben incluir:

    1. La etiqueta exacta (sintaxis).

    2. Significado/Traducción: ¿Qué significa la palabra en inglés y qué le dice al navegador?

    3. Función: ¿Para qué sirve en la estructura básica?

    4. Metáfora visual: Relacionar la etiqueta con una parte del cuerpo humano o de una casa para entender su jerarquía.

  • Lista de palabras a investigar:

    1. <html>

    2. <head>

    3. <title>

    4. <body>

    5. <h1> (y la familia hasta <h6>)

    6. <p>

    7. `` (Comentarios)

    8. <!DOCTYPE html>

    9. <meta charset="UTF-8">

    10. <a> (Atributo href)

    11. <img> (Atributo src)

    12. <strong> / <em>



    • MI PRIMERA PAGINA WEB 


    Los elementos más importantes y comunes se organizan de la siguiente manera:
    📄 Estructura Básica
    • <!DOCTYPE html>: Define el estándar del documento actual (HTML5).
    • <html>: La etiqueta raíz que envuelve todo el sitio.
    • <head>: Contiene los metadatos, título de la pestaña y enlaces a estilos.
    • <body>: Alberga el contenido visual y funcional visible para el usuario. [1, 2, 3, 4, 5]
    ✍️ Texto y Tipografía
    • <h1> a <h6>: Encabezados o títulos, siendo <h1> el de mayor importancia.
    • <p>: Define un párrafo de texto.
    • <strong> y <em>: Para texto en negrita (importante) y cursiva (énfasis).
    • <br>: Fuerza un salto de línea. [1, 2, 3]
    🔗 Multimedia y Enlaces
    • <a>: Define un hipervínculo para enlazar páginas o recursos.
    • <img>: Inserta una imagen en el documento. [1, 2]
    🧱 Contenedores y Estructura Semántica
    • <div>: Contenedor genérico en bloque para agrupar elementos.
    • <header>, <nav>, <main>, <footer>: Etiquetas de HTML semántico para definir los bloques clave de una página (cabecera, menú, contenido principal y pie de página). [1]


    Comentarios

    Publicar un comentario

    Entradas populares de este blog

    ¿Qué es visual fox pro?2018

    -
    ¿Qué es visual fox pro? Visual FoxPro  es un  lenguaje de programación por procedimientos ,  orientado a objetos  que posee un Sistema Gestor de Bases de datos o  Data base Management System (DBMS)  y  Sistema administrador de bases de datos relacionales , producido por  Microsoft . Visual Fox Pro dispone de las herramientas necesarias para crear y administrar aplicaciones y componentes de base de datos de alto rendimiento. Con sus eficaces herramientas y el lenguaje orientado a objetos centrado en los datos, podrá crear aplicaciones modernas, escalables y de varios niveles que integren los sistemas cliente-servidor e Internet. FoxPro  es un  sistema de gestión de bases de  datos  que fue diseñado por una  compañía pequeña llamada Fox software , para que después gracias a su éxito fuera absorbido por Microsof t. Básicamente es un lenguaje de  programación  o  programa de almacenamiento , el cual es capaz d...
    Leer más

    La voz

    -
    SECUNDARIA  https://forms.office.com/pages/responsepage.aspx?id=TuNZ1IESlEqgsDFgaWqB7SM93KLrbIRCgfn0xm9kGqZUQlFOQzM5WUU1OUU2VVRGNU5CR0hGSlpTSy4u&route=shorturl PRIMARIA  https://forms.office.com/pages/responsepage.aspx?id=TuNZ1IESlEqgsDFgaWqB7SM93KLrbIRCgfn0xm9kGqZUNFA1N1JITlQ0NTNTVzFCRllCMjBYTjkyMS4u&route=shorturl NIVEL INICIAL  https://forms.office.com/pages/responsepage.aspx?id=TuNZ1IESlEqgsDFgaWqB7SM93KLrbIRCgfn0xm9kGqZUNlBLUElBUDdOVFZDWVFXOUdSUERUSDlUNi4u&route=shorturl
    Leer más