2.5. Elementos básicos: texto, vínculos, listas, tablas, objetos, imágenes y aplicaciones.
Texto
La mayor parte del contenido de las páginas HTML habituales está formado por texto, llegando a
ser más del 90% del código de la página. Por este motivo, es muy importante conocer los
elementos y etiquetas que define HTML para el manejo del texto.
El lenguaje HTML incorpora al tratamiento del texto muchas de las ideas y normas establecidas
en otros entornos de publicación de contenidos. De esta forma, HTML define etiquetas para
estructurar el contenido en secciones y párrafos y define otras etiquetas para marcar
elementos importantes dentro del texto.
El proceso de estructurar un texto simple consiste en indicar las diferentes zonas o secciones
que componen el texto. De esta forma, los textos estructurados utilizan etiquetas para delimitar
cada párrafo y títulos de sección para delimitar cada una de las secciones que forman el texto.
Una vez definida la estructura básica de los contenidos de la página, el siguiente paso consiste en
marcar los diferentes elementos dentro del propio texto: definiciones, abreviaturas, textos
importantes, textos modificados, citas a otras referencias, etc.
Estructurar
La forma más sencilla de estructurar un texto consiste en separarlo por párrafos. Además, HTML
permite incluir títulos que delimitan cada una de las secciones.
Una de las etiquetas más utilizadas de HTML es la etiqueta <p>, que permite definir los párrafos
que forman el texto de una página. Para delimitar el texto de un párrafo, se encierra ese texto
con la etiqueta <p>, como muestra el siguiente ejemplo:
<html>
<head>
<title>Ejemplo de texto estructurado con párrafos</title>
</head>
<body>
<p>Este es el texto que forma el primer párrafo de la página.
Los párrafos pueden ocupar varias líneas y el navegador se encarga
de ajustar su longitud al tamaño de la ventana.</p>
<p>El segundo párrafo de la página también se define encerrando
su texto con la etiqueta p. El navegador también se encarga de
separar automáticamente cada párrafo.</p>
</body>
</html>
Los párrafos creados con HTML son elementos de bloque, por lo que siempre ocupan toda la
anchura de la ventana del navegador. Además, no tienen atributos específicos, pero sí que se les
pueden asignar los atributos comunes de HTML básicos, de internacionalización y de eventos.
Secciones
Las páginas HTML habituales suelen tener una estructura más compleja que la que se puede
crear solamente mediante párrafos. De hecho, es habitual que las páginas se dividan en
diferentes secciones jerárquicas.
Los títulos de sección se utilizan para delimitar el comienzo de cada sección de la página. HTML
permite crear secciones de hasta seis niveles de importancia. De esta forma, aunque una página
puede definir cualquier número de secciones, sólo puede incluir seis niveles jerárquicos.
Las etiquetas que definen los títulos de sección son <h1>, <h2>, <h3>, <h4>, <h5> y <h6>. La
etiqueta <h1> es la de mayor importancia y por tanto se utiliza para definir los titulares de la
página. La importancia del resto de etiquetas es descendiente, de forma que la etiqueta <h6> es
la que se utiliza para delimitar las secciones menos importantes de la página.
Al igual que la etiqueta <p>, las etiquetas de título de sección son elementos de bloque y no
tienen atributos específicos.
Las etiquetas <h1>, …, <h6> definen títulos de sección, no secciones completas. Por este motivo,
no es necesario encerrar los contenidos de una sección con su etiqueta correspondiente.
Solamente se debe encerrar con las etiquetas <h1>, …, <h6> los títulos de cada sección.
El siguiente ejemplo muestra el uso de las etiquetas de título de sección:
<html>
<head>
<title>Ejemplo de texto estructurado con secciones</title>
</head>
<body>
<h1>Titular de la página</h1>
<p>Párrafo de introducción…</p>
<h2>La primera sub-sección</h2>
<p>Párrafo de contenido…</p>
<h2>Otra subsección</h2>
<p>Más párrafos de contenido…</p>
</body>
</html>
Los navegadores asignan de forma automáticamente el tamaño del título de cada sección en
función de su importancia. Así, los títulos de sección <h1> se muestran con el tamaño de letra
más grande, ya que son el nivel jerárquico superior, mientras que los títulos de sección <h6> se
visualizan con un tamaño de letra muy pequeño, adecuado para el nivel jerárquico de menor
importancia.
Marcado Básico de texto
Una vez estructurado el texto en párrafos y secciones, el siguiente paso es el marcado de los
elementos que componen el texto. Los textos habituales están formados por elementos como
palabras en negrita o cursiva, anotaciones y correcciones, citas a otros documentos externos, etc.
HTML proporciona varias etiquetas para marcar cada uno de los diferentes tipos de texto.
Entre las etiquetas más utilizadas para marcar texto se encuentran <em> y <strong>.
La etiqueta <em> marca un texto indicando que su importancia es mayor que la del resto del
texto. La etiqueta <strong> indica que un determinado texto es de la mayor importancia dentro
de la página.
Ejemplo:
<html>
<head>
<title>Ejemplo de etiqueta em y strong</title>
</head>
<body>
<p>El lenguaje HTML permite marcar algunos segmentos de texto
como <em>muy importantes</em> y otros segmentos como <strong>los
más importantes</strong>.</p>
</body>
</html>
Por defecto, los navegadores muestran los elementos <em> en cursiva para hacer evidente su
importancia y muestran los elementos <strong> en negrita, para indicar que son los más
importantes.
HTML también permite marcar de forma adecuada las modificaciones realizadas en el contenido
de una página. En otras palabras, HTML permite indicar de forma clara el texto que ha sido
eliminado y el texto que ha sido añadido a un determinado texto original. Las etiquetas
utilizadas son <ins> y <del>.
Las dos etiquetas cuentan con los mismos atributos específicos, que opcionalmente se pueden
añadir para proporcionar más información sobre los cambios realizados. El atributo cite se
emplea para indicar la dirección de un documento externo en el que se puede encontrar más
información relacionada con la inserción o el borrado de texto. El atributo datetime puede
utilizarse para indicar la fecha y la hora en la que se realizó cada cambio.
Ejemplo:
<html>
<head><title>Ejemplo de etiqueta ins y del</title></head>
<body>
<h3>Ejemplo de etiqueta ins y del</h3>
<p>El HTML, acrónimo inglés de Hyper Text Markup Language (lenguaje de
<del datetime=»20091025″ cite=»http://www.librosweb.es/mas_informacion.html»>marcado de
hipertexto</del>
<ins datetime=»20091026″ cite=»http://www.librosweb.es/
mas_informacion.html»>
marcas hipertextuales</ins>) es un lenguaje de marcación diseñado para estructurar
textos y presentarlos en forma de hipertexto.</p>
</body>
</html>
Por defecto, el texto eliminado (marcado con la etiqueta <del>) se muestra tachado de forma
que el usuario pueda identificarlo fácilmente como un texto que formaba parte del texto original
y que ya no tiene validez. El texto insertado (marcado con la etiqueta <ins>) se muestra
subrayado, de forma que el usuario pueda identificarlo como un texto nuevo que no formaba
parte del texto original.
Por otra parte, en muchos tipos de páginas (artículos, noticias) es habitual citar literalmente un
texto externo. HTML define la etiqueta <blockquote> para incluir citas textuales en las páginas
web.
Marcado Avanzado de Texto
Las páginas y documentos más avanzados suelen incluir otros elementos importantes que se
deben marcar de forma adecuada. Por ello, HTML incluye muchas otras etiquetas que permiten
marcar más elementos del texto.
La etiqueta <abbr> marca las abreviaturas de un texto y la etiqueta <acronym> se emplea para
marcar las siglas o acrónimos del texto.
<abbr> Abreviaturas
Atributos comunes básicos, i18n y eventos
Atributos
específicos ▪ title = «texto» – Indica el significado completo de la abreviatura
Tipo de elemento En línea
Descripción
Se emplea para marcar las abreviaturas del texto y proporcionar el significado de esas
abreviaturas
<acronym> Acrónimos o siglas
Atributos comunes básicos, i18n y eventos
Atributos
específicos ▪ title = «texto» – Indica el significado completo del acrónimo o sigla
Tipo de elemento En línea
Descripción
Se emplea para marcar las siglas o acrónimos del texto y proporcionar el significado de
esas siglas.
La mayoría de navegadores muestran por defecto un borde inferior punteado para todos los
elementos <abbr> y <acronym>. Al posicionar el puntero del ratón sobre la palabra subrayada, el
navegador muestra un pequeño recuadro (llamado tooltip en inglés) con el valor del atributo
title.
<dfn> Definición
Atributos comunes básicos, i18n y eventos
Atributos
específicos ▪ title = «texto» – Indica el significado completo del término
Tipo de elemento En línea
Descripción
Se emplea para marcar las definiciones de ciertos términos y proporcionar el
significado de esos términos
<cite> Cita
Atributos comunes básicos, i18n y eventos
Atributos
específicos
–
Tipo de elemento En línea
Descripción Se emplea para marcar una cita o una referencia a otras fuentes.
Marcado Genérico de texto
El estándar HTML/XHTML incluye numerosas etiquetas para marcar los contenidos de texto. No
obstante, la infinita variedad de posibles contenidos textuales hace que no sean suficientes. Si se
considera el siguiente ejemplo:
Importante: si quiere ponerse en contacto con la empresa ACME, puede hacerlo en el
teléfono 900 555 555 o a través de la dirección de correo electrónico contacto@acme.org
El texto del ejemplo anterior contiene elementos de texto importantes, siglas, números de
teléfono y direcciones de correo electrónico. XHTML define la etiqueta <strong> para marcar los
elementos importantes y <acronym> para marcar las siglas:
<strong>Importante</strong>: si quiere ponerse en contacto con la empresa
<acronym>ACME</acronym>, puede hacerlo en el teléfono 900 555 555 o a través de la
dirección de correo electrónico contacto@acme.org
Desafortunadamente, XHTML no define ninguna etiqueta específica para marcar números de
teléfono o direcciones de correo electrónico. De la misma forma, no define etiquetas para otros
posibles elementos que se pueden encontrar en los contenidos de texto.
Por este motivo, el estándar HTML/XHTML incluye una etiqueta llamada <span> que se emplea
para marcar cualquier elemento que no se puede marcar con las otras etiquetas definidas.
Siguiendo con el ejemplo anterior, la etiqueta <span> se utiliza para marcar el teléfono y la
dirección de correo electrónico.
Espacios en blanco y nuevas líneas
El aspecto más sorprendente del lenguaje HTML cuando se desarrollan los primeros
documentos es el tratamiento especial de los «espacios en blanco» del texto. HTML considera
espacio en blanco a los espacios en blanco, los tabuladores, los retornos de carro y el carácter de
nueva línea (ENTER o Intro).
No obstante, HTML proporciona varias alternativas para poder incluir tantos espacios en blanco
y tantas nuevas líneas como sean necesarias dentro del contenido textual de las páginas.
Vínculos
El lenguaje de marcado HTML se definió teniendo en cuenta algunas de las características que
existían en ese momento para la publicación digital de contenidos. Entre los conceptos utilizados
en su creación, se encuentra el mecanismo de «hipertexto».
De hecho, las letras «HT» de la sigla HTML significan «hipertexto» (hypertext en inglés), por lo que
el significado completo de HTML podría traducirse como «lenguaje de marcado para hipertexto».
La incorporación del hipertexto fue una de las claves del éxito del lenguaje HTML, ya que
permitió crear documentos interactivos que proporcionan información adicional cuando se
solicita. El elemento principal del hipertexto es el «hiperenlace», también llamado «enlace web» o
simplemente «enlace».
Los enlaces se utilizan para establecer relaciones entre dos recursos. Aunque la mayoría de
enlaces relacionan páginas web, también es posible enlazar otros recursos como imágenes,
documentos y archivos.
Una característica que no se suele tener en cuenta en los enlaces es que están formados por dos
extremos y un sentido. En otras palabras, el enlace comienza en un recurso y apunta hacia otro
recurso. Cada uno de los dos extremos se llaman «anchors» en inglés, que se puede traducir
literalmente como «anclas».
URL
Antes de empezar a crear enlaces, es necesario comprender y dominar el concepto de URL. El
acrónimo URL (del inglés Uniform Resource Locator) hace referencia al identificador único de
cada recurso disponible en Internet. Las URL son esenciales para crear los enlaces, pero también
se utilizan en otros elementos HTML como las imágenes y los formularios.
La URL de un recurso tiene dos objetivos principales:
▪ Identificar de forma única a ese recurso
▪ Permitir localizar de forma eficiente ese recurso
En primer lugar, las URL permiten que cada página HTML publicada en Internet tenga un
nombre único que permita diferenciarla de las demás. De esta forma es posible crear enlaces que
apunten de forma inequívoca a una determinada página.
Si se accede a la página principal de Google, la dirección que muestra el navegador es:
http://www.google.com
La cadena de texto http://www.google.com es la URL completa de la página principal de Google.
La URL de las páginas es imprescindible para crear los enlaces, ya que permite distinguir una
página de otra.
El segundo objetivo de las URL es el de permitir la localización eficiente de cada recurso de
Internet. Para ello es necesario comprender las diferentes partes que forman las URL. Una URL
sencilla siempre está formada por las mismas tres partes. Si por ejemplo se considera la
siguiente URL:
http://www.librosweb.es/xhtml/capitulo4.html
Las partes que componen la URL anterior son:
▪ Protocolo (http://): el mecanismo que debe utilizar el navegador para acceder a ese
recurso. Todas las páginas web utilizan http://. Las páginas web seguras (por ejemplo las
de los bancos y las de los servicios de email) utilizan https:// (se añade una letra s).
▪ Servidor (www.librosweb.es): simplificando mucho su explicación, se trata del ordenador
en el que se encuentra guardada la página que se quiere acceder. Los navegadores son
capaces de obtener la dirección de cada servidor a partir de su nombre.
▪ Ruta (/xhtml/capitulo4.html): camino que se debe seguir, una vez que se ha llegado al
servidor, para localizar el recurso específico que se quiere acceder.
Por tanto, las URL no sólo identifican de forma única a cada recurso de Internet, sino que
también proporcionan a los navegadores la información necesaria para poder llegar hasta ese
recurso.
La mayoría de URL son tan sencillas como la URL mostrada anteriormente. No obstante, existen
URL complejas formadas por más partes.
http://www.alistapart.com/comments/webstandards2008?page=5#42
Las cinco partes que forman la URL anterior son:
▪ Protocolo (http://)
▪ Servidor (www.alistapart.com)
▪ Ruta (/comments/webstandards2008)
▪ Consulta (?page=5): información adicional necesaria para que el servidor localice
correctamente el recurso que se quiere acceder. Siempre comienza con el carácter ? y
contiene una sucesión de palabras separadas por = y &
▪ Sección (#42): permite que el navegador se posicione automáticamente en una sección de
la página web. Siempre comienza con el caracter #
Como las URL utilizan los caracteres :, =, & y / para separar sus partes, estos caracteres están
reservados y no se pueden utilizar libremente. Además, algunos caracteres no están reservados
pero pueden ser problemáticos si se utilizan en la propia URL.
Si es necesario incluir estos caracteres reservados y especiales en una URL, se sustituyen por
combinaciones de caracteres seguros. Esta sustitución se denomina codificación de caracteres y
el servidor realiza el proceso inverso (decodificación) cuando le llega una URL con los caracteres
codificados.
Los enlaces en HTML se crean mediante la etiqueta <a> (su nombre viene del inglés «anchor»,
literalmente traducido como «ancla»). A continuación se muestra la definición simplificada de
<a> y más adelante se muestra su definición completa:
<a> Enlaces
Atributos comunes básicos, i18n, eventos y foco
Atributos
específicos
▪ name = «texto» – Permite nombrar al enlace para que se pueda acceder desde
otros enlaces
▪ href = «url» – Indica la URL del recurso que se quiere enlazar
Tipo de elemento En línea
Descripción Se emplea para enlazar todo tipo de recursos
El atributo más importante de la etiqueta <a> es href, que se utiliza para indicar la URL a la que
apunta el enlace. Cuando el usuario pincha sobre un enlace, el navegador se dirige a la URL del
recurso indicado mediante href. Las URL de los enlaces pueden ser absolutas, relativas, internas
y externas.
Con la definición anterior, para crear un enlace que apunte a la página principal de Google
solamente habría que incluir lo siguiente en un documento HTML:
<a href=»http://www.google.com»>Página principal de Google</a>
Listas
En ocasiones, es posible agrupar determinadas palabras o frases en un conjunto de elementos
que tienen más significado de forma conjunta. El menú de navegación de un sitio web por
ejemplo está formado por un grupo de palabras. Aunque cada palabra por separado tiene
sentido, de forma conjunta constituyen el menú de navegación de la página, por lo que su
significado conjunto es mayor que por separado.
El lenguaje HTML define tres tipos diferentes de listas para agrupar los elementos: listas no
ordenadas (se trata de una colección simple de elementos en la que no importa su orden), listas
ordenadas (similar a la anterior, pero los elementos están numerados y por tanto, importa su
orden) y listas de definición (un conjunto de términos y definiciones similar a un diccionario).
Listas no ordenadas
Las listas no ordenadas son las más sencillas y las que más se utilizan. Una lista no ordenada es
un conjunto de elementos relacionados entre sí pero para los que no se indica un orden o
secuencia determinados. La etiqueta <ul> encierra todos los elementos de la lista y la etiqueta
<li> cada uno de sus elementos.
<ul> Lista no ordenada
Atributos comunes básicos, i18n y eventos
Atributos
específicos
–
Tipo de elemento Bloque
Descripción Se emplea para definir listas no ordenadas
<li> Elemento de una lista
Atributos comunes básicos, i18n y eventos
Atributos
específicos
–
Tipo de elemento Bloque
Descripción Se emplea para definir los elementos de las listas (ordenadas y no ordenadas)
Listas ordenadas
Las listas ordenadas son casi idénticas a las listas no ordenadas, salvo que en este caso los
elementos relacionados se muestran siguiendo un orden determinado. Cuando se crea por
ejemplo una lista con las instrucciones de un producto, es importante el orden en el que se
realiza cada paso. Cuando se muestra un índice o tabla de contenidos en un libro, es importante
el orden de cada elemento del índice.
En todos estos casos, la lista más adecuada es la lista ordenada, que se define mediante la
etiqueta <ol>. Los elementos de la lista se definen mediante la etiqueta <li>, la misma que se
utiliza en las listas no ordenadas.
<ol> Lista ordenada
Atributos comunes básicos, i18n y eventos
Atributos
específicos
–
Tipo de elemento Bloque
Descripción Se emplea para definir listas ordenadas.
Listas de definición
Las listas de definición apenas se utilizan en la mayoría de páginas HTML. Su funcionamiento es
similar al de un diccionario, ya que cada elemento de la lista está formado por términos y
definiciones. La etiqueta <dl> crea la lista de definición y las etiquetas <dt> y <dd> definen
respectivamente el término y la descripción de cada elemento de la lista.
<dl> Lista de definición
Atributos comunes básicos, i18n y eventos
Atributos
específicos
–
Tipo de elemento Bloque
Descripción Se emplea para definir listas de definición
Introducción a XHTML Capítulo 5. Listas
http://www.librosweb.es 69
<dt> Término de una definición
Atributos comunes básicos, i18n y eventos
Atributos
específicos
–
Tipo de elemento Bloque
Descripción Se emplea para definir los términos de los elementos de una lista de definición
<dd> Descripción de una definición
Atributos comunes básicos, i18n y eventos
Atributos
específicos
–
Tipo de elemento Bloque
Descripción Se emplea para indicar las definiciones de los elementos de una lista de definición.
Tablas
Desde sus primeras versiones, HTML incluyó el soporte para crear tablas de datos en las páginas
web. Además de ser sencillo, el modelo definido por HTML es muy flexible y bastante completo.
Las tablas en HTML utilizan los mismos conceptos de filas, columnas, cabeceras y títulos que los
que se utilizan en cualquier otro entorno de publicación de documentos.
Las tablas de HTML puede contener elementos simples, agrupaciones de filas y de columnas,
cabeceras y pies de tabla, subdivisiones, cabeceras múltiples y otros elementos complejos.
A pesar de que las tablas HTML son fáciles de comprender y utilizar, son uno de los elementos
más polémicos de HTML. El problema de las tablas es que no siempre se utilizan
adecuadamente. Aunque parezca obvio, las tablas se deben utilizar para mostrar información
tabular.
Hasta hace unos años, las tablas también se utilizaban para definir la estructura de las páginas
web. La cabecera de la página era una fila de una gran tabla, el pie de página era otra fila de esta
tabla y la zona de contenidos estaba formada por varias columnas dentro de esa gran tabla.
Aunque algunos malos diseñadores siguen utilizando hoy en día las tablas para definir la
estructura completa de las páginas web, se trata de una técnica obsoleta y nada recomendable.
El motivo es que se complica en exceso el código HTML y su mantenimiento es muy complejo. La
solución correcta para definir la estructura de las páginas consiste en la utilización de hojas de
estilos CSS.
Tablas Básicas
Las tablas más sencillas de HTML se definen con tres etiquetas: <table> para crear la tabla, <tr>
para crear cada fila y <td> para crear cada columna.
A continuación se muestra el código HTML de una tabla sencilla:
<html>
<head><title>Ejemplo de tabla sencilla</title></head>
<body>
<h1>Listado de cursos</h1>
<table>
<tr>
<td><strong>Curso</strong></td>
<td><strong>Horas</strong></td>
<td><strong>Horario</strong></td>
</tr>
<tr>
<td>CSS</td>
<td>20</td>
<td>16:00 – 20:00</td>
</tr>
<tr>
<td>HTML</td>
<td>20</td>
<td>16:00 – 20:00</td>
</tr>
<tr>
<td>Dreamweaver</td>
<td>60</td>
<td>16:00 – 20:00</td>
</tr>
</table>
</body>
</html>
La etiqueta <table> encierra todas las filas y columnas de la tabla. Las etiquetas <tr> (del inglés
«table row») definen cada fila de la tabla y encierran todas las columnas. Por último, la etiqueta
<td> (del inglés «table data cell») define cada una de las columnas de las filas, aunque realmente
HTML no define columnas sino celdas de datos.
Al definir una tabla, se debe pensar en primer lugar en las filas que la forman y a continuación en
las columnas. El motivo es que HTML procesa primero las filas y por eso las etiquetas <tr>
aparecen antes que las etiquetas <td>.
<table> Tabla
Atributos comunes básicos, i18n y eventos
Atributos
específicos
▪ summary = «texto» – Permite describir el contenido de la tabla (lo utilizan los
buscadores y las personas discapacitadas)
Tipo de elemento Bloque
Descripción Se emplea para definir tablas de datos.
<tr> Fila de tabla
Atributos comunes básicos, i18n y eventos
Atributos
específicos
–
Tipo de elemento Bloque
Descripción Se emplea para definir cada fila de las tablas de datos
<td> Celda de tabla
Atributos comunes básicos, i18n y eventos
Atributos
específicos
▪ abbr = «texto» – Permite describir el contenido de la celda (se emplea sobre
todo con los navegadores de voz utilizados por personas discapacitadas)
▪ headers = «lista_de_id» – Indica las celdas que actúan como cabeceras para
esta celda (los títulos de las columnas y filas). Se indica como una lista de valores
del atributo «id» de celdas
▪ scope = «col, row, colgroup, rowgroup» – Indica las celdas para las que
esta celda será su cabecera. Ej: scope=»col» indica que esta celda es la cabecera de
todas las demás celdas que están en la misma columna
▪ colspan = «numero» – Número de columnas que ocupa esta celda
▪ rowspan = «numero» – Número de filas que ocupa esta celda
Tipo de elemento Bloque
Descripción
Se emplea para definir cada una de las celdas que forman las filas de una tabla, es
decir, las columnas de la tabla.
De todos los atributos disponibles para las celdas, los más utilizados son rowspan y colspan, que
se emplean para construir tablas complejas como las que se ven más adelante. Entre los demás
atributos, sólo se utiliza de forma habitual el atributo scope, sobre todo con las celdas de
cabecera que se ven a continuación.
Normalmente, algunas de las celdas de la tabla se utilizan como cabecera de las demás celdas de
la fila o de la columna. En este caso, HTML define la etiqueta <th> (del inglés «table header cell»)
para indicar que una celda es cabecera de otras celdas.
<th> Celda cabecera de tabla
Atributos comunes básicos, i18n y eventos
Atributos
específicos
▪ abbr = «texto» – Permite describir el contenido de la celda (se emplea sobre
todo con los navegadores de voz utilizados por personas discapacitadas)
▪ headers = «lista_de_id» – Indica las celdas que actúan como cabeceras para
esta celda (los títulos de las columnas y filas). Se indica como una lista de ID de
celdas
▪ scope = «col, row, colgroup, rowgroup» – Indica las celdas para las que
esta celda será su cabecera. Ej: scope=»col» indica que esta celda es la cabecera de
todas las demás celdas que están en la misma columna
▪ colspan = «numero» – Número de columnas que ocupa esta celda
▪ rowspan = «numero» – Número de filas que ocupa esta celda
Tipo de elemento Bloque
Descripción
Se emplea para definir las celdas que son cabecera de una fila o de una columna de la
tabla.
Los atributos de la etiqueta <th> son idénticos que los atributos definidos para la etiqueta <td>.
En este caso, el atributo más utilizado es scope, que permite indicar si la celda es cabecera de la
fila o de la columna (<th scope=»row»> y <th scope=»col»> respectivamente).
Por otra parte, HTML define la etiqueta <caption> para establecer la leyenda o título de una
tabla. La etiqueta debe colocarse inmediatamente después de la etiqueta <table> y cada tabla
sólo puede incluir una etiqueta <caption>.
<caption> Leyenda o título de tabla
Atributos comunes básicos, i18n y eventos
Atributos
específicos
–
Tipo de elemento En línea
Descripción Se emplea para definir la leyenda o título de una tabla
Las tablas complejas suelen disponer de una estructura irregular que junta varias columnas para
formar una columna ancha o une varias filas para formar una fila más alta que las demás. Para
fusionar filas o columnas, se utilizan los atributos rowspan y colspan respectivamente.
La siguiente imagen muestra una tabla compleja que ha fusionado dos columnas simples para
formar una columna más ancha.
Objetos
Además de las imágenes, HTML permite incluir en las páginas web otros elementos mucho más
complejos, como applets de Java y vídeos en formato QuickTime o Flash. La mayoría de este tipo
de contenidos no los interpreta el navegador directamente, sino que hace uso de pequeños
programas llamados plugins y que se encargan de tratar con este tipo de elementos complejos.
La etiqueta es la que permite «embeber» o incluir en las páginas HTML cualquier tipo
de contenido complejo:
Objeto
Atributos comunes básicos, i18n y eventos
Atributos
específicos
▪ data = «url» – Indica la URL de los datos que utiliza el objeto
▪ classid, codebase, codetype – Información específica que depende del tipo
de objeto
▪ type – Indica el tipo de contenido de los datos
▪ height = «unidad_de_medida» – Indica la altura con la que se debe mostrar el
objeto
▪ width = «unidad_de_medida» – Indica la anchura con la que se debe mostrar el
objeto
Tipo de elemento Bloque y en línea
Descripción Se emplea para embeber objetos en los documentos
El atributo data se emplea para indicar la URL del recurso que se va a incluir. El atributo type
indica el tipo de contenido de los datos del objeto. Los posibles valores de type están
estandarizados y coinciden con los del atributo type de la etiqueta que se explicó
anteriormente.
Parámetros de un objeto
Atributos comunes id
Atributos
específicos
▪ name = «texto» – Indica el nombre del parámetro
▪ value = «texto» – Indica el valor del parámetro
Tipo de elemento Etiqueta vacía
Descripción Se emplea para indicar el valor de los parámetros del objeto.
Uno de los principales inconvenientes de es la forma de incluir vídeos en formato
Flash en las páginas HTML. Si se utiliza el siguiente código:
El elemento anterior es correcto desde el punto de vista técnico, pero provoca que algunos
navegadores como Internet Explorer no visualicen el vídeo hasta que se ha descargado
completamente. Si se trata de un vídeo largo, esta solución no es válida para el usuario.
Por este motivo, se utiliza una solución alternativa para incluir vídeos Flash en las páginas
HTML: el uso de la etiqueta . Aunque esta solución funciona correctamente, no se trata
de una solución válida desde el punto de vista del estándar de XHTML, por lo que las páginas que
incluyan esta solución no pasarán correctamente el proceso de validación.
Embeber objetos
Atributos comunes básicos, i18n y eventos
Atributos
específicos
▪ src = «url» – Indica la URL del archivo u objeto que se incluye en la página
▪ type = «tipo_de_contenido» – Indica el tipo de contenido del objeto (flash,
quicktime, java, etc.)
▪ height = «unidad_de_medida» – Indica la altura con la que se debe mostrar el
objeto
▪ width = «unidad_de_medida» – Indica la anchura con la que se debe mostrar el
objeto
Tipo de elemento Bloque
Descripción Se emplea para embeber objetos en los documentos.
Imágenes
Las imágenes son uno de los elementos más importantes de las páginas web. De hecho,
prácticamente todas las páginas web contienen alguna imagen y la mayoría incluyen decenas de
imágenes. Dentro de las imágenes que se pueden incluir en una página HTML se deben distinguir
dos tipos: las imágenes de contenido y las imágenes de adorno.
Las imágenes de contenido son las que proporcionan información y complementan la
información textual. Las imágenes de adorno son las que se utilizan para hacer bordes
redondeados, para mostrar pequeños iconos en las listas de elementos, para mostrar fondos de
página, etc. Las imágenes de contenido se incluyen directamente en el código HTML mediante la
etiqueta <img> y las imágenes de adorno no se deberían incluir en el código HTML, sino que
deberían emplearse hojas de estilos CSS para mostrarlas.
A continuación se muestra la definición de la etiqueta <img>, utilizada para incluir las imágenes
en las páginas HTML:
<img> Imagen
Atributos comunes básicos, i18n y eventos
Atributos
específicos
▪ src = «url» – Indica la URL de la imagen que se muestra
▪ alt = «texto» – Descripción corta de la imagen
▪ longdesc = «url» – Indica una URL en la que puede encontrarse una descripción
más detallada de la imagen
▪ name = «texto» – Nombre del elemento imagen
▪ height = «unidad_de_medida» – Indica la altura con la que se debe mostrar la
imagen (no es obligatorio que coincida con la altura original de la imagen)
▪ width = «unidad_de_medida» – Indica la anchura con la que se debe mostrar la
imagen (no es obligatorio que coincida con la anchura original de la imagen)
Tipo de elemento En línea y etiqueta vacía
Descripción Se emplea para incluir imágenes en los documentos
Los dos atributos requeridos son src y alt. El atributo src es similar al atributo href de los
enlaces, ya que establece la URL de la imagen que se va a mostrar en la página. Las URL
indicadas pueden ser absolutas o relativas. El atributo alt permite describir el contenido de la
imagen mediante un texto breve. Las descripciones deben tener una longitud inferior a 1024
caracteres y son útiles para las personas y dispositivos discapacitados que no pueden acceder a
las imágenes.
ejemplo:
<img src=»logotipo.gif» alt=»Logotipo de Mi Sitio» />
Como <img> es una etiqueta vacía, no tiene etiqueta de cierre. No obstante, para que la página
XHTML sea válida, todas las etiquetas deben estar cerradas. Como ya se explicó anteriormente,
para cerrar una etiqueta vacía se incluyen los caracteres /> al final de la etiqueta.
HTML no impone ninguna restricción sobre el formato gráfico que se puede utilizar en las
imágenes, por lo que en principio la etiqueta <img> puede incluir cualquier formato gráfico
existente. Sin embargo, si la imagen utiliza un formato poco habitual, todos o algunos
navegadores no serán capaces de mostrar esa imagen.
La recomendación es utilizar uno de los tres siguientes formatos gráficos que entienden todos
los navegadores modernos: GIF, JPG y PNG. El formato PNG presenta el inconveniente de que los
navegadores obsoletos como Internet Explorer 6 no muestran correctamente las imágenes con
transparencias de 24 bits.
El atributo longdesc no se utiliza de forma habitual, pero permite indicar la URL en la que se
puede encontrar más información sobre la imagen. Como el atributo alt sólo permite incluir
descripciones de hasta 1024 caracteres, el atributo longdesc se emplea con las imágenes
complejas que necesitan mucha información para ser descritas:
<img src=»/imagenes/proyecto1.png» alt=»Imagen del Proyecto 1″ longdesc=»/portfolio/
proyecto1.html» />
<img src=»/imagenes/proyecto2.jpg» alt=»Imagen del Proyecto 2″
longdesc=»/mas_informacion.html» />
En el ejemplo anterior, las dos imágenes se encuentran en el mismo directorio del servidor
(/imagenes/). Se trata de una estrategia habitual en la mayoría de sitios web: guardar todas las
imágenes de contenido en un directorio especial independiente del resto de contenidos HTML.
Además, el directorio siempre suele llamarse de la misma manera: «imagenes» o «images» en
inglés.
Los atributos width y height se utilizan para indicar la anchura y altura con la que se muestran
las imágenes, por lo que son los más contradictorios. Como ya se ha comentado, HTML
estructura de forma correcta los contenidos de la página y CSS define el aspecto gráfico con el
que se muestran los contenidos. En principio, la anchura y la altura con la que se muestra una
imagen es parte de su aspecto gráfico, por lo que debería ser propio de CSS y no de XHTML.
Sin embargo, en la práctica no es viable establecer la anchura y altura de todas las imágenes de
contenidos mediante CSS. Si el sitio web dispone de muchas imágenes, la sobrecarga de estilos
diferentes que debería definir CSS sería contraproducente. Por este motivo, los atributos width y
height son la excepción a la norma de que el código HTML no haga referencia al aspecto de los
contenidos.
<img src=»/imagenes/foto1.jpg» alt=»Fotografía de un paisaje» width=»200″ height=»350″
/>
<img src=»/imagenes/foto2.jpg» alt=»Fotografía de un atardecer en la playa» width=»330″
height=»220″ />
Si el valor del atributo width o height se indica mediante un número entero, el navegador
supone que hace referencia a la unidad de medida píxel. Por tanto, en el ejemplo anterior, la
primera foto se muestra con una anchura de 200 píxel y una altura de 350 píxel.
También es posible indicar la anchura y altura en forma de porcentaje. En este caso, el
porcentaje hace referencia a la altura/anchura del elemento en el que está contenida la imagen.
Si la imagen no se encuentra dentro de ningún otro elemento, hace referencia a la anchura/
altura total de la página.
Aplicaciones
HTML5 está aquí, y la Web nunca será la misma.
No cabe duda que ya ha escuchado esto antes, o algo parecido. Supongo que cuando lo hizo, se entusiasmó, se le desorbitaron los ojos o enuncio las palabras «¿por qué?» mientras arqueaba la ceja ligeramente. Tal vez su reacción fue una mezcla de los tres.
No le culpo por cualquiera de estos. HTML5 es emocionante y tiene el potencial de cambiar la Web tal como la conocemos, pero también le atribuyen demasiadas cosas. Lo que es más, su verdadero significado puede ser difícil. Yo he experimentado cada una de esas reacciones en carne propia durante la creación de aplicaciones con HTML5. Es un tema muy amplio, así que si entender HTML5 es difícil, también lo es saber por donde empezar con esta nueva y emocionante serie de tecnologías.
Si usted está emocionado acerca de HTML5, quiero ayudarle a convertir esa excitación en ideas que puede poner en práctica inmediatamente. Si usted es escéptico, quiero ayudarle a entender por qué es importante el HTML5. Y si sólo está confundido sobre el significado de HTML5, no temais esa es nuestra primera parada en esta serie.
¿Qué es HTML5?
Para ahora ya habrá descubierto que HTML5 significa diferentes cosas para diferentes personas. Para algunos, sólo significa nuevas etiquetas como <header>y <footer>y un puñado de nuevos atributos disponibles en el marcado. Para otros, significa todo lo que es nuevo e interesante en la Web, incluidas las tecnologías aplicadas en tan sólo un navegador u otras especificaciones no oficialmente parte de HTML5. El estar seguros de entender el verdadero significado de HTML5 es a menudo la primera barricada que muchos de nosotros enfrentamos.
Y, honestamente, está justificado hasta cierto punto por el número de distintas definiciones. ¡HTML5 es enorme! De acuerdo con la definición formal de un organismo internacional de normalización conocido como World Wide Web Consortium (W3C), HTML5 consta de más de 100 especificaciones que se relacionan con la próxima generación de tecnologías de la Web. Poniendo todas las más de 100 especificaciones del HTML5, se podría argumentar que el W3C simplificó demasiado las cosas. Y si bien es difícil tomar algo tan amplio como HTML5 y definirlo en forma inequívoca, creo que el W3C está tratando de hacer frente a la magnitud de lo que está cambiando en la web introduciendo HTML5 como un concepto unificador de ese cambio.
De hecho, HTML5 es un término genérico para describir un conjunto de especificaciones HTML, CSS y Javascript diseñado para permitir a los programadores crear la próxima generación de aplicaciones y sitios Web. Lo que llama la atención en esa definición son sus tres partes: HTML, CSS y Javascript. Ellos definen cómo utilizan los desarrolladores marcado mejorado con capacidades de estilo más ricas y nuevas APIs de JavaScript para aprovechar al máximo las nuevas características de desarrollo Web. Por decirlo simplemente, HTML5 = HTML + CSS + JavaScript.
Y eso es todo. HTML5 implica cambios en HTML, CSS y Javascript. En lugar de preocuparse por las más de 100 especificaciones, esos tres términos describen la amplitud y el alcance de HTML5. ¿Sigue pensando que es un poco simplista? Probablemente sí, pero como pronto verá, una definición amplia de HTML5 no importa tanto como las tecnologías que elija para dedicarles tiempo y esfuerzo de adopción.
Habiendo dado una definición, pasemos algunos momentos hablando de en dónde encaja Microsoft en el espacio HTML5.
HTML 5 e Internet Explorer
Como mencioné, el conjunto de especificaciones que conforman HTML5 son impulsadas por el W3C. El W3C está formado por funcionarios, organizaciones y particulares que invierten recursos en ayudar a impulsar y definir el futuro de la Web. La WC3 es una organización basada en el consenso y opera habitualmente por formación de comités (llamados grupos de trabajo) para repartir trozos de trabajo sobre especificaciones relacionadas. Las especificaciones pueden ser propuestas por cualquiera de los miembros y todas las especificaciones de la W3C, muchas más especificaciones de las que hay bajo el paraguas de HTML5, se mueven a través de un proceso de cinco etapas desde el primer borrador hasta la recomendación oficial.
Microsoft es miembro del W3C y desempeña un papel muy activo en el proceso de especificación de muchas normas y grupos de trabajo de HTML5. Al igual que todos los proveedores de navegadores principales, Microsoft ha invertido fuertemente en HTML5 y está trabajando con el W3C y otros proveedores para garantizar que los desarrolladores puedan contar con que las tecnologías HTML5 se ejecuten en forma confiable e interoperable en todos los navegadores principales.
En el contexto de Microsoft como proveedor de navegador, el enfoque tiene cuatro vertientes:
- Entregar el mejor sitio listo para HTML5 hoy vía Internet Explorer 9.
- Difundir entre los desarrolladores futuras características vía la Plataforma de vistas previas de Internet Explorer .
- Invertir en interoperabilidad por medio de pruebas presentadas al W3C.
- Hacer prototipos de estándares inestables vía HTML5 labs.
» Site-Ready HTML5″ es el término Microsoft utiliza para describir las tecnologías HTML5 que puede utilizar hoy en día porque cuentan con un amplio soporte en todos los grandes exploradores. Las tecnologías como las nuevas etiquetas de HTML, Cancs, Scalable Vector Graphics, audio y video, geolocalización, almacenamiento Web y muchos de los nuevos módulos CSS3 todos se circunscriben en este espacio y se implementan en Internet Explorer 9, así como la mayoría de los demás navegadores. Invertiremos una buena cantidad de tiempo en esta serie hablando de estas tecnologías, así como la forma en que puede adoptarlos hoy.
Más allá de lo que está disponibles en la actualidad, Microsoft utiliza vistas previas de plataforma pública para informar a los desarrolladores de lo que viene en la próxima versión del navegador, así como para recabar información. Para Internet Explorer 9, Microsoft lanzó la Plataforma de Vistas previas cada seis a ocho semanas, cada vez anunciando nuevas mejoras, características y mejoras en el rendimiento de HTML5 para que los desarrolladores las prueben y evalúen. Internet Explorer 9 fue lanzado en marzo y a comienzos de julio, Microsoft ha lanzado dos Plataforma de Vistas previas para Internet Explorer 10, dando visos de que Microsoft está llevando a cabo una liberación regular de vistas previas de Internet Explorer. Como desarrollador, usted querrá tomar ventaja de las últimas vistas previas para aprender, probar e influenciar cómo evolucionan los navegadores. Puede descargar la última plataforma de vista previa de Internet Explorer en IETestDrive.com.
Con el fin de garantizar que HTML5 trabaja sistemáticamente en todos los navegadores, Microsoft ha invertido fuertemente en la interoperabilidad, creando y presentando el mayor conjunto de casos de prueba relacionados con HTML5 al W3C. Por primera vez, este conjunto de casos de prueba serán utilizados por el W3C como la fuente autorizada de «compatibilidad» con HTML5 de cada navegador. El resultado final para nosotros como desarrolladores es que podemos adoptar y aplicar las tecnologías HTML5 y confiar en que funcionarán sistemáticamente en todos los navegadores. Para obtener más información sobre el trabajo en torno a la interoperabilidad de Microsoft, vaya abit.ly/dxB12S.
Si bien algunas tecnologías HTML5 ya existen en Internet Explorer 9 y otras están siendo anunciadas para Internet Explorer 10 a través de la Plataforma de Vistas Previas de Internet Explorer, algunas especificaciones notables y populares aún necesitan un poco más de trabajo por parte del W3C y los proveedores de exploradores antes de que estén listas para implementarse en nuestras aplicaciones. Un ejemplo de ello es Web Sockets, una emocionante especificación que permite a los desarrolladores abrir canales de comunicación bidireccional con servidores de servicios back-end, lo que permite un nivel de conectividad de «tiempo real» que antes no estaba disponible en aplicaciones Web. Como desarrollador, seguramente imaginará incontables usos de Web Sockets en las aplicaciones que están construyendo ahora mismo. Pero la especificación Web Sockets sigue cambiando a un ritmo acelerado, con aspectos clave qué aún se están moviendo y siendo discutidos en el W3C. Dada esta situación, sería difícil proporcionar esta característica en forma consistente y fiable en todos los navegadores actuales.
Para el caso de especificaciones inestables y en evolución como Web Sockets (que vamos a tratar a profundidad en un artículo futuro), Microsoft creó HTML5 Labs, un sitio para que los desarrolladores experimenten con el proyecto de implementación de estas tecnologías. Este sitio proporciona prototipos que puede descargar y probar localmente, así como demostraciones hospedadas de algunas especificaciones. El objetivo es darle un lugar para probar estas especificaciones por usted mismo para que proporcione tanto a Microsoft como al W3C comentarios sobre estas especificaciones conforme se estabilizan y se acercan a su aplicación en los navegadores. Para obtener más información sobre HTML5 Labs, vaya ahtml5labs.com.
Microsoft vuelve a actualizar su soporte HTML5 con su versión de Actualización de los Estándares Web de Microsoft Visual Studio 2010 SP1 en junio de 2011. Esta extensión, que funciona en todas las ediciones de Visual Studio 2010, incorpora IntelliSense HTML5 y validación al Visual Studio, incluye IntelliSense de JavaScript para las nuevas funciones del explorador como geolocalización y almacenamiento DOM, además de proporcionar CSS3 IntelliSense y validación integrales. Puede descargar esta extensión, que se actualizará periódicamente para dar más herramientas para desarrollo de HTML5 desde bit.ly/m7OB13.
En el caso de Expression Web 4 SP1, configurar el esquema HTML5 desde Herramientas | Opciones de Página ofrece el mismo IntelliSense y también la herramienta proporciona IntelliSense de CSS3 para varios módulos de CSS3 en proyecto como border-radius, box-shadow, transform y otros parecidos
Si está usando WebMatrix (véase web.ms/WebMatrix ), puede haber notado que todos los nuevos documentos .html, .cshtml o .vbhtml que cree contienen marcado predeterminado similar a lo que aparece en la Figura4. Como discutiré en el próximo artículo de esta serie, se trata de un documento HTML5 básico y válido. En particular, el doctype y las etiquetas meta charset han dejado de ser confusas. Gracias a este sencillo doctype el modo HTML5 se inicia en todos los exploradores modernos y WebMatrix hace que sea más fácil para usted, al proporcionar un documento HTML5 de forma predeterminada.
La Figura 4un documento HTML predeterminado en WebMatrix
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body></body>
</html>
Por si eso no fuera suficiente habrá nuevas herramientas HTML5 para usted a partir de enero de 2011. ASP.NET MVC se unió a la diversión recientemente con la actualización de herramientas ASP.NET MVC 3 anunciado en el MIX11 en abril. Junto con un gran número de otras nuevas herramientas increíbles,la actualización de ASP.NET MVC 3 Tools proporciona la opción de utilizar el doctype HTML5 para nuevos proyectos y los entrega Modernizr 1.7 en la carpeta de Scripts de nuevas aplicaciones. Modernizr es una biblioteca JavaScript que facilita notablemente el desarrollo HTML5 y que discutiré a detalle en un artículo futuro.
Lo interesante aquí es que, aunque HTML5 está emergiendo en nuestros navegadores, el soporte oficial de herramientas está siendo rápidamente añadido y Microsoft incluso está añadiendo soporte para bibliotecas (como Modernizr) de la comunidad. Puede aproximarse a HTML5 con un poco de ayuda de herramientas de Microsoft hoy en día, sabiendo que el soporte HTML5 seguirá creciendo y mejorando con el tiempo.
Por ahora, debe darse cuenta de que HTML5 no es una sola entidad que puede adoptar o migrar de un plumazo. Adoptar HTML5, mas que una elección en conjunto, se trata de hacer una evaluación de las tecnologías una a una y determinar cuáles son las tecnologías adecuadas para su aplicación. Para cada tecnología HTML5 que evaluara, evalúe (por lo menos) los siguientes factores al decidir si la tecnología está lista para adopción.
- ¿Qué tan extendida está la tecnología en los navegadores principales?
- ¿Cómo adoptará esta tecnología y el soporte «polyfill» para navegadores que no soportan una característica específica?
El primer factor es el más importante y cuando se combina con un entendimiento de los navegadores más usados por los visitantes de su sitio, deberían darle una idea clara de que subconjunto de las más de100 especificaciones vale la pena evaluar a fondo. Este subconjunto debería consistir de un conjunto de especificaciones estable que pueda adoptar hoy para sus usuarios en forma confiable.
Sin embargo, incluso con ese conjunto estable de tecnologías HTML5, no debe ignorar a los usuarios que no han actualizado a un nuevo explorador. Si usted está involucrado en el desarrollo cotidiano de su sitio web, tiene sin duda una idea aproximada de los porcentajes de usuarios que visitan su sitio con cierto navegador. Para la mayoría de nosotros, sería fácil notar el porcentaje de usuarios que visitan con un navegador más antiguo y llegar a la conclusión de que la adopción de tecnologías HTML5 afectarían negativamente los usuarios. Afortunadamente existe «polyfilling» para salvarnos de esperar hasta una fecha indeterminada en el futuro para adoptar HTML5.
Paul Irlandesa (un desarrollador de los proyectos jQuery y Modernizr) define un polyfill como «… una corrección que imita una futura API, proporcionando funcionalidad anterior para navegadores antiguos.» Un polyfill es como yeso para sus sitios Web;, es una manera de determinar si una cierta característica HTML5 está disponible para el usuario que se encuentra navegando por su sitio y proporcionar una corrección que «llena» ese soporte o una forma de degradar con gracia que le permite a su sitio seguir funcionando del todo.
La biblioteca más popular asociada con polyfilling es Modernizr, la biblioteca JavaScript que mencioné anteriormente. Modernizr ofrece algunos polyfills básicas para marcado semántico, detección de características para las tecnologías HTML5 de mayor importancia y soporte condicional de CSS basado en características compatibles. Como se ha señalado, Modernizr será objeto de un próximo artículo, de hecho ocupará un lugar prominente (junto con muchos otras bibliotecas polyfilling) lo largo de esta serie. Para obtener más información, descargue Modernizr en modernizr.com.
A la hora de elegir qué tecnologías adoptar, la lista final puede ser una combinación de especificaciones con soporte amplio y otras especificaciones para las que tendrá que usar polyfill para soporte para ciertos navegadores. Sólo usted conocerá la composición exacta de la lista en función de sus necesidades actuales y el contexto.
En los próximos meses, comentaré sobre varias especificaciones importantes, desde geolocalización y formularios y lienzo, hasta Web Workers, Web Sockets e IndexedDB. Algunos de estos ya tienen un soporte amplio y están «listas para el sitio», mientras que otros, como Web Sockets, son demasiado innovadores para ignorarlos, independientemente de dónde se encuentran hoy en día. Con cada especificación, discutiré el soporte actual y futuro conocido, algunos conceptos básicos acerca de cómo implementar las características de la especificación en sus sitios y cómo soportar con polyfill los navegadores que no soportan una característica dada.
Si desea saber más sobre HTML5 hoy, le sugiero que lea un par de libros sobre el tema. En particular, recomiendo «Introducción a HTML5» (New Riders, 2010) por Bruce lawson y Remy Sharp y «Funcionamiento de HTML5» (O’Reilly Media, 2010) de Mark Pilgrim. También, asegúrese de visitar W3C.org en relación con la información actualizada sobre todas las especificaciones, así comoBeautyoftheWeb.com y IETestDrive.com para descargar Internet la Plataforma de Vista Previa de Explorer 9 e Internet Explorer 10, respectivamente y aprender más acerca de las grandes experiencias HTML5 que Microsoft está entregando a través del navegador.
Por encima de todo, empiece a adoptar HTML5 hoy. La Web nunca será la misma, de verdad, y usted puede ser parte del catalizador con el fin de construir las siguientes grandes aplicaciones Web utilizando HTML5.
INSTITUTO TECNOLÓGICO DE APIZACO 