Este documento presenta 5 ejercicios de HTML y CSS. El primer ejercicio pide crear una lista y formato de texto básico. El segundo, crear una tabla HTML. El tercero, agregar enlaces y rutas relativas entre páginas. El cuarto, agregar selectores CSS faltantes. Y el quinto, diseñar un layout con 5 bloques div y establecer sus altos, anchos y alineación.
0 calificaciones0% encontró este documento útil (0 votos)
191 vistas5 páginas
Este documento presenta 5 ejercicios de HTML y CSS. El primer ejercicio pide crear una lista y formato de texto básico. El segundo, crear una tabla HTML. El tercero, agregar enlaces y rutas relativas entre páginas. El cuarto, agregar selectores CSS faltantes. Y el quinto, diseñar un layout con 5 bloques div y establecer sus altos, anchos y alineación.
Este documento presenta 5 ejercicios de HTML y CSS. El primer ejercicio pide crear una lista y formato de texto básico. El segundo, crear una tabla HTML. El tercero, agregar enlaces y rutas relativas entre páginas. El cuarto, agregar selectores CSS faltantes. Y el quinto, diseñar un layout con 5 bloques div y establecer sus altos, anchos y alineación.
Este documento presenta 5 ejercicios de HTML y CSS. El primer ejercicio pide crear una lista y formato de texto básico. El segundo, crear una tabla HTML. El tercero, agregar enlaces y rutas relativas entre páginas. El cuarto, agregar selectores CSS faltantes. Y el quinto, diseñar un layout con 5 bloques div y establecer sus altos, anchos y alineación.
Descargue como PDF, TXT o lea en línea desde Scribd
Descargar como pdf o txt
Está en la página 1/ 5
EJERCICIO 1.
LISTAS Y FORMATO BÁSICO DEL TEXTO
Utilizando HTML crea una lista como la que se muestra en la imagen. Añade todas las etiquetas que necesites (títulos, negrita, cursiva, subrayado…) para que la apariencia sea la misma.
EJERCICIO 2. TABLAS
Crea una tabla HTML como la que se muestra a continuación. Añade texto dentro de cada una de las celdas y pon un borde a la tabla para que te sirva de guía (<table border=”1”>). EJERCICIO 3. ENLACES Y RUTAS
Teniendo en cuenta la estructura de directorios del sitio web que se muestra en la
imagen, escribe el código completo HTML necesario para:
a. Hacer un enlace desde “contenidos.html” a “horas.html”
con el texto “Ir a horas”.
b. Hacer un enlace desde “index.html” a “horas.html” con el
texto “Ir a horas”.
c. Hacer un enlace desde “horas.html” a “catalogo.html” con
el texto “Ir a catálogo”.
d. Insertar la imagen “notas.jpg” en “catalogo.html”
e. Insertar la imagen “notas.jpg” en “contenidos.html”
f. Hacer un enlace desde “index.html” a “catalogo.html” de forma que la imagen
“notas.jpg” permita enlazar a la página seleccionada.
IMPORTANTE: Los enlaces deben de tener dos rutas, una relativa a la ubicación actual y otra relativa a la raíz. Ejemplo resuelto:
- Enlace desde “catalogo.html” a “index.html”
o Ruta relativa a la ubicación actual: <a href=”../index.html”>Ir a index</a> o Ruta relativa a la raíz: <a href=”/index.html”>Ir a index</a>
ACLARACIÓN: No es necesario crear la estructura de carpetas y archivos para hacer
el ejercicio pero si lo hacéis y queréis probar las rutas desde la raíz (/) debéis abrir la carpeta que contiene la web completa como proyecto en vuestro editor. Por ejemplo en Brackets: Archivo->Abrir carpeta. EJERCICIO 4. SELECTORES CSS
A partir del código HTML y CSS que se muestra, añadir los selectores CSS que faltan para aplicar los estilos deseados. Cada regla CSS incluye un comentario en el que se explica los elementos a los que debe aplicarse:
<html > <head> <title>Ejercicio de selectores</title>
<style type="text/css">
/*Ejemplo resuelto: Todos las etiquetas de la pagina */
*{ font: 1/1.3em Arial, Helvetica, sans-serif; } /* Todos los párrafos de la pagina */ { color: #555; } /* Todos los enlaces de la pagina */ { color: #CC3300; } /* Elementos "h1" y “h2” de la página */ { font-size: 40px; } /* Todo lo contenido dentro de la etiqueta con ID=primero */ { color: #336699; } /* Todas etiquetas de la clase “especial” */ { background: #FFFFCC; padding: .1em; } /* Las etiquetas "em" que pertenecen a la clase “especial” */ { background: #BBBBBB; padding: .1em; } /*Elemento que tiene el id “primero” y que pertenece a la clase “especial”*/ { background: orange; padding: .1em; } /* Aplicar borde a la tabla */ { border-style: dotted; } /* Todos los elementos strong que son hijos directos de un párrafo */ { color: red; } /* Todos los elementos strong que son hijos directos de "body" */ { color: yellow; } /* Todos los elementos strong que son descendientes de (contenidos en) "body" */ { color: blue; } /* Primer párrafo a continuación de un h2 */ { background: #FFFFCC; padding: .1em; }
</style> </head> <body> <h1> Header 1 </h1> <div id="primero"> <p>Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing elit</a>. Praesent blandit nibh at felis. Sed nec diam in dolor vestibulum aliquet. Duis ullamcorper, nisi non facilisis molestie, <em>lorem sem aliquam nulla</em>, id lacinia velit mi vestibulum enim.</p> </div> <strong>Phasellus eu velit sed lorem sodales egestas.</strong> <h2> Header 2 </h2> <div class="normal"> <p>Phasellus eu velit sed lorem sodales egestas. Ut feugiat. <span><a href="#">Donec porttitor</a>, magna eu varius luctus,</span> metus massa tristique massa, in imperdiet est velit vel magna. Phasellus erat. Duis risus. <a href="#">Maecenas dictum</a>, nibh vitae pellentesque auctor, tellus velit consectetuer tellus, tempor pretium felis tellus at metus.</p> <p>Cum sociis natoque <em class="especial">penatibus et magnis</em> dis parturient montes, nascetur ridiculus mus. Proin aliquam convallis ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc aliquet. Sed eu metus. Duis justo.</p> <p><span class="especial">Donec facilisis blandit velit. </span>Vestibulum nisi. Proin volutpat, <em class="especial" id="primero">enim id iaculis congue</em>, orci justo ultrices tortor, <a href="#">quis lacinia eros libero in eros</a>. Sed malesuada dui vel quam. Integer at eros.</p> </div> <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="Descripción de la tabla y su contenido"> <caption>Título de la tabla</caption> <thead> <tr> <th scope="col"></th> <th scope="col" class="especial">Título columna 1</th> <th scope="col" class="especial">Título columna 2</th> </tr> </thead> <tfoot> <tr> <th scope="col"></th> <th scope="col">Título columna 1</th> <th scope="col">Título columna 2</th> </tr> </tfoot> <tbody> <tr> <th scope="row" class="especial">Título fila 1</th> <td>Donec purus ipsum</td> <td>Curabitur <em>blandit</em></td> </tr> <tr> <th scope="row">Título fila 2</th> <td>Donec <strong>purus ipsum</strong></td> <td>Curabitur blandit</td> </tr> </tbody> </table> <div id="adicional"> <p class="parrafo1">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 class="adicional">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> EJERCICIO 5. DISEÑO DE LAYOUTS
Realiza el diseño del siguiente layout:
Pasos a realizar: 1. Crea un documento HTML con 5 bloques div. Identifícalos correctamente y añade texto dentro de cada uno de ellos. En lugar de los bloques div también puedes usar las etiquetas específicas de HTML5 para diseño de layouts. 2. Pon un borde a todos los bloques. Añade también la propiedad box- sizing:border-box para evitar problemas con los bordes. 3. Establece un alto en pixels a cada uno de los bloques anteriores a. Cabecera: 150px b. Menu: 200px c. Contenidos y lateral: 400px d. Pie:100px 4. Establece un ancho a cada uno de los bloques anteriores a. Cabecera: 100% b. Menu: 20% c. Contenidos: 55% d. Lateral: 25% e. Pie:100% 5. Alinea las tres capas centrales. Menu, contenidos y lateral deben estar alineados a la izquierda con la propiedad float. 6. La capa de Pie debe situarse debajo de las tres anteriores. Propiedad clear.
