Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Patricio Fritz Control1

    Cargado por

    patricio fritz
    90 vistas6 páginas
    El documento describe cómo crear diseños web adaptables y responsivos. Explica cómo utilizar la etiqueta <picture> para insertar imágenes responsivas que se adapten al tamaño de la pantalla, añadir un borde azul responsive alrededor de la imagen, y aplicar estilos CSS para dar formato al texto con sangrías, colores y fuentes diferentes.

    Descripción original:

    Título original

    Patricio_Fritz_Control1

    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
    El documento describe cómo crear diseños web adaptables y responsivos. Explica cómo utilizar la etiqueta <picture> para insertar imágenes responsivas que se adapten al tamaño de la pantalla, añadir un borde azul responsive alrededor de la imagen, y aplicar estilos CSS para dar formato al texto con sangrías, colores y fuentes diferentes.

    Copyright:

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

    Patricio Fritz Control1

    Cargado por

    patricio fritz
    El documento describe cómo crear diseños web adaptables y responsivos. Explica cómo utilizar la etiqueta <picture> para insertar imágenes responsivas que se adapten al tamaño de la pantalla, añadir un borde azul responsive alrededor de la imagen, y aplicar estilos CSS para dar formato al texto con sangrías, colores y fuentes diferentes.

    Copyright:

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

    DISEÑO ADAPTABLE RESPONSIVE

    Patricio Fritz

    Programación Web II

    Instituto IACC

    11/07/2021
    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
    Codigo Fuente

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Tarea IACC</title>
    <link href="css/bootstrap-4.3.1.css" rel="stylesheet" type="text/css" media="screen">
    </head>

    <body>
    <div>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <div>
    <picture>
    <source type="image/webp" srcset="C:\Users\patri\OneDrive\Escritorio\IACC\imagen.png"
    sizes="(max-width:1280px) 93vw, (max-width: 720px) 59vw, 600px" />
    <img width="1280" height="720"
    src="C:\Users\patri\OneDrive\Escritorio\IACC"
    srcset="C:\Users\patri\OneDrive\Escritorio\IACC"
    sizes="(max-width:768px) 93vw, (max-width: 975px) 59vw, 600px"

    </picture>
    </div>
    </div>
    </body>
    </html>
    2. Inserte debajo de la imagen un borde responsive color azul, con anchura o grosor de 2px.

    CSS
    }
    .apartado1{
    border: 2px solid blue;
    }

    Html
    div id="apartado1"></div>
    3. A partir del código HTML, aplique estilos CSS donde el texto que contiene la página tenga el siguiente

    aspecto:

    Pantalla

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Tarea IACC</title>
    <link href="css/bootstrap-4.3.1.css" rel="stylesheet" type="text/css" media="screen">
    <link href="Tarea_Iacc.html.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <div>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <div>
    <picture>
    <source type="image/webp" srcset="C:\Users\patri\OneDrive\Escritorio\IACC\imagen.png"
    sizes="(max-width:1280px) 93vw, (max-width: 720px) 59vw, 600px" />
    <img width="1280" height="720"
    src="C:\Users\patri\OneDrive\Escritorio\IACC"
    srcset="C:\Users\patri\OneDrive\Escritorio\IACC"
    sizes="(max-width:768px) 93vw, (max-width: 975px) 59vw, 600px"
    </picture>
    <div id="apartado1"></div>

    <head>
    <title>Tarea IACC</title>
    <meta charset="UTF-8">
    <style type="text/css">
    .indentacion { text-indent: 30px;}
    </style>

    </div>

    <p><font COLOR="green"><strong>Lorem ipsum dolor sit amet</strong></FONT></p>


    <p>Nulla pretium. Sed tempus nune vitae neque.<font COLOR="red">Suspendisse gravida</FONT>,
    mettus a scelerisque sollicitudin, lacus velit ultricies nisl, nonummy tempus neque diam quis felis.<font
    COLOR="yellow"> Etiam sagittis tortor</FONT> sed arcu sagittis
    tristique.</p>
    <p><font COLOR="blue"><strong>Aliquam tincidunt, sem eget volutpat porta</strong></FONT></p>
    <p>Vivamus velit dui, placerat vel, feugiat in, ornare et, urna. <u><font COLOR="red">Aenean turpis
    metus</FONT>, <font COLOR="blue">aliquam non</FONT>, <font COLOR="red">tristique
    in</FONT></u>, pretium varius. sapien. Proin vitae nisi. <font COLOR="magenta">Supendisse porttitor
    purus ac elit.</FONT> Suspendisse eleifend odio
    at dui. In in elit sed metus pretium elementum.</p>
    </div>
    </div>
    </body>
    </html>

    También podría gustarte