HTML5 y CSS3 Domine los estándares 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 diseño de sitios Web es necesario comprender y dominar bien el código fuente de las aplicaciones Web. El libro se ha concebido como una verdadera herramienta de información, pedagógico desde la primera hasta la última página, ilustrado abundantemente con ejemplos y capturas de pantalla, pensando siempre en su aplicación práctica por parte del Webmaster. De este modo se repasa el lenguaje HTML (teniendo en cuenta su última versión, llena de novedades), las hojas de estilo, incluyendo el espectacular avance que supone el estándar CSS3 en términos de presentación de páginas Web y algunos elementos de JavaScript… Esta obra no es una enciclopedia exhaustiva de todas estas técnicas sino un recorrido estructurado sobre ellas. Proporcionará tanto a los diseñadores principiantes como a los más experimentados las reglas rigurosas y esenciales del diseño profesional de un sitio Web. Por ello, el autor nos anima a elaborar un código respetuoso con las prescripciones del W3C y a separar el contenido (HTML) y la presentación (hojas de estilo CSS) tal y como recomienda, ahora más que nunca, el estándar HTML5. Muchas de las novedades abordadas en este libro sólo están disponibles en las versiones más recientes de los navegadores (Internet Explorer 9, Firefox 3.6 y 4, Google Chrome o Safari); por ello el autor ha prestado especial atención a la hora de elaborar un código compatible con los navegadores menos evolucionados y aprovechar desde ya este paso tan importante en el diseño de aplicaciones Web. Los muchos ejemplos del libro están disponibles para su descarga en la página Web de Ediciones ENI (www.ediciones-eni.com). Para todos aquellos lectores que quieran reproducir los ejemplos del libro de forma idéntica, las imágenes y el resto de elementos complementarios están a su disposición.
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
HTML5 y CSS3
Domine los estándares 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 diseño de sitios Web es necesario comprender y dominar bien el código fuente de las aplicaciones Web.
El libro se ha concebido como una verdadera herramienta de información, pedagógico desde la primera hasta la última página, ilustrado abundantemente con ejemplos y capturas de pantalla,
pensando siempre en su aplicación práctica por parte del Webmaster. De este modo se repasa el lenguaje HTML (teniendo en cuenta su última versión, llena de novedades), las hojas de estilo, incluyendo el espectacular avance que supone el estándar CSS3 en términos de presentación de páginas Web y algunos elementos de JavaScript… Esta obra no es una enciclopedia exhaustiva de todas estas técnicas sino un recorrido estructurado sobre ellas. Proporcionará tanto a los diseñadores principiantes como a los más experimentados las reglas rigurosas y esenciales del diseño profesional de un sitio Web. Por ello, el autor nos anima a elaborar un código respetuoso con las prescripciones del W3C y a separar el contenido (HTML)
y la presentación (hojas de estilo CSS) tal y como recomienda, ahora más que nunca, el estándar HTML5. Muchas de las novedades abordadas en este libro sólo están disponibles en las versiones más recientes de los navegadores (Internet Explorer 9, Firefox 3.6 y 4, Google Chrome o Safari); por ello el autor ha prestado especial atención a la hora de elaborar un código compatible con los navegadores menos evolucionados y aprovechar desde ya este paso tan importante en el diseño de aplicaciones Web. Los muchos ejemplos del libro están disponibles para su descarga en la página Web de Ediciones ENI (www.ediciones-eni.com). Para todos aquellos lectores que quieran reproducir los ejemplos del libro de forma idéntica, las imágenes y el resto de elementos complementarios están a su disposición.
Prólogo
Escribir este libro sobre Html5 y CSS3 ha sido una empresa muy motivante. Html no había
conocido ninguna evolución 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 versión 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 representación gráfica de las páginas con,
por ejemplo, bordes redondeados, transparencia de imágenes, sombras o tipografía especial.
Este libro sobre Html5 y hojas de estilo CSS3 quiere ser ante todo un libro estructurado y
formativo, más que un repaso exhaustivo de las novedades aportadas por ambas
tecnologías. Está dirigido a dos públicos diferenciados:
Aquellas personas que comiencen podrán aprehender las bases del lenguaje fuente
de las páginas de la red, a lo largo de los capítulos, 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 podrán a su vez afianzar su aprendizaje
respecto al diseño de páginas Web basándose en la última versión de Html que, a
día de hoy, ya está operacional en numerosos navegadores de última generación y
que será el estándar en los años que vienen.
Este libro está también dirigido a aquellos diseñadores 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 podrán descubrir las novedades reales de
Html5 gracias a los capítulos dedicados a los nuevos campos de formularios, el
diseño 2D, las nuevas etiquetas de audio y de vídeo y la introducción de JavaScript
con, por ejemplo, la información de geolocalización del usuario. El capítulo
dedicado a CSS3 les convencerá de la revolución que todo esto puede suponer en el
diseño de sus páginas Web, librándoles del paso obligado por programas de edición
gráfica.
Este libro supone también un punto de inflexión en los aspectos relacionados con el
aprendizaje del código fuente de las páginas de la red. En efecto, Html5 hace tabula rasa de
todos los aspectos relacionados con la presentación para dedicarse exclusivamente a la
estructura del documento. Ya no es posible por tanto en Html5 alinear un texto o algún otro
elemento, o modificar el diseño de los bordes de una tabla. Se termina también la definición
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 presentación 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 están ahora íntimamente enlazados.
Por este motivo nos ha parecido útil, e incluso indispensable, introducir desde el
aprendizaje de Html algunos elementos básicos relativos a las hojas de estilo. Esto permite
al alumno diseñar sus primeras aplicaciones de forma más realista y atractiva.
Profundicemos en el detalle de los capítulos. La parte sobre Html comienza con los
elementos básicos y tradicionales del aprendizaje del código fuente. Html5 es, en primer
lugar, la evolución de Html 4.0. Sigue siendo, por tanto, un lenguaje etiquetado. Los
primeros elementos de un aprendizaje progresivo conciernen al texto, la estructuración del
documento con títulos y listas, las tablas, las imágenes y su inserción, sin olvidar el
elemento esencial del lenguaje Html: los enlaces. A continuación, una serie de capítulos
abordan las novedades introducidas por Html5.
Las nuevas etiquetas semánticas, que permiten organizar el código 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 multiselección u otros botones diversos
entrañaban un hastío en el aspecto visual de la página. Las mejoras de Html5 a este
respecto van a revolucionar los formularios con la introducción de campos de texto
con sugerencias, calendarios, contadores numéricos, cursores, validaciones
integradas sin tener que pasar por JavaScript y muchas otras sorpresas que se
descubren en el capítulo dedicado a ellos.
Las nuevas etiquetas de audio y vídeo 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 diseño 2D abre nuevas perspectivas puesto que en adelante es posible, por
ejemplo, agregar gráficos directamente mediante código, sin tener que pasar por
capturas de pantallas de programas como Excel.
Por último, es preciso subrayar que Html5 supone la introducción de JavaScript
como actor privilegiado en la concepción de aplicaciones Web. Este último punto
aparece ilustrado por la geolocalización 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 estándares CSS1 y CSS2, elementales en adelante.
Se dedican varios capítulos a las hojas de estilo relativas a los tipos de fuente, al texto, a las
listas y las tablas, al color, a los márgenes interiores y exteriores, a las pseudo-clases y a las
hojas de estilo relativas a la visualización o al diseño de impresión. Esta parte finaliza con
las especificaciones CSS3 que van a modificar profundamente el aspecto visual de la
navegación por la red. Este capítulo no dejará de interesar a aquellos que, de cerca o de
lejos, trabajen con conceptos relacionados con el aspecto gráfico de los sitios Web. Entre
las principales aportaciones de estas hojas de estilo CSS3 podemos citar:
Bordes redondeados, que permiten escapar de la presentación rectangular y angular
de las divisiones.
Sombras, que es posible aplicar al texto o a las imágenes sin tener que pasar por una
aplicación gráfica.
Tipos de letra que el diseñador podrá, al fin, seleccionar libremente, marcando un
antes y un después en el uso tan esperado de la tipografía en el diseño de las páginas
Web.
Presentación de contenido textual en columnas.
Bordes decorados.
Múltiples fondos.
Degradaciones de color.
Posibilidad de jugar con la opacidad o la transparencia de elementos como las
imágenes.
Este libro es sin duda una obra densa, aunque se presenta con un lenguaje que hemos
querido hacer claro, formativo y pedagógico.
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 finalización de la especificación Html 4.0.
Dejando a parte una ligera revisión 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 estándares de escritura en la red, ¿no anunció en su momento
que Html, en su versión 4.0, no conocería ningún desarrollo posterior y, en breve, que Html
estaba muerto?
El W3C editó, también en 1998, el estándar 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 permitía al usuario definir su propio
lenguaje (comportándose como un metalenguaje) con sus distintos elementos. El W3C
recomendaba encarecidamente en la época XML para expresar lenguajes de marcado
específico.
Una de las primeras aplicaciones concretas de XML fue la reformulación de Html 4.0
según la sintaxis estricta y formalista de XML. Nacía así Xhtml 1.0 en el año 2000. Si bien
los desarrolladores saludaron unánimemente el rigor que Xhtml aportaba a la escritura de
código, es justo señalar que la migración a Xhtml no ha supuesto el éxito esperado e
incluso una gran parte de los diseñadores han permanecido fieles a Html 4.0, más laxo.
Muy rápidamente, el W3C puso en marcha el ambicioso proyecto de Xhtml 2.0 que debía
suponer un punto y aparte respecto al pasado en materia de publicación en la red. Esta
posición indujo a que Xhtml 2.0 no fuera compatible hacia atrás con todo lo que existía
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 creación 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 estándares por parte de W3C y al carácter
demasiado cerrado de su proceso interno de elaboración de especificaciones. En sus
orígenes 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
posición era diametralmente opuesta a la de Xhtml 2.0, trabajando de forma pragmática
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 publicación 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.
Parecía claro que Xhtml 2.0 tenía 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 pragmática, 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 después ha
sufrido numerosas evoluciones.
Pero los días de Xhtml 2.0 estaban contados. A finales de 2009, el mismo Sir Tim Berners-
Lee anuncia la disolución del grupo de trabajo sobre Xhtml 2.0 y el abandono definitivo de
este último.
Se anuncia la versión candidate recommendation (recomendación candidata) de Html5 para
2012 y, dada la amplitud de novedades anunciadas, la recomendación final para... 2022.
El anuncio de Html5 ha causado un gran revuelo (un buzz en el vocabulario moderno). Este
interés se ha concretizado rápidamente a diversos niveles. Google ha incorporado muy
rápidamente, desde la versión 5 de Chrome, elementos de Html5. También lo han hecho sus
compañeros en el WHATWG con las últimas versiones de Firefox, Safari y Opera. Incluso
Microsoft, a menudo rezagado en materia de adopción de novedades y estándares, ha
incorporado Html5 en la versión 9 de Internet Explorer. Por su lado, los teléfonos
smartphone también están adoptando el estándar Html5: Apple con el iPhone, RIM con
BlackBerry, Google con Google Phone, etc. ¿Se trata de una evolución o de una
revolución?
De forma paralela está en curso toda una reformulación de Html5 según las reglas y la
sintaxis de XML, bajo el nombre de Xhtml5.
De toda esta agitada actividad en torno a la gestación de Html5 nos quedaremos con:
Que ya no se hablará de páginas Web sino del concepto más amplio de aplicaciones
Web.
Que Html5 es una evolución (en efecto muy importante) de Html 4.0.
Que Html5 ha sido concebido directamente por los navegadores más innovadores
del mercado como Firefox, Safari Opera y Google. Esto garantiza una adopción
rápida de los estándares de Html5.
Que cabe esperar de Html5 grandes cambios en la elaboración de formularios (véase
los Web Forms 2.0).
Que después de una década sin novedades, Html5 responde a la necesidad real de
los diseñadores de renovar la interfaz de las aplicaciones Web.
Líneas maestras de Html5
Antes de detallar las novedades de Html5, esbocemos algunas de las líneas maestras de esta
nueva versión del lenguaje Html.
Html5 es una evolución de Html. Retoma los grandes principios, y los modifica
para mejorar ciertos aspectos. Ha sido diseñado para asegurar una compatibilidad
hacia atrás con todo lo que se ha desarrollado hasta el presente, en términos de
publicación sobre la Web.
A pesar de que el código es menos formal que Xhtml5, la exigencia de un código
propio, respetuoso con las reglas fundamentales del etiquetado, continúa existiendo.
El principio de separación entre el contenido y la presentación sigue siendo
conveniente e incluso se ve reforzado. El abandono de toda una serie de etiquetas y
de atributos de presentación (véase Etiquetas y atributos Html 4.0 desaparecidos de
este capítulo) 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 próximos años.
La simplificación del código y el deseo de evitar cualquier complicación inútil son
dos de los principios que han regido la elaboración de Html5. Encontraremos esta
simplificación y pragmatismo, por ejemplo, en un tipo de documento doctype nuevo
y simplificado, o en el código Html despojado de cualquier aspecto de presentación.
La caza de plugins que enturbian el código y complican la tarea de los diseñadores,
sustituidos por una integración directa en el navegador. Las nuevas etiquetas de
audio y de vídeo son un buen ejemplo.
El reconocimiento de JavaScript como socio de Html5 a la hora de la publicación en
la red. También de los scripts clásicos usados a la hora de verificar la introducción
correcta de datos o la validez de una dirección de correo electrónico en los
formularios. Html5 evita estas codificaciones, redundantes, haciendo que los
navegadores incluyan de forma nativa este tipo de funciones. Otro ejemplo es el
código para el diseño 2D y muy pronto 3D (etiqueta <canvas>), mucho más
próximo a JavaScript que a un lenguaje etiquetado.
Html5 se convierte a su vez en una plataforma de interfaces de aplicación (APIs)
que integran funcionalidades complejas como la geolocalización, la edición en línea
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.
Supresión de etiquetas y atributos de presentación.
Nuevas etiquetas semánticas o de organización.
Nuevas etiquetas de audio y de vídeo que ya no necesitan más plugins dedicados.
Diseño 2D y muy pronto 3D gracias a la nueva etiqueta <canvas>.
Profusión de formularios innovadores como por ejemplo cursores o calendarios, y la
integración de forma nativa en los navegadores de la validación 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 generación. La implantación actual de Html5 ya nos permite
descubrirlo y utilizarlo. Será preciso no obstante señalar que la integración de Html5 no es
del todo completa aún. Todavía 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 permitirán a la tipografía encontrar, por fin, su
sitio en las interfaces Web.
Presentación de un texto en varias columnas.
Sombras aplicadas al texto y al resto de elementos.
Degradados de color.
Múltiples fondos.
Opacidad o transparencia.
Transformaciones.
Transiciones (sin JavaScript).
Estas nuevas especificaciones CSS3 ya están disponibles en las versiones más recientes de
los navegadores y, en particular, en los navegadores de nuestro estudio (véase la sección
"Los navegadores de nuestro estudio" en este capítulo). No cabe duda de que CSS3 va a
revolucionar la forma de diseñar y de explotar las interfaces Web en los próximos meses y
años.
Las aplicaciones JsAPI
La geolocalización permite localizar al usuario (con su permiso) mediante
coordenadas de longitud y latitud.
Las súper cookies con Web Storage permiten guardar una cantidad mayor de datos
en el navegador.
Posibilidad de utilizar aplicaciones Web en modo sin conexión 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 página.
Nuevos elementos Websockets que permiten establecer una comunicación
bidireccional asíncrona entre el navegador y el servidor.
Opción deslizar-soltar (drag/drop) de forma nativa en el navegador.
El atributo ContentEditable habilita la edición en línea del contenido de un
elemento. Da la apariencia de un editor WYSIWYG básico que permite de este
modo editar directamente el contenido en la página. Todas las modificaciones
realizadas por el usuario se podrán procesar al finalizar la edición.
Etc.
Estas aplicaciones sobrepasan de largo el marco de este libro dedicado al aprendizaje de
Html5. Algunas ya están implementadas en los navegadores más recientes, otras no.
Hablaremos no obstante brevemente de la geolocalización en un capítulo, debido a su
apariencia espectacular e intrigante.
Algunas de estas funciones ya están 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, también 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 continuación 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 daría el resultado siguiente:
¡Es importante aprender el lenguaje Html5!
El lenguaje Html no es ni más ni menos que esto. Cada vez que se indica una instrucción al
navegador, por ejemplo insertar un título, empezar a escribir una tabla o realizar un vínculo
a otra página, se aplica una etiqueta de apertura. La etiqueta de cierre señala al navegador
que la instrucción se ha terminado.
Existe no obstante una excepción, pues Html5 ha heredado de Html las etiquetas únicas,
también llamadas etiquetas vacías, que no tienen etiqueta de cierre.
Por ejemplo, la etiqueta imagen <img>.
Para asegurar la compatibilidad hacia atrás con Xhtml, estas etiquetas también pueden
escribirse en Html5 con un signo de cierre.
De este modo, la etiqueta imagen <img> también puede escribirse en Xhtml <img />.
El espacio situado antes de la barra oblicua de cierre es importante por motivos de
compatibilidad con los navegadores más antiguos.
Algo que nos limita en cierto modo, a nosotros los castellanoparlantes, es el hecho de que
las etiquetas hacen referencia a términos o abreviaturas de términos anglosajones
volviéndolas (en un primer momento) abstractas y complejas.
Ejemplos
<b> b por bold que significa negrita
<i> i por italic que significa cursiva
<p> p por paragraph que significa párrafo
<div> div por division que significa... división
<table> table significa tabla
<form> form significa formulario
<img /> img para imagen
Etc.
2. Atributos de etiqueta
En ocasiones es preciso completar una instrucción con especificaciones más 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 instrucción 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 después del signo igual.
Es posible usar varios atributos, separados por espacio, en una misma etiqueta: <etiqueta
Este atributo de momento está implementado muy parcialmente en los navegadores más
recientes.
target
Especifica al navegador la forma de visualizar el destino del enlace. Puede ser en una nueva
instancia o en una nueva pestaña del navegador (target="_blank"), en la misma ventana de
la página de origen del enlace (target="_self") y en la misma ventana pero ocupando toda la
ventana del navegador.
Volveremos con más detalle sobre este atributo en la sección "Enlaces hacia una ventana
específica" de este capítulo.
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 especificación 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 sección "Enlaces al interior de
una página" de este capítulo.
Enlaces a otra página
Los primeros enlaces a la hora de comprender la publicación en la Web apuntan a otra
página situada en el sitio Web (dirección relativa).
Para crear un sitio Web, se aconseja agrupar todos los archivos relativos al sitio en una
única carpeta. Siéntase libre a la hora de crear subcarpetas en esta carpeta.
1. Enlaces a una página situada en la misma carpeta
La dirección relativa nos causará problemas en el caso de tener una arborescencia de
archivos compleja.
Comencemos nuestro estudio por el caso más sencillo. Considere dos archivos
(pagina1.htm y pagina2.htm) situados en la misma carpeta.
Insertemos en la página 1 un enlace hacia la página 2.
El código del enlace en la página 1 es:
<a href="pagina2.htm">Enlace hacia la página 2</a>
Es imprescindible respetar escrupulosamente las mayúsculas y minúsculas 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 página 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 diseño de la ruta de acceso al archivo puede volverse un poco desconcertante, pues el
método de direccionamiento está inspirado en el adoptado por Unix, poco familiar para los
diseñadores habituados a Windows.
Veamos la situación siguiente: la carpeta de origen correspondiente a la raíz 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 código de indice.htm es:
<a href="carpeta1/pagina1.htm">Texto del enlace</a>
Comentarios
El archivo indice.htm y la carpeta carpeta1 se sitúan 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 código 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 notación "../". 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 código 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 notación "../". Descendiendo llegamos
directamente a indice.htm.
Enlaces al interior de una página
En una página de cierta importancia, generalmente de tipo texto, es interesante poder llevar
al usuario a un lugar concreto del documento. Se utiliza la técnica de las anclas (anchor) o
puntos de fijación.
Este enlace al interior de la página se realiza en dos tiempos:
La declaración del ancla.
El enlace hacia el ancla.
Declaración del ancla
Las anclas van a definir un lugar en la página, lo que permitirá después hacer un enlace
hacia ella.
La sintaxis de creación de un ancla es:
<a id="nombre del ancla"></a>
Con la desaparición del atributo name en Html5, la declaración de anclaje se realiza
mediante un identificador id. Este ya era el caso en Xhtml 1.0.
Nótese que el ancla no se visualiza en el navegador.
Enlace hacia un ancla situada en la misma página
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 capítulo 2</a>
<h3>Capítulo 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>Capítulo 2</h3>
<a id="capitulo2"></a>
<p>Contenido del capítulo 2</p>
</body>
</html>
Enlace hacia un ancla situada en otra página
El principio es el mismo aunque habrá que definir también la dirección (relativa o absoluta)
de la página.
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 páginas de otros sitios situados en otra dirección en la
Web. El destino indicado en la etiqueta de enlace será la dirección completa del sitio o de la