Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • U2 03 Ejercicios 01

    Cargado por

    Juan Lorenzo Cabrera Vigil
    5 vistas5 páginas
    Este documento proporciona instrucciones para crear una página web con HTML y CSS. Las instrucciones guían al lector a través de 21 pasos para estructurar el HTML, enlazar una hoja de estilos externa, aplicar clases CSS, y modificar selectores para lograr un diseño de página específico. El objetivo es aplicar elementos semánticos de HTML y selectores de CSS para crear la estructura y presentación de una página sobre programación web.

    Descripción original:

    Título original

    U2_03_Ejercicios_01

    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?

    Denunciar este documento
    Este documento proporciona instrucciones para crear una página web con HTML y CSS. Las instrucciones guían al lector a través de 21 pasos para estructurar el HTML, enlazar una hoja de estilos externa, aplicar clases CSS, y modificar selectores para lograr un diseño de página específico. El objetivo es aplicar elementos semánticos de HTML y selectores de CSS para crear la estructura y presentación de una página sobre programación web.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    5 vistas5 páginas

    U2 03 Ejercicios 01

    Cargado por

    Juan Lorenzo Cabrera Vigil
    Este documento proporciona instrucciones para crear una página web con HTML y CSS. Las instrucciones guían al lector a través de 21 pasos para estructurar el HTML, enlazar una hoja de estilos externa, aplicar clases CSS, y modificar selectores para lograr un diseño de página específico. El objetivo es aplicar elementos semánticos de HTML y selectores de CSS para crear la estructura y presentación de una página sobre programación web.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 5

    TECNOLÓGICO NACIONAL DE MEXICO

    INSTITUTO TECNOLÓGICO DE CIUDAD MADERO

    Programación Web

    Ejercicios
    Ejercicio 2.1

    Archivos requeridos: fuente-01.html, estilo-eje01.css, dragon.jpg, towers.jpg

    Actividad previa: Coloca el archivo estilo-eje01.css en la carpeta comun/css y los archivos


    dragon.jpg y towers.jpg en la carpeta img.

    1. Utiliza un editor para codificación de HTML y crea un documento HTML que lleve por nombre ejercicio-
    21.html. Recuerda que este archivo debe tener la estructura de un documento HTML (head y body).
    2. Guarda el archivo ejercicio-21.html en la carpeta ejercicio-21 y asegúrate de tener la siguiente
    estructura:

    3. Mantén abierto el archivo ejercicio-21.html En la sección del encabezado indica el título para que el
    navegador web lo muestre. También indica el conjunto de caracteres que debe interpretar el navegador.

    4. De igual forma, en la sección del encabezado incluye la información para los navegadores y
    buscadores:

    5. En la misma sección del encabezado establece el vínculo externo a la hoja de estilos que empleará el
    documento HTML:

    <programación web>
    TECNOLÓGICO NACIONAL DE MEXICO
    INSTITUTO TECNOLÓGICO DE CIUDAD MADERO

    6. En la sección <body> del archivo ejercicio-21.html aplica el diseño mostrado en la imagen siguiente.
    No olvides incluir el cierre de cada elemento semántico del diseño solicitado.

    7. En el editor de HTML abre el archivo fuente-01.html, extrae la información y pégala en el área


    respectiva del documento HTML ejercicio-21.html.

    8. Como política de accesibilidad, aplica los atributos de role a los elementos semánticos. La sintaxis es
    <elementosemántico role=”valor”>.

    Algunos valores del atributo role:


    ▪ main: define el contenido principal de un documento.
    ▪ secondary: define una parte secundaria del documento.
    ▪ navigation: define la barra de navegación del documento.
    ▪ banner: aparece por lo general en lo alto de la página.
    ▪ contentinfo: aporta información sobre el contenido de la página (autores, copyrights, menciones
    legales...).
    ▪ definition: presenta la definición de un elemento.
    ▪ note: corresponde a una nota entre paréntesis o al final de la página.
    ▪ seealso: indica que el elemento contiene información relacionada con el contenido principal de la
    página.
    ▪ search: contiene el formulario de búsqueda de una página web.

    <programación web>
    TECNOLÓGICO NACIONAL DE MEXICO
    INSTITUTO TECNOLÓGICO DE CIUDAD MADERO

    9. Abre el archivo estilo-eje01.css, agrega modificaciones a los selectores como se muestra en la


    imagen y prueba sus efectos.

    10. Ahora modifica los selectores de título y prueba sus efectos en el documento HTML.

    11. Crea el modificador contenedora.

    12. Asocia el selector contenedora al elemento div y prueba sus efectos.

    Elemento Selector Aplicación


    <div> class=”contenedora” <div class=”contenedora”>

    <programación web>
    TECNOLÓGICO NACIONAL DE MEXICO
    INSTITUTO TECNOLÓGICO DE CIUDAD MADERO

    13. Agrega un nuevo selector menu li para modificar exclusivamente al selector li que está dentro de
    menu. No sobrescribir el selector menu que ya está en la hoja de estilos.

    14. Asocia el selector menu al elemento semántico nav y verifica sus efectos.

    Elemento Selector Aplicación


    <nav> class=”menu” <nav class=”menu”>

    15. Crea el modificador principal con las propiedades que se indican en la imagen.

    16. Asocia el selector principal al elemento semántico main y verifica sus efectos.

    Elemento Selector Aplicación


    <main> class=”principal” <main class=”principal”>

    17. Modifica el selector article con las propiedades que se indican en la imagen y verifica sus efectos.

    <programación web>
    TECNOLÓGICO NACIONAL DE MEXICO
    INSTITUTO TECNOLÓGICO DE CIUDAD MADERO

    18. Crea el modificador unlado con las propiedades que se indican en la imagen.

    19. Asocia el selector unlado al elemento semántico aside y verifica sus efectos.

    Elemento Selector Aplicación


    <aside> class=”unlado” <aside class=”unlado”>

    20. Crea el modificador pie con las propiedades que se indican en la imagen.

    21. Asocia el selector pie al elemento semántico footer y verifica sus efectos.

    Elemento Selector Aplicación


    <footer> class=”pie” <footer class=”pie”>

    <programación web>

    También podría gustarte