Programación Web
Enviado por Yanny Valencia • 7 de Diciembre de 2021 • Apuntes • 788 Palabras (4 Páginas) • 140 Visitas
Diseño adaptable responsive
Yanny Valencia
Programación Web II
Instituto IACC
07 agosto de 2021
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)
- Inserte debajo de la imagen un borde responsive color azul, con anchura o
grosor de 2px. (2 puntos)
- 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]
Respuesta pregunta 1.
Según lo revisado esta semana, podemos incluir en nuestro código imágenes aplicando diferentes tamaños según el dispositivo que acceda al website, esto es posible con la etiqueta “Picture”.
Dentro de esta etiqueta podemos contener varios tag de tipo “source” al cual debemos agregar el atributo de tipo “media”. (˂source media=” (min-width: “determinamos el ancho min. en px.”)” srcset=” determinamos la ruta de la imagen” ˃). Esto contenido dentro de la etiqueta <picture> …</picture>.
Con la etiqueta picture el navegador seleccionara la imagen para cada caso, de lo contrario mostrara la imagen contenida en el tag <img>.
Adicional se añadió la propiedad viewport que nos permite tener el control de tamaños mediante el elemento <meta> que proporciona al navegador instrucciones para controlar las dimensiones y la escala de la página.
Imagen agregada con etiqueta PICTURE.
[pic 2]
Imagen elaboración propia – etiqueta picture
Uso de la etiqueta viewport.
[pic 3]
Imagen elaboración propia – etiqueta viewport
Respuesta pregunta 2.
Para este caso donde se requiere añadir un borde que sea de color azul y con un grosor de 2px. Con el fin de lograr esto añadí a mi código un <div> al cual le di la class= “bordes”, con el fin de llamarlo mediante el CSS y poder asignar los valores.
HTML con el div que cuenta con la class= “bordes”.
[pic 4]
Imagen elaboración propia – div con class asignada para dar borde.
CSS donde llamamos a la clase comentada - .bordes
[pic 5]
Imagen elaboración propia – llamando la clase “bordes” desde la hoja CSS.
Respuesta pregunta 3.
Finalmente se aplicaron las etiquetas correspondientes para conseguir la totalidad de la página se pueda adaptar a los dispositivos que ingresen al website. (responsive).
En un comienzo mi código el texto no quedaba con un formato correcto, viéndose de la siguiente manera. (adjunto evidencia).
[pic 6]
Imagen elaboración propia – texto desordenado.
Revise mi código y corregí los errores que causaban que el texto no quedara lineado y con los colores en orden a las palabras que debían resaltarse. Aplique elementos como <span>, <strong>, <em> entre otros con el fin de poder conseguir un texto armonizado y con párrafos, títulos y subtítulos definidos.
Dejo adjunto el print del resultado para el website y los códigos implementados.
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" type="text/css" href="general_.css"> <title>tarea semana 1</title> <style type="text/css"></style> </head> <body> <div> <center><picture> <source media= "(min-whidth: 1024px)" srcset="logo/montaña.png"> <source media= "(min-whidth: 640px)" srcset="logo/montaña.png"> <source media= "(min-whidth: 480px)" srcset="logo/montaña.png"> <img src="logo/montaña.png" alt="montaña y niebla"> </picture></center></div> <div class="bordes"> <h2 class="text1">Lorem ipsum dolor sit amet</h2> <p>Nulla pretium. Set tempus nunc vitae neque. <strong class="text2">Suspendisse gravida</strong>,metus a scelerisque sollicitudin, lactus velit ultricies nisl, nonummy tempus neque diam quis felis,<span class="text3">Etiam sagitis tortor</span>sed arcu sagittis tristique.</p> <h2 class="text4">Aliquam tincidunt, sem eget volutpat porta</h2> <p>Vivamus velit dui, placerat vel, feugiat in, ornare et, urna <u class="text5">Aenean turpis metus,</u><em class="text6">aliquam non,</em> <u class="text7">tristique in,</u>pretium varius, sapien. Proin vitae nisi. suspendisse <span class="text8">porttitor purus ac elit.</span>Suspendisse eleifend odio at dui. In in elit sed metus pretium elementrum.</p> </div> </body> </html> |
...