Trabajo semana 1 programacion web II
Enviado por poleke20177 • 13 de Noviembre de 2022 • Informes • 2.958 Palabras (12 Páginas) • 187 Visitas
[pic 1]
[pic 2]
[pic 3]
[pic 4]
[pic 5]
[pic 6]
[pic 7]
DESARROLLO
- 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]
- 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>
...