Curso de HTML5
El futuro de la web
Versión 1.0
2012
Prólogo
Este curso está orientado a la introducción de los nuevos tags (etiquetas) y atributos
de la última actualización de HTML y CSS, con la intención de que el lector gradualmente
vaya conociendo el gran avance tecnológico que ésta implica.
Poco a poco se ha ido gestionando lo que es el desarrollo de una nueva experiencia
de la programación web y estamos seguros de que esto nunca se detendrá y seguirá en
constante movimiento.
Sin embargo ha sido un proceso lento y sometido a exhaustivos estudios y pruebas
que aún siguen ejecutándose tanto por parte de los desarrolladores del lenguaje como los
desarrolladores de los navegadores en los cuales este último debe ejecutarse. Al parecer los
grandes desarrolladores de navegadores no se han puesto de acuerdo acerca de los códec
que el navegador debería soportar nativamente para interpretar el contenido de las
etiquetas, por lo tanto si queremos probar la potencia de HTML5 Y CSS3, debemos tomar
las medidas necesarias, actualizar los navegadores que tengamos instalados en nuestras
computadoras e instalar algunos otros.
Por otra parte garantizando el aprendizaje inmediato de nuestros lectores, se
comenzó una intensiva investigación acerca del correcto funcionamiento del lenguaje en
cuestión, consultando importantes webs que de manera gratuita han abierto el portal del
conocimiento a los fanáticos de la innovación.
Esperamos que esta primera versión del Curso de HTML5 y CSS3 sea el primer
paso para la continuidad del estudio de tan importantes e innovadoras herramientas.
2
Índice
Prólogo
..……………………………………………………………….. 2
Introducción a HTML5
...………………………………………………………………. 4
Definiciones de CSS3
..……………………………………………………………… 29
Sección de Prácticas
..……………………………………………………………….59
Sección de Proyecto
..……………………………………………………………….94
Referencias
…....………………………………………………………… 117
3
Introducción a HTML5
4
¿Qué es HTML?
HTML (HyperText Markup Language) es un lenguaje muy sencillo que permite
describir hipertexto, es decir, texto presentado de forma estructurada y agradable, con
enlaces (hyperlinks) que conducen a otros documentos o fuentes de información
relacionadas, y con inserciones multimedia (gráficos, sonido...) La descripción se basa en
especificar en el texto la estructura lógica del contenido (títulos, párrafos de texto normal,
enumeraciones, definiciones, citas, etc) así como los diferentes efectos que se quieren dar
(especificar los lugares del documento donde se debe poner cursiva, negrita, o un gráfico
determinado) y dejar que luego la presentación final de dicho hipertexto se realice por
programas especializados conocidos como Browsers o navegadores web (Firefox, Opera,
Chrome, etc.)
Estructura Básica de un documento HTML
Un documento escrito en HTML contendría básicamente las siguientes etiquetas:
<HTML> Indica el inicio del documento.
<HEAD> Inicio de la cabecera.
<TITLE> Inicio del título del documento.
</TITLE> Final del título del documento.
</HEAD> Final de la cabecera del documento.
<BODY> Inicio del cuerpo del documento.
</BODY> Final del cuerpo del documento.
</HTML> Final del documento.
¿Qué es HTML5?
Es la quinta revisión importante del estándar que mueve internet, HTML y que ha
sido impulsado por el aumento de las necesidades de mejorar la funcionalidad y la
interactividad de usuarios y aplicaciones. HTML 5 presenta una amplia gama de mejoras
en controles para formularios, APIs, multimedia y también en la estructura y la
semántica. El trabajo en HTML 5 comenzó en el 2004 y es un esfuerzo conjunto entre el
W3C HTML WC y el WHATWG. Muchos aportan su participación, como Apple,
Mozilla, Opera, Microsoft y un sinnúmero de personas y empresas.
La aparición de estas revisiones implicará cambios importantes en el desarrollo de
páginas web y algunos se aventuran incluso a prever la desaparición de algunas tecnologías
de gran calado en la red, como puede ser Adobe Flash. Cierto o no, la realidad es que
estamos presenciando una evolución radical de los lenguajes principales de la web que
5
aportará grandes mejoras, pero que al mismo tiempo implicará un periodo de adaptación y
aprendizaje por parte de programadores y diseñadores.
Novedades de la estructura:
Empezamos con decir que el DOCTYPE es el encargado de indicarle al navegador web
que el documento que está abriendo es un documento HTML, además de indicar que es un
documento HTML también le indica la versión del HTML del mismo con el fin de
renderizar la pagina de manera correcta para mostrarla de la mejor manera posible.
Este es un ejemplo del doctype de la versión anterior.-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Ahora con la llegada de HTML5, el doctype es bastante sencillo y compatible con las
versiones anteriores de HTML y xHTML, esta es su sintaxis.-
<!DOCTYPE html>
Para crear una página web, normalmente se incluyen estructuras comunes como headers,
footers y columnas y es común usar divs para darles un id descriptiva o clase ya que las
actuales versiones de HTML4 carecen de la semántica necesaria para describir estas partes
de manera específica.
Por ejemplo:
6
El HTML5 soluciona esto incluyendo nuevos elementos que representan cada una de las
diferentes secciones de una página web.
Nuevos elementos:
Los tiempos modernos requieren nuevos elementos para proporcionar una web más
semántica, completa y homogenea. Para ello se han añadido una buena serie de elementos
que nos permitirán encapsular más nuestro contenido.
<article />: elemento que nos permite declarar un trozo del contenido como
artículo. Ideal para blogs o periódicos.
<aside />: representa un trozo de contenido que se relaciona muy levemente con
el resto del contenido.
Dialog:
Este elemento nos permite representar conversaciones:
<dialog>
<dt> Costello
<dd> Look, you gotta first baseman?
<dt> Abbott
<dd> Certainly.
<dt> Costello
<dd> Who's playing first?
<dt> Abbott
<dd> That's right.
<dt> Costello
<dd> When you pay off the first baseman every month, who gets the money?
<dt> Abbott
<dd> Every dollar of it.
</dialog>
7
Figure:
Podrá ser usado para asociar con un caption un contenido incrustado, como por ejemplo
gráficos o vídeo:
<figure>
<video src=ogg>…</video>
<legend>Example</legend>
</figure>
<footer /> Sección para colocar información sobre el autor, copyright, etc.
<header /> Representa a la sección de cabecera.
<nav /> Representa la sección de la página orientada a la navegación.
<section /> Elemento que indica que se trata de una sección genérica.
Audio:
La etiqueta <audio> es muy sencilla porque solo implica un reproductor de audio. Para
implementarla es muy sencillo:
<audio width="300" height="32" src="micancion.mp3" controls="controls"
autoplay="autoplay" preload="">
</audio>
Expliquemos los atributos de la etiqueta:
SRC: Nos enlaza el archivo de audio que queremos reproducir.
CONTROLS: Nos permite implementar los controles del reproductor por defecto
del navegador como, botón play-pause, seek y volumen.
AUTOPLAY: Nos permite reproducir el archivo de audio desde que se carga la
página.
PRELOAD: Nos carga un poco el archivo de audio antes de iniciar la reproducción
en el buffer para que no se trabe por reproducir mas de lo que carga.
Como pueden ver, es demasiado sencillo para empezar a jugar con esta etiqueta. Pero aquí
aun no termina todo, como es algo nuevo de implementar, los navegadores luchan por cual
formato de audio debe liderar la web, entonces hay que atender a todos.
Implementación de formatos de audio
Tenemos muchos navegadores con diferente compatibilidad, pero lo que más nos interesa
son los Motores de Renderizado, estos se encargan de renderizar el código de nuestra
pagina web e implementar ahora el contenido multimedia.
8
Veamos cuales motores corresponden a cada navegador:
Google Chrome: WebKit
Safari: WebKit
Mozilla FireFox: Gecko
Opera: Presto
Internet Explorer: Trident
Estos son los Navegadores mas importantes hasta ahora, y ahora veamos la compatibilidad
con los archivos de audio.
Visto que motores o navegadores aceptan un formato, pasamos a hacer Audio compatible
con todos ellos.
<audio controls autoplay preload>
<source src="cancion.ogg" type="audio/ogg" />
<source src="cancion.mp3" type="audio/mpeg" />
<source src="cancion.wav" type="audio/wav" />
Tu navegador no soporta esta caracteristica
</audio>
Ahora quitamos el SRC y solo dejamos las demas propiedades pero ahora dentro de las
etiquetas de apertura y cierre ponemos una etiqueta SOURCE para decirle que archivo va
enlazar y qué tipo de audio es.
SRC: Nos enlaza el archivo de audio que queremos reproducir.
Type: Le decimos que tipo de audio o codec va reproducir
Video:
La manera más importante de implementarla es de esta manera:
<video src="video.mp4" width="640" height="360" controls autoplay preload>
</video>
Expliquemos los atributos de la etiqueta:
SRC: Nos enlaza el archivo de video que queremos reproducir.
WIDTH: Nos define el ancho del video en pixeles.
9
HEI
Crear cuenta
Comentarios de: Curso de HTML5 (0)
No hay comentarios