Essays.club - Ensayos gratis, notas de cursos, notas de libros, tareas, monografías y trabajos de investigación
Buscar

Trabajo semana 1 programacion web II

Enviado por   •  13 de Noviembre de 2022  •  Informes  •  2.958 Palabras (12 Páginas)  •  37 Visitas

Página 1 de 12

[pic 1]

[pic 2]

[pic 3]

[pic 4]

[pic 5]

[pic 6]

[pic 7]

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).
  • Programa HTML:

<!DOCTYPE html>

<html>

<head>

        

        <title>PREGUNTA 1</title>

        <meta charset="utf-8">

        <!--SE IMPLEMENTA VIEWPORT-->

        <meta name="viewport" content="width=device-width, initial-scale=1">

        

        <!--ESTILOS CSS-->

        <link rel="stylesheet" type="text/css" href="pregunta1.css">

</head>

<body>

        <header>

                <h1>Trabajo semana 1</h1>

        </header>

        <nav>

                <a href="#">Principal</a> |

                <a href="#">Fotos</a> |

                <a href="#">Videos</a> |

                <a href="#">Contacto</a>

        </nav>

        <main>

                <section>

                        <picture>

                                <source media= "(max-width: 480px)"  srcset= "5.jpg">

                                <source media= "(max-width: 780px)"  srcset= "6.jpg">

                                <source media= "(max-width: 1024px)" srcset= "4.jpg">        

                                <img src="4.jpg">        

                        </picture>        

                        

                </section>

                

        </main>

        <footer>

                <address>Santiago, Chile.</address>

                <small>© Instituto IACC.<br>

                Alumno: Jean Paul Porflit.<br>

                Derechos Reservados 2022.</small>

        </footer>        

        

</body>

</html>

  • Programa CSS:

img {

        max-width: 100%; /*--se le adapta imagen al ancho de la pagina en porcentaje --*/

}

header{

        background-color: lightsalmon;

}

h1 {

        text-align: center;

        font-family: monospace;

        font-size: 3em;

        padding: 10px;

        margin-bottom: 0.4px;

}

 nav {

         text-align: center;

         background-color: lightblue;

         font-family: monospace;

         padding: 15px;

         margin-bottom: 1px;

 }

 main {

         margin-bottom: -4px;

 }

 footer{

        background-color: #B5B2B2;

}

  • Imágenes pregunta 1:
  • imagen n°1: Imagen responsive aplicada en una resolución de 1024px.

[pic 8]

  • imagen n°2: Imagen responsive aplicada en una resolución de 780px.

[pic 9]

  • imagen n°3: Imagen responsive aplicada en una resolución de 480px.

[pic 10]

  • imagen n°4: Imagen responsive aplicada en una resolución de 300px.

[pic 11]

        

  1. Inserte debajo de la imagen un borde responsive color azul, con anchura o grosor de 2px. (2 puntos)
  • Programa HTML:

<!DOCTYPE html>

<html>

<head>

        <title>PREGUNTA 2</title>

        <meta charset="utf-8">

        <!--SE IMPLEMENTA VIEWPORT-->

        <meta name="viewport" content="width=device-width, initial-scale=1">

        

        <!--ESTILOS CSS-->

        <link rel="stylesheet" type="text/css" href="pregunta2.css">

</head>

<body>

...

Descargar como  txt (10.5 Kb)   pdf (2 Mb)   docx (2.1 Mb)  
Leer 11 páginas más »
Disponible sólo en Essays.club