Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 10 vistas

    Practica 25

    Cargado por

    Nicole Hincapie
    Este documento presenta tres ejercicios para practicar HTML y CSS. El primer ejercicio implica crear un menú desplegable dentro de una barra de navegación siguiendo un ejemplo. El segundo ejercicio implica crear un slider o carrusel usando HTML y CSS. El tercer ejercicio implica estructurar una página web siguiendo uno de tres patrones y agregar iconos e imágenes. También incluye seis preguntas sobre JavaScript y Bootstrap para investigar cómo se integran estos lenguajes de programación en el desarrollo frontend.

    Copyright:

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

    Practica 25

    Cargado por

    Nicole Hincapie
    10 vistas4 páginas
    Este documento presenta tres ejercicios para practicar HTML y CSS. El primer ejercicio implica crear un menú desplegable dentro de una barra de navegación siguiendo un ejemplo. El segundo ejercicio implica crear un slider o carrusel usando HTML y CSS. El tercer ejercicio implica estructurar una página web siguiendo uno de tres patrones y agregar iconos e imágenes. También incluye seis preguntas sobre JavaScript y Bootstrap para investigar cómo se integran estos lenguajes de programación en el desarrollo frontend.

    Título original

    PRACTICA-25

    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?

    Este documento presenta tres ejercicios para practicar HTML y CSS. El primer ejercicio implica crear un menú desplegable dentro de una barra de navegación siguiendo un ejemplo. El segundo ejercicio implica crear un slider o carrusel usando HTML y CSS. El tercer ejercicio implica estructurar una página web siguiendo uno de tres patrones y agregar iconos e imágenes. También incluye seis preguntas sobre JavaScript y Bootstrap para investigar cómo se integran estos lenguajes de programación en el desarrollo frontend.

    Copyright:

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

    Practica 25

    Cargado por

    Nicole Hincapie
    Este documento presenta tres ejercicios para practicar HTML y CSS. El primer ejercicio implica crear un menú desplegable dentro de una barra de navegación siguiendo un ejemplo. El segundo ejercicio implica crear un slider o carrusel usando HTML y CSS. El tercer ejercicio implica estructurar una página web siguiendo uno de tres patrones y agregar iconos e imágenes. También incluye seis preguntas sobre JavaScript y Bootstrap para investigar cómo se integran estos lenguajes de programación en el desarrollo frontend.

    Copyright:

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

    HTML Y CSS

    Actividad del día 25-08-2023.


    Con el fin de mejorar las habilidades que se encuentran adquiriendo se planeo la
    siguiente practica sobre HTML Y CSS adicionando una pequeña consulta sobre los temas
    emergentes para completar el modulo de Herramientas de programación 1.

    NOTA: si tiene alguna dificultad realice lo que este bajo sus recursos, descargué
    elementos para realizar sus practicas como lo son:(imágenes, iconos, etc...), defina
    estructura, identifique y complete con la investigación.

    EJERCICIO 1.

    Siguiendo el ejemplo realizar un menú desplegable dentro de una barra de navegación.

    Ejemplo menú desplegable:

    <label for="dog-names">Menú:</label>

    <select name="dog-names" id="dog-names">

    <option value="rigatoni">Opcion 1</option>

    <option value="dave">Opcion 2</option>

    <option value="pumpernickel">Opcion 3</option>

    <option value="reeses">Reeses</option>

    </select>

    EJERCICIO 2.

    Crear un slider o carrusel bajo el siguiente ejemplo:

    HTML

    <div class="slider-container">

    <img class="slider-item" src="https://images.unsplash.com/photo-1580501170961-bb0dbf63a6df?


    ixlib=rb1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=297
    0&q=80" />
    <img class="slider-item" src="https://images.unsplash.com/photo-1580501170888-80668882ca0c?
    ixlib=rb-
    1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=8
    0" />

    <img class="slider-item" src="https://images.unsplash.com/photo-1572508589584-


    94d778209dd9?ixlib=rb-
    1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=8
    0" />

    </div>

    CSS

    .slider-container

    { display: flex;

    width: 100%;

    height: 100vh;

    overflow-x: scroll;

    /* Vamos a añadir esto 👇 */


    scroll-snap-type: x mandatory;

    ;}

    .slider-container img

    { flex: 0 0 100%;

    width: 100%;

    object-fit: cover;

    /* Vamos a añadir esto 👇 */


    scroll-snap-align: center;

    ;}

    EJERCICIO 3.

    Siguiendo uno de los siguientes 3 patrones de estructura para pagina web realice lo
    siguiente:

    1. Identifique las etiquetas que compone la estructura HTML.


    2. Inicie estructura-miento HTML y lleve los complementos de iconos e imágenes.
    Actividad investigativa.

    Al tener manejo básico de HTML y CSS podemos iniciar a integra tanto lenguaje que se
    adapte a la estructura frontend como lo es JavaScript para animaciones y Frameworks
    como lo es Bootstrap siguiendo esto tendrán una pequeña investigación para
    contextualizar y recordar un poco de la practica de Bootstrap.

    1. ¿Qué Java Script y por qué es tan famosos este lenguaje?


    2. ¿En que cosiste el la utilización del lenguaje JavaScript integrado al HTML Y
    CSS(Frontend)?
    3. ¿En que parte de un documentó HTML se posiciona la unión con un documento .js?
    4. ¿Qué es Bootstrap y cuantas versiones tiene?
    5. ¿Qué es el CDN de un Frameworks?
    6. ¿En que cosiste el la utilización el Frameworks Bootstrap?

    También podría gustarte