HTML5 y CSS3

Domine los estndares de las aplicaciones Web

Luc VAN LANCKER

Resumen
Este libro sobre HTML5 y CSS3 se dirige a todos aquellos lectores que quieran desarrollar, implementar o mantener un sitio Web. En efecto, para comenzar y, sobre todo, para progresar en el diseo de sitios Web es necesario comprender y dominar bien el cdigo fuente de las aplicaciones Web. El libro se ha concebido como una verdadera herramienta de informacin, pedaggico desde la primera hasta la ltima pgina, ilustrado abundantemente con ejemplos y capturas de pantalla, pensando siempre en su aplicacin prctica por parte del Webmaster. De este modo se repasa el lenguaje HTML (teniendo en cuenta su ltima versin, llena de novedades), las hojas de estilo, incluyendo el espectacular avance que supone el estndar CSS3 en trminos de presentacin de pginas Web y algunos elementos de JavaScript Esta obra no es una enciclopedia exhaustiva de todas estas tcnicas sino un recorrido estructurado sobre ellas. Proporcionar tanto a los diseadores principiantes como a los ms experimentados las reglas rigurosas y esenciales del diseo profesional de un sitio Web. Por ello, el autor nos anima a elaborar un cdigo respetuoso con las prescripciones del W3C y a separar el contenido (HTML) y la presentacin (hojas de estilo CSS) tal y como recomienda, ahora ms que nunca, el estndar HTML5. Muchas de las novedades abordadas en este libro slo estn disponibles en las versiones ms recientes de los navegadores (Internet Explorer 9, Firefox 3.6 y 4, Google Chrome o Safari); por ello el autor ha prestado especial atencin a la hora de elaborar un cdigo compatible con los navegadores menos evolucionados y aprovechar desde ya este paso tan importante en el diseo de aplicaciones Web. Los muchos ejemplos del libro estn disponibles para su descarga en la pgina Web de Ediciones ENI (www.ediciones-eni.com). Para todos aquellos lectores que quieran reproducir los ejemplos del libro de forma idntica, las imgenes y el resto de elementos complementarios estn a su disposicin.

Prlogo
Escribir este libro sobre Html5 y CSS3 ha sido una empresa muy motivante. Html no haba conocido ninguna evolucin importante desde 1998, con Html 4.0. Toda una eternidad, si lo medimos en la escala de tiempo con que se ha desarrollado la Web e Internet! Es importante evaluar las evoluciones y aportaciones de esta nueva versin del lenguaje que supone la base de esta herramienta cotidiana, la Web. Por otro lado, las hojas de estilo CSS3 suponen un avance verdadero a nivel de la representacin grfica de las pginas con, por ejemplo, bordes redondeados, transparencia de imgenes, sombras o tipografa especial. Este libro sobre Html5 y hojas de estilo CSS3 quiere ser ante todo un libro estructurado y formativo, ms que un repaso exhaustivo de las novedades aportadas por ambas tecnologas. Est dirigido a dos pblicos diferenciados:

Aquellas personas que comiencen podrn aprehender las bases del lenguaje fuente de las pginas de la red, a lo largo de los captulos, gracias a los numerosos ejemplos completos e ilustrados, mediante capturas de pantalla, y a la posibilidad de visualizarlos en su propia pantalla de ordenador, gracias al material de descarga suplementario a este libro. Estas personas podrn a su vez afianzar su aprendizaje respecto al diseo de pginas Web basndose en la ltima versin de Html que, a da de hoy, ya est operacional en numerosos navegadores de ltima generacin y que ser el estndar en los aos que vienen. Este libro est tambin dirigido a aquellos diseadores familiarizados con Html y que deseen descubrir las aportaciones y novedades de Html5 y de CSS3. Las diferencias respecto a Html 4.0, en ocasiones sutiles pero determinantes, aparecen resaltadas a lo largo de todo el libro. Ellos podrn descubrir las novedades reales de Html5 gracias a los captulos dedicados a los nuevos campos de formularios, el diseo 2D, las nuevas etiquetas de audio y de vdeo y la introduccin de JavaScript con, por ejemplo, la informacin de geolocalizacin del usuario. El captulo dedicado a CSS3 les convencer de la revolucin que todo esto puede suponer en el diseo de sus pginas Web, librndoles del paso obligado por programas de edicin grfica.

Este libro supone tambin un punto de inflexin en los aspectos relacionados con el aprendizaje del cdigo fuente de las pginas de la red. En efecto, Html5 hace tabula rasa de todos los aspectos relacionados con la presentacin para dedicarse exclusivamente a la estructura del documento. Ya no es posible por tanto en Html5 alinear un texto o algn otro elemento, o modificar el diseo de los bordes de una tabla. Se termina tambin la definicin de color del texto o del fondo. A partir de ahora Html5 se declina de forma austera, en blanco y negro! Todos los elementos de presentacin deben incluirse obligatoriamente en hojas de estilo. Por consiguiente, ya no es posible plantear un aprendizaje de forma tradicional, con una primera parte dedicada exclusivamente a Html y una segunda parte diferenciada para las hojas de estilo. Ambos elementos estn ahora ntimamente enlazados. Por este motivo nos ha parecido til, e incluso indispensable, introducir desde el aprendizaje de Html algunos elementos bsicos relativos a las hojas de estilo. Esto permite al alumno disear sus primeras aplicaciones de forma ms realista y atractiva.

Profundicemos en el detalle de los captulos. La parte sobre Html comienza con los elementos bsicos y tradicionales del aprendizaje del cdigo fuente. Html5 es, en primer lugar, la evolucin de Html 4.0. Sigue siendo, por tanto, un lenguaje etiquetado. Los primeros elementos de un aprendizaje progresivo conciernen al texto, la estructuracin del documento con ttulos y listas, las tablas, las imgenes y su insercin, sin olvidar el elemento esencial del lenguaje Html: los enlaces. A continuacin, una serie de captulos abordan las novedades introducidas por Html5.

Las nuevas etiquetas semnticas, que permiten organizar el cdigo fuente de las aplicaciones para asegurar una mejor legibilidad. Hay que reconocer que los formularios tradicionales compuestos por campos o zonas de texto, botones de radio, de multiseleccin u otros botones diversos entraaban un hasto en el aspecto visual de la pgina. Las mejoras de Html5 a este respecto van a revolucionar los formularios con la introduccin de campos de texto con sugerencias, calendarios, contadores numricos, cursores, validaciones integradas sin tener que pasar por JavaScript y muchas otras sorpresas que se descubren en el captulo dedicado a ellos. Las nuevas etiquetas de audio y vdeo permiten a partir de ahora leer de forma nativa archivos multimedia sin tener que pasar por plugins diversos, que a menudo son fuente de complicaciones. El diseo 2D abre nuevas perspectivas puesto que en adelante es posible, por ejemplo, agregar grficos directamente mediante cdigo, sin tener que pasar por capturas de pantallas de programas como Excel. Por ltimo, es preciso subrayar que Html5 supone la introduccin de JavaScript como actor privilegiado en la concepcin de aplicaciones Web. Este ltimo punto aparece ilustrado por la geolocalizacin del internauta.

Sigamos con la parte dedicada a las hojas de estilo CSS. En un aprendizaje progresivo y estructurado ya no es posible ignorar los estndares CSS1 y CSS2, elementales en adelante. Se dedican varios captulos a las hojas de estilo relativas a los tipos de fuente, al texto, a las listas y las tablas, al color, a los mrgenes interiores y exteriores, a las pseudo-clases y a las hojas de estilo relativas a la visualizacin o al diseo de impresin. Esta parte finaliza con las especificaciones CSS3 que van a modificar profundamente el aspecto visual de la navegacin por la red. Este captulo no dejar de interesar a aquellos que, de cerca o de lejos, trabajen con conceptos relacionados con el aspecto grfico de los sitios Web. Entre las principales aportaciones de estas hojas de estilo CSS3 podemos citar:

Bordes redondeados, que permiten escapar de la presentacin rectangular y angular de las divisiones. Sombras, que es posible aplicar al texto o a las imgenes sin tener que pasar por una aplicacin grfica. Tipos de letra que el diseador podr, al fin, seleccionar libremente, marcando un antes y un despus en el uso tan esperado de la tipografa en el diseo de las pginas Web. Presentacin de contenido textual en columnas. Bordes decorados. Mltiples fondos.

Degradaciones de color. Posibilidad de jugar con la opacidad o la transparencia de elementos como las imgenes.

Este libro es sin duda una obra densa, aunque se presenta con un lenguaje que hemos querido hacer claro, formativo y pedaggico. Como autor he de reconocer que he disfrutado enormemente escribiendo este libro sobre Html5 y CSS3. Deseo profundamente compartir este placer con todos los lectores.

Breve historia de Html5

Comenzamos esta historia en 1998 con la finalizacin de la especificacin Html 4.0. Dejando a parte una ligera revisin en 1999 con Html 4.01, no ha habido nada nuevo en el horizonte de este primer lenguaje Web. El W3C (World Wide Web Consortium), organismo que gestiona los estndares de escritura en la red, no anunci en su momento que Html, en su versin 4.0, no conocera ningn desarrollo posterior y, en breve, que Html estaba muerto? El W3C edit, tambin en 1998, el estndar XML (eXtensible Markup Language o, en castellano, lenguaje de marcas extensible) para gestionar de forma estructurada los datos de tipo texto, donde el aspecto extensible del lenguaje permita al usuario definir su propio lenguaje (comportndose como un metalenguaje) con sus distintos elementos. El W3C recomendaba encarecidamente en la poca XML para expresar lenguajes de marcado especfico. Una de las primeras aplicaciones concretas de XML fue la reformulacin de Html 4.0 segn la sintaxis estricta y formalista de XML. Naca as Xhtml 1.0 en el ao 2000. Si bien los desarrolladores saludaron unnimemente el rigor que Xhtml aportaba a la escritura de cdigo, es justo sealar que la migracin a Xhtml no ha supuesto el xito esperado e incluso una gran parte de los diseadores han permanecido fieles a Html 4.0, ms laxo. Muy rpidamente, el W3C puso en marcha el ambicioso proyecto de Xhtml 2.0 que deba suponer un punto y aparte respecto al pasado en materia de publicacin en la red. Esta posicin indujo a que Xhtml 2.0 no fuera compatible hacia atrs con todo lo que exista hasta la poca, y por consiguiente con Html. Esta ausencia de compatibilidad supuso un cierto descontento por parte de los fabricantes de software que desarrollaban los navegadores. Todo ello tuvo como consecuencia la creacin de un grupo disidente, el WHATWG (Web Hypertext Application Technology Working Group). Este grupo de trabajo naci como respuesta a la lentitud del desarrollo de estndares por parte de W3C y al carcter demasiado cerrado de su proceso interno de elaboracin de especificaciones. En sus orgenes estaba compuesto por representantes de firmas como Mozilla, Opera y Apple con sus conocidos navegadores Firefox, Opera y Safari. Google no tard en unirse a ellos. Su posicin era diametralmente opuesta a la de Xhtml 2.0, trabajando de forma pragmtica sobre la base de las implementaciones actuales y, por tanto, sobre la base de Html 4.0. Sus primeros esfuerzos se centraron en los Web Forms 2.0 para renovar los formularios y en el concepto de publicacin en la web basado en Web Apps 1.0, es decir aplicaciones Web. Paralelamente Xhtml 2.0, incluso tras un borrador (working draft) que aparece en julio de 2006, conoce un desarrollo particularmente laborioso y los rumores muestran numerosas disensiones en el seno de este grupo de trabajo. Por otro lado, los navegadores antes citados ignoraron deliberadamente a Xhtml 2.0.

Pareca claro que Xhtml 2.0 tena graves problemas. Sir Tim Berners-Lee, inventor de la Web y presidente del W3C, decide, a finales de 2006, reabrir un grupo de trabajo sobre Html que, de forma pragmtica, retome la labor realizada por WHATWG. De este modo ha existido durante todo este tiempo un equipo de trabajo sobre Xhtml 2.0 y otro sobre Html5. Este ltimo public el 23 de enero de 2008 un primer borrador de trabajo que despus ha sufrido numerosas evoluciones. Pero los das de Xhtml 2.0 estaban contados. A finales de 2009, el mismo Sir Tim BernersLee anuncia la disolucin del grupo de trabajo sobre Xhtml 2.0 y el abandono definitivo de este ltimo. Se anuncia la versin candidate recommendation (recomendacin candidata) de Html5 para 2012 y, dada la amplitud de novedades anunciadas, la recomendacin final para... 2022. El anuncio de Html5 ha causado un gran revuelo (un buzz en el vocabulario moderno). Este inters se ha concretizado rpidamente a diversos niveles. Google ha incorporado muy rpidamente, desde la versin 5 de Chrome, elementos de Html5. Tambin lo han hecho sus compaeros en el WHATWG con las ltimas versiones de Firefox, Safari y Opera. Incluso Microsoft, a menudo rezagado en materia de adopcin de novedades y estndares, ha incorporado Html5 en la versin 9 de Internet Explorer. Por su lado, los telfonos smartphone tambin estn adoptando el estndar Html5: Apple con el iPhone, RIM con BlackBerry, Google con Google Phone, etc. Se trata de una evolucin o de una revolucin? De forma paralela est en curso toda una reformulacin de Html5 segn las reglas y la sintaxis de XML, bajo el nombre de Xhtml5. De toda esta agitada actividad en torno a la gestacin de Html5 nos quedaremos con:

Que ya no se hablar de pginas Web sino del concepto ms amplio de aplicaciones Web. Que Html5 es una evolucin (en efecto muy importante) de Html 4.0. Que Html5 ha sido concebido directamente por los navegadores ms innovadores del mercado como Firefox, Safari Opera y Google. Esto garantiza una adopcin rpida de los estndares de Html5. Que cabe esperar de Html5 grandes cambios en la elaboracin de formularios (vase los Web Forms 2.0). Que despus de una dcada sin novedades, Html5 responde a la necesidad real de los diseadores de renovar la interfaz de las aplicaciones Web.

Lneas maestras de Html5

Antes de detallar las novedades de Html5, esbocemos algunas de las lneas maestras de esta nueva versin del lenguaje Html.

Html5 es una evolucin de Html. Retoma los grandes principios, y los modifica para mejorar ciertos aspectos. Ha sido diseado para asegurar una compatibilidad hacia atrs con todo lo que se ha desarrollado hasta el presente, en trminos de publicacin sobre la Web. A pesar de que el cdigo es menos formal que Xhtml5, la exigencia de un cdigo propio, respetuoso con las reglas fundamentales del etiquetado, contina existiendo.

El principio de separacin entre el contenido y la presentacin sigue siendo conveniente e incluso se ve reforzado. El abandono de toda una serie de etiquetas y de atributos de presentacin (vase Etiquetas y atributos Html 4.0 desaparecidos de este captulo) es la mejor prueba de ello. Las hojas de estilo CSS son elementos inseparables de Html5. Se espera que, aprovechando la mayor potencia que proporcionan las nuevas hojas de estilo CSS3, la interfaz de usuario se transforme por completo en los prximos aos. La simplificacin del cdigo y el deseo de evitar cualquier complicacin intil son dos de los principios que han regido la elaboracin de Html5. Encontraremos esta simplificacin y pragmatismo, por ejemplo, en un tipo de documento doctype nuevo y simplificado, o en el cdigo Html despojado de cualquier aspecto de presentacin.

La caza de plugins que enturbian el cdigo y complican la tarea de los diseadores, sustituidos por una integracin directa en el navegador. Las nuevas etiquetas de audio y de vdeo son un buen ejemplo. El reconocimiento de JavaScript como socio de Html5 a la hora de la publicacin en la red. Tambin de los scripts clsicos usados a la hora de verificar la introduccin correcta de datos o la validez de una direccin de correo electrnico en los formularios. Html5 evita estas codificaciones, redundantes, haciendo que los navegadores incluyan de forma nativa este tipo de funciones. Otro ejemplo es el cdigo para el diseo 2D y muy pronto 3D (etiqueta <canvas>), mucho ms prximo a JavaScript que a un lenguaje etiquetado. Html5 se convierte a su vez en una plataforma de interfaces de aplicacin (APIs) que integran funcionalidades complejas como la geolocalizacin, la edicin en lnea o las acciones de tipo deslizar-soltar (drag/drop).

Las novedades de Html5

Las novedades de Html5 y sobretodo del trinomio conceptual "Html5 + CSS3 + aplicaciones JavaScript" son numerosas. Html5

Un nuevo doctype simplificado y unificado. Supresin de etiquetas y atributos de presentacin. Nuevas etiquetas semnticas o de organizacin. Nuevas etiquetas de audio y de vdeo que ya no necesitan ms plugins dedicados. Diseo 2D y muy pronto 3D gracias a la nueva etiqueta <canvas>. Profusin de formularios innovadores como por ejemplo cursores o calendarios, y la integracin de forma nativa en los navegadores de la validacin de datos. Etc.

El objetivo principal de este libro es el estudio detallado de la herencia de Html 4.0 y de las novedades de Html5. Hay que destacar que este ltimo ya est implementado en los navegadores de ltima generacin. La implantacin actual de Html5 ya nos permite descubrirlo y utilizarlo. Ser preciso no obstante sealar que la integracin de Html5 no es del todo completa an. Todava se esperan nuevos aportes, en particular para todo lo relacionado con los formularios. CSS3

Nuevos selectores. Bordes redondeados. Bordes decorados. Tipos de letra personalizados que permitirn a la tipografa encontrar, por fin, su sitio en las interfaces Web. Presentacin de un texto en varias columnas. Sombras aplicadas al texto y al resto de elementos. Degradados de color. Mltiples fondos. Opacidad o transparencia. Transformaciones. Transiciones (sin JavaScript).

Estas nuevas especificaciones CSS3 ya estn disponibles en las versiones ms recientes de los navegadores y, en particular, en los navegadores de nuestro estudio (vase la seccin "Los navegadores de nuestro estudio" en este captulo). No cabe duda de que CSS3 va a revolucionar la forma de disear y de explotar las interfaces Web en los prximos meses y aos. Las aplicaciones JsAPI

La geolocalizacin permite localizar al usuario (con su permiso) mediante coordenadas de longitud y latitud. Las sper cookies con Web Storage permiten guardar una cantidad mayor de datos en el navegador. Posibilidad de utilizar aplicaciones Web en modo sin conexin tras cachear los recursos necesarios. Nuevos elementos Workers que permiten ejecutar tareas de fondo en paralelo con el programa JavaScript en un entorno totalmente separado de la pgina. Nuevos elementos Websockets que permiten establecer una comunicacin bidireccional asncrona entre el navegador y el servidor. Opcin deslizar-soltar (drag/drop) de forma nativa en el navegador. El atributo ContentEditable habilita la edicin en lnea del contenido de un elemento. Da la apariencia de un editor WYSIWYG bsico que permite de este modo editar directamente el contenido en la pgina. Todas las modificaciones realizadas por el usuario se podrn procesar al finalizar la edicin. Etc.

Estas aplicaciones sobrepasan de largo el marco de este libro dedicado al aprendizaje de Html5. Algunas ya estn implementadas en los navegadores ms recientes, otras no. Hablaremos no obstante brevemente de la geolocalizacin en un captulo, debido a su apariencia espectacular e intrigante. Algunas de estas funciones ya estn resueltas en frameworks JavaScript como Dojo y jQuery.

Html5 es un lenguaje de etiquetas

Digno sucesor de las versiones precedentes de Html, y de Html 4.0 en particular, Html5 sigue siendo un lenguaje de etiquetas.

1. Etiquetas
Las etiquetas, tambin llamadas elementos, son comandos interpretados por los navegadores e informados entre los signos menor que (<) y mayor que (>). De este modo una etiqueta se escribe <etiqueta>. Por regla general, a toda etiqueta de apertura le corresponde una etiqueta de cierre que marca el final del comando indicado por la etiqueta de apertura. La etiqueta de cierre retoma el mismo enunciado que la etiqueta de apertura, aunque precedida por una barra oblicua (/). De este modo a la etiqueta de apertura <etiqueta> le corresponde la etiqueta de cierre </etiqueta>. La sintaxis de una etiqueta es por tanto:
<etiqueta> ... </etiqueta>

Para comprender el modo de funcionamiento de las etiquetas, se propone el texto siguiente: Es <negrita>importante</negrita> aprender el lenguaje <cursiva>Html5</cursiva>! Esto puede interpretarse de la siguiente manera:

escribir "Es" de forma normal, puesto que no se ha especificado nada, a continuacin escribir la palabra (nicamente esta palabra) "importante" y ponerla en negrita, retomar la escritura normal para "aprender el lenguaje", escribir esta vez la palabra "Html5" en cursiva, y terminar por "!" en escritura normal.

Esto dara el resultado siguiente: Es importante aprender el lenguaje Html5! El lenguaje Html no es ni ms ni menos que esto. Cada vez que se indica una instruccin al navegador, por ejemplo insertar un ttulo, empezar a escribir una tabla o realizar un vnculo a otra pgina, se aplica una etiqueta de apertura. La etiqueta de cierre seala al navegador que la instruccin se ha terminado. Existe no obstante una excepcin, pues Html5 ha heredado de Html las etiquetas nicas, tambin llamadas etiquetas vacas, que no tienen etiqueta de cierre. Por ejemplo, la etiqueta imagen <img>.

Para asegurar la compatibilidad hacia atrs con Xhtml, estas etiquetas tambin pueden escribirse en Html5 con un signo de cierre. De este modo, la etiqueta imagen <img> tambin puede escribirse en Xhtml <img />. El espacio situado antes de la barra oblicua de cierre es importante por motivos de compatibilidad con los navegadores ms antiguos. Algo que nos limita en cierto modo, a nosotros los castellanoparlantes, es el hecho de que las etiquetas hacen referencia a trminos o abreviaturas de trminos anglosajones volvindolas (en un primer momento) abstractas y complejas. Ejemplos <b> <i> <p> <div> <table> <form> <img /> Etc. b por bold que significa negrita i por italic que significa cursiva p por paragraph que significa prrafo div por division que significa... divisin table significa tabla form significa formulario img para imagen

2. Atributos de etiqueta
En ocasiones es preciso completar una instruccin con especificaciones ms precisas en uno u otro dominio. Para hacer esto, el lenguaje Html5 dispone de los atributos de etiqueta. El atributo se inserta en la etiqueta, entre la palabra de instruccin y el signo > final. La sintaxis completa de una etiqueta con un atributo es: <etiqueta atributo="valor"> ... </etiqueta> El atributo contiene siempre un valor, que se indica de forma complementaria al atributo mediante el signo igual (=) seguido del valor escrito entre comillas. El respeto estricto a la sintaxis exige que no exista espacio antes o despus del signo igual. Es posible usar varios atributos, separados por espacio, en una misma etiqueta: <etiqueta atributo1="valor" atributo2="valor"> ... </etiqueta>.

Uso correcto de las etiquetas

He aqu algunas reglas simples que ser preciso respetar a la hora de escribir etiquetas Html5.

En Html5, las etiquetas no son sensibles a las maysculas o minsculas. De este modo es indiferente escribir <ETIQUETA>, <Etiqueta> o <etiqueta>. Algunos vern en la escritura con maysculas un medio eficaz para distinguir el cdigo Html del contenido del documento. No obstante, el uso generalizado escribe las etiquetas con minsculas (como en Xhtml). La regla general exige que toda etiqueta abierta <etiqueta> se cierre </etiqueta>. La libertad que se adquiri en la escritura de Html 3.2 a causa del funcionamiento ms o menos permisivo de los navegadores ya no est de actualidad. El rigor aportado por Html 4.0 estricto y Xhtml 1.0 debe seguir guiando su escritura. Las etiquetas deben enlazarse correctamente. Cuando se aplican varias etiquetas a un elemento, el orden de cierre de stas es esencial. La primera etiqueta de cierre debe corresponder con la ltima etiqueta de apertura que no haya sido cerrada. El siguiente ejemplo resultar ms claro: Es correcto: <a><b><c>contenido</c></b></a>. Es incorrecto: <a><b><c>contenido</a></c></b>.

Los valores de los atributos deben informarse siempre entre comillas. Aqu tambin sigue siendo necesario el rigor en el cdigo.

Etiquetas y atributos Html 4.0 desaparecidos

Las diferencias, tanto a nivel de etiquetas como de atributos, respecto a Html 4.0 son numerosas e importantes.

1. A nivel de etiquetas
Destacamos en primer lugar la desaparicin por completo de los cuadros. Las etiquetas <frame>, <frameset> y <noframes> han desaparecido definitivamente de las herramientas a disposicin de los diseadores. Esto no es ninguna sorpresa puesto que estaban deprecados desde hace varios aos. Los programadores profesionales los evitaban como la peste despus de que Google anunciara a los Webmasters que no garantizaba una indexacin correcta de los sitios web que incluyeran cuadros. La etiqueta <iframe> como tal subsiste en Html5. Tambin se produce la desaparicin de ciertas etiquetas de presentacin como <big>, <center>, <font>, <strike>, <tt> y <u>. Tambin en este caso no hay grandes sorpresas puesto que el principio de separacin entre contenido y presentacin ya est bien establecido en el presente. Estas etiquetas de presentacin ahora se toman en cuenta en las hojas de estilo CSS.

2. A nivel de atributos
Html5 apuesta firmemente por el principio de separacin entre contenido y presentacin. Lo que asombra es la cantidad de atributos afectados. En resumen, todos los atributos relativos a la alineacin, la anchura, los fondos (con color o con imagen), los bordes y la numeracin de listas desaparecen. Todos estos atributos deben tomarse en cuenta en las hojas de estilo, que se convierten as en un elemento inseparable del cdigo Html5. De forma ms detallada:

align en las etiquetas <caption>, <iframe>, <img>, <input>, <object>, <legend>, <table>, <hr>, <div>, <hx>, <p>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead> y <tr>. alink, link, text y vlink en la etiqueta <body>. background en la etiqueta <body>. bgcolor en las etiquetas <table>, <tr>, <td>, <th> y <body>. border en las etiquetas <table> y <object>. cellpadding y cellspacing en la etiqueta <table>. frameborder en la etiqueta <iframe>.

height en las etiquetas <td> y <th>. hspace y vspace en las etiquetas <img> y <object>. marginheight y marginwidth en la etiqueta <iframe>. noshade en la etiqueta <hr>. nowrap en las etiquetas <td> y <th>. rules en la etiqueta <table>. size en la etiqueta <hr>. type en las etiquetas <li>, <ol> y <ul>. valign en las etiquetas <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead> y <tr>. width en las etiquetas <hr>, <table>, <td>, <th>, <col>, <colgroup> y <pre>.

As, ya no es posible fijar, en Html5, los bordes, la alineacin, los fondos o el tamao de las tablas sin recurrir a hojas de estilo CSS. Con la desaparicin de los atributos color o bgcolor, Html5 se define en blanco y negro. Esta ausencia completa de atributos de presentacin nos obliga a revisar nuestra estructura de aprendizaje tradicional de Html en la que se estudian por un lado las etiquetas Html y por otro las hojas de estilo CSS. Ahora, ya desde nuestros primeros pasos con Html, nos veremos obligados a incluir nociones elementales de hojas de estilo para la presentacin. Para lograr que los alumnos se ejerciten, por ejemplo, en el aprendizaje de las tablas es imprescindible incluir elementos de hojas de estilo para, al menos, visualizar la tabla con un borde. Un estudio ms pausado y detallado de las propiedades CSS se aborda, como de costumbre, tras haber estudiado las etiquetas de Html5.

Los navegadores de nuestro estudio

Esta tecnologa punta que supone Html5 y las hojas de estilo CSS3 slo se tienen en cuenta en las ltimas versiones de los navegadores. Por otro lado, la integracin de Html5 y de CSS3 es todava parcial, y vara de un navegador a otro. Por este motivo es preciso escoger para nuestro estudio los principales actores de esta innovadora tecnologa para asegurar una vista de conjunto de los aportes ms importantes que afectan, o afectarn, a la edicin y publicacin de documentos Web. La integracin completa de Html5 y de CSS3 en los navegadores ms punteros tardar todava algunos meses, o incluso aos. Aunque, habiendo estado implicadas en la elaboracin de Html5 las principales firmas de software, es de suponer que la evolucin ser rpida. Tambin ser preciso esperar varios aos antes de que, bien por la renovacin o bien por la actualizacin de los navegadores, Html5 y las hojas de estilo CSS3 se incluyan en aplicaciones generalizadas. Es interesante destacar la importancia repentina que se da a JavaScript en el diseo de las pginas y de las aplicaciones Web. Este posicionamiento se concretiza en el hecho de que todos los navegadores estn dotados de un nuevo motor JavaScript. Bien sea Opera 10.5 con Carakan, Safari con Nitro, Google Chrome con V8 o Internet Explorer 9 con Chakra. Se han anunciado tambin nuevos motores de JavaScript para Firefox 4 con SpiderMonkey y el recin nacido Narcissus. Destacamos tambin el uso de la aceleracin grfica por hardware mediante tarjeta de vdeo, y no mediante procesador, til para visualizar animaciones y vdeos. Internet Explorer 9 Internet Explorer 8 ha aparecido al final de la carrera y presenta un retraso considerable respecto a la competencia en cuanto a su consideracin, casi nula, de los nuevos estndares Html5 y las hojas de estilo CSS3. Internet Explorer 9, anunciado para el 2011, se reposiciona en el grupo de los navegadores modernos asimilando (por fin) Html5 y una parte de las especificaciones CSS3. Subsiste no obstante un importante problema de fondo, puesto que Internet Explorer 9 no est previsto ms que para Microsoft Windows Vista y Windows Siete. Nada de Internet Explorer 9 pues para los usuarios de Windows XP. Microsoft explica este abandono de Windows XP a causa de la aceleracin hardware de Internet Explorer 9, que exige un sistema operativo moderno. Sin embargo, hay especialistas que han retocado navegadores modernos como Firefox, Chrome y Opera para realizar la aceleracin hardware en

Windows XP. Posicionamiento que considera lamentable el 50% de los usuarios de Windows XP. No obstante puede ser que se reproche esta fidelidad... Algunas palabras para terminar acerca de la pesadilla de los desarrolladores Web. En efecto, las estadsticas indican que a finales de 2010, todava el 5% de los internautas utilizan el ms que obsoleto Internet Explorer 6. Firefox 4 Publicado a principios de 2011, Firefox 4 seguir siendo sin duda alguna el navegador preferido por los diseadores gracias a su sistema de extensiones, imprescindibles en el desarrollo de aplicaciones Web. Pensamos especialmente en Firebug y Web Developer, que son dos extensiones que se han vuelto casi imprescindibles en el mundo del desarrollo Web. La versin beta ya presentaba avances importantes respecto a su predecesor, Firefox 3.6, en cuanto a la interfaz de usuario renovada, la consideracin del estndar Html5, CSS3, aceleracin grfica, etc. Firefox 3.6, envejecido respecto a su competencia, especialmente respecto a Google Chrome, no se dejar de lado. Tendremos en cuenta que ya incluye numerosos efectos CSS3 mientras que otros navegadores (lase Internet Explorer) los ignoran por completo. Google Chrome 7 Aparecido en septiembre de 2008, Google Chrome no ha cesado de incrementar su cuota de mercado. Podemos considerar que es, a da de hoy, el tercer navegador ms usado en la red. Adems las versiones se han sucedido a un ritmo sostenido y siempre cercano a tecnologas punta como Html5 y a la integracin progresiva de las hojas de estilo CSS3. Subrayamos tambin que las versiones recientes se han extendido rpidamente entre los usuarios. Esto confirma la modernidad y el dinamismo de este joven navegador. Safari 5 Safari es, desde 2003, el navegador por defecto de las plataformas Mac OS X. Desde su versin 4 (junio de 2009) est disponible tambin para Windows. Este excelente navegador, rpido e innovador, tiene no obstante algunas dificultades a la hora de alcanzar el xito entre los usuarios de Windows. Aun as, el navegador Safari est a la ltima en lo que respecta a la integracin de Html5 y las hojas de estilo CSS3 y no tiene nada que envidiar a su competencia en cuanto a rendimiento. Opera 10.6 Este navegador simptico y, ante todo, confidencial nos ser muy til en el estudio de Html5 puesto que es el ms innovador en su campo. Nos permitir por ejemplo ilustrar las novedades en materia de formularios Html5 que todava no se incluyen en los navegadores antes citados.

El documento Html5 mnimo

1. El doctype y su importancia
Todo documento Html debe comenzar por un doctype. Html5 propone un doctype nico y simplificado. <!DOCTYPE html> Para darse cuenta de la situacin, basta con comparar con un doctype de Html 4.0.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Claramente mucho ms corto y, al fin, posible de memorizar! El doctype, tambin llamado DTD, sirve para indicar al navegador a qu reglas de escritura obedece el cdigo fuente de la pgina Html o Xhtml. Lo usar para mostrar la pgina segn los estndares de W3C. Todos los navegadores aplican la misma normativa, por lo que cabe esperar una visualizacin idntica en los distintos navegadores. En ausencia de un doctype el navegador no sabe segn qu reglas debe procesar la pgina. Se conforma con acogerse a reglas genricas para renderizar a toda costa la pgina Html. Esto puede suponer diferencias respecto a la visualizacin en los distintos navegadores. Este modo, incompleto, se llama modo de compatibilidad o quirks mode. Puede verificar fcilmente en su navegador en qu modo (quirks o compatible con los estndares) se encuentra el navegador. En Firefox 3.6+, acceda al men Herramientas - Informacin de la pgina - pestaa General - Modo de representacin.

En Internet Explorer 8+, escriba javascript:alert(document.compatMode) en la barra de direcciones. Si aparece una ventana indicando CSS1Compat, se trata de un modo de compatibilidad con los estndares. SI la ventana de alerta indica BackCompat, se trata del modo quirks. El doctype debe situarse en la primera lnea del archivo Html. Si hay cualquier otra cosa, incluso un simple espacio o una lnea en blanco, ciertos navegadores consideran que la pgina no tiene el doctype y la mostrar en quirks mode.

2. La etiqueta Html

La etiqueta <html> indica al navegador que se trata de un documento Html. La etiqueta <html> es el elemento ms alto o el elemento raz del documento. Se declara justo debajo de la declaracin del doctype.
<!DOCTYPE html> <html lang="es"> ... </html>

La etiqueta <html> puede incluir el atributo lang="es" que especifica que el documento est en lengua espaola. Esta informacin es muy valiosa para los motores de bsqueda como Google y para los programas de sntesis de voz usados por personas con dificultades visuales. En la direccin www.w3schools.com/tags/ref_language_codes.asp podr encontrar una lista completa de las dems lenguas referenciadas.

3. El encabezado del documento

La etiqueta <head> ... </head> que se posiciona justo despus del doctype y de la etiqueta <html> contiene lo que llamamos el encabezado del documento. En este encabezado del documento se sita toda una serie de informacin relativa al propio documento, independientemente de su contenido. Esta informacin puede ser de naturaleza muy diversa:

El ttulo del documento. La etiqueta <title> ... </title> que se explica en el siguiente punto. Declaraciones o llamadas a hojas de estilo CSS. Funciones o vnculos a archivos JavaScript. Informacin dirigida a los motores de bsqueda para mejorar la indexacin y el posicionamiento de la pgina. Informacin dirigida a los navegadores. Meta-etiquetas que retoman la codificacin, la descripcin de la pgina, las palabras clave asociadas a la pgina, el nombre del autor, menciones de copyright, etc.

Con intencin de simplificar, Html5 especifica valores por defecto para el atributo tipo de estos scripts, estilos y elementos link. Salvo si necesita un valor diferente que el definido por defecto, usted podr omitir en Html5 este atributo type. JavaScript es el lenguaje de script predefinido. As, en Html 4.0, era preciso escribir:
<script type="text/javascript">

... </script>

Y
<script type="text/javascript" src="archivo.js"></script>

En Html5, basta con escribir:

<script> ... </script>

Y
<script src="archivo"></script>

CSS es ahora el lenguaje predefinido para las hojas de estilo. As, en Html 4.0, era preciso escribir:
<style type="text/css"> ... </style>

Y
<link rel="stylesheet" type="text/css" href="archivo.css">

En Html5, basta con escribir:

<style> ... </style>

Y
<link rel="stylesheet" href="archivo.css">

Nuestro documento Html5 mnimo queda as:

<!DOCTYPE html> <html lang="es"> <head> ... </head> ... </html>

Dejando a parte el ttulo de la pgina (vase a continuacin), ningn elemento comprendido entre las etiquetas <head> ... </head> se muestra en el navegador.

4. El ttulo del documento

La etiqueta <title>, incluso en el encabezado del documento, es la nica etiqueta obligatoria del mismo. La etiqueta <title> ... </title> le asigna un ttulo a su pgina. El ttulo se visualiza en la barra de ttulo, situada en la parte superior izquierda de cualquier navegador y/o en las pestaas abiertas por el mismo.

La etiqueta <title> tiene especial importancia en lo que respecta al algoritmo de posicionamiento de Google. Velaremos por tener, para los documentos Web, un ttulo atractivo y sinttico. Ya no es intil incluir una o varias palabras claves relativas a la pgina. El documento Html5 se completa de la siguiente forma:
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> </head> ... </html>

Si accidentalmente hubiera un error en las etiquetas <title> ... </title>, se mostrara una simple pgina en blanco.

5. La codificacin (charset) del documento

La nocin del juego de caracteres usado (charset) es una nocin esencial en el desarrollo de pginas Web. Este concepto est no obstante plagado de trampas, principalmente en trminos de interoperabilidad. Ha recibido alguna vez un correo electrnico en el que algunos caracteres haban sido reemplazados por otros smbolos cabalsticos como t o vrificacin? El juego de caracteres determina la forma en que los caracteres de un alfabeto se convierten en bytes en un archivo informtico (y viceversa). Ciertos mtodos de codificacin son especficos a un entorno informtico en un idioma o alfabeto dados, otros son multiplataforma y multiidioma. Ejemplos de codificacin: ASCII, windows-1252, ISO8859-1, ISO-8859-15, UTF-8, etc.

Juego de caracteres bsico. Asegura una interoperabilidad mxima aunque habr que codificar los caracteres acentuados y especiales con entidades del tipo &eacute; (para la ) o &euro; (para el ). Juego de caracteres usado por Windows y numerosas aplicaciones de windowsMicrosoft. Supone una puerta abierta a problemas de compatibilidad 1252 en otros sistemas. ISO-8859- ISO-8859-1 es la codificacin por defecto de numerosos protocolos de 1 red, garanta de una excelente interoperabilidad. ISO-8859- Versin actualizada de ISO-8859-1 que incluye, entre otros, el 15 smbolo . Aplicacin de la codificacin Unicode, presentada como la solucin UTF-8 del futuro. A da de hoy su adopcin est siendo frenada a causa de ciertos problemas en algunos lenguajes de programacin (PHP). ASCII Los navegadores incluyen una funcin de deteccin automtica del juego de caracteres. Aun as, dejar la codificacin al criterio del navegador supone en ocasiones una puerta abierta a errores de interpretacin. Forma parte de las buenas prcticas de la publicacin en la Web definir explcitamente la codificacin del documento. Esto se hace en Html5 gracias a la etiqueta: <meta charset="iso-8859-1"> o <meta charset="UTF-8"> La siguiente sintaxis, que recuerda a Xhtml 1.0, tambin est aceptada: <meta charset="iso-8859-1" /> o <meta charset="UTF-8" /> De este modo no slo se ha simplificado el doctype en Html5. Recordemos la forma que tomaba la declaracin de la codificacin en Html 4.0:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

Nuestro documento Html5 mnimo es ahora:

<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> ... </html>

La especificacin Html5 de W3C, haciendo caso a IETF (Internet Engineering Task Force) quien formula los estndares de Internet, recomienda el uso de utf-8. Nada impide no obstante mantener el formato iso-8859-1, usado ms frecuentemente en Europa occidental.

6. El cuerpo del documento

Las etiquetas <body> ... </body> definen lo que llamamos el cuerpo del documento. Es entre estas etiquetas donde se situar el cdigo Html5 que se usar para elaborar el contenido de la pgina. Esta parte del documento Html se visualizar en la ventana del navegador y por tanto ser presentada al internauta. En Html5, los atributos dedicados a la presentacin del cuerpo del documento en la etiqueta <body> se abandonan dejando paso al uso de hojas de estilo. Estos atributos que determinaban el color de fondo (bgcolor), la imagen de fondo (background) o el color del texto (text) ya no tienen lugar en Html5. Para finalizar, nuestro documento Html5 mnimo tiene el siguiente aspecto:
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> </body> </html>

Modo de proceder
Los lenguajes usados en la Web tienen la ventaja de que no necesitan una herramienta de desarrollo dedicada. Para escribir el cdigo fuente, no hace falta un programa caro! Con un sencillo editor de texto, incluido en todos los sistemas operativos, tendremos suficiente. Lo fundamental es tener el texto en bruto sin ningn tipo de formato. En Windows, puede usar el Bloc de notas o Notepad. Recordamos que se accede a travs del men de Inicio en Todos los programas - Accesorios - Bloc de notas. Este editor de texto, algo rudimentario, es no obstante "prefecto" para codificar texto bruto (sin ningn tipo de formato). Es importante respetar un procedimiento correcto a la hora de guardar los archivos. Tras haber hecho Archivo - Guardar como, tenga precaucin de activar en la zona Tipo la opcin Todos los archivos.

En el marco de este libro dedicado a Html5, los archivos tendrn como extensin *.htm o *.html. El uso de la extensin *.htm parece estar generalizndose. Para visualizar su archivo, basta con abrir su navegador e indicar la ruta del archivo concreto. Esta operacin parece muy sencilla. No obstante, con la tendencia de una interfaz ms y ms simplificada de los navegadores, no es del todo intuitiva. En Firefox, Safari y Opera, hay que activar la barra de mens, encontrar el archivo con Archivo - Abrir un archivo. En Internet Explorer 9 y Google Chrome donde la interfaz es todava ms reducida, no hay ms alternativa que usar el atajo de teclado [Ctrl] O. En caso de realizar modificaciones al cdigo fuente inicial, no olvide actualizar la pgina para que el navegador tenga en cuenta los cambios. Ejemplo Llegados a este paso, contamos con todas las herramientas para crear nuestro primer documento Html5.
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head>

<body> Un primer documento Html5. </body> </html>

Que se muestra en Firefox 4.0:

Validacin de cdigo Html5

Si bien Html5 es menos formalista que Html 4.0 estricto o que Xhtml 1.0, sigue siendo indispensable validar el cdigo fuente. Las ventajas de un cdigo fuente perfecto y por tanto de la validacin son:

Comprensin y verificacin en profundidad de Html5 por parte de programadores iniciados (y avanzados). Asegurar que la pgina se mostrar siempre de forma correcta en la mayora de los navegadores. Una pgina invlida puede llevar a los navegadores a interpretarla de forma muy distinta. Demostracin de su propia capacidad y profesionalidad a la hora de realizar un cdigo de calidad, conforme a los estndares de Html5. Los programas de sntesis vocal y otras ayudas tcnicas dirigidas a personas con problemas de accesibilidad se basan en un cdigo vlido a la hora de procesar las pginas de la red.

Si el documento, sometido a un validador, no es correcto, se le proveer un anlisis de los problemas que le permitir corregir su cdigo. Las primeras validaciones pueden ser muy frustrantes pero suponen un excelente aprendizaje del cdigo fuente. No obstante el informe de errores es, con frecuenta, muy tcnico. Para realizar su funcin de verificacin y validacin, los validadores precisan que se defina el doctype del documento (vase la seccin El documento Html5 mnimo - La codificacin (charset) del documento en este captulo). Los validadores Html5 (en lnea) disponibles son:

El propio validador de W3C. El validador de W3Qubec. El validador validator.nu.

El validador de W3C W3C presenta un validador de cdigo (validator.w3c.org). Lo cual es garanta de calidad. No obstante la validacin de Html5 se anuncia todava en un estado experimental.

Destaquemos:

Que est en ingls.

Que ofrece la validacin de un archivo a partir de su direccin http, un archivo que est alojado en su ordenador o cdigo que insertemos en una zona de texto. Que es muy potente. Que sus notas y explicaciones son muy tcnicas o a veces incluso sibilinas. Que es "la" referencia de los profesionales.

El validador de W3Qubec W3Qubec es un organismo sin nimo de lucro cuya labor consiste en promover el conjunto de normas, estndares abiertos y buenas prcticas de la Web y del mundo multimedia.

Proporciona un validador:

En francs. Con la posibilidad de validar un archivo a partir de su direccin http, un archivo que est alojado en su ordenador o cdigo que insertemos en una zona de texto. Las advertencias y errores proporcionados estn en francs. Le faltan explicaciones ms explcitas para corregir el cdigo enviado. Se trata de una traduccin al francs del sitio Web de W3C. No existe una versin espaola a da de hoy.

El validador de W3Qubec (www.w3qc.org/validateur/) estaba en construccin en el momento de escribir este libro. El validador validator.nu El sitio Web validator.nu proporciona, tambin en estado experimental, un validador de Html5 (html5.validator.nu/). Destaquemos que fue el primero en proporcionar un validador de Html5. Podemos subrayar:

Que est en ingls. Que su interfaz es muy sencilla. Que ofrece la posibilidad de validar un archivo a partir de su direccin http, un archivo que est alojado en su ordenador o cdigo que insertemos en una zona de texto. Que parece de excelente calidad.

Para los amantes de las extensiones de Firefox, el mdulo Html5 Validator le permite, tras su instalacin, validar su propia pgina a travs del men contextual de validator.nu.

Prueba No nos hemos resistido a la tentacin de hacer una prueba a partir de un cdigo html5 errneo. El cdigo errneo es:
1. <!DOCTYPE html> 2. <html lang="es"> 3. <head> 4. <title>Html5</title> 5. <meta charset="iso-8859-1"> 6. </head> 7. <body> 8. <p align="center"> 9. <s>Html5</s> 10. </p> 11. <table width="200px"> 12. <tr> 13. <td>1</td><td>2</td> 14. </tr> 15. <tr> 16. <td>3</td><td>4</td> 17. </tr> 18. </table> 19. </body> 20. </html>

Los errores estn:

En la lnea 8, donde el uso del atributo align ha sido suprimido (obsoleto) en Html5. En la lnea 9, donde el uso de la etiqueta de subrayado <s> ya no existe en Html5. En la lnea 11, donde el uso del atributo width en la etiqueta <table> ha sido suprimido en Html5.

El validador de W3C detecta sin ninguna dificultad estos errores.

Line 8, Column 18: <p align="center"> Line 9, Column 3: <s>Html5</s> Line 11, Column 21:<table width="200px">

The align attribute on the p element is obsolete. Use CSS instead.

The s element is obsolete. Use CSS instead. The width attribute on the table is obsolete. Use CSS instead.

La visualizacin de este cdigo errneo nos proporciona una buena justificacin de la utilidad de una validacin del cdigo. En efecto, todos los navegadores de nuestro estudio muestran el trmino Html5 tachado cuando lo que habamos previsto era un subrayado gracias a la etiqueta <s>.

PRIMEROS ELEMENTOS DE LAS HOJAS DE ESTILO

Prembulo
El aprendizaje de la publicacin en la Web se haca tradicionalmente distinguiendo el Html de las hojas de estilo CSS. Con la desaparicin, en Html5, de todos los atributos de presentacin, se hace difcil, casi imposible, ilustrar el cdigo y las etiquetas Html. De forma lgica parece necesario introducir algunos elementos de las hojas de estilo para responder a las limitaciones de la presentacin y poder as ilustrar las explicaciones y los ejemplos. Este captulo presenta los elementos bsicos de las hojas de estilo que se usarn en la parte dedicada a Html5. Las hojas de estilo CSS se estudiarn a fondo y de forma detallada en la parte que se les dedica dentro de libro. Lo importante, en este punto de nuestro estudio, es simplemente comprender las funciones respectivas de Html dedicadas a la estructuracin del contenido y de las hojas de estilo asociadas a la presentacin del mismo.

Propiedades de estilo
Las hojas de estilo abarcan todo aquello relacionado con la presentacin del documento Html como el color, la alineacin, el tamao, los bordes, los fondos o el interlineado. La declaracin de un estilo se hace mediante el binomio propiedad: valor;. Ejemplo
text-align: center;

Lo que puede interpretarse como: "alinear el texto de forma centrada". Detallemos esta notacin:

propiedad indica el elemento de presentacin que se ve implicado; por ejemplo color para el color, text-align para la alineacin, border para los bordes, font-size para el tamao de la fuente. la propiedad est separada por su valor mediante dos puntos. valor especifica una palabra clave, un porcentaje o un tamao en funcin de la propiedad a la que est asignado. el punto y coma final indica que se ha terminado la declaracin de estilo, y es obligatorio. se permite el uso de espacios. As, ciertos autores tienen la costumbre de incluir un espacio entre los dos puntos y el valor para mejorar la legibilidad del cdigo.

Selectores
A continuacin hay que determinar los elementos del cdigo Html que se vern afectados por el efecto de presentacin. Estos elementos se llaman selectores. Selectores bsicos El primer selector que nos viene a la mente es la etiqueta Html. De este modo podemos por ejemplo "enganchar" la declaracin de estilo anterior (alinear el texto de forma centrada) a la etiqueta <h1>. La sintaxis es: selector { propiedad: valor;} Ejemplo
h1 { text-align: center;}

Comentarios

Se usa simplemente la etiqueta, sin los signos menor que (<) y mayor que (>). Es decir, nicamente el texto de la etiqueta. La declaracin de estilo se efecta entre dos llaves. No hay que olvidar la llave de cierre, en caso contrario el navegador no tendr en cuenta la declaracin de estilo.

De este modo, todas las etiquetas <h1> se alinearn de forma centrada. Selectores de clase En ciertas situaciones, no queremos agregar un efecto de presentacin a todas las etiquetas de un tipo determinado, sino a ciertas etiquetas elegidas libremente. Las hojas de estilo cuentan para ello con la nocin de clases (class) que permite al diseador definir sus propios selectores. De ah el nombre de selector universal. La etiqueta a la que se quiere aplicar la declaracin de estilo se distinguir de las dems por el atributo class="nombre_clase" siendo, por ejemplo, <h1 class="efecto1"> ... </h1>. La sintaxis es: .nombre_clase { propiedad: valor;} El nombre de la clase, precedido de un punto y seguido de la declaracin de estilo. Ejemplo
.efecto1 { text-align: center;}

Aqu nicamente la etiqueta <h1> con el atributo class="efecto1" estar centrada. Adems, esta etiqueta de presentacin podr aplicarse a otras etiquetas del cdigo como por ejemplo un prrafo o una imagen.

Selector de identificador Su concepto es muy cercano a los selectores de clase pero, aqu, no se desea aplicar el efecto del estilo ms que a un nico elemento de la pgina. Este elemento, siendo nico, podr tratarse como un objeto que se podr manipular por JavaScript. Este elemento nico se identifica mediante el atributo id="nombre_identificador" siendo, por ejemplo, <h2 id="titulo2"> ... </h2>. La sintaxis en este caso es: #identificador { propiedad: valor;} Ejemplo
#titulo2 { text-align: center;}

El nombre del identificador, precedido por el signo de almohadilla (#) y seguido de la declaracin de estilo.

Incorporacin del estilo

Existen mltiples formas de incorporar las declaraciones de estilo en una pgina Html. En este punto del estudio de CSS, vamos a explicar las elementales. Estilo en lnea La declaracin de estilo se agrega directamente a una etiqueta concreta del cdigo Html mediante el atributo style. Ejemplo
<h1 style="text-align: center;"> ... </h1>

Esta forma bsica no respeta la regla de separacin de contenido y presentacin. Su uso ser, por tanto, excepcional. Estilo interno Las declaraciones de estilo se agrupan en el encabezado del documento entre las etiquetas <head> ... </head>. La sintaxis es la siguiente:
<style type=""text/css"> Declaraciones de estilo </style>

Ejemplo

<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type=""text/css"> h1 { color: red;} .efecto1 { padding-left: 20px; font-style: italic;} </style> <body> <h1>Titulo 1 en rojo</h1> <h2 class="efecto1">Subttulo en cursiva</h2> <h1>Ttulo 2 en rojo</h1> </body> </html>

EL TEXTO

Texto simple
Todo el contenido de su pgina Web se sita en el cuerpo del documento Html5, es decir entre las etiquetas <body> ... </body>. Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> Un texto en Html5 </body> </html>

Ntese que en Html se ignoran los espacios mltiples. El navegador considera un nico espacio.

Salto de lnea
En Html, los retornos de carro o saltos de lnea que aparecen en el cdigo se ignoran y sustituyen por un espacio. Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> Html5 es el sucesor de Html 4.0 </body> </html>

Vemos que el texto Html ocupa una sola lnea. Para forzar el salto de lnea es preciso usar la etiqueta <br>.

Nuestro ejemplo queda as:

<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> Html5 es el sucesor de<br> Html 4.0 </body> </html>

Comentarios

La etiqueta <br> es una etiqueta llamada nica pues no tiene etiqueta de cierre. La notacin <br />, usada en Xhtml 1.0, tambin est aceptada en Html5.

Negrita
W3C anuncia la separacin estricta entre contenido y presentacin. Html se encarga solamente de la estructura del documento, y las hojas de estilo CSS se encargan de todo el aspecto relacionado con el formato visual. Puede parecer, no obstante, paradjico volver a encontrarse etiquetas de presentacin. Est tranquilo sabiendo que se trata nicamente de algunos formatos bsicos del texto como la negrita, la cursiva, los exponentes y subndices, etc. Un estudio detallado de las hojas de estilo CSS le permitir realizar mayores fantasas en la presentacin. Para escribir un texto en negrita (bold en ingls), basta con incluirlo entre las etiquetas <b> ... </b>. Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <b>Texto en negrita</b> </body> </html>

Del forma similar, la etiqueta <strong> ... </strong> permite igualmente escribir el texto en negrita en los navegadores visuales. La diferencia entre las etiquetas <b> y <strong> es no obstante sensible en Html. La etiqueta <b> provoca un efecto puramente tipogrfico y visual. La etiqueta <strong> tiene como objetivo principal reforzar el texto. Si bien los navegadores visuales han adoptado la misma representacin que para la negrita, la interpretacin es muy distinta en los programas de sntesis vocal que leen las pginas Web a personas con deficiencias visuales. La etiqueta <strong> refuerza el contenido mediante una

entonacin de voz distinta o un nivel sonoro ms elevado. El sentido que se da al texto con la etiqueta <strong> es por tanto muy diferente.

Cursiva
Para escribir un texto en cursiva (italic en ingls), hay que incluirlo entre las etiquetas <i> ... </i>. Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <i>Texto en cursiva</i> </body> </html>

Comentarios

Es posible escribir un texto en negrita y en cursiva enlazando las etiquetas <b> e <i>. No obstante s importa el orden en que se enlazan estas etiquetas. Esto significa que el orden de cierre de las etiquetas ha de ser inverso al orden de apertura de las mismas. De este modo <b><i>texto</i></b> est enlazado correctamente. Por el contrario con <b><i>texto</b></i> las etiquetas estn mezcladas y no se ha respetado la forma de enlazarlas. Existe tambin la etiqueta <em> (nfasis). Esta etiqueta tambin escribe el texto en cursiva en los navegadores. La diferencia con la etiqueta <i> est en el sentido que se da a ambas etiquetas. La etiqueta <i> es puramente tipogrfica y visual. La etiqueta <em> tiene como objetivo poner de relieve el texto que la contiene. Este significado visual puede interpretarse de otro modo en los navegadores no visuales.

Exponentes y subndices
En ocasiones es necesario escribir algunos caracteres como exponentes o subndices, por ejemplo en frmulas matemticas o qumicas. La etiqueta ^... escribe el contenido en exponente y la etiqueta _... en subndice. Ejemplo

<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> (a + b)² = a² + 2ab + b²<br> H₂O </body> </html>

Otras etiquetas de texto

Hay otras etiquetas de texto cuyo uso es menos frecuente, incluso raro.

1. Texto tachado
La etiqueta <del> ... </del> permite marcar un elemento de texto como suprimido (delete) o caducado, por ejemplo en la actualizacin de un precio en un sitio comercial. El texto aparece tachado en pantalla. Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> La etiqueta <del>Html 4.0</del> Html5 ...<br> Llave USB al precio de <del>29.99</del> 24.99 </body> </html>

Comentario La etiqueta <strike> de Html 4.0, que permita tachar el texto, no se ha mantenido en Html5. La etiqueta <del>, que presenta el texto como tachado, puede ser una alternativa.

2. Texto preformateado
La etiqueta <pre> ... </pre> permite visualizar el texto tal y como se ha codificado en el editor de texto. Los espacios, tabulaciones y retornos de carro se respetan tal cual en la pantalla. Si incluye texto, se visualizar con un tipo de letra de paso fijo.

Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <pre> El texto incluido en una etiqueta pre se visualiza con un tipo de letra de paso fijo y preserva los espacios As como los saltos de lnea. </pre> </body> </html>

3. Direccin del texto

Algunos sistemas de escritura, tales como los alfabetos rabe y hebreo, se escriben de derecha a izquierda al contrario que el sentido de escritura convencional de izquierda a derecha de las lenguas que usan el alfabeto latino (como por ejemplo el castellano). Html, lenguaje universal, debe tener en cuenta de algn modo esta especificacin. La etiqueta <bdo> ... </bdo> indica el sentido de visualizacin del texto (de izquierda a derecha o de derecha a izquierda). Los atributos son:

dir="ltr" (left to right) para el sentido de lectura de izquierda a derecha (por defecto). dir="rtl" (right to left) para el sentido de derecha a izquierda.

Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <bdo dir="ltr">dabale arroz a la zorra el abad</bdo><br> <bdo dir="rtl">dabale arroz a la zorra el abad</bdo> </body> </html>

Comentarios
En ocasiones es til comentar el cdigo Html (como cualquier otro cdigo de programacin), para facilitar la comprensin a la hora de hacer alguna modificacin. En Html5, igual que en Html 4.0, los comentarios estn precedidos por la etiqueta <!-- y se cierran con la etiqueta -->. Todo lo que escribamos entre estas etiquetas no se visualizar en la pantalla del navegador. Destaquemos no obstante que estos comentarios s estn visibles cuando se consulta el cdigo fuente de la pgina. Aadiremos que los comentarios pueden ocupar varias lneas y pueden situarse de forma indistinta en el <head> ... </head> o en el <body> ... </body>. Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <b><i>Texto en negrita y cursiva</i></b> <!-- comentario particular --> </body> </html>

Caracteres especiales
Existe toda una maraa de caracteres especiales que es preciso codificar, en ocasiones, de forma especial. Pensemos en un primer momento en los caracteres que se usan en la codificacin Html5. Por ejemplo, el signo menor que (<) que marca la apertura de una etiqueta. A la hora de leer este cdigo el navegador puede encontrarse con alguna dificultad. El validador de W3C le advierte de esta ambigedad a la hora de verificar su pgina. Un poco como para las palabras reservadas en un lenguaje de programacin, existe una lista de elementos a evitar en la codificacin del texto. Estos elementos son, por ejemplo:

El signo < que indica la apertura de una etiqueta.

El signo > que marca el cierre de una etiqueta. El signo " usado en los atributos de la etiqueta. El signo & que marca el inicio de una referencia de carcter.

Los distintos signos deben codificarse usando las entidades siguientes: < > " & &lt; &gt; &quot; &amp;

Preste atencin al punto y coma final, pues es obligatorio. Por otro lado, existe toda una serie de caracteres que no existen en el teclado normal como el smbolo de copyright o el smbolo de marca registrada. Hay tambin otros caracteres especficos de las matemticas como el signo para las integrales. Aquellos lectores interesados podrn encontrar toda una larga lista de caracteres especiales usados en Html en la direccin http://www.ascii.cl/es/codigos-html.htm Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> La etiqueta &lt;b&gt; ... &lt;/b&gt; escribe el texto en <b>negrita</b>.<br> &spades; &clubs; &hearts; &diams; </body> </html>

Qu ocurre con los dems caracteres especiales que se usaban en Html? Qu ha sido en Html5 de &eacute; (para la ), de &egrave; (), de &ecirc; (), de &nbsp; (espacio indivisible), etc.? En principio, si el carcter existe en el juego de caracteres (charset) declarado en el documento Html5, no es preciso escribir los caracteres especiales mediantes entidades Html. As, en las codificaciones iso-8859-1 e iso-8859-15, la existe y no es necesario recurrir a la entidad &eacute;. Esto mejora sin duda la legibilidad del cdigo.

Por el contrario, con la codificacin iso-8859-1, el signo no existe puesto que es demasiado antigua para soportar el carcter en su juego de caracteres. En este caso hay que pasar obligatoriamente por el uso de su entidad Html &euro;. Para saber ms acerca de este tema, consulte las indicaciones de W3C en la direccin www.la-grange.net/w3c/html4.01/charset.html. Muchos navegadores realizan una deteccin automtica de la codificacin pero esto puede dar pie a ciertas circunstancias indeseadas. Evite las sorpresas. Es recomendable especificar bien el charset.

Etiquetas Html 4.0 suprimidas

Recordemos que Html5 pretende separar por completo el contenido de la presentacin, suprimiendo toda una serie de etiquetas y de atributos que tienen que ver con la presentacin. De este modo, las siguientes etiquetas de Html 4.0 han desaparecido en la especificacin Html5:

Las etiquetas <big> y <small> que permitan escribir un texto de forma ms grande o ms pequea. La etiqueta <font> para el tipo de caracteres usados, as como sus atributos size, color y face que determinaban respectivamente el tamao, el color y el tipo de letra. La etiqueta <s> que permita subrayar el texto. La etiqueta <strike> que permita tachar el texto. La etiqueta <tt> que permita escribir un texto con una letra de paso fijo.

Dar formato al texto con las hojas de estilo

Como se ha explicado en el captulo "Primeros elementos de las hojas de estilo", se introducen a continuacin algunos elementos de las hojas de estilo con el objetivo de que pueda visualizar sus primeros ensayos en Html5 de forma ms cmoda. En efecto, Html5 se dedica exclusivamente a la estructura del documento, y tiene una apariencia desnuda. Lo importante ahora es comprender el mecanismo de las hojas de estilo para realizar tareas bsicas de presentacin. Su estudio completo y detallado se abordar en la segunda parte, dedicada a CSS.

1. Negrita
Es posible escribir un texto en negrita con las hojas de estilo CSS sin tener que recurrir a la etiqueta <b>.
<!DOCTYPE html> <html lang="es"> <head>

<title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> span { font-weight: bold;} </style> </head> <body> Texto en <span class="negrita">negrita</span> </body> </html>

La propiedad de estilo font-weight (textualmente, el tamao o la importancia de la fuente) se define a bold (es decir en negrita). Esta propiedad CSS aplica a las etiquetas <span>. La propiedad completa span { font-weight: bold;} escribir todas las etiquetas <span> del documento en negrita.

2. Cursiva
Es posible escribir un texto en cursiva con las hojas de estilo CSS sin tener que recurrir a la etiqueta <i>.
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> .cursiva { font-style: italic;} </style> </head> <body> Texto en <span class="cursiva">cursiva</span> </body> </html>

Aqu la propiedad de estilo font-style (el estilo de la fuente) se pone a italic (en cursiva). Esta propiedad CSS aplica a las etiquetas con un atributo de clase que hemos definido class="cursiva". La propiedad completa .cursiva { font-style: italic;} escribir todas las etiquetas del documento con el atributo class="cursiva" en cursiva.

3. Tamao de letra
Con la eliminacin de la etiqueta <font> y de su atributo size, el tamao de la fuente se define nicamente mediante la propiedad de estilo CSS font-size.
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> #grande { font-size: 36px;}

</style> </head> <body> <div id="grande">Texto en grande</div> </body> </html>

El tamao de la fuente (font-size) se fija a 36 pxeles (36px). No aplicar ms que a la etiqueta <div> identificada por el id="grande".

4. Color del texto

Con la eliminacin del atributo color de la etiqueta <font>, el color del texto se define mediante la propiedad de estilo CSS color.
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> h1 {color: red;} </style> </head> <body> <h1>Ttulo en rojo</h1> </body> </html>

Las etiquetas <h1> escribirn su texto en color (color) rojo (red).

5. Alineacin
La alineacin del texto se realiza mediante la propiedad de estilo CSS text-align.
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> #centrado { text-align: center;} </style> </head> <body> <div id="centrado">Texto alineado al centro</div> </body> </html>

La propiedad text-align indica que la alineacin del texto es centrada (center).

6. Subrayado

En la red, el subrayado es la convencin adoptada para sealar un enlace. Cualquier otro subrayado del texto no puede sino inducir a error a su visitante. Por ello debera evitarse, incluso prohibirse, a la hora de escribir cdigo Html. La eliminacin de la etiqueta de subrayado del texto <s> es un buen ejemplo. No obstante sigue siendo posible subrayar un texto mediante una propiedad de estilo.
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> .subrayado { text-decoration: underline;} </style> </head> <body> Texto <span class="subrayado">subrayado</span> </body> </html>

La propiedad de estilo indica que la decoracin del texto (text-decoration) es un subrayado (underline).

ESTRUCTURA DEL DOCUMENTO

Dar formato al texto con las hojas de estilo

Como se ha explicado en el captulo "Primeros elementos de las hojas de estilo", se introducen a continuacin algunos elementos de las hojas de estilo con el objetivo de que pueda visualizar sus primeros ensayos en Html5 de forma ms cmoda. En efecto, Html5 se dedica exclusivamente a la estructura del documento, y tiene una apariencia desnuda. Lo importante ahora es comprender el mecanismo de las hojas de estilo para realizar tareas bsicas de presentacin. Su estudio completo y detallado se abordar en la segunda parte, dedicada a CSS.

1. Negrita
Es posible escribir un texto en negrita con las hojas de estilo CSS sin tener que recurrir a la etiqueta <b>.
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> span { font-weight: bold;} </style> </head> <body> Texto en <span class="negrita">negrita</span> </body> </html>

La propiedad de estilo font-weight (textualmente, el tamao o la importancia de la fuente) se define a bold (es decir en negrita). Esta propiedad CSS aplica a las etiquetas <span>. La propiedad completa span { font-weight: bold;} escribir todas las etiquetas <span> del documento en negrita.

2. Cursiva
Es posible escribir un texto en cursiva con las hojas de estilo CSS sin tener que recurrir a la etiqueta <i>.
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1">

<style type="text/css"> .cursiva { font-style: italic;} </style> </head> <body> Texto en <span class="cursiva">cursiva</span> </body> </html>

Aqu la propiedad de estilo font-style (el estilo de la fuente) se pone a italic (en cursiva). Esta propiedad CSS aplica a las etiquetas con un atributo de clase que hemos definido class="cursiva". La propiedad completa .cursiva { font-style: italic;} escribir todas las etiquetas del documento con el atributo class="cursiva" en cursiva.

3. Tamao de letra
Con la eliminacin de la etiqueta <font> y de su atributo size, el tamao de la fuente se define nicamente mediante la propiedad de estilo CSS font-size.
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> #grande { font-size: 36px;} </style> </head> <body> <div id="grande">Texto en grande</div> </body> </html>

El tamao de la fuente (font-size) se fija a 36 pxeles (36px). No aplicar ms que a la etiqueta <div> identificada por el id="grande".

4. Color del texto

Con la eliminacin del atributo color de la etiqueta <font>, el color del texto se define mediante la propiedad de estilo CSS color.
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> h1 {color: red;} </style>

</head> <body> <h1>Ttulo en rojo</h1> </body> </html>

Las etiquetas <h1> escribirn su texto en color (color) rojo (red).

5. Alineacin
La alineacin del texto se realiza mediante la propiedad de estilo CSS text-align.
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> #centrado { text-align: center;} </style> </head> <body> <div id="centrado">Texto alineado al centro</div> </body> </html>

La propiedad text-align indica que la alineacin del texto es centrada (center).

6. Subrayado
En la red, el subrayado es la convencin adoptada para sealar un enlace. Cualquier otro subrayado del texto no puede sino inducir a error a su visitante. Por ello debera evitarse, incluso prohibirse, a la hora de escribir cdigo Html. La eliminacin de la etiqueta de subrayado del texto <s> es un buen ejemplo. No obstante sigue siendo posible subrayar un texto mediante una propiedad de estilo.
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> .subrayado { text-decoration: underline;} </style> </head> <body> Texto <span class="subrayado">subrayado</span>

</body> </html>

La propiedad de estilo indica que la decoracin del texto (text-decoration) es un subrayado (underline).

ESTRUCTURA DEL DOCUMENTO

Ttulos
Qu puede resultar ms til que prever distintos tamaos de ttulo para estructurar el contenido? Basta con pensar en los ttulos que identifican una gran seccin o una tabla de contenidos. El lenguaje Html5 proporciona seis tamaos de letra para los ttulos. Cuando se sabe que ttulo en ingls se dice heading, la creacin de la etiqueta de ttulo se hace evidente: <h por heading seguido de un nmero 1 (para el ms grande), 2, 3, 4, 5, 6 (para el ms pequeo) y el smbolo > de cierre. En adelante, usaremos la notacin <hx> ... </hx> donde x es un nivel de 1 a 6. Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <h1>Ttulo de nivel 1</h1> <h2>Ttulo de nivel 2</h2> <h3>Ttulo de nivel 3</h3> <h4>Ttulo de nivel 4</h4> <h5>Ttulo de nivel 5</h5> <h6>Ttulo de nivel 6</h6> </body> </html>

Comentarios A pesar de la simplicidad de esta etiqueta, se imponen algunas observaciones:

Esta etiqueta existe desde los comienzos de Html y es, por tanto, perfectamente compatible con todos los navegadores. Por defecto, con la etiqueta <hx> ... </hx>, el texto se escribe en negrita. Tambin por defecto, como para todos los elementos de bloque tambin llamados elementos de divisin (vase la seccin Divisiones de pgina del presente captulo), la etiqueta incluye una lnea vaca entre el contenido de la etiqueta y el resto del documento. Para obtener caracteres ms grandes o ms pequeos que los proporcionados por defecto, o bien un tipo de letra diferente al proporcionado por defecto por el navegador, es preciso usar una hoja de estilo CSS. Las etiquetas del ttulo al principio de la pgina se tienen muy en cuenta en los motores de bsqueda como Google, e influyen de forma importante en la

clasificacin y recomendacin de los sitios Web, en particular de aquellos que contienen las palabras clave adecuadas. El W3C insiste para que, en Html5, las etiquetas de ttulo <hx> encuentren su objetivo de calidad a la hora de estructurar las pginas Web. El uso de las etiquetas de ttulo debera reservarse a su funcin original. Es importante no desviarlas de su objetivo principal para, por ejemplo, escribir un texto en negrita o con un tamao de letra determinado. Las hojas de estilo CSS estn ah para realizar estas tareas de presentacin. El atributo align, disponible en Html 4.0, no se ha mantenido en Html 5. La alineacin del prrafo se realiza mediante una propiedad de estilo CSS.

Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> #centrado { text-align: center;} #derecha { text-align: right;} </style> </head> <body> <h3>Ttulo de nivel 3</h3> <h3 id="centrado">Ttulo de nivel 3</h3> <h3 id="derecha">Ttulo de nivel 3</h3> </body> </html>

Prrafos
Un contenido de tipo texto gana en legibilidad y compresin cuando est dividido en distintos prrafos. Para definir un prrafo, se utiliza la etiqueta <p> ... </p>. Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet,

adipiscing nec, ultricies sed, dolor.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p> </body> </html>

Comentarios

Esta etiqueta es perfectamente compatible con los navegadores antiguos y modernos. Por defecto, cada prrafo est precedido y seguido del espacio correspondiente a un salto de lnea para marcar la separacin con el contenido anterior y posterior. Este espacio puede modificarse mediante las hojas de estilo. El atributo align de Html 4.0 ha desaparecido en la especificacin Html5. La alineacin (izquierda, centrado, derecha y justificado) debe realizarse mediante una propiedad de estilo CSS.

Citas
Las citas se escriben por delante del contenido de tipo texto mediante las etiquetas <blockquote> ... </blockquote>. Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> Sneca afirma:<br> <blockquote>Admira a quien lo intenta,<br> aunque fracase.</blockquote> </body> </html>

Comentarios

La cita se visualiza con un salto de lnea antes y otro despus, igual que con los prrafos. Se muestra igualmente con un ligero desplazamiento respecto al margen izquierdo. En ocasiones se usa la etiqueta <blockquote> para obtener este desplazamiento. D preferencia a la propiedad de estilo margin-left para conseguir este efecto. Existe tambin la etiqueta <q> ... </q> para las citas. Esta no muestra espacio antes ni despus, ni tampoco desplazamiento a la derecha. Se visualiza entre comillas.

<!DOCTYPE html>

<html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <p>Sneca afirma: <q>Admira a quien lo intenta, aunque fracase.</q> </p> </body> </html>

Separadores horizontales
El trazo horizontal puede ser muy til para definir un cambio en el contenido. La etiqueta <hr> realiza esta funcin. Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> Captulo 1 <hr> Captulo 2 </body> </html>

Comentarios

No existen problemas de compatibilidad con esta etiqueta pues es bien antigua. La etiqueta <hr> es una etiqueta nica que no tiene etiqueta de cierre. Html5 admite tambin la notacin <hr /> derivada de Xhtml 1.0. Por defecto esta lnea horizontal ocupa toda la longitud de la ventana del navegador. Los diseadores prefieren a menudo reemplazar este trazo, muy bsico en su aspecto esttico, por una imagen grficamente ms elaborada. Todos los atributos align, noshade, size, width, deprecados (deprecated) en Html 4.0, ya no existen en Html5. Es preciso usar hojas de estilo para determinar la alineacin, el tamao y la longitud.

Ejemplo
<!DOCTYPE html> <html lang="es">

<head> <title>Html5</title> <meta charset="iso-8859-1"> <style> hr { text-align: center; height: 3px; background-color: black; width: 100px;} </style> </head> <body> Captulo 1 <hr> Captulo 2 </body> </html>

Listas
Las listas, muy conocidas por los usuarios de procesadores de texto, son una forma muy eficaz de estructurar un contenido de tipo texto.

1. Listas ordenadas
La etiqueta <ol> ... </ol> escribe una lista ordenada. Se definen a continuacin, en el interior de estas etiquetas, los elementos de la lista, mediante las etiquetas <li> ... </li>. La estructura general de una lista ordenada o numerada es:
<ol> <li>Captulo <li>Captulo <li>Captulo <li>Captulo </ol> 1</li> 2</li> 3</li> 4</li>

Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> Listas en Html5: <ol> <li>Listas ordenadas</li>

<li>Listas no ordenadas</li> <li>Listas anidadas</li> <li>Listas de definicin</li> <li>Men de listas</li> </ol> </body> </html>

Comentarios

La etiqueta <ol> es un clsico de Html. Se reconoce perfectamente en todos los navegadores. El atributo type, que permita reemplazar las cifras por letras (maysculas o minsculas) o nmeros romanos, ya no forma parte de Html5. Veremos en la parte dedicada a las hojas de estilo CSS cmo modificar la numeracin. El atributo start permite empezar la numeracin en una cifra distinta al 1. Este atributo, para los amantes de la precisin, que haba sido deprecado (deprecated) en Html 4.0 se ha retomado en Html5. El nuevo atributo Html5 reversed permite realizar una numeracin descendente (5, 4, 3, 2, 1) en vez de la numeracin ascendente habitual (1, 2, 3, 4, 5). A da de hoy, ningn navegador ha implementado este atributo.

2. Listas no ordenadas
Las listas no ordenadas, tambin llamadas listas no numeradas, se escriben mediante la etiqueta <ul> ... </ul>. Se definen a continuacin, en el interior de esta etiqueta, los elementos de la lista mediante las etiquetas <li> ... </li>. La estructura general de una lista no ordenada es:
<ul> <li>Captulo <li>Captulo <li>Captulo <li>Captulo </ul> 1</li> 2</li> 3</li> 4</li>

Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> Listas en Html5: <ul>

<li>Listas ordenadas</li> <li>Listas no ordenadas</li> <li>Listas anidadas</li> <li>Listas de definicin</li> <li>Men de listas</li> </ul> </body> </html>

Comentarios

La etiqueta <ul> es un clsico de Html. Se reconoce perfectamente en todos los navegadores. El atributo type que permita cambiar de algn modo el tipo de marca (redonda llena, redonda vaca, cuadrada) ya no existe en Html5. Veremos en la parte dedicada a las hojas de estilo CSS cmo modificar la forma de las marcas o cmo reemplazarlas por imgenes. La forma de las marcas (disco lleno o disco vaco) la determina el navegador.

3. Listas anidadas
Nada impide elaborar listas ordenadas y listas no ordenadas anidadas. La codificacin es, simplemente, un poco ms compleja. Ejemplo Una lista numerada en la que se anida una lista no ordenada.
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <ol> <li>Ttulos</li> <li>Listas en Html5 <ul> <li>Listas ordenadas</li> <li>Listas no ordenadas</li> <li>Listas anidadas</li> <li>Listas de definicin</li> <li>Men de listas</li> </ul></li> <li>Tablas en Html5</li> <li>Formularios en Html5</li> </ol> </body> </html>

4. Listas de definicin
Html proporciona un ltimo tipo de lista, particularmente til para presentar, por ejemplo, glosarios. Esta lista, llamada de definicin, presenta una lista de trminos, cada uno seguido de su descripcin. La lista se construye en primer lugar mediante la declaracin de una lista de definicin (definition list), es decir <dl> ... </dl>. Entre estas etiquetas, se declara lo que se llama el trmino mediante la etiqueta <dt> ... </dt> seguida de su descripcin en la etiqueta <dd> ... </dd>. La estructura general de una lista de definicin es la siguiente:
<dl> <dt>Trmino 1</dt> <dd>Definicin 1</dd> <dt>Trmino 2</dt> <dd>Definicin 2</dd> <dt>Trmino 3</dt> <dd>Definicin 3</dd> </dl>

Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <p>Etiquetas de lista disponibles:</p> <dl> <dt>ol</dt> <dd>Lista ordenada</dd> <dt>ul</dt> <dd>Lista no ordenada</dd> <dt>dl</dt> <dd>Lista de definicin</dd> </dl> </body> </html>

Divisiones de pgina
1. Elementos de bloque

Tal y como hemos adelantado en nuestro estudio de Html, nos parece oportuno hablar de la divisin en bloque y en lnea de los elementos. El navegador interpreta cada etiqueta Html y determina la visualizacin a travs de las hojas de estilo CSS aplicadas por defecto. Existen dos grandes grupos de etiquetas: las etiquetas de renderizado CSS en bloque (block) y las etiquetas de renderizado CSS en lnea (inline). Las etiquetas de renderizado CSS en bloque ocupan por defecto toda la longitud de la ventana del navegador. Se sitan as unas debajo de las otras. Generalmente, el navegador inserta automticamente un espacio encima y debajo del contenido de la etiqueta. Este es el caso, por ejemplo, de la etiqueta de ttulo <hx> y de todas las etiquetas de este captulo. Todas ellas son etiquetas de tipo bloque. Una etiqueta de ttulo o de prrafo ocupa toda la longitud de la pgina y est separada por un espacio ms o menos importante. El cdigo <p>Prrafo 1</p><p>Prrafo 2</p> se visualiza en dos lneas puesto que la etiqueta <p> es una etiqueta de tipo bloque. Cada prrafo va a ocupar una lnea. Los principales elementos de divisin de tipo bloque, que se detallarn a lo largo de nuestro estudio, son:

Etiquetas de ttulo <hx> ... </hx>. Etiquetas de prrafo <p> ... </p>. Etiquetas de cita <blockquote> ... </blockquote>. La etiqueta <hr> que inserta una lnea horizontal. Las etiquetas <ol> ... </ol> de las listas ordenadas. Las etiquetas <ul> ... </ul> de las listas no numeradas. Las etiquetas <dl> ... </dl> de las listas de definiciones. Etiquetas de tabla <table> ... </table>. Etiquetas de declaracin de formularios <form> ... </form>. La etiqueta <div> ... </div> concebida especialmente para introducir una divisin (div de divisin) sin tener que usar alguna de las etiquetas mencionadas antes. Esta etiqueta es particularmente til para aplicar una declaracin de hojas de estilo CSS.

Ntese que una etiqueta de tipo bloque puede contener una (o varias) etiqueta(s) de tipo bloque. Es el caso, por ejemplo, de una cita incluida en un prrafo. La extensin Web Developer de Firefox permite visualizar los distintos elementos de bloque de una pgina y, en consecuencia, la estructura del mismo: Herramientas - Web Developer - Resaltar - Resaltar elementos de bloque. Tome el siguiente cdigo:

<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <h1>Html5</h1> <h3>Documento Html5 mnimo</h3> <p>Un documento Html5 debe contener:</p> <ul> <li>un doctype</li> <li>la etiqueta html</li> <li>la etiqueta head</li> <li>la etiqueta title</li> <li>la etiqueta body</li> </ul> <p>Comentar este artculo:</p> <form action=""> <textarea rows="2" cols="25"></textarea><br> <input value="Enviar" type="submit"> <input value="Deshacer" type="reset"> </form> </body> </html>

En Firefox, con la extensin Web Developer:

2. Elementos en lnea
Al contrario que los elementos de bloque, los elementos en lnea se sitan siempre uno a lado del otro permaneciendo en el mismo flujo de texto. De este modo, el cdigo texto en <b>negrita</b> y en <i>cursiva</i> se escribe en una sola lnea, sin interrumpir el flujo del texto: texto en negrita y en cursiva. En el captulo anterior describimos muchas etiquetas en lnea que no afectaban ms que al texto. Las principales etiquetas en lnea son:

La etiqueta <b> ... </b> para escribir un texto en negrita. La etiqueta <i> ... </i> para escribir un texto en cursiva. La etiqueta <br> de salto de lnea. La etiqueta <a> para los enlaces. La etiqueta <img> para las imgenes. Las etiquetas de campos de formulario <input>, <select> ... </select> y <textarea> ... </textarea>.

La etiqueta <span> para introducir una divisin en lnea en el texto. Esta etiqueta es particularmente til para aplicar una declaracin de hojas de estilo CSS.

ENLACES

Insertar un enlace
Los enlaces constituyen la esencia del lenguaje Html y de las pginas Web. La riqueza del hipertexto es la que permite tejer esta red gigantesca que compone la Web. La etiqueta <a> ... </a> inserta un enlace. Su sintaxis bsica es:
<a href="destino_del_enlace">Texto del enlace</a>

El destino del enlace puede ser:

Un lugar de la pgina en curso. Otra pgina del sitio Web. Algn lugar de otra pgina del sitio web. Una pgina de otro sitio existente en la Web. Una direccin de correo electrnico. Un archivo para descargar.

La etiqueta de enlace tiene varios atributos: href El atributo href define la direccin (url) del destino del enlace. hreflang Indica el idioma del documento de destino si es diferente al del documento de origen. ping Es nuevo en Html5. El atributo ping puede contener una lista de direcciones url (separadas por espacio) que reciben una notificacin cuando el usuario sigue el enlace.
<a href="html5.htm" ping="http://www.misitioweb.com/data/visitas.php"> Html5</a>

El navegador nos enviar una peticin POST a la direccin url especificada en el atributo. Este nuevo atributo va a ser particularmente til para realizar las estadsticas de un sitio Web. En el caso anterior, nos permitir conocer el nmero de visitantes de la parte dedicada a Html5. rel

Es nuevo en Html5. Especifica la relacin entre el documento de origen y el archivo destino del enlace. Aqu los posibles valores son abundantes: alternate, archives, author, bookmark, contact, external, first, help, icon, index, last, license, next, nofollow, noreferrer, pingback, prefetch, prev, search, stylesheet, sidebar, tag, up. Este atributo de momento est implementado muy parcialmente en los navegadores ms recientes. target Especifica al navegador la forma de visualizar el destino del enlace. Puede ser en una nueva instancia o en una nueva pestaa del navegador (target="_blank"), en la misma ventana de la pgina de origen del enlace (target="_self") y en la misma ventana pero ocupando toda la ventana del navegador. Volveremos con ms detalle sobre este atributo en la seccin "Enlaces hacia una ventana especfica" de este captulo. type Indica al navegador el tipo MIME del destino si no se trata de un documento Html5, por ejemplo un archivo de sonido o una imagen. Los atributos Html 4.0 siguientes han desaparecido de la especificacin Html5: charset, coords, name, rev y shape. El atributo que se usaba con mayor frecuencia era el atributo name para definir las anclas en el interior de un documento. Volveremos con detalle en la seccin "Enlaces al interior de una pgina" de este captulo.

Enlaces a otra pgina

Los primeros enlaces a la hora de comprender la publicacin en la Web apuntan a otra pgina situada en el sitio Web (direccin relativa). Para crear un sitio Web, se aconseja agrupar todos los archivos relativos al sitio en una nica carpeta. Sintase libre a la hora de crear subcarpetas en esta carpeta.

1. Enlaces a una pgina situada en la misma carpeta

La direccin relativa nos causar problemas en el caso de tener una arborescencia de archivos compleja.

Comencemos nuestro estudio por el caso ms sencillo. Considere dos archivos (pagina1.htm y pagina2.htm) situados en la misma carpeta.

Insertemos en la pgina 1 un enlace hacia la pgina 2. El cdigo del enlace en la pgina 1 es:
<a href="pagina2.htm">Enlace hacia la pgina 2</a>

Es imprescindible respetar escrupulosamente las maysculas y minsculas en el nombre del archivo as como evitar los espacios, pues lo que el sistema operativo Windows, instalado en su puesto de desarrollo, reconoce correctamente puede que no se interprete igual en el entorno que alberga su sitio Web si usa, por ejemplo, un servidor Unix.

2. Enlaces a una pgina situada en otra carpeta

En los sitios de cierta importancia, no es posible alojar todos los archivos en una nica carpeta. Para estructurar el sitio, no es raro tener en la misma carpeta de origen varias subcarpetas. El diseo de la ruta de acceso al archivo puede volverse un poco desconcertante, pues el mtodo de direccionamiento est inspirado en el adoptado por Unix, poco familiar para los diseadores habituados a Windows. Veamos la situacin siguiente: la carpeta de origen correspondiente a la raz contiene un archivo indice.htm, una subcarpeta carpeta1 con el archivo pagina1.htm y otra subcarpeta carpeta2 con el archivo pagina2.htm. Esta arborescencia nos permitir abordar varios casos.

a. Enlace desde indice.htm hacia pagina1.htm

El cdigo de indice.htm es:

<a href="carpeta1/pagina1.htm">Texto del enlace</a>

Comentarios

El archivo indice.htm y la carpeta carpeta1 se sitan en el mismo nivel de la arborescencia. Una vez en carpeta1, basta con "descender" hasta pagina1.htm. Observe que es preciso usar la barra oblicua / y no la barra inversa \ que encontramos en ocasiones en Windows.

b. Enlace desde pagina1.htm hacia pagina2.htm

El cdigo en pagina1.htm es:

<a href="../carpeta2/pagina2.htm">Texto del enlace</a>

Comentarios Para ir desde pagina1.htm hacia pagina2.htm es preciso en primer lugar subir un nivel para salir de carpeta1. Para subir un nivel se utiliza la notacin "../". Una vez hemos subido un nivel, hay que descender a carpeta2 y, una vez en carpeta2, descender para llegar a pagina2.htm.

c. Enlace desde pagina2.htm hacia indice.htm

El cdigo en pagina2.htm es:

<a href="../indice.htm">Texto del enlace</a>

Comentarios Para ir de pagina2.htm hacia indice.htm es preciso en primer lugar subir un nivel en la arborescencia para salir de carpeta2, de ah la notacin "../". Descendiendo llegamos directamente a indice.htm.

Enlaces al interior de una pgina

En una pgina de cierta importancia, generalmente de tipo texto, es interesante poder llevar al usuario a un lugar concreto del documento. Se utiliza la tcnica de las anclas (anchor) o puntos de fijacin.

Este enlace al interior de la pgina se realiza en dos tiempos:

La declaracin del ancla. El enlace hacia el ancla.

Declaracin del ancla Las anclas van a definir un lugar en la pgina, lo que permitir despus hacer un enlace hacia ella.

La sintaxis de creacin de un ancla es:

<a id="nombre del ancla"></a>

Con la desaparicin del atributo name en Html5, la declaracin de anclaje se realiza mediante un identificador id. Este ya era el caso en Xhtml 1.0. Ntese que el ancla no se visualiza en el navegador. Enlace hacia un ancla situada en la misma pgina Tras haber definido el ancla, basta con efectuar un enlace hacia ella. Para crear el enlace, basta con escribir en el atributo href el nombre del ancla directamente precedido del signo de almohadilla (#).
<a href="#nombre del ancla">Texto del enlace</a>

Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <a href="#capitulo2">Ir al captulo 2</a> <h3>Captulo 1</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam...</p> <h3>Captulo 2</h3> <a id="capitulo2"></a> <p>Contenido del captulo 2</p> </body> </html>

Enlace hacia un ancla situada en otra pgina El principio es el mismo aunque habr que definir tambin la direccin (relativa o absoluta) de la pgina. Ejemplo A partir del archivo indice.htm, efectuamos un enlace hacia un ancla en el archivo pagina1.htm de la subcarpeta carpeta1.

Tras haber incluido el ancla, <a id="ancla"></a>, en el archivo pagina1.htm, el enlace en el archivo indice.htm queda:
<a href="carpeta1/pagina1.htm#ancla>Texto del enlace</a>

Enlaces a otro sitio

Un enlace puede hacer referencia a pginas de otros sitios situados en otra direccin en la Web. El destino indicado en la etiqueta de enlace ser la direccin completa del sitio o de la pgina. Hablamos de direccionamiento absoluto. Por ejemplo:
<a href="http://www.w3.org/standards/index.htm">Enlace</a>

Precisemos que se trata de la direccin completa, con la mencin explcita del protocolo http://. En efecto, con los navegadores recientes, esta mencin se ha vuelto facultativa y la ignoran gran parte de los usuarios.

Enlace a una direccin email

Para agregar cierto componente de interaccin, es interesante permitir a los visitantes de su sitio la posibilidad de contactar por correo electrnico. El destino en la etiqueta de enlace ser entonces una direccin de correo electrnico, precedida del protocolo de correo electrnico (mail), es decir mailto: (con dos puntos solamente).
<a href="mailto:ediciones@eni.com">El autor</a>

La activacin del enlace abrir una ventana de la aplicacin de correo electrnico configurada por defecto en el puesto del visitante. Por ejemplo, Microsoft Outlook. Si bien no se trata de cdigo Html propiamente dicho, es posible predefinir el asunto del mensaje o incluir el envo de una copia a otro destinatario.

Para predefinir el asunto del e-mail:

<a href="mailto:ediciones@eni.com?subject=Formacin Html5">Ediciones ENI</a> donde el contenido de subject es el asunto (predefinido). En nuestro ejemplo es "Formacin Html5".

Para incluir el envo de una copia a otro destinatario: <a href="mailto:ediciones@eni.com?cc=autor@eni.com">Ediciones ENI</a> donde el contenido de cc es la direccin de correo electrnico del destinatario de la copia.

Para combinar las dos posibilidades: <a href="mailto:ediciones@eni.com?subject=Formacin Html5&cc=autor@eni.com">Ediciones ENI</a>

Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <a href="mailto:ediciones@eni.com?subject=Formacin Html5&cc=autor@eni.com">Ediciones ENI</a> </body> </html>

Enlaces para descargar un archivo

Para permitir la descarga de un archivo, basta con especificar el nombre del mismo (con su extensin). Este modo de proceder es vlido siempre que el archivo Html y el archivo ofrecido para su descarga estn situados en la misma carpeta o subcarpeta. Para un archivo "formacion.pdf" situado en la misma carpeta, el cdigo es:
<a href="formacion.pdf">Versin en PDF</a>

Si en el ordenador del visitante no hay ninguna aplicacin instalada para leer los archivos pdf (Adobe Acrobat Reader por ejemplo), el navegador abre una ventana que invita a descargar el archivo. Por el contrario, si la aplicacin Adobe Acrobat Reader est presente en el puesto del visitante, el navegador abre la aplicacin y muestra el archivo. Pasar igual para el resto de tipos de archivo. Cuando no existe una aplicacin definida por defecto para la extensin del archivo, el navegador descarga el archivo, tras haber mostrado la ventana que invita a la descarga.

Enlaces hacia una ventana especfica

Las pginas de destino de un enlace pueden abrirse en ventanas especficas gracias al atributo target. Veamos las distintas posibilidades:

target="_self" (por defecto). La pgina de destino se abre en la misma ventana que la pgina de origen del enlace. target="_top". La pgina de destino del enlace se abre en la misma ventana pero ocupar la totalidad de la ventana mostrada. En este punto de nuestro estudio, self y top tienen un efecto equivalente. target="_blank". La pgina de destino del enlace se abre en una nueva instancia o en una nueva pestaa del navegador.

Ilustremos este atributo target, y especialmente target="_blank". En el archivo Pgina 1:

<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> Ir a <a href="pagina2.htm" target="_blank">Pgina 2</a> </body> </html>

Color y subrayado en los enlaces

Como herencia de los comienzos de Html, los enlaces se visualizan por defecto subrayados y en color azul para el enlace no visitado, en color prpura para el enlace visitado y en color rojo para el enlace activo. El subrayado es una convencin mayor de la Web para indicar los enlaces de hipertexto. Para no desconcertar al internauta no experimentado, trataremos de ceirnos a esta norma dentro de lo posible. No obstante, desde un punto de vista esttico, el subrayado automtico en una pgina que contenga muchos enlaces puede afear la presentacin de la pgina. Es posible quitar el subrayado usando una hoja de estilo (text-decoration: none). Del mismo modo, para uniformar el color de los enlaces, es posible usar la propiedad de estilo color: valor;.

<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <style type="text/css"> a { text-decoration: none; color: black;} </style> <meta charset="iso-8859-1"> </head> <body> Ir a <a href="pagina1.htm">Pgina 1</a><br> Ir a <a href="pagina2.htm">Pgina 2</a><br> Ir a <a href="pagina3.htm">Pgina 3</a><br> </body> </html>

Descripcin acerca del enlace

El atributo title="texto" (que no es especfico a la etiqueta del enlace) permite mostrar una descripcin explicativa sobre el enlace cuando se pasa por encima el cursor del ratn. Este pequeo "extra" en ergonoma se aprecia especialmente, en trminos de accesibilidad, por las interfaces vocales que guan a los internautas invidentes. Implementada inicialmente por Internet Explorer, esta descripcin aparece en todos los navegadores de nuestro estudio.
<a href="pagina2.htm" title="Enlace al captulo 2">Sigue</a>

Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <a href="pagina2.htm" title="Enlace al captulo 2">Sigue</a> </body> </html>

Nuevas posibilidades con los enlaces

Los enlaces ya pueden contener cualquier elemento de tipo bloque como divisiones (<div>) y objetos de lista (<li>).

De este modo, el siguiente cdigo es vlido en Html5, mientras que no lo era en Html 4.0.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="es"> <head> <title>Html5</title> <style> div { width: 280px; height: 100px; border: 1px solid black; padding-left: 3px;} a { text-decoration: none; color: black;} </style> <meta charset="iso-8859-1"> </head> <body> <p>Haga clic en el extracto para leer el texto completo.</p> <a href="pagina2.htm"> <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam...</div> </a> </body> </html>

El cursor con forma de mano indica la existencia de un enlace sobre el conjunto de la divisin. Con el riesgo de desconcertar al usuario cuando esto se implemente!

TABLAS

Prembulo
El movimiento se inici con Html 4.0 y Xhtml 1.0, y se ha visto reforzado con Html5. Las tablas se reservan exclusivamente para la presentacin de datos. Ya no se considera, en una aplicacin Web moderna, el uso de tablas para realizar la disposicin de la pgina. Estas tablas de presentacin, en ocasiones anidadas dentro de otras tablas, eran el estndar de diseo de pginas Web en lo que podemos considerar como Web 1.0. La presencia de mltiples tablas recargaba el cdigo fuente y haca de su lectura algo casi imposible. Por otro lado, las tablas complejas complican en gran medida la lectura a las ayudas vocales usadas por personas invidentes. La disposicin de la pgina se asegura, ahora, mediante las etiquetas <div>. No hay nada nuevo en Html5 respecto a Html 4.0. Simplemente hay que destacar la desaparicin de muchos atributos de presentacin que ahora deben incluirse obligatoriamente en las hojas de estilo CSS. Detallaremos todo esto a continuacin. Todas las etiquetas y todos los atributos de Html5 relativos a las tablas son perfectamente compatibles con los navegadores del mercado.

Creacin de una tabla

Una tabla (<table>) se compone de filas <tr>. Estas filas contienen celdas <td>. La distribucin de las distintas etiquetas para mostrar una tabla sigue la lgica que se ilustra en el siguiente ejemplo:
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <table> <tr> <td>1</td><td>2</td> </tr> <tr> <td>3</td><td>4</td> </tr> </table> </body> </html>

La tabla en Html se construye as:

Se declara la apertura de la tabla con la etiqueta <table>. Esta tabla se compone de una primera fila, introducida por la etiqueta <tr>. Esta fila se compone de una primera celda, abierta con la etiqueta <td>. Tenemos un 1 como contenido nico de esta celda. Se cierra la primera celda </td>. Pasamos a la segunda celda <td>2</td>. Termina la primera fila con </tr>. Comienza la segunda fila con una nueva etiqueta <tr>. Esta fila contiene las celdas <td>3</td><td>4</td>. Termina la segunda fila con </tr>. Aparece por ltimo la etiqueta de cierre de la tabla </table>.

Comentarios

Esta etiqueta, bsica en Html, es compatible con todos los navegadores. La etiqueta <table> debe cerrarse obligatoriamente. En caso de que nos olvidemos la etiqueta de cierre </table>, corremos el riesgo de que la tabla no muestre todo su contenido o de que no se muestre correctamente.

Pasemos a los atributos de la etiqueta <table>. Para nuestra sorpresa, esta etiqueta ya no tiene atributos en Html5! De hecho, podramos haber escrito que ya no tiene atributos. Html 4.0 proporcionaba los atributos width, border, cellpadding, cellspacing, frame y rules. Todos estos atributos han desaparecido en Html5 y deben incluirse en las hojas de estilo CSS. Las etiquetas <tr> y <td> siguen el movimiento con la desaparicin de los atributos align y valign.

1. Ancho de la tabla
El ancho de la tabla se define mediante la propiedad de estilo CSS width (ancho). Ejemplo El cdigo anterior para una tabla de 250 pxeles es:
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> table { width: 250px;} </style> </head> <body> <table>

<tr> <td>1</td><td>2</td> </tr> <tr> <td>3</td><td>4</td> </tr> </table> </body> </html>

Tambin es posible determinar la altura de la tabla mediante la propiedad de estilo height.

<style> table { height: 150px;} </style>

2. Bordes de la tabla
Los bordes de una tabla y otros elementos Html se introducen mediante la propiedad de estilo CSS border (que significa borde). Para obtener los bordes clsicos de una tabla, la declaracin es un poco particular. Nuestro objetivo es agregar un borde de 1 pxel (1px), de color negro (black) con un trazo slido (solid).
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> table { border: 1px solid black; width: 250px;} </style> </head> <body> <table> <tr> <td>1</td><td>2</td> </tr> <tr> <td>3</td><td>4</td> </tr> </table> </body> </html>

El resultado no responde a lo que habamos esperado, y es lgico pues hemos indicado, con la propiedad de estilo, agregar un borde a la tabla (table). Tambin hay que indicar agregar el borde a las celdas <td> que componen la tabla (td).
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> table { border: 1px solid black; width: 250px;} td { border: 1px solid black; width: 33%;} </style> </head> <body> <table> <tr> <td>1</td><td>2</td> </tr> <tr> <td>3</td><td>4</td> </tr> </table> </body> </html>

Que tampoco responde al resultado previsto, pues subsiste un espacio entre el borde de la tabla y los bordes de las celdas (vestigio del atributo cellspacing para los iniciados). Para reducir ambos bordes a uno solo, se usa la propiedad de estilo border-collapse.
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> table { border: 1px solid black; border-collapse: collapse; width: 250px;} td { border: 1px solid black;} </style> </head> <body> <table> <tr> <td>1</td><td>2</td> </tr> <tr> <td>3</td><td>4</td> </tr> </table> </body>

</html>

Existen otras formas de bordes en CSS. Las detallaremos en la parte del libro dedicada a las hojas de estilo.

3. Alineacin de la tabla
La tabla est, en nuestro caso, alineada a la izquierda. Para obtener una alineacin centrada, hay que usar cierta argucia. El hecho de incluir un margen (margin) automtico a izquierda (left) y derecha (right) de la tabla provoca la alineacin centrada. Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> table { margin-left: auto; margin-right: auto; border: 1px solid black; border-collapse: collapse; width: 250px;} td { border: 1px solid black;} </style> </head> <body> <table> <tr> <td>1</td><td>2</td> </tr> <tr> <td>3</td><td>4</td> </tr> </table> </body> </html>

4. Alineacin de las celdas de la tabla

El contenido de las celdas est, en nuestro caso, alineado a la izquierda. Ser ms esttico centrarlo (center) en las celdas. Para ello se usa la propiedad de estilo text-align. Ejemplo
<!DOCTYPE html> <html lang="es"> <head>

<title>Html5</title> <meta charset="iso-8859-1"> <style> table { text-align: center; border: 1px solid black; border-collapse: collapse; width: 250px;} td { border: 1px solid black;} </style> </head> <body> <table> <tr> <td>1</td><td>2</td> </tr> <tr> <td>3</td><td>4</td> </tr> </table> </body> </html>

Comentario Con text-align: center aplicado a la tabla (<table>), todas las celdas de la tabla mostrarn el contenido centrado dentro de ellas.

Celdas de la tabla
Las celdas pueden contener cualquier elemento definido en Html, bien sea un texto, imgenes, un enlace, un fondo e incluso otra tablas. En Html5 han desaparecido los atributos width, height, align, valign, abbr, axis y scope de Html 4.0.

1. Ancho de las celdas

Por defecto, el navegador adapta el ancho de las celdas segn su contenido. Vea el siguiente ejemplo de una tabla con tres columnas sin especificaciones particulares.

Habr que recurrir a la propiedad de estilo width, pero aplicada en esta ocasin a la etiqueta <td>, para uniformar el ancho de las celdas. Ejemplo
<!DOCTYPE html>

<html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> table { border: 1px solid black; border-collapse: collapse; width: 250px;} td { border: 1px solid black; width: 33%;} </style> </head> <body> <table> <tr> <td>Celda 1</td><td>Cel 2</td><td>3</td> </tr> <tr> <td>Celda 4</td><td>Cel 5</td><td>6</td> </tr> </table> </body> </html>

2. Alineacin horizontal
El contenido de una celda puede alinearse a la izquierda, centrado o a la derecha. El resultado se obtiene mediante la propiedad de estilo text-align aplicada a una celda. La propiedad text-align puede tomar los valores left (izquierda), center (centrado) o right (derecha). El valor por defecto es left. Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> table { border: 1px solid black; border-collapse: collapse; width: 290px;} td { border: 1px solid black; width: 33%;} </style> </head> <body> <table> <tr> <td style="text-align: left;">Producto 1</td> <td style="text-align: center;">En stock</td> <td style="text-align: right;">3.43 </td> </tr>

<tr> <td style="text-align: left;">Producto 2</td> <td style="text-align: center;">En pedido</td> <td style="text-align: right;">6.72 </td> </tr> </table> </body> </html>

Aqu, la propiedad de estilo se ha aplicado directamente en el cdigo de la etiqueta <td> mediante style="text-align: xxx;" (estilo en lnea). Existen otras formas de implementar esta propiedad de estilo. Las descubrir en el estudio detallado de las hojas de estilo CSS.

3. Alineacin vertical
Por defecto, la alineacin vertical del contenido de una celda se realiza en la mitad de la celda. Esto puede provocar situaciones poco estticas a la hora de elaborar su tabla.

Es prudente prever una alineacin vertical hacia la parte superior mediante la propiedad de estilo vertical-align:top aplicada a las celdas <td>. Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> table { border: 1px solid black; border-collapse: collapse; width: 140px;} td { border: 1px solid black; vertical-align:top;} </style> </head> <body> <table> <tr> <td style="width: 10%;">1</td> <td>xxxxx xxxxx xxxxx xxxxx xxxxx</td> </tr> <tr> <td style="width: 10%;">2</td> <td>xxxxx xxxxx</td> </tr> <tr> <td style="width: 10%;">3</td> <td>xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx</td>

</tr> </table> </body> </html>

4. Margen interior de las celdas

En nuestras capturas de pantalla, el contenido de la celda est pegado al borde de la misma. Esto no resulta muy esttico y ensucia la legibilidad de los datos. La propiedad de estilo padding permite agregar un espacio entre el contenido de la celda y el borde de la misma. Es importante distinguir el margen exterior, llamado margin, del margen interior designado por el vocablo padding. Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> table { border: 1px solid black; border-collapse: collapse; width: 250px;} td { border: 1px solid black; padding: 15px;} </style> </head> <body> <table> <tr> <td>1</td><td>2</td><td>3</td> </tr> <tr> <td>4</td><td>5</td><td>6</td> </tr> </table> </body> </html>

Destacamos el hecho de que la propiedad de estilo padding ha agregado espacio por todo alrededor del contenido de la celda. Es posible agregar solamente un espacio entre el borde izquierdo y el contenido mediante la propiedad padding-left.
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1">

<style> table { text-align: center; border: 1px solid black; border-collapse: collapse; width: 250px;} td { border: 1px solid black; padding-left: 5px;} </style> </head> <body> <table> <tr> <td>1</td><td>2</td><td>3</td> </tr> <tr> <td>4</td><td>5</td><td>6</td> </tr> </table> </body> </html>

5. Color de fondo
Tras la desaparicin del atributo bgcolor, agregar un color de fondo se hace mediante la propiedad de estilo background-color. Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> table { text-align: center; border: 1px solid black; border-collapse: collapse; width: 250px;} td { border: 1px solid black;} .color { background-color: #99ccff;} </style> </head> <body> <table> <tr> <td>1</td> <td class="color">2</td> </tr> <tr> <td>3</td> <td class="color">4</td> </tr> </table>

</body> </html>

Esta propiedad de estilo de color de fondo background-color tambin puede aplicarse a las etiquetas <table> y <tr>. Aprenderemos con detalle la notacin de los colores en el captulo Nociones bsicas de CSS - Notacin de los colores.

Fusin de celdas
Es posible fusionar horizontalmente o verticalmente las celdas. Partiendo de una tabla con dos filas y tres columnas:
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> table { border: 1px solid black; border-collapse: collapse; width: 250px;} td { border: 1px solid black;} </style> </head> <body> <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table> </body> </html>

1. Fusin de columnas
Para fusionar columnas, Html5 proporciona el atributo de celda colspan="x" donde x se corresponde con el nmero de columnas que se desea fusionar.

Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> table { border: 1px solid black; border-collapse: collapse; width: 250px;} td { border: 1px solid black;} </style> </head> <body> <table> <tr> <td colspan="3" style="text-align: center;">Ttulo de la tabla</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table> </body> </html>

2. Fusin de filas
Para fusionar filas, Html5 proporciona el atributo de celda rowspan="x" donde x se corresponde con el nmero de filas que se desea fusionar verticalmente. Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> table { border: 1px solid black; border-collapse: collapse; width: 250px;} td { border: 1px solid black;} </style> </head> <body> <table> <tr> <td rowspan="2">1</td> <td>2</td> <td>3</td>

</tr> <tr> <td>5</td> <td>6</td> </tr> </table> </body> </html>

Comentario Se ha fusionado la primera columna de dos filas. Observe la alineacin vertical por defecto, centrada.

Celdas de encabezado
Las celdas de encabezado de columnas o de filas se definen mediante la etiqueta <th> ... </th>. Estas celdas proporcionan, de algn modo, ttulo a los datos de la columna o de la fila. En los navegadores visuales, el contenido de la etiqueta <th> aparece en gris y centrado. Puede ser por este motivo que los diseadores las dejan de lado. No obstante forma parte, histricamente, de las etiquetas de codificacin de tablas en Html. Destaquemos que su apariencia siempre puede modificarse mediante las hojas de estilo CSS. La etiqueta <th> se ha mantenido en la especificacin de Html5 pues resulta de gran utilidad para los lectores de pantalla usados por personas invidentes. Contribuye as a la accesibilidad de los sitios web y, particularmente, de las tablas que, si tienen cierta amplitud, se convierten en un verdadero problema a la hora de describirlas auditivamente. Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> table { border: 1px solid black; border-collapse: collapse; width: 250px;} td { border: 1px solid black;} </style> </head> <body> <table> <tr> <th>Atributo</th> <th>Funcin</th> </tr>

<tr> <td><i>colspan</i></td> <td>Para fusionar columnas</td> </tr> <tr> <td><i>rowspan</i></td> <td>Para fusionar filas</td> </tr> </table> </body> </html>