Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 2 vistas

    Estructura Página HTML5

    Cargado por

    hligardo2
    estructura de una pagina web

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd

    Estructura Página HTML5

    Cargado por

    hligardo2
    2 vistas15 páginas
    estructura de una pagina web

    Título original

    Estructura_página_HTML5

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    estructura de una pagina web

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Descargar como pdf o txt
    2 vistas15 páginas

    Estructura Página HTML5

    Cargado por

    hligardo2
    estructura de una pagina web

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Descargar como pdf o txt
    de 15

    Bootcamp

    Desarrollo Web Full Stack - Básico

    Estructura de una página con HTML 5


    Nivel Básico
    Roymer Romero Algarín
    17/09/2024
    HTML
    Lenguaje de marcado de hipertexto: Es
    un lenguaje que permite crear la estructura
    de las páginas web. Permite la
    comunicación entre las páginas a través de
    hipervínculos.

    Utiliza etiquetas que tienen una función y


    significado, para definir el contenido de la
    página.

    La versión actual básica es la versión 5.


    Página index.html

    index.html es la página
    principal que el servidor
    buscará para abrir un
    sitio o proyecto.

    En caso de que tenga


    otro nombre se debe
    decir al servidor cuál es
    el punto de partida.
    Partes de la página web
    Etiqueta head y body
    Doctype

    Contenedor padre: etiqueta html. El atributo lang


    indica el lenguaje de la página.

    head: Información o contenido no visible para el


    usuario, que el navegador requiere para cargar el
    proyecto o página (librerías, estilos, etc).

    body: Información que el usuario puede ver (texto,


    imágenes, videos, animaciones, etc.)
    Etiquetas meta del head
    charset: reconocimiento de
    caracteres especiales.

    name=“description”,
    content=“resumen de lo que
    trata la página”.

    name=“robots”, content=“index,
    follow” para que autorice a los
    robots a que la página sea
    posicionada cuando se busque
    contenido en ella.
    Etiquetas meta del head
    title, para el título en la pestaña del
    navegador.

    name=“viewport” toma el ancho de


    la pantalla, content=“width=device-
    width, initial-scale=1.0”, de esta
    forma se podrá ver bien en
    dispositivos móviles y no tendrá que
    hacerse zoom para ver el texto
    inicialmente.

    link rel=“stylesheet” href=“ruta del


    doc”, para importar hojas de estilo
    Etiquetas en el body
    Etiquetas contenedoras: contienen
    otras etiquetas. Al renderizarse no
    se muestran en el navegador.

    El html semántico consiste en el


    buen uso de las etiquetas según su
    función.
    Estructura de un documento HTML
    Existen etiquetas que deben usarse o ubicarse
    en partes específicas.

    Container: contenedor principal que contiene


    todas las demás etiquetas.

    Header: barra principal y menú.

    Contenido principal o main (sección) y un


    sidebar (barra lateral)

    Pie (footer)
    Estructura de un documento HTML
    Estructura de un documento HTML
    Estructura de un documento HTML
    Reto 1
    Crear una página web que incluya:

    • Crear una página index y 2 páginas secundarias. Coloque en cada una de ellas un texto y una
    imagen disponible en la web.
    • Crear en la página index dos enlaces. Cada enlace debe dirigirlo a la página secundaria
    respectiva.
    • Asigne un hipervínculo a las imágenes de las páginas secundarias. Al dar clic en esas
    imágenes deben abrir una nueva pestaña/Ventana y mostrar la páginas donde se encuentra
    publicada la imagen en internet.
    • Finalmente, crear en cada página secundaria, un enlace que dirija a la página index o principal.
    Reto 2
    Crear una página web que incluya:

    • Las etiquetas meta vistas.


    • Crear una lista de tipos de alimentos y para cada tipo de alimento, crear una sublista con
    nombres de alimentos. Al dar clic sobre el nombre de cada alimento, se debe abrir en una
    nueva pestaña, una página que muestre una receta con dicho alimento.
    • Bonus: ingrese a la página https://unicode-table.com y utilice los emoticones con las frutas y/o
    recetas.

    También podría gustarte