5. XHTML5 y CSS3

Contenidos

1. El modelo de estándar web.
2. Una página web en blanco en XHTML5.
3. Anatomía de un elemento XHTML.
4. Estructura en árbol de un documento XHTML.
5. Atributos globales y atributos obligatorios (por ejemplo en img).
6. Localizador de recursos uniforme (URL).
7. URL absolutas y relativas.
8. Diferencias entre HTML y XHTML (errata: DOCTYPE no es obligatorio en XHTML).
9. Validación en XHTML 5.2 y WCAG 2.0 AAA con Total Validator.
10. Elementos HTML:
    • Cabeceras: h1, h2, h3, h4, h5 y h6.
    • Párrafos: p.
    • Formato: b, strong, i, em, mark, small, del, ins, sub y sub.
    • Enlaces: a.
    • Imágenes: img.
    • Listas: ul, ol y li.
    • Tablas: table, tr, th, td, thead, tbody, tfoot y caption.

CSS: 1, 2.

RECURSOS:

• Especificaciones: HTML, CSS.
• Referencias: HTML, CSS.
• Validadores: Total Validator (XHTML 5.2), The W3C CSS Validation Service (CSS3).
• Manuales en español: HTML/CSS.
• Plantillas: blank XHTML 5.2 page.

Actividades

1. Crea una página web con título y cabecera Mi primera página web y con el texto ¡He creado mi primera página web!

2. Crea una página web que muestre una imagen de un buscador y que cuando hagas clic en ella te lleve a dicho buscador.

3. Descarga la siguiente imagen, crea dos páginas web en blanco de nombre index.html y about.html, crea una carpeta denominada ejercicio_2 y dentro de ella crea la siguiente estructura de carpetas y archivos. A continuación, modifica index.html añadiendo (con el elemento a) dos enlaces, uno relativo y otro absoluto, a about.html y añadiendo (con el elemento img) dos veces la imagen, una de manera relativa y otra absoluta, del gato. Para terminar, realiza el mismo proceso en about.html con la diferencia de enlazar a index.html.

4. Crea una página web que muestre imágenes y enlaces usando tanto URL absolutos como relativos (para los relativos crea una carpeta y mete en ella una imagen y un documento HTML).

5. Crea una página web que contenga el siguiente párrafo.

6. Crea dos listas, cada una precedida de un párrafo, tal como aparece en la siguiente imagen.

7. Crea una página web tal como aparece en la siguiente imagen.

8. Crea una lista anidada (nested list) de hasta dos niveles tal como aparece en la siguiente imagen.

9. Crea una lista anidada (nested list) de hasta tres niveles tal como aparece en la siguiente imagen.

10. Crea una tabla tal como aparece en la siguiente imagen.

11. Crea una tabla compleja (complex table) tal como aparece en la siguiente imagen.

12. Crea una tabla anidada (nested table) tal como aparece en la siguiente imagen.

13. Crea una tabla con el horario de tu curso.

Volver.

Curso creado por Manuel Ignacio López Quintero bajo esta licencia.