Control 1 programacion web 2
Enviado por Ne Palomo • 19 de Septiembre de 2022 • Exámen • 332 Palabras (2 Páginas) • 75 Visitas
[pic 1]
[pic 2]
[pic 3]
[pic 4]
[pic 5]
[pic 6]
[pic 7]
DESARROLLO
DESARROLLO DEL CONTROL.
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)
R: En este caso primero debemos generar ordenadamente una carpeta titulada “Pw2” (programación web 2), donde se agregarán los archivos de bootsrap.min.css, los archivos de hoja de estilo border.css, estilos.css y el archivo index.html el cual contiene el siguiente código principal:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap.min.css"> <link rel="stylesheet" href="borde.css">
<link rel="stylesheet" href="estilos.css"> <title>Control 1 Programación web II</title>
</head>
<body>
<picture>
<source media="(min-width: 800px)" srcset="img/pc.jpg">
<source media="(min-width: 480px)" srcset="img/tablet.jpg">
<img src="img/movil.jpg" alt="Ejemplo">
</picture>
<div> <p align="center">Inserte debajo de la imagen un borde responsive color azul, con anchura o grosor de 2px.</p> </div>
<h1>Titulo tamaño 1 en color</h1>
<p>Pellentesque euismod lorem neque, at dapibus est mattis sit amet. Vestibulum at tristique est, et posuere purus.<pv> Maecenas ac pharetra neque </pv>. Quisque nec turpis in ex lobortis gravida in ut nunc</p>
<h2>Título tamaño 2 en color</h2>
<p>Aenean facilisis ex ultrices molestie porttitor. Ut gravida iaculis eleifend. Sed justo ex,<s><pr> porttitor vel ligula,</pr><paz><em> vitae maximus</em></paz><pr> pharetra urna.</pr></s>Vestibulum at <paz>tristique est</paz>, et posuere purus. </p>
</body>
</html>
Imagen de atom con el respectivo código:
[pic 8]
En el siguiente caso tenemos 3 imágenes, así podremos notar la diferencia de tamaños utilizando responsive.
2. Inserte debajo de la imagen un borde responsive color azul, con anchura o
grosor de 2px. (2 puntos)
Codigo Border.css utilizado:
Div | border-color: blue: border-width: 2px; border-style: double; )
Imagen código insertado en atom:
[pic 9]
3. A partir del código HTML, aplique estilos CSS donde el texto que contiene la
...