quedaría de la siguiente manera.
Es habitual una caja contenedor para impedir que ocupe toda la página cuando la ventana de la navegador es muy grande o controlar la disposición de los elementos cuando es muy pequeña. + CSS 9 Estructura HTML Una página de este tipo realizada con los nuevos bloques semánticos del HTML5 quedaría. + CSS
10 Estructura HTML La estructura HTML, debe realizarse en el sentido lógico de lectura del documento, cuando la página se vea sin aplicar los estilos no pierda su significado.
11 Herencia CSS Para entender como funcionan los selectores y la herencia CSS es necesario entender qué es el árbol del documento.
12 Herencia CSS el árbol del documento del ejemplo anterior: html head html head body title div .caja header nav article footer h1 ul li li li a a a
13 Herencia CSS Ancestor es un elemento conectado pero más arriba en la estructura del documento html head body title div .caja Ancestor header nav article footer h1 ul descendientes li li li a a a
14 Herencia CSS Descendientes son los elementos conectados pero más abajo en la estructura del documento. html head body title div .caja Ancestor header nav article footer h1 ul descendientes li li li a a a
15 Herencia CSS Parent es el elemento conectado y directamente sobre un elemento en la estructura del documento. html head body title div .caja header nav article footer h1 ul Parent descendientes li li li a a a
16 Herencia CSS Child es el elemento conectado y directamente debajo de un elemento en la estructura del documento. html head body title div .caja Child header nav article footer h1 ul li li li a a a
17 Herencia CSS Siblings son los elementos que comparten un mismo padre en la estructura del documento. html head body title div .caja header nav article footer h1 ul Parent Siblings li li li
18 Herencia CSS Si definimos un estilo en el body, todos los elementos situados debajo en el árbol del documento, heredan esa propiedad.
19 HTML Fin del tema
20 Ejercicio Realiza un esquema sencillo de este documento HTML a su estructura tipo árbol, que resuma brevemente las relaciones directas entre elementos de la página, clarificando la jerarquía del árbol. Ejercicio opcional árbol Titular de nivel 1 Contenido de la página
21 Ejercicio 1.- Cuál de las siguientes etiquetas NO es de bloque block:a) b) c) d)
2.- Cuál de las siguientes etiquetas NO es de bloque block: a) b)
c) 3.- Cuál de las siguientes etiquetas NO es en línea inline: a) b) c) d) 5.- Cuál de las siguiente etiqueta de estructura no es semántica HTML5 a) Analizar el árbol del siguiente documento HTML a) Body b) el propio ul c) los li d) html 7.- body es "ancestor" de title: a) SI b) NO Elemento de lista 1 Elemento de lista 2 Elemento de lista 3 Esto es un párrafo
8.- la etiqueta p seria el hijo "child" de: a) Body b) ul c) el último li d) de todos los anteriores 9.- la etiquetas serian hermanos "siblings": a) los tres li b) los tres li y el p c) ul d) las respuestas a y b son correctas 10.- Cuál de las siguientes afirmaciones es incorrecta a) ul es hijo "child" de body b) p es hijo "child" de body c) p es hijo "child" de ul d) li es hijo "child" de ul
22 Ejercicio - Soluciones1.- Cuál de las siguientes etiquetas NO es de bloque block: a) b) c) d) C
2.- Cuál de las siguientes etiquetas NO es de bloque block: a) b)
c) 3.- Cuál de las siguientes etiquetas NO es en línea inline: a) b) c) d) C 5.- Cuál de las siguiente etiqueta de estructura no es semántica HTML5 a) Analizar el árbol del siguiente documento HTML a) Body b) el propio ul c) los li d) html C 7.- body es "ancestor" de title: a) SI b) NO B Elemento de lista 1 Elemento de lista 2 Elemento de lista 3 Esto es un párrafo
8.- la etiqueta p seria el hijo "child" de: a) Body b) ul c) el último li d) de todos los anteriores A 9.- la etiquetas serian hermanos "siblings": a) los tres li b) los tres li y el p c) ul d) las respuestas a y b son correctas A 10.- Cuál de las siguientes afirmaciones es incorrecta a) ul es hijo "child" de body b) p es hijo "child" de body c) p es hijo "child" de ul d) li es hijo "child" de ul C