Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Alexis DelRio Control1

    Cargado por

    Alexis del Río Palma
    32 vistas6 páginas
    Programacion web II Semana 1

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    DOCX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    Programacion web II Semana 1

    Copyright:

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

    Alexis DelRio Control1

    Cargado por

    Alexis del Río Palma
    Programacion web II Semana 1

    Copyright:

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

    PROGRAMACIÓN WEB II

    SEMANA 1

    Alexis Andrés del Río Palma


    08/08/2022
    Técnico Nivel Superior en Análisis y Programación Computacional
    DESARROLLO
    1. Utilizando la etiqueta PICTURE, asigne una imagen responsive que se adapte al tamaño de la pantalla
    del dispositivo donde se vaya a visualizar. Genere el código correspondiente, utilice viewport (4 puntos)
    2. Inserte debajo de la imagen un borde responsive color azul, con anchura o grosor de 2px. (2 puntos)
    3. A partir del código HTML, aplique estilos CSS donde el texto que contiene la página tenga el siguiente
    aspecto: (3 puntos)
    Codigo utilizado:

    Index.html:

    <!DOCTYPE html>
    <html lang="en" dir="ltr">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Semana 1</title>
    <link rel="stylesheet" href="C:\Users\Katto RockFire\Documents\Iacc\Programacion Web 2\Semana 1\
    general.css">
    <body>
    <div>
    <picture>
    <source media = "(min-width: 1600px)" srcset="pic1.jpg">
    <source media = "(min-width: 1200px)" srcset="pic1.jpg">
    <source media = "(min-width: 800px)" srcset="pic1.jpg">
    <source media = "(min-width: 400px)" srcset="pic1.jpg">
    <img src="C:\Users\Katto RockFire\Documents\Iacc\Programacion Web 2\Semana 1\pic1.jpg">
    </picture>
    </div>
    <div class="responsiveDiv"> </div>
    <h1 id="Titulo">Lorem ipsum dolor sit amet</h1>
    <p>Nulla pretium. Sed tempus nune vitae neque. <strong>Suspendisse gravida</strong>, metus a se
    elerisque sollicitudin, lacus velit ultricies nisl, nonummy tempus neque diam quis felis.
    <span class="destacado">etiam sagittis totor</span> sed arcu sagittis tristique.</p>
    <h2 id="subtitulo">Alquam tincidunt, sem eget volutpat porta</h2>
    <p> Vivamus velit dui, placerat vel, feugiat in ornare et, urna. <a href="#">Aenean turpis metaus,
    <em>aliquam non</em>, tristique in</a>, pretieum varius, sapien. Proin vitae nisi. Suspendisse <span
    class="especial">porttitor porus ac elit</span> Suspendisse eleifend odio at dui. In in elit sed metus
    pretium elementum.</p>
    </body>
    </html>

    General.css:

    h1#Titulo {color: teal;}


    strong {color: red;}
    span.destacado {color: orange;}
    h2#subtitulo {color: blue;}
    span.especial {color: purple;}
    a {color: red;}
    a em {color: blue;}
    div#adicional p {color: olive;}
    div#adicional span#especial {color: fuchsia;}
    div#adicional a {color: green;}
    caption {color: blue;}
    td {color: green;}
    td strong {color: orange;}
    th {color: red;}
    th.especial {color: orange;}
    .responsiveDiv {float: center; width:80%; height:80px; background: blue; margin:2px;}
    </style>

    REFERENCIAS BIBLIOGRÁFICAS
    IACC (2019). Diseño adaptable (responsive). Parte II. Programación Web I. Semana 8.

    IACC (2019). Diseño HTML adaptable (Responsive), Bootstrap. Programación Web II. Semana 1.

    También podría gustarte