Programación Web II
Enviado por Luis Norambuena • 1 de Septiembre de 2021 • Trabajos • 271 Palabras (2 Páginas) • 915 Visitas
DISEÑO ADAPTABLE RESPONSIVE
Luis Norambuena
Programación Web II
Instituto IACC
14-06-2021
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)
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)
[pic 1]
<!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>control semana 1</title>
<link rel="stylesheet" href="estilo.css">
<body>
<h1 id="titulo">Lorem ipsum dolor sit amet</h1>
<p>Nulla pretium. Sed tempus nunc vitae neque. <strong>Suspendisse gravida</strong>,
metus a sc
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">Aliquam 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>, pretium 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>
[pic 2]
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; }
</style>
...