HTML5 1

HTML5
1-1 Introduccin.
HTML5 es un nuevo concepto para la construccin de sitios web y aplicaciones en una era
que combina dispositivos mviles, computacin en la nube y trabajos en red. HTML5 propone
estndares libres para cada aspecto de la web y tambin un propsito claro para cada una de las
tecnologas involucradas, HTML5 = HTML5 + CSS3 + Javascript, (estas tecnologas tienen la
comunicacin e integracin necesarias para poder crear cualquier aplicacin o sitio para la web y
HTML est en constante desarrollo por el W3C World Wide Web Consortium; http://www.w3.org/):
HTML = se encarga de la estructura del documento.
CSS3 = se encarga de la presentacin del documento.
JavaScript = se encarga de la funcionalidad del documento.
HTML (Hyper Text Markup Languaje) provee los elementos necesarios para ubicar
contenido esttico o dinmico, y es una plataforma bsica para aplicaciones. Con la variedad de
dispositivos para acceder a Internet un aspecto bsico como la estructura se vuelve parte vital del
documento. Ahora la estructura provee forma, organizacin y flexibilidad.
Un documento HTML es un archivo de texto. El archivo debe ser grabado con la extensin
.html o .htm y el nombre; si es el archivo que contiene el men principal debe llamarse index el
resto de los nombres deben hacer referencia al contenido del sitio web, tienen que ser significativos.
HTML usa un lenguaje de etiquetas para construir pginas web. Estas etiquetas HTML son
palabras clave y atributos rodeados de los signos mayor > y menor < (por ejemplo, <html
lang=es>). En este caso, html es la palabra clave y lang es el atributo con el valor es. La mayora
de las etiquetas HTML se utilizan en pares, una etiqueta de apertura y una de cierre, y el contenido
se declara entre ellas. En nuestro ejemplo, <html lang=es> indica el comienzo del cdigo HTML
y </html> indica el final. La etiqueta de cierre se distingue por una barra invertida antes de la
palabra clave. El resto del cdigo ser insertado entre estas dos etiquetas. Sintaxis de las etiquetas
HTML5:
Las etiquetas se tienen que cerrar de acuerdo a como se abren.

Los nombres de las etiquetas y atributos se escriben en minsculas.
El valor de los atributos siempre se encierran con comillas simples o dobles.
Al ser unas tecnologas en constante desarrollo no todos los navegadores las implementan en
el mismo grado, se recomienda informarse (http://fmbip.com/litmus) y ejecutar los cdigos con las
ltimas versiones de los navegadores; Chrome, Firefox, IE, Opera y Safari.
1-2 Estructura del documento.

Los documentos HTML se encuentran estrictamente organizados. Cada parte del documento
est diferenciada, declarada y determinada por etiquetas semnticas (etiquetas que dan significado a
las partes del documento HTML) las etiquetas describen el contenido del documento.
<!DOCTYPE html>
Indica el tipo de documento que estamos creando. Esta lnea debe ser la primera del archivo,
sin espacios o lneas que la precedan. De esta forma el navegador interpreta el cdigo como
HTML5. Conocido como DTD (definicin de tipo de documento).
<html>...</html>
Indica al programa que este leyendo el fichero, que todo lo que encuentra entre ellas es
cdigo HTML y se debe interpretar como tal:
<!DOCTYPE html>
<html lang=es> inicio
cdigo ...
</html>
fin
El atributo lang en la etiqueta de apertura <html> es el que define el idioma del contenido
del documento que estamos creando, en este caso es por espaol.
El cdigo HTML tiene que ser dividido entre dos secciones principales. La primera seccin
es la cabeza (head) y la segunda el cuerpo (body).
<head>...</head>
Dentro de esta etiqueta definiremos el ttulo de nuestra pgina web, declararemos el set de
caracteres correspondiente, proveeremos informacin general acerca del documento e
incorporaremos los archivos externos con estilos, cdigos Javascript. Excepto por el ttulo y algunos
iconos, el resto de la informacin incorporada en el documento entre estas etiquetas es invisible
para el usuario.
<!DOCTYPE html>
<html lang=es>
<head>
</head>
</html>
<body>...</body>
El cuerpo representa la parte visible de todo documento.
<!DOCTYPE html>
<html lang=es>
<head>
</head>
<body>
</body>
</html>
<meta>
Etiqueta que define el juego de caracteres a utilizar para mostrar el documento, especifica
cmo el texto ser presentado en pantalla, va dentro del head. Hay otras etiquetas <meta> que
pueden ser incluidas para declarar informacin general sobre el documento, pero esta informacin
no es mostrada en la ventana del navegador, es solo importante para motores de bsqueda y
dispositivos que necesitan hacer una vista previa del documento u obtener un sumario de la
informacin que contiene (S.E.O. Optimizacin de Motores de Bsqueda). El atributo name
especifica su tipo y content declara su valor, pero ninguno de estos valores es mostrado en pantalla.
<!DOCTYPE html>
<html lang=es>
<head>
<meta charset=utf-8 /> 
<meta name=description content=Curso de HTML5 /> 
<meta name=keywords content=HTML5, CSS3, JavaScript /> 
</head>
<body>
</body>
</html>
En HTML5 no es necesario cerrar etiquetas simples con una barra al final, pero
recomendamos utilizarlas por razones de compatibilidad (ejemplo: <br />) es importante el espacio
antes de />, para evitar errores de interpretacin.
<title>
Especifica el ttulo del documento, aparece en la pestaa del navegador cuando carga el sitio
web, es una etiqueta muy importante ya que proporciona informacin de la pgina web a los
motores de bsqueda, no es conveniente que supere las 65 palabras.
<!DOCTYPE html>
<html lang=es>
<head>
<meta charset=utf-8 />
<meta name=description content=Curso de HTML5 />
<meta name=keywords content=HTML5, CSS3, JavaScript />
<title>Ttulo del documento.</title> 
</head>
<body>
</body>
</html>
<link>
Esta etiqueta es usada para incorporar archivos externos con los estilos CSS, imgenes o
iconos.
<!DOCTYPE html>
<html lang=es>
<head>
<title>Ttulo del documento.</title>
<link rel=stylesheet href=misEstilos.css />
</head>
<body>
</body>
</html>
En HTML5 ya no se necesita especificar qu tipo de estilos estamos insertando, por lo que
el atributo type fue eliminado. Solo necesitamos dos atributos para incorporar nuestro archivo de
estilos: rel y href. El atributo rel significa relacin y es acerca de la relacin entre el documento y
el archivo que estamos incorporando por medio de href. En este caso, el atributo rel tiene el valor
stylesheet que le dice al navegador que el archivo misEstilos.css es un archivo CSS con estilos
requeridos para presentar la pgina en pantalla.
Un archivo de estilos es un grupo de reglas de formato que ayudarn a cambiar la apariencia
de nuestra pgina web (por ejemplo, el tamao y color del texto). Sin estas reglas, el texto y
cualquier otro elemento HTML sera mostrado en pantalla utilizando los estilos estndar provistos
por el navegador.
1-3 Estructura del <body>

La estructura del cuerpo (el cdigo entre las etiquetas <body>...</body>) generar la parte
visible del documento. Este es el cdigo que producir nuestra pgina web. HTML5 incorpora
nuevas etiquetas que ayudan a identificar cada rea del documento y organizar el cuerpo del mismo,
en HTML5 las partes ms importantes son diferenciadas. El cmo usamos estas etiquetas depende
de nosotros, pero las palabras clave otorgadas a cada una de ellas nos ayudan a entender sus
funciones. Normalmente una pgina o aplicacin web est dividida en varias reas visuales para
mejorar la experiencia del usuario y facilitar la interactividad. Las palabras claves que representan
cada nuevo elemento de HTML5 estn ntimamente relacionadas con estas reas.
En general podremos identificar las siguientes reas en cada sitio web, independientemente
de que cada diseador crea sus propios diseos:
<header>...</header>
Cabecera, nos d informacin introductoria (ttulos, subttulos, logos), pero difiere con
respecto a <head> en su alcance. Mientras que <head> tiene el propsito de proveer informacin
acerca de todo el documento, <header> es usado solo para el cuerpo o secciones especficas dentro
del cuerpo. Representa la parte visible del documento.
<!DOCTYPE html>
<html lang=es>
<head>
</head>
<body>
<header>
<h1>Este es el ttulo principal del sitio web</h1> 
</header>
</body>
</html>
La etiqueta <h1>...</h1> se usa para definir ttulos, puede ir de h1 a h6, el nmero indica el
tamao del ttulo. Por lo tanto h1 ser utilizado para mostrar el ttulo principal y los dems para
subttulos, tienen que ser significativos.
De ahora en adelante ser posible ver los resultados de nuestro cdigo en la ventana del
navegador.
<nav>...</nav>
Esta etiqueta contiene la barra de navegacin de nuestro sitio web, conjunto de enlaces con
propsito de navegacin. Podremos tener otros enlaces en diversas partes de la pgina web.
<!DOCTYPE html>
<html lang=es>
<head>
</head>
<body>
<header>
<h1>Este es el ttulo principal del sitio web</h1>
</header>
<nav>
<ul>
<li><a href=#>inicio</a></li>
<li><a href=#>fotos</a></li>
<li><a href=#>videos</a></li>
<li><a href=#>contactos</a></li>
</ul>
</nav>
</body>
</html>
El elemento <nav> fue creado para ofrecer ayuda para la navegacin, como en mens
principales o grandes bloques de enlaces, y debera ser utilizado de esa manera.
<section>...</section>
Contiene la informacin ms relevante del documento y puede ser encontrada en diferentes
formas (por ejemplo, dividida en varios bloques o columnas).
<!DOCTYPE html>
<html lang=es>
<head>
</head>
<body>
<header>
</header>
<nav>
<ul>
</ul>
</nav>
<section>
...
</section>
</body>
</html>
<aside>...</aside>
Es el rea llamada barra lateral o aadido, normalmente contiene datos relacionados con la
informacin principal pero que no son relevantes o igual de importantes.
En el diseo de un blog, por ejemplo, la barra lateral contendr una lista de enlaces, los
enlaces apuntan a cada una de las entradas del blog y ofrecen informacin adicional sobre el autor.
La informacin dentro de esta barra est relacionada con la informacin principal pero no es
relevante por s misma. Podra estar ubicado del lado derecho o izquierdo de nuestra pgina de
ejemplo, la etiqueta no tiene una posicin predefinida. Solo describe la informacin que contiene,
no el lugar dentro de la estructura.
<!DOCTYPE html>
<html lang=es>
<head>
</head>
<body>
<header>
</header>
<nav>
<ul>
</ul>
</nav>
<section>
</section>
<aside>
<blockquote cite=url>Entrada nmero uno.</blockquote>

<blockquote cite=url>Entrada nmero dos.</blockquote>
</aside>
</body>
</html>
<blockquote>...</blockquote> citas textuales de un texto externo. El atributo cite = url indica la
direccin de la pgina web original de la que se extrae la cita.
<footer>...</footer>
Es el pi de la pgina, donde va la informacin institucional. Esta etiqueta puede ser usada
mltiples veces dentro del <body> para representar el final de diferentes secciones (del mismo
modo que la etiqueta <header>).
<!DOCTYPE html>
<html lang=es>
<head>
</head>
<body>
<header>
</header>
<nav>
<ul>
</ul>
</nav>
<section>
</section>
<aside>
<blockquote>Entrada nmero uno.</blockquote>
<blockquote>Entrada nmero dos.</blockquote>
</aside>
<footer>
<p>Derechos Reservados © 2014</p>
</footer>
</body>
</html>
1-4 Dentro del <body>

La mayora de las etiquetas ya estudiadas fueron creadas para construir una estructura para
el documento HTML que pueda ser identificada y reconocida por los navegadores y nuevos
dispositivos. Para el manejo de textos, imgenes, videos, etc, necesitamos poder diferenciar estos
elementos y establecer una relacin entre ellos dentro de la estructura.
<article>...</article>
Esta etiqueta nos permite agrupar la informacin relevante de similares caractersticas
dentro de una <section>.
<!DOCTYPE html>
<html lang=es>
<head>
</head>
<body>
<header>
</header>
<nav>
<ul>
</ul>
</nav>
<section>
<article>
<p>Texto del primer artculo.</p>
</article>
<article>
<p>Texto del segundo artculo.</p>
</article>
</section>
<aside>
<blockquote>Entrada nmero uno.</blockquote>
<blockquote>Entrada nmero dos.</blockquote>
</aside>
<footer>
<p>Derechos Reservados © 2014</p>
</footer>
</body>
</html>
Las etiquetas estudiadas podemos anidarlas, en el documento, segn nuestras necesidades.

<hgroup>...</hgroup>
Dentro de cada etiqueta <header>, podremos necesitar usar varias etiquetas h (h1 a h6), para
facilitar la labor de los navegadores al indexar la pgina web y para no ser penalizados en el S.E.O.
(Optimizacin de Motores de Bsqueda) agruparemos estas etiquetas.
Las etiquetas h deben conservar su jerarqua, lo que significa que debemos primero declarar
la etiqueta <h1>, luego usar <h2> para subttulos y as sucesivamente. HTML5 nos deja reusar las
etiquetas h y construir esta jerarqua una y otra vez en cada seccin del documento.
...
<header>
<hgroup>
<h2>Este el el subttulo del sitio web</h2>
...
</hgroup>
</header>
...
<figure>...</figure>
Esta etiqueta fue creada para envolver complementos visuales y diferenciarlos de la
informacin principal. Antes de que esta etiqueta fuera creada, no podamos identificar el contenido
que era parte de la informacin pero a la vez independiente, como ilustraciones, fotos, videos, etc...
Normalmente estos elementos son parte de la informacin relevante pero pueden ser extrados o
movidos a otra zona sin afectar o interrumpir el flujo del documento.
...
<figure>
<img src=http://mipagina.com/imagenes/imagen.png />
<figcaption>
<p>Mi imagen png</p>
</figcaption>
</figure>
La etiqueta <figcaption>...</figcaption> encierra el texto relacionado con <figure> y

establece una relacin entre ambos, elemento y contenido.
1-5 elementos adicionales

 comentario.
<a> enlace.
href : direccin de recursos del enlace, pueden ser vnculos internos o externos.
hreflang : especifica el idioma de una pgina web a que se le hace referencia mediante el
atributo href. El valor del atributo hreflang es un cdigo de idioma representados por
dos letras normalizadas por el estandar ISO639, que identifica un lenguaje natural.
media : especifica un medio alternativo de una pgina web, el mismo contenido pero en
formato vdeo, audio, pdf o una versin para imprimir. Valor por defecto el all,
que significa que la pgina web es apropiada para todos los dispositivos. En el
interior de la etiqueta <a> el atributo media trabaja con el atributo rel que tiene que
tener el valor alternate (alternativa).
screen : para pantallas de ordenadores.
tty : para medios que utilicen una cuadrcula de caracteres de ancho fijo, como
teletipos, terminales y dispositivos porttiles con posibilidades limitadas de
representacin.
tv : para dispositivos tipo televisin (baja resolucin, en color, desplazamiento
limitado).
projection : para proyectores.
handheld : para dispositivos de mano (pantalla pequea, monocromos, ancho de
banda limitado).
print : para impresora.
braile : para dispositivos tctiles braile.
rel : define el tipo de relacin que tiene el documento actual y el destino del vnculo,
especificado por el atributo href.
target : al hacer click en un enlace, abre un recurso, si no tiene ningn valor abre el recurso
en la misma ventana que se encuentra el documento.
_blank : este valor crear una ventana nueva.
type : nos da la posibilidad de poder indicar el tipo de archivo (video, audio, pdf...).
<abbr>...</abbr> para indicar el significado de una abreviatura.
<p>Este producto tiene un <abbr title=Precio Venta al Pblico> P.V.P.</abbr> de 50</p>
<acronym>...</acronym> para proporcionar el significado de unas siglas.

<p>Bienvenido al servidor del <acronym title=Departamento de Ingeniera de Sistemas
Telemticos>DIT</acronym></p>
<address>...</address> situaciones en las que debemos presentar informacin de contacto. Podra
dar informacin acerca de la empresa del sitio, el autor de un artculo o del sitio web. La
informacin de contacto tambin puede incluir enlaces y otros tags (etiquetas). Los navegadores
muestran el texto de este elemento en estilo de fuente itlica.
<address>
Autor: CLMTIC.
Pso San Gregorio n 43 1 A.
13500 Puertollano.
Ciudad Real.
</address>
<audio>...</audio> reproduce un archivo de audio.
autoplay : el archivo se reproducir automticamente.
controls : el navegador proporciona su botonera de controles.
loop : el fichero se reproduce continuamente.
preload : el archivo se carga previamente a su reproduccin.
height : especifica la altura de la ventana del audio.
width : especifica la anchura de la ventana del audio.
<audio controls loop preload >
<source src=sonido/sonido1.ogg type=audio/ogg />
<source src=sonido/sonido2.mp3 type=audio/mp3 />
</audio>
source : especifica la fuente del video.
<br /> salto de lnea en el texto, sin los mrgenes definidos para el prrafo. Pocas veces hay que
usar un salto de lnea; una poesa, un listado del cdigo, cuando cada lnea no es un prrafo.
<code>...</code> representa fragmentos de cdigo informtico.
<dfn>...</dfn> indica la definicin de un trmino.

...
<p>el uso de <dfn title=o telfono inteligente es espaol, es un dispositivo electrnico que
funciona como un telfono mvil con caractersticas similares a las de un ordenador
personal.>smartphone</dfn> aumenta la productividad en las empresas.</p>
...
<em>...</em> subraya el texto.
<p>Mi <em>coche</em> es verde.</p>
<img> muestra una imagen en la pgina.
alt : imagen alternativa por si no carga la imagen principal.
height : especifica la altura de la ventana de la imagen.
longdesc : descripcin larga de la imagen.
src : especifica la fuente de la imagen.
width : especifica la anchura de la ventana de la imagen.
<img src=imagen/imagen.jpg width=1024 height=576 alt=logo.jpg longdesc= url />
<li>...</li> define los elementos de las listas ul (listas desordenadas) y ol (listas ordenadas).
<mark>...</mark> resalta parte de un texto.
<p>Mi <mark>coche</mark> es verde.</p>
<ol>...</ol> define listas, ordenadas.
<p>...</p> prrafo.
<pre>...</pre> mantiene el aspecto visual, los elementos en blanco se mantienen igual que en el
texto original.
<pre>
dato1 10
dato2 20
dato3 30
</pre>
...
<strong>...</strong> pone en negrita el texto.

<p>Mi <strong>coche</strong> es verde.</p>
<sub>...</sub> para etiquetar el texto como subndice.
<p>La frmula del agua es H<sub>2</sub>O.</p>
<sup>...</sup> para etiquetar el texto como superndice.
<p>La frmula de la relatividad es E=mc<sup>2</sup>.</p>
<ul>...</ul> define listas, no ordenadas.
<video>...</video> reproduce un archivo de vdeo, algunos navegadores soportan un codificador de
video que otros no, esta lista indica los ms utilizados:
OGG codificador de video Theora y audio Vorbis.
MP4 codificador de video H.264 y audio AAC.
FLV codificador de video VP6 y audio MP3. Tambin soporta H.264 y ACC.
WEBM codificador de video VP8 y audio Vorbis.
Esta lista indica los navegadores y el codificador de video que soportan:
Firefox codificador de video Theora y audio Vorbis.
Google Chrome codificador de video Theora y audio Vorbis. Tambin soporta

codificador de video H.264 y audio AAC.
Opera codificador de video Theora y audio Vorbis.
Safari codificador de video H.264 y audio AAC.
IE codificador de video H.264 y audio AAC.
autoplay : el archivo se reproducir automticamente.

controls : el navegador proporciona su botonera de controles.
poster : imagen alternativa por si no cargar el vdeo.
preload : el archivo se carga previamente a su reproduccin.
height : especifica la altura de la ventana del vdeo.
width : especifica la anchura de la ventana del vdeo.
<video controls poster=img.jpg preload height=360 width=640>

<source src=video/video1.ogg type=video/ogg />
<source src=video/video2.mp4 type=video/mp4 />
<source src=video/video3.webm type=video/webm />
</video>

HTML5 1

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

HTML5 1

Cargado por

Copyright:

Formatos disponibles

HTML5

Las etiquetas se tienen que cerrar de acuerdo a como se abren.

1-2 Estructura del documento.

1-3 Estructura del <body>

<blockquote cite=url>Entrada nmero uno.</blockquote>

1-4 Dentro del <body>

Las etiquetas estudiadas podemos anidarlas, en el documento, segn nuestras necesidades.

La etiqueta <figcaption>...</figcaption> encierra el texto relacionado con <figure> y

1-5 elementos adicionales

<acronym>...</acronym> para proporcionar el significado de unas siglas.

<dfn>...</dfn> indica la definicin de un trmino.

<strong>...</strong> pone en negrita el texto.

OGG codificador de video Theora y audio Vorbis.

MP4 codificador de video H.264 y audio AAC.

WEBM codificador de video VP8 y audio Vorbis.

Esta lista indica los navegadores y el codificador de video que soportan:

Firefox codificador de video Theora y audio Vorbis.

Google Chrome codificador de video Theora y audio Vorbis. Tambin soporta

Opera codificador de video Theora y audio Vorbis.

Safari codificador de video H.264 y audio AAC.

IE codificador de video H.264 y audio AAC.

autoplay : el archivo se reproducir automticamente.

<video controls poster=img.jpg preload height=360 width=640>

También podría gustarte