Introducción a HTML

1. Estructura HTML5
Aplicaciones de Diseño Web

2. Estructura HTML
Los elementos html pueden visualizarse como:
● Block: Los elementos bloques ocupan todo el ancho de la
página y fuerzan a una nueva línea antes y después. Por
Ejemplo:
<article> <aside> <canvas> <div> <footer> <h1>...<h6><header>
<p><pre><section> <ul>...
● Inline: Los elementos en línea sólo ocupan el ancho
necesario y no fuerzan nuevas líneas. Por Ejemplo:
<em> <a><img> <span> <button> <input> <select>
<textarea>...

3. Estructura HTML - Elemento <DIV>
● Se emplea para contener en su interior otros
elementos HTML
● No tiene ningún significado,es semánticamente
neutro.
● Empleando CSS, se puede utilizar para estructurar el
documento en grandes bloques de contenido.
● El div es la propuesta para sustituir a los elementos
<table> para el diseño.
*El propósito del elemento <table> es mostrar datos tabulados.

4. Estructura HTML - Elemento <span>
● El elemento HTML <span> es un elemento en línea
que se emplea como un contenedor de texto.
● No tiene ningún significado especial,
es semánticamente neutro.
● Junto con CSS,se puede utilizar para establecer los
atributos de estilo para las partes del texto
mediante un identificador ID o una clase Clase

5. CSS: ID y CLASS
Los elementos <div>y<span> se emplean para definir normas
de estilo más específicas.

6. Atributo ID
● Identifica unívocamente un elemento HTML en una
página.
● Un elemento HTML solo debe tener un atributo ID y
este debe ser único en la página.
● El selector CSS es nombre - Refiere al elemento que
lleva el atributo id=”nombre”
Por Ej:
<div id=”caja” class=”cabecera”> ... </div>
caja {color:blue} se refiere al elemento con atributo id=”caja”.

7. Atributo CLASS
● Define una clase de elementos HTML.
● Un elemento puede tener varios atributos CLASS.
● El selector CSS es .nombre - Se refiere a todos los
elementos que lleven el atributo class=”nombre”
Por Ej:
<div id=”caja” class=”cabecera”> ... </div>
<p class=”cabecera”> ... </p>
.cabecera{color:red} afectará a todos los elementos que
tengan de atributo class=
”cabecera”

8. Estructura con DIV
Una página realizada con <div>quedaría de la siguiente manera:
Es habitual una
caja contenedor
para impedir que
ocupe toda la
página cuando la
ventana del
navegador es muy
grande o controlar
la disposición de
los elementos
cuando es muy
pequeña.

9. Estructura HTML 5
<footer>
En html5, los bloques DIV son sustituidos por bloques semánticos que muestran
significados por sí mismo.
<header>
<nav>
<section> <aside>
<article>

10. Estructura con HTML5
Una página realizada con los nuevos bloques semánticos de HTML5 quedaría:

11. Ejemplo estructura semántica
En la imagen se pueden ver las etiquetas estructurales
más habituales, pero hay otras que podríamos utilizar
dentro de las etiquetas semánticas. Además, la
posición de estos elementos no tiene porqué ser así,
incluso podría anidarse de otras maneras. Quizás en
nuestro sitio queramos colocar el navegador en la
cabecera, en el lateral derecho o dentro del SECTION.
Sería independiente siempre que utilicemos la etiqueta
NAV para contenerlo. Asimismo, podrías tener más de
un SECTION en el cuerpo de la página, sueltos o
colocados dentro de otras etiquetas como ASIDE. Esos
SECTION adicionales podrían tener otros ARTICLE o
incluso, dentro de un SECTION, hacer otro esquema
de cabecera y pie anidando otros HEADER y FOOTER.

12. Estructura HTML
La estructura HTML, debe realizarse en el sentido lógico de lectura del
documento, para que cuando la página se vea sin aplicar los estilos no
pierda su significado.

13. Etiquetas semánticas estructurales
Las siguientes etiquetas son utilizadas para dar sentido semántico
al documento:
● ARTICLE: Especifica un artículo, es decir, una unidad de
contenido.
● SECTION: Es una sección dentro de un documento.
● HEADER: La cabecera de una página.
● FOOTER: El pie de página o informaciones que formen el pie de
una sección.
● ASIDE:Es una parte de la web que muestra contenido
accesorio, generalmente colocado en un panel lateral.
● NAV: con el que colocar el navegador principal de una página
web.

14. Otras etiquetas semánticas
● BDI: Define una parte del texto que debe ser entendido aparte de la
línea de contenido que se esté escribiendo.
● MENU: una lista de opciones que formen parte de un menú.
● COMMAND: Uno de los elementos o botones de un menú de opciones.
● DETAILS: Detalles o información suplementaria que se puede ver u
ocultar por el usuario.
● SUMMARY: Encabezamiento para detalles especificados en DETAILS.
● FIGURE: es un contenido que ilustre el articulo, como fotos, diagramas,
ilustraciones, etc.
● FIGCAPTION: El pie o explicación de un FIGURE.
● HGROUP: Un grupo de encabezamientos, útil cuando se tiene diversos
bloques de encabezamientos del mismo nivel H1,H2...
● MARK: Un texto o información que es remarcable.
● TIME: Para escribir una fecha, una hora o ambas.
● WBR: Define un posible salto de línea.

15. <HEADER>
● La etiqueta <header> se usa para
marcar un grupo de elementos de
introducción o de navegación dentro
de una sección o documento.
● Normalmente se usa para incluir los
encabezados (<h1>–<h6>o <hgroup>)
pero no es obligatorio.
● También puede contener otras cosas
como el índice de una sección, un
formulario de búsqueda, logos
relevantes, ...
● Si sólo tenemos un elemento no es
necesario usar esta etiqueta

16. <NAV>
● La etiqueta <nav>se usa para marcar una sección
del documento cuya función es la navegación por la
página web.
● Esta etiqueta no debe ser usada para marcar todos
los grupos de enlaces, únicamente los bloques
principales de navegación por la página.
● Debe existir sono un <nav>por documento.

17. <ARTICLE>
● Se usa para marcar contenido independiente que
tendría sentido fuera del contexto de la página
actual y que podría sindicarse. Por ejemplo: una
noticia, un artículo en un blog o un comentario.
● Normalmente un <article> tendrá, además de su
propio contenido,también una cabecera (a menudo
con <header>) y posiblemente un pie (<footer>).

18. <SECTION>
● Se usa para marcar una sección genérica de un documento o
aplicación. Una sección, en este contexto,es una agrupación
temática del contenido, típicamente con un encabezado.
● Sólo se debería usar <section> para contenido independiente al
que se podría poner un encabezado y que no sea susceptible
de ir marcado con <article>, <aside> o <nav>.
● Ejemplos de uso de <section> podrían ser: capítulos, las
pestañas en un menú tabulado o, en la página principal de un
sitio web, la introducción, lista de noticias e información de
contacto.

19. Cuando utilizar <article> o <section>?
Existe cierta confusión sobre este tema ya que ambos
se parecen bastante.
En general, se debe usar <article> cuando el contenido
sea susceptible de ser sindicado.
Un ejemplo de uso de las dos
etiquetas podría ser en la
página principal de una web
con un listado de noticias, de
esta forma:

20. <ASIDE>
● La etiqueta <aside> se usa para marcar un trozo de
contenido que está relacionado con el contenido de
la página web,pero que no es parte del mismo.
● Ejemplos de uso serían: glosario de términos,
grupos de enlaces a páginas relacionadas, barras
laterales, ...

21. <FOOTER>
● La etiqueta <footer> se usa para marcar el pie de una
sección o documento y que contiene información
sobre el mismo como el autor, licencia, términos de
uso,...

22. Herencia CSS
Para entender cómo funcionan los selectores y la herencia CSS es
necesario entender qué es el árbol del documento.

23. Herencia CSS
El árbol del documento del ejemplo anterior:
html
head body
title div .caja
nav
header
h1
article footer
ul
li
a
li
a
li
a

24. Herencia CSS
Ancestor un elemento conectado pero más arriba en la estructura del documento.
html
head body
title div .caja
nav
header
h1
article footer
ul
li
a
li
a
li
a
Ancestor

25. Herencia CSS
Descendiente son los elementos conectados pero más abajo en la estructura del
documento.
html
head body
title div .caja
nav
header
h1
article footer
ul
li
a
li
a
li
a
Descendiente

26. Herencia CSS
Parent es el elemento conectado y directamente sobre un elemento en la
estructura del documento.
html
head body
title div .caja
nav
header
h1
article footer
ul
li
a
li
a
li
a
Parent

27. Herencia CSS
Child es el elemento conectado y directamente debajo de un elemento en la
estructura del documento.
html
head body
title div .caja
nav
header
h1
article footer
ul
li
a
li
a
li
a
Child

28. Herencia CSS
Siblings son los elementos que comparten un mismo padre (parent) en la
estructura del documento.
html
head body
title div .caja
nav
header
h1
article footer
ul
li
a
li
a
li
a
Siblings
Parent

29. Herencia CSS
Si definimos un estilo en el body, todos los elementos situados debajo en el árbol
del documento,heredan esa propiedad.