El documento proporciona el código HTML de una página web sin estilos y pide añadir las reglas CSS necesarias para darle el aspecto mostrado en una imagen. También pide definir reglas CSS para posicionar botones de navegación y establecer estilos para enlaces en diferentes estados.
0 calificaciones0% encontró este documento útil (0 votos)
257 vistas4 páginas
El documento proporciona el código HTML de una página web sin estilos y pide añadir las reglas CSS necesarias para darle el aspecto mostrado en una imagen. También pide definir reglas CSS para posicionar botones de navegación y establecer estilos para enlaces en diferentes estados.
El documento proporciona el código HTML de una página web sin estilos y pide añadir las reglas CSS necesarias para darle el aspecto mostrado en una imagen. También pide definir reglas CSS para posicionar botones de navegación y establecer estilos para enlaces en diferentes estados.
El documento proporciona el código HTML de una página web sin estilos y pide añadir las reglas CSS necesarias para darle el aspecto mostrado en una imagen. También pide definir reglas CSS para posicionar botones de navegación y establecer estilos para enlaces en diferentes estados.
Descargue como ODT, PDF, TXT o lea en línea desde Scribd
Descargar como odt, pdf o txt
Está en la página 1/ 4
Examen HTML y CSS
1. A partir del cdigo HTML proporcionado, aadir las reglas CSS necesarias para que la pgina resultante tenga el mismo aspecto que el de la siguiente imagen: Aspecto final de la pgina
A continuacin se muestra el cdigo HTML de la pgina sin estilos:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ejercicio de selectores</title> </head> <body> <h1 id="titulo">Lorem ipsum dolor sit amet</h1> <p>Nulla pretium. Sed tempus nunc vitae neque. <strong>Suspendisse gravida</strong>, metus a scelerisque sollicitudin, lacus velit ultricies nisl, nonummy tempus neque diam quis felis. <span class="destacado">Etiam sagittis tortor</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 metus, <em>aliquam non</em>, tristique in</a>, pretium varius, sapien. Proin vitae nisi. Suspendisse <span class="especial">porttitor purus ac elit</span>. Suspendisse eleifend odio at dui. In in elit sed metus pretium elementum.</p> <table summary="Descripcin de la tabla y su contenido"> <caption>Ttulo de la tabla</caption> <thead> <tr> <th scope="col"></th> <th scope="col" class="especial">Ttulo columna 1</th> <th scope="col" class="especial">Ttulo columna 2</th> </tr> </thead> <tfoot> <tr> <th scope="col"></th> <th scope="col">Ttulo columna 1</th> <th scope="col">Ttulo columna 2</th> </tr> </tfoot> <tbody> <tr> <th scope="row" class="especial">Ttulo fila 1</th> <td>Donec purus ipsum</td> <td>Curabitur <em>blandit</em></td> </tr> <tr> <th scope="row">Ttulo fila 2</th> <td>Donec <strong>purus ipsum</strong></td> <td>Curabitur blandit</td> </tr> </tbody> </table> <div id="adicional"> <p>Donec purus ipsum, posuere id, venenatis at, <span>placerat ac, lorem</span>. Curabitur blandit, eros sed gravida aliquet, risus justo porta lorem, ut mollis lectus tortor in orci. Pellentesque nec augue.</p> <p>Fusce nec felis eu diam pretium adipiscing. <span id="especial">Nunc elit elit, vehicula vulputate</span>, venenatis in, posuere id, lorem. Etiam sagittis, tellus in ultrices accumsan, diam nisi feugiat ante, eu congue magna mi non nisl.</p> <p>Vivamus ultrices aliquet augue. <a href="#">Donec arcu pede, pretium vitae</a>, rutrum aliquet, tincidunt blandit, pede. Aliquam in nisi. Suspendisse volutpat. Nulla facilisi. Ut ullamcorper nisi quis mi.</p> </div> </body> </html>
Los nombres de los colores tambin estn estandarizados y se corresponden con el nombre en ingls de cada color. En este ejercicio, se deben utilizar los colores: teal, red, blue, orange, purple, olive, fuchsia y green.
Determinar las reglas CSS necesarias para que el resultado sea similar al mostrado en la siguiente imagen:
3. Definir las reglas CSS que permiten mostrar los enlaces con los siguientes estilos: * En su estado normal, los enlaces se muestran de color rojo #CC0000. * Cuando el usuario pasa su ratn sobre el enlace, se muestra con un color de fondo rojo #CC0000 y la letra de color blanco #FFF. * Los enlaces visitados se muestran en color gris claro #CCC.
