100% encontró este documento útil (4 votos)

4K vistas482 páginas

Html5-Avanzado

Cargado por

Edison Balvín

Derechos de autor

Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.

Formatos disponibles

Descarga como PDF, TXT o lee en línea desde Scribd

100% encontró este documento útil (4 votos)

4K vistas482 páginas

Html5-Avanzado

Cargado por

Edison Balvín

Derechos de autor

Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.

Formatos disponibles

Descarga como PDF, TXT o lee en línea desde Scribd

Está en la página 1/ 482

Dogram Code

https://dogramcode.com/programacion
HTML
&
CSS CU RSO PRÁCT I CO

Sergio Luján Mora

Este libro dispone de un sitio web en el que se encuentra el código

fuente de los ejemplos desarrollados. La URL del mismo es:
http://desarrolloweb.dlsi.ua.es/libros/html-css/

https://dogramcode.com/programacion
Revisión:
Marta Giménez, Miriam Msaoury y Jordi Nicolás Soler Datos catalográficos
Luján, Sergio
HTML & CSS: Curso práctico avanzado
Primera Edición
Alfaomega Grupo Editor, S.A. de C.V., México
ISBN: 978-607-622-595-0
Formato: 17 x 23 cm Páginas: 484

HTML & CSS: Curso práctico avanzado

Sergio Luján Mora
ISBN: 978-84-944049-4-8, edición en español publicada por Publicaciones Altaria S.L.,
Tarragona, España
Derechos reservados © PUBLICACIONES ALTARIA, S.L.
Primera edición: Alfaomega Grupo Editor, México, enero 2016

© 2016 Alfaomega Grupo Editor, S.A. de C.V.

Pitágoras 1139, Col. Del Valle, 03100, México D.F.

Miembro de la Cámara Nacional de la Industria Editorial Mexicana

Registro No. 2317

Pág. Web: http://www.alfaomega.com.mx

E-mail: [email protected]

ISBN: 978-607-622-595-0

Derechos reservados:
Esta obra es propiedad intelectual de su autor y los derechos de publicación en lengua
española han sido legalmente transferidos al editor. Prohibida su reproducción parcial o total
por cualquier medio sin permiso por escrito del propietario de los derechos del copyright.

Nota importante:
La información contenida en esta obra tiene un fin exclusivamente didáctico y, por lo tanto,
no está previsto su aprovechamiento a nivel profesional o industrial. Las indicaciones
técnicas y programas incluidos, han sido elaborados con gran cuidado por el autor y
reproducidos bajo estrictas normas de control. ALFAOMEGA GRUPO EDITOR, S.A. de
C.V. no será jurídicamente responsable por: errores u omisiones; daños y perjuicios que se
pudieran atribuir al uso de la información comprendida en este libro, ni por la utilización
indebida que pudiera dársele.
Edición autorizada para venta en México y todo el continente americano.
Impreso en México. Printed in Mexico.

Empresas del grupo:

México: Alfaomega Grupo Editor, S.A. de C.V. – Pitágoras 1139, Col. Del Valle, México, D.F. – C.P. 03100.
Tel.: (52-55) 5575-5022 – Fax: (52-55) 5575-2420 / 2490. Sin costo: 01-800-020-4396
E-mail: [email protected]
Colombia: Alfaomega Colombiana S.A. – Calle 62 No. 20-46, Barrio San Luis, Bogotá, Colombia,
Tels.: (57-1) 746 0102 / 210 0415 – E-mail: [email protected]
Chile: Alfaomega Grupo Editor, S.A. – Av. Providencia 1443. Oficina 24, Santiago, Chile
Tel.: (56-2) 2235-4248 – Fax: (56-2) 2235-5786 – E-mail: [email protected]
Argentina: Alfaomega Grupo Editor Argentino, S.A. – Paraguay 1307 P.B. Of. 11, C.P. 1057, Buenos Aires,
Argentina, – Tel./Fax: (54-11) 4811-0887 y 4811 7183 – E-mail: [email protected]

https://dogramcode.com/programacion
Índice general
Capítulo 1
Preámbulo...................................................................... 13
Introducción ..................................................................... 13
¿Para quién es este libro?............................................... 14
El desarrollo de las páginas web ..................................... 16
Estructura del libro........................................................... 16
Convenciones tipográﬁcas .............................................. 17
Sitio web del libro ............................................................ 20
Sugerencias y errores ..................................................... 20

PARTE I
CONCEPTOS GENERALES .............21
Capítulo 2
Estructura de un sitio web .......................................... 23
Qué es un sitio web ......................................................... 24
Contenido de un sitio web ............................................... 28
Estructura física ............................................................... 32
Las URL ...........................................................................................35
Nombres de los directorios y de los ﬁcheros ...................................38
Las URL amigables ......................................................... 39
Tipos de direcciones ........................................................................41
Estructura lógica .............................................................. 43
Estructura secuencial.......................................................................44
Estructura en rejilla ..........................................................................47
Estructura en árbol...........................................................................48
Estructura en red .............................................................................50
Estructura mixta ...............................................................................50
Comparativa.....................................................................................51
Cómo no perderse en la estructura de un sitio web ........................52
Consejos.......................................................................... 60
© Alfaomega - Altaria 5
https://dogramcode.com/programacion
Capítulo 3
Los estándares web ...................................................... 63
Los estándares ................................................................ 64
El World Wide Web Consortium 1 ...................................... 66
El juego de caracteres .....................................................................69
Fuentes de información ................................................... 72
Microsoft Developer Network ...........................................................72
Mozilla Developer Network ..............................................................74
W3Schools .......................................................................................76

PARTE II
HTML..................................................79

Capítulo 4
El lenguaje de marcado de hipertexto ...................... 81
Introducción ..................................................................... 82
Evolución de HTML ......................................................... 82
HTML5 ............................................................................. 88
¿Por qué se pueden seguir empleando características
obsoletas en las páginas web? ........................................................91
Diferencias entre HTML y XHTML ................................... 92
Qué recursos necesito para escribir HTML ..................... 96
ﬂ
Conceptos básicos de HTML .......................................... 99
Estructura de una página web ....................................... 104
Variantes de XHTML 1.0................................................ 109
Cómo escribir texto en una página web ........................ 110
Cómo comprobar que una página web está
bien escrita .................................................................... 113
Por qué es importante escribir código correcto ............. 118
Caracteres especiales y secuencias de escape............ 125
Elementos en línea o en bloque .................................... 128
Metadatos ...................................................................... 128
Novedades en HTML5 ...................................................................132

6 © Alfaomega - Altaria

https://dogramcode.com/programacion
Capítulo 5
La estructura de la página ......................................... 135
Encabezados de sección............................................... 136
Nuevos elementos de HTML5 ....................................... 138

Capítulo 6
El texto .......................................................................... 151
Semántica del texto ....................................................... 152
Edición ........................................................................... 158
Semántica de bloques de texto ..................................... 160
Líneas horizontales ....................................................... 163

Capítulo 7
Enlaces .......................................................................... 165
El hipertexto................................................................... 165
Enlace a un punto del mismo documento ......................................167
Enlace a otro documento ...............................................................173
Enlace a un punto de otro documento ...........................................175
Apertura de un enlace en una ventana nueva ...............................177
Evitar que un buscador siga un enlace ..........................................178
Envío de un correo electrónico ......................................................179

Capítulo 8
Listas ............................................................................. 183
Tipos de listas ................................................................ 183
Listas de deﬁnición ........................................................ 184
Listas ordenadas ........................................................... 186
Listas no ordenadas ...................................................... 187

Capítulo 9
Tablas............................................................................ 191
Tablas .......................................................................... 191
Unión de ﬁlas y columnas.............................................. 198
© Alfaomega - Altaria 7
https://dogramcode.com/programacion
Tablas invisibles............................................................. 200
Alineamiento del contenido de una tabla ...................... 203
Distancia entre celdas ................................................... 207

Capítulo 10
Imágenes ...................................................................... 211
Formatos de imagen...................................................... 212
El formato GIF................................................................................213
El formato JPEG ............................................................................216
El formato PNG ..............................................................................220
Cómo insertar una imagen en una página web ............. 223
El atributo alt ..................................................................................224
El atributo longdesc .......................................................................225
Imágenes como fondo de una página ........................... 228
Novedades en HTML5................................................... 228
La etiqueta <ﬁgure> .......................................................................228
La etiqueta <canvas>.....................................................................231
SVG ...............................................................................................233

Capítulo 11
Formularios ................................................................. 241
Los formularios .............................................................. 241
Controles tradicionales de un formulario ....................... 243
Campos de texto y de contraseña .................................................248
Campos de veriﬁcación..................................................................250
Campos excluyentes......................................................................250
Envío de ﬁcheros ...........................................................................250
Campos ocultos .............................................................................253
Listas de selección.........................................................................254
Áreas de texto ................................................................................257
Etiquetas de campos .....................................................................259
Eventos ..........................................................................................261
Novedades en HTML5................................................... 263
Alineamiento de formularios .......................................... 272

8 © Alfaomega - Altaria

https://dogramcode.com/programacion
Capítulo 12
Multimedia .................................................................. 283
Vídeo ............................................................................. 283
Audio ............................................................................. 290

PARTE III
CSS ..........................................295

Capítulo 13
Las hojas de estilo en cascada .................................. 297
Evolución de CSS.......................................................... 298
Separación del contenido y la presentación .................. 302
Conceptos básicos de CSS ........................................... 306
Cómo aplicar los estilos................................................. 307
Comentarios...................................................................................313
Estilos para diferentes dispositivos ................................................314
Estilos alternativos .........................................................................317
Estilos persistente, preferido y alternativo .....................................320
Cómo validar una hoja de estilo en cascada ................. 320
Lenguaje de estilo por defecto .......................................................324
Compatibilidad con los navegadores............................. 329

Capítulo 14
El color .......................................................................... 337
Introducción ................................................................... 337
Nombres básicos de colores ......................................... 338
Nombres extendidos de colores .................................... 339
Código hexadecimal ...................................................... 339
Código RGB decimal o en porcentaje ........................... 340
Código RGBA decimal o en porcentaje ......................... 341
Código HSL ................................................................... 342
Código HSLA ................................................................. 343

© Alfaomega - Altaria 9
https://dogramcode.com/programacion
Capítulo 15
Selectores, unidades y funciones ............................ 345
Selectores...................................................................... 345
Selectores en CSS3 ...................................................... 351
Unidades de medida...................................................... 354
Funciones ...................................................................... 355
Elementos en línea o en bloque .................................... 357
Recomendaciones para escribir una hoja de
estilo correcta ................................................................ 361

Capítulo 16
El texto .......................................................................... 365
La propiedad font........................................................... 366
Tipos de letra de reserva ...............................................................370
Uso de cualquier tipo de letra ........................................................371
Propiedades del texto .................................................... 376
Sangría .......................................................................... 377
Alineación ...................................................................... 379
Decoración .................................................................... 382
Sombra .......................................................................... 383
Cambio de minúsculas y mayúsculas ........................... 389
Espaciado de letras, palabras y líneas .......................... 392
Espacios en blanco ....................................................... 394

Capítulo 17
Tablas............................................................................ 399
Los antiguos atributos de la tabla .................................. 399
El título de la tabla ......................................................... 403
Estilo cebra .................................................................... 405

10 © Alfaomega - Altaria

https://dogramcode.com/programacion
Capítulo 18
Transformaciones....................................................... 409
Introducción ................................................................... 409
Escalar........................................................................... 410
Rotar .............................................................................. 412
Sesgar ........................................................................... 413
Trasladar ....................................................................... 415
Varias transformaciones a la vez................................... 415

Capítulo 19
Transiciones ................................................................ 417
Introducción ................................................................... 417
Propiedades que pueden ser animadas ........................ 419
Funciones de intervalos de transición ........................... 422

Capítulo 20
Diseño .......................................................................... 427
Maquetación de una página web................................... 428
El modelo de caja .......................................................... 430
El relleno ........................................................................................434
El borde..........................................................................................435
Ancho del borde......................................................................................................436
Estilo del borde .......................................................................................................437
Color del borde .......................................................................................................440
Propiedades resumidas del borde ..........................................................................444
El margen.......................................................................................446
El contorno..............................................................................................................450
Posicionamiento ............................................................ 452
Estilos de diseños.......................................................... 457
Diseño ﬁjo ...................................................................... 458
Diseño líquido o ﬂuido....................................................................462
Diseño elástico...............................................................................468
Diseño híbrido ................................................................................473
Diseño adaptativo o adaptable ......................................................477
Separación de la presentación y la maquetación .......... 483

Accede a la Biblioteca Online +300 libros en PDF Gratis!

https://dogramcode.com/biblioteca
Únete al Canal de Telegram
https://t.me/bibliotecagratis_dogramcode
Únete al grupo de Facebook
https://www.facebook.com/groups/librosyrecursosdeprogramacion

https://dogramcode.com/programacion
1
Preámbulo

Introducción
La World Wide Web, también conocida como la Web, la Red de redes o
simplemente “la Red”, es un sistema mundial de servidores conectados a
Internet que fue desarrollada entre marzo de 1989 y diciembre de 1990
por el inglés Tim Berners-Lee con la ayuda del belga Robert Cailliau
mientras trabajaban en la Organización Europea para la Investigación
Nuclear (CERN).
Hoy en día, aprender algo nuevo, por muy pequeño o muy raro que
sea, se encuentra a nuestro alcance gracias a la Web. En la Web podemos
encontrar millones de recursos sobre cualquier tema. Pero esta abun-
dancia de información, que supone una gran ventaja, también puede ser
un problema. ¿Por dónde se debe empezar a aprender algo nuevo? ¿Qué
recursos son conﬁables? ¿Qué recursos están actualizados?
Con todo ello, cabe esperar que en la Web se puedan encontrar nu-
merosos recursos para aprender sobre la misma Web o el desarrollo de
las páginas web. Y efectivamente así es, pero esta abundancia de infor-
mación puede ser un impedimento para el correcto aprendizaje y de ahí
la creación de este libro, cuyo objetivo principal es el de servir de guía
para ayudar al usuario que quiera aprender a desarrollar páginas web
de forma autodidacta si lo desea realmente. Para ello, se ha sintetizado
y resumido lo más importante, lo esencial que se debe aprender, pero
también se han incluido numerosas referencias para ampliar la infor-
mación facilitada.

Pero, ¿por qué aprender a desarrollar páginas web? ¿Quién debe

aprender a hacer páginas web?

¿Para quién es este libro?

Desde hace años vivimos inmersos en la Sociedad de la Información,
la sucesora de la Sociedad Industrial. En la Sociedad de la Información
las tecnologías facilitan la creación, la distribución y la manipulación de
la información en todas las facetas de la vida (actividades sociales, per-
sonales, culturales y económicas). Para poder participar correctamente
en todas estas facetas de la vida es necesario tener unos conocimientos
mínimos de la tecnología que se emplea.
En el año 1995, el visionario Steve Jobs ya aseguraba que todo el
mundo debía aprender a programar un ordenador:
Everybody in this country should learn how to program
a computer, should learn a computer language, because
it teaches you how to think. It’s like going to law school.
I don’t think anybody should be a lawyer, but going to
law school can actually be useful because it teaches you
how to think in a certain way... I view computer science
as a liberal art.
Traducción: Todo el mundo en este país debería aprender a programar un
ordenador, debería aprender un lenguaje de programación, ya que te enseña
a pensar. Es como ir a la facultad de derecho. Yo no creo que todo el mundo
debiera ser abogado, pero ir a la facultad de derecho puede ser realmente
útil, ya que te enseña a pensar de una determinada manera... Yo veo la in-
formática como un arte.

Steve Jobs, “The Lost Interview”, 1995

Fuente: The Most Interes ng Things Steve Jobs Said In A “Lost” Interview
Showing Next Week, h p://www.businessinsider.com/the-best-quotes-
from-the-lost-steve-jobs-interview-showing-this-weekend-2011-11
Tim Berners-Lee, el padre de la Web, defendía en enero de 2013 la
importancia de que los niños entendieran cómo funcionan los ordenado-
res y aprendieran a programarlos desde los primeros niveles educativos:
I think we have to be careful about prejudging what’s good
and what’s bad in certain things.
But learning to understand a computer, learning actually
how a computer ticks and being able to program it is in
fact a high idea. It’s very important in education with this
computer science, which is understanding the philosophy
14 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

of computer and the mathematics of computing, and learn-

ing to really build stuff, it’s very different from the IT class,
and I think making that distinction very clear and maybe
early on in schools is very important.
Traducción: Creo que tenemos que tener cuidado con prejuzgar lo que es bueno
y lo que es malo en ciertas cosas. Pero aprender a entender un ordenador,
aprender realmente cómo un ordenador hace tictac y ser capaz de programar
es en realidad una gran idea. Es muy importante en educación incluir la
ciencia de la computación, que es la comprensión de la ﬁlosofía del ordenador
y las matemáticas de la computación, y aprender a construir realmente las
cosas, es muy diferente de la clase de TI, y creo que hacer esa distinción muy
clara y tal vez desde los primeros niveles en las escuelas es muy importante.

Fuente: An Insight, An Idea with Tim Berners Lee, h p://livestream.com/

wef/am13channel3jan25/videos/10081712
Y más recientemente, en noviembre de 2014, Tim Berners-Lee incluso
pidió que los políticos aprendieran a programar:
Being able to code means that you understand what people
can do with a computer. You need to be able to understand
what people can do with a computer to make laws about it.
We need more people in parliament who can code, not be-
cause we need them to spend their time coding but because
they have got to understand how powerful a weapon it is,
so that they can make laws that require people to code to
make machines behave in different ways.
Traducción: Ser capaz de programar signiﬁca que entiendes lo que la gente
puede hacer con un ordenador. Tienes que ser capaz de entender lo que la
gente puede hacer con un ordenador para hacer leyes al respecto.
Necesitamos más gente en el parlamento que pueda programar, no porque
necesitamos que pasen su tiempo programando, sino porque tienen que
entender como de poderosa es un arma, para que puedan hacer leyes que
requieran que las personas programen para que las máquinas se comporten
de diferentes formas.

Fuente: Tim Berners-Lee: we need more MPs who know how to code,
h p://www.theguardian.com/technology/media-network-blog/2014/
nov/17/sir- m-berners-lee-we-need-more-mps-who-know-how-to-code
Desde hace unos pocos años muchos aspectos de nuestras vidas se
desarrollan a través de la Web: nos comunicamos, compramos o tra-
bajamos a través de la Web. Si tenemos en cuenta lo que decían Steve
Jobs y Tim Berners-Lee, todo el mundo debería aprender cómo funciona
la Web y cómo se desarrollan las páginas web. Este libro es adecuado
para cualquiera que crea en lo anterior, para cualquiera que tenga in-
terés en aprender a desarrollar sus propias páginas. No son necesarios

conocimientos previos para el seguimiento del contenido, lo único que

es necesario es saber utilizar un ordenador y saber navegar por la Web.

El desarrollo de las páginas web

Los estándares web son las tecnologías establecidas por el World Wide
Web Consortium (W3C) y otros organismos internacionales de estandari-
zación como la European Computer Manufacturers Association (ECMA).
Los estándares web también incluyen las mejores prácticas estandari-
zadas para construir sitios web usables y accesibles.
Cuando se indica que una página web se adhiere a los estándares
web significa que en su desarrollo se han empleado las tecnologías que
forman parte de los estándares web:
• Los lenguajes de marcado: HTML, XHTML y XML.
• Los lenguajes de presentación: CSS, MathML y SVG.
• El modelo de objetos de documento: DOM.
• Los lenguajes de script: JavaScript.
El contenido de este libro explica las dos tecnologías más importantes
para el desarrollo de páginas web, el lenguaje de marcado HyperText
Markup Language (HTML) y el lenguaje de presentación Cascading
Style Sheet (CSS).
Un lenguaje de marcado, como HTML, está compuesto por etiquetas
que definen la estructura de una página web. Un lenguaje de marcado
no es un lenguaje de programación, sino simplemente un lenguaje de
etiquetas o marcas que, interpretadas por un navegador web, definen
cómo mostrar la información.
Un lenguaje de presentación, como CSS, es un conjunto de instruc-
ciones que definen la presentación de un documento electrónico como
una página HTML. Un lenguaje de presentación tampoco es un lenguaje
de programación. Un lenguaje de presentación puede definir el color, el
tamaño de letra, la tipografía y la posición de los elementos que compo-
nen una página web.

Estructura del libro

El contenido de este libro se estructura en tres partes: conceptos ge-
nerales, HTML y CSS.
16 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

En la primera parte del libro se explican algunos conceptos generales

que es necesario poseer para poder desarrollar las páginas web. Por un
lado, se introducen los conceptos de sitio web, estructura física y es-
tructura lógica (o estructura de navegación) de un sitio web. También se
explica cómo influye la estructura física en las URLs o direcciones que
se emplean a la hora de crear los enlaces en un sitio web. Los enlaces,
también llamados “hiperenlaces”, “vínculos”, “hipervínculos” o “ligas”,
permiten relacionar distintas páginas entre sí y es la base del hipertexto,
la característica principal y diferenciadora de las páginas web. Por algo
el lenguaje que se emplea para crear las páginas web se llama “Lengua-
je de marcado de hipertexto”. Por otro lado, se explica el concepto de
“estándar web”, un término general que se emplea para referirse a los
estándares que definen el funcionamiento de las diferentes partes de la
Web. En este libro, los estándares web que se explican son HTML y CSS,
los que se emplean para el desarrollo de las páginas web en el lado del
cliente. Además, se indican varias fuentes de información confiables para
complementar y ampliar todo lo explicado en este libro.
En la segunda parte se explica HTML, el lenguaje que se emplea para
definir la estructura y contenido de las páginas web. Se presenta la es-
tructura básica de una página web y se explican las etiquetas de HTML
que se utilizan para definir el texto, los enlaces, las listas, las tablas,
los formularios y los elementos multimedia como el audio y el vídeo. En
esta parte del libro existe un capítulo esencial en el que se explica la
transición de HTML4 a HTML5.
En la tercera parte se explica CSS, el lenguaje que se emplea para
definir la presentación de una página web. Se explica qué son las hojas
de estilo en cascada, las diferentes formas de utilizarlas en una página
web, cómo utilizar el color, cómo definir la presentación del texto, de las
tablas y de los formularios, cómo realizar transformaciones y transiciones
y diseñar una página web.
El contenido del libro no se limita únicamente a los aspectos tecno-
lógicos del desarrollo de páginas web. A lo largo del libro se pueden en-
contrar números consejos sobre usabilidad, accesibilidad y diseño que
son necesarios para desarrollar páginas web correctas y que satisfagan
las necesidades de los futuros visitantes.

Convenciones tipográficas
Con el fin de mejorar la legibilidad del texto, distintas convenciones
tipográficas se han empleado a lo largo de todo el libro.

Las palabras clave o los pequeños fragmentos de código en línea se

han indicado con un tipo de letra de paso ﬁjo (Courier ).
Los ejemplos, que normalmente están completos y por tanto se pueden
escribir y probar, aparecen destacados y numerados dentro de una caja
de la siguiente forma:

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”u -8”>
< tle>Plan lla base de HTML5 con la sintaxis de HTML</ tle>
</head>
<body>
<p>Contenido a visualizar en la página web.</p>
</body>
</html>

Existen tres tipos de cuadros que complementan el texto principal del

libro: “Consejo”, “Más información” y “Advertencia”.
En el cuadro “Consejo”, como el que se muestra a continuación, se
proporcionan indicaciones sobre cómo hacer o no hacer algo. En la ma-
yoría de los casos, el “Consejo” incluye su fuente.

Consejo

Lleva a los usuarios a tu página de inicio “real” cuando escriban la URL principal o
hagan clic en un enlace a tu si o. Las pantallas de presentación deben morir. Una
excepción: si tu si o con ene material que es inapropiado para menores de edad
o que es suscep ble de ofender a algunos usuarios, entonces sí que es conveniente
tener una pantalla de presentación que sirva de advertencia sobre el contenido.
Fuente: 113 Design Guidelines for Homepage Usability, Jakob Nielsen

h p://www.nngroup.com/ar cles/113-design-guidelines-homepage-usability/

En el cuadro “Más información”, como el que se muestra a continua-

ción, se proporciona alguna fuente de información que puede ayudar a
complementar o ampliar lo explicado en el texto.

18 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

Más información
h p://youtu.be/qqJf0EK0aFs

¿Qué son las URLs? ¿Qué partes

componen una URL?

En el cuadro “Advertencia”, como el que se muestra a continuación,

se hace hincapié en una parte de lo que se ha explicado que es muy
importante recordar o que puede generar algún error si no se cumple.

Advertencia

Recuerda: la sintaxis HTML no es sensible a mayúsculas y minúsculas, pero la sin-

taxis XHTML sí que lo es. <HTML>, <hTML> y <Html> son válidos en la sintaxis
HTML, pero no lo son en la sintaxis XHTML.

Además, existen tres cuadros en los que se destaca algún aspecto

relacionado con la “Accesibilidad”, con “HTML5” o con “CSS3”.
En el cuadro “Accesibilidad”, como el que se muestra a continuación,
se destaca alguna parte del desarrollo de las páginas web que está rela-
cionado con la accesibilidad web. La accesibilidad web tiene como objetivo
lograr que las páginas web sean utilizables por el máximo número de
personas, independientemente de sus conocimientos o capacidades per-
sonales e independientemente de las características técnicas del equipo
utilizado para acceder a la Web.

El empleo de mecanismos de navegación como

las migas de pan o la numeración de los pasos
ayuda a mejorar la accesibilidad de un si o web.

En el cuadro “HTML5”, como el que se muestra a continuación, se

destacan las novedades relacionadas con la última versión de HTML.

HTML5 es una recomendación oﬁcial desde el 28 de

octubre de 2014.

En el cuadro “CSS3”, como el que se muestra a continuación, se des-

tacan las novedades relacionadas con la última versión de CSS.

Recuerda, la especiﬁcación de CSS3 está dividida

en diferentes módulos y cada módulo ene su pro-
pio proceso de estandarización.

Sitio web del libro

Este libro dispone de un sitio web en el que se encuentra el código
fuente de los ejemplos desarrollados. La URL es:
http://desarrolloweb.dlsi.ua.es/libros/html-css/
También se encuentra un apartado con los errores detectados en el
texto del libro (si es que los detectamos).
Además, a lo largo del manual encontrarás numerosos cuadros mar-
cados con el texto “Más información” en los que se incluye la URL de un
vídeo. En el sitio web está la lista completa de todos los vídeos que se
recomiendan en este libro.

Sugerencias y errores
Cualquier sugerencia sobre este libro será bienvenida. Estaré encanta-
do de saber qué ha sido útil y qué no, que cambiarías o que mejorarías.
Puedes contactar en la dirección [email protected].

20 © Alfaomega - Altaria

https://dogramcode.com/programacion
PARTE I

Conceptos
generales

https://dogramcode.com/programacion
https://dogramcode.com/programacion
2
Estructura de
un sitio web

En este capítulo se introducen los conceptos de sitio web, estructura

física y estructura lógica (o estructura de navegación) de un sitio web.
También se explica cómo inﬂuye la estructura física en las URL o direc-
ciones que se emplean a la hora de crear los enlaces en un sitio web.
Además, se incluye una guía de estilo con consejos a tener en cuenta
cuando se diseñe la navegación de un sitio web. Una de las principales
premisas que se tiene que tener en cuenta cuando se diseñan la estruc-
tura física y la estructura lógica de un sitio web es lograr que sea fácil
de mantener por parte del desarrollador web y de navegar por parte del
usuario o visitante del sitio web.
Los objetivos de este capítulo son:
• Conocer el concepto de sitio web.
• Diferenciar la estructura física y la estructura lógica de un sitio
web.
• Conocer el concepto de URL y su relación con los nombres de los
directorios y ﬁcheros.
• Conocer el concepto de URL amigable y las ventajas que propor-
ciona.
• Conocer los diferentes tipos de enlaces que se pueden utilizar en
una página web.

Qué es un sitio web

Un sitio web es un conjunto de páginas web relacionadas entre sí. Se
entiende por página web tanto el ﬁchero que contiene el código HTML
como todos los recursos que se emplean en la página, como pueden ser
imágenes, sonidos, vídeos, código JavaScript, etc.
En todo sitio web se suelen distinguir dos páginas especiales: la pági-
na de presentación (o página de entrada) y la página principal (o página
menú). En la Figura 1 se representa una simpliﬁcación de la estructura
de un sitio web en la que se han destacado la página de presentación
y la página principal. Normalmente, la página principal se considera el
primer nivel del sitio web y, a partir de esta página, se incrementa el
nivel de las páginas en función de la longitud del camino mínimo desde
la página principal hasta una página determinada del sitio web.

Figura 1: Estructura de un sitio web con la página de presentación y la página principal

La página de presentación, conocida como splash page o splash screen en

inglés, es la primera página que un usuario ve al visitar un sitio web.
Normalmente, la página de presentación se emplea para promocionar
la compañía u organización a la que pertenece el sitio web, o para dar a

24 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

conocer un producto o servicio particular (por ejemplo, para promocionar

unos productos en oferta). También se suele emplear para informar al
usuario de los requisitos (tipo y versión de navegador, resolución mínima,
etc.) necesarios para visualizar correctamente el resto de páginas del sitio
web. También se puede emplear la página de presentación para redirigir
al usuario a una versión específica del sitio web, por ejemplo, en función
del idioma o la localización geográfica del usuario.
Por ejemplo, en la Figura 2 se muestra la página de presentación de
Nike1. En esta página el usuario debe seleccionar el país en el que resi-
de para acceder al sitio web correspondiente a su país. Esta selección
es necesaria porque cada país representa un mercado diferente, con
productos y ofertas que pueden variar de un país a otro. En la Figura
3 se muestra un ejemplo similar, la página de presentación de British
Airways2. En este caso, el sitio web le solicita al usuario que seleccione
un país y un idioma, pero el sitio web detecta la procedencia del usuario
y, le muestra el país y el idioma que cree que más se ajusta a su perfil.

Figura 2: Página de presentación de Nike

1 Disponible en http://www.nike.com/
2 Disponible en http://www.britishairways.com/

Figura 3: Página de presentación de British Airways

A menudo, la página de presentación es la más vistosa del sitio web,

ya que tiene el objetivo de atraer y “atrapar” al visitante. La mayoría de
las páginas de presentación poseen las siguientes características:
• Poco texto, pero muchas imágenes, gráﬁcos animados, sonidos o
incluso vídeos.
• Algunas pasan (“saltan”) automáticamente a la página principal,
pero en otras el usuario tiene que pulsar en un enlace para cargar
la página principal.
• En algunos casos la página de presentación se convierte en un “tú-
nel de entrada”: una presentación que dura bastante tiempo (más
de 15 segundos), que suele estar realizada con múltiples páginas
o con una sola página que emplea tecnología multimedia (como
Adobe Flash3). En estos casos, suele existir un enlace para evitar
el túnel de entrada y saltar directamente a la página principal.

3 Antes conocido como Macromedia Flash.

26 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

Consejo
Lleva a los usuarios a tu página de inicio “real” cuando escriban la URL
principal o hagan clic en un enlace a tu sitio. Las pantallas de presentación
deben morir. Una excepción: si tu sitio contiene material que es inapropiado para
menores de edad o que es susceptible de ofender a algunos usuarios, entonces sí
que es conveniente tener una pantalla de presentación que sirva de advertencia
sobre el contenido.
Fuente: 113 Design Guidelines for Homepage Usability, Jakob Nielsen

http://www.nngroup.com/articles/113-design-guidelines-homepage-usability/

Además de usarse como “tarjeta de presentación”, la página de pre-

sentación también se puede emplear para disminuir el tiempo necesario
para cargar las páginas posteriores. Mientras el usuario está visualizando
la página de presentación, las imágenes y otros recursos que se emplea-
rán en las siguientes páginas se pueden cargar en la memoria caché del
navegador, mediante un proceso en segundo plano del que el usuario
no es consciente. Sin embargo, hay sitios web en los que se prescinde
de la página de presentación y, directamente, se muestra al usuario la
página principal.

Consejo
La frase más vergonzosa que surgió de la era del diseño superϔluo fue “Saltar
Presentación”.
Fuente: Prioritizing Web Usability. Jakob Nielsen, Hoa Loranger. New Riders, 2006

La página principal o página de inicio, conocida como home page, root

page, entry page, front page o main page en inglés, es la página que funciona
como índice o tabla de contenidos del sitio web. A través de esta página,
el resto de documentos del sitio web es accesible de una forma directa o
indirecta. Por tanto, la página principal tiene la función de guiar y dirigir
al usuario a otras páginas del sitio web. La página principal tiene que
ser clara y no crear confusión con infinidad de opciones (si las opciones
son abundantes significa que la clasificación de la información que pro-
porciona el sitio web no ha sido la correcta).

Consejo
Designe claramente una página por sitio web como la página principal. Den-
tro del sitio web, restrinja el uso de los términos “Inicio” y “Página de inicio” para
referirse exclusivamente a esta página principal y use un término diferente para las
páginas de inicio de los departamentos o subsitios web. Los usuarios nunca deben
enfrentarse a múltiples botones o enlaces etiquetados como “Inicio” que vayan a
diferentes lugares.
Fuente: 113 Design Guidelines for Homepage Usability, Jakob Nielsen

http://www.nngroup.com/articles/113-design-guidelines-homepage-usability/

Consejo
La página principal suele ser la página más visitada del sitio web porque es
el punto de partida de la navegación por el resto de páginas. Desde la página
principal los visitantes deben ser capaces de encontrar todas las páginas del
sitio web.

Para ayudar a los visitantes a encontrar otras páginas, un sitio web

suele incluir una barra de navegación. Una buena barra de navegación
debe poseer una estructura lógica clara e intuitiva que indique las sec-
ciones principales del sitio web.

Consejo
Coloca la barra de navegación en las posiciones normales donde los usuarios
esperan encontrarla: en la parte superior de la página, en el lateral izquierdo
—si la lectura de la página es de izquierda a derecha— y en el lateral derecho
—si la lectura de la página es de derecha a izquierda—.

Contenido de un sitio web

Posiblemente, el aspecto más importante (y al mismo tiempo uno de los
más descuidados) de un sitio web sea su contenido (y por extensión, sus
servicios): un sitio web con un buen diseño pero con un pobre contenido
es poco probable que triunfe, sin embargo, un sitio web con un pobre
diseño pero con un buen contenido sí que es probable que triunfe (por
ejemplo, los buscadores Yahoo, Google o la tienda Amazon no destacan
por su diseño, pero han triunfado en Internet gracias a su contenido o
a los servicios que ofrecen).
28 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

Consejo
El contenido precede al diseño. El diseño en ausencia de contenido no es diseño,
es decoración.
Fuente: Jeﬀrey Zeldman

https://twitter.com/zeldman/status/804159148

Consejo
Con pocas excepciones, la gente visita la Web por su utilidad, no por su belleza.
Tener un sitio visualmente atractivo es bueno, por supuesto, pero el contenido es
sagrado. Después de todo, cuando la gente escribe sus preguntas en los motores
de búsqueda, no pregunta por los atributos estéticos – está buscando información.
Fuente: Prioritizing Web Usability. Jakob Nielsen, Hoa Loranger. New Riders, 2006

Consejo
La clave para crear un sitio web extraordinario es crear la mejor experiencia po-
sible para tu audiencia con contenido original y de alta calidad. Si los visitantes
del sitio lo encuentran útil y único, puede que vuelvan o pongan un enlace a tu
contenido en su propio sitio web. A la larga, esto puede contribuir a atraer a más
usuarios a tu sitio.
Fuente: Academia para webmasters – 1.4 Crear contenido valioso

https://support.google.com/webmasters/answer/6001093?hl=es

El contenido de un sitio web se suele organizar en una serie de sec-

ciones que facilitan su búsqueda y localización. En general, el contenido
se puede clasiﬁcar en dos tipos: común y especíﬁco.
El contenido común es aquel que se puede encontrar en la mayoría
de los sitios web pertenecientes a una misma categoría. Por ejemplo:
• Grandes compañías:
o ¿Quiénes somos?
o Información de contacto.
o Historia de la compañía.
o Objetivos.
o Cartera de clientes.
o Productos o servicios.

• Periódicos:
o Editorial.
o Noticias internacionales.
o Noticias nacionales.
o Deportes.
• Centros educativos:
o Personal.
o Profesores.
o Estudiantes.
o Planes de estudio.
• Portal genérico:
o Noticias.
o Canales.
o Correo.
o Chat.
Consejo
El contenido común ayuda a que un usuario no se sienta perdido cuando
acceda a un sitio web por primera vez, ya que le permite reconocer elementos
familiares.

Por otro lado, el contenido especíϐico es aquel que incorpora cada sitio
web como propio y que no tiene por qué encontrarse en otros sitios web
de la misma categoría. Por ejemplo, un periódico digital puede decidir
ofrecer a sus lectores una cuenta de correo electrónico gratuita, un ser-
vicio que no se suele encontrar normalmente en los periódicos digitales,
pero que sí que es común en los portales web.
Respecto a la forma de estructurar y presentar el contenido, lo más
adecuado es aplicar una técnica de embudo: mostrar primero la informa-
ción más general y luego, si así lo solicita el usuario, facilitar información
más detallada.

30 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

Consejo
Enfatiza las tareas de mayor prioridad para que los usuarios tengan un punto
de partida claro en la página principal. Coloca estas tareas en un lugar visible,
como la parte media-alta de la página, y evita que haya competencia visual entre
ellas. En otras palabras, si se acentúa todo, nada atraerá la atención del usuario.
Mantén un número pequeño de tareas básicas (de 1 a 4) y el área alrededor de
ellas despejada.
Fuente: 113 Design Guidelines for Homepage Usability, Jakob Nielsen

http://www.nngroup.com/articles/113-design-guidelines-homepage-usability/

El contenido de un sitio web se tiene que cuidar mucho. Supongamos

una empresa que vende productos. En el mundo “real”, el cliente puede
probar el producto que desea comprar: por ejemplo, si se desea comprar
un televisor, se puede encender, escuchar su calidad de sonido y ver su
imagen, juguetear con sus funciones y, en definitiva, comprobar el grado
de satisfacción que se obtiene. Además, el cliente tiene un trato directo
con el personal de la empresa. Sin embargo, en el mundo “virtual” de In-
ternet todo eso es imposible: el usuario no puede saber si un producto le
satisface completamente hasta que lo haya recibido. Por ello, la decisión
de comprar un producto a través de Internet se basa también en crite-
rios que son ajenos al propio producto, como puede ser la imagen que
proyecta la empresa, el aspecto de la página web o las recomendaciones
de otras personas que hayan quedado satisfechas con el producto. Este
último aspecto es muy importante en Internet: la fidelización del cliente.
Gracias a la personalización de un sitio web, se puede adecuar el sitio
web al perfil de cada cliente.

Consejo
Cuando empieces a crear contenido, asegúrate de que tu sitio web sea:
 Útil e informativo: si vas a lanzar un sitio web de un restaurante, puedes
incluir la ubicación, el horario de apertura, la información de contacto,
el menú y un blog en el que compartir los futuros eventos.

 Más valioso y útil que otros sitios: si escribes acerca de cómo adiestrar
un perro, asegúrate de que tu artículo ofrezca valor adicional o una pers-
pectiva diferente a los numerosos artículos que hay en la web sobre el
mismo tema.

 Creíble: muestra la credibilidad de tu sitio web usando estudios, citas,

enlaces, reseñas y testimonios originales. La biografía del autor o tes-
timonios de clientes reales pueden ayudar a mejorar la ﬁabilidad y la
reputación del sitio.

 Alta calidad: el contenido de tu sitio debe ser único, especíﬁco y de alta

calidad. No debes producirlo en masa ni basarlo en un gran número de
sitios ajenos. Ten en cuenta que lo esencial es que tu contenido se tiene
que crear para ofrecer a los visitantes una buena experiencia de usuario,
no para tener una buena clasiﬁcación en los motores de búsqueda.

 Atractivo: añade imágenes de los productos, del equipo o de ti mismo para

dar color y vida a tu sitio. Asegúrate de que los errores de ortografía, de
estilo o de veracidad no distraigan a los visitantes. El exceso de anuncios
también puede distraerles. Interacciona con ellos mediante actualizaciones
periódicas, cuadros de comentarios o widgets de redes sociales para atraer
su atención.

Fuente: Academia para webmasters – 1.4 Crear contenido valioso

https://support.google.com/webmasters/answer/6001093?hl=es

En un sitio web un mismo contenido se puede clasiﬁcar en distintas

categorías. Por ejemplo, en el caso de un sitio web que sea un buscador
de servicios, ¿un cibercafé se clasiﬁcaría en restaurantes o en entrete-
nimiento? ¿En cafeterías o en tiendas de informática? En caso de duda,
lo mejor es incluir la misma información en las distintas categorías
posibles y no exclusivamente en una sola. Hay que tener en cuenta que
la gente suele emplear distintos nombres para el mismo concepto y un
mismo concepto lo pueden clasiﬁcar en distintas categorías, porque cada
persona tiene un modelo mental diferente. Lo mejor es ofrecer múltiples
alternativas para intentar satisfacer al máximo número de usuarios.

Estructura física
La estructura física de un sitio web es la forma en que se almacenan
los distintos recursos en forma de ﬁcheros (archivos) que forman un sitio
web en el sistema de ﬁcheros del servidor web. ¿Se almacenan todos los

32 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

ﬁcheros en un único directorio (carpeta)? ¿O están almacenados según

el tipo de fichero en distintos directorios? Al definir la estructura física
de un sitio web hay que tener en cuenta las preguntas anteriores.
Una estructura física eficiente reduce los costes de mantenimiento:
cada vez que se tenga que actualizar el sitio web, el tiempo necesario
para localizar el recurso que se desea actualizar, como por ejemplo una
imagen o un fichero de código JavaScript, se reducirá.
La estructura física se debe planificar antes de iniciar el desarrollo
del sitio web. Modificar la estructura física una vez que se han creado
muchas páginas es costoso y propenso a cometer errores, ya que para
ello hay que actualizar los enlaces entre las páginas, las referencias a
las imágenes, etc., para que reflejen la nueva estructura del sitio web.
Si el sitio web contiene un número pequeño de ficheros (5 o 10 ficheros),
quizás no suponga ningún problema tenerlos todos juntos en el mismo
directorio. Pero conforme aumente el número de ficheros, si se ordenan
en subcategorías se simplificará su localización y su cambio.
No existe una forma perfecta de organizar físicamente un sitio web.
Todo depende de la persona que tenga que mantener el sitio web: una
estructura física puede tener sentido para una persona, pero no para otra.
Lo importante es que en el futuro, cuando haya que realizar cambios en
un sitio web, la persona que tenga que hacerlo pueda encontrar lo que
quiere modificar rápidamente.
Existen diferentes alternativas de organización de un sitio web en
directorios. Algunas de las más usuales son:
• Por el tipo de ϐichero. Por ejemplo, ficheros HTML, ficheros gráficos,
ficheros de vídeos, etc.
• Por el nivel de acceso (visibilidad). Por ejemplo, parte pública, parte
privada de los clientes, parte privada de los administradores, etc.
• Por el contenido. Por ejemplo, una empresa que vende productos
puede organizar los ficheros según la información que contienen:
los ficheros de la familia de productos A en un directorio, los fi-
cheros de la familia de productos B en otro directorio, etc.
• Por la fecha. Por ejemplo, el sitio web de una revista puede orga-
nizar los ficheros según la fecha de publicación.

• Por su propietario. Por ejemplo, una empresa puede organizar los

ficheros según el departamento al que pertenecen: departamento
A, departamento B, etc.
• Por su estructura lógica o de navegación. La estructura física puede
ser una copia de la estructura lógica.
Por ejemplo, en la Figura 4-a, el sitio web se ha organizado físicamente
en función de su contenido: información sobre la empresa (“acerca de”),
el catálogo, los clientes e información de contacto. En la Figura 4-b, el
sitio web se ha organizado en función del tipo de fichero (ASP, HTML, etc.)
en un primer nivel y en función del nivel de acceso (privado y público) y
del tipo de fichero (GIF, JPG y PNG) en un segundo nivel.

(a) (b)
Figura 4: Distintos tipos de estructuras físicas

En la Figura 5-a, el sitio web se ha organizado en función de su con-

tenido en un primer nivel y en función del tipo de ﬁchero en un segundo
nivel. En la Figura 5-b, el sitio web se ha organizado en función del ni-
vel de acceso en un primer nivel y en función del tipo de ﬁchero en un
segundo nivel.

34 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

(a) (b)
Figura 5: Distintos tipos de estructuras físicas

Sin embargo, no hay que abusar de los directorios y crear estructuras

de directorios muy profundas, ya que cada directorio que se crea añade
unos cuantos caracteres adicionales a la URL: tanto el creador del sitio
web como el usuario ﬁnal tendrán problemas a la hora de recordar una
URL demasiado larga.

Las URL
Una URL (Uniform Resource Locator) es un identiﬁcador de un recurso
en Internet. Las URL fueron desarrolladas por Tim Berners-Lee y son
uno de los pilares del funcionamiento de la Web. Los navegadores web
emplean las URL para recuperar los recursos identiﬁcados. Normalmente
no se emplea el término URL, sino otros más informales como dirección
o dirección web4.

4 Una dirección web se puede emplear en diferentes etiquetas de HTML, como por ejemplo <a>, <script>,
<img> y <link>.

Una página web suele estar compuesta de diferentes recursos como

imágenes, vídeos, hojas de estilo que definen la presentación, ficheros
de código que definen el comportamiento de la página, etc. Cada uno de
los recursos que se emplea en una página web se identifica mediante
una URL.

Consejo
Es el deber de un webmaster asignar URL que sean capaces de ser válidas durante
2 años, 20 años, 200 años.
Fuente: “Cool URIs don’t change”, Tim Berners-Lee

http://www.w3.org/Provider/Style/URI.html

Además, una página web también suele poseer enlaces a otras páginas
web que se identiﬁcan mediante sus URL. Por ejemplo, en la Figura 6 se
muestra la página web que se identiﬁca por la URL http://accesibilidad-
web.es/. Esta página web posee una barra de navegación horizontal con
cinco enlaces y numerosos enlaces que aparecen destacados con el color
amarillo a lo largo de toda la página.

Figura 6: Página de ejemplo accesibilidadweb.es con enlaces

En la Figura 7 se puede ver una lista con los enlaces que existen en
esta página web. Esta lista se ha creado con la opción “View Link Infor-

36 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

mation” de “Web Developer”5, una extensión para el navegador Google

Chrome. Cada uno de los enlaces se deﬁne mediante una URL, que puede
identiﬁcar una página del mismo sitio web, como http://accesibilidadweb.
es/contacto, o una página de otro sitio web, como https://www.udemy.com/
aprende-accesibilidad-web-paso-a-paso/.

Figura 7: Listado de enlaces que componen la página accesibilidadweb.es

Más información
http://youtu.be/qqJf0EK0aFs

¿Qué son las URL? ¿Qué

partes componen una URL?

5 https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm

Nombres de los directorios y de los ﬁcheros

El nombre de los directorios y de los ficheros es un aspecto que tam-
bién hay que tener en cuenta, ya que es importante tanto para el desa-
rrollador del sitio web como para los futuros visitantes (usuarios). Por un
lado, se tienen que elegir nombres intuitivos, que expresen el contenido
o la función de un fichero, ya que así el desarrollador, cuando tenga que
mantener el sitio web, no tendrá que pararse a pensar qué contiene cada
directorio o fichero.
Por otro lado, hay que tener mucho cuidado con los caracteres que se
emplean en los nombres de los directorios y de los ficheros, ya que cada
sistema operativo permite un conjunto distinto de caracteres. Nunca se
deben usar espacios en blanco o caracteres especiales como &, %, #, etc.
Además, sólo se debe usar el punto para la extensión de los ficheros.
La especificación original de la sintaxis de las URL6 limitaba los ca-
racteres válidos que se podían emplear a un subconjunto de unos 60
caracteres de ASCII. Estos caracteres se dividían en caracteres no reser-
vados (Tabla 1) y caracteres reservados (Tabla 2).

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789-_.~
Tabla 1: Caracteres no reservados en una URL

! # $ & ‘ ( ) * + , / : ; = ? @ [ ]
Tabla 2: Caracteres reservados en una URL

Los caracteres reservados pueden realizar una función especial en una

URL. Cuando se emplean de forma literal se deben codificar con la nota-
ción código porciento. Esta codificación consiste en el signo “%” seguido
del número hexadecimal ASCII correspondiente al carácter codificado.
En la Tabla 3 se muestran los caracteres reservados con su codificación
en hexadecimal.

! # $ & ‘ ( ) * + , / : ; = ? @ [ ]
%21 %23 %24 %26 %27 %28 %29 %2ª %2B %2C %2F %3ª %3B %3D %3F %40 %5B %5D
Tabla 3: Caracteres reservados en una URL con su código porciento

6 RFC 3986 “Uniform Resource Identiﬁer (URI): Generic Syntax” disponible en https://tools.ietf.org/html/
rfc3986

38 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

Más información
En Internet existen muchas páginas web que realizan la codiﬁcación y deco-
diﬁcación URL. Por ejemplo:
 URL Encode Decode: http://www.url-encode-decode.com/

 URL Decoder/Encoder: http://meyerweb.com/eric/tools/dencoder/

En la actualidad, la especiﬁcación original de URL se ha ampliado

para admitir cualquier tipo de carácter. Los estándares RFC 4395 “Gui-
delines and Registration Procedures for New URI Schemes”7, RFC 5890
“Internationalized Domain Names for Applications (IDNA): Definitions
and Document Framework”8 y RFC 5891 “Internationalized Domain Na-
mes in Applications (IDNA): Protocol”9 definen la forma de crear URL con
caracteres de cualquier idioma, como por ejemplo la eñe o las vocales
acentuadas del español.
Un problema muy común con los sistemas operativos Microsoft
Windows es que realmente no distinguen mayúsculas y minúsculas,
aunque sí que permiten escribir los nombres de los ficheros mezclando
mayúsculas y minúsculas. Es decir, el nombre de un fichero puede ser
algo.txt o algoMas.TXT, pero en un mismo directorio no pueden exis-
tir los ficheros algo.txt, Algo.txt o ALGO.TXT, ya que para el sistema
operativo representan el mismo nombre y, por tanto, el mismo fichero.
Esta característica suele originar problemas al mover un sitio web de
un sistema operativo Microsoft Windows a Unix y al revés. Por ejemplo,
si en la URL de un enlace se escribe el nombre de un fichero en mayús-
culas, pero realmente el nombre del fichero está en minúsculas, en el
servidor web con Microsoft Windows el enlace funciona correctamente,
pero en el que tiene Unix no, ya que en este último sistema operativo sí
que se distinguen completamente las mayúsculas y las minúsculas. Por
tanto, es conveniente ser consistente y escribir siempre los nombres de
los directorios y de los ficheros en minúsculas (lo más adecuado) o en
mayúsculas, pero nunca mezclar las dos formas.

Las URL amigables

Si la URL de una página no es intuitiva, estaremos creando una enor-
me barrera entre los visitantes y el contenido que desean obtener, y tales
barreras se tienen que evitar siempre que se pueda. Aunque los nombres
7 Disponible en https://tools.ietf.org/html/rfc4395
8 Disponible en https://tools.ietf.org/html/rfc5890
9 Disponible en https://tools.ietf.org/html/rfc5891

de los directorios y de los ﬁcheros sólo se van a ver en la URL y se puede

creer que nadie se ﬁja en ella, a veces los usuarios toman nota de ella
(la copian por escrito) o incluso la emplean para navegar libremente al
modiﬁcar su contenido.
Por ejemplo, imaginemos que un usuario ha realizado una búsqueda
en un buscador y ha llegado a la siguiente página de un sitio web de
venta de electrodomésticos:

http://www.electro-abc.es/electronica/videos/sonic1430.html

En esta página se muestran las características del vídeo Sonic 1430. El usuario
puede ser que modiﬁque la URL y escriba:

http://www.electro-abc.es/electronica/videos/

con la esperanza de obtener una página con una lista de todos los vídeos, o
puede ser que incluso escriba:

http://www.electro-abc.es/electronica/

para obtener una lista completa de todos los dispositivos que existen
en el apartado de electrónica del sitio web de venta de electrodomésticos.
Las URL amigables o URL semánticas, conocidas en inglés como clean
URL, user-friendly URL, SEO-friendly URL o semantic URL, son aquellas
que describen el contenido del recurso al que apuntan y por tanto son
entendibles para el usuario. Las URL amigables son fáciles de entender,
de recordar y de comunicar porque están formadas por palabras rela-
cionadas con el contenido del recurso. Por contraposición, una URL no
amigable suele llevar variables GET y números difíciles de recordar.
Los motores de búsqueda modernos tienen en cuenta las palabras que
aparecen en una URL. Una URL no amigable puede no ser correctamente
indexada, lo que produce que la página pueda tener una peor indexación.
En la Tabla 4 se muestran varios ejemplos de URL no amigable y
amigable. Se puede comprobar que la URL amigable es más fácil de
comprender y recordar.

40 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

URL no amigable URL amigable

http://example.com/index. http://example.com/contacto
php?pagina=contacto
http://example.com/index.php?pagina=consulti http://example.com/consulting/marketing
ng&seccion=marketing
http://example.com/ http://example.com/productos/2/25
productos?categoria=2&pid=25
http://example.com/cgi-bin/feed. http://example.com/news.rss
cgi?feed=news&frm=rss
http://example.com/servicios/index. http://example.com/servicios/legal/patentes
jsp?id=legal&subid=patentes
http://example.com/kb/index. http://example.com/kb/8/41
php?cat=8&id=41
http://example.com/index. http://example.com/per iles/193
php?mod=per iles&id=193
Tabla 4: Ejemplos de URL no amigables y amigables

Más información
Las URL son un elemento esencial de un sitio web. Una mala decisión en la
forma de deﬁnir las URL puede tener un impacto muy negativo sobre el SEO.
En “Cómo simpliﬁcar la estructura de direcciones URL” se explican algunos
problemas, como la presencia de un número innecesariamente elevado de
URL para una misma página:
https://support.google.com/webmasters/answer/76329?hl=es

Tipos de direcciones
Las direcciones web se pueden clasificar de distintas formas. Aten-
diendo al ámbito de referencia, se pueden dividir en direcciones que
hacen referencia a recursos del propio sitio web y direcciones que hacen
referencia a recursos de otro sitio web. Además, las primeras también se
pueden clasificar en direcciones dentro del propio documento (intradocu-
mentales) y direcciones a otro documento (extradocumentales).
Por otro lado, las direcciones también se pueden clasificar en direccio-
nes absolutas y direcciones relativas. Cuando se crea una dirección desde

un sitio web a otro sitio web, siempre se emplea una dirección absoluta
con una URL de la forma:

http://www.otrositio.es/dir/recurso.xxx

Sin embargo, cuando se crea una dirección a un recurso en el mismo

sitio web, se puede hacer absoluto (dos tipos) o relativo:
• Absoluto 1: similar a una dirección a otro sitio web. Se indica
el nombre del sitio actual y la ruta completa al recurso. Todas
las direcciones de este tipo comienzan por http://. Por ejemplo:
http://www.sitioactual.es/dir/recurso.xxx.
• Absoluto 2: se indica la ruta completa al recurso. Como no se
indica el nombre del sitio web, se emplea el actual. Todas las di-
recciones de este tipo comienzan por una barra /. Por ejemplo: /
dir/recurso.xxx.
• Relativo: no se indica la ruta completa, sino la posición relativa del
recurso respecto al ﬁchero que contiene la dirección. Por ejemplo,
si un enlace en la página a.html del directorio dir queremos que
apunte a la página b.html del mismo directorio, simplemente
escribiremos: b.html. Las direcciones relativas no se limitan a
recursos que se encuentren en el mismo directorio. Por ejemplo,
si un enlace en la página a.html del directorio dir-a queremos
que apunte a la página b.html del directorio dir-b, y ambos
directorios se encuentran en el mismo directorio padre, escribi-
remos: ../dir-b/b.html. Pero si la página b.html se encuentra
en otro directorio, como por ejemplo el directorio padre, se puede
escribir: ../b.html.
Muy importante: en las direcciones de Internet, la barra que se emplea
en la rutas para separar directorios es / y no \. Hay que tener cuidado
de no confundir la barra que se emplea en las rutas en los sistemas ope-
rativos Microsoft Windows con la barra que se emplea en los sistemas
Unix y en la URL.
Dos son las ventajas que se obtienen al emplear las direcciones rela-
tivas. Por un lado, hay que escribir menos en las direcciones (las URL
son más cortas). Por otro lado, se facilita el transporte o migración del
sitio web entre distintos servidores o directorios: las direcciones siguen
funcionando al mover un sitio web de un servidor a otro.

42 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

En la Figura 8 se resumen los distintos tipos de direcciones que se han presen-

tado en este apartado.

Figura 8: Tipos de enlaces

Estructura lógica
La estructura lógica o estructura de navegación define cómo un visitante
se va a mover (navegar) de una zona a otra de un sitio web. La estruc-
tura lógica y la física son totalmente independientes, aunque se pueden
definir de forma que una sea una proyección de la otra. Según el tipo
de navegación que se permita en un sitio web, los usuarios tendrán una
sensación de “poca libertad” (navegación controlada) o “mucha libertad”
(navegación libre).
Al igual que con la estructura física, la estructura lógica también se
tiene que planear con cuidado y antes de comenzar a desarrollar el sitio
web, con el fin de asegurarse de que todos los usuarios podrán navegar
por el sitio fácilmente. Para lograrlo, es conveniente dar respuesta a una
serie de preguntas:
• ¿Cuál es el propósito de este sitio web?
• ¿Qué contendrá?
• ¿Cuál es la audiencia a la que está destinado?
• ¿Qué esperamos obtener?
• ¿Qué esperamos que los visitantes obtengan?
Por ejemplo, un sitio web destinado a proporcionar noticias (el sitio
web de un periódico) tendrá una apariencia y una navegación distintas
a las de un sitio web destinado a vender productos de playa para jóvenes
que practican surf.

Existen distintos tipos de estructuras lógicas de navegación. Las más

comunes son la secuencial, en rejilla, en árbol y en red, aunque lo normal
es que en un sitio web se dé una combinación de todas ellas (estructura
mixta). A continuación, se explica cada una de ellas con detalle.

Estructura secuencial
La estructura secuencial (sequential structure) es la más simple de todas.
En ella, el usuario comienza en la página principal y sólo puede navegar
en una dirección (hacia adelante o hacia atrás). En la Figura 9 se puede
ver una representación simpliﬁcada de esta estructura.
Esta estructura se suele emplear en los siguientes casos:
• Un curso o tutorial.
• Una visita guiada (tour).
• Un asistente (wizard) que explica cómo se realiza algo.
• Un proceso determinado compuesto de una serie de pasos secuen-
ciales, como por ejemplo una compra o el registro de un usuario
en un servicio de correo electrónico gratuito.

Figura 9: Estructura secuencial

Un ejemplo de la estructura secuencial se puede encontrar en el sitio

web del curso “Academia para webmasters”10 de Google. Este curso ofrece
la información y las herramientas necesarias para aprender a crear un
sitio web y para que el motor de búsqueda de Google lo encuentre. Este
curso se compone de tres módulos con lecciones que presentan una
estructura secuencial, aunque el usuario puede visualizar una lección
concreta sin seguir el orden establecido gracias a la existencia de un
menú general del curso que se muestra en la Figura 10.

10 Disponible en https://support.google.com/webmasters/answer/6001102?hl=es

44 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

Figura 10: Menú general con los módulos del curso “Academia para webmasters”

En la Figura 11 podemos ver la primera lección del curso (“1.1 Deter-

minar si quieres un sitio web”). Debajo del título de la lección existe un
enlace con el texto “Siguiente: 1.2 Configurar un sitio web nuevo” que
permite navegar a la segunda lección del curso. Este enlace se repite al
final de la página, tal como se puede ver en la Figura 12. Al pulsar sobre
el enlace se navega a la segunda lección (“1.2 Configurar un sitio web
nuevo”), que se puede ver en la Figura 13. En esta página existe el enlace
“Siguiente: 1.3 Identificar a la audiencia” para pasar a la siguiente lec-
ción y otro enlace en forma de flecha “<” para volver a la lección anterior.

Figura 11: Primera lección del curso “Academia para webmasters”

Figura 12: Final de la primera lección del curso “Academia para webmasters”

Figura 13: Segunda lección del curso “Academia para webmasters”

46 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

Estructura en rejilla
La estructura en rejilla (grid structure) se emplea cuando existen estruc-
turas secuenciales paralelas. Algunos casos típicos de esta estructura son
los sitios web escritos en varios idiomas, de forma que la misma página
se puede consultar en otros idiomas, o los sitios web que ofrecen cada
página en distintos formatos (por ejemplo, formato de pantalla, forma-
to de impresión, formato para discapacitados, etc.). En la Figura 14 se
muestra un esquema de esta estructura. Normalmente, desde cualquier
página se puede navegar a la misma página existente en una de las otras
estructuras secuenciales paralelas.

Figura 14: Estructura en rejilla

Un ejemplo de este tipo de estructura es en el sitio web del curso

“Academia para webmasters”11 de Google que se ha visto en la estruc-
tura secuencial. La estructura del curso es secuencial, pero se puede
seleccionar el idioma de visualización del curso, tal como se muestra en
la Figura 15, en la que se puede ver la lista que permite seleccionar un
idioma. Al seleccionar un idioma distinto al actual se navega a la misma
página escrita en el nuevo idioma seleccionado, tal como se puede ver
en la Figura 16, que muestra la página “1.1 Determine if you want a
website”, que es el equivalente en inglés de la página “1.1 Determinar si
quieres un sitio web”.

11 Disponible en https://support.google.com/webmasters/answer/6001102?hl=es

Figura 15: Selección de idioma en “Academia para webmasters”

Figura 16: Primera lección del curso “Academia para webmasters” en inglés

Estructura en árbol
La estructura en árbol (tree structure) es una de las más comunes en
los sitios web, ya que permite estructurar el contenido de una forma je-
rárquica con distintos niveles, lo que facilita la búsqueda de información

48 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

y la navegación. La estructura en árbol suele presentar un único punto

de inicio, tal como se muestra en la Figura 17.

Figura 17: Estructura en árbol

Este tipo de estructuras puede presentar un problema: el árbol puede

degenerar a estructuras poco profundas y muy anchas (Figura 18-a), o
muy profundas y poco anchas (Figura 18-b). Para evitar estos problemas
es muy importante deﬁnir el contenido del sitio web y establecer un con-
junto adecuado de categorías para la página de inicio.

(a) (b)
Figura 18: Problemas en la estructura en árbol

Estructura en red
La estructura en red (web structure) es la típica de Internet. En este tipo
de estructura no existe un orden establecido de navegación, de forma que
cada página puede estar enlazada con todas las páginas que componen
el sitio web. Además, en este tipo de estructura, el sitio web suele tener
varias páginas de inicio, tal como se observa en la Figura 19.

Figura 19: Estructura en red

Estructura mixta
En realidad, las cuatro estructuras que se han comentado son ideales:
en el mundo real suelen aparecer mezcladas entre sí, tal como se mues-
tra en la Figura 20. Por ello, lo más común es que la estructura de un
sitio web sea una estructura mixta (mixed structure), aunque en muchos
casos es posible distinguir estructuras concretas en algunas partes de
un sitio web.

50 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

Figura 20: Estructura mixta

Comparativa
Las cuatro estructuras lógicas o de navegación básicas (secuencial,
en rejilla, en árbol y en red) que se han explicado se pueden comparar
en función de distintas características. En la Figura 21 se muestran las
cuatro estructuras clasiﬁcadas en función del poder de expresividad y de
la capacidad de navegación que presentan. Esta comparación es cualitativa
y no cuantitativa, por ejemplo, no se puede aﬁrmar que la estructura
en árbol posea un 40% más de expresividad respecto a la estructura
secuencial.
El poder de expresividad se mueve desde un nivel bajo en el cual la
información contenida en un sitio web se percibe de igual forma por todos
los visitantes, a un nivel alto en el cual cada visitante puede percibir la
misma información de distintas formas.
La capacidad de navegación se mueve desde un nivel bajo con poca
libertad donde los movimientos del visitante son predecibles, a un nivel
alto con mucha libertad donde la navegación es impredecible, el visitante
se puede perder fácilmente o llegar a páginas a las que no nos interese
que llegue (riesgo alto de navegación confusa). En la próxima sección se
explican algunos mecanismos que evitan que un usuario se pierda o se
sienta confundido al navegar por un sitio web.

Figura 21: Comparación de las cuatro estructuras lógicas o de navegación básicas

Cómo no perderse en la estructura de un sitio web

Un visitante de un sitio web se puede perder fácilmente en las páginas
que lo forman. Por tanto, es recomendable emplear algún mecanismo
que indique al usuario dónde está, de dónde ha venido y a dónde puede
ir a continuación.
Existen distintos esquemas que proporcionan esta información duran-
te la navegación. Dos de los más conocidos son el rastro de las migas de
pan (breadcrumb trail), por el cuento de “Hansel y Gretel” de los hermanos
Grimm, y la numeración de los pasos.
En el esquema del rastro de las migas de pan, se muestra una lista
con enlaces de vuelta a cada una de las páginas por las que el usuario
ha pasado hasta llegar a la actual. Es decir, se muestra un rastro para
que el usuario pueda volver hacia atrás hacia el punto de entrada en el
sitio web. Los elementos que forman el rastro se suelen separar con un
separador visible, como por ejemplo “>”, “|”, “/” o “::”.

52 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

Por ejemplo, en la Figura 22 se muestra el siguiente rastro de migas de

pan de una página web12 que emplea como separador visual el símbolo “>”:

Estás en: Accesibilidad web > Ejemplos > Errores típicos > Formularios >
Formulario con un cuestionario tipo test

Figura 22: Ejemplo de página con rastro de las migas de pan

Una variante de este esquema consiste en no tener en cuenta las

páginas por donde ha pasado el usuario, sino mostrar el rastro de las
migas de pan en función del nivel actual en la jerarquía de navegación
que conduce a la página principal. Por tanto, muestra la posición de
la página actual en la organización del sitio web, independientemente
del camino seguido por el usuario. Así se consigue mostrar el contexto
de la página actual respecto al conjunto de páginas del sitio web. Cada
nivel de la lista es un enlace a la página principal de dicho nivel. Este
esquema es el adecuado para aquellos sitios web donde la información
se estructure de una forma jerárquica.
Por otro lado, en el esquema de numeración de los pasos, se muestra
una lista con todos los pasos necesarios para completar un proceso (por
ejemplo, comprar un producto o registrarse en un servicio de correo
electrónico).

12 Disponible en http://accesibilidadweb.dlsi.ua.es/?menu=ej-form-test

Además, se muestra en todo momento el paso en el que se encuentra

el usuario. De este modo, el usuario sabe cuánto queda para terminar
el proceso. Esta característica contrasta con los procesos en los que no
se indica nada y el usuario no sabe cuántas veces tiene que pulsar el
botón Siguiente antes de terminar.

El empleo de mecanismos de navegación como las

migas de pan o la numeración de los pasos ayuda a
mejorar la accesibilidad de un sitio web.

Por ejemplo, en la Figura 23 se puede ver el primer paso, de un total

de seis pasos (Figura 24), para comprar un billete de avión en el sitio
web de la compañía LAN13. En el primer paso el usuario tiene que intro-
ducir los detalles del viaje (origen, destino y fecha). En la parte superior
de la página se muestra que el proceso se compone de seis pasos y que,
en la actualidad, se encuentra en el primer paso llamado “Fecha”. En
la Figura 25 se muestra el segundo paso llamado “Vuelos”: el usuario
tiene que seleccionar el vuelo concreto para las fechas seleccionadas en
el paso anterior. En el tercer paso llamado “Precio”, que se muestra en la
Figura 26, el usuario revisa y confirma el precio del vuelo seleccionado.
Por último, en los pasos que vienen a continuación el usuario introduce
los datos personales de los pasajeros, introduce los datos de pago y,
finalmente, confirma todo el proceso.

Figura 23: Paso 1 del proceso de compra en LAN

13 Disponible en http://www.lan.com/

54 © Alfaomega - Altaria
Curso práctico avanzado

Figura 24: Barra de numeración de pasos en LAN

Figura 25: Paso 2 del proceso de compra en LAN

Figura 26: Paso 3 del proceso de compra en LAN

En la Figura 27 se muestra el primer paso del proceso de compra de

un billete en el sitio web de TAME, otra compañía aérea. El proceso es
muy similar al ejemplo anterior: como se puede ver en la Figura 28, el
© Alfaomega - Altaria 55
https://dogramcode.com/programacion
HTML & CSS

proceso de compra también se compone de seis pasos que en esta oca-

sión no aparecen numerados. Los seis pasos son “Buscar”, “Selección”,
“Resumen”, “Viajeros”, “Compra” y “Conﬁrmación”.

Figura 27: Paso 1 del proceso de compra en TAME

Figura 28: Barra de numeración de pasos en TAME

Que el proceso de compra sea similar en los dos sitios web no es una
casualidad, es algo normal. Los desarrolladores de sitios web copian
ideas de otros sitios web similares o, incluso, muchas veces adoptan el
mismo funcionamiento con el objetivo de lograr una mejor experiencia
de usuario y que el usuario sepa usar el sitio web sin problemas.

Consejo
Innovar es bueno, pero innovar demasiado puede ser malo. A veces es mejor
ser conservador: si un tipo de sitio web suele tener una estructura y forma
de navegación estandarizada, no confundas al usuario y diseña tu sitio web
pensando en el usuario ﬁnal.

En la Figura 29 se muestra el segundo paso del proceso de compra

llamado “Selección”. En este paso el usuario tiene que seleccionar el
vuelo que desea.

56 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

Figura 29: Paso 2 del proceso de compra en TAME

En la Figura 30 y la Figura 31 se muestran el tercer y cuarto paso del

proceso de compra, llamados “Resumen” y “Viajeros”. En algunos sis-
temas con numeración de pasos es posible regresar a cualquiera de los
pasos anteriores para modiﬁcar los datos introducidos; en otros sistemas
eso no es posible y para realizar cualquier cambio es necesario volver al
primer paso para repetir todo el proceso desde el principio.

Figura 30: Paso 3 del proceso de compra en TAME

Figura 31: Paso 4 del proceso de compra en TAME

Otro mecanismo que ayuda a la navegación es el mapa del sitio web,

también llamado a veces "índice de sitio web". El mapa del sitio web es
una o varias páginas web con una lista de enlaces a las páginas de un
sitio web que son accesibles por los usuarios y los buscadores web. El
mapa del sitio web ofrece una visión general del contenido de un sitio
web. El objetivo del mapa del sitio web es ayudar a la localización de las
páginas que forman parte del sitio web.
En un mapa del sitio web la lista de enlaces se suele organizar de forma
jerárquica a partir de la página principal del sitio web. Por ejemplo, en la
Figura 32 se muestra el mapa jerárquico del sitio Accesibilidad Web14. Se
puede observar que se han empleado listas anidadas para representar la
jerarquía de las páginas respecto a la página principal del sitio web. Este
tipo de mapa permite localizar una página cuando se conoce su posición
relativa dentro de un sitio web.

14 Disponible en http://accesibilidadweb.dlsi.ua.es/?menu=mapa-sitio

58 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

Figura 32: Mapa de un sitio web organizado de forma jerárquica

El mapa de un sitio web también se puede organizar de forma temáti-

ca o por secciones. Por ejemplo, en la Figura 33 se muestra el mapa del
sitio de La Moncloa15. Este mapa está organizado en función de los seis
enlaces que aparecen en la barra de navegación principal: Presidente,
Gobierno, Consejo de Ministros, Sala de Prensa, Multimedia y España.

Figura 33: Mapa de un sitio web organizado por secciones

15 Disponible en http://www.lamoncloa.gob.es/Paginas/MapaWeb.aspx

Sin embargo, a veces la lista de enlaces también se organiza en orden

alfabético. Por ejemplo, en la Figura 34 se muestra el mapa alfabético
del sitio Accesibilidad Web16. Un mapa alfabético permite localizar una
página en un sitio web cuando se conoce cómo empieza el nombre de la
página web. En un mapa de un sitio web en orden alfabético se pueden
dar situaciones de ambigüedad, ya que pueden existir varias páginas con
el mismo nombre. Por ejemplo, en la Figura 34 se puede ver que hay tres
enlaces con el texto “Accesibilidad en la Web”.

Figura 34: Mapa de un sitio web ordenado de forma alfabética

Consejos
A continuación se incluyen algunos consejos que pueden ayudar a
obtener una estructura lógica de un sitio web correcta:
• Regla de las tres pulsaciones17 (“tres clicks”): la media de pulsacio-
nes para acceder a cualquier información útil del sitio web debería
ser tres pulsaciones. Los usuarios buscan rapidez y efectividad.
• Hay que evitar los “callejones sin salida”: páginas que no poseen
enlaces para continuar la navegación.

16 Disponible en http://accesibilidadweb.dlsi.ua.es/?menu=mapa-alfabetico
17 Esta regla se suele citar y emplear muy a menudo, pero en realidad no ha sido cientíﬁcamente
demostrada.

60 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

• Para evitar el problema anterior, es conveniente que todas las pági-

nas posean un enlace a la página principal y a la página anterior.
• Otra solución es crear una barra de navegación o menú del sitio
web con las categorías principales en que se ha organizado la in-
formación. Esta barra debería aparecer en todas las páginas del
sitio web en la misma posición, incluso en las páginas de error.
• Los visitantes deberían saber en todo momento dónde se encuen-
tran y cómo volver a la página principal.
• La opción de búsqueda, los índices y el mapa del sitio web facilitan
a los visitantes la localización de la información que buscan. Exis-
ten herramientas que automáticamente gestionan estos recursos.
• Debería estar claramente indicada en todo momento la información
de contacto, tanto de la empresa como de la persona encargada
del mantenimiento del sitio web.
• La memoria a corto plazo (short term memory) del ser humano tiene
un límite (tanto de tiempo como de espacio). George A. Miller es-
tableció en 195618 la capacidad de esta memoria en 7±2 elementos
(chunks). Por ello, hay que evitar las estructuras muy profundas,
para que el usuario no pierda la orientación (no sepa de dónde
viene y por dónde ha pasado).
• Todas las páginas deben poseer un elemento (un logotipo, el co-
lor de fondo, etc.) que las identiﬁque como pertenecientes al sitio
web del que forman parte. De este modo, el usuario podrá saber
fácilmente cuándo ha abandonado el sitio web.

18 George A. Miller. “The magical number seven, plus of minus two: Some limits on our capacity for pro-
cessing information”. Psychological Review, 63, páginas 81-97, marzo 1956.

Los estándares web es un término general que se emplea para referirse

a los estándares que deﬁnen el funcionamiento de las diferentes partes
de la Web. Los estándares web incluyen recomendaciones sobre la forma
correcta de escribir los nombres de dominio, los protocolos de comuni-
cación que se deben emplear para la transmisión de la información por
Internet, los juegos de caracteres que se deben emplear en la escritura
de las páginas web, etc. En este libro, los estándares web que se explican
son HTML y CSS, los que se emplean para el desarrollo de las páginas
web en el lado del cliente.
Los objetivos de este capítulo son:
• Entender la importancia de los estándares en la Web.
• Conocer el World Wide Web Consortium, el organismo internacio-
nal que desarrolla los principales estándares web.
• Conocer el concepto de juego de caracteres, Unicode y UTF-8.
• Conocer algunas fuentes de información para el aprendizaje de
los estándares web.

Los estándares
En la actualidad, el empleo de los estándares en el desarrollo de los
sitios web ayuda a ahorrar tiempo y dinero. Pero no siempre ha sido así.
Antes de que los estándares web se desarrollasen y se extendiese su uso,
el desarrollo de las páginas web estaba plagado de prácticas erróneas
que dificultaban el mantenimiento de las páginas web o que impedían
la correcta visualización en diferentes navegadores. Algunos ejemplos
de estas prácticas erróneas eran el empleo de tablas invisibles para la
maquetación, la utilización de imágenes invisibles (espaciadores) para
la maquetación y el empleo de etiquetas, atributos y valores específicos
de algunos navegadores web.
Los estándares web son las tecnologías establecidas por el World Wide
Web Consortium (W3C) y otros organismos internacionales de estandari-
zación, como la European Computer Manufacturers Association (ECMA).
Los estándares web también incluyen las mejores prácticas estandari-
zadas para construir sitios web usables y accesibles.
Cuando se indica que una página web se adhiere a los estándares
web significa que en su desarrollo se han empleado las tecnologías que
forman parte de los estándares web:
• Los lenguajes de marcado: HTML, XHTML y XML.
• Los lenguajes de presentación: CSS, MathML y SVG.
• El modelo de objetos de documento: DOM.
• Los lenguajes de script: JavaScript.
Un lenguaje de marcado, como HyperText Markup Language (HTML),
está compuesto por etiquetas que definen la estructura de una página
web. Un lenguaje de marcado no es un lenguaje de programación, sino
simplemente un lenguaje de etiquetas o marcas que, interpretadas por
un navegador web, definen cómo mostrar la información.
Un lenguaje de presentación, como Cascading Style Sheet (CSS), es
un conjunto de instrucciones que define la presentación de un docu-
mento electrónico como una página HTML. Un lenguaje de presentación
tampoco es un lenguaje de programación. Un lenguaje de presentación
puede definir el color, el tamaño de letra, la tipografía y la posición de
los elementos que componen una página web.
Un lenguaje de script, como JavaScript, define el comportamiento de
una página web y la interacción que el usuario puede realizar sobre la

64 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

página. Un lenguaje de script sí que es un lenguaje de programación.

Un lenguaje de script puede deﬁnir cómo responden los elementos de
una página web ante la pulsación de una tecla, ante el movimiento del
ratón, etc.
Por ejemplo, en la Figura 35 se muestra el pie de página de la web
de La Moncloa19. En esta página hay tres logotipos que indican que se
cumplen los estándares de accesibilidad WCAG 1.0 nivel AA, de lenguaje
de presentación CSS Level 1 y de lenguaje de marcado XHTML 1.0.

Figura 35: Pie de página de la web de La Moncloa

No existe ninguna norma que obligue a indicar que una página web
cumple los estándares web, pero sí que es muy normal encontrar alguna
indicación en las páginas de los organismos oﬁciales. Por ejemplo, en la
Figura 36 se muestra el pie de página de la web del Ministerio de Educa-
ción, Cultura y Deporte20. En esta página hay tres logotipos que indican
que se cumplen los estándares de accesibilidad WCAG 1.0 nivel AA, de
lenguaje de marcado XHTML 1.0 y de lenguaje de presentación CSS.

19 Disponible en http://www.lamoncloa.gob.es/
20 Disponible en http://www.mecd.gob.es/

Figura 36: Pie de página de la web del Ministerio de Educación, Cultura y Deporte

El World Wide Web Consortium

El World Wide Web Consortium (W3C) es una organización interna-
cional que trabaja en la creación de estándares web que deﬁnan la di-
rección en la que se debe desarrollar la Web. En la Figura 37 se muestra
la página principal del sitio web del W3C.
El W3C fue creado en octubre de 1994 y desde su fundación ha esta-
do dirigido por Tim Berners-Lee, que es considerado el padre de la Web.
En mayo de 2015 el W3C contaba con 401 miembros21, entre los que se
encontraban:
• Grandes empresas de la informática, como Adobe, Apple, Cisco,
Dell, Google, HP, Microsoft y Oracle.
• Grandes empresas, como Canon, Nikon, Panasonic y The Walt
Disney Company.
• Universidades famosas, como Keio University, Massachusetts Ins-
titute of Technology, Stanford University y University of Oxford.

21 Disponible en http://www.w3.org/Consortium/Member/List

66 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

Figura 37: Página principal del W3C en inglés

El W3C posee una oﬁcina en España y un sitio web también en español

que se muestra en la Figura 38. En la página web “Objetivos del W3C”22
se explica cuál es el objetivo del W3C:

El objetivo del W3C es guiar la Web hacia su máximo po-

tencial a través del desarrollo de protocolos y pautas que
aseguren el crecimiento futuro de la Web. Debajo trata-
mos importantes aspectos de este objetivo, los cuales pro-
mueven la visión del W3C de Web Única.

La Web Única tiene como objetivo que la misma información y servi-

cios accedidos a través de una URL estén disponibles a los usuarios con
independencia del dispositivo que estén usando, ya sea un ordenador,
una tableta o un teléfono móvil.

22 Disponible en http://www.w3c.es/Consorcio/mision

Figura 38: Página principal del W3C en español

El sitio web del W3C posee un apartado llamado “W3C A to Z”23 en el

que se muestra un listado de todas las tecnologías, protocolos y otros
estándares que desarrolla el W3C. Los estándares del W3C se desarro-
llan a lo largo de un proceso en el que participan numerosas personas y
que puede durar muchos años. Los estándares del W3C se publican en
documentos públicos y gratuitos llamados recomendaciones.

Figura 39: Tecnologías del W3C de la A a la Z

23 Disponible en http://www.w3.org/Consortium/siteindex.html#technologies

68 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

Por ejemplo, en la Figura 40 se muestra la página web de la reco-

mendación de HTML524. Como se puede ver, esta recomendación fue
publicada el 28 de octubre de 2014. Cada recomendación posee enlaces
a las versiones anteriores y posteriores, de forma que se puede conocer
la evolución de una recomendación.

Figura 40: Recomendación oﬁcial de HTML5

Consejo
Sólo hay una web. Cualquiera que trate de cortarla en dos descubrirá que su trozo
es muy aburrido.
Fuente: Tim Berners-Lee

http://news.bbc.co.uk/2/hi/technology/6983375.stm

El juego de caracteres
La codiϐicación de caracteres es el método que convierte un carácter de
un lenguaje natural en un símbolo de otro sistema de representación,
como un número o en el caso de un ordenador una secuencia de unos
y ceros. El juego de caracteres es la equivalencia carácter a carácter de
la codiﬁcación de los caracteres de un lenguaje natural a un sistema de
representación.

24 Disponible en http://www.w3.org/TR/html5/

Durante muchos años, el juego de caracteres más extendido era ASCII.

En ASCII, a cada carácter se le asigna un número del 0 al 127 (7 bits).
ASCII sólo permite 128 caracteres diferentes, suﬁcientes para el inglés,
pero no incluye ni la eñe, ni las vocales acentuadas ni el comienzo de
interrogación o exclamación que se usa en castellano, ni símbolos (ma-
temáticos, letras griegas...) que son necesarios en muchos contextos.
El juego de caracteres ASCII extendido de 256 caracteres (8 bits) per-
mite representar caracteres no ingleses como las vocales acentuadas o la
eñe. Los caracteres de la parte superior (128 a 255) del ASCII extendido
varían entre distintos juegos de caracteres. Por ejemplo, el ISO Latin-1
(oﬁcialmente ISO 8859-1) es el empleado en España, ya que contiene
las vocales acentuadas y la eñe. Este juego de caracteres también es
el que normalmente se emplea en los países de Europa occidental. Sin
embargo, ISO 8859-1 no es capaz de representar todos los caracteres y
símbolos que se puedan necesitar en diferentes países, por lo que exis-
ten diferentes variantes tal como se puede observar en la Figura 41 que
muestra un fragmento de las diferencias que existen entre las variantes
ISO 8859-1 e ISO 8859-16 (la variante ISO 8859-12 fue abandonada).
En esta tabla se pueden apreciar estas diferencias entre los diferentes
juegos de caracteres. Algunos ejemplos de estas diferencias son:
• En los juegos de caracteres ISO 8859-1 (Europa occidental), 8859-
2 (Europa occidental y Centroeuropa), 8859-3 (Europa occidental
y Europa del sur) y 8859-4 (Europa occidental y países bálticos)
el código decimal 201 representa el carácter “É”, mientras que
en ISO 8859-5 (Alfabeto cirílico) eso mismo código representa el
carácter “Щ”.
• En el juego de caracteres ISO 8859-1 el código decimal 209 re-
presenta el carácter “Ñ”, en ISO 8859-2 el carácter “Ń”, en ISO
8859-2 el carácter “Ñ”, en ISO 8859-1 el carácter “Ņ” y en ISO
8859-1 el carácter “б”.

70 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

Figura 41: Diferencias del juego de caracteres ISO 8859

En la actualidad se recomienda utilizar Unicode en las páginas web.

Unicode es un estándar diseñado para facilitar el tratamiento informático,
la transmisión y la visualización de textos escritos en múltiples lenguajes.
El W3C en su documento “Internationalization Techniques: Authoring
HTML & CSS”25 recomienda el empleo de Unicode mediante UTF-8, un
formato de codiﬁcación de los caracteres Unicode utilizando símbolos de
longitud variable. Las características principales de UTF-8 son:
• Es capaz de representar cualquier carácter Unicode.
• Usa símbolos de longitud variable (de 1 a 4 bytes).
• Incluye la especiﬁcación ASCII de 7 bits, por lo que cualquier ca-
dena de texto ASCII se representa sin cambios en UTF-8.

25 Disponible en http://www.w3.org/International/techniques/authoring-html-dynamic

Más información
https://youtu.be/_MwDNB3jOx0

Ejemplos reales de problemas con

el juego de caracteres, consejos
más importantes: utiliza siempre
el mismo juego de caracteres, uti-
liza UTF-8 sin BOM, diferencias
entre ISO-8859-1 (Latin1) e ISO-
8859-15 (Latin9), como se indica
el juego de caracteres en HTML
(etiqueta meta), diferencias entre
HTML4, XHTML1 y HTML5.

https://youtu.be/4vF41rQU_4Y

UTF-8 sin BOM (Byte Order Mark),

¿qué es el BOM? Típicos proble-
mas con los editores de texto.

Fuentes de información
La Web está llena de sitios web con información sobre desarrollo web
y sobre sus tecnologías. Esta información puede ser una gran ayuda,
pero se tiene que emplear con mucho cuidado, ya que mucha de esta
información puede ser incompleta o incluso errónea.
A continuación se indican tres sitios web de conﬁanza en los que
se ofrece información de conﬁanza y actualizada que normalmente no
contiene errores, aunque ningún sitio web puede estar exento de tener
errores. Por ello, conviene consultar la misma información en varios sitios
web para contrastar la información y estar seguros de que es correcta.

Microsoft Developer Network

Microsoft Developer Network26 (MSDN) es el servicio de información
proporcionada por Microsoft para los desarrolladores de sus diferentes
productos.
26 Disponible en https://msdn.microsoft.com/es-es/

72 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

En la Figura 42 se muestra la página principal de la referencia de

HTML y XHTML27. En esta referencia, además de la lista de elementos y
atributos, se puede consultar la lista de elementos obsoletos.

Figura 42: HTML en Microsoft Developer Network

En la Figura 43 se muestra la página principal de la referencia de

CSS28. Además de la lista completa de propiedades ordenadas de forma
alfabética, es posible consultar las propiedades de CSS por temas, como
las nuevas propiedades de CSS3 para crear animaciones y transiciones,
o las propiedades para deﬁnir el fondo y los bordes.

Figura 43: CSS en Microsoft Developer Network

27 Disponible en https://msdn.microsoft.com/en-us/library/ie/hh772960(v=vs.85).aspx
28 Disponible en https://msdn.microsoft.com/en-us/library/ie/ms531209(v=vs.85).aspx

Mozilla Developer Network

Mozilla Developer Network29 (MDN) es el sitio web oﬁcial de Mozilla
con información sobre los estándares web y los proyectos que desarro-
lla Mozilla. El contenido se ofrece en múltiples idiomas, pero la versión
disponible en inglés es la más completa y actualizada.
A través de la sección “Web technology for developers” se puede acceder
al apartado dedicado a HTML30 (Figura 44). En este apartado se puede
encontrar una guía introductoria, tutoriales y una referencia completa
de los elementos (etiquetas) y atributos que componen HTML.

Figura 44: HTML en Mozilla Developer Network

La referencia de cada etiqueta de HTML se estructura en los apartados

resumen, atributos, ejemplos, especiﬁcaciones, compatibilidad con los
navegadores con más información. Por ejemplo, en la Figura 45 se puede
ver la información sobre la etiqueta <figure>. En el apartado compatibi-
lidad con los navegadores se puede ver que esta etiqueta empezó a ser
soportada por Google Chrome en la versión 8, por Mozilla Firefox en la
versión 4.0, por Microsoft Internet Explorer en la versión 9.0, por Opera
en la versión 11.10 y por Safari en la versión 5.1.

29 Disponible en https://developer.mozilla.org/
30 Disponible en https://developer.mozilla.org/en-US/docs/Web/HTML

74 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

Figura 45: Información sobre la etiqueta <ﬁgure> en Mozilla Developer Network

En el apartado dedicado a CSS31 (Figura 46) también se pueden en-

contrar tutoriales, una guía exhaustiva de las propiedades y valores de
CSS y una colección de ejemplos que muestran las novedades de CSS3.

Figura 46: CSS en Mozilla Developer Network

31 Disponible en https://developer.mozilla.org/en-US/docs/Web/CSS

W3Schools
W3Schools32 es un sitio web con información para desarrolladores web.
Incluye tutoriales para aprender desde cero las principales tecnologías
que se emplean en el desarrollo web, como HTML, CSS, JavaScript,
DOM, PHP, etc. Además, también incluye referencias completas de estas
tecnologías.
En la Figura 47 se muestra la página principal de W3Schools. Este
sitio web dispone de la función “Try it Yourself” que permite ejecutar el
código HTML o CSS en la propia página web.

Figura 47: HTML en W3Schools

En la Figura 48 se muestra la página de referencia de HTML de W3S-

chools que muestra todas las etiquetas de HTML ordenadas alfabética-
mente. En esta página también se indica si una etiqueta está obsoleta o
si es nueva en HTML5.

32 Disponible en http://www.w3schools.com/

76 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

Figura 48: HTML Reference en W3Schools

© Alfaomega - Altaria 77
https://dogramcode.com/programacion
https://dogramcode.com/programacion
PARTE II

HTML

https://dogramcode.com/programacion
https://dogramcode.com/programacion
4
El lenguaje
de marcado de
hipertexto

El lenguaje HTML se emplea para crear las páginas web que se publi-
can en la Web. El lenguaje HTML es muy sencillo de emplear: no es un
lenguaje de programación, sino un lenguaje de marcado compuesto de
marcas, también llamadas etiquetas o elementos que pueden contener
atributos que poseen un valor. Las etiquetas no se pueden escribir de
cualquier forma, sino que existe una serie de reglas que definen un orden
entre las etiquetas.
Los navegadores web (web browsers) son capaces de interpretar las
etiquetas y mostrar los documentos con el formato deseado por el desa-
rrollador de la página web.
En este capítulo se explican los conceptos básicos de HTML, las dife-
rentes versiones que existen de HTML, la estructura de un documento
y algunas etiquetas básicas.
Los objetivos de este capítulo son:
• Aprender los conceptos básicos del lenguaje de marcado HTML.
• Conocer las diferentes versiones que existen de HTML.
• Entender por qué es importante escribir código correcto y confor-
me a la especificación oficial para lograr que las páginas web se
visualicen correctamente en la mayoría de los navegadores.

• Conocer algunas etiquetas básicas de HTML.

• Conocer algunas herramientas que ayudan a escribir código HTML
correcto y compatible con distintos navegadores web.
En este capítulo se explican las etiquetas: <html>, <head>, <meta>,
<title>, <body>, <p> y <br>.

Introducción
HTML no es un lenguaje de programación como Fortran, Pascal, C, C++
o Java. HTML es un lenguaje de marcado que, mediante la utilización de
etiquetas, permite la identiﬁcación de los elementos que componen una
página web, como puede ser un párrafo de texto, una tabla o una ima-
gen. Estas etiquetas las interpretan los navegadores web para mostrar
en pantalla una página web.
Aunque HTML tiene más de 100 etiquetas, normalmente sólo se em-
plean 20 o 30 etiquetas para crear las páginas web, por lo que no es
necesario conocer HTML en su totalidad para poder escribir páginas web.

Evolución de HTML
El nacimiento de HTML va ligado al de la Web. En 1989, Tim Berners-
Lee llevaba varios años trabajando en la Organización Europea para la
Investigación Nuclear (CERN) en Suiza. Aunque Tim era físico, desde que
había ﬁnalizado sus estudios universitarios se había dedicado a trabajar
en temas de telecomunicaciones e informática. En marzo de 1989, Tim
escribió un pequeño informe, “Information Management: A Proposal”33,
en el que proponía el desarrollo de un sistema distribuido de gestión
de la información. Tim Berners-Lee le presentó el informe a su jefe en
el CERN, Mike Sendall. Mike le devolvió a Tim el informe con sólo tres
palabras escritas al principio de la primera página, “Vague but exciting...”
(Figura 49), impreciso pero emocionante...

33 Disponible en http://info.cern.ch/Proposal.html

82 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

Figura 49: Primera página del informe “Information Management: A Proposal” con la anotación manuscrita de Mike
Sendall

El sistema que proponía Tim Berners-Lee tenía como objetivo resolver

un problema que existía en el CERN34:

Bueno, me pareció frustrante que en aquellos días, había información

diferente en equipos diferentes, pero había que conectarse a diferentes
equipos para llegar a ella. También, a veces había que aprender un pro-
grama diferente en cada equipo. Así que averiguar cómo funcionaban
las cosas era realmente diϔícil. A menudo era más fácil ir y preguntar
a la gente cuando disfrutaban de una pausa para un café.

Como la gente en el CERN procedía de universidades de todo el mundo,

solía llegar con todo tipo de ordenadores. No sólo Unix, Mac y PC: había
todo tipo de grandes ordenadores centrales (mainframes) y ordenado-
res de tamaño medio que ejecutaban todo tipo de software.

En realidad, yo escribí algunos programas para tomar la información

de un sistema y convertirla para que pudiese ser insertada en otro
sistema. Más de una vez. Y cuando eres un programador y resuelves un
problema y luego resuelves otro que es muy similar, a menudo piensas,
“¿No hay una forma mejor? ¿No podemos solucionar este problema para
siempre?”. Eso se convirtió en “¿No podemos convertir cada sistema de
información para que se vea como parte de un sistema de información
imaginario que todo el mundo puede leer?”. Y eso se convirtió en la
WWW.

34 Respuesta a la pregunta “What made you think of the WWW?” planteada “Answers for Young People” en
disponible http://www.w3.org/People/Berners-Lee/Kids.html

En el año 1990, Tim Berners-Lee y sus compañeros en el CERN co-

menzaron a desarrollar la propuesta de Tim. Uno de los primeros artí-
culos científicos en los que plasmaron sus ideas fue “World-Wide Web:
The Information Universe”35. En este artículo se detallaba un sistema
que permitía realizar el sueño de “interconectar todo el conocimiento de
la humanidad y facilitar su acceso a todo el mundo gracias al empleo
de los ordenadores”. Para lograrlo, se hacía uso de tecnologías como el
hipertexto o la hipermedia, tecnologías que ya existían desde hacía varios
años. Entre las distintas partes que componían el sistema que proponían,
se incluía “una sintaxis en el estilo de SGML” para proporcionar formato
a los documentos. A partir de ahí nació HTML como un lenguaje para
el intercambio de documentos científicos y técnicos. HTML evitaba la
complejidad de SGML al definir un pequeño conjunto de etiquetas que
simplificaban la estructura de los documentos y las reglas no eran tan
estrictas como en SGML.

Más información
En contra de lo que mucha gente cree, el hipertexto y la hipermedia no fueron
inventadas por Tim Berners-Lee y sus compañeros.

Yo llegué en el momento justo, interesado, cuando el hipertexto e Internet habían

visto ya la luz. La tarea que me correspondía era hacer que casaran.
Fuente: Tim Berners-Lee, Tejiendo la Red, 1999.

Más información
http://youtu.be/APBWeiNmkco

Historia y deﬁniciones de hipertex-

to, multimedia e hipermedia.

35 Tim Berners-Lee, Robert Cailliau, Jean-François Groﬀ, Bernd Pollermann. World-Wide Web: The Infor-
mation Universe. Electronic Networking: Research, Applications and Policy, Vol. 1, No. 2, Meckler, Westport
CT, primavera 1992.

84 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

http://youtu.be/cCHzhQVqEyI

Historia de la Web, su nacimiento,

Vannevar Bush y el memex , Ted
Nelson y el hipertexto y la hiperme-
dia, Tim Berners-Lee y su propuesta
de creación de un sistema de hiper-
texto para compartir información
en el CERN.

http://youtu.be/n7L6qhT3Dzg

Historia de la Web, su nacimiento,

creación de un sistema de hipertexto
para compartir información en el
CERN, el sistema NeXT, el primer
servidor web en España, Robert
Cailliau, primera conferencia del
WWW, creación del W3C, Premio
Príncipe de Asturias de Investiga-
ción Cientíﬁca y Técnica.

La primera página web36, que se muestra en la Figura 50, era bastante

sencilla. No incluía tablas, imágenes o formularios, sólo texto. Y tampoco
incluía colores o distintos tipos de letra, porque los primeros navegado-
res web no eran visuales, trabajaban en modo texto. El contenido de la
página era sobre aspectos técnicos de la World Wide Web.

Figura 50: La primera página web

36 Disponible en http://info.cern.ch/hypertext/WWW/TheProject.html

En realidad, la primera página web se visualizó tal como se muestra

en la Figura 51, que es una emulación37 de un navegador en modo texto
ejecutado en un ordenador con un monitor de fósforo verde.

Figura 51: La primera página web visualizada a través de un navegador en modo texto

El 1 de octubre de 1994 se fundó el W3C en el MIT en Estados Unidos,

en colaboración con el CERN, y con el apoyo de DARPA y de la Comisión
Europea. Tim Berners-Lee fue nombrado director del W3C, puesto que
ocupa de forma ininterrumpida desde entonces hasta la actualidad.
En abril de 1995, el INRIA se convirtió en el socio europeo del W3C.
En septiembre de 1996, la Universidad de Keio en Japón se convirtió en
el socio asiático del W3C.
El objetivo principal del W3C es liderar el desarrollo de la Web, me-
diante la elaboración de protocolos que aseguren su estandarización. Hoy
en día, el W3C lidera el desarrollo de distintas tecnologías, como HTML,
HTTP, XML, CSS, DOM, PNG, etc.
En la Tabla 5 se muestran las distintas versiones de HTML que se han
estandarizado desde 1995. Algunas versiones, como HTML+ o HTML 3.0
nunca llegaron al nivel de estándar.

37 Disponible en http://line-mode.cern.ch/www/hypertext/WWW/TheProject.html

86 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

Fecha Versión
Noviembre 1995 HTML 2.0
Enero 1997 HTML 3.2
Diciembre 1997 HTML 4.0
Diciembre 1999 HTML 4.01
Enero 2000 XHTML 1.0
Diciembre 2000 XHTML Basic
Abril 2001 Modularization of XHTML
Agosto 2002 XHTML 1.0 Second Edition
Agosto 2002 XHTML 2.0 (Working Draft)
Enero 2008 HTML 5 (Working Draft)
Julio 2008 XHTML Basic 1.1
Octubre 2008 XHTML Modularization 1.1
Octubre 2014 HTML5
Tabla 5: Versiones de HTML

En enero de 2000 aparece XHTML 1.0, el sustituto de HTML. Como

dice el propio estándar, se trata de “una reformulación de HTML en XML
1.0”. XHTML es el lenguaje HTML escrito según las normas que impone
XML. Por tanto, es una aplicación concreta de XML y no deben confun-
dirse entre sí. La versión inicial de enero de 2000 tiene una revisión de
agosto de 2002 (XHTML 1.0 Second Edition), en la que se corrigen ciertos
errores y se aclaran algunos pasajes difíciles de entender.
Por otro lado, en abril de 2001 se publica Modularization of XHTML, que
propone una división de XHTML en diversos módulos. La división en
módulos que se plantea permite deﬁnir subconjuntos del lenguaje que
son apropiados para distintos contextos. Además, también facilita la
futura extensión del lenguaje. Por ejemplo, algunos de los módulos que
se deﬁnen y las etiquetas que incluyen son:
• Módulo de estructura: <body>, <head>, <html> y <title>.
• Módulo de texto: <br>, <h1>, <pre>, <p>, etc.
• Módulo de hipertexto: <a>.
• Módulo de listas: <dl>, <dt>, <dd>, <ol>, <ul> y <li>.
• Módulo básico de tablas: <table>, <caption>, <tr>, <th>,
<td>.

• Módulo básico de formularios: <form>, <input>, <label>,

<select>, <option> y <textarea>.
• Módulo de formulario: <form>, <input>, <label>, <select>,
<option>, <textarea>, <button>, <fieldset>, <legend> y
<optgroup>.
Debido a la aparición de plataformas distintas al ordenador personal
que también permiten el acceso a Internet, como tabletas, teléfonos
móviles o PDA, el W3C desarrolla versiones reducidas de XHTML para
que estos dispositivos no tengan problemas para navegar por la Web.
Por ejemplo, gracias a la definición modular de XHTML, se ha definido
XHTML Basic 1.1 de julio de 2008, que está diseñado para aquellos
clientes web que no soportan el conjunto completo de características de
XHTML, pero define un conjunto mínimo de módulos (estructura, texto,
hipertexto, lista, básico de formularios, básico de tablas, imágenes, ob-
jetos, metainformación, enlace y base) que permiten crear páginas web.

Más información
https://youtu.be/EEttUcYhv30

La historia del lenguaje HTML (Hy-

pertext Markup Language) durante
sus primeros años, su relación con
SGML y XML, HTML+, HTML5.

HTML5
La última versión del lenguaje HTML es la versión HTML538 (Figura
52), que fue publicada en octubre de 2014 durante la celebración del
20º aniversario de la fundación del W3C39. Esta versión recoge más de
10 años de trabajo de un gran grupo de expertos en desarrollo web. Sin
embargo, ya se está trabajando en la próxima versión, HTML 5.1, que
se espera que se publique como recomendación durante el último cua-
trimestre de 201640.

38 Disponible en http://www.w3.org/TR/html5/
39 Open Web Platform Milestone Achieved with HTML5 Recommendation, disponible en http://www.
w3.org/2014/10/html5-rec.html.en
40 Plan 2014, disponible en http://dev.w3.org/html5/decision-policy/html5-2014-plan.html

88 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

Figura 52: Página oﬁcial del W3C con la recomendación de HTML5

HTML5 es una recomendación oﬁcial desde

el 28 de octubre de 2014.

HTML5 deﬁne dos sintaxis para la representación de las páginas web:

la sintaxis HTML y la sintaxis XHTML.
La sintaxis HTML es el formato que se sugiere que utilicen la mayoría
de los desarrolladores de páginas web. Es compatible con la mayoría de
los navegadores web. Un navegador web procesa una página web con
este formato cuando se transmite con el tipo MIME text/html.
Por otro lado, la sintaxis XHTML es una aplicación de XML. Un nave-
gador web procesa una página web con este formato cuando se transmite
con el tipo MIME application/xhtml+xml.
El procesamiento de una página web como HTML o XHTML es diferente.
En especial, en la sintaxis XHTML cualquier error menor impide que la
página sea completamente procesada y visualizada. Sin embargo, en la
sintaxis HTML los errores son ignorados y el navegador continúa con el
procesamiento de la página.

Los navegadores antiguos y actuales pueden presentar algunos proble-

mas de compatibilidad con las nuevas características de HTML5. Antes
de emplear una característica de HTML5 conviene averiguar el nivel de
compatibilidad con los principales navegadores web y los riesgos que
pueden existir por su uso.
Por ejemplo, el sitio web Can I use…?41 que se muestra en la Figura
53 permite buscar una característica de HTML5 y comprobar su nivel
de compatibilidad con diferentes navegadores web. Además, también
permite comprobar el nivel de compatibilidad de otras tecnologías web,
como CSS y SVG.

Figura 53: Página principal de Can I use...?

Por otro lado, el sitio web HTML5test42 proporciona una puntuación

que mide el nivel de compatibilidad de los navegadores web respecto a
HTML5. Por ejemplo, en la Figura 54 se muestra el nivel de compatibi-
lidad del navegador Google Chrome 40, que obtiene 511 puntos de un
máximo de 555.

41 Disponible en http://caniuse.com/
42 Disponible en http://beta.html5test.com/

90 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

Figura 54: Prueba de soporte de HTML5 en Google Chrome 40

Más información
https://youtu.be/1hR7EtD6Bns
Tecnologías de la familia HTML5:
HTML5, Canvas, SVG, Geoloca-
lización, Caché, Base de datos,
Web workers.

¿Por qué se pueden seguir empleando

características obsoletas en las páginas web?
En la Web existen millones de sitios web realizados con las diferentes
versiones del lenguaje HTML, ya que no existe ninguna obligación de
actualizar un sitio web a las nuevas versiones. Por tanto, un navegador
web debe estar preparado para visualizar correctamente una página web
desarrollada con la tecnología de hace 15 años o con la tecnología de hace
15 días. Sin embargo, en los desarrollos de los nuevos sitios web se debe
evitar el uso de las características obsoletas, ya que pueden suponer un
problema con versiones futuras de los navegadores web.

Por tanto, en la actualidad cualquier desarrollo de un sitio web nuevo

se debe realizar con HTML5.

Diferencias entre HTML y XHTML

HTML5 se puede escribir con dos sintaxis: HTML y XHTML. Las di-
ferencias entre estas dos sintaxis son pequeñas, aunque importantes.
Por ello, si ya se conoce HTML el tiempo de aprendizaje de XHTML es
mínimo. Las principales diferencias que afectan a la forma de escribir con
XHTML, que está basado en la sintaxis de XML, que es más estricta, son:
• Las etiquetas y atributos tienen que escribirse en minúsculas. XHTML
es sensible a mayúsculas y minúsculas. En XHTML, todas las
etiquetas y atributos están deﬁnidos en minúsculas, por lo que
no se puede escribir:

<BODY>
<P>El lenguaje HTML fue creado por <A HREF=”http://es.wikipedia.org/wiki/
Tim_Berners-Lee”>Tim Berners-Lee</A>.
</P>
</BODY>

sino que en XHTML se tiene que escribir:

<body>
<p>El lenguaje HTML fue creado por <a href=”http://es.wikipedia.org/wiki/
Tim_Berners-Lee”>Tim Berners-Lee</a>.
</p>
</body>

• Todas las etiquetas tienen que aparecer por parejas (apertura y cierre).
En HTML se puede omitir la etiqueta de cierre en ciertas situa-
ciones. Sin embargo, en XHTML todas las etiquetas se tienen que
abrir y cerrar correctamente, por lo que no se puede escribir:

92 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

<p>Un párrafo de texto.

<p>Otro párrafo de texto.
<ul>
<li>El primer elemento de la lista.
<li>El segundo elemento de la lista.
</ul>

sino que en XHTML se tiene que escribir:

<p>Un párrafo de texto.</p>

<p>Otro párrafo de texto.</p>
<ul>
<li>El primer elemento de la lista.</li>
<li>El segundo elemento de la lista.</li>
</ul>

• Las etiquetas vacías tienen que llevar una barra inclinada al ϐinal. Las
etiquetas vacías son las que no pueden tener contenido entre la
etiqueta de apertura y de cierre, como las etiquetas <img>, <br>
y <hr>. En XHTML no se puede escribir:

<p>Una línea de texto.

<br><br>
Otra línea de texto.
</p>
<hr>
<p>Otro párrafo de texto.</p>

sino que en XHTML se tiene que escribir:

<p>Una línea de texto.

<br /><br />
Otra línea de texto.
</p>
<hr />
<p>Otro párrafo de texto.</p>

• Los valores de los atributos tienen que ir entre comillas. En HTML

se pueden omitir las comillas, pero en XHTML siempre se deben
poner las comillas, por lo que no se puede escribir:

<img src=logo.gif width=80 height=100>

<a href=info.html>Más información</a>

sino que en XHTML se tiene que escribir:

<img src=”logo.gif” width=”80” height=”100” />

<a href=”info.html”>Más información</a>

• No se admiten atributos sin valor. En HTML existen atributos a los

que no se les asigna valor (minimización de atributos), ya que son
atributos booleanos que por el simple hecho de aparecer ya toman
un valor, pero en XHTML todos los atributos tienen que tener un
valor. Por tanto, en XHTML no se puede escribir:

sino que en XHTML se tiene que escribir:

<hr noshade=”noshade” />

En XHTML, a este tipo de atributos se le tiene que asignar como valor

el mismo nombre del atributo. En la Tabla 6 se muestran los atributos
booleanos minimizados de HTML y cómo se tienen que escribir en XHTML.

94 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

HTML XHTML
async async=”async”
autofocus autofocus=”autofocus”
autoplay autoplay=”autoplay”
checked checked=”checked”
controls controls=”controls”
default default=”default”
defer defer=”defer”
disabled disabled=”disabled”
formnovalidate formnovalidate=”formnovalidate”
hidden hidden=”hidden”
ismap ismap=”ismap”
loop loop=”loop”
multiple multiple=”multiple”
muted muted=”muted”
novalidate novalidate=”novalidate”
readonly readonly=”readonly”
required required=”required”
reversed reversed=”reversed”
selected selected=”selected”
typemustmatch typemustmatch=”typemustmatch”
Tabla 6: Atributos minimizados

Consejo
Tienes que conocer las dos sintaxis, HTML y XHTML, porque puede ser que
alguna vez tengas que modiﬁcar un sitio web escrito con cualquiera de las dos
sintaxis. Por eso es muy importante que conozcas las diferencias que existen
entre las dos sintaxis, para saber lo que es correcto en cada caso.

HTML5 también permite que el valor de un atributo booleano sea la

cadena vacía. Tanto en HTML como en XHTML se puede escribir:

<input type=”checkbox” name=”cheese” checked=”” disabled=””>

que equivale a:

<input type=”checkbox” name=”cheese” checked=”checked” disabled=”dis-

abled”>

Consejo
Si utilizas la sintaxis XHTML, sigue los siguientes consejos para lograr
la máxima compatibilidad con todos los navegadores:

• No incluyas la declaración de documento XML: <?xml ver-

sión=”1.0” ?>
• Incluye un espacio en blanco antes de la barra ﬁnal en los ele-
mentos vacíos: <br /> en vez de <br/>
• Utiliza la sintaxis minimizada para los elementos vacíos: <br />
en vez de <br></br>
• No uses la sintaxis minimizada para los elementos vacíos cuyo
modelo no es vacío: <p></p> en vez de <p />

Más información
https://youtu.be/EDTgmwVNGjs
XML (eXtensible Markup Lan-
guage, Lenguaje de marcas ex-
tensible): XHTML (eXtensible
Hypertext Markup Language,
Lenguaje extensible de marca-
do de hipertexto), Diferencias
HTML – XHTML.

https://youtu.be/vay6y6exqfg
¿Cuál es el mejor lenguaje para
hacer páginas web en la actuali-
dad? Existen diferentes versiones
y hay que conocerlas todas.

Qué recursos necesito para escribir HTML

No es necesario un servidor web, un proveedor web o tener una co-
nexión a Internet para empezar a escribir documentos HTML. Los docu-
96 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

mentos HTML tienen un formato de texto plano, por lo que todo lo que se
necesita es un editor textos, como el Bloc de notas de Microsoft Windows,
para crear las páginas y un navegador, como Microsoft Internet Explorer,
para verlas. Podemos crear, vincular y probar documentos HTML com-
pletos en nuestro ordenador, aunque no esté conectado a ninguna red.
No obstante, existen numerosos programas que ayudan a crear pági-
nas web. Estos programas se pueden dividir en dos grupos: los editores
de código HTML y los programas de diseño de páginas web.
La mayoría de los editores de código HTML son simples editores de texto
con algunos botones que insertan en un documento las etiquetas más
comunes. Otros, suelen incluir la característica de resaltado de sintaxis
(syntax highlight) que consiste en que el editor es capaz de comprender
el lenguaje en el que se programa y colorea las palabras clave diferen-
ciándolas según sean etiquetas, atributos, comentarios, etc. Otros más
avanzados ofrecen la opción de completar las etiquetas, emparejar y
cerrar las etiquetas o muestran una ventana de ayuda con los atributos
que posee cada etiqueta.
Por ejemplo, en la Figura 55 se muestra la edición de una página web
en el editor Notepad++43, un editor gratuito para el sistema operativo
Microsoft Windows. Este programa es capaz de reconocer la sintaxis de
más de 40 lenguajes de programación.

Figura 55: Notepad++, editor de código HTML con las opciones de resaltado de sintaxis y envoltura de la sintaxis

43 Disponible en http://notepad-plus-plus.org/

Notepad++ también posee la característica de envoltura de sintaxis (syn-

tax folding), que permite expandir y colapsar diferentes partes del código.
Por ejemplo, en la Figura 56 se muestra el mismo código que se muestra
en la Figura 55, pero algunas partes del código se han colapsado. Los
signos “+” y “-” que aparecen en la columna de la izquierda indican si el
código está colapsado o expandido.

Figura 56: Código HTML colapsado en Notepad++

Por otro lado, los programas de diseño de páginas web muestran la

página HTML de forma gráfica y en tiempo real: es posible desplazar los
distintos elementos que la componen (tablas, imágenes, texto), modificar
sus propiedades (tamaño, color, tipo de letra) y crear efectos avanzados.
Son programas del tipo WYSIWYG, ya que se ve en todo momento la
página tal como se visualizará en un navegador. Un inconveniente de
estos programas es que generan mucho código HTML: si en el futuro
se desea modificar la página directamente a través del código HTML, es
prácticamente imposible debido a la extensión y complejidad del código.

Consejo
Los programas de diseño de páginas web ahorran mucho trabajo y permiten
lograr una gran productividad, pero un buen desarrollador de sitios y apli-
caciones web tiene que ser capaz de trabajar con el programa más simple.

98 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

Conviene aclarar desde un principio que lo único que da formato a

una página web es una etiqueta HTML. Por ejemplo, si editamos con
cuidado un archivo de texto con objeto de tener párrafos y columnas de
cifras formateadas, pero no se incluye ninguna etiqueta, al visualizarlo
en HTML todo el texto fluirá en un solo párrafo y se perderá todo el for-
mato que le hayamos aplicado.
La extensión de un archivo HTML suele ser.html o .htm. Esta segunda
extensión existe debido a que en el sistema operativo DOS y Microsoft
Windows 3.x los ficheros sólo podían tener una extensión de tres carac-
teres. Se deben emplear nombres cortos y sencillos para los ficheros.
Hay que evitar el uso de espacios o de caracteres especiales en el nom-
bre del archivo y también controlar el uso de mayúsculas y minúsculas,
puesto que en Internet existen multitud de sistemas operativos y alguno
puede ser que no acepte los mismos nombres de archivo que acepta el
nuestro. Por ejemplo, hay sistemas operativos en los que las mayúsculas
y minúsculas se distinguen (Unix y sus variantes) y otros donde no se
diferencian (Microsoft Windows44).

Conceptos básicos de HTML

El lenguaje HTML se emplea para crear las páginas web. Es muy fácil
ver el código HTML de una página web que se está visualizando en un
navegador, la opción exacta cambia de un navegador a otro y también,
puede cambiar de una versión a otra de un mismo navegador, pero suelen
tener un nombre similar a:
• “Ver código fuente de la página” en Google Chrome y Mozilla Fi-
refox.
• “Ver código fuente” en Internet Explorer y Opera.
Por ejemplo, en la Figura 57 se muestra la página principal del W3C45.
El código fuente de la página se puede visualizar desde el navegador web
en el que se visualiza la página, tal como se muestra en la Figura 58.

44 Aunque los nombres de los archivos pueden tener mayúsculas y minúsculas, para acceder a un archivo
no se tienen en cuenta. Por ello, en un mismo directorio no pueden existir dos archivos que sólo se diferen-
cian porque algunos caracteres aparecen en mayúsculas en uno y en minúsculas en el otro.
45 Disponible en http://www.w3.org/

Figura 57: Página principal del W3C

Figura 58: Código fuente de la página principal del W3C

El lenguaje HTML consta de una serie de etiquetas o marcas (tags).

Todas las etiquetas comienzan con el símbolo < (menor que) y terminan
con el símbolo > (mayor que). Entre estos dos símbolos aparece el nombre

100 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

de la etiqueta. Por ejemplo, <table> es una etiqueta válida, pero <table

o <table< no lo son.
En el código fuente que se muestra en la Figura 58 se pueden dis-
tinguir las etiquetas <html>, <head>, <title>, <meta>, <link>,
<style>, <body>, <div>, <h1>, <a>, <img>, <span>, <form>,
<select> y <option>.
El lenguaje HTML tiene muchas etiquetas, pero aplicando el Principio
de Pareto (la regla del 80-20), sólo hay que conocer bien el 20% de las
etiquetas, ya que con ellas se crea el 80% del contenido de las páginas
web. Las etiquetas más importantes y que más se emplean son:
• <html>: elemento raíz de la página web.
• <head>: cabecera de la página web.
• <meta>: metainformación de la página web.
• <title>: título de la página web.
• <link>: un enlace independiente del medio.
• <style>: información de estilo incluida en la página web.
• <script>: código de script.
• <body>: cuerpo de la página web.
• <p>: un párrafo.
• <a>: un enlace o un destino (ancla) para un enlace.
• <strong>: énfasis fuerte, mayor que <em>.
• <em>: énfasis.
• <img>: imagen.
• <form>: formulario.
• <input>: control de un formulario, por ejemplo, un cuadro de
texto o un botón de radio.
• <select>: lista de opciones.
• <option>: opción de una lista de opciones.
• <textarea>: campo de texto multilínea.
• <table>: tabla.

© Alfaomega - Altaria 101

https://dogramcode.com/programacion
HTML & CSS

• <tr>: dila de una tabla.

• <th>: celda de encabezado de una tabla.
• <td>: celda de datos de una tabla.
• <blockquote>: cita larga.
• <hr>: separador horizontal.
• <ul>: lista no ordenada.
• <ol>: lista ordenada.
• <li>: elemento de una lista.
• <div>: contenedor genérico en bloque.
• <span>: contenedor genérico en línea.
Si se emplea la sintaxis XHTML, el lenguaje HTML es sensible a ma-
yúsculas y minúsculas, y tiene definidas todas las etiquetas y atributos
en minúsculas. Con esta sintaxis, la cadena <html> es una etiqueta
válida, pero las cadenas <HTML>, <hTML> y <Html> no lo son.
La mayoría de las etiquetas aparecen por parejas (códigos pareados),
siendo una de inicio (apertura) y otra de fin (cierre): delimitan la parte
del documento HTML que se ve afectada por su acción. Pero también hay
etiquetas que aparecen de forma individual, como <img> para insertar
una imagen o <hr> para insertar una línea horizontal. Este último tipo
de etiquetas tiene efecto en el lugar en el que se incluyen.
Si se emplea la sintaxis de HTML, si falta alguna etiqueta de fin no
se produce un error y los navegadores web muestran la página lo mejor
posible. De todas formas, es recomendable ajustarse siempre a la sintaxis
y no cometer errores, ya que así se logrará la máxima compatibilidad con
todos los navegadores web.
Las etiquetas de fin tienen el mismo nombre que las de inicio, pero
van precedidas del símbolo / (barra inclinada). Por ejemplo, la etiqueta
de cierre correspondiente a <html> es </html>.

Advertencia
Recuerda: la sintaxis HTML no es sensible a mayúsculas y minúsculas, pero
la sintaxis XHTML sí que lo es. <HTML>, <hTML> y <Html> son válidos en
la sintaxis HTML, pero no lo son en la sintaxis XHTML.

102 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

Una etiqueta puede poseer varios atributos a los que hay que asignar
valor. Algunos de estos atributos son obligatorios, mientras que otros sue-
len ser opcionales. Por otro lado, algunos aceptan un valor de cualquier
tipo, otros cualquier valor de un tipo concreto (alfanumérico, numérico,
etc.) y, por último, algunos necesitan un valor concreto de un conjunto
de valores (un valor de una enumeración). Los atributos se escriben
dentro de la etiqueta y separados por espacios en blanco. Para asignar
un valor a un atributo se emplea el signo igual =. El valor que se asigna
a un atributo tiene que ir encerrado entre comillas. Por ejemplo, la eti-
queta <img>, que no tiene una etiqueta de cierre, tiene varios atributos,
entre ellos src, que espera cualquier carácter válido en una URL, width
y height que esperan un valor numérico y el atributo alt, que espera
cualquier cadena de caracteres. Un ejemplo de uso de esta etiqueta es:

<img src=”ventas08.jpg” width=”10” height=”10” alt=”Las ventas de agosto”

longdesc=”ventas08.html” />

Los atributos sólo se ponen en la etiqueta de inicio, la etiqueta de ﬁn

nunca lleva atributos.
En la Figura 59 se resume gráficamente la estructura general de un
elemento46 en HTML. Este elemento se llama p (paragraph) y representa
un párrafo de texto. El elemento está compuesto por dos etiquetas, la
etiqueta inicial o etiqueta de apertura <p> que posee el atributo class y la
etiqueta ϐinal o etiqueta de cierre </p>. El atributo class tiene asignado el
valor grande que está entrecomillado. Por último, entre la etiqueta inicial
y la etiqueta final se encuentra el texto Esto es un párrafo; que es el
contenido del elemento. Algunos elementos, llamados elementos vacíos,
no pueden tener contenido entre la etiqueta inicial y final.

Figura 59: Estructura general de un elemento en HTML

46 A lo largo de este libro se utilizarán indistintamente los conceptos de elemento y etiqueta, aunque for-
malmente son conceptos diferentes, porque un elemento se compone de dos etiquetas, la etiqueta de inicio
y la etiqueta de cierre.

© Alfaomega - Altaria 103

https://dogramcode.com/programacion
HTML & CSS

Estructura de una página web

La estructura básica de una página se divide en:
• Prólogo, que contiene la declaración del tipo de documento con
<!DOCTYPE>.
• Cabecera, etiquetado con <head>.
• Cuerpo, etiquetado con <body>.
A continuación se muestra el esqueleto básico de una página web con
la sintaxis HTML (Listado 1) y la sintaxis XHTML (Listado 2).

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8”>
<title>Plantilla base de HTML5 con la sintaxis de HTML</title>
</head>
<body>
<p>Contenido a visualizar en la página web.</p>
</body>
</html>
Listado 1: Esqueleto básico de una página web con la sintaxis HTML

<?xml version=“1.0“ encoding=“utf-8“?>

<!DOCTYPE html>
<html xml:lang=“es“ lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Plantilla base de HTML5 con la sintaxis de XHTML</title>
</head>
<body>
<p>Contenido a visualizar en la página web.</p>
</body>
</html>
Listado 2: Esqueleto básico de una página web con la sintaxis XHTML

104 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

El sentido de cada una de las líneas para el código con la sintaxis

XHTML es:
• Línea 1 (<?xml…): declaración de la página web como un documento
XML, indica la versión de XML y el juego de caracteres empleado.
Esta declaración no es obligatoria, pero es necesaria cuando se
utilice un juego de caracteres distinto a UTF-8. En este ejemplo
se podría haber empleado otro juego de caracteres, por ejemplo,
ISO-8859-1 (Latin 1).
• Línea 2 (<!DOCTYPE…): indica el DTD correspondiente a la versión
y la variante de HTML que se utiliza para escribir la página. De
este modo, el navegador puede optimizar la interpretación de la
página al conocer de antemano la versión empleada.
• Línea 3 (<html…): junto con la línea 11, indican el comienzo y el
final del contenido de la página. La etiqueta <html> es obligato-
ria. Los atributos xml:lang y lang definen el idioma principal de
la página web, que posteriormente se puede cambiar para partes
concretas.
• Línea 4 (<head>): junto con la línea 7, indican el comienzo y el
final de la cabecera. La etiqueta <head> es obligatoria.
• Líneas 5-6: lo que se escribe en la cabecera no se visualiza en el
contenido de la página. Se suele usar para incluir código que se
ejecuta en el cliente con <script>, definir un estilo en la propia
página con <style>, definir un estilo que reside en un fichero
externo con <link> o incluir información sobre el contenido de la
página con la etiqueta <meta>. En este ejemplo se ha empleado
la etiqueta <meta> para indicar el juego de caracteres UTF-8. La
etiqueta <meta> es opcional.
• Línea 6 (<title>): define el título de la página, que se muestra en
la ventana de título del navegador. La etiqueta <title> es obliga-
toria. En este ejemplo el título de la página es “Plantilla base de
HTML5 con la sintaxis de XHTML”.
• Línea 8 (<body>): junto con la línea 10, indican el comienzo y el
final del cuerpo. La etiqueta <body> es obligatoria.

© Alfaomega - Altaria 105

https://dogramcode.com/programacion
HTML & CSS

• Línea 9: lo que se escribe en el cuerpo se visualiza en la página.

La información contenida en esta sección se puede visualizar con
apariencias muy diversas: sólo hay que aplicar distintos formatos
a las secciones que la componen. En este ejemplo se muestra un
párrafo con el texto “Contenido a visualizar en la página web”.

Consejo
Comience el título de la página con una palabra portadora de información,
por lo general el nombre de la empresa. Los usuarios pueden escanear, en lugar
de leer, el texto en las pantallas, así que si no se captura la atención con la pri-
mera palabra, se arriesga a perder su atención. Si inicia el título de la página con
cualquier palabra en vez de la palabra más importante, el nombre de la empresa
se pierde en la lista de marcadores y en los resultados de búsqueda. Por ejemplo,
muchos títulos de las páginas comienzan con “Bienvenido” o “Página de inicio”,
que puede lucir bien de forma aislada, pero no transmite ninguna información
diferenciadora del sitio web en la primera palabra. Del mismo modo, si el nombre
de la empresa comienza con un artículo, como “el” o “una”, no incluya el artículo en
el título de la página. Por ejemplo, el título de la página de “The New York Times”
debe ser “New York Times”.
Fuente: 113 Design Guidelines for Homepage Usability, Jakob Nielsen

http://www.nngroup.com/articles/113-design-guidelines-homepage-usability/

Consejo
No incluya “página de inicio” en el título. Esto añade verborrea sin valor. Siempre
que tenga una URL simple para la página principal del sitio web, no es necesario
especiϔicar que es la página de inicio en el título de la página. Por supuesto, cada
página de su sitio debe tener un único título, para que ninguna otra página pueda
ser confundida con la página de inicio en el historial de navegación o en la lista
de favoritos.
Fuente: 113 Design Guidelines for Homepage Usability, Jakob Nielsen

http://www.nngroup.com/articles/113-design-guidelines-homepage-usability/

106 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

Consejo
Limite los títulos de las páginas a no más de siete u ocho palabras y menos
de 64 caracteres en total. Los títulos más largos son menos susceptibles de ser
leídos, especialmente en las listas de favoritos, y no se mostrarán correctamente
en muchas aplicaciones.
Fuente: 113 Design Guidelines for Homepage Usability, Jakob Nielsen

http://www.nngroup.com/articles/113-design-guidelines-homepage-usability/

Más información
Si quieres saber más sobre la estructura básica de una página web, consulta
el artículo “Plantilla base XHTML” de Olga Carreras, disponible en http://
olgacarreras.blogspot.com/2007/02/plantilla-base-xhtml.html

Advertencia
¡Cuidado! Todos los atributos de presentación de la etiqueta <body> (alink,
background, bgcolor, link, text y vlink) que se empleaban en
versiones anteriores de HTML están desaconsejados en HTML5. En su lugar
se debe utilizar CSS.

Cuando se escriben las etiquetas de ﬁn hay que llevar mucho cuidado

en el orden de las etiquetas: la última etiqueta en aparecer es la primera
que se tiene que cerrar. Por ejemplo, en el esqueleto anterior, la etiqueta
<html> aparece antes que <body>; por tanto, el orden correcto al cerrar
las etiquetas es primero </body> y luego </html>.
Es muy aconsejable poner título a todos los documentos y, además, se
deberá procurar que éste sea lo más descriptivo posible, puesto que si al-
gún usuario decide incluir nuestra página en su lista de enlaces favoritos
(bookmarks), será el título lo que quede almacenado en dicha lista (junto
con la URL). En el caso de que no se haya especiﬁcado un título, lo que
se almacena en la lista de enlaces es la dirección de la página (la URL).

Consejo
El título de una página web es también muy importante para el posiciona-
miento en los buscadores, para el SEO (Search Engine Optimization).

En cualquier parte de una página web, si queremos incluir un comentario de-

beremos emplear la sintaxis . Un comentario puede
ocupar una o varias líneas de código, ya que el delimitador de cierre de comen-
© Alfaomega - Altaria 107
https://dogramcode.com/programacion
HTML & CSS

tario --> se puede situar en una línea diferente al delimitador de apertura de

comentario <!--. Los comentarios no se procesan y no producen una salida
visible en la página cuando se visualiza en un navegador web.

Consejo
Emplea los comentarios de HTML para clariﬁcar la estructura de la página:
utiliza los comentarios para separar distintas partes del código.
También puedes emplear los comentarios para ocultar temporalmente alguna
parte de la página para realizar pruebas sin tener que borrar esa parte del
código.

Más información
https://youtu.be/sIO8kb5b6D0

HTML (HyperText Markup Lan-

guage) se emplea únicamente
para definir la estructura y el
contenido o información de una
página web, la presentación vi-
sual no se deﬁne con HTML, es-
tructura de un elemento (etique-
ta), ¿cómo se aprende HTML?,
etiquetas básicas (html, head,
title, body, h1, h2, h3, h4, h5, h6,
p, strong, em).
https://youtu.be/Fkcxw9KHHsM

HTML (HyperText Markup Lan-

guage), creación de una página
sencilla con el Bloc de Notas de
Microsoft Windows.

108 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

https://youtu.be/G7WJotrXz_c

HTML (HyperText Markup Lan-

guage), creación de una página
sencila con Notepad++, caracte-
rísticas de Notepad++ que ayu-
dan a la escritura de HTML.

https://youtu.be/-tnXAYa0eWI

HTML (HyperText Markup Lan-

guage), reglas (etiquetas siempre
cerradas, documentos bien for-
mados, etiquetas en minúsculas,
valores de los atributos siem-
pre entre comillas), caracteres
válidos en los nombres de los
ﬁcheros.

Variantes de XHTML 1.0

Aunque HTML5 es una recomendación oficial desde octubre de 2014
y, por tanto, ya se puede y se debe utilizar en el desarrollo de los nuevos
sitios web, todavía existen y existirán durante muchos años millones
de sitios web desarrollados con versiones anteriores de HTML. Además,
también existen miles de libros, tutoriales y recursos que se basan en
las versiones anteriores de HTML. Por tanto, conviene conocer no sólo la
versión actual de HTML, sino también las versiones anteriores.
Uno de los objetivos de XHTML 1.0 fue separar el contenido (la estruc-
tura y los datos) de la presentación. Para lograrlo, proponía que la página
web sólo tuviera el contenido y todos los aspectos relacionados con la
presentación se definiesen mediante CSS. Esta filosofía sigue existiendo
y se ha potenciado en HTML5. Como esta forma de crear páginas web
podía suponer un gran cambio para los millones de personas que lleva-
ban años haciendo páginas web con HTML, XHTML ofrecía tres variantes
para que el cambio a XHTML fuese menos drástico:
• Strict: indicado cuando se quiere cumplir completamente con la
separación del contenido y la presentación.

© Alfaomega - Altaria 109

https://dogramcode.com/programacion
HTML & CSS

• Transitional: indicado cuando se desea emplear las características

de presentación de HTML. Además, incluye algunas etiquetas que
se han quedado obsoletas y se desaconseja su uso.
• Frameset: necesario cuando se quieren utilizar los marcos para
dividir la página web en dos o más partes. Incluye todo lo deﬁnido
en Transitional más las etiquetas para marcos.
La variante Strict es la más estricta y tiene menos etiquetas que las
otras dos variantes. Por ejemplo, la etiqueta <font> de HTML está dis-
ponible en las variantes Transitional y Frameset, pero no en Strict.
Cada una de las variantes posee su propio DTD. El DTD indica la ver-
sión del lenguaje que se está empleando en la página web. En el Listado
3 se muestra la forma de indicar el DTD de cada variante al principio de
una página web.

<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
Listado 3: Declaración de los DTD de las tres variantes de XHTML 1.0

Cómo escribir texto en una página web

La etiqueta básica para escribir texto es <p>, que deﬁne un párrafo
de texto. El navegador web separa automáticamente cada párrafo de
texto del siguiente mediante un salto de línea automático y un margen
de separación.
110 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

Advertencia
No utilices <br> para crear un espacio adicional entre los párrafos de texto.
En su lugar se debe utilizar CSS.

En HTML, el espacio (código 32 en Unicode), el tabulador (código 9),

el avance o salto de línea (código 10), el retorno de carro (código 13) y
el avance de página (código 12) se deﬁnen como secuencias de espacio
en blanco. Las secuencias de espacio en blanco separan palabras y no
se pueden emplear para producir ciertos efectos visuales de espaciado.
Por ejemplo, los saltos de línea que incluyamos en una página son
irrelevantes (el navegador no los tiene en cuenta). Para producir un salto
de línea se emplea la etiqueta <br> (break).
Los espacios también son irrelevantes: si separamos dos palabras por
varios espacios, sólo se tendrá en cuenta uno de ellos. Si queremos incluir
varios espacios, debemos de emplear la referencia a entidad de carácter
  (non breaking space) .Por ejemplo, para incluir tres espacios se tiene
que escribir    . En realidad, el objetivo de  
no es deﬁnir un espacio en blanco cualquiera, sino un espacio en blanco
en el que el navegador no debe insertar un salto de línea. Este tipo de
espacio en blanco se conoce en español como espacio duro y evita que
se produzca un salto automático de línea en el lugar donde se inserta,
a diferencia de un espacio normal, que sí permite separar las palabras
en diferentes líneas de texto. El espacio duro también se conoce como
espacio de no separación, espacio ϐijo o espacio irrompible. Este espacio es
útil cuando se quieran mantener dos palabras juntas, como por ejemplo
en el caso del nombre de una persona o cuando un número aparece junto
con una unidad de medida.

Consejo
Use los espacios de no separación entre las palabras en las frases que tienen
que ir juntas con el ϔin de ser comprendidas. La mayoría de las páginas de inicio
utilizan diseños de varias columnas, y el texto debe caber en espacios estrechos.
Debido a que hay muchas posibilidades de donde se divida el texto en función de
la resolución de pantalla del usuario, tamaño del monitor, tamaño de la ventana,
versión del navegador, y así sucesivamente, al obligar que ciertas frases permanez-
can juntas puede mantener la integridad y la lógica de los contenidos.
Fuente: 113 Design Guidelines for Homepage Usability, Jakob Nielsen

http://www.nngroup.com/articles/113-design-guidelines-homepage-usability

© Alfaomega - Altaria 111

https://dogramcode.com/programacion
HTML & CSS

Consejo
Aunque los espacios en blanco y los saltos de línea no son signiﬁcativos, utilí-
zalos para facilitar la escritura y lectura del código HTML de una página web.

El siguiente código (Listado 4) crea una página HTML sencilla, que

podemos ver en la Figura 60. El título indicado sólo aparece en la barra
de título de la ventana activa del navegador. El título se indica usando
los códigos pareados <title>…</title>, y se especiﬁca usando un texto
plano, sin códigos HTML de formato (el título de la página no se puede
poner en negrita o cursiva, por ejemplo).

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=“utf-8“ />
<meta name=“generator“ content=“Bloc de notas“ />
<meta name=“author“ content=“Sergio Luján Mora“ />
<meta name=“keywords“ content=“XHTML, web“ />
<meta name=”description” content=”Página de prueba: párrafos y saltos de
línea” />
<title>Esto es una página de prueba</title>
</head>
<body>
<p>Esto es el cuerpo de una página HTML.
<br />
Esto tiene que aparecer en una línea nueva, pero en el mismo párrafo.
</p>
<p>Esto tiene que aparecer en otro párrafo.
<br /><br />
Tiene que existir una línea en blanco de separación con la anterior.
</p>
<p>Este es el último párrafo de esta página.
</p>
</body>
</html>
Listado 4: Primera página con HTML

112 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

En la página del Listado 4 se ha empleado la etiqueta <meta> para

deﬁnir metainformación sobre la página web. Más adelante en este mismo
capítulo se explica el uso de la etiqueta <meta>.

Figura 60: Primera página con HTML

Más información
Si quieres conocer todas las etiquetas de HTML, consulta las páginas:

• MSDN HTML/XHTML Reference – Elements: https://msdn.microsoft.

com/en-us/library/ie/hh772721(v=vs.85).aspx

• MDN HTML element reference: https://developer.mozilla.org/en-US/

docs/Web/HTML/Element

• W3Schools – HTML Element Reference: http://www.w3schools.com/

tags/default.asp

Cómo comprobar que una página web está

bien escrita
Aunque el lenguaje HTML es muy sencillo de emplear, eso no signiﬁca
que las etiquetas se puedan escribir de cualquier forma: existen una serie
de reglas que deﬁnen un orden correcto entre las etiquetas. Además, no
todas las etiquetas tienen los mismos atributos y algunos atributos son
obligatorios, mientras que otros son opcionales.
Si se escribe mal el código HTML, normalmente la página web se visua-
lizará más o menos bien en la mayoría de los navegadores porque están
preparados para admitir errores, pero en algunos casos la presentación
de la página puede variar enormemente de un navegador a otro. Por tan-
to, para asegurar que una página web se visualiza correctamente en la
mayoría de los navegadores es imprescindible escribir un código correcto.

© Alfaomega - Altaria 113

https://dogramcode.com/programacion
HTML & CSS

Cuando se escribe directamente el código HTML (es decir, sin un pro-

grama de diseño de páginas web que genera el código HTML), se puede
utilizar la herramienta W3C Markup Validation Service47 para comprobar
que el código HTML es correcto. Esta herramienta permite validar dife-
rentes lenguajes de marcado, como HTML, XHTML, SVG y otros. También
se puede emplear la herramienta HTML Tidy48 para obtener una mejor
apariencia visual del código fuente.
En la Figura 61 se muestra la página principal de W3C Markup Valida-
tion Service. Este servicio ofrece tres modos de validar una página web:
• Validate by URI: permite validar una página web mediante la in-
troducción de su URL. Por tanto, la página web tiene que estar
publicada en Internet.
• Validate by File Upload: permite validar una página web mediante
la subida del ﬁchero correspondiente.
• Validate by Direct Input: permite validar una página web mediante
la introducción directa de su código.

Figura 61: Validador de HTML del W3C

En la Figura 62 se muestra el resultado de validar el código del Listado

4. Cuando el código es correcto se muestra en color verde el mensaje “This
document was successfully checked as” y la versión de HTML que se ha valida-
do. Sin embargo, si el código contiene algún error, se muestra en color
47 Disponible en http://validator.w3.org
48 Disponible en http://cgi.w3.org/cgi-bin/tidy

114 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

rojo el mensaje “Errors found while checking this document as” y la versión de
HTML que se ha intentado validar, tal como se muestra en la Figura 63.

Figura 62: Validación correcta con el validador del W3C

Figura 63: Validación incorrecta con el validador del W3C

Cuando una página web contiene errores, en el resultado de la vali-

dación se detalla uno por uno los errores que contiene la página, indi-
cando la posición y un fragmento del código erróneo con una pequeña
explicación. Por ejemplo, el Listado 5 contiene el mismo código HTML
que el Listado 4 pero con dos errores:

© Alfaomega - Altaria 115

https://dogramcode.com/programacion
HTML & CSS

• En la etiqueta <html>, el atributo lang se ha cambiado por lan-

guage.
• Una etiqueta <br /> se ha cambiado por <break>.

<!DOCTYPE html>
<html language=”es”>
<head>
<meta charset=”utf-8” />
<meta name=”generator” content=”Bloc de notas” />
<meta name=”author” content=”Sergio Luján Mora” />
<meta name=”keywords” content=”XHTML, web” />
<meta name=”description” content=”Página de prueba: párrafos y saltos de
línea” />
<title>Esto es una página de prueba</title>
</head>
<body>
<p>Esto es el cuerpo de una página HTML.
<break />
Esto tiene que aparecer en una línea nueva, pero en el mismo párrafo.
</p>
<p>Esto tiene que aparecer en otro párrafo.
<br /><br />
Tiene que existir una línea en blanco de separación con la anterior.
</p>
<p>Este es el último párrafo de esta página.
</p>
</body>
</html>

Listado 5: Primera página con errores

Como se puede ver en la Figura 63, el validador de HTML detecta cin-

co errores cuando en realidad sólo hay dos errores. Este resultado no
es un error del validador, sino un comportamiento normal de este tipo

116 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

de herramientas: cuando el validador encuentra el primer error intenta

recuperarse de ese error, pero al hacerlo puede tomar ciertas decisiones
que pueden producir que se considere como erróneo un código que es
correcto.
En la Figura 64 se pueden ver los mensajes de error que genera el
validador:
• “Line 2, Column 20: Attribute language not allowed on element html at this
point”. El validador indica que el atributo language no se permite
en el elemento <html> porque ese atributo no existe.
• “Line 13, Column 9: Element break not allowed as child of element p in this con-
text. (Suppressing further errors from this subtree)”. El elemento <break>
no se permite como elemento hijo de <p>.
• Los siguientes mensajes no son correctos, son falsos positivos
originados por los errores previos.

Figura 64: Mensajes de error de la validación incorrecta

Más información
Si quieres saber más sobre lo importante que es emplear los estándares en el
desarrollo de las páginas web y los beneﬁcios que reporta, consulta la página
web de “The Web Standards Project” disponible en http://www.webstandards.
org/

© Alfaomega - Altaria 117

https://dogramcode.com/programacion
HTML & CSS

Más información
https://youtu.be/CHfYRVHKMtc

Validación del código, versio-

nes de HTML, el DOCTYPE, qué
valor de DOCTYPE debo usar,
lista de DOCTYPEs, servicios de
validación: W3C Markup Validator
(http://validator.w3.org/), WDG
HTML Validator (http://htmlhelp.
com/tools/validator/), Validator.nu
(http://validator.nu/), demostración
de validación de tres páginas.

Por qué es importante escribir código

correcto
Las principales razones por las que una página web se puede visua-
lizar de forma incorrecta en un navegador son:
1. Los navegadores web pueden tener fallos y en algunas situaciones
pueden cometer errores.
2. Los navegadores web pueden presentar problemas de compatibili-
dad entre ellos. La especiﬁcación de HTML proporciona reglas de
cómo se deben interpretar y visualizar los diferentes elementos y
atributos del lenguaje, pero en algunos casos existe espacio para
la interpretación.
3. El soporte para las nuevas etiquetas y atributos no es universal,
por lo que puede ser que en algunos casos una página no se vea
bien porque la página contiene alguna característica que no ad-
mite el navegador.
4. El código HTML de la página web puede contener errores.

118 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

De estas cuatro posibles causas, las tres primeras están fuera del
control de los desarrolladores web:
• Las dos primeras dependen de los fabricantes de los navegadores
web, como la empresa Microsoft o la organización Mozilla.
• La tercera depende en parte de los fabricantes, como es el caso de
Microsoft que siempre ha tardado muchos años en actualizar sus
navegadores y adecuarlos a los nuevos estándares, pero también
depende de los usuarios cuando no se actualizan a los nuevos
navegadores.
• La última causa depende de los desarrolladores web, de las per-
sonas que escriben el código HTML.
La especificación del lenguaje HTML establece claramente cómo se
tiene que escribir el código HTML. El W3C proporciona un validador que
permite comprobar si el código de una página es correcto, es decir, si se
ajusta a la especificación de HTML. Sin embargo, a pesar de existir herra-
mientas como el validador del W3C, muchos de los desarrolladores web
nunca comprueban el código de sus páginas web porque suponen que
el código está correcto, ya que la página se visualiza como ellos esperan.
Los navegadores web son programas muy complejos y robustos que
están preparados para manejar ciertos errores. Pero cada navegador los
maneja de diferente forma, ya que la especificación de HTML no establece
cómo se tiene que recuperar un navegador cuando encuentre un error
en el código.
Por ejemplo, cuando no se cierra un párrafo, el navegador decide ce-
rrarlo automáticamente cuando empieza un nuevo párrafo, ya que en
las normas de HTML, un párrafo no puede contener otro párrafo. Pero
las situaciones de error pueden ser infinitas y pueden ser mucho más
complicadas que la anterior.
En el ejemplo del Listado 6, la etiqueta <p> de párrafo e <i> de cursiva
no han sido cerradas en los puntos adecuados. En HTML las etiquetas
deben estar correctamente anidadas y cerradas.

© Alfaomega - Altaria 119

https://dogramcode.com/programacion
HTML & CSS

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8” />
<title>Etiquetas no cerradas</title>
</head>
<body>
<p>Un párrafo de texto.</p>

<p><i>El primer párrafo.

<p><i>El segundo párrafo.
<p><i>El tercer párrafo.
<p><i>El cuarto párrafo.

<p>Un párrafo de texto.</p>

</body>
</html>
Listado 6: Página web con errores

En la Figura 65 se muestra el resultado de validar esta página web

con el validador oﬁcial del W3C. La página no valida correctamente y
contiene 10 errores y 2 advertencias.

Figura 65: Validación de página web con errores

120 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

En la Figura 66 se puede ver cómo se visualiza esta página web en

los navegadores Google Chrome y Microsoft Internet Explorer. En ambos
navegadores la página web se muestra de la misma forma. Sin embargo,
el último párrafo no debería mostrarse en cursiva. ¿Por qué se muestra
en cursiva?

(a) (b)
Figura 66: Visualización de página web con errores

Si se consulta el DOM de la página (Figura 67), es decir, la estructura

de nodos que componen la página, se observa que en cada párrafo se
acumulan las etiquetas <i> que no han sido cerradas en los párrafos
anteriores. Por ejemplo, en el cuarto párrafo se observan cuatro etiquetas
<i> anidadas.

Figura 67: Estructura de nodos en página web con errores

© Alfaomega - Altaria 121

https://dogramcode.com/programacion
HTML & CSS

En el ejemplo anterior, los navegadores Google Chrome y Microsoft

Internet Explorer visualizan la página web con la misma presentación
visual, pero no siempre es así. Por ejemplo, el código del Listado 7 con-
tiene seis errores y dos advertencias, tal como se puede ver en la Figura
68, que muestra el resultado de validar la página con el W3C Markup
Validation Service. Los errores son:
• La primera lista no ordenada <ul> se cierra después del segundo
elemento, por lo que el elemento <li>Tres</li> se encuentra
fuera de la lista.
• El mismo error se repite en la segunda lista ordenada <ol>.
• La lista de opciones <select> se cierra después del segundo
elemento, por lo que el elemento <option>Tres</option> se en-
cuentra fuera de la lista de opciones.

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8” />
<title>Lista con errores</title>
</head>
<body>
<h1>Una lista con errores</h1>
<ul>
<li>Uno</li>
<li>Dos</li></ul>
<li>Tres</li>
</ul>
<p>Un párrafo de texto.</p>
<ol>
<li>Uno</li>
<li>Dos</li></ol>
<li>Tres</li>

122 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

</ol>
<select>
<option>Uno</option>
<option>Dos</option></select>
<option>Tres</option>
</select>
</body>
</html>
Listado 7: Página web con errores

Figura 68: Validación de página web con errores

Esta página web se visualiza de diferente forma en diferentes navegado-

res web. En la Figura 69 se puede ver cómo se muestra esta página web
en los navegadores: (a) Google Chrome, (b) Microsoft Internet Explorer,
(c) Opera y (d) Mozilla Firefox.
La visualización en los navegadores Google Chrome y Opera es idéntica
porque ambos navegadores comparten el mismo motor de visualización.
Se puede observar que en las dos listas, en la no ordenada y en la orde-
nada, el elemento situado fuera de la lista se representa con un punto o
viñeta. Por otro lado, el elemento <option> se representa en la línea si-
guiente a la lista de opciones <select>. Sin embargo, respecto a los otros
navegadores se aprecian cambios importantes. Este tipo de errores es la
primera causa de que una página web se visualice de diferente forma en
diferentes navegadores.

© Alfaomega - Altaria 123

https://dogramcode.com/programacion
HTML & CSS

(a) (b)

El código HTML correcto ayuda a que sea

interpretado correctamente por los produc-
tos de apoyo como los lectores de pantalla
y ayuda a mejorar la accesibilidad de una
página web.

124 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

Más información
https://youtu.be/RnzKl8OA5gQ

Principales causas de que una

página web no sea vea igual en
todos los navegadores: fallos de
los navegadores, problemas de
compatibilidad entre los nave-
gadores, soporte de HTML por
los navegadores, errores en el
código HTML.
https://youtu.be/_NHarDRZimw

Ejemplos de errores en el código

HTML: etiqueta “b” sin cerrar,
etiqueta “span” sin cerrar, comi-
llas del valor de un atributo sin
cerrar, valor del atributo size de
la etiqueta “input” incorrecto.

https://youtu.be/fBQ8wE5Ffxs

El DOM (Document Object Mo-

del) es la razón de que los nave-
gadores muestren una página de
diferentes formas cuando tiene
un error.

Caracteres especiales y secuencias de escape

Algunos sistemas informáticos antiguos, muy antiguos, trabajan con
7 bits en vez de 8. En esos casos, si se desea trabajar con caracteres
ASCII de la parte superior de la tabla (128-255), es necesario codiﬁcarlos
de algún modo. También puede ser que en la escritura de una página
web se utilice un juego de caracteres como ISO 8859-1 (Latin1) que sólo
contiene 256 caracteres. También puede ocurrir que el hardware o el
software impidan introducir directamente algún carácter (por ejemplo,
porque no existe una tecla asociada al carácter). Para solucionar estos

© Alfaomega - Altaria 125

https://dogramcode.com/programacion
HTML & CSS

problemas, en los documentos HTML se pueden codiﬁcar los caracteres

no admitidos en el juego de caracteres de dos formas, mediante referen-
cias numéricas o referencias a entidad de carácter.
Las referencias numéricas, también llamadas secuencias de escape,
usan el formato &#D; donde D es un número decimal que se reﬁere al
carácter correspondiente en el estándar ISO 1064649. Por ejemplo, Á
representa el carácter Á. También se puede emplear la notación &#xH;
donde H es un número hexadecimal. La referencia numérica Á
también representa el carácter Á.
Como recordar el número asociado a un carácter no es intuitivo, HTML
ofrece una forma alternativa de referirse a un carácter mediante un
nombre simbólico. Las referencias a entidad de carácter usan el formato
&aaaa; donde aaaa es una cadena de texto que representa el carácter. Por
ejemplo, Á representa el carácter Á o ñ es el carácter ñ.
Las referencias a entidad de carácter son sensibles a mayúsculas
y minúsculas, por lo que Á representa el carácter Á (la letra a
mayúscula acentuada con tilde), mientras que á representa el
carácter á (la letra a minúscula acentuada con tilde).

Más información
En http://www.w3.org/TR/html401/sgml/entities.html se puede encontrar
una lista con todas las referencias a entidad de carácter deﬁnidas en HTML
4.01, que sigue siendo válida en HTML5.

En HTML existen cuatro caracteres con un signiﬁcado especial, por

lo que es necesaria su codiﬁcación cuando se quieren emplear de forma
literal. En la Tabla 7 ﬁguran los caracteres especiales con su referencia
numérica y de entidad de carácter.

Numérica Numérica
Carácter Entidad
decimal hexadecimal
“ " " "
& & & &
< < < <
> > > >
Tabla 7: Caracteres con un signiﬁcado especial en HTML

49 ISO 10646 Universal Character Set (UCS) deﬁne un juego de caracteres estandarizado con casi
100.000 caracteres, donde cada carácter se identiﬁca por medio de un nombre único y un número entero.

126 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

Advertencia
¡Cuidado! Al copiar la URL de una página web para colocarla en un enlace,
tenemos que tener cuidado con &: si aparece como un valor literal, tendremos
que cambiarlo por &.

Por último, también existen algunos caracteres que son difíciles de

conseguir desde el teclado, ya que no están representados. En la Tabla
8 se muestran algunos ejemplos de estos caracteres. En la Figura 70 se
muestra una lista proporcionada por el W3C50.

Numérica Numérica
Carácter Entidad
decimal hexadecimal
§ § § §
© © © ©
® ® ® ®
℗ ℗ ℗ &copysr;
™ ™ ™ ™ &TRADE;
¶ ¶ ¶ ¶
¼ ¼ ¼ ¼
½ ½ ½ ½ &half;
¾ ¾ ¾ ¾
‰ ‰ ‰ &permil;
Tabla 8: Ejemplos de caracteres sin una tecla asociada

Figura 70: Fragmento de la tabla con las referencias a entidad de carácter del W3C

50 Disponible en http://dev.w3.org/html5/html-author/charref

© Alfaomega - Altaria 127

https://dogramcode.com/programacion
HTML & CSS

Elementos en línea o en bloque

En HTML se distinguen dos tipos de elementos, los elementos en línea
(en inglés, inline elements o text level elements) y los elementos en bloque
(block level elements). La distinción de estos dos tipos de elementos se basa
en dos características:
• Contenido: normalmente, los elementos en bloque pueden contener
otros elementos en bloque o en línea, mientras que los elementos
en línea sólo pueden contener otros elementos en línea y datos.
• Presentación: los elementos en bloque comienzan en una nueva
línea, mientras que los elementos en línea se muestran uno a
continuación de otro.

Advertencia
Aunque con CSS se puede alterar la presentación normal de cualquier ele-
mento de HTML (un elemento en línea se puede presentar como un elemento
en bloque y viceversa), es una muy mala práctica realizar estos cambios y no
conviene modiﬁcar el comportamiento normal de los elementos.

Metadatos
La etiqueta <meta> permite indicar metadatos de una forma muy sim-
ple. Los metadatos son datos sobre los datos. Los metadatos, por ejemplo,
permiten incorporar información sobre el contenido de una página, como
por ejemplo indicar cómo, cuándo y quién ha recogido una información y
como le ha dado formato. Esta etiqueta sólo puede aparecer en la sección
<head>. Normalmente, esta etiqueta la emplean los motores de búsqueda,
los navegadores y las herramientas de diseño de páginas web, pero no la
emplean directamente los usuarios que visualizan una página.
La etiqueta <meta> es una etiqueta vacía que no puede tener conteni-
do entre la etiqueta de inicio y de cierre. En las versiones anteriores de
HTML, como por ejemplo en XHTML 1.0, la etiqueta <meta> presentaba
dos variantes:
• <meta http-equiv=”propiedad” content=”contenido”>. El
atributo http-equiv se emplea cuando la página web se recupera
mediante HTTP. Los servidores web pueden usar el nombre de la
propiedad para crear una cabecera según el estándar RFC 822

128 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

“Standard for the Format of ARPA Internet Text Messages”51 en la

cabecera de la respuesta HTTP (algunas propiedades de la cabe-
cera no se pueden ﬁjar de esta forma). Por ejemplo, la siguiente
etiqueta <meta>:

<meta http-equiv=”Expires” content=”Tue, 20 Aug 1996 14:25:27 GMT” />

se convierte en la siguiente cabecera HTTP:

——Expires: Tue, 20 Aug 1996 14:25:27 GMT

que puede ser usada por la caché del navegador o por los servidores
proxy para saber hasta cuándo se puede emplear la copia de una pági-
na existente en la caché. La etiqueta <meta> también se puede emplear
con la cabecera Refresh para refrescar una página cada cierto período
de tiempo. Con esta etiqueta se puede recargar automáticamente una
página cuyo contenido cambia con mucha frecuencia, como por ejemplo
la página con las últimas noticias de un periódico digital. Por ejemplo,
la siguiente página se refresca cada 5 segundos:

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8” />
<meta http-equiv=”Refresh” content=”5” />
<title>Prueba de refresh</title>
</head>
<body>
<p>
Esta página se refresca cada 5 segundos.
</p>
</body>
</html>
Listado 8: Ejemplo de refresco

51 Disponible en https://tools.ietf.org/html/rfc822

© Alfaomega - Altaria 129

https://dogramcode.com/programacion
HTML & CSS

Si se indica una URL en el atributo content, se sustituirá la página

web actual por la indicada en la URL una vez haya transcurrido el nú-
mero de segundos especiﬁcados. Esto es útil para redireccionar automá-
ticamente al usuario desde una página web a otra (por ejemplo, cuando
una página web ha cambiado de lugar). El siguiente ejemplo redirecciona
automáticamente al usuario después de 10 segundos:

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8” />
<meta http-equiv=”Refresh” content=”10; URL=http://www.nuevaweb.
com/” />
<title>Prueba de redirección</title>
</head>
<body>
<p>
Esta página ha cambiado, la nueva dirección es <a href=”http://www.nue-
vaweb.com/”>http://www.nuevaweb.com</a>.
</p>
</body>
</html>
Listado 9: Ejemplo de redirección

Consejo
No recargue automáticamente la página para enviar cambios a los usuarios.
La recarga automática se percibe como algo intrusivo, es como tirar de la alfom-
bra de debajo de sus usuarios, particularmente si están utilizando una parte de la
página que desaparece o cambia de posición durante la actualización.
Fuente: 113 Design Guidelines for Homepage Usability, Jakob Nielsen

http://www.nngroup.com/articles/113-design-guidelines-homepage-usability/

130 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

<meta name=”propiedad” content=”contenido”>. Se emplea para

incluir propiedades del documento, tales como el autor, la fecha de cadu-
cidad, una lista de palabras clave, etc. El atributo name indica el nombre
de la propiedad mientras que el atributo content especiﬁca su valor. Por
ejemplo, las siguientes etiquetas <meta> indican el autor, una descrip-
ción, una lista de palabras clave y la fecha de creación de una página:

<meta name=”Author” content=”Sergio Luján Mora” />

Esta variante de la etiqueta se emplea con el valor robots para indicar

a los motores de búsqueda si la página se puede indexar y si se puede
seguir buscando a partir de los enlaces que contiene la página. En el
siguiente ejemplo, un robot buscador no debería ni indexar la página ni
analizar la página para buscar más enlaces y seguir buscando:

<meta name=”robots” content=”noindex, nofollow” />

Más información
En las siguiente páginas puedes encontrar más información sobre los robots
o bots de búsqueda y la etiqueta <meta>:

• Bloquear la indexación de búsquedas con metaetiquetas: https://

support.google.com/webmasters/answer/93710?hl=es
• Robots meta tag and X-Robots-Tag HTTP header speciﬁcations:
https://developers.google.com/webmasters/control-crawl-index/
docs/robots_meta_tag

© Alfaomega - Altaria 131

https://dogramcode.com/programacion
HTML & CSS

A título de ejemplo, la página principal de la web de la Universidad de

Alicante52 contiene los siguientes metadatos:

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>

Más información
Si quieres saber más sobre los posibles valores de la etiqueta <meta>, consul-
ta la página web “A Dictionary of HTML META Tags” disponible en http://
vancouver-webpages.com/META/metatags.detail.html

Más información
Si quieres conocer las etiquetas <meta> que admite Google, consulta la pági-
na web “Metaetiquetas que Google entiende” disponible en https://support.
google.com/webmasters/answer/79812?hl=es

Novedades en HTML5
El uso de la etiqueta <meta> se ha simpliﬁcado en HTML5. Esta eti-
queta ahora posee el atributo charset que hace que sea más fácil indicar
el juego de caracteres de una página web. Antes en HTML el juego de
caracteres se indicaba como:

<meta http-equiv=”content-type” content=”text/html; charset=UTF-8”>

52 Disponible en http://www.ua.es/

132 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

Ahora en HTML5 se indica simplemente como:

Más información
En el documento Character Sets de IANA, disponible en http://www.iana.
org/assignments/character-sets/character-sets.xhtml, se deﬁnen los nombres
oﬁciales de los juegos de caracteres que se pueden emplear en las páginas web.

Además, HTML5 ha estandarizado los siguientes valores del atributo

name:
• application-name: el nombre de la aplicación web que contiene
la página.
• author: el nombre del autor de la página.
• description: la descripción de la página.
• generator: el software utilizado para crear la página.
• keywords: una lista de palabras clave separadas por comas.

HTML5 simpliﬁca la deﬁnición del juego de

caracteres de una página web con <meta
charset=””>.

Más información
En el documento HTML5 Differences from HTML4 disponible en http://www.
w3.org/TR/html5-diff/ se detallan las diferencias que existen entre HTML4,
la versión anterior de HTML, y HTML5, la última versión.

© Alfaomega - Altaria 133

https://dogramcode.com/programacion
https://dogramcode.com/programacion
5
La estructura
de la página

Una página web es un documento electrónico que se debe estructurar

correctamente para que la información que contiene sea fácil de localizar
y consultar. El lenguaje HTML proporciona varias etiquetas que permi-
ten estructurar una página web en diferentes niveles. En HTML5 se han
añadido nuevas etiquetas que proporcionan más sentido semántico a las
páginas web, lo que permite que los motores de búsqueda o los productos
de apoyo como los lectores de pantalla comprendan mejor las páginas web.
Los objetivos de este capítulo son:
• Aprender a utilizar los encabezados de sección para estructurar
el contenido de una página web.
• Conocer los nuevos elementos estructurales de HTML5.
• Evitar las malas prácticas de la spanmania y la divitis.
En este capítulo se explican las etiquetas: <h1>, <h2>, <h3>, <h4>,
<h5>, <h6>, <header>, <nav>, <main>, <article>, <section>,
<aside> y <footer>.

© Alfaomega - Altaria 135

https://dogramcode.com/programacion
HTML & CSS

Encabezados de sección
Los encabezados de sección son útiles para organizar la información
mostrada en una página web. Existen seis niveles de encabezados, nume-
rados del 1 al 6, de mayor a menor importancia: el nivel 1 es la etiqueta
<h1> (heading one), la más prominente, y el nivel 6 es la etiqueta <h6>,
la menos prominente. Los encabezados se suelen mostrar con tipos de
letra más grandes y tamaños decrecientes (el tamaño del texto disminu-
ye según disminuye la importancia del encabezado), en negrita o más
enfatizados que el texto normal. Pero el nivel 4 aparece normalmente
con el tamaño de letra del texto normal y los niveles 5 y 6 aparecen con
un tamaño inferior al del texto normal. El tamaño de cada encabezado
lo selecciona el navegador, por lo que la apariencia final de una página
puede variar significativamente de uno a otro. De todos modos, con CSS
se puede definir completamente la presentación de los encabezados para
que se visualicen de la misma forma en todos los navegadores web.
Los encabezados son elementos en bloque, por lo que cuando se vi-
sualizan, los encabezados comienzan en una línea nueva y se suele dejar
un margen antes de ellos. Además, también provocan un salto de línea
al final del encabezado.
En el Listado 11 se muestra un ejemplo en el que se emplean los en-
cabezados desde <h1> hasta <h4>. En la Figura 71 se puede ver cómo se
visualiza este ejemplo en un navegador. Se puede observar que el tamaño
del texto del encabezado <h4> coincide con el tamaño del texto normal,
aunque el encabezado aparece representado en negrita.

136 © Alfaomega - Altaria

https://dogramcode.com/programacion
Curso práctico avanzado

<meta name=”description” content=”Prueba de las etiquetas de encabezados

de HTML” />
<title>Prueba de encabezados</title>
</head>
<body>
<h1>Encabezado nivel 1</h1>
<p>Este es el primer párrafo. Este es el primer párrafo. Este es el primer pá-
rrafo. Este es el primer párrafo.
Este es el primer párrafo. Este es el primer párrafo. Este es el primer párrafo.
Este es el primer párrafo.
</p>
<h2>Encabezado nivel 2</h2>
<p>Este es el segundo párrafo. Este es el segundo párrafo. Este es el segundo
párrafo. Este es el segundo párrafo.
Este es el segundo párrafo. Este es el segundo párrafo. Este es el segundo
párrafo. Este es el segundo párrafo.
</p>
<h3>Encabezado nivel 3</h3>
<p>Este es el tercer párrafo. Este es el tercer párrafo. Este es el tercer párrafo.
Este es el tercer párrafo.
Este es el tercer párrafo. Este es el tercer párrafo. Este es el tercer párrafo.
Este es el tercer párrafo.
</p>
<h4>Encabezado nivel 4</h4>
<p>Este es el cuarto párrafo. Este es el cuarto párrafo. Este es el cuarto párrafo.
Este es el cuarto párrafo.
Este es el cuarto párrafo. Este es el cuarto párrafo. Este es el cuarto párrafo.
Este es el cuarto párrafo.
</p>
</body>
</html>
Listado 11: Ejemplo de encabezados

© Alfaomega - Altaria 137

https://dogramcode.com/programacion
HTML & CSS

Figura 71: Ejemplo de encabezados

El correcto uso de los encabezados de sección ayu-

da a mejorar la accesibilidad de una página web.

Nuevos elementos de HTML5

En las versiones anteriores de HTML existían dos malas prácticas: la
spanmania y la divitis. La spanmania consiste en el abuso de la etiqueta
<span> para etiquetar ciertas partes del texto. Por ejemplo, es muy tí-
pico encontrar situaciones como la siguiente, en la que se emplea una
etiqueta <span> con una clase para aplicar CSS a una parte del texto:

<h1><span class=”heading”>El título de la página</span></h1>

En el ejemplo anterior la etiqueta <span> no es necesaria ya que se

podría haber aplicado la clase heading directamente a la etiqueta <h1>:

<h1 class=”heading”>El título de la página</h1>

Por otro lado, la divitis consiste en el abuso de la etiqueta <div>, un

contenedor genérico y sin signiﬁcado que se emplea como sustituto de los
elementos estructurales de HTML. Un caso típico de divitis es el empleo
de la etiqueta <div> junto con CSS para simular el comportamiento de
los encabezados <h1>, <h2>, <h3>, etc. Otro caso típico es la escritura
138 © Alfaomega - Altaria
Curso práctico avanzado

de varias etiquetas <div> anidadas, tal como se puede ver en el Listado

12, para aplicar un diseño a la página web.

<div class=”contenedor”>
<div id=”principal1”>
<div id=”principal2”>
<div id=”otro-div”>
<div id=”porque-soy-chulo”>
…
…
</div>
</div>
</div>
</div>
Listado 12: Ejemplo de divitis

Estas malas prácticas pueden seguir existiendo en HTML5, pero los

nuevos elementos de HTML5 pueden ayudar a su disminución o incluso
desaparición:
• <header>: cabecera de la página.
• <nav>: elemento de navegación principal de la página.
• <main>: contenido principal de la página.
• <article>: contenido de la página que puede ser individualizado
y utilizado en otra página web.
• <section>: sección del contenido.
• <aside>: contenido adicional que está relacionado con el contenido
principal, pero que no es esencial para su comprensión.
• <figure>: contenedor para una ﬁgura, que puede ser una imagen,
un fragmento de código, una cita, etc.
• <footer>: pie de página.

<article>, <aside>, <footer>, <figure>,

<header>, <main>, <nav> y <section> son
etiquetas nuevas de HTML5.

© Alfaomega - Altaria 139

HTML & CSS

Consejo
¿Ya no se puede utilizar la etiqueta <div>? Sí que se puede utilizar, pero
antes de emplearla hay que pensar si existe alguna etiqueta más especíﬁca
de HTML que sea más apropiada.

En la Figura 72 se muestra la estructura típica de una página web

escrita con las versiones anteriores de HTML. Esta página contiene los
siguientes elementos:
• Una cabecera, <div id=”header”>.
• Una barra o menú de navegación, <div id=”nav”>.
• La zona de contenido principal, <div id=”main”>, formada por
dos entradas o artículos, <div id=”entry”>.
• Una imagen en una de las entradas, <div id=”figure”>.
• Un panel con información adicional, como por ejemplo noticias,
<div id=”news”>.
• Y un pie de página, <div id=”footer”>.

Figura 72: Estructura de una página web con HTML4

140 © Alfaomega - Altaria

Curso práctico avanzado

Con HTML5, todas estas etiquetas <div> se sustituyen por nuevas

etiquetas especíﬁcas para deﬁnir regiones especiales que tienen las pá-
ginas web:
• La cabecera se etiqueta con <header>.
• La barra o menú de navegación con <nav>.
• La zona de contenido principal con <main>.
• Las entradas o artículos con <article>.
• Una imagen con <figure>.
• El panel con información adicional con <aside>.
• Y el pie de página con <footer>.
En la Figura 73 se muestra la estructura de la página web de la Figura
72 transformada a HTML5.

Figura 73: Estructura de una página web con HTML5

En algunas páginas web puede ser difícil decidir cuál es la etiqueta más
adecuada para una región de una página web. HTML5 Element Flowchart
de HTML5Doctor53 es un diagrama de ﬂujo que, mediante varias pregun-
tas, ayuda a decidir cuál es la etiqueta más adecuada según la función
que realiza la región que se quiere etiquetar dentro de una página web.
53 Disponible en http://html5doctor.com/downloads/h5d-sectioning-ﬂowchart.png

© Alfaomega - Altaria 141

HTML & CSS

En la Figura 74 se muestra este diagrama que comienza con la pregunta

“Is it a major navigation block?” (¿Es un bloque de navegación principal?).
Si la respuesta es “Yes” (Sí), entonces la etiqueta que se debe emplear
es <nav>; si la respuesta es “No” se debe pasar a la siguiente pregunta
“Does it make sense on its own?” (¿Tiene sentido por sí mismo?).

Figura 74: Diagrama de selección de los nuevos elementos semánticos de HTML5

A continuación vamos a ver paso a paso cómo se transforma una

página web de una versión antigua de HTML a HTML5. En el Listado
13 se muestra el código de una página web escrita con XHTML 1.0. Las
diferentes partes de la página se han etiquetado con el elemento <div>.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://

www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html lang=”es”>
<head>
<meta http-equiv=”Content-Type” content=”text/html;charset=ISO-8859-1” />
<title>Página web de prueba</title>
</head>
<body>
<div id=”header”>

142 © Alfaomega - Altaria

Curso práctico avanzado

<h1>Mi blog personal</h1>

</div>
<div id=”nav”>
<ul>
<li><a href=”#”>Principal</a></li>
<li><a href=”#”>Blog</a></li>
<li><a href=”#”>Fotos</a></li>
<li><a href=”#”>Contacto</a></li>
</ul>
</div>
<div id=”news”>
<p>El nuevo curso se inicia el próximo lunes 30 de julio</p>

<p>...</p>
</div>
<div id=”main”>
<div class=”entry”>
<p class=»post-date»>diciembre 26, 2011</p>
<h2>
<a href=”#” rel=”bookmark” title=”Enlace a esta entrada”>HTML5 es lo me-
jor</a>
</h2>
<div class=”ﬁgure”>
<p><img src=”foto.jpg” alt=”Tim Berners-Lee” /></p>
<p>Tim Berners-Lee en la inauguración del curso de verano</p>
</div>
<p>...</p>
</div>

</div>
<div id=”footer”>
<p><a href=”#”>Contacto</a></p>
<p><a href=”#”>Aviso legal</a></p>
<p><a href=”#”>Copyright</a></p>
</div>
</body>
</html>
Listado 13: Página web escrita con versión antigua de HTML

© Alfaomega - Altaria 143

HTML & CSS

En primer lugar vamos a ver el código HTML de la cabecera. Este es

el típico código de una cabecera de una página web, compuesto por un
contenedor <div> y un <h1>:

<div id=”header”>
<h1>Mi blog personal</h1>
</div>

En realidad, en muchos casos, únicamente es necesario el encabezado

<h1>. Pero si por alguna razón, es necesario utilizar un <div> para deﬁ-
nir algunas características de la presentación del encabezado, es mejor
utilizar la nueva etiqueta <header>:

<header>
<h1>Mi blog personal</h1>
</header>

Una barra o menú de navegación es un conjunto de enlaces. Por tanto,

se debe etiquetar como una lista, ordenada o no ordenada:

<div id=”nav”>
<ul>
<li><a href=”#”>Principal</a></li>
<li><a href=”#”>Blog</a></li>
<li><a href=”#”>Fotos</a></li>
<li><a href=”#”>Contacto</a></li>
</ul>
</div>

La etiqueta <div> que envuelve a la lista se debe cambiar por la eti-

queta <nav> en HTML5:

144 © Alfaomega - Altaria

Curso práctico avanzado

<nav>
<ul>
<li><a href=”#”>Principal</a></li>
<li><a href=”#”>Blog</a></li>
<li><a href=”#”>Fotos</a></li>
<li><a href=”#”>Contacto</a></li>
</ul>
</nav>

La etiqueta <nav> se puede emplear para deﬁnir la barra o menú de

navegación principal de un sitio web, deﬁnir un conjunto de enlaces a
páginas del propio sitio web o a páginas externas y también se puede
emplear para deﬁnir una tabla de contenido de la propia página web.
Un panel con información adicional, contiene información que com-
plementa a la información principal y que no es esencial para su com-
prensión. Por ejemplo, un panel de este tipo puede ser una región con
noticias o anuncios:

<div id=”news”>
<p>El nuevo curso se inicia el próximo lunes 30 de julio</p>

<p>...</p>
</div>

Este tipo de contenido se puede etiquetar con el elemento <aside>

de HTML5:

<aside>
<p>El nuevo curso se inicia el próximo lunes 30 de julio</p>

<p>...</p>
</aside>

En este ejemplo, la zona de contenido principal está formada por una

serie de entradas o artículos, como si fuera un blog:

© Alfaomega - Altaria 145

HTML & CSS

<div id=”main”>
<div class=”entry”>
<p class=»post-date»>diciembre 26, 2011</p>
<h2>
<a href=”#” rel=”bookmark” title=”Enlace a esta entrada”>HTML5 es lo me-
jor</a>
</h2>

<p>...</p>
</div>

</div>

La zona de contenido principal que agrupa todas las entradas se pue-

de etiquetar con <main>, y cada una de las entradas o artículos con la
etiqueta <article>:

<main>
<article>
<p class=»post-date»>diciembre 26, 2011</p>
<h2>
<a href=”#” rel=”bookmark” title=”Enlace a esta entrada”>HTML5 es lo me-
jor</a>
</h2>

<p>...</p>
</article>

</main>

La etiqueta <main> debe contener el contenido principal de la página

web. El contenido principal debe ser único para esta página y no debe
aparecer en otras partes del sitio web. Cualquier contenido que se repita
en múltiples páginas del sitio web, como el logo, el cuadro de búsqueda,
el pie de página con enlaces, etc., no se debe colocar dentro de la eti-
queta <main>. Sólo debe existir una etiqueta <main> en cada página, y

146 © Alfaomega - Altaria

Curso práctico avanzado

no se debe colocar dentro de otros elementos estructurales (<article>,

<aside>, <footer>, <header> y <nav>).
La etiqueta <article> representa un fragmento de contenido auto-
contenido que se pueda distribuir de forma independiente de la página
web, como por ejemplo, noticias, entradas en un blog o comentarios de
usuarios. La etiqueta <article> se puede anidar consigo misma.
También existe la etiqueta <section> que no se ha empleado en el
ejemplo que se está desarrollando. Esta etiqueta es similar a <article>,
ya que representa un fragmento de contenido relacionado. La principal
diferencia entre ambas etiquetas es que el contenido de <section> puede
no tener sentido cuando sea sacado fuera de la página.
Respecto a las imágenes, en las versiones anteriores de HTML no existía
un elemento para agrupar una imagen con su título:

<div class=”ﬁgure”>
<p><img src=”foto.jpg” alt=”Tim Berners-Lee” /></p>
<p>Tim Berners-Lee en la inauguración del curso de verano</p>
</div>

Sin embargo, en HTML5 esto está resuelto, ya que existe la etiqueta

<figure> y la etiqueta <figcaption> que permite deﬁnir el título de una
ﬁgura:

<figure>
<img src=”foto.jpg” alt=”Tim Berners-Lee” />
<figcaption>Tim Berners-Lee en la inauguración del curso de verano</fig-
caption>
</figure>

La etiqueta <figure> no sólo se emplea para etiquetar una imagen.

También puede etiquetar otras cosas, como un fragmento de código:

<figure>
<figcaption>Validación de una dirección de correo</figcaption>
<pre>
function validarEmail(valor ) { if (/^\w+([\.-]?\w+)*@\w+([\.-]?\
w+)*(\.\w{2,3})+$/.test(valor)) return (true); else { alert(“El usuario introdu-
cido es incorrecto”); return (false); } }
</pre>
</figure>
© Alfaomega - Altaria 147
HTML & CSS

También se puede emplear la etiqueta <figure> para etiquetar una cita:

<figure>
<blockquote>
<p>
El poder de la Web está en su universalidad. El acceso por cualquier persona,
independientemente de la discapacidad que presente es un aspecto esencial.
</p>
</blockquote>
<figcaption>Tim Berners-Lee, director del W3C</figcaption>
</figure>

Por último, el pie de página. En el pie de una página web suele apa-
recer el correo de contacto, el aviso legal, la información de copyright o
alguna información similar:

<div id=”footer”>
<p><a href=”#”>Contacto</a></p>
<p><a href=”#”>Aviso legal</a></p>
<p><a href=”#”>Copyright</a></p>
</div>

En HTML5 se debe emplear la etiqueta <footer> para etiquetar este

contenido:

<footer>
<p><a href=”#”>Contacto</a></p>
<p><a href=”#”>Aviso legal</a></p>
<p><a href=”#”>Copyright</a></p>
</footer>

En el Listado 14 se muestra el código de la página web una vez trans-

formado a HTML5. Transformar una página web de una versión antigua
de HTML a HTML5 es muy sencillo, simplemente hay que aprender a
utilizar la etiqueta adecuada para cada región de una página web.

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Página web de prueba</title>

148 © Alfaomega - Altaria

Curso práctico avanzado

</head>
<body>
<header>
<h1>Mi blog personal</h1>
</header>
<nav>
<ul>
<li><a href=”#”>Principal</a></li>
<li><a href=”#”>Blog</a></li>
<li><a href=”#”>Fotos</a></li>
<li><a href=”#”>Contacto</a></li>
</ul>
</nav>
<aside>
<p>El nuevo curso se inicia el próximo lunes 30 de julio</p>

<p>...</p>
</aside>
<main>
<article>
<p class=»post-date»>diciembre 26, 2011</p>
<h2>
<a href=”#” rel=”bookmark” title=”Enlace a esta entrada”>HTML5 es lo me-
jor</a>
</h2>
<figure>
<img src=”foto.jpg” alt=”Tim Berners-Lee” />
<figcaption>Tim Berners-Lee en la inauguración del curso de verano</fig-
caption>
</figure>
<p>...</p>
</article>

</main>
<footer>
<p><a href=”#”>Contacto</a></p>
<p><a href=”#”>Aviso legal</a></p>
<p><a href=”#”>Copyright</a></p>
</footer>
</body>
</html>
Listado 14: Página web escrita con HTML5

© Alfaomega - Altaria 149

HTML & CSS

Consejo
Localice el área principal de navegación en un lugar muy notable, de prefe-
rencia directamente adyacente al cuerpo principal de la página. Evite poner
cualquier navegación horizontal superior (primaria o de otro tipo) por encima de
los elementos gráϔicos tales como líneas horizontales o áreas de banner, los usuarios
suelen ignorar cualquier cosa dentro o por encima de una forma rectangular en
la parte superior de la pantalla. Llamamos a este comportamiento “la ceguera del
banner”, y lo hemos visto en numerosas pruebas.
Fuente: 113 Design Guidelines for Homepage Usability, Jakob Nielsen

http://www.nngroup.com/articles/113-design-guidelines-homepage-usability/

Más información
https://youtu.be/vRqQRrULSxI

Las etiquetas semánticas de

HTML5 que definen la estruc-
tura de una página web, cómo
transformar una página web de
las versiones antiguas de HTML
a la nueva versión HTML5.

150 © Alfaomega - Altaria

6
El texto

HTML contiene numerosas etiquetas que se pueden emplear para

definir la semántica del texto. Estas etiquetas no se deben emplear para
definir la presentación visual del texto, ya que esto se debe realizar me-
diante CSS.
Los objetivos de este capítulo son:
• Conocer las etiquetas de HTML que definen la semántica del texto
en línea.
• Conocer las etiquetas de HTML que definen la semántica del texto
a nivel de bloque.
En este capítulo se explican las etiquetas: <a>, <abbr>, <address>
<b>, <bdi>, <bdo>, <blockquote>, <br>, <cite>, <code>,
<data>, <del>, <dfn>, <em>, <i>, <ins>, <kbd>, <mark>,
<pre>, <q>, <rp>, <rt>, <ruby>, <s>, <samp>, <small>, <span>,
<strong>, <sub>, <sup>, <time>, <u>, <var> y <wbr>.

© Alfaomega - Altaria 151

HTML & CSS

Semántica del texto

Las siguientes etiquetas se pueden emplear en línea (inline), lo que sig-
nifica que no interrumpen el fluir del texto (no producen saltos de línea,
no introducen márgenes ni nada similar); por tanto, se pueden aplicar a
cualquier fragmento de un texto, como caracteres individuales, palabras
o incluso frases enteras:
• <a> (Anchor): define un enlace (vínculo) con el atributo href o el
destino de un enlace con el atributo name.
• <abbr> (Abbreviation): define una abreviatura. El atributo title se
emplea para proporcionar una descripción completa y opcional de
la abreviatura.
• <b> (Bold): define un fragmento de texto que se representa de una
forma visual distinta, pero sin transmitir un significado especial.
Normalmente se muestra en negrita.
• <bdi> (Bidirectional Isolation): aísla un fragmento de texto que se
puede formatear en una dirección distinta respecto el resto del
texto.
• <bdo> (Bidirectional Override): se emplea para anular la dirección
actual del texto.
• <br> (Line Break): produce un salto de línea en el texto.
• <cite> (Citation): representa una cita a un trabajo creativo. Debe
incluir el título o la URL de la referencia al trabajo.
• <code>: representa un fragmento de código de ordenador. Nor-
malmente se visualiza mediante un tipo de letra monoespaciado
(monotype) como Courier.
• <data>: relaciona un contenido con un dato destinado a ser pro-
cesado por el ordenador.
• <dfn> (Deϔinition Element): representa la definición de un término.
• <em> (Emphasis): enfatiza un texto asignándole una mayor im-
portancia. Los elementos <em> se pueden anidar, cada nivel de
anidamiento indica un mayor grado de énfasis. Normalmente se
muestra en cursiva.

152 © Alfaomega - Altaria

Curso práctico avanzado

• <i> (Italic): deﬁne un fragmento de texto que destaca respecto el

texto normal por alguna razón. Normalmente se muestra en cursiva.
• <kbd> (Keyboard Input): representa una entrada del usuario. Nor-
malmente se visualiza mediante un tipo de letra monoespaciado
(monotype) como Courier.
• <mark>: define un texto resaltado por su especial relevancia.
• <q> (Quote): representa una cita corta que no incluye saltos de
línea. Para las citas largas que puedan incluir saltos de línea se
debe utilizar <blockquote>, que es un elemento de bloque.
• <rp>: utilizado con la notación ruby54 para mostrar la pronuncia-
ción de caracteres en idiomas de Asia Oriental. Es una etiqueta
nueva de HTML5.
• <rt>: utilizado con la notación ruby para mostrar la pronuncia-
ción de caracteres en idiomas de Asia Oriental. Es una etiqueta
nueva de HTML5.
• <ruby>: utilizado con la notación ruby para mostrar la pronun-
ciación de caracteres en idiomas de Asia Oriental. Es una etiqueta
nueva de HTML5.
• <s> (Strikethrough): define un texto que ya no es importante, rele-
vante o importante. No se debe confundir con <del> que se em-
plea para indicar un texto que ha sido eliminado. Normalmente
se muestra tachado con una línea horizontal.
• <samp> (Sample): define un texto que es la salida de un programa
de ordenador. Normalmente se muestra con un tipo de letra mo-
noespaciado (monotype) como Courier o Luc i da Cons ol e.
• <small>: muestra el texto con un tamaño inferior al tamaño nor-
mal del texto. En HTML5 ha cambiado su significado y ahora se
emplea para representar comentarios secundarios o “letra peque-
ña”, como un aviso de copyright u otro texto legal, independien-
temente de su presentación visual.

54 La notación ruby se basa en el uso de los caracteres ruby que son pequeñas anotaciones que se colocan
encima o a la derecha cuando se escriben lenguajes ideogramáticos como el chino o el japonés. Estos ca-
racteres se emplean para mostrar la pronunciación de los caracteres poco conocidos. El uso de esta notación
está deﬁnida en la recomendación “Ruby Annotation” del W3C disponible en http://www.w3.org/TR/ruby/

© Alfaomega - Altaria 153

HTML & CSS

• <span>: contenedor genérico que no tiene asociado ninguna se-

mántica. Sólo se debe emplear cuando no existe otro elemento con
una semántica apropiada.
• <strong>: enfatiza un texto asignándole una mayor importancia.
Representa un nivel de importancia mayor que <em>. Normalmente
se muestra en negrita.
• <sub> (Subscript): define letras minúsculas más pequeñas y por
debajo de la línea base del texto.
• <sup> (Superscript): define letras minúsculas más pequeñas y por
encima de la línea de texto.
• <time>: representa un instante temporal, como una fecha o una
hora, con información opcional como la zona horaria. Es una eti-
queta nueva de HTML5.
• <u> (Underline): define un texto subrayado.
• <var> (Variable): define una variable en una expresión matemática
o en un programa de ordenador.
• <wbr> (Word Break Opportunity): define una posición en el texto en
la que el navegador puede introducir un salto de línea aunque las
reglas del navegador no lo definan como un punto posible para
un salto de línea.
En HTML5 el significado de la etiqueta <small> ha cambiado.
En HTML 4.01 estaba definido simplemente como “Renders text
in a small font” (Visualiza el texto en un tipo de letra pequeño).
En HTML5 está definido como “The small element represents
side comments such as small print. Small print typically features
disclaimers, caveats, legal restrictions, or copyrights. Small print
is also sometimes used for attribution, or for satisfying licensing
requirements”. (El elemento small representa comentarios se-
cundarios como la letra pequeña. La letra pequeña normalmen-
te se emplea para descargos de responsabilidad, advertencias,
restricciones legales o derechos de autor. La letra pequeña
también se utiliza a veces para la atribución, o para satisfacer
los requisitos de licencia).

154 © Alfaomega - Altaria

Curso práctico avanzado

Estas etiquetas suelen tener asignada una presentación visual que

depende del navegador web en que se visualizan, aunque en la mayoría
de los casos se muestran de la misma manera. Para lograr una misma
presentación en distintos navegadores se tiene que emplear CSS.

<mark>, <rp>, <rt>, <ruby>, <time>

y <wbr> son etiquetas nuevas de HTML5.

El ejemplo que se muestra a continuación en el Listado 15 incluye el

empleo de las etiquetas de los formatos más comunes. En este ejemplo
se han empleado los caracteres especiales < y > para representar
los símbolos menor que (<) y mayor que (>) en la deﬁnición de las eti-
quetas empleadas. En la Figura 75 vemos como se visualiza este código
en Google Chrome.

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=“utf-8“ />
<meta name=“generator“ content=“Bloc de notas“ />
<meta name=“author“ content=“Sergio Luján Mora“ />
<meta name=“keywords“ content=“XHTML, web“ />
<meta name=”description” content=”Prueba de las etiquetas de semántica
del texto” />
<title>Prueba de formatos</title>
</head>
<body>
<h1>Semántica del texto</h1>
<p>
<b> <b>Define un texto en negrita</b><br/>
<em> <em>Define un texto enfatizado</em><br/>
<i> <i>Define un texto en cursiva</i><br/>
<mark> <mark>Define un texto resaltado</mark><br />
<s> <s>Define un texto tachado</s><br/>
<small> <small>Define un texto pequeño</small><br/>
<strong> <strong>Define un texto reforzado</strong><br/>
<sub> <sub>Define un texto subíndice</sub><br/>
<sup> <sup>Define un texto superíndice</sup><br/>

© Alfaomega - Altaria 155

HTML & CSS

<u> <u>Deﬁne un texto subrayado</u><br/>

</p>
<h1>Salida “formato ordenador”</h1>
<p>
<code> <code>Define un fragmento de código</code><br/>
<kbd> <kbd>Define un texto tecleado</kbd><br/>
<samp> <samp>Define una muestra de fragmento de código</samp><br/>
<var> <var>Define una variable</var><br/>
</p>
<h1>Referencias, citas y definiciones</h1>
<p>
<abbr> Define una abreviatura: <abbr title=”World Wide Web Consor-
tium”>W3C</abbr><br/>
<cite> <cite>Define una referencia</cite><br/>
<q> <q>Define una cita</q><br/>
<dfn> <dfn>Define un término de una definición</dfn>
</p>
</body>
</html>
Listado 15: Ejemplo de las etiquetas semánticas

En la etiqueta <abbr> se emplea el atributo title para mostrar la

deﬁnición completa de la abreviatura o el acrónimo55 cuando se pasa el
cursor del ratón por encima.

Consejo
Explique las abreviaturas, siglas y acrónimos, e inmediatamente acompá-
ñelas por la abreviatura la primera vez. Esto es útil para todos los usuarios,
especialmente para las personas que utilicen un lector de pantalla. Por ejemplo,
la página web de la Administración Federal de Carreteras (Federal Highway
Administration) hace referencia varias veces a la “MUTCD”, pero en la página
principal no se explica que esta es la abreviatura de “Manual de Dispositivos de
Control de Tráϔico Uniforme” (Manual on Uniform Traﬃc Control Devices). Las
abreviaturas que se han convertido en palabras ampliamente utilizadas, como DVD,
son excepciones a esta norma. En especial, se debe evitar el uso de abreviaturas sin
explicación como enlaces de navegación.
Fuente: 113 Design Guidelines for Homepage Usability, Jakob Nielsen

http://www.nngroup.com/articles/113-design-guidelines-homepage-usability/
55 Un acrónimo es un tipo de sigla y, por tanto, una abreviatura, que se pronuncia como una palabra, mien-
tras que una abreviatura no se lee como una palabra.

156 © Alfaomega - Altaria

Curso práctico avanzado

Advertencia
¡Cuidado! Varias etiquetas de las versiones anteriores de HTML, como
<acronym>, <big>, <strike> y <tt> están obsoletas y no se deben em-
plear en HTML5.

Figura 75: Ejemplo de las etiquetas semánticas en Google Chrome

En la Figura 76 se muestra el ejemplo del Listado 15 visualizado en

Microsoft Internet Explorer y en la Figura 77 se muestra visualizado
en Mozilla Firefox. Se pueden apreciar ligeras diferencias entre los tres
navegadores. Por ejemplo, en Microsoft Internet Explorer se muestran
las comillas españolas «» cuando se deﬁne una cita con la etiqueta <q>,
mientras que en Google Chrome y en Mozilla Firefox se emplea “”. Por
otro lado, en Mozilla Firefox las abreviaturas deﬁnidas con <abbr> se
destacan con un subrayado punteado, pero en Google Chrome y Microsoft
Internet Explorer no se muestra ningún elemento visual diferenciador.

Figura 76: Ejemplo de las etiquetas semánticas en Microsoft Internet Explorer

© Alfaomega - Altaria 157

HTML & CSS

Figura 77: Ejemplo de las etiquetas semánticas en Mozilla Firefox

Lo importante de estas etiquetas no es la presentación visual que

tengan, sino el contenido semántico que definen. Estas etiquetas no se
tienen que emplear para lograr una presentación visual concreta, sino
para definir el significado de lo que etiquetan.
Estas etiquetas se pueden combinar entre sí para crear nuevos for-
matos. Por ejemplo, mediante las etiquetas <b> e <i> se puede escribir
un texto en negrita y cursiva simultáneamente. Únicamente hay que
llevar cuidado y no intercalar unas etiquetas con otras, ya que se pueden
obtener resultados no esperados: la última etiqueta de inicio que se ha
escrito debe ser la primera etiqueta que se cierre.

Advertencia
No utilices la etiqueta <font> de HTML para deﬁnir el formato del texto.
Tampoco utilices la etiqueta <center> de HTML para centrar el contenido.
Todas estas etiquetas están obsoletas y no se deben emplear en HTML5. En
su lugar se debe utilizar CSS.

Edición
En HTML existen dos etiquetas para deﬁnir un texto que ha sido edi-
tado (eliminado o insertado) en una página:
• <del> (Deleted): deﬁne un fragmento de texto que ha sido eliminado
de la página. Normalmente se representa tachado con una línea
horizontal, como este texto.

158 © Alfaomega - Altaria

Curso práctico avanzado

• <ins> (Inserted): deﬁne un fragmento de texto que ha sido añadido

a la página. Normalmente se representa subrayado, como este texto.
Estas dos etiquetas son muy útiles en los blogs o en los sitios web
con documentación en los que se necesite destacar los cambios que ha
sufrido un texto desde el primer momento que fue publicado.
En el siguiente ejemplo (Listado 16) se muestra el uso de estas dos
etiquetas. En la Figura 78 se muestra este ejemplo tal como se visualiza
en el navegador web Google Chrome: el texto eliminado aparece tachado
y el texto insertado aparece subrayado.

Figura 78: Ejemplo de texto editado

© Alfaomega - Altaria 159

HTML & CSS

Semántica de bloques de texto

Además de la etiqueta <p> que define un párrafo de texto, existen otras
etiquetas que definen un bloque de texto, lo que significa que producen
un salto de línea para separar su contenido de lo anterior y lo posterior.
Por tanto, estas etiquetas no se pueden emplear dentro de un párrafo.
Estas etiquetas son:
• <address>: define una dirección, relacionada con el autor o pro-
pietario de la página web o con un fragmento de la página.
• <blockquote>: define una cita larga que puede ocupar múltiples
líneas.
• <pre> (Preformatted Text): define un texto preformateado que posee
un formato específico. Esta etiqueta permite conservar los espacios
en blanco, las tabulaciones y los saltos de línea.
El siguiente código muestra el empleo de las etiquetas <address>,
<pre> y <blockquote>. En la Figura 79 vemos cómo se visualiza este
código en el navegador Google Chrome. En este ejemplo se puede obser-
var lo siguiente:
• El texto etiquetado con <address> aparece en cursiva.
• El texto etiquetado con <pre> conserva los espacios en blanco y
los saltos de línea.
• El texto etiquetado con <blockquote> presenta un margen iz-
quierdo mayor al resto de párrafos de la página.

<p>La dirección de la Universidad de Alicante es:</p>

<address>
Universidad de Alicante<br />
Carretera San Vicente del Raspeig s/n<br />
03690 San Vicente del Raspeig (Alicante)
</address>
<pre>
Esto es un texto preformateado, que conserva el formato:
- Uno
- Dos
-Y tres (el espacio en blanco que se ha dejado es voluntario)
El texto preformateado es útil cuando se tiene un fragmento de texto con
formato,
como por ejemplo un fragmento de código:
int max(int c[], int n)
{
int i, m = c[0];
for (i = 1; i < n; i++)
if (c[i] > m) m = c[i];
return m;
}
</pre>
<p>
Esto es una cita larga:
</p>
<blockquote>
<p>
<This specification defines the Second Edition of XHTML 1.0, a reformula-
tion of HTML 4 as an XML 1.0 application,
and three DTDs corresponding to the ones defined by HTML 4. The seman-
tics of the elements and their attributes
are defined in the W3C Recommendation for HTML 4. These semantics
provide the foundation for future extensibility
of XHTML. Compatibility with existing HTML user agents is possible by
following a small set of guidelines.
</p>
</blockquote>
</body>
</html>
Listado 17: Ejemplo de formatos de bloque

© Alfaomega - Altaria 161

HTML & CSS

Figura 79: Ejemplo de formatos de bloque

El propósito de la etiqueta <address> normalmente ha sido malinter-

pretado. La especificación oficial de HTML556 indica que <address> no
se debe emplear para representar una dirección cualquiera (como por
ejemplo una dirección postal), a menos que esa dirección sea realmente
la dirección de contacto de la página web. Para una dirección cualquiera,
la especificación oficial de HTML5 indica que se debe emplear la etiqueta
<p>. El elemento <address> se debe emplear para representar la infor-
mación de contacto del elemento <article> en el que se encuentre (por
ejemplo, la información de contacto del autor de una entrada en un blog)
o la información de contacto de toda la página web. Por ejemplo, en el
Listado 18 se muestra cómo se puede indicar una forma de contacto
para una página web.

<footer>
<address>
Para más información, contactar con
<a href=”mailto:[email protected]”>Pepito Perez</a>.
</address>
</footer>
Listado 18: Ejemplo de uso de la etiqueta <address>

56 Disponible en http://www.w3.org/TR/html5/

162 © Alfaomega - Altaria

Curso práctico avanzado

El signiﬁcado y uso de la etiqueta <address> ha

cambiado en HTML5.

La etiqueta <pre> es útil cuando se quiere insertar en una página web

un fragmento de texto que ya posee formato. Normalmente se visualiza
con un tipo de letra monoespaciada (monotype), como Courier, pero me-
diante CSS se puede visualizar con cualquier otro tipo de letra.
La etiqueta <blockquote> se emplea para deﬁnir una cita larga que
ocupa varias líneas de texto. Se suele emplear para marcar citas textua-
les o deﬁniciones de especial relevancia. Normalmente, los navegadores
aumentan el margen izquierdo de esta etiqueta para producir un sangra-
do hacia la derecha. Esta etiqueta posee el atributo opcional cite que
permite indicar la URL del origen de la cita.

Consejo
No utilices la etiqueta <blockquote> para lograr un margen a la izquierda.
En su lugar se debe utilizar CSS.

Líneas horizontales
Si se desea dibujar una línea horizontal como separador de bloques
de texto, se puede emplear la etiqueta <hr> (horizontal rule). El uso de
este elemento gráﬁco permite organizar el texto, separando las distintas
secciones que lo componen.
En versiones anteriores de HTML esta etiqueta poseía los atributos
align, noshade, size y width que permitían controlar la apariencia
de la línea horizontal dibujada. Sin embargo, el empleo de estos atribu-
tos está desaconsejado en HTML 4.01 y no existen en XHTML 1.0 Strict
o HTML5.

© Alfaomega - Altaria 163

7
Enlaces

En este capítulo se explica cómo crear los enlaces, un elemento básico

de las páginas web que permiten crear el hipertexto, texto que contiene
elementos a partir de los cuales se puede acceder a otros textos.
Los objetivos de este capítulo son:
• Conocer los diferentes tipos de enlaces que se pueden crear en
una página web.
• Aprender a crear enlaces para poder navegar entre páginas web.
En este capítulo se explican las etiquetas: <a>.

El hipertexto
Los enlaces, también llamados “hiperenlaces”, “vínculos”, “hipervíncu-
los” o “ligas” permiten relacionar distintas páginas entre sí y es la base del
hipertexto. Esta característica da la posibilidad de organizar la informa-
ción en distintos documentos enlazados, las páginas web, de forma que
el usuario pueda seleccionar la que más le interese en cada momento.

© Alfaomega - Altaria 165

HTML & CSS

Más información
Las páginas web son el ejemplo más conocido de hipertexto e hipermedia,
pero existen otros sistemas que también se basan en estos dos conceptos. Hi-
pertexto, multimedia e hipermedia son tres conceptos que no debes confundir:

• Hipertexto: conjunto estructurado de textos, gráﬁcos, etc., unidos

entre sí por enlaces y conexiones lógicas.
• Multimedia: que utiliza conjunta y simultáneamente diversos
medios, como imágenes, sonidos y texto, en la transmisión de
una información.
• Hipermedia: conjunto estructurado de diversos medios, como
textos, gráﬁcos, imágenes y sonidos, unidos entre sí por enlaces
y conexiones lógicas para la transmisión de una información.

Más información
http://youtu.be/APBWeiNmkco

Historia y deﬁniciones de hiper-

texto, multimedia e hipermedia.

Un hiperenlace puede hacer referencia a un punto determinado de

la página que lo contiene, a otra página web o a un punto determinado
de otra página web. En los dos últimos casos, la página destino puede
residir en el mismo servidor que la página que contiene el hiperenlace o
en otro distinto.
La etiqueta que utiliza HTML para deﬁnir un hiperenlace es <a> (del
inglés anchor). Todo aquello que aparezca en una página web entre las
etiquetas de inicio <a> y cierre </a> se considera un hiperenlace (será
el objeto sensible que al ser pulsado producirá el salto al destino del en-
lace). Normalmente suele utilizarse texto e imágenes como hiperenlaces.

166 © Alfaomega - Altaria

Curso práctico avanzado

Consejo
No utilice instrucciones genéricas, como “Haga clic aquí” como el contenido
de un enlace. En su lugar, utilice un texto signiϔicativo en el contenido del enlace
para indicar a los usuarios qué se obtendrá cuando se pulse. Esto ayuda a los
usuarios a diferenciar rápidamente entre los enlaces cuando se está escaneando
a través de ellos.
Fuente: 113 Design Guidelines for Homepage Usability, Jakob Nielsen

http://www.nngroup.com/articles/113-design-guidelines-homepage-usability/

Consejo
No utilice la palabra “Enlace” para indicar los enlaces de la página. Muestre
que algo es un enlace subrayándolo y coloreándolo en azul. Nunca nombre una
categoría como “Enlaces”, esto es similar a marcar una categoría de información
como “Palabras” en un medio impreso. Nombre la categoría en base a lo que el
enlace está apuntando.
Fuente: 113 Design Guidelines for Homepage Usability, Jakob Nielsen

http://www.nngroup.com/articles/113-design-guidelines-homepage-usability/

Por defecto, los enlaces se suelen presentar en el navegador con un

color azul y subrayado para que el usuario los pueda reconocer fácilmente.
Sin embargo, su presentación se puede cambiar con CSS.

Advertencia
¡Cuidado! Los atributos de la etiqueta <body> que permiten cambiar el color
de los enlaces (alink, link y vlink) están desaconsejados en HTML 4.01
y ya no existen desde XHTML 1.0 Strict. En su lugar se debe utilizar CSS.

Enlace a un punto del mismo documento

Los enlaces a un punto del mismo documento, llamados enlaces intra-
documentales o enlaces internos, constan de dos partes: una referencia
y un destino. El destino se identiﬁca por un nombre. La referencia hará
alusión al nombre del destino. En una página web se pueden incluir
varias referencias a un mismo destino, pero no se pueden crear varios
destinos con el mismo nombre.

© Alfaomega - Altaria 167

HTML & CSS

Advertencia
¡Error! No utilices el mismo nombre para varios destinos en una misma pá-
gina.

La forma de deﬁnir este enlace es:

• Referencia: <a href=”#nombre”>contenido del enlace</a>.
• Destino:
o HTML antiguo (obsoleto): <a name=”nombre”></a>.

o HTML5: <elemento id=”nombre”></a>.

Como puede observarse, en el caso de la referencia el nombre al que

hace alusión va precedido del símbolo almohadilla o numeral “#”57, mien-
tras que en el destino no se escribe este símbolo.

En HTML5 ya no se emplea el atributo name

para identiﬁcar el destino de un enlace3, en su
lugar emplea el atributo id. Por tanto, ya no se
escribe
<a name=”nombre”></a>
sino
<a id=”nombre”></a>

Consejo
Los enlaces intradocumentales son muy útiles en las páginas web muy gran-
des: situando una lista de enlaces intradocumentales al principio de la página
a modo de tabla de contenido evita que el usuario se tenga que desplazar por
todo el documento para llegar a un punto concreto.

57 La almohadilla o numeral no se debe confundir con el símbolo musical sostenido “♯”.

168 © Alfaomega - Altaria

Curso práctico avanzado

Por ejemplo, en la Figura 80 aparece un panel con enlaces intradocu-

mentales que existe en el artículo de la Wikipedia dedicado al término
hiperenlace58. En la Figura 81 se muestra la página web completa con el
panel con enlaces intradocumentales.

Figura 80: Panel con enlaces intradocumentales

Figura 81: Página de la Wikipedia con enlaces intradocumentales

En el siguiente ejemplo (Listado 19) existen varios enlaces a partes

de la misma página. En la Figura 82 vemos que aparecen tres enlaces
(HTML, HTTP y URL); al pulsar sobre el primero (HTML) saltamos al des-
tino que podemos ver en la Figura 83; al pulsar sobre el segundo (HTTP)
saltamos al destino que podemos ver en la Figura 84.

58 Disponible en http://es.wikipedia.org/wiki/Hiperenlace

© Alfaomega - Altaria 169

HTML & CSS

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Prueba de enlace a un punto del mismo documento</title>
</head>
<body>
<h1>GLOSARIO DE TÉRMINOS</h1>
<p>
< a h r e f = ” # H T M L” > H T M L < / a > < a h r e f = ” # H T T P ” > H T T P < / a > < a
href=”#URL”>URL</a>
</p>
<h2><a name=”HTML”></a>HTML</h2>
<p>
Lenguaje usado para escribir documentos para servidores World Wide Web.
Es una aplicación de la ISO Standard 8879:1986 (SGML, Standard Generalized
Markup Language).
</p>
<h2><a name=”HTTP”></a>HTTP</h2>
<p>
HTTP es un protocolo con la ligereza y velocidad necesaria para distribuir y
manejar sistemas
de información hipermedia. Es un protocolo genérico orientado al objeto, que
puede ser usado
para muchas tareas como servidor de nombres y sistemas distribuidos orien-
tados al objeto,
por extensión de los comandos, o métodos usados.
</p>
<h2><a name=”URL”></a>URL</h2>
<p>
Utilizado para especificar un objeto en Internet. Puede ser un fichero, grupo
de news, gopher, etc.
Algunos ejemplos: file://www.uco.es/iconos/ball_red.gif, ftp://www.uco.es/
www-docs/HTMLPrimer.txt,
http://www.cica.es/, telnet://lucano.uco.es, gopher://lucano.uco.es, news://alt.
cad.autocad
</p>
</body>
</html>
Listado 19: Página web con enlaces intradocumentales

170 © Alfaomega - Altaria

Curso práctico avanzado

Figura 82: Página web con enlaces intradocumentales

Figura 83: Página web con enlaces intradocumentales, destino del primer enlace

Figura 84: Página web con enlaces intradocumentales, destino del segundo enlace

Como podemos ver en la barra de direcciones del navegador en la

Figura 83 y la Figura 84, al pulsar sobre el enlace se añade a la URL el
nombre del destino precedido del símbolo almohadilla “#”.
Como se ha explicado antes, en HTML5 ya no se puede emplear el atri-
buto name para identiﬁcar el destino de un enlace. Debido a ello, cuando
se valida el código del Listado 19 se obtienen los errores de validación que
se muestran en la Figura 85. El mensaje de errores “The name attribute is
obsolete. Consider putting an id attribute on the nearest container instead” indica
claramente la causa del error.

© Alfaomega - Altaria 171

HTML & CSS

Figura 85: Resultado de validación con W3C Markup Validation Service

En el Listado 20 se muestra el código anterior corregido: se puede

emplear el atributo id con cualquier etiqueta para indicar el destino
del enlace, por lo que ya no es necesario el empleo de la etiqueta <a
name=””> para deﬁnir el destino de un enlace.

172 © Alfaomega - Altaria

Curso práctico avanzado

HTTP es un protocolo con la ligereza y velocidad necesaria para distribuir

y manejar sistemas de información hipermedia. Es un protocolo genérico
orientado al objeto, que puede ser usado para muchas tareas como servidor
de nombres y sistemas distribuidos orientados al objeto, por extensión de
los comandos, o métodos usados.
</p>
<h2 id=”URL”>URL</h2>
<p>
<Utilizado para especificar un objeto en Internet. Puede ser un fichero, grupo
de news, gopher, etc.
Algunos ejemplos: file://www.uco.es/iconos/ball_red.gif, ftp://www.uco.es/
www-docs/HTMLPrimer.txt,
http://www.cica.es/, telnet://lucano.uco.es, gopher://lucano.uco.es, news://
alt.cad.autocad
</p>
</body>
</html>
Listado 20: Página web con enlaces intradocumentales corregida

Enlace a otro documento

Para incluir un enlace en una página web a otro documento, sim-
plemente hay que incluir en la página web de origen una referencia al
documento destino. En el documento destino no hace falta indicar que
es destino de un enlace. La forma de deﬁnir este enlace es:
• Referencia: <a href=”pagina.html”>contenido del enlace</
a>.

Consejo
Ayuda a las personas a distinguir con rapidez los enlaces, dándoles nombres in-
formativos. En lugar de simplemente enlazar con “Más”, por ejemplo, diles a los
usuarios concretamente “qué más” van a conseguir.
Fuente: Prioritizing Web Usability. Jakob Nielsen, Hoa Loranger. New Riders, 2006

© Alfaomega - Altaria 173

HTML & CSS

Más información
Una URL es un identiﬁcador que designa un recurso en Internet. Una URL
es una cadena de caracteres que deﬁne una dirección única de un recurso de
información disponible en Internet.
Si quieres saber más sobre las URL, consulta el siguiente recurso:
- W3C – URL: http://www.w3.org/TR/url/

Más información
http://youtu.be/qqJf0EK0aFs

¿Qué son las URL? ¿Qué partes

componen una URL?

El documento de destino no tiene por qué ser otra página web, sino
que puede ser cualquier tipo de documento, como una imagen o un ar-
chivo PDF.

Consejo
Muy importante: cuando indiques el nombre del documento destino (el
nombre del fichero), hay que tener mucho cuidado con las mayúsculas y
minúsculas y el nombre del fichero indicado debe coincidir con el nombre
real del fichero.
En el siguiente ejemplo (Listado 21), la página web contiene cuatro
enlaces a páginas de la Wikipedia. En la Figura 86 podemos ver cómo
se visualiza esta página web en un navegador.

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Prueba de enlaces a otras páginas web</title>
</head>
<body>
174 © Alfaomega - Altaria
Curso práctico avanzado

<h1>Historia de la Web</h1>
<p>
El nacimiento de <a href=”http://es.wikipedia.org/wiki/HTML”>HTML</a>
va ligado al
de la <a href=”http://es.wikipedia.org/wiki/World_Wide_Web”>WWW</a>.
Los orígenes
de ambos se sitúan en 1990, en los trabajos que llevaba a cabo
<a href=”http://es.wikipedia.org/wiki/Tim_Berners-Lee”>Tim Berners-Lee</a>
y sus compañeros en el <a href=”http://es.wikipedia.org/wiki/CERN”>CERN</
a> en Suiza.
</p>
</body>
</html>
Listado 21: Ejemplo de enlaces a otras páginas web

Figura 86: Página web con enlaces a otras páginas web

Enlace a un punto de otro documento

Este tipo de enlace es una combinación de los dos anteriores. La forma
de deﬁnir este enlace es:
 Referencia: <a href=”pagina.html#nombre”>contenido del enlace</
a>.

 Destino (en pagina.html):

o HTML antiguo (obsoleto): <a name=”nombre”></a>.

o HTML5: <elemento id=”nombre”></a>.

Mediante el atributo name se asigna un nombre al punto de destino.

En el enlace de origen se indica el nombre de la página web de destino

© Alfaomega - Altaria 175

HTML & CSS

y el nombre del punto de destino precedido del símbolo almohadilla o

numeral “#”.
En el siguiente ejemplo tenemos una página con tres enlaces a la
misma página (la página web deﬁnida en el Listado 20), pero a distintos
destinos dentro de esa página. En la Figura 87 podemos ver cómo se
muestra este ejemplo en un navegador web. Al pulsar en alguno de los
enlaces el navegador mostrará los destinos que se visualizan en la Figura
83 y la Figura 84.

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Prueba de enlace a un punto de otro documento</title>
</head>
<body>
<h1>Tim Berners-Lee</h1>
<p>
Sir Timothy “Tim” John Berners-Lee, nació el 8 de junio de 1955 en Londres,
Reino Unido, se licenció en Física en 1976 en el Queen’s College de la Univer-
sidad de Oxford.
Es considerado el padre de la web.
</p>
<p>
Básicamente, Tim, ante la necesidad de distribuir e intercambiar información
acerca de sus investigaciones de una manera más efectiva, desarrolló las ideas
que forman parte de la web.
Tim y su grupo desarrollaron lo que por sus siglas en inglés se denominan:
el lenguaje <a href=”enlace-intra.html#HTML”>HTML</a>;
el protocolo <a href=”enlace-intra.html#HTTP”>HTTP</a>;
y el sistema de localización de objetos en la web <a href=”enlace-intra.
html#URL”>URL</a>.
Muchas de las ideas plasmadas por Berners-Lee podemos encontrarlas en el
proyecto Xanadu que propuso
Ted Nelson y el memex de Vannevar Bush.
</p>
</body>
</html>
Listado 22: Ejemplo de enlaces a puntos de otra página

176 © Alfaomega - Altaria

Curso práctico avanzado

Figura 87: Ejemplo de página web con enlaces a puntos de otra página

Más información
https://youtu.be/SoPkwzCptjc

Qué es el hipertexto, tipos de

enlaces (intradocumental, ex-
tradocumental), URL (Uniform
Resource Locator), consejos.

Apertura de un enlace en una ventana nueva

HTML5 permite que un enlace se abra en una ventana nueva del nave-
gador. Para ello se emplea el atributo target que puede tomar diferentes
valores que se resumen en la Tabla 9. Si se quiere que al activar un en-
lace el destino se abra siempre en una ventana nueva se debe emplear
target=”_blank”.

Valor Efecto
No especiﬁcado Ventana actual
Cadena vacía “” Ventana actual
_blank Ventana nueva
_self Ventana actual
Un nombre que no existe Ventana nueva
Un nombre que existe La ventana con ese nombre
Tabla 9: Comportamiento del atributo target en un enlace

© Alfaomega - Altaria 177

HTML & CSS

Si en el atributo target se emplea un nombre o identiﬁcador de

ventana que no existe, el navegador web abre una ventana nueva para
mostrar el destino del enlace. Si ese mismo nombre se emplea cuando se
abre un segundo enlace, el destino del enlace se muestra en la ventana
del navegador que ya existe con ese mismo nombre.

Consejo
Evite las ventanas emergentes. Las ventanas extra mantienen a los usuarios
lejos de su contenido, e incluso si dichas ventanas contienen información valiosa,
los usuarios tienden a cerrarlas inmediatamente como si fueran anuncios. En su
lugar, ponga la información crítica en un área importante de la página. El otro
inconveniente de las ventanas emergentes es que se van, una vez que el usuario se
deshace de ellas, se han ido, por lo que los usuarios a menudo no pueden encontrar
la información de nuevo, incluso si quieren. Es mejor diseñar la página web de
forma que dé una alta prioridad al contenido crítico.
Fuente: 113 Design Guidelines for Homepage Usability, Jakob Nielsen

http://www.nngroup.com/articles/113-design-guidelines-homepage-usability/

Consejo
Los diseñadores nos dicen a menudo que abren nuevas ventanas para no perder
a los visitantes de su sitio. Pero al ϔinal, eso es una causa perdida. Si la gente real-
mente quiere irse, lo hará.
Fuente: Prioritizing Web Usability. Jakob Nielsen, Hoa Loranger. New Riders, 2006

Evitar que un buscador siga un enlace

La posición de una página web en los resultados de un buscador de-
pende de diferentes factores. Uno de los factores que se tiene en cuenta
son los enlaces, tanto los enlaces entrantes (los enlaces desde otras
páginas que apuntan a nuestra página) como los enlaces salientes (los
enlaces desde nuestra página a otras páginas).
Los enlaces entrantes no se pueden controlar, pero los enlaces salien-
tes, sí. En algunas situaciones nos puede interesar que los motores de
búsqueda no tengan en cuenta los enlaces salientes. Para ello se puede
añadir el atributo rel=”nofollow” a los enlaces que no queremos que
sigan los motores de búsqueda.

178 © Alfaomega - Altaria

Curso práctico avanzado

Más información
En el artículo “Cómo usar rel=”nofollow” para enlaces especíﬁcos” de Goo-
gle se proporcionan algunos consejos para usar correctamente este atributo:
https://support.google.com/webmasters/answer/96569?hl=es

Envío de un correo electrónico

Mediante el protocolo mailto: se puede enviar un correo electrónico
cuando el usuario pulse sobre un enlace. Realmente no se envía un correo
electrónico automáticamente desde el navegador: se abre el programa de
correo electrónico que tenga conﬁgurado el usuario por defecto y se crea
un nuevo mensaje, pero no se envía hasta que el usuario no lo conﬁrme.
La sintaxis de este protocolo es:

mailto:dir1[,dir2,...][?opcion1=valor1[&opcion2=valor2&...]]

donde dir1, dir2, ... son direcciones de correo electrónico y op-

cion1, opcion2, ... es una lista opcional de opciones que se pasan al
programa de correo electrónico. Las principales opciones que se pueden
emplear son:
• cc (carbon copy): para indicar el envío de copias del mensaje a otros
destinatarios.
• bcc (blind carbon copy): para indicar el envío de copias del mensaje
a otros destinatarios ocultos.
• subject: el título del mensaje.
• body: el texto del mensaje.
Estas opciones se pueden combinar en un único enlace. Sólo hay que
tener en cuenta que se tienen que separar con el símbolo “&” y que los
valores de las opciones se tienen que escribir empleando la codificación
URL59 (URL encoding). En esta codificación, los caracteres especiales, como
por ejemplo “&”, “%” o “$”se codifican usando el símbolo “%” seguido de
dos dígitos que expresan, en hexadecimal, su código ASCII. Por ejemplo,
la cadena “&%$” se codificaría como “%26%25%24”.

59 También llamada código porciento, disponible en http://es.wikipedia.org/wiki/C%C3%B3digo_porciento

© Alfaomega - Altaria 179

HTML & CSS

Más información
En Internet existen muchas páginas web que realizan la codiﬁcación y deco-
diﬁcación URL. Por ejemplo:

• URL Encode Decode: http://www.url-encode-decode.com/

• URL Decoder/Encoder: http://meyerweb.com/eric/tools/dencoder/

El siguiente ejemplo contiene seis enlaces con distintas opciones que

envían un correo electrónico al ser pulsado cualquiera de ellos. En la
Figura 88 se puede observar cómo se visualiza esta página en un nave-
gador: en la barra de estado del navegador se puede apreciar la URL del
último enlace sobre el que se ha situado el cursor del ratón; en la Figura
89 se muestra la ventana de Microsoft Outlook, el lector de correo que
tiene conﬁgurado el usuario, que se abre automáticamente al pulsar
sobre el último enlace; en el campo “Para” podemos ver cómo aparece el
valor “[email protected]” que proviene del parámetro mailto:; en el campo “Asun-
to” aparece “Tema” del parámetro subject y en el cuerpo del mensaje
aparece “Cuerpo mensaje” del parámetro body.

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Prueba de envío de correo electrónico</title>
</head>
<body>
<p>
Para enviar un correo electrónico, pulse sobre un enlace:<br />
<a href=”mailto:[email protected]”>Simple</a><br />
<a href=”mailto:[email protected],[email protected]”>A dos personas</a><br />
<a href=”mailto:[email protected][email protected]”>Con copia</a><br />
<a href=”mailto:[email protected][email protected]”>Con copia oculta</a><br />
<a href=”mailto:[email protected]?subject=El%20tema%20del%20mensaje”>Con título</
a><br />
< a h r e f = ” m a i l t o : a @ b . c ? s u b j e c t = Te m a & a m p ; b o d y = C u e r p o % 2 0
mensaje”>Combinando varias opciones</a>
</p>
</body>
</html>
Listado 23: Ejemplo de envío de un correo electrónico mediante un enlace

180 © Alfaomega - Altaria

Curso práctico avanzado

Figura 88: Ejemplo de envío de un correo electrónico mediante un enlace

Figura 89: Mensaje visualizado en un lector de correo

Más información
Consulta las siguientes páginas para aprender más cosas sobre el protocolo
mailto:

• MSDN mailto Protocol: https://msdn.microsoft.com/en-us/library/

aa767737(v=vs.85).aspx
• MDN Email links: https://developer.mozilla.org/en-US/docs/Web/Guide/
HTML/Email_links

© Alfaomega - Altaria 181

8
Listas

En este capítulo se explica cómo emplear las listas para organizar la

información que contiene una página web.
Los objetivos de este capítulo son:
• Conocer los diferentes tipos de listas que existen en HTML.
• Aprender a crear listas para organizar la información en una pá-
gina web.
En este capítulo se explican las etiquetas: <dl>, <dt>, <dd>, <ol>
y <li>.

Tipos de listas
Las listas permiten organizar la información de una manera lógica, lo
que facilita su legibilidad. En versiones antiguas de HTML existían cinco
tipos de listas:
• Listas de deﬁnición.
• Listas ordenadas.
• Listas no ordenadas.
• Listas de directorio.
• Listas de menú.

© Alfaomega - Altaria 183

HTML & CSS

En HTML5 sólo existen tres tipos de listas que emplean las siguientes
etiquetas:
• Listas de deﬁnición: <dl>, <dt>, <dd>.
• Listas ordenadas: <ol>, <li>.
• Listas no ordenadas: <ul>, <li>.
• Las listas se pueden anidar entre sí, incluso si son de distinto
tipo. En el caso de anidar listas no numeradas, cada nivel de ani-
damiento tendrá un tipo de símbolo distinto. De todos modos, la
presentación visual de las listas se puede deﬁnir mediante CSS.

Listas de definición
Una lista de definición se emplea para mostrar términos con sus corres-
pondientes definiciones, como si se tratase de un glosario o diccionario.
Una lista de definición se crea con la etiqueta <dl> (deϔinition list), que
encierra todo el código de la lista. Contiene una serie de términos, que se
definen con la etiqueta <dt> (deϔinition term), y cada término posee una o
más definiciones, que se indica cada una con la etiqueta <dd> (deϔinition
description). Cuando se visualiza una lista de definición, las definiciones
de cada término aparecen en una línea nueva con una sangría hacia la
derecha.

Advertencia
¡Cuidado! En HTML5 con la sintaxis de HTML la etiqueta de cierre </dt>
es opcional, pero con el formato de XHTML es obligatoria.

El siguiente ejemplo (Listado 24) muestra cómo se usan estas etique-

tas. En la Figura 90 vemos el resultado que produce este ejemplo: la lista
está compuesta por cuatro términos (Hardware, Ordenador, Software y
Web); todos los términos poseen una deﬁnición, excepto Ordenador que
posee tres deﬁniciones.

184 © Alfaomega - Altaria

Curso práctico avanzado

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Prueba de lista de definición</title>
</head>
<body>
<h1>DEFINICIONES SEGÚN EL DICCIONARIO DEL RAE</h1>
<dl>
<dt>Hardware</dt>
<dd> m. Inform. Conjunto de los componentes que integran la parte material
de una computadora.</dd>
<dt>Ordenador</dt>
<dd>adj. Que ordena. U. t. c. s.</dd>
<dd>m. Jefe de una ordenación de pagos u oficina de cuenta y razón.</dd>
<dd>m. Esp. Máquina electrónica dotada de una memoria de gran capacidad
y de métodos de tratamiento de la información, capaz de resolver problemas
aritméticos y lógicos gracias a la utilización automática de programas regis-
trados en ella.</dd>
<dt>Software</dt>
<dd> m. Inform. Conjunto de programas, instrucciones y reglas informáticas
para ejecutar ciertas tareas en una computadora.</dd>
<dt>Web</dt>
<dd>f. Inform. Red informática.</dd>
</dl>
</body>
</html>
Listado 24: Ejemplo de lista de definición

Figura 90: Ejemplo de lista de deﬁnición

© Alfaomega - Altaria 185

HTML & CSS

Listas ordenadas
En las listas ordenadas o numeradas, cada elemento aparece nume-
rado. La etiqueta <ol> (ordered list) deﬁne una lista de este tipo. Cada
elemento se deﬁne con la etiqueta <li> (list item).

Advertencia
¡Cuidado! En HTML5 con la sintaxis de HTML la etiqueta de cierre </li>
es opcional, pero con el formato de XHTML es obligatoria.

Mediante CSS se puede cambiar el estilo de la numeración de la lista:

se puede emplear una numeración con letras mayúsculas, con letras
minúsculas, con números romanos, etc.
El siguiente ejemplo (Listado 25) muestra el uso de esta etiqueta.
Además, también se puede ver cómo se pueden anidar listas (incluir una
lista dentro de otra lista). En el código, las listas anidadas se han escrito
con una sangría hacia la derecha para facilitar la escritura y lectura del
código, aunque no inﬂuye para nada en la presentación de la página.
En la Figura 91 vemos cómo se muestra esta página, se puede ver que
hay varias listas anidadas hasta un tercer nivel.

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Prueba de listas ordenadas</title>
</head>
<body>
<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Lista anidada:
<ol>
<li>Elemento 1</li>
<li>Lista anidada:
<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>

186 © Alfaomega - Altaria

Curso práctico avanzado

</ol>
</li>
<li>Elemento 3</li>
</ol>
</li>
<li>Elemento 4</li>
</ol>
</body>
</html>
Listado 25: Ejemplo de listas ordenadas

Consejo
Aunque no inﬂuye en la visualización posterior, escribir en el código los
elementos de una lista con un margen a la izquierda facilita la edición y
depuración del código.

Figura 91: Ejemplo de listas ordenadas

Listas no ordenadas
En las listas no ordenadas, los elementos aparecen marcados mediante
unos pequeños símbolos gráficos, llamados en inglés bullet. La etiqueta
<ul> (unordered list) define una lista no ordenada. Cada elemento se define
con la etiqueta <li> (list item).

Advertencia
¡Cuidado! En HTML5 con la sintaxis de HTML la etiqueta de cierre </li>
es opcional, pero con el formato de XHTML es obligatoria.

© Alfaomega - Altaria 187

HTML & CSS

Mediante CSS se puede cambiar el estilo de presentación de la lista:

se puede indicar el elemento gráﬁco (un disco, un círculo, un cuadrado
o incluso una imagen cualquiera) que se desea emplear para marcar
los elementos de la lista.
El siguiente código (Listado 26) muestra cómo se emplean las etique-
tas <ul> y <li>. En la Figura 92 se puede ver que cuando se anidan
varias listas, el símbolo gráﬁco bullet cambia automáticamente, según
cual sea el nivel de anidamiento.

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Prueba de listas no ordenadas</title>
</head>
<body>
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Lista anidada:
<ul>
<li>Elemento 1</li>
<li>Lista anidada:
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
</li>
<li>Elemento 3</li>
</ul>
</li>
<li>Elemento 4</li>
</ul>
</body>
</html>
Listado 26: Ejemplo de listas no ordenadas

188 © Alfaomega - Altaria

Curso práctico avanzado

Consejo
Aunque no inﬂuye en la visualización posterior, escribir en el código los
elementos de una lista con un margen a la izquierda facilita la edición y
depuración del código.

Figura 92: Ejemplo de listas no ordenadas

Consejo
Evite las categorías de un solo elemento y las listas de viñetas con un solo
elemento. Es una exageración categorizar un único elemento, y las cosas que no
encajan en las categorías existentes puede signiϔicar una necesidad de reescribir
o reorganizar el contenido.
Fuente: 113 Design Guidelines for Homepage Usability, Jakob Nielsen

http://www.nngroup.com/articles/113-design-guidelines-homepage-usability/

Consejo
No utilice enlaces genéricos, como “Más ...” al ϔinal de una lista de elementos.
En su lugar, indique a los usuarios especíϔicamente lo que van a conseguir de más,
por ejemplo, “Más sobre nueva ϔicción” o “Archivo de reseñas de libros”. Los enlaces
genéricos como “Más…” son especialmente problemáticos cuando la página tiene
varios de ellos, ya que los usuarios no pueden diferenciar fácilmente entre ellos al
escanear la página.
Fuente: 113 Design Guidelines for Homepage Usability, Jakob Nielsen

http://www.nngroup.com/articles/113-design-guidelines-homepage-usability/

© Alfaomega - Altaria 189

HTML & CSS

Más información
https://youtu.be/V2ImdQdPqNE

Los diferentes tipos de listas en

HTML (ul, ol, dl), listas anida-
das.

190 © Alfaomega - Altaria

9
Tablas

En este capítulo se explica cómo emplear las tablas para organizar la

información que contiene una página web.
Los objetivos de este capítulo son:
• Aprender a crear tablas para presentar la información en una
página web.
En este capítulo se explican las etiquetas: <table>, <thead>, <tbo-
dy>, <tfoot>, <tr>, <th>, <td> y <caption>.

Tablas
Hasta que aparecieron las tablas en el lenguaje HTML, la única posi-
bilidad de tabular datos en una página web consistía en usar texto con
preformato con la etiqueta <pre> y colocar manualmente los espacios
en blanco hasta que las columnas estuviesen perfectamente alineadas.
Este proceso, además de ser realmente tedioso, no ofrecía resultados con
la vistosidad deseada.
Por ejemplo, el siguiente código (Listado 27) crea la tabla que se puede
ver en la Figura 93. La tabla se creado utilizando la técnica llamada box-
drawing carácter60, que consiste en emplear ciertos caracteres con formas
geométricas para dibujar rectángulos y cajas.

60 Disponible en http://en.wikipedia.org/wiki/Box-drawing_character

© Alfaomega - Altaria 191

HTML & CSS

</pre>
</body>
</html>
Listado 27: Tabla creada con caracteres

Figura 93: Tabla creada con caracteres

192 © Alfaomega - Altaria

Curso práctico avanzado

En HTML las tablas se construyen siguiendo una serie de reglas sen-

cillas:
• Las tablas se definen mediante la etiqueta principal <table>.
• Una tabla se compone de celdas de datos. Una celda se define
usando la etiqueta <td> (table data).
• Las celdas se agrupan en filas, que se definen con la etiqueta
<tr> (table row).
• Pueden existir celdas que se emplean como encabezados de filas
o de columnas; estas celdas se definen con la etiqueta <th> (table
heading). Este tipo de celdas suelen aparecer diferenciadas de las
otras, normalmente con el texto en negrita.
• Las celdas pueden contener cualquier elemento HTML: texto, imá-
genes, enlaces e incluso otras tablas anidadas.

Consejo
No utilices la etiqueta <th> porque muestra el contenido con un formato
distinto. Utiliza esta etiqueta sólo para crear encabezados. Si quieres cambiar
el formato de una celda, en su lugar se debe utilizar CSS.

Además, también existen las siguientes etiquetas, pero no se emplean

muy a menudo porque los navegadores normalmente las han interpre-
tado de distinta forma:
• <caption>: define el título de la tabla.
• <thead>: agrupa las filas que forman la cabecera de la tabla.
• <tbody>: agrupa las filas que forman el cuerpo de la tabla.
• <tfoot>: agrupa las filas que forman el pie de la tabla.

El título de una tabla ayuda a mejorar la ac-

cesibilidad de una tabla.

© Alfaomega - Altaria 193

HTML & CSS

El siguiente ejemplo (Listado 28) muestra una tabla con bordes for-
mada por 12 celdas. La tabla tiene tres celdas que son encabezados de
columna y dos celdas que son encabezados de ﬁla. Estas celdas se han
etiquetado con la etiqueta <th>. La tabla se ha dividido en tres ﬁlas y
cuatro columnas. En la Figura 94 vemos cómo se ve esta página en un
navegador web.

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Prueba de tabla sencilla</title>
</head>
<body>
<table border=”1”>
<tr>
<th></th>
<th>Cabecera 1</th>
<th>Cabecera 2</th>
<th>Cabecera 3</th>
</tr>
<tr>
<th>Cabecera ﬁla 1</th>
<td>Elemento (1, 1)</td>
<td>Elemento (1, 2)</td>
<td>Elemento (1, 3)</td>
</tr>
<tr>
<th>Cabecera ﬁla 2</th>
<td>Elemento (2, 1)</td>
<td>Elemento (2, 2)</td>
<td>Elemento (2, 3)</td>
</tr>
</table>
</body>
</html>
Listado 28: Ejemplo de tabla sencilla

194 © Alfaomega - Altaria

Curso práctico avanzado

Figura 94: Ejemplo de tabla sencilla

En versiones anteriores de HTML5 existían los siguientes atributos

de la etiqueta <table>:
• align=”left”|“center”|“right”: especifica el alineamiento de
la tabla respecto el contenido que la rodea.
• border=”n”: indica el grosor del borde exterior de la tabla y de las
líneas delimitadoras interiores. Un valor 0 produce que no tenga
borde (borde invisible).
• cellpadding=”n”: determina el espacio que debe existir entre los
bordes de cada celda y el contenido de la celda.
• cellspacing=”n”: especifica la cantidad de espacio que debe
existir entre celdas contiguas.
• summary=”texto”: define un resumen de la tabla.
• width=”n”|“n%”: ancho de la tabla. Se puede indicar en píxeles
o en tanto por ciento en relación a la anchura total disponible en
la página web.
Los atributos align, cellpadding, cellspacing y width ya no existen
en HTML5 y su función se realiza ahora con CSS. El atributo summary
ha sido eliminado y las tablas ya no poseen un resumen. Además, el
significado del atributo border ha cambiado en HTML5:
• Si border=”0”, el borde de la tabla no se tiene que dibujar y la
tabla se emplea para maquetar el contenido (layout table).
• Si border=”1”, el borde de la tabla se tiene que dibujar y la ta-
bla no se emplea para maquetar el contenido, sino para mostrar
datos tabulados.

© Alfaomega - Altaria 195

HTML & CSS

En la etiqueta <table> los atributos align,

cellpadding, cellspacing, summary
y width ya no existen en HTML5. Además,
el signiﬁcado y función del atributo border
ha cambiado en HTML5.

En versiones anteriores de HTML5 existían los siguientes atributos de

las etiquetas <tr>, <th> y <td>:
• align=”left”|“center”|“right”|“justify”: alineación ho-
rizontal del contenido de una ﬁla (<tr>) o de una celda (<th> y
<td>).
• valign=”baseline”|“bottom”|“middle”|“top”: alineación ver-
tical del contenido de una una ﬁla (<tr>) o de una celda (<th> y
<td>).
Estos atributos ya no existen en HTML5 y su función se realiza ahora
con CSS.

En las etiquetas <tr>, <th> y <td> los

atributos align y valign ya no existen
en HTML5.

Por ejemplo, en el Listado 29 se muestra el código HTML necesario

para crear la misma tabla del Listado 27, pero esta vez con la etiqueta
<table>. Para lograr una apariencia similar se han tenido que utilizar
los atributos align y cellpadding. En la Figura 95 se puede ver cómo
se visualiza esta tabla en un navegador. El formato de los bordes no
coincide con el que se puede ver en la Figura 93; para poder lograr el
mismo borde se debe emplear CSS.

196 © Alfaomega - Altaria

Curso práctico avanzado

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://

www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html lang=“es“ xmlns=“http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8” />
<meta name=”generator” content=”Bloc de notas” />
<meta name=”author” content=”Sergio Luján Mora” />
<meta name=”keywords” content=”XHTML, web” />
<meta name=”description” content=”Tabla creada como tabla” />
<title>Tabla creada como tabla</title>
</head>
<body>
<table border=”1” cellpadding=”5”>
<tr>
<td>Mes</td><td align=”right”>Agua</td><td align=”right”>Gas</td>
</tr>
<tr>
<td>enero</td><td align=”right”>1200</td><td align=”right”>5720</td>
</tr>
<tr>
<td>febrero</td><td align=”right”>2000</td><td align=”right”>4000</td>
</tr>
<tr>
<td>marzo</td><td align=”right”>1500</td><td align=”right”>6000</td>
</tr>
<tr>
<td>abril</td><td align=”right”>500</td><td align=”right”>3000</td>
</tr>
</table>
</body>
</html>
Listado 29: Tabla creada con la etiqueta table

© Alfaomega - Altaria 197

HTML & CSS

Figura 95: Tabla creada con la etiqueta table

Unión de ﬁlas y columnas

En ocasiones interesa que las tablas no tengan el mismo número de
filas y de columnas, sino que se unan las celdas de algunas filas y/o
columnas. Para ello se emplean los atributos colspan y rowspan en las
etiquetas <th> y <td>.
Si se quieren unir varias celdas de columnas contiguas, se indica me-
diante colspan=”n”, donde n es el número de columnas que ocupa una
determinada celda. Por ejemplo, si se quieren unir dos celdas contiguas
se debe emplear colspan=”2”.
Si se quieren unir varias celdas de filas contiguas, se indica mediante
rowspan=”n”, donde n es el número de filas que ocupa una determinada
celda.
El siguiente ejemplo (Listado 30) muestra una tabla con varias cel-
das unidas. En la Figura 96 vemos cómo se visualiza esta página en un
navegador web.

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Prueba de tabla con unión de varias celdas </title>
</head>
<body>
<table border=”1”>
<tr>
<td>Una celda normal</td>
<td>Una celda normal</td>
<td>Una celda normal</td>

198 © Alfaomega - Altaria

Curso práctico avanzado

</tr>
<tr>
<td colspan=”2”>Una celda fusionada con otra celda mediante COLSPAN</
td>
<td>Una celda normal</td>
</tr>
<tr>
<td colspan=”3”>Una celda fusionada con otras dos celdas mediante COLS-
PAN</td>
</tr>
<tr>
<td rowspan=”2”>Una celda fusionada con otra celda mediante ROWSPAN</
td>
<td>Una celda normal</td>
<td>Una celda normal</td>
</tr>
<tr>
<td>Una celda normal</td>
<td>Una celda normal</td>
</tr>
<tr>
<td rowspan=”3”>Una celda fusionada con otras dos celdas mediante
ROWSPAN</td>
<td>Una celda normal</td>
<td>Una celda normal</td>
</tr>
<tr>
<td>Una celda normal</td>
<td>Una celda normal</td>
</tr>
<tr>
<td>Una celda normal</td>
<td>Una celda normal</td>
</tr>
</table>
</body>
</html>
Listado 30: Ejemplo de tabla con unión de varias celdas

© Alfaomega - Altaria 199

HTML & CSS

Figura 96: Ejemplo de tabla con unión de varias celdas

Más información
https://youtu.be/ZFrW hxpP2U

Etiquetas básicas para crear ta-

blas en HTML (table, tr, th, td),
etiquetas avanzadas (thead, tbo-
dy, tfoot, caption, colgroup, col).

Tablas invisibles
Las tablas invisibles son aquellas que no poseen un borde visible.
Para eso se debe emplear el atributo border=”0”. Las tablas invisibles
son muy útiles para maquetar el contenido de una página web, es de-
cir, para distribuir los distintos elementos a lo largo de la página. Las
tablas invisibles permiten crear una rejilla invisible en una página web.
Por ejemplo, mediante tablas invisibles se puede mostrar el texto con
márgenes a la izquierda y a la derecha, mostrar texto a varias columnas,
dividir una imagen en diferentes ﬁcheros y que se muestre como si no
estuviese dividida la imagen, etc.
El uso de las tablas invisibles para maquetar una página es una téc-
nica que todavía pervive pero que es mejor no utilizar. En su lugar se
debe emplear CSS.
Por ejemplo, en la Figura 97 se muestra la página principal del sitio
web del Congreso de los Diputados de España. Esta página web está
organizada visualmente mediante varias tablas anidadas, tal como se
muestra en la Figura 98 donde se muestran los bordes de las tablas

200 © Alfaomega - Altaria

Curso práctico avanzado

y los bordes de las celdas de las tablas resaltados. Podemos observar

que en esta página se emplean las tablas para mostrar el contenido en
varias columnas y para alinear el contenido respecto a distintas líneas
imaginarias que dividen la página.

Figura 97: Página principal del Congreso de España

Figura 98: Página principal del Congreso de España con las tablas y celdas resaltadas

© Alfaomega - Altaria 201

HTML & CSS

Si se revisa el código fuente de esta página web (Figura 99), se des-

cubre que en la página existen 71 tablas. Este abuso de las tablas para
maquetar una página web plantea numerosos problemas, tanto paro los
usuarios como para los desarrolladores del sitio web, ya que el mante-
nimiento de una página así es más difícil.

Figura 99: Código fuente de la página principal del Congreso de España

202 © Alfaomega - Altaria

Curso práctico avanzado

Más información
En el sitio web “Porqué diseñar con tablas es estúpido: problemas deﬁnidos,
soluciones ofrecidas” disponible en https://www.hotdesign.com/seybold/
spanish/

Consejo
No utilices tablas invisibles para maquetar el contenido de una página web,
emplea CSS. No utilices tablas con distintos colores de fondo para crear marcos
y otros efectos visuales similares, emplea CSS.

La maquetación con tablas genera graves

problemas de accesibilidad.

Alineamiento del contenido de una tabla

El contenido de las celdas de una tabla se puede alinear de forma
horizontal o vertical. Antes de HTML5 se podía hacer con los atributos
align y valign en las etiquetas <tr>, <th> y <td>. En HTML5 esos
atributos ya no existen y en su lugar se debe emplear CSS. Por tanto,

© Alfaomega - Altaria 203

HTML & CSS

el interés del siguiente ejemplo radica en la posibilidad de que el lector

se encuentre alguna vez una página web con un código similar y sepa
interpretarlo correctamente.
El alineamiento horizontal del contenido de una celda se indica con
el atributo align, que puede tomar los valores left (a la izquierda),
center (centrado), right (a la derecha) y justify (justiﬁcado). El ali-
neamiento vertical se indica con el atributo valign, que puede tomar
los valores bottom (abajo del todo), baseline (en la línea base), middle
(en el medio) y top (arriba del todo).
Estos dos atributos se pueden aplicar tanto a la etiqueta <tr> como
a las etiquetas <th> y <td>. Si se aplica a ambas etiquetas a la vez, el
alineamiento que se emplea es el indicado por la etiqueta <th> o <td>.
El siguiente ejemplo (Listado 31) muestra una tabla con distinto ali-
neamiento horizontal y vertical. En la Figura 100 vemos cómo se mues-
tra esta página en un navegador web: si se asigna un valor al atributo
align y valign tanto en la ﬁla como en la celda, el valor que prevalece
es el asignado en la celda.

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Prueba de alineamiento de tabla</title>
</head>
<body>
<table border=”1”>
<tr align=”center”>
<td>Varias<br />líneas<br />de texto</td>
<td>Alineamiento CENTER</td>
<td>Alineamiento CENTER</td>
<td>Alineamiento CENTER</td>
</tr>
<tr align=”right” valign=”top”>
<td>Varias<br />líneas<br />de texto</td>
<td>Alineamiento RIGHT y TOP</td>
<td>Alineamiento RIGHT y TOP</td>
<td>Alineamiento RIGHT y TOP</td>
</tr>

204 © Alfaomega - Altaria

Curso práctico avanzado

<tr align=”left”>
<td>Varias<br />líneas<br />de texto</td>
<td align=”left”>Alineamiento LEFT</td>
<td align=”center”>Alineamiento CENTER</td>
<td align=”right”>Alineamiento RIGHT</td>
</tr>
<tr>
<td>Varias<br />líneas<br />de texto</td>
<td valign=”top”>Alineamiento TOP</td>
<td valign=”middle”>Alineamiento MIDDLE</td>
<td valign=”bottom”>Alineamiento BOTTOM</td>
</tr>
<tr valign=”middle”>
<td>Varias<br />líneas<br />de texto</td>
<td valign=”top”>Alineamiento TOP</td>
<td valign=”middle”>Alineamiento MIDDLE</td>
<td valign=”bottom”>Alineamiento BOTTOM</td>
</tr>
</table>
</body>
</html>
Listado 31: Ejemplo de alineamiento del contenido de una tabla

Figura 100: Ejemplo de alineamiento del contenido de una tabla

Como se ha explicado antes, los atributos align y valign ya no existen

en HTML5. Si se valida el código de la página del Listado 31, el validador
oﬁcial del W3C detecta 13 errores, tal como se puede ver en la Figura 101.

© Alfaomega - Altaria 205

HTML & CSS

En la Figura 102 se pueden ver los mensajes de error que genera el

validador del W3C:
• “The border attribute on the table element is presentational
markup. Consider using CSS instead. For example: table, td, th
{ border: 1px solid gray }”.
• “The align attribute on the tr element is obsolete. Use CSS instead”.
• “The valign attribute on the tr element is obsolete. Use CSS ins-
tead”.
• “The align attribute on the td element is obsolete. Use CSS ins-
tead”.
• “The valign attribute on the td element is obsolete. Use CSS ins-
tead”.

Figura 101: Validación de una página web con atributos obsoletos

206 © Alfaomega - Altaria

Curso práctico avanzado

Figura 102: Mensajes de error de validación de una página web con atributos obsoletos

Distancia entre celdas

La distancia entre el borde de una celda y su contenido, y la distancia
entre los bordes de dos celdas contiguas se puede configurar median-
te dos atributos de HTML. Desgraciadamente, no se puede configurar
únicamente para un conjunto de celdas de una tabla, sino que afecta a
todas las celdas de una tabla.
El atributo cellpadding=”n” de la etiqueta <table> modifica la dis-
tancia, en píxeles, existente entre el borde de una celda y su contenido.
El valor por defecto es 1.
El atributo cellspacing=”n”, también de la etiqueta <table> mo-
difica la distancia, en píxeles, existente entre los bordes de dos celdas
contiguas. El valor por defecto es 2.
El siguiente ejemplo (Listado 32) muestra cuatro tablas con distintas
distancias entre el borde y su contenido y entre celdas contiguas. En la
Figura 103 vemos cómo se visualiza esta página en un navegador web.

© Alfaomega - Altaria 207

HTML & CSS

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Prueba de distancia entre celdas</title>
</head>
<body>
<table border=”1” cellpadding=”5”>
<tr>
<td>Alineamiento CENTER</td>
<td>Alineamiento CENTER</td>
<td>Alineamiento CENTER</td>
</tr>
<tr>
<td>Alineamiento RIGHT y TOP</td>
<td>Alineamiento RIGHT y TOP</td>
<td>Alineamiento RIGHT y TOP</td>
</tr>
</table>
<hr />
<table border=”1” cellpadding=”15”>
<tr>
<td>Alineamiento CENTER</td>
<td>Alineamiento CENTER</td>
<td>Alineamiento CENTER</td>
</tr>
<tr>
<td>Alineamiento RIGHT y TOP</td>
<td>Alineamiento RIGHT y TOP</td>
<td>Alineamiento RIGHT y TOP</td>
</tr>
</table>
<hr />
<table border=”1” cellspacing=”5”>
<tr>
<td>Alineamiento CENTER</td>
<td>Alineamiento CENTER</td>
<td>Alineamiento CENTER</td>
</tr>
<tr>
<td>Alineamiento RIGHT y TOP</td>

208 © Alfaomega - Altaria

Curso práctico avanzado

<td>Alineamiento RIGHT y TOP</td>

<td>Alineamiento RIGHT y TOP</td>
</tr>
</table>
<hr />
<table border=”1” cellspacing=”15”>
<tr>
<td>Alineamiento CENTER</td>
<td>Alineamiento CENTER</td>
<td>Alineamiento CENTER</td>
</tr>
<tr>
<td>Alineamiento RIGHT y TOP</td>
<td>Alineamiento RIGHT y TOP</td>
<td>Alineamiento RIGHT y TOP</td>
</tr>
</table>
</body>
</html>
Listado 32: Ejemplo de distintas distancias entre celdas de una tabla

Figura 103: Ejemplo de distintas distancias entre celdas de una tabla

© Alfaomega - Altaria 209

10
Imágenes

En este capítulo se explica cómo incluir imágenes en las páginas web.

Para ello, en primer lugar se explican las principales características de
los tres formatos gráﬁcos más empleados en las páginas web: GIF, JPEG
y PNG.
También se explican los atributos alt y longdesc que ayudan a me-
jorar la accesibilidad de las imágenes. Por último, también se explican
las novedades que incorpora HTML5.
Los objetivos de este capítulo son:
• Conocer los distintos formatos de imágenes que se pueden emplear
en una página web.
• Aprender a insertar imágenes en una página web.
• Conocer el formato gráﬁco SVG.
En este capítulo se explican las etiquetas: <canvas>, <figcaption>,
<figure>, <img> y <svg>.

© Alfaomega - Altaria 211

HTML & CSS

Formatos de imagen
La primera versión del lenguaje HTML61 no contemplaba la posibilidad
de incluir imágenes en una página web. Posteriormente se añadió la
posibilidad de incluir imágenes, pero al principio su empleo fue escaso
debido a varias razones. Por un lado, no todos los ordenadores tenían la
suficiente potencia como para manejar páginas web con varias imágenes
a la vez; por otro lado, el ancho de banda de las comunicaciones por
Internet era mucho menor que el actual; por último, todavía no se sabía
muy bien cómo utilizar las imágenes en una página web. Sin embargo,
hoy es todo lo contrario y es muy difícil encontrar páginas web que no
empleen una gran cantidad de imágenes.
Los navegadores web admiten diferentes formatos de imagen, pero
sólo tres formatos son los más utilizados: GIF, JPEG y PNG. Las carac-
terísticas básicas de estos tres formatos se han resumido en la Tabla
10: colores indica el máximo número de colores que permite el formato
gráfico; transparencia indica si soporta transparencias (zonas de una
imagen que muestran lo que está situado detrás de ella); animación indica
si soporta animaciones, es decir, movimiento en una imagen; compresión
indica si emplea un formato de compresión sin pérdidas o con pérdidas;
dibujo indica si es un formato gráfico adecuado para almacenar imáge-
nes sencillas, como dibujos, logotipos, textos, etc.; fotografía indica si
es un formato gráfico adecuado para almacenar fotografías; por último,
gamma indica si soporta el empleo de la corrección gamma cuando se
visualiza la imagen.

Característica GIF JPEG PNG

Colores 256 (8 bits) 16.777.216 (24 bits) 48 bits
Transparencia Sí No Sí (canal alfa)
Animación Sí No No
Compresión Sin pérdidas Con pérdidas Sin pérdidas
Dibujo Sí No Sí
Fotografía No Sí Sí
Gamma No No Sí
Tabla 10: Características básicas de los formatos GIF, JPEG y PNG

61 La primera versión de HTML estaba compuesta por 18 etiquetas: http://www.w3.org/History/19921103-

hypertext/hypertext/WWW/MarkUp/Tags.html

212 © Alfaomega - Altaria

Curso práctico avanzado

El formato GIF
Durante los primeros años de la Web este formato gráfico fue uno de
los más populares en Internet. Emplea un esquema de compresión sin
pérdidas, lo que significa que el proceso de compresión y descompresión
no modifica los datos iniciales de la imagen, por lo que la calidad de las
imágenes no se ve afectada al recuperar las imágenes una vez comprimi-
das. La compresión ayuda a reducir el tamaño del fichero que almacena
una imagen. Este formato utiliza una paleta de color limitada a 8 bits,
lo que permite un máximo de 256 colores a elegir entre 16.777.216 (24
bits). La paleta de colores puede ser de distintos tamaños: 2, 4, 8, 16,
32, 64, 128 ó 256 colores.
El formato GIF permite incluir en un mismo fichero múltiples imáge-
nes, lo que permite crear animaciones. Debido a esto, el formato GIF se
hizo muy popular en los primeros años de la Web porque la inclusión de
vídeos en las páginas web no era posible y por tanto el formato GIF era la
única opción para incluir animaciones en una página web. Sin embargo,
la aparición de las plataformas de alojamiento de vídeos en línea, como
YouTube en el año 2005, hizo que la popularidad del formato GIF dismi-
nuyera considerablemente hasta casi desaparecer. No obstante, en los
últimos años las redes sociales han causado una nueva edad de oro del
formato GIF. Las redes sociales que permiten la inclusión de imágenes
han hecho que el formato GIF con animaciones vuelva a ser muy utilizado
por su sencillez de edición y el poco peso frente a los vídeos.

Consejo
No utilice una animación con el único propósito de llamar la atención sobre
un elemento de la página principal. Una animación rara vez tiene sentido en
la página principal, ya que distrae la atención de otros elementos. Una animación
capta la atención del usuario y debe ser mostrada por sí misma, mientras que
las páginas principales tienen múltiples elementos que requieren la atención del
usuario. Por ejemplo, una animación podría ser muy útil para mostrar cómo hacer
un procedimiento que se entiende mejor si se ve en vez de leerlo, como cambiar los
pañales de un bebé, pero no es apropiado para mostrarlo en una página principal,
en la que llamaría la atención frente a todos los demás elementos en la página.
Fuente: 113 Design Guidelines for Homepage Usability, Jakob Nielsen

http://www.nngroup.com/articles/113-design-guidelines-homepage-usability/

© Alfaomega - Altaria 213

HTML & CSS

Por otro lado, la forma de descarga en el navegador se puede deﬁnir

como normal o entrelazada. En el modo entrelazado, las líneas que forman
la imagen no se almacenan secuencialmente como en el modo normal,
sino entrelazadas por grupos, como por ejemplo, grupo 1 (líneas 1, 5, 9…),
grupo 2 (líneas 2, 6, 10…) y así sucesivamente. De este modo, conforme
se descarga la imagen se van visualizando las líneas entrelazadas, lo que
proporciona una idea global de la imagen final antes de que se descargue
completamente. Por último, existen distintas versiones de este formato
gráfico, siendo las más empleadas GIF87A y GIF89A.
El esquema de compresión empleado en este formato es LZW. Este
sistema funciona mucho mejor en imágenes con zonas de color homogé-
neo, ya que es menos eficaz en imágenes complejas con muchos colores
y texturas complejas. Cuantos menos colores tenga una imagen, mejor
funcionará el esquema de compresión empleado por GIF. Por ejemplo, en
la Figura 104 se muestra la misma imagen en blanco/negro y en color:
la primera ocupa 1.276 bytes y la segunda 1.478 bytes. La imagen en
blanco y negro ocupa menos bytes que la imagen en color.

(a) (b)
Figura 104: La misma imagen GIF en blanco/negro y en color

El formato GIF también permite deﬁnir un color como transparente.

De esta forma, las zonas de la imagen que posean ese color serán trans-
parentes y se podrá ver lo que esté detrás de la imagen. Normalmente se
asigna la transparencia al color de fondo de la imagen. La propiedad de
transparencia no es selectiva, lo que signiﬁca que si se asigna la trans-
parencia a un color, todos los puntos de la imagen que contengan ese
color se convertirán en transparentes, lo que puede ocasionar problemas
en algunos casos.

214 © Alfaomega - Altaria

Curso práctico avanzado

Otros problemas que pueden surgir con las transparencias ocurren

cuando en la imagen se ha aplicado un suavizado (antialiasing). El sua-
vizado modiﬁca los bordes insertando colores intermedios en los límites
de las formas como pueden ser las letras o las líneas. Esta técnica tie-
ne como ﬁn mejorar la apariencia de las imágenes, ya que suaviza los
dientes de sierra. Cuando se intenta usar una imagen con suavizado y
fondo transparente sobre un color de fondo distinto al empleado durante
el suavizado ocurren problemas, ya que el suavizado aparece como un
halo alrededor de los límites de las formas de la imagen. Por ejemplo, en
la Figura 105 aparece una imagen con suavizado sobre un fondo blanco.
Cuando la misma imagen se coloca sobre un fondo de otro color, apare-
cen distintas zonas que corresponden al suavizado, tal como se puede
apreciar en la Figura 106 en la que la misma imagen se ha colocado
sobre un fondo amarillo.

Figura 105: GIF transparente para fondo blanco sobre fondo blanco

Figura 106: GIF transparente para fondo blanco sobre fondo no blanco

Muchos de los anuncios que se insertan en las páginas web, llamados

pancartas o banderolas (banners) suelen emplear el formato GIF, ya que
permite realizar animaciones. The Interactive Advertising Bureau62 (IAB),
una organización que agrupa a anunciantes en Internet, posee una serie
de guías sobre el tamaño de los anuncios (banners). En la Figura 107 se
pueden ver los nombres y los tamaños de los anuncios que han sido es-
tandarizados63 por IAB. Cuando se contrata una campaña de anuncios
en Internet, se emplean estos tamaños para deﬁnir el coste del anuncio.

62 Disponible en http://www.iab.net/
63 Disponible en http://www.iab.net/guidelines/508676/508767/displayguidelines

© Alfaomega - Altaria 215

HTML & CSS

Figura 107: Distintos tamaños de anuncios (banners)

El formato JPEG
El formato gráfico JPEG es uno de los más empleados en Internet de-
bido a que permite comprimir enormemente las imágenes fotográficas.
A diferencia de GIF, las imágenes JPEG son imágenes a todo color (24
bits por punto de la imagen). Además, si se emplea JPEG progresivo (me-
canismo similar al entrelazado en el formato GIF) se pueden descargar
progresivamente las imágenes, lo que facilita una previsualización rápida
de las imágenes sin tener que descargarlas completamente.
El esquema de compresión de JPEG es una sofisticada técnica matemá-
tica denominada transformación discreta de cosenos. Mediante esta téc-
nica se pueden elegir distintos grados de compresión y de calidad: cuanto
más se comprime una imagen, menor es su calidad y viceversa. JPEG
emplea compresión con pérdidas: los datos no necesarios se descartan a
medida que se comprime cada vez más la imagen. Por ello, si se trabaja
con JPEG, es recomendable conservar una copia de la imagen original
en un formato que no produzca pérdidas, ya que una vez comprimida la

216 © Alfaomega - Altaria

Curso práctico avanzado

imagen con JPEG es imposible recuperar los datos perdidos y, por tanto,
la calidad original de la imagen. Si se selecciona correctamente el grado de
compresión, la reducción del tamaño del ﬁchero que contiene la imagen
compensa con creces la inapreciable pérdida de calidad a simple vista.
Por ejemplo, en la Figura 108 se muestra el detalle de una fotografía
con tres niveles de calidad/compresión: 100%, 50% y 25% de calidad.
A simple vista no se aprecia mucha diferencia entre los tres niveles. Sin
embargo, en la Figura 109 se muestra una ampliación de la fotografía
con los tres niveles de calidad. Si se comparan el detalle con 100% de
calidad y el detalle con 25%, en este último se pueden apreciar diferen-
cias respecto a la primera imagen, aunque la calidad aún sigue siendo
aceptable. Las principales diferencias se pueden apreciar en lo que se
conoce como zonas de alta frecuencia: las zonas donde se produce un
cambio brusco de color o de luminosidad, como son los contornos de las
ﬁguras, son las que presentan mayores errores. Los errores que aparecen
al aumentar el nivel de compresión de una imagen en formato JPEG se
denominan “artefactos”.

Figura 108: Imagen en formato JPG con tres niveles de calidad

© Alfaomega - Altaria 217

HTML & CSS

Figura 109: Detalle de una imagen en formato JPG con tres niveles de calidad

A medida que se aumenta el nivel de compresión, aparecen varios

problemas en las imágenes JPEG: el ruido, la distorsión y la textura
cuadriculada. Por ejemplo, en la Figura 110 se puede ver a la izquierda
una imagen en su formato original (sin pérdidas) y a la derecha la pala-
bra “en” ampliada para apreciar la calidad de la imagen. Esta imagen de
100x300 ocupa 31.078 bytes en formato BMP, un formato gráﬁco que
conserva la calidad original de la imagen.
En la Figura 111 y Figura 112 se muestra la misma imagen compri-
mida en JPEG con dos niveles de compresión distintos: en la Figura 111
el nivel de compresión es 15 sobre 100 (10.281 bytes) y en la Figura 112
el nivel de compresión es 75 sobre 100 (3.643 bytes). En las imágenes
de la izquierda prácticamente no se aprecian diferencias, pero cuando
se amplía la imagen se puede observar la aparición de ruido, los bordes
borrosos y la textura cuadriculada.

218 © Alfaomega - Altaria

Curso práctico avanzado

Figura 110: Imagen en formato BMP y detalle

Figura 111: Imagen en formato JPG (alta calidad) y detalle

Figura 112: Imagen en formato JPG (baja calidad) y detalle

JPEG es un formato apto para imágenes fotográﬁcas o ilustraciones

con apariencia de fotografía: imágenes complejas, con suaves transicio-
nes de tono y color y sin bordes muy marcados. Para las imágenes con
formas geométricas, bordes marcados y transiciones de color acentua-
das, como pueden ser los esquemas, logotipos o dibujos, es mejor no
emplear este formato gráﬁco.

Consejo
Utiliza el formato JPEG como un formato ﬁnal. No lo utilices como formato
original de una imagen y no realices cambios directamente sobre una imagen
JPEG: cada vez que se guarda una imagen JPEG se comprime y se introducen
nuevos errores en su almacenamiento.

© Alfaomega - Altaria 219

HTML & CSS

El formato PNG
El formato gráfico PNG fue desarrollado por el W3C como una alter-
nativa de carácter público al formato GIF tradicional. El formato GIF lo
había desarrollado la compañía Compuserve a partir de un esquema
de compresión privado (LZW) que era propiedad de la compañía Unisys
Corporation. Hasta el año 2003, cuando la patente expiró, todo progra-
mador que emplease el formato GIF debía pagar los correspondientes
derechos de propiedad.
• El formato PNG se creó específicamente para Internet y otras redes
de ordenadores. Sus características más importantes son:
• Soporte de imágenes basadas en paleta de colores (1, 2, 4, 8-bit),
como GIF.
• Soporte de escala de grises (1, 2, 4, 8, 16-bit).
• Soporte de color real (24, 48-bit), como JPEG.
• Transparencia binaria, como GIF.
• Canal alfa (256 o 65.536 niveles de transparencia parcial).
• Corrección gamma.
• Algoritmo de compresión sin pérdidas no patentado (público).
• Entrelazado 2D (interlacing).
El formato PNG no permite animaciones como GIF, pero se han desa-
rrollado los formatos APNG y MNG basados en PNG que sí que permiten
crear animaciones al combinar varias imágenes en un mismo fichero.
Sin embargo, ninguno de estos dos formatos se ha convertido en un es-
tándar y su soporte por los navegadores actuales es bastante desigual.
El esquema de compresión de PNG es muy superior al de GIF. Por
ejemplo, las dos imágenes de la Figura 104 ocupan con el formato PNG
248 bytes y 279 bytes respectivamente, mientras que en el formato GIF
ocupan 1.276 y 1.478 bytes respectivamente, lo que supone una reduc-
ción de aproximadamente el 80% en el tamaño del fichero.
El uso del formato PNG ha tardado varios años en extenderse aunque
sea mucho mejor que los formatos GIF y JPEG en muchos aspectos. La
primera versión apareció en el año 1996 y en el año 2004 se convirtió
en el estándar ISO/IEC 15948:2004 “Information technology -- Compu-
ter graphics and image processing -- Portable Network Graphics (PNG):
Functional specification”64.
64 Disponible en http://www.iso.org/iso/catalogue_detail.htm?csnumber=29581

220 © Alfaomega - Altaria

Curso práctico avanzado

Los navegadores web antiguos lo soportaban parcialmente y algunas

características no se implementaban correctamente. Por ejemplo, en la
Figura 113, Figura 114 y Figura 115 se puede ver la misma imagen PNG65
visualizada mediante los navegadores Netscape Communicator 4.78 (don-
de peor se ve), Microsoft Internet Explorer 5.5 y Opera 6.0 (donde mejor
se ve). Estos navegadores fueron muy comunes entre los años 2000-2004.
Esta imagen posee transparencia alfa, pero esta característica no se vi-
sualiza correctamente en todos los navegadores:
• En Netscape Communicator se ve una barra horizontal con un
degradado y las letras tienen un color sólido porque no se tiene
en cuenta la transparencia. Además en las letras (como la “e” y la
“g”) se pueden observar dientes de sierra, ya que al no realizarse
la transparencia no se puede hacer antialiasing.
• En Microsoft Internet Explorer se puede observar cómo el color de
las letras no es sólido y la barra horizontal ha desaparecido: ahora
hay tres barras más pequeñas y el degradado ha cambiado. Esto
se debe a que la transparencia tiene efecto con el color de fondo
de la imagen.
• En Opera la transparencia se realiza con la imagen de fondo y no
con el color de fondo. Se puede observar cómo la textura de la
imagen de fondo se ve a través de las letras.

Figura 113: Imagen PNG con transparencias visualizada en Netscape Communicator 4.78

65 Esta imagen forma parte de un test W3C disponible en http://www.w3.org/Graphics/PNG/inline-alpha.html

© Alfaomega - Altaria 221

HTML & CSS

Figura 114: Imagen PNG con transparencias visualizada en Microsoft Internet Explorer 5.5

Figura 115: Imagen PNG con transparencias visualizada en Opera 6.0

En la actualidad, los principales navegadores como Google Chrome,

Microsoft Internet Explorer, Mozilla Firefox, Opera y Safaﬁ soportan
perfectamente el formato PNG y muestran esta imagen PNG tal como se
ve en la Figura 115. Pero todavía existen millones de personas que em-
plean versiones antiguas de estos navegadores que pueden experimentar
problemas con el formato PNG.

Consejo
Emplea el formato JPEG para imágenes reales como fotografías. Emplea el
formato PNG en imágenes donde el detalle es importante, como logotipos o
imágenes con textos.

222 © Alfaomega - Altaria

Curso práctico avanzado

Cómo insertar una imagen en una página web

La etiqueta HTML que permite insertar una imagen en un documen-
to es <img>. Una imagen se puede colocar en cualquier punto de un
documento: en un enlace, en una tabla, etc. La etiqueta <img> es una
etiqueta vacía, que no puede contener nada entre la etiqueta de apertura
y la etiqueta de cierre.

Consejo
Utilice gráϔicos para mostrar contenido real, no sólo para decorar la página de
inicio. Por ejemplo, utilice fotos de personas identiϔicables que tienen una conexión
con el contenido en lugar de modelos o fotos genéricas de archivo. Las personas se
sienten naturalmente atraídas hacia las imágenes, por lo que los gráϔicos gratuitos
pueden distraer a los usuarios de contenido crítico.
Fuente: 113 Design Guidelines for Homepage Usability, Jakob Nielsen

http://www.nngroup.com/articles/113-design-guidelines-homepage-usability/

La etiqueta <img> tiene dos atributos obligatorios:

• src=”URL”: indica la localización y el nombre de la imagen que
se quiere insertar.
• alt=”texto”: texto alternativo que se muestra si el navegador
no admite la etiqueta <img> o se ha interrumpido la carga de
imágenes.

En las versiones anteriores el atributo alt

era obligatorio en la etiqueta <img>, pero en
HTML5 ya no lo es.

Además, tiene los siguientes atributos opcionales:

• width=”anchura”: anchura de la imagen.
• height=”altura”: altura de la imagen.
• longdesc=”URL”: indica la localización de una página web que
contiene más información sobre la imagen. Este atributo es im-
portante para mejorar la accesibilidad de una página web.

© Alfaomega - Altaria 223

HTML & CSS

Advertencia
¡Cuidado! Los atributos align, border, hspace y vspace que se usaban
con la etiqueta <img> hace años, ya no se deben utilizar desde XHTML 1.0
Strict. En su lugar se debe utilizar CSS.

Se recomienda indicar siempre la anchura y la altura de cada imagen

con los atributos width y height, ya que así la visualización de las pá-
ginas es más rápida porque el navegador conoce el tamaño de las imáge-
nes antes de cargarlas, por lo que ya puede reservar el correspondiente
espacio en el diseño de la página.

El atributo alt
En HTML 4.01 el atributo alt era opcional. En XHTML 1.0 era obli-
gatorio. En HTML5, excepto en situaciones muy particulares, siempre
se debe deﬁnir el atributo alt. El texto alternativo debe sustituir a la
imagen, debe ser un reemplazo funcional apropiado para la imagen.
Este atributo es importante para mejorar la accesibilidad de las pá-
ginas web: la gente con problemas de visión emplea un software espe-
cial llamado lector de pantallas (screen reader) que “lee” las páginas web;
cuando encuentra una imagen, busca la etiqueta alt y lee su contenido.
El texto alternativo puede ayudar a los usuarios que se encuentren
en alguna de estas situaciones:
• Cuando tengan una conexión a Internet muy lenta y quieran na-
vegar sin imágenes.
• Cuando tengan una discapacidad visual y utilicen un lector de
pantallas.
• Cuando tengan una discapacidad cognitiva y utilicen un lector
de pantallas.
• Cuando utilicen un lector en modo texto.

224 © Alfaomega - Altaria

Curso práctico avanzado

El uso del atributo alt proporciona varios

beneﬁcios pero el principal es mejorar la ac-
cesibilidad de una página web.

El atributo longdesc
El atributo alt se emplea para proporcionar un texto alternativo que
sustituya a una imagen en aquellos casos que la imagen no pueda ser
empleada por ciertos usuarios, como por ejemplo los usuarios ciegos
que utilizan un lector de pantallas. Sin embargo, cuando la imagen es
compleja, el texto alternativo no es suﬁciente para proporcionar toda la
información necesaria para ofrecer una alternativa válida: se recomienda
que el texto alternativo no supere los 100 caracteres y en el texto alter-
nativo no se puede escribir información compleja como tablas o listas.
El atributo longdesc se emplea para proporcionar una descripción
completa de la imagen, de forma que transmita la misma información que
se proporciona en la imagen de forma visual. En el atributo longdesc
se tiene que indicar la URL de la página con la descripción completa de
la imagen.

El atributo longdesc mejora la accesibilidad

de una página web.

Por ejemplo, en la Figura 116 se muestra una página web66 que contie-
ne varias imágenes que tienen definido el atributo longdesc. En Mozilla
Firefox se puede emplear la opción “Ver información de la imagen” para
comprobar si la imagen tiene definido el atributo longdesc. En la Figura
117 se puede ver el texto asociado (el texto alternativo) a la imagen y la
URL de la descripción larga. Entre las propiedades de la imagen figura
“Descripción larga”, que contiene la URL de la página web que aloja la
descripción larga de la imagen.

66 Disponible en http://accesibilidadweb.dlsi.ua.es/contenido/ejemplos/imagenes-complejas/con-longdesc.
html

© Alfaomega - Altaria 225

HTML & CSS

Figura 116: Ejemplo de página con imagen que tiene longdesc

Figura 117: Ver información de la imagen en Mozilla Firefox

El soporte del atributo longdesc en los navegadores actuales es bas-

tante diverso. Por ejemplo, Mozilla Firefox incorpora desde la versión 25
soporte nativo a través de la opción “Ver descripción” del menú contextual
de la imagen que se activa al pulsar el botón derecho del ratón (Figura
118).

226 © Alfaomega - Altaria

Curso práctico avanzado

Figura 118: Opción para navegar a longdesc en Mozilla Firefox

En Google Chrome se puede instalar el complemento “Long Descrip-

tions in Context Menu”67, una extensión oﬁcial de Google para su navega-
dor que se anunció en 2014. Esta extensión añade la opción “Open Long
Description in New Tab” al menú contextual de una imagen (Figura 119).

Figura 119: Opción para navegar a longdesc en Google Chrome

Más información
https://youtu.be/tnpPJou1EVA

Definición de hipermedia, la
etiqueta img, atributos obli-
gatorios (src, alt) y opcionales
(width, height, longdesc, ismap,
usemap), atributos desaconseja-
dos, formatos gráﬁcos (GIF, JPG/
JPEG, PNG), mapas de imagen
(map, area, atributos usemap
e ismap), uso de los mapas de
imagen.

67 Disponible en https://chrome.google.com/webstore/detail/long-descriptions-in-cont/ohbmencljkleiedahijfk
agnmmhbilgp?hl=es

© Alfaomega - Altaria 227

HTML & CSS

Imágenes como fondo de una página

Las páginas web normalmente tienen muchas imágenes para mejo-
rar su apariencia. Incluso, es muy normal colocar imágenes de fondo.
Tradicionalmente se ha empleado el atributo background en la etiqueta
<body> para poner una imagen de fondo. Sin embargo, el empleo de ese
atributo estaba desaconsejado en HTML 4.01 y desde XHTML 1.0 Strict
ya no existe. Para lograr el mismo efecto se tiene que emplear CSS.

Consejo
No abuses de las imágenes de fondo ya que pueden diﬁcultar la lectura del
texto.

Advertencia
No utilices el atributo background en la etiqueta <body> para poner una
imagen de fondo. En su lugar se debe utilizar CSS.

Novedades en HTML5
HTML5 incorpora importantes novedades en el manejo de los elemen-
tos gráficos de una página web. Por un lado, las etiquetas <figure> y
<figcaption> permiten definir un elemento gráfico independiente de la
página, como una imagen, una ilustración o un diagrama; sin embargo,
también se puede utilizar para otros elementos que no tienen que ser
necesariamente gráficos, como por ejemplo un fragmento de código, una
tabla, una cita, etc. Por otro lado la etiqueta <canvas>, que reserva una
parte de una página web para que se dibuje en ella mediante código de
script.

<canvas>, <figcaption> y <figure>

son etiquetas nuevas de HTML5.

La etiqueta <figure>
La especificación oficial de HTML5 define la etiqueta <figure> como:

228 © Alfaomega - Altaria

Curso práctico avanzado

El elemento <figure> representa un contenido de ϔlujo, opcionalmente

con una leyenda, que es auto-contenido (como una oración completa) y
por lo general se hace referencia como una sola unidad desde el ϔlujo prin-
cipal del documento. Por lo tanto, este elemento se puede utilizar para
ilustraciones con anotaciones, diagramas, fotos, listados de código, etc.

La leyenda o título de una ﬁgura se deﬁne con la etiqueta <figcap-

tion>. Esta etiqueta opcional sólo puede aparecer una vez dentro de la
etiqueta <figure>.
Por ejemplo, en el Listado 33 se muestra un ejemplo de uso de la eti-
queta <figure> con una imagen. Como la imagen está acompañada de
una leyenda con la etiqueta <figcaption>, no es necesario que la imagen
tenga deﬁnido un texto alternativo con el atributo alt. En la Figura 120
se muestra este ejemplo visualizado en el navegador Google Chrome; por
defecto, la etiqueta <figure> posee un margen izquierdo y derecho, por
lo que la imagen aparece desplazada hacia la derecha respecto al texto
de la página web.

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Prueba de figure</title>
</head>
<body>
<h1>Enlace de Sir Tim Berners-Lee y Rosemary Leith</h1>
<p>
Sir Tim Berners-Lee y Rosemary Leith contrajeron matrimonio el 20 de junio
de 2014 en Chapel Royal de St James’s Palace en Londres. A la ceremonia
asistieron la familia y los amigos más cercanos.
</p>
<figure>
<img src=”TBL-RL.jpg” alt=””>
<figcaption>Tim Berners-Lee y Rosemary Leith al finalizar su boda. Orig-
inal por <a href=”http://webfoundation.org/tim-berners-lee-married-rose-
mary-leith/”>Alex Lloyd</a></figcaption>
</figrue>
</body>
</html>
Listado 33: Ejemplo de uso de la etiqueta <figure> para una imagen

© Alfaomega - Altaria 229

HTML & CSS

Figura 120: Ejemplo de uso de la etiqueta <ﬁgure> para una imagen

En el Listado 34 se muestra un ejemplo de uso de la etiqueta <figure>

con un poema. La etiqueta <figcaption> se ha empleado para identiﬁcar
el título y el autor del poema.

<figure>
<p>Tengo miedo de verte<br>
necesidad de verte<br>
esperanza de verte<br>
desazones de verte<br>
tengo ganas de hallarte<br>
preocupación de hallarte<br>
certidumbre de hallarte<br>
pobres dudas de hallarte<br>
<br>
tengo urgencia de oírte<br>
alegría de oírte<br>
buena suerte de oírte<br>
y temores de oírte<br>
<br>
o sea<br>
resumiendo
estoy jodido<br>
y radiante<br>
quizá más lo primero<br>
que lo segundo<br>
y también<br>
viceversa.</p>
<figcaption><cite>Viceversa</cite> Mario Benedetti, 1920-2009</figcaption>
</figure>
Listado 34: Ejemplo de uso de la etiqueta <figure> para un poema

230 © Alfaomega - Altaria

Curso práctico avanzado

La etiqueta <canvas>
La etiqueta <canvas> permite realizar dibujos de tipo mapa de bits
sobre una zona reservada de una página web. La etiqueta <canvas>
puede ser accedida a través de JavaScript para generar gráficos en 2D,
juegos, animaciones y otras composiciones gráficas.
El uso de JavaScript está fuera de los objetivos de este libro. De todas
formas, en el Listado 35 se muestra un ejemplo de uso de <canvas>.
La mayor parte del ejemplo corresponde al código JavaScript que se en-
cuentra entre las etiquetas <script> y </script>. En el código se han
definido cinco funciones:
• context(): obtiene un objeto de JavaScript que representa la
etiqueta <canvas>.
• linea(): dibuja una línea.
• rectangulo(): dibuja dos rectángulos.
• circulo(): dibuja dos círculos.
• texto(): escribe un texto.
• limpiar(): limpia el contenido de la etiqueta <canvas>.
Estas funciones se invocan desde botones de HTML.

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Prueba de canvas</title>
<script>
function context() {
var c = document.getElementById(“myCanvas”);
return c.getContext(“2d”);
}
function linea() {
var ctx = context();
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
}
function rectangulo() {
var ctx = context();

© Alfaomega - Altaria 231

HTML & CSS

ctx.fillStyle = “#FF0000”;
ctx.fillRect(0, 0, 150, 75);
ctx.fillRect(100, 100, 100, 100);
}
function circulo() {
var ctx = context();
ctx.beginPath();
ctx.arc(100, 100, 40, 0, 2 * Math.PI);
ctx.stroke();

ctx.beginPath();
ctx.arc(200, 100, 40, 0, 2 * Math.PI);
ctx.stroke();
}
function texto() {
var ctx = context();
ctx.font = “30px Arial”;
ctx.ﬁllStyle = “#0000FF”;
ctx.ﬁllText(“Prueba de canvas”, 10, 50);
}
function limpiar() {
var ctx = context();
ctx.clearRect(0, 0, document.getElementById(“myCanvas”).width, document.
getElementById(“myCanvas”).height);
}
</script>
</head>
<body>
<canvas id=”myCanvas” width=”300” height=”200” style=”border:1px solid
#000000;”>
</canvas>
<p>
<input type=”button” value=”Línea” onclick=”linea()” />
<input type=”button” value=”Rectángulo” onclick=”rectangulo()” />
<input type=”button” value=”Círculo” onclick=”circulo()” />
<input type=”button” value=”Texto” onclick=”texto()” />
<input type=”button” value=”Limpiar” onclick=”limpiar()” />
</p>
</body>
</html>
Listado 35: Ejemplo de uso de <canvas>

232 © Alfaomega - Altaria

Curso práctico avanzado

En la Figura 121 se muestra el ejemplo de uso de <canvas>. El rec-

tángulo que se puede ver es el espacio reservado en la página web para
el <canvas>. Debajo aparecen cinco botones para dibujar la línea, el
rectángulo, el círculo, el texto y limpiar el canvas. Al cargarse la página
web el <canvas> está vacío.

Figura 121: Ejemplo de uso de <canvas>

En la Figura 122 se puede ver el <canvas> después de pulsar en el

botón “Círculo” y en el botón “Texto”.

Figura 122: Ejemplo de uso de <canvas>

SVG
Scalable Vector Graphics (SVG) es una recomendación del W3C68 que
permite describir gráﬁcos vectoriales bidimensionales estáticos. También
permite crear gráﬁcos vectoriales dinámicos, pero con la ayuda de Syn-
chronized Multimedia Integration Language (SMIL).

68 Disponible en http://www.w3.org/TR/SVG/

© Alfaomega - Altaria 233

HTML & CSS

SVG es una aplicación de XML, por lo que los ﬁcheros que almacenan
estas imágenes se pueden editar con un simple editor de textos.
En la actualidad, el formato SVG se usa en muchos sitios web. Por
ejemplo, en la Wikipedia se emplea para representar las banderas y los
escudos de los países o los logotipos de las empresas y organizaciones.
En la Figura 123 se muestra el artículo de la Wikipedia dedicado al
World Wide Web Consortium69. El logotipo del W3C es una imagen en
formato SVG.

Figura 123: Artículo de la Wikipedia sobre W3C

Como el logotipo del W3C es una imagen en formato SVG, se puede

ampliar sin que se produzca una merma en su calidad. Por ejemplo, en
la Figura 124 (b) se muestra la esquina superior derecha del logotipo del
W3C que se puede ver en la Figura 124 (a). Esa parte de la imagen se ha
ampliado varias veces, pero la imagen no ha perdido calidad.

69 Disponible en http://es.wikipedia.org/wiki/World_Wide_Web_Consortium

234 © Alfaomega - Altaria

Curso práctico avanzado

(a) (b)
Figura 124: Logotipo del W3C como imagen SVG

Una imagen SVG es un ﬁchero XML y, por tanto, su código fuente

es visible. En la Figura 125 se muestra la primera parte del código del
logotipo del W3C, tal como lo muestra el navegador Google Chrome al
seleccionar la opción “Ver código fuente de la página” en el menú contextual.
Se puede comprobar que la primera línea del código es la declaración de
documento XML, en la que se indica la versión de XML y el juego de carac-
teres empleado. La etiqueta raíz del documento es <svg>. A continuación
aparece el título, la descripción y cuatro etiquetas <path> que deﬁnen
la ruta que dibuja los caracteres “W3C” y el símbolo “®” de registrado.

Figura 125: Código SVG del logo del W3C

© Alfaomega - Altaria 235

HTML & CSS

En una página web, SVG se puede emplear de dos formas, como una
imagen externa o como una imagen en línea.
El uso de SVG como una imagen externa es similar al uso de otros
formatos de imágenes: la imagen se utiliza en una página web mediante
la etiqueta <img>.
El uso de SVG como una imagen en línea consiste en escribir directa-
mente el código SVG en la página web, ya que SVG es un lenguaje basado
en etiquetas similar a HTML5.
En el Listado 36 se muestra un ejemplo de uso de una imagen SVG en
línea. La imagen es un círculo con borde verde y relleno de color amarillo.
Además, en la página se incluye la misma imagen pero en formato PNG.

<svg width=”100” height=”100”>

<p><img src=”circulo.png” alt=”” /></p>

</body>
</html>
Listado 36: Página web con imagen SVG en línea

En la Figura 126 se muestra la página web con las dos imágenes en

el navegador Google Chrome. A simple vista parece que las dos imágenes
poseen la misma calidad.

236 © Alfaomega - Altaria

Curso práctico avanzado

Figura 126: Página web con imagen SVG en línea

Sin embargo, tal como se puede ver en la Figura 127, si se amplía la

página web se observa que la imagen en formato SVG tiene mejor calidad
y está más perﬁlada que la imagen en formato PNG.

Figura 127: Imagen ampliada en formato SVG y PNG

© Alfaomega - Altaria 237

HTML & CSS

Si se amplían mucho más las dos imágenes, las diferencias de calidad

del formato SVG y el formato PNG son mucho más apreciables: el formato
SVG permite que la imagen se pueda ampliar todo lo que se quiera sin
perder calidad.

Figura 128: Detalle de imagen SVG y PNG

Por último, la página web del Listado 36 valida correctamente con el

validador oﬁcial del W3C, tal como se puede ver en la Figura 129.

Figura 129: Resultado de validación de página web con código SVG

238 © Alfaomega - Altaria

Curso práctico avanzado

En el Listado 37 se muestra otro ejemplo de uso de SVG. En este

ejemplo se deﬁne un gradiente con la etiqueta <linearGradient> de
SVG. Este gradiente se emplea en el relleno de dos ﬁguras geométricas:
en un rectángulo y un círculo.

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=“utf-8“ />
<meta name=“generator“ content=“Bloc de notas“ />
<meta name=“author“ content=“Sergio Luján Mora“ />
<meta name=“keywords“ content=“XHTML, web“ />
<meta name=”description” content=”Prueba de gradiente de SVG” />
<title>Prueba de gradiente de SVG</title>
</head>
<body>
<svg xmlns=”http://www.w3.org/2000/svg” version=”1.1”
viewBox=”0 0 100 100” preserveAspectRatio=”xMidYMid slice”
style=”width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;”>
<linearGradient id=”gradient”>
<stop class=”begin” offset=”0%” style=”stop-color:yellow” />
<stop class=”end” offset=”100%” style=”stop-color:green;” />
</linearGradient>
<rect x=”0” y=”0” width=”100” height=”100” style=”fill:url(#gradient)” />
<circle cx=”50” cy=”50” r=”30” style=”fill:url(#gradient)” />
</svg>
</body>
</html>
Listado 37: Página web con efecto de gradiente de SVG

© Alfaomega - Altaria 239

HTML & CSS

En la Figura 130 se muestra la página web del Listado 37.

Figura 130: Página web con efecto de gradiente de SVG

Como la imagen es escalable, al hacer la ventana del navegador más

grande o más pequeña se ajusta automáticamente a la anchura disponi-
ble. En la Figura 131 se puede ver cómo se visualiza cuando la ventana
del navegador se hace muy pequeña.

Figura 131: Página web con efecto de gradiente de SVG

240 © Alfaomega - Altaria

11
Formularios

Los formularios permiten la introducción de datos en una página web

que son enviados al servidor web para su procesamiento. Los formularios
se construyen con controles como cuadros de texto, campos de veriﬁca-
ción o botones de radio.
Los objetivos de este capítulo son:
• Conocer los distintos controles que se pueden emplear en un for-
mulario web.
• Aprender a crear un formulario web.
• Conocer los nuevos controles de formulario de HTML5.
En este capítulo se explicarán las etiquetas: <button>, <input>,
<form>, <select> y <textarea>.

Los formularios
Los formularios son las herramientas que ofrece HTML para poder
obtener información de un usuario que visita una página web y enviarla
al servidor web para su procesamiento posterior.
Un formulario contiene dos tipos de elementos básicos: los campos de
datos, campos de entrada o controles de datos (cuadros de texto, listas de

© Alfaomega - Altaria 241

HTML & CSS

selección, casillas de veriﬁcación) y los controles de acción (botones). De

forma general, un formulario web posee los siguientes seis componentes:
1. Etiquetas: indican al usuario el significado o función de los campos
de datos a los que están asociados.
2. Campos de datos: permiten al usuario introducir o seleccionar datos.
3. Acciones: definen el comportamiento del formulario.
4. Ayuda: información de ayuda para usar y rellenar un formulario.
5. Mensajes: proporcionan retroalimentación al usuario en base a la
interacción con el formulario. Pueden ser positivos (por ejemplo,
un mensaje que indica que el formulario ha sido enviado con éxito)
o negativos (por ejemplo, un mensaje que indica que un campo
del formulario está vacío y debe ser completado).
6. Validación: comprueba que los datos que se envían al servidor se
ajustan a unos criterios establecidos.
Dentro de una página web se puede incluir más de un formulario, pero
teniendo en cuenta que no pueden anidarse ni solaparse. El servidor
web sólo podrá recibir la información introducida en uno de ellos (sólo
se envía la información de uno de los formularios al servidor).
Para definir un formulario se emplea la etiqueta <form>. La estructura
básica de un formulario es:

<form action=”URL” method=”metodo”>

</form>

El sentido de cada una de las líneas es:

• Línea 1: la etiqueta <form> marca el inicio del formulario. El atri-
buto obligatorio action indica la dirección, la URL, de la página
o programa que procesa los datos del formulario en el servidor
web y method indica el método que se va a utilizar para enviar los
datos del formulario al servidor (get o post).
• Línea 2: en esta sección se incluyen los controles que posee el
formulario.

242 © Alfaomega - Altaria

Curso práctico avanzado

• Línea 3: ﬁn del formulario.

El atributo method es opcional; si no se indica un valor toma el valor
por defecto get. Normalmente se recomienda utilizar post, que indica
que los datos se envían por la entrada estándar. Si se utiliza get, los
datos se envían unidos a la URL y en el servidor se pueden recuperar a
través de la variable de entorno QUERY_STRING.
Además, en la etiqueta <form> también se suele emplear el atribu-
to opcional enctype para indicar el modo de codiﬁcación de los datos
enviados al servidor; si no se indica un valor toma el valor por defecto
application/x-www-form-urlencoded.

Consejo
A partir de XHTML 1.0 Strict la etiqueta <form> no tiene el atributo name.
Para identiﬁcar un formulario se tiene que emplear el atributo id.

Controles tradicionales de un formulario

HTML5 incorpora numerosas mejoras en la creación de formularios.
Muchas cosas que antes se tenían que realizar con mucho código de
HTML, CSS y JavaScript ahora es posible realizarlo con una simple etique-
ta de HTML que incorpora una funcionalidad asociada que un navegador
web compatible con HTML5 es capaz de interpretar. Antes de conocer
las mejoras de HTML5 se van a mostrar los controles tradicionales de
HTML. Todos estos controles siguen existiendo en HTML5 y, por tanto,
se pueden seguir usando sin problemas.
Los controles de un formulario se deﬁnen con las siguientes etiquetas
de HTML:
• Botones (para enviar información, borrar y otras acciones):
<input type=”submit”/>, <input type=”reset”/>, <input
type=”button”/> y <button>.
• Imágenes que actúan como botones: <input type=”image”/>.
• Campos ocultos: <input type=”hidden”/>.
• Campos de texto: <input type=”text”/>.
• Campos de contraseña: <input type=”password”/>. Un campo
de contraseña es idéntico a un campo de texto, pero los caracteres
se ocultan mediante asteriscos.

© Alfaomega - Altaria 243

HTML & CSS

• Campos de veriﬁcación (selección): <input type=”checkbox”/>.

• Campos excluyentes (botones de radio o botones de opción): <in-
put type=”radio”/>.
• Campos de envío de ﬁcheros: <input type=”file”/>.
• Listas de selección: <select> y <option>.
• Áreas de texto (campos de texto multilínea): <textarea>.
• Etiquetas de campos: <label>.
Para que los datos introducidos en un formulario se envíen al servidor,
todo formulario tiene que tener al menos un botón de tipo type=”submit”,
que al ser pulsado realiza el envío de los datos del formulario al servidor
web. También se puede emplear un botón de tipo imagen type=”image”,
que realiza la misma función. Estos botones se pueden sustituir por un
botón normal type=”button”, pero entonces el envío se tiene que realizar
manualmente mediante código programado con JavaScript.
Conviene dar un nombre a los campos que coloquemos en un for-
mulario, ya que al enviar la información al servidor, ésta se transmite
como pares nombre=valor. Para ello, todas las etiquetas de los controles
poseen el atributo name para asignar un nombre al control, que deberá
ser un nombre único70, es decir, ningún otro control tendrá que tener
el mismo nombre (excepto en el caso de los botones de radio, como se
explicará más adelante). También se puede emplear el atributo value
para asignar un valor inicial al control; todas las etiquetas tienen este
atributo excepto <input type=”image”/>, <select> y <textarea>. En
los botones, el atributo value modiﬁca el texto que muestra el botón (la
etiqueta del botón).

Consejo
El atributo name se emplea para identiﬁcar los datos de un formulario cuando
se envían al servidor. Si un control no tiene un nombre asignado, su contenido
no será enviado al servidor.

Si se quiere desactivar un control de un formulario para que no se

pueda utilizar se tiene que añadir el atributo disabled=”disabled”.
Este atributo hará que el control aparezca en el formulario, pero con un
color gris para indicar que está desactivado. Un control desactivado no
puede recibir el foco, no se puede modiﬁcar su contenido y tampoco se
puede copiar su contenido.

70 En realidad, pueden existir varios controles (incluso de distinto tipo) con el mismo nombre, pero cuando
se procesen los datos en el servidor no se podrá saber de qué control procede cada dato.

244 © Alfaomega - Altaria

Curso práctico avanzado

A veces interesa que no se pueda modiﬁcar el contenido de un control

de un formulario, pero sí que se quiere permitir copiar su contenido. En
ese caso se debe emplear el atributo readonly=”readonly”, que indica
que el control es de sólo lectura.
En ambos casos, tanto con el atributo disabled como el atributo rea-
donly, se puede emplear JavaScript para modiﬁcar el valor de estos atri-
butos cuando el usuario realice alguna acción en la interfaz del usuario.
El siguiente ejemplo (Listado 38) muestra la diferencia entre disa-
bled y readonly. En la Figura 132 se puede ver cómo se visualiza este
ejemplo; se puede observar que el cuadro de texto y el botón que tienen
el atributo disabled=”disabled” aparecen con un estilo visual distinto.
En este ejemplo no se ha aplicado el atributo readonly al botón de envío
type=”submit” porque no es válido.

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Prueba de formulario con disabled y readonly</title>
</head>
<body>
<p>
<form action=”url” method=”post”>
<p>
Cuadro de texto: <input type=”text” name=”control1” value=”Un valor ini-
cial” />
<br />
Cuadro de texto disabled: <input type=”text” name=”control2” value=”Un
valor inicial” disabled=”disabled” />
<br />
Cuadro de texto readonly: <input type=”text” name=”control3” value=”Un
valor inicial” readonly=”readonly” />
<br />
Botón: <input type=”submit” value=”Enviar” />
<br />
Botón disabled: <input type=”submit” value=”Enviar” disabled=”disabled” />
</p>
</form>
</body>
</html>
Listado 38: Prueba de disabled y readonly

© Alfaomega - Altaria 245

HTML & CSS

Figura 132: Prueba de disabled y readonly

El siguiente código (Listado 39) genera una página web con un for-
mulario que contiene un campo de texto, un campo de contraseña, dos
campos excluyentes con el mismo nombre (y por tanto sólo se puede elegir
uno de los dos), dos campos de veriﬁcación, una lista de selección, un
campo de envío de ﬁcheros, un área de texto y dos botones (para enviar
información y borrar). En la Figura 133 se muestra el formulario tal como
se ve en un navegador.

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Prueba de formulario</title>
</head>
<body>
<p>
Esto es el cuerpo de una página HTML. Esta página posee un formulario:
</p>
<hr />
<form action=”url” method=”post”>
<p>
Cuadro de texto: <input type=”text” name=”control1a” value=”Un valor ini-
cial” />
<br /><br />
Cuadro de texto contraseña: <input type=”password” name=”control1b” />
<br /><br />
Botones de radio:
<input type=”radio” name=”control2” value=”1” />Opción 1
<input type=”radio” name=”control2” value=”2” />Opción 2
<br /><br />
Casilla de veriﬁcación:

246 © Alfaomega - Altaria

Curso práctico avanzado

<input type=”checkbox” name=”control3a” value=”1” />Opción 1

<input type=”checkbox” name=”control3b” value=”2” />Opción 2
<br /><br />
Lista de selección:
<select name=”control4”>
<option value=”ali”>Alicante</option>
<option value=”val”>Valencia</option>
<option value=”cas”>Castellón</option>
</select>
<br /><br />
Envío de ficheros: <input type=”file” name=”fichero” />
<br /><br />
Area de texto: <textarea name=”control5” rows=”5” cols=”40”></textarea>
<br /><br />
<input type=”submit” value=”Enviar” />
<input type=”reset” value=”Borrar” />
</p>
</form>
<hr />
</body>
</html>
Listado 39: Ejemplo de formulario con distintos controles

Figura 133: Ejemplo de formulario con distintos controles

© Alfaomega - Altaria 247

HTML & CSS

A continuación se explican las principales características de los con-

troles básicos de HTML.

Consejo
En una página web se puede incluir un control sin necesidad de estar dentro
de un formulario.

Campos de texto y de contraseña

En un campo de texto (<input type=”text”/>) y en un campo de con-
traseña (<input type=”password”/>) el usuario puede introducir una
cadena de caracteres. Un campo de contraseña es idéntico a un campo
de texto, pero los caracteres se ocultan mediante asteriscos o algún ca-
rácter similar. Un campo de contraseña sólo oculta la información, no
la protege mediante encriptación.
En ambos controles se puede emplear el atributo size para especi-
ficar el tamaño visual del campo de texto: este valor indica, de forma
aproximada, el número de caracteres que se pueden visualizar en un
momento dado. No se debe confundir este atributo con maxlength, que
define el número máximo de caracteres que se pueden introducir. Si no
se especifica nada, se pueden introducir tantos caracteres como se desee.
Para indicar un valor por defecto que tiene que contener el campo de
texto cuando se visualice la página por primera vez se emplea el atributo
value.
Por último, el atributo readonly=”readonly” permite indicar que el
contenido del campo de texto es de sólo lectura y no se puede modificar.
A diferencia del atributo disabled=”disabled”, este atributo sí que
permite seleccionar el contenido del campo para copiarlo.
El siguiente código (Listado 40) muestra un formulario con cuatro
campos de texto definidos con distintos atributos. En la Figura 134 se
visualiza este ejemplo en un navegador. El segundo campo de texto es
más ancho que los otros porque tiene definido el atributo size=”40”.

248 © Alfaomega - Altaria

Curso práctico avanzado

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Prueba de cuadros de texto</title>
</head>
<body>
<form action=”url” method=”post”>
<p>
Cuadro de texto: <input type=”text” name=”control1” value=”Un valor ini-
cial” />
<br /><br />
Cuadro de texto: <input type=”text” name=”control2” size=”40” max-
length=”60” />
<br /><br />
Con disabled: <input type=”text” name=”control3” value=”Un valor inicial”
disabled=”disabled”/>
<br /><br />
Con readonly: <input type=”text” name=”control4” value=”Un valor inicial”
readonly=”readonly” />
</p>
</form>
</body>
</html>
Listado 40: Ejemplo de formulario con distintos campos de texto

Figura 134: Ejemplo de formulario con distintos campos de texto

Advertencia
¡Cuidado! Aunque un campo de contraseña oculta en pantalla los datos
introducidos, cuando se envían al servidor no están ocultos ni encriptados.

© Alfaomega - Altaria 249

HTML & CSS

Campos de verificación
Un campo de veriϐicación (<input type=”checkbox”/>) se emplea
cuando se quiere que el usuario pueda seleccionar una o más opciones
de un conjunto de opciones. Los campos de verificación poseen dos
valores: activado y desactivado. Si al enviarse un formulario un campo
de verificación está activo, se envía al servidor el valor indicado por el
atributo value. Distintos campos de verificación pueden tener el mismo
nombre con el atributo name, aunque no es lo usual ya que complica la
programación de la aplicación web que recibe los datos en el servidor.
Si se desea que por defecto un campo de verificación aparezca activa-
do, se tiene que incluir el atributo checked=”checked” en la etiqueta.

Consejo
Los campos de verificación y las listas de selección son equivalentes. Utiliza
los campos de verificación cuando el conjunto de opciones sea pequeño (me-
nos de cinco opciones). Utiliza las listas de selección cuando haya muchas
opciones y no sea conveniente enseñarlas todas a la vez en la página web.
Campos excluyentes
Un campo excluyente o botón de radio (<input type=”radio”/>) se
emplea cuando se quiere que el usuario pueda seleccionar una sola
opción de un conjunto de opciones. Un grupo de botones de radio está
formado por varios botones de radio que tienen todos el mismo nombre
(name). En un grupo de botones de radio sólo un botón de radio puede
estar seleccionado en un instante. Cuando se selecciona un botón de
radio distinto en un grupo, automáticamente se deselecciona el botón
de radio que antes estaba seleccionado. Un formulario puede contener
distintos grupos de botones de radio, cada uno con un nombre distinto.
Los botones de radio también poseen el atributo checked=”checked”
que permite indicar un botón de radio seleccionado por defecto.
Envío de ficheros
Un campo de envío de ϐicheros (<input type=”file”/>) se emplea para
enviar (subir) ficheros desde el cliente al servidor. Cuando se emplea un
campo de este tipo en un formulario, se tiene que cambiar el modo de
codificación de los datos enviados al servidor para que el envío sea co-
rrecto. Para ello, en el atributo enctype de la etiqueta <form> se tiene
que indicar el valor multipart/form-data, necesario para poder enviar
datos binarios como los contenidos en un fichero.
250 © Alfaomega - Altaria
Curso práctico avanzado

Advertencia
Recuerda modiﬁcar el valor del atributo enctype cuando un formulario
incluya un control para envío de ﬁchero.

Los campos de envío de ﬁcheros poseen el atributo accept, que permite

indicar una lista separada por comas de los tipos MIME que se quieren
aceptar para el envío. Sin embargo, la utilización de este atributo cambia
de un navegador a otro. Además, este atributo no asegura que el nave-
gador realice realmente la comprobación del tipo de archivo, por lo que
la comprobación del tipo de los archivos subidos siempre se debe hacer
en el servidor aunque se emplee este atributo.
Por ejemplo, el siguiente código (Listado 41) muestra un formulario
con dos campos de envío de ficheros, uno para enviar una fotografía que
acepta los formatos GIF, JPEG y PNG, y otro para enviar un documento
de Microsoft Word. Como se puede ver en la Figura 135, Google Chrome
no muestra la lista de ficheros que acepta, simplemente aparece la op-
ción “Archivos personalizados”. Por otro lado, Microsoft Internet Explorer
(Figura 136) sí que muestra en el cuadro de diálogo “Elegir archivos para
cargar” un filtro con las extensiones de los archivos personalizados.

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Prueba de envío de fichero</title>
</head>
<body>
<form action=”url” method=”post”>
<p>
Una fotografía: <input type=”file” name=”fichero1” accept=”image/gif,image/
jpeg,image/png” />
<br /><br />
Un documento de Microsoft Word: <input type=”file” name=”fichero2”
accept=”application/msword” />
<br /><br />
<input type=”submit” value=”Enviar ficheros” />
</p>
</form>
</body>
</html>

© Alfaomega - Altaria 251

HTML & CSS

Listado 41: Ejemplo de formulario de envío de ﬁcheros

Figura 135: Selección del tipo de archivo en Google Chrome

Figura 136: Selección del tipo de archivo en Microsoft Internet Explorer

La representación visual del campo de envío <input type=”file”/>

varía de un navegador a otro, lo cual puede causar confusión a algunos
usuarios. En la Figura 137 se muestra la página web del Listado 41 vi-
sualizada en los cuatro navegadores más populares: (a) Google Chrome,
(b) Microsoft Internet Explorer, (c) Mozilla Firefox y (d) Opera. Google
Chrome y Opera coinciden en la forma de visualizar este control porque
252 © Alfaomega - Altaria
Curso práctico avanzado

utilizan el mismo motor de visualización, pero en Microsoft Internet Ex-

plorer y Mozilla Firefox la visualización es muy diferente.

(a) (b)

Campos ocultos
Un campo oculto (<input type=”hidden”/>) no se visualiza en la
página web. Se suele emplear para almacenar información que se quiere
pasar de una página a otra o para almacenar información necesaria para

© Alfaomega - Altaria 253

HTML & CSS

el posterior procesamiento en el servidor.

Consejo
Coloca los campos ocultos al principio del formulario justo después de la
etiqueta <form>, ya hace que sean más fáciles de encontrar e identiﬁcar.

Listas de selección
Una lista de selección, lista desplegable o menú desplegable (dropdown
menu) se crea con la etiqueta <select>. En las listas de selección se
muestra una serie de opciones entre las que el usuario puede elegir una.
Si se añade el atributo multiple=”multiple”, el usuario puede elegir
múltiples opciones71 a la vez. El atributo size permite indicar cuantas
opciones de la lista se visualizan simultáneamente. Si el valor de este
atributo es 1 (valor por defecto), se muestra una lista desplegable; si el
valor de este atributo es mayor que 1, se muestra un cuadro de opciones
con una barra de desplazamiento vertical para desplazarse entre todas
las opciones.
Cada opción de una lista de selección se indica con la etiqueta <op-
tion>. Cada opción puede tener asociado un valor deﬁnido con el
atributo value, que es el valor que se enviará al servidor cuando la
opción sea seleccionada. Si no se indica un valor con este atributo, el
navegador enviará al servidor el texto de la etiqueta, es decir, el conte-
nido existente entre <option> y </option>. Si se desea que una opción
aparezca marcada por defecto se tiene que añadir a la opción el atributo
selected=”selected”.

Advertencia
¡Cuidado! En la sintaxis HTML de HTML5 la etiqueta de cierre </option>
es opcional, pero en la sintaxis XHTML es obligatoria.

También existe la etiqueta <optgroup>, que permite agrupar las opcio-

nes de una lista. Esta etiqueta es útil cuando una lista contiene muchas
opciones. Esta etiqueta tiene el atributo obligatorio label que permite
deﬁnir el texto que aparece en la lista para indicar un agrupamiento de
opciones.

71 Para seleccionar varias opciones, en Microsoft Windows se emplean la tecla “Control” para seleccionar
de una en una y la tecla “Mays ↑” para seleccionar un conjunto contiguo de opciones (se tiene que marcar
la primera y la última opción).

254 © Alfaomega - Altaria

Curso práctico avanzado

Consejo
Utilice los menús desplegables con moderación, sobre todo si los elementos
no son fáciles de entender. Los usuarios se sienten atraídos por ellos, y a menudo
son los elementos de navegación menos efectivos. Si tienes muy pocos elementos en
un menú desplegable, a menudo es mejor hacer una lista con ellos directamente
en la página principal. Del mismo modo, evite las largas listas desplegables, ya
que son diϔíciles de utilizar eϔicazmente para los usuarios, y los usuarios a menudo
tienen diϔicultades para diferenciar entre los elementos de la lista. A menudo es
mejor llevar a los usuarios a una página distinta para la selección, donde se pueden
explicar los diferentes elementos o, al menos, se pueden organizar en categorías
más signiϔicativas que una sola lista.
Fuente: 113 Design Guidelines for Homepage Usability, Jakob Nielsen
http://www.nngroup.com/articles/113-design-guidelines-homepage-usability/

Consejo
Los menús desplegables son el último recurso de las interfaces.
Fuente: Luke Wroblewski
https://twitter.com/lukew/status/412616840712433664

El ejemplo del Listado 42 muestra cuatro listas: una lista normal, una
lista normal que muestra tres opciones a la vez y posee una seleccionada
por defecto, una lista múltiple y una lista con las opciones agrupadas.
En la Figura 138 se puede observar cómo se visualiza esta página en
un navegador. En la última lista se puede observar cómo se realiza la
agrupación de opciones.

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Prueba de lista de selección</title>
</head>
<body>
<form action=”url” method=”post”>
<p>
Lista de selección normal:
<select name=”provincia”>

© Alfaomega - Altaria 255

HTML & CSS

<option value=”1”>Alicante</option>
<option value=”2”>Valencia</option>
<option value=”3”>Castellón</option> </select>
<br /><br />
Lista de selección normal de tamaño 3:
<select name=”universidad” size=”3”>
<option value=”uv”>Universidad de Valencia</option>
<option value=”uji”>Universidad Jaime I</option>
<option value=”ua” selected=”selected”>Universidad de Alicante</option>
<option value=”upv”>Universidad Politécnica de Valencia</option>
<option value=”umh”>Universidad Miguel Hernández</option>
</select>
<br /><br />
Lista de selección múltiple:
<select name=”departamento” multiple=”multiple”>
<option value=”dlsi”>D. de Lenguajes y Sistemas Informáticos</option>
<option value=”damma”>D. de Análisis M. y M. Aplicada</option>
<option value=”dﬁsts”>D. de Física e Ingeniería de Sistemas</option>
<option value=”dagr”>D. de Análisis Geográﬁco Regional</option>
<option value=”mmlab”>Laboratorio Multimedia</option>
</select>
<br /><br />
Lista con opciones agrupadas:
<select name=”ciudades”>
<optgroup label=”Alicante”>
<option value=”1”>Alcoy</option>
<option value=”2”>Alicante</option>
<option value=”3”>Elche</option>
</optgroup>
<optgroup label=”Valencia”>
<option value=”4”>Sagunto</option>
<option value=”5”>Silla</option>
<option value=”6”>Valencia</option>
</optgroup>
<optgroup label=”Castellón”>

256 © Alfaomega - Altaria

Curso práctico avanzado

<option value=”7”>Castellón</option>
<option value=”8”>Peñíscola</option>
</optgroup>
</select>
</p>
</form>
</body>
</html>
Listado 42: Ejemplo de formulario con distintas listas de selección

Figura 138: Ejemplo de formulario con distintas listas de selección

Áreas de texto
La etiqueta <textarea> define un área de texto donde se pueden es-
cribir varias líneas de texto y un número ilimitado de caracteres. Esta
etiqueta posee dos atributos obligatorios que permiten modificar su ta-
maño. El atributo cols indica el número de caracteres por línea que se
pueden mostrar sin tener que realizar desplazamiento (scroll) horizontal.
El atributo rows define el número de líneas que se pueden mostrar sin
realizar desplazamiento vertical. Si se quiere que el área de texto mues-
tre un texto por defecto, se puede incluir entre las etiquetas de inicio
<textarea> y fin </textarea>.
El siguiente ejemplo (Listado 43) muestra dos áreas de texto de dis-
tinto tamaño, una de ellas con un texto por defecto. En la Figura 139 se
puede ver esta página visualizada en un navegador.

© Alfaomega - Altaria 257

HTML & CSS

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Prueba de áreas de texto</title>
</head>
<body>
<form action=”url” method=”post”>
<p>
Área 1:
<textarea rows=”3” cols=”40”>Texto por defecto...</textarea>
<br />
Área 2:
<textarea rows=”4” cols=”20”></textarea>
</p>
</form>
</body>
</html>
Listado 43: Ejemplo de formulario con áreas de texto de distinto tamaño

Figura 139: Ejemplo de formulario con áreas de texto de distinto tamaño

Cuando un área de texto contiene más texto del que se puede visuali-
zar aparecen unas barras de desplazamiento vertical, tal como se puede
ver en la Figura 140.

Figura 140: Barras de desplazamiento vertical en un área de texto

258 © Alfaomega - Altaria

Curso práctico avanzado

Advertencia
¡Cuidado! Todo lo que escribas, incluidos los saltos de línea y las tabulacio-
nes, entre la etiqueta de apertura <textarea> y de cierre </textarea> se
mostrarán en el área de texto.

Etiquetas de campos
La etiqueta <label> se emplea para deﬁnir una etiqueta de un campo
de un formulario. Una etiqueta de un campo no se visualiza con un for-
mato especial, pero proporciona un mecanismo que mejora la usabilidad
del formulario, ya que pulsar sobre la etiqueta equivale a pulsar sobre
el campo asociado.
Esta etiqueta emplea el atributo for para indicar a qué campo está
asociada. El valor del atributo for tiene que coincidir con el valor del
atributo id del campo asociado.
Por ejemplo, el siguiente código (Listado 44) muestra dos conjuntos de
campos excluyentes y campos de veriﬁcación; el texto asociado a cada
campo está encerrado por una etiqueta <label>, por lo que al pulsar
sobre el texto se activa el campo correspondiente. En la Figura 141 se
puede ver esta página visualizada en un navegador web.

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Prueba de etiquetas de campos</title>
</head>
<body>
<form action=”procesa.asp” method=”post”>
<p>
Sexo:
<input type=”radio” id=”sexo1” name=”sexo” value=”H” /><label for=”sex-
o1”>Hombre</label>
<input type=”radio” id=”sexo2” name=”sexo” value=”M” /><label for=”sex-
o2”>Mujer</label>
<br /><br />
Idioma:
<input type=”checkbox” id=”idioma1” name=”idioma” value=”es” /><label
for=”idioma1”>Español</label>

© Alfaomega - Altaria 259

HTML & CSS

<input type=”checkbox” id=”idioma2” name=”idioma” value=”en” /><label

for=”idioma2”>Inglés</label>
<input type=”checkbox” id=”idioma3” name=”idioma” value=”fr” /><label
for=”idioma3”>Francés</label>
<br /><br />
<input type=”submit” value=”Enviar ﬁcheros” />
</p>
</form>
</body>
</html>
Listado 44: Ejemplo de formulario con etiquetas de campos

Figura 141: Ejemplo de formulario con etiquetas de campos

La etiqueta <label> no sólo ayuda a mejo-

rar la usabilidad de un formulario, también
ayuda a mejorar la accesibilidad.

Más información
https://youtu.be/m9BHdK2Lt3k

Formularios tradicionales con

HTML, qué es un formulario,
para qué sirve un formulario,
etiquetas y atributos que se em-
plean en un formulario, controles
de un formulario (input, text,
checkbox, radio, ﬁle, password,
hidden, button, submit, image,
reset), métodos de envío (GET,
POST).
260 © Alfaomega - Altaria
Curso práctico avanzado

https://youtu.be/1vNlx4EvFVQ

Formularios tradicionales con

HTML, controles de un formu-
lario (select, option, optgroup,
textarea, label, ﬁeldset, legend).

Eventos
En programación, un evento es una acción o acontecimiento detectado
por un programa y manejado por el programa. Un evento puede estar
causado por un usuario (el usuario pulsa una tecla en el teclado o sitúa
el ratón encima de un elemento particular en la pantalla del ordenador),
por el sistema (finaliza la ejecución de una tarea) o por el hardware (se
conecta un dispositivo al ordenador).
En HTML existen una serie de eventos a los que se puede asociar código
de script como el escrito con el lenguaje de programación JavaScritpt.
Los principales eventos definidos en HTML son72:
• onload: este evento ocurre cuando finaliza la carga de una página
en una ventana o de todos los marcos en una página dividida en
marcos. Este atributo se puede emplear en las etiquetas <body>
y <frameset>73.
• onunload: este evento ocurre cuando se quita una página de una
ventana o de un marco. Este atributo se puede emplear en las
etiquetas <body> y <frameset>.
• onclick : este evento ocurre cuando el botón del dispositivo
apuntador es pulsado sobre un elemento. Este atributo se puede
emplear con la mayoría de las etiquetas.
• ondblclick: este evento ocurre cuando el botón del dispositivo
apuntador es pulsado dos veces sobre un elemento. Este atributo
se puede emplear con la mayoría de las etiquetas.

72 En la siguiente descripción, el dispositivo apuntador se reﬁere al dispositivo empleado por el usuario

para interactuar con la página web, como por ejemplo el ratón
73 Las etiquetas <frameset>, <frame> y <noframes> no existen en HTML5.

© Alfaomega - Altaria 261

HTML & CSS

• onmousedown: este evento ocurre cuando el botón del dispositivo

apuntador es presionado sobre un elemento. Este atributo se pue-
de emplear con la mayoría de las etiquetas. Este evento es distinto
de onclick, ya que este último se origina cuando se presiona y
se suelta el botón.
• onmouseup: este evento ocurre cuando el botón del dispositivo
apuntador es soltado sobre un elemento. Este atributo se puede
emplear con la mayoría de las etiquetas.
• onmouseover: este evento ocurre cuando el dispositivo apuntador
se mueve sobre un elemento. Este atributo se puede emplear con
la mayoría de las etiquetas.
• onmousemove: este evento ocurre cuando el dispositivo apuntador
es movido mientras está sobre un elemento. Este atributo se puede
emplear con la mayoría de las etiquetas.
• onmouseout: este evento ocurre cuando el dispositivo apuntador
es movido fuera de un elemento. Este atributo se puede emplear
con la mayoría de las etiquetas.
• onfocus: este evento ocurre cuando un elemento recibe el foco,
ya sea por el dispositivo apuntador o mediante tabulación. Este
atributo se puede emplear con las etiquetas <a>, <area>, <la-
bel>, <input>, <select>, <textarea> y <button>.
• onblur: este evento ocurre cuando un elemento pierde el foco,
ya sea por el dispositivo apuntador o mediante tabulación. Este
atributo se puede emplear con las mismas etiquetas que el evento
onfocus.
• onkeypress: este evento ocurre cuando una tecla es presionada
y soltada sobre un elemento. Este atributo se puede emplear con
la mayoría de las etiquetas.
• onkeydown: este evento ocurre cuando una tecla es presionada
sobre un elemento. Este atributo se puede emplear con la mayoría
de las etiquetas.

262 © Alfaomega - Altaria

Curso práctico avanzado

• onkeyup: este evento ocurre cuando una tecla es soltada sobre

un elemento. Este atributo se puede emplear con la mayoría de
las etiquetas.
• onsubmit: este evento ocurre cuando un formulario es enviado.
Este atributo sólo se puede emplear con la etiqueta <form>.
• onreset: este evento ocurre cuando un formulario es borrado. Este
atributo sólo se puede emplear con la etiqueta <form>.
• onselect: este evento ocurre cuando un usuario selecciona un
texto en un campo. Este atributo se puede emplear con las eti-
quetas <input> y <textarea>.
• onchange: este evento ocurre cuando un control pierde el foco de
entrada y su valor ha sido modiﬁcado desde que obtuvo el foco.
Este atributo se puede emplear con las etiquetas <input>, <se-
lect> y <textarea>.

Más información
Para más información sobre los eventos en las páginas web consulta las si-
guientes referencias:

• W3C - Document Object Model (DOM) Level 2 Events Speci ication: http://
www.w3.org/TR/DOM-Level-2-Events/
• W3C - Document Object Model (DOM) Level 3 Events Speci ication: http://
www.w3.org/TR/DOM-Level-3-Events/
• MDN - Event reference: https://developer.mozilla.org/en-US/docs/Web/
Events
• W3Schools - HTML DOM Events: http://www.w3schools.com/jsref/
dom_obj_event.asp

Novedades en HTML5
Durante más de una década, en los formularios web sólo se podían
usar los controles que se han visto hasta el momento en esta sección.
Todos esos controles siguen existiendo en HTML5 y se pueden seguir
usando, pero se han visto ampliados.

© Alfaomega - Altaria 263

HTML & CSS

Antes de HTML5, la ausencia de controles avanzados, como el control

calendario, el control rejilla o la barra de deslizamiento provocaba que
el desarrollador web tuviera que programarse sus propios controles, lo
cual llevaba consigo varios problemas.
Por ejemplo, en la Figura 142 se muestra un control calendario de una
página web. Este control es muy diferente del que se puede encontrar en
otras páginas web, como por ejemplo el calendario que se muestra en la
Figura 143 y el que se muestra en la Figura 144.

Figura 142: Ejemplo de control calendario

Figura 143: Ejemplo de control calendario

264 © Alfaomega - Altaria

Curso práctico avanzado

Figura 144: Ejemplo de control calendario

Estas diferencias en la apariencia y funcionamiento del control calen-

dario producen confusión en el usuario, ya que cada vez que el usuario
encuentra un control calendario nuevo en una página web, debe dedicar
un momento a comprender su funcionamiento. HTML5 soluciona este
problema, ya que incorpora de forma nativa un control calendario.
Los nuevos controles de formulario que se han añadido en HTML5 son:
• color: selector de color.
• date: selector de fecha.
• email: cuadro de texto para introducir un correo electrónico.
• number: cuadro de texto para introducir un número.
• range: control para seleccionar un valor dentro de un rango.
• search: cuadro de texto para introducir una cadena de búsqueda.
• tel: cuadro de texto para introducir un número de teléfono.
• time: selector de un instante de tiempo.
• url: cuadro de texto para introducir una URL.
Los controles no soportados por un navegador se muestran como un
cuadro de texto, es decir, como un control de tipo type=”text”.
Además, HTML5 también incorpora los siguientes atributos para la
etiqueta <form> de un formulario:
• autocomplete: cuando este atributo toma el valor “on”, el navega-
dor autocompleta los controles del formulario en base a los valores
que el usuario ha introducido previamente.

© Alfaomega - Altaria 265

HTML & CSS

• novalidate: cuando este atributo está presente indica que el

formulario no se debe validar cuando sea enviado.
HTML5 también incorpora númerosos atributos para los controles de
un formulario. Los más importantes son:
• autocomplete: indica si el navegador debe autocompletar o re-
llenar un control en base a las entradas anteriores del usuario.
• autofocus: indica que el control reciba el foco cuando se carga
la página.
• max: valor máximo que se puede introducir.
• min: valor mínimo que se puede introducir.
• pattern: valida el valor introducido comparándolo con una ex-
presión regular.
• placeholder: muestra una sugerencia del tipo de dato que se
debe introducir.
• required: indica que el control es obligatorio y el usuario siempre
debe introducir un valor.
HTML5 también incorpora una novedad muy importante, la valida-
ción realizada por el propio navegador web. Antes de HTML5, cualquier
validación en el lado del cliente, es decir, en el propio navegador web, se
debía programar con JavaScript. Ahora con HTML5 algunas validaciones
se pueden simpliﬁcar ya que las puede realizar el propio navegador web.
Por ejemplo, en el Listado 45 se muestra un formulario que contiene un
control para que el usuario introduzca un correo electrónico y otro con-
trol para que introduzca una dirección de Internet, es decir, una URL.
Además, los dos controles tienen el atributo required que indica que
los controles son obligatorios y el usuario debe introducir un valor para
que el formulario se pueda enviar al servidor web.

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Prueba de formulario con controles de HTML5</title>
</head>
<body>

266 © Alfaomega - Altaria

Curso práctico avanzado

<form action=”url” method=”post”>

<p>
Correo: <input type=”email” name=”correo” required />
</p>

<p>
Url: <input type=”url” name=”direccion” required />
</p>
<p>
<input type=”submit” value=”Enviar” />
<input type=”reset” value=”Borrar” />
</p>
</form>
</body>
</html>
Listado 45: Ejemplo de formulario con validación

En la Figura 145 (a) se puede ver el mensaje de error que muestra el

navegador Google Chrome cuando se intenta enviar este formulario con
el control Correo vacío. El mismo mensaje de error aparece si el control
URL está vacío, tal como se puede ver en la Figura 145 (b). Estos men-
sajes de error aparecen porque se ha incluido el atributo required en
los dos controles.

(a) (b)
Figura 145: Validación de campo requerido

Además, en este ejemplo también se comprueba el formato del valor

introducido. En la Figura 146 (a) se puede ver el mensaje de error que

© Alfaomega - Altaria 267

HTML & CSS

muestra el navegador Google Chrome cuando no se introduce un correo

electrónico válido en el control Correo, mientras que en la Figura 146 (b)
se puede ver el mensaje de error correspondiente al control URL.

(a) (b)
Figura 146: Validación de correo electrónico y URL

Como se ha visto, las novedades de HTML5 ofrecen numerosas ven-

tajas. Sin embargo, hay que llevar mucho cuidado con el uso de todas
estas novedades, ya que su compatibilidad con los navegadores actuales
puede variar enormemente. Por ejemplo, en la Figura 147 se muestra
la tabla de compatibilidad del atributo placeholder74. Este atributo es
soportado por todos los navegadores modernos excepto Opera Mini, que
es la versión del navegador Opera que se emplea en algunos dispositivos
móviles.

Figura 147: Compatibilidad del atributo placeholder

74 Disponible en http://caniuse.com/#feat=input-placeholder

268 © Alfaomega - Altaria

Curso práctico avanzado

En la Figura 148 se muestra la tabla de compatibilidad de los contro-

les date y time. De los navegadores de escritorio, sólo Chrome y Opera
soportan estos controles, Microsoft Internet Explorer, Mozilla Firefox y
Safari no lo soportan.

Figura 148: Compatibilidad de los controles date y time

¿Cuál es el problema de que un control no sea soportado por un na-

vegador?
En el Listado 46 se muestra un ejemplo de formulario que contiene
un control de tipo hora y otro de tipo fecha. En la Figura 149 se puede
ver cómo se visualiza esta página en el navegador Google Chrome. Este
navegador sí que visualiza los dos controles de tipo hora y fecha, tal como
se indica en la tabla de compatibilidad de la Figura 148.

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Prueba de formulario con controles de HTML5</title>
</head>
<body>
<form action=”url” method=”post”>
<p>
Hora de nacimiento: <input type=”time” name=”control-hora” />
</p>

© Alfaomega - Altaria 269

HTML & CSS

<p>
Fecha de nacimiento: <input type=”date” name=”control-fecha” />
</p>
<p>
<input type=”submit” value=”Enviar” />
<input type=”reset” value=”Borrar” />
</p>
</form>
</body>
</html>
Listado 46: Ejemplo de uso de los controles date y time

Figura 149: Controles date y time en Google Chrome

En Google Chrome, el control de tipo fecha muestra un calendario

desplegable en el que se puede seleccionar el año, el mes y el día. Sin
embargo, en el navegador Microsoft Internet Explorer tanto el control
fecha como el control hora se visualizan simplemente como un cuadro
de texto, tal como se puede ver en la Figura 150.

Figura 150: Controles date y time en Microsoft Internet Explorer

En el navegador Mozilla Firefox ocurre lo mismo (Figura 151), los dos

controles se muestran como sendos cuadros de texto porque el navegador
no está preparado para interpretar los controles fecha y hora de HTML5.

270 © Alfaomega - Altaria

Curso práctico avanzado

Figura 151: Controles date y time en Mozilla Firefox

El navegador Opera Mobile Emulator sí que es capaz de representar

correctamente los controles fecha y hora. Si se compara la Figura 149
y la Figura 152, la representación del control fecha puede variar de un
navegador a otro, pero en el mismo navegador siempre se representará
de la misma forma en diferentes páginas web.

Figura 152: Controles date y time en Opera Mobile Emulator

Por último, HTML5 también incorpora cinco nuevos elementos re-

lacionados con la entrada de información que se pueden usar en los
formularios:
• datalist: representa una lista de datos.
• keygen: representa un control para generar pares de clave para
la encriptación.
© Alfaomega - Altaria 271
HTML & CSS

• meter: representa una medida en un intervalo conocido.

• output: muestra los resultados de un cálculo.
• progress: representa el proceso de ﬁnalización de una tarea.

Más información
https://youtu.be/6oGjhVRu7cU

Los nuevos controles de HTML5

(los nuevos estados del atributo
type, como url, tel, email, num-
ber, color, search, range, dateti-
me, datetime-local, date, month,
week, time), soporte por parte de
los navegadores, representación
de algunos controles en disposi-
tivos móviles.
https://youtu.be/UVpE-tBtdvY

Nuevos atributos que se pueden

emplear en los controles de los
formularios (autocomplete, au-
tofocus, min, max, step, pattern,
placeholder, required), Moderni-
zar y los polyﬁlls.

thttps://youtu.be/Bjc-sykJ8bg

Ejemplo completo de formulario

en HTML5 (los nuevos controles
de formulario de HTML5 es una
de sus mejores características).

Alineamiento de formularios
El alineamiento de los controles de un formulario es muy importante,
ya que facilita su lectura y su utilización. Un formulario bien alineado

272 © Alfaomega - Altaria

Curso práctico avanzado

permite que el usuario comprenda mucho mejor la información que tiene

que introducir en cada control.

Consejo
Un formulario bien alineado mejora su usabilidad.

El siguiente ejemplo (Listado 47) muestra un formulario sin alinea-

miento, donde cada control comienza en una posición horizontal dife-
rente. En la Figura 153 se puede ver como se muestra esta página en un
navegador. El formulario tiene una apariencia descuidada y su uso es
difícil y lento, ya que los controles no están organizados, lo que diﬁculta
su lectura y uso. El formulario no se presenta visualmente de una forma
que ayude a guiar el ojo del usuario.

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Formulario no organizado</title>
</head>
<body>
<form action=”procesa.asp” method=”post”>
<p>
Nombre empresa: <input type=”text” name=”nombreempresa” size=”40” />
<br />
Nombre: <input type=”text” name=”nombre” size=”20” />
<br />
Apellidos: <input type=”text” name=”apellidos” size=”30” />
<br />
Sexo:
<input type=”radio” name=”sexo” value=”H” /> Hombre
<input type=”radio” name=”sexo” value=”M” /> Mujer
<br />
Dirección: <input type=”text” name=”direccion” size=”40” />
<br />
Población:
<select name=”poblacion”>
<option value=”1”>Alicante</option>
<option value=”2”>Castellón</option>
<option value=”3”>Valencia</option>
</select>

© Alfaomega - Altaria 273

HTML & CSS

<br />
Deportes:
<select name=”deportes” multiple=”multiple”>
<option value=”1”>Fútbol</option>
<option value=”2”>Páddel</option>
<option value=”3”>Tenis</option>
</select>
<br />
Música:
<select name=”musica” multiple=”multiple”>
<option value=”1”>Clásica</option>
<option value=”2”>Pop</option>
<option value=”3”>Rock</option>
</select>
<br />
<input type=”submit” />
<input type=”reset” />
</p>
</form>
</body>
</html>
Listado 47: Ejemplo de formulario sin alineamiento de los controles

Figura 153: Ejemplo de formulario sin alineamiento de los controles

Para organizar los controles de un formulario se pueden emplear las

etiquetas <fieldset> y <legend>. La primera etiqueta permite agrupar
los controles de un formulario y dibuja un rectángulo alrededor de ellos.
La segunda etiqueta permite mostrar un título en el rectángulo dibujado
por la etiqueta <fieldset>.

274 © Alfaomega - Altaria

Curso práctico avanzado

Consejo
Mejora el diseño de los formularios web mediante la colocación de las etiquetas
cerca de los campos y agrupando los campos similares.
Fuente: Form Design Quick Fix: Group Form Elements Eﬀectively
Using White Space, Nielsen Norman Group

http://www.nngroup.com/articles/form-design-white-space/

El siguiente ejemplo (Listado 48) muestra el empleo de estas dos

etiquetas. En la Figura 154 se muestra este ejemplo en un navegador.
Los controles del formulario se han agrupado en dos apartados: “Datos
personales” y “Aﬁciones”. Estos apartados ayudan a interpretar y rellenar
el formulario, pero todavía se puede mejorar su presentación para que
sea más fácil de utilizar.

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Formulario organizado con campos</title>
</head>
<body>
<form action=”procesa.asp” method=”post”>
<ﬁeldset>
<legend>Datos personales</legend>
Nombre empresa: <input type=”text” name=”nombreempresa” size=”40” />
<br />
Nombre: <input type=”text” name=”nombre” size=”20” />
<br />
Apellidos: <input type=”text” name=”apellidos” size=”30” />
<br />
Sexo:
<input type=”radio” name=”sexo” value=”H” /> Hombre
<input type=”radio” name=”sexo” value=”M” /> Mujer
<br />
Dirección: <input type=”text” name=”direccion” size=”40” />
<br />
Población:
<select name=”poblacion”>
<option value=”1”>Alicante</option>
<option value=”2”>Castellón</option>

© Alfaomega - Altaria 275

HTML & CSS

<option value=”3”>Valencia</option>
</select>
</fieldset>
<br />
<fieldset>
<legend>Aficiones</legend>
Deportes:
<select name=”deportes” multiple=”multiple”>
<option value=”1”>Fútbol</option>
<option value=”2”>Páddel</option>
<option value=”3”>Tenis</option>
</select>
<br />
Música:
<select name=”musica” multiple=”multiple”>
<option value=”1”>Clásica</option>
<option value=”2”>Pop</option>
<option value=”3”>Rock</option>
</select>
</fieldset>
<p>
<input type=”submit” />
<input type=”reset” />
</p>
</form>
</body>
</html>
Listado 48: Ejemplo de formulario organizado con campos

Figura 154: Ejemplo de formulario organizado con campos

276 © Alfaomega - Altaria
Curso práctico avanzado

Advertencia
¡Cuidado! No utilices la etiqueta <center> para centrar los elementos de la
página, está desaconsejada en HTML 4.01 y no existe a partir de XHTML 1.0
Strict. En su lugar se debe utilizar CSS.

Por último, el Listado 49 muestra el mismo formulario que antes, pero

organizado gracias al empleo de una tabla con bordes invisibles. En la
Figura 155 se puede observar cómo se visualiza este formulario en un
navegador. El formulario se ha organizado en una tabla con dos colum-
nas, una para las etiquetas y otra para los campos, que aparecen todos
alineados por el margen izquierdo. Aunque la página ha variado poco,
ahora el formulario tiene una apariencia más elegante y es más fácil de
usar, ya que se identiﬁca con una mayor facilidad la posición de cada
campo del formulario.

Consejo
No utilices tablas para maquetar y alineas los controles de un formulario. En
su lugar se debe utilizar CSS. Si utilizas una tabla para maquetar, no utilices
las etiquetas <th>, <thead>, <tbody>, <tfoot> y <caption>.

Para evitar problemas de accesibilidad cuan-

do se maqueta mediante una tabla, añade el
atributo role=”presentation” de WAI-
ARIA4 a la etiqueta <table>:
<table role=”presentation”>

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Formulario organizado con una tabla</title>
</head>
<body>
<form action=”procesa.asp” method=”post”>
<table>
<tr>
<td>Nombre empresa:</td>
<td><input type=”text” name=”nombreempresa” size=”40” /></td>

© Alfaomega - Altaria 277

HTML & CSS

</tr>
<tr>
<td>Nombre:</td>
<td><input type=”text” name=”nombre” size=”20” /></td>
</tr>
<tr>
<td>Apellidos:</td>
<td><input type=”text” name=”apellidos” size=”30” /></td>
</tr>
<tr>
<td>Sexo:</td>
<td><input type=”radio” name=”sexo” value=”H” /> Hombre
<input type=”radio” name=”sexo” value=”M” /> Mujer
</td>
</tr>
<tr>
<td>Dirección:</td>
<td><input type=”text” name=”direccion” size=”40” /></td>
</tr>
<tr>
<td>Población:</td>
<td><select name=”poblacion”>
<option value=”1”>Alicante</option>
<option value=”2”>Castellón</option>
<option value=”3”>Valencia</option>
</select>
</td>
</tr>
<tr>
<td>Deportes:</td>
<td><select name=”deportes” multiple=”multiple”>
<option value=”1”>Fútbol</option>
<option value=”2”>Páddel</option>
<option value=”3”>Tenis</option>
</select>
</td>
</tr>
<tr>

278 © Alfaomega - Altaria

Curso práctico avanzado

<td>Música:</td>
<td><select name=”musica” multiple=”multiple”>
<option value=”1”>Clásica</option>
<option value=”2”>Pop</option>
<option value=”3”>Rock</option>
</select>
</td>
</tr>
<tr>
<td><input type=”submit” /></td>
<td><input type=”reset” /></td>
</tr>
</table>
</form>
</body>
</html>
Listado 49: Ejemplo de formulario maquetado con una tabla

Figura 155: Ejemplo de formulario maquetado con una tabla con alineación a la izquierda

Otra forma típica de organizar las etiquetas de los campos es con

alineación a la derecha, tal como se puede ver en la Figura 156. Esto se
puede lograr añadiendo el atributo align=”right” a las etiquetas <td>
de las celdas que se quieren alinear. Por ejemplo, en el siguiente frag-
mento de código extraído del Listado 49 se ha añadido el atributo align
a las celdas con el contenido “Nombre empresa” y “Nombre”:

© Alfaomega - Altaria 279

HTML & CSS

<tr>
<td align=”right”>Nombre empresa:</td>
<td><input type=”text” name=”nombreempresa” size=”40” /></td>
</tr>
<tr>
<td align=”right”>Nombre:</td>
<td><input type=”text” name=”nombre” size=”20” /></td>
</tr>

Figura 156: Ejemplo de formulario maquetado con una tabla con alineación a la derecha

Consejo
Se recomienda la colocación de las etiquetas de los campos por encima de los
campos de texto correspondientes. Aunque esto aumenta la longitud total del
formulario, hace que el formulario sea más fácil de explorar, ya que los usuarios
pueden ver el campo de texto en la misma posición que la etiqueta. La posición
superior también permite que las etiquetas de los campos sean más largos, ya que
el espacio horizontal no es un problema.
Fuente: Form Design Quick Fix: Group Form Elements Eﬀectively
Using White Space, Nielsen Norman Group

http://www.nngroup.com/articles/form-design-white-space/

Sin embargo, esta solución presenta un problema importante, ya que

en HTML5 el atributo align en una tabla es obsoleto, ya no se debe
emplear. El validador oﬁcial del W3C indica que el código del Listado 49
presenta ocho errores, tal como se puede ver en la Figura 157.

280 © Alfaomega - Altaria

Curso práctico avanzado

Figura 157: Validación de un formulario maquetado con una tabla

Los ocho errores detectados se corresponden con las ocho veces que
se ha añadido el atributo align=”right”, tal como se puede ver en la
Figura 158.

Figura 158: Mensajes de error de la validación de un formulario maquetado con una tabla

© Alfaomega - Altaria 281

12
Multimedia

El término multimedia se reﬁere a la utilización de múltiples medios,

como texto, imágenes, animación, audio o vídeo para transmitir informa-
ción. Las páginas web pueden ser multimedia porque en una misma pá-
gina web se pueden combinar diferentes recursos en diferentes formatos.
Los objetivos de este capítulo son:
• Explicar las nuevas etiquetas de HTML5 que permiten incluir ele-
mentos multimedia en una página web.
En este capítulo se explican las etiquetas: <audio>, <source>,
<track> y <video>.
En las versiones anteriores de HTML5 no existía un método nativo
para incluir elementos multimedia, como vídeo o audio, en una página
web. Para ello se debían utilizar soluciones de terceros mediante una
extensión o complemento (plug-in) como Adobe Flash o applets realizados
en Java. Esta situación ha cambiado radicalmente en HTML5, ya que
esta nueva versión del lenguaje proporciona métodos estandarizados
para reproducir un vídeo o un audio en una página web.

Vídeo
Antes de HTML5 no existía un método estándar para reproducir un
vídeo en una página web. HTML5 añade la etiqueta <video> que permite
reproducir un vídeo en una página web sin necesidad de una extensión
o complemento.
© Alfaomega - Altaria 283
HTML & CSS

Esta etiqueta posee los atributos:

• autoplay: indica si la reproducción del vídeo debe comenzar en
cuanto sea posible.
• controls: especifica si los controles de reproducción, como los
botones de inicio/paro o de avance/retroceso, se deben mostrar.
• height: indica la altura del reproductor del vídeo.
• loop: indica si la reproducción del vídeo debe comenzar de forma
automática cada vez que termine.
• muted: especifica que la salida del audio del vídeo debe ser silen-
ciada.
• poster: especifica una imagen que se muestra mientras el vídeo
se descarga o hasta que el usuario pulse el botón de inicio.
• preload: indica si la carga del audio se debe realizar antes de que
sea necesaria su reproducción.
• src: indica la URL del fichero de vídeo.
• width: indica la anchura del reproductor del vídeo.
A mediados del año 2010, YouTube comenzó a dar soporte a la eti-
queta <video> en su reproductor de vídeos75. Para que se utilizase esta
etiqueta, el usuario debía activar su funcionamiento en las opciones de
YouTube. Sin embargo, desde enero de 2015, YouTube utiliza la etiqueta
<video> por defecto para reproducir los vídeos76.
En la página web “Reproductor de vídeo HTML5 de YouTube”77 se pue-
de comprobar la compatibilidad de los navegadores web con la etiqueta
<video>. Por ejemplo, en la Figura 159 se muestra la compatibilidad del
reproductor de vídeo HTML5 de YouTube y el navegador Google Chrome.
Este navegador es compatible con todas las características del reproduc-
tor de YouTube.

75 Disponible en http://youtube-eng.blogspot.com/2010/06/ﬂash-and-html5-tag_29.html
76 Disponible en http://youtube-eng.blogspot.com/2015/01/youtube-now-defaults-to-html5_27.html
77 Disponible en https://www.youtube.com/html5?hl=es-419

284 © Alfaomega - Altaria

Curso práctico avanzado

Figura 159: Compatibilidad del reproductor de vídeo HTML5 en Google Chrome 40

En la Figura 160 se muestra la compatibilidad del navegador Microsoft

Internet Explorer con el reproductor de YouTube. Este navegador no es
compatible con dos de las características:
• WebM VP8: un códec de vídeo de código abierto.
• MSE & WebM VP9: Media Source Extensions78, una extensión de
HTML que permite la interacción desde JavaScript, y WebM VP9,
la siguiente versión del códec VP8.

Figura 160: Compatibilidad del reproductor de vídeo HTML5 en Microsoft Internet Explorer 11

78 Disponible en http://www.w3.org/TR/media-source/

© Alfaomega - Altaria 285

HTML & CSS

Tal como se puede ver en la Figura 161 que muestra la tabla de com-
patibilidad que existe en Can I use…?79, los navegadores web más popu-
lares como Microsoft Internet Explorer, Mozilla Firefox, Google Chrome
y Safari soportan la etiqueta <video>.

Figura 161: Compatibilidad de la etiqueta <video> con los navegadores actuales

La etiqueta <source> se emplea para indicar múltiples recursos mul-

timedia en diferentes formatos para la etiqueta <video>. Cuando se usa
la etiqueta <source>, el navegador web reproduce la primera pista de
vídeo con un formato que reconozca. Por tanto, es muy importante el
orden de la etiqueta <source> dentro de la etiqueta <video>.

<video>, <source> y <track> son

etiquetas nuevas de HTML5.

En la actualidad, los navegadores web más populares soportan tres

formatos de vídeo para la etiqueta <video>: MP4, WebM y OGG. En la
Tabla 11 se muestran los formatos de vídeo que soporta cada navegador.
Cada formato ofrece diferentes niveles de compresión y calidad.

79 Disponible en http://caniuse.com/#search=video

286 © Alfaomega - Altaria

Curso práctico avanzado

Navegador MP4 WebM OGG

Microsoft Internet Explorer Sí No No
Google Chrome Sí Sí Sí
Mozilla Firefox Sí Sí Sí
Safari Sí No No
Opera Sí Sí Sí
Tabla 11: Formatos de vídeo soportados por los navegadores actuales

La etiqueta <video> también admite el uso de la etiqueta <track>

que permite definir una pista de texto con información adicional. Esta
etiqueta se puede emplear para definir subtítulos o descripciones u otro
tipo de metadatos a un vídeo. Esta etiqueta posee los atributos:
• default: pista por defecto que se debe emplear si el usuario no
selecciona otra pista.
• kind: tipo de pista, puede ser captions, chapters, descriptions,
metadata y subtitles.
• label: especifica el título de la pista.
• src: URL del fichero con la pista.
• srclang: el idioma de la pista.

La etiqueta <track> ayuda a mejorar la

accesibilidad de los vídeos porque permite
añadir subtítulos.

• En la Figura 162 se muestra la tabla de compatibilidad de la

etiqueta <track> que existe en Can I use…?80. Por ahora, sólo el
navegador Safari y la versión beta de Edge, el nuevo navegador
de Microsoft que va a reemplazar a Internet Explorer soportan
esta etiqueta.

80 Disponible en http://caniuse.com/#search=video

© Alfaomega - Altaria 287

HTML & CSS

Figura 162: Compatibilidad de la etiqueta <track> con los navegadores actuales

En el Listado 50 se muestra un ejemplo de uso de la etiqueta <video>.

Dentro de la etiqueta <video> se han puesto dos etiquetas <source>
para indicar un archivo de vídeo en formato MP4 y otro en formato OGG.

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Prueba de la etiqueta video</title>
</head>
<body>
<h1>Ejemplo de video</h1>
<video width=”320” height=”240” controls=”controls” poster=”small.png”>
<source src=”small.mp4” type=”video/mp4”>
<source src=”small.ogv” type=”video/ogg”>
El navegador no soporta la etiqueta video.
</video>
</body>
</html>
Listado 50: Ejemplo de uso de la etiqueta <video>

288 © Alfaomega - Altaria

Curso práctico avanzado

En la Figura 163 se puede ver cómo se muestra el ejemplo del Lista-

do 50 en el navegador Google Chrome. La etiqueta <video> no tiene el
atributo autoplay, así que la reproducción del vídeo no se inicia auto-
máticamente, el usuario tiene que pulsar sobre el botón de inicio. Por
otro lado, sobre el vídeo se muestra una imagen a modo de carátula que
se han indicado con el atributo poster.

Figura 163: Reproducción de vídeo en Google Chrome

En la Figura 164 el ejemplo del Listado 50 visualizado con el navega-

dor Mozilla Firefox. Como se está usando la etiqueta <video>, el aspecto
visual de los controles del reproductor varía respecto a Google Chrome, ya
que cada navegador web proporciona su propio interfaz, aunque en todos
los casos se muestran los mismos controles: botón de inicio/pausa, barra
de deslizamiento para avanzar/retroceder, contador de tiempo, botón de
silencio, control de volumen y botón para visualizar a pantalla completa.

Figura 164: Reproducción de video en Mozilla Firefox

Por otro lado, en la Figura 165 se muestra el mismo ejemplo visuali-

zado con el navegador Microsoft Internet Explorer.

© Alfaomega - Altaria 289

HTML & CSS

Figura 165: Reproducción de video en Microsoft Internet Explorer

Audio
Antes de HTML5 no existía un método estándar para reproducir un
audio en una página web. HTML5 añade la etiqueta <audio> que permite
reproducir un archivo de audio en una página web sin necesidad de una
extensión o complemento.
Esta etiqueta posee los atributos:
• autoplay: indica si la reproducción del audio debe comenzar en
cuanto sea posible.
• controls: especifica si los controles de reproducción, como los
botones de inicio/paro o de avance/retroceso, se deben mostrar.
• loop: indica si la reproducción del audio debe comenzar de forma
automática cada vez que termine.
• muted: especifica que la salida del audio debe ser silenciada.
• preload: indica si la carga del audio se debe realizar antes de que
sea necesaria su reproducción.
• src: indica la URL del fichero de audio.
Tal como se puede ver en la Figura 166 que muestra la tabla de com-
patibilidad que existe en Can I use…?81, los navegadores web más popu-
lares como Microsoft Internet Explorer, Mozilla Firefox, Google Chrome
y Safari soportan esta etiqueta.

81 Disponible en http://caniuse.com/#search=audio

290 © Alfaomega - Altaria

Curso práctico avanzado

Figura 166: Compatibilidad de la etiqueta <audio> con los navegadores actuales

La etiqueta <source> se emplea para indicar múltiples recursos mul-

timedia en diferentes formatos para la etiqueta <audio>. Cuando se usa
la etiqueta <source>, el navegador web reproduce la primera pista de
audio con un formato que reconozca. Por tanto, es muy importante el
orden de la etiqueta <source> dentro de la etiqueta <audio>.

<audio> y <source> son etiquetas nuevas

de HTML5.

En la actualidad, los navegadores web más populares soportan tres

formatos de audio para la etiqueta <audio>: MP3, WAV y OGG. En la
Tabla 12 se muestran los formatos de audio que soporta cada navegador,
las diferencias que existen se deben en parte a la aplicación de algunas
patentes sobre los formatos de audio indicados. Cada formato ofrece
diferentes niveles de compresión y calidad.

© Alfaomega - Altaria 291

HTML & CSS

Navegador MP3 WAV OGG

Microsoft Internet Explorer Sí No No
Google Chrome Sí Sí Sí
Mozilla Firefox Sí Sí Sí
Safari Sí Sí No
Opera Sí Sí Sí
Tabla 12: Formatos de audio soportados por los navegadores actuales

El formato MP3 es aceptado por todos los navegadores web actuales,

por lo que es el formato que se recomienda utilizar para lograr la máxima
compatibilidad.
En el Listado 51 se muestra un ejemplo de uso de la etiqueta <audio>.
Dentro de la etiqueta <audio> se han puesto dos etiquetas <source>
para indicar un archivo de audio en formato OGG y MP3.

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Prueba de la etiqueta audio</title>
</head>
<body>
<h1>Ejemplo de audio</h1>
<audio controls=”controls” autoplay=”autoplay”>
<source src=”pachebelcanon.ogg” type=”audio/ogg”>
<source src=”pachebelcanon.mp3” type=”audio/mpeg”>
El navegador no soporta la etiqueta audio.
</audio>
</body>
</html>
Listado 51: Ejemplo de uso de la etiqueta <audio>

En la Figura 167 se puede ver cómo se muestra el reproductor de

audio en Google Chrome. El reproductor incluye un botón de inicio/
pausa, una barra de desplazamiento para avanzar y retroceder en el
ﬁchero, un botón para silenciar el audio y otra barra de desplazamiento
para modiﬁcar el volumen.

292 © Alfaomega - Altaria

Curso práctico avanzado

Figura 167: Reproducción de audio en Google Chrome

En la Figura 168 se puede ver cómo se muestra el ejemplo del Listado

51 en el navegador Mozilla Firefox. En este navegador, el reproductor de
audio muestra los mismos controles que en Google Chrome.

Figura 168: Reproducción de audio en Mozilla Firefox

En la Figura 169 se puede ver cómo se muestra el reproductor de

audio en Microsoft Internet Explorer. Los controles son los mismos que
se han visto en Google Chrome y Mozilla Firefox, aunque su apariencia
visual cambia de forma signiﬁcativa.

Figura 169: Reproducción de audio en Microsoft Internet Explorer

Tal como se ve en la Tabla 12, los navegadores Google Chrome y

Mozilla Firefox sí que soportan el formato OGG, pero Microsoft Internet
Explorer no lo soporta. En la Figura 170 se muestra el mensaje de error
que aparece en Microsoft Internet Explorer cuando la etiqueta <audio>
sólo tiene un archivo de audio en formato OGG.

© Alfaomega - Altaria 293

HTML & CSS

Figura 170: Error al reproducir audio no soportado en Microsoft Internet Explorer

294 © Alfaomega - Altaria

PARTE III

CSS
13
Las hojas de
estilo en cascada

El lenguaje CSS (Cascading Style Sheets) permite deﬁnir la presentación

de las páginas web de forma independiente al contenido de las mismas.
Esta separación del contenido y la presentación aporta una gran cantidad
de ventajas, ya que facilita la propia definición de la Rep presentación
y hace mucho más fácil cambiar la presentación de una página web sin
afectar al contenido. Además, el correcto empleo de CSS permite lograr
que todas las páginas de un sitio web tengan la misma apariencia, ya
que permite centralizar la definición de la presentación en unos pocos
ficheros.
Los objetivos de este capítulo son:
• Entender la importancia de separar el contenido y la presentación
de una página web.
• Conocer las distintas formas de utilizar CSS en una página web.
• Aprender a utilizar los atributos class e id para asignar estilos.
• Aprender a validar una hoja de estilo.
En este capítulo se explican las propiedades de CSS: background-
color, color, font-size y font-weight.

Introducción
CSS es una recomendación del W3C que deﬁne un lenguaje formal que

© Alfaomega - Altaria 297

HTML & CSS

permite deﬁnir el estilo de presentación de las páginas web escritas en

HTML y también cualquier otro documento basado en XML. CSS se basa
en el empleo de reglas que establecen cómo se va a mostrar un documen-
to en la pantalla, cómo se va a imprimir en una hoja de papel o incluso
cómo va a ser pronunciada la información presente en ese documento a
través de un dispositivo de lectura como es un sintetizador de voz.
En CSS, los estilos como el color, el tipo de letra o los espacios en
blanco definen la presentación de los elementos como los párrafos, listas
e imágenes que componen una página web. El término en cascada tiene
un doble significado: por un lado, se pueden aplicar múltiples estilos que
se fusionan en uno solo y, por otro lado, los estilos se heredan de unos
elementos a otros siguiendo la estructura del documento HTML.
Las principales ventajas que aporta CSS frente a su no utilización son:
• Proporciona un mayor control sobre la presentación de la página
web: con CSS se pueden controlar características de la presen-
tación que no se pueden controlar únicamente con HTML. En
realidad, esta ventaja es un requisito obligatorio hoy en día, ya
que en las últimas versiones de HTML se han ido eliminando las
características del lenguaje que permitían definir la presentación
de la página web.
• Permite una separación del contenido y la presentación, lo cual
aporta numerosas ventajas, como se comentará más adelante en
este capítulo.
• Permite modificar la presentación de todo un sitio web modificando
unos pocos ficheros.

Evolución de CSS
La idea de emplear un lenguaje de estilos para definir la presentación
de las páginas web existió prácticamente desde el nacimiento de HTML,
pero no es hasta el año 1994 cuando Håkon Wium Lie, que trabajaba
con Tim Berners-Lee en el CERN, propuso el lenguaje de estilos que fi-
nalmente se estandarizó como CSS. Inicialmente se propusieron varios
lenguajes de estilos, pero finalmente la propuesta de Håkon Wium Lie
fue la que finalmente se impuso.

298 © Alfaomega - Altaria

Curso práctico avanzado

La primera versión de CSS, publicada en octubre de 199482, empleaba

una notación totalmente distinta a la actual, como se puede ver en el
Listado 52. Las propiedades se expresaban mediante una notación simi-
lar a la empleada en la programación orientada a objetos. Esta versión
de CSS incorporaba una característica muy interesante que todavía no
existe de forma nativa en la versión actual de CSS: la posibilidad de em-
plear referencias a valores deﬁnidos en otro punto de la hoja de estilos83.

font.family = times
font.size = 12pt
font.slant = normal
font.weight = normal
h1.font.size = font.size * 3
h2.font.size = font.size * 2.5
h3.font.size = font.size * 2
strong.font.weight = bold
em.font.slant = italics
tt.font.spacing = proportional
Listado 52: Ejemplo de la sintaxis original de CSS

En 1996 se publicó la primera versión oﬁcial de CSS que empleaba la

sintaxis actual. El navegador Microsoft Internet Explorer 3 que apareció
ese año fue uno de los primeros navegadores que soportó CSS, aunque
de forma muy limitada. A partir de ahí, los navegadores más empleados
en aquella época, como Netscape Navigator y Opera, empezaron a incor-
porar un soporte parcial de CSS.

Más información
Si quieres saber más sobre los orígenes de CSS, consulta el capítulo 20 “La
saga de las CSS” del libro “Cascading Style Sheets, designing for the Web” dis-
ponible en http://www.spanish-translator-services.com/espanol/t/history.html

En la Tabla 13 se muestran las principales versiones de CSS que se

han desarrollado desde 1996. La última versión, CSS3, no está definido
de forma monolítica como las versiones anteriores, que estaban definidas
como una enorme y única especificación, sino que se define módulo a
módulo.

82 “Cascading HTML style sheets -- a proposal”, disponible en http://www.w3.org/People/howcome/p/cas-

cade.html
83 Existen extensiones a CSS, como Less, disponible en http://lesscss.org, que permiten el uso de un
preprocesador para analizar una hoja de estilo y sustituir las variables por sus valores reales.

© Alfaomega - Altaria 299

HTML & CSS

Fecha Versión
Diciembre 1996 CSS Level 1 Recommendation
Mayo 1998 CSS Level 2 Recommendation
Mayor 2001 Introduction to CSS3 (Working Draft)
Julio 2007 CSS Level 2.1 (Candidate Recommendation)
Abril 2008 CSS Level 1 Revised
Mayo 2011 CSS Snapshot 2010
Junio 2011 CSS 2.1 Recommendation
Junio 2011 CSS Color Module Level 3 Recommendation
Septiembre 2011 Selectors Level 3
Junio 2012 Media Queries
Tabla 13: Versiones de CSS

En la página ofﬁcial “CSS current work & how to participate”84 se

puede consultar el estado de estandarización de CSS. En la Figura 171
se muestra parte de la tabla en la que cada uno de los módulos de CSS
puede tener el siguiente estado de estandarización:
• WD (Working Draft): borrador de trabajo.
• LC (Last Call): última llamada.
• CR (Candidate Recommendation): recomendación candidata.
• PR (Proposed Recommendation): recomendación propuesta.
• REC (Recommendation): recomendación.

Figura 171: Estado de estandarización de CSS

84 Disponible en http://www.w3.org/Style/CSS/current-work

300 © Alfaomega - Altaria

Curso práctico avanzado

En CSS3, cada módulo añade nuevas características o extiende las

características ya deﬁnidas en las versiones anteriores de CSS, pero man-
teniendo la compatibilidad hacia atrás. El trabajo en CSS3 comenzó al
mismo tiempo que la publicación de la primera recomendación de CSS2.
Los primeros borradores se publicaron en junio de 1999 y su desarrollo
continúa en la actualidad. Debido a la modularización de CSS3, dife-
rentes módulos pueden encontrarse en diferentes estados de desarrollo.
En la Figura 17285 se resumen los módulos que componen CSS3 y su
estado de estandarización. En la fecha de creación de la imagen (octubre
de 2014), más de la mitad de los módulos de CSS3 todavía estaban en
estado borrador de trabajo (working draft).

Figura 172: Taxonomía y estado de estandarización de los módulos de CSS

Recuerda que la especiﬁcación de CSS3 está

dividida en diferentes módulos y cada módu-
lo tiene su propio proceso de estandarización.

85 Fuente: Cascading Style Sheets, disponible en http://en.wikipedia.org/wiki/Cascading_Style_Sheets

© Alfaomega - Altaria 301

HTML & CSS

Separación del contenido y la presentación

La aparición de CSS supuso un gran avance en el desarrollo de sitios
web, ya que ofrece ventajas muy importantes que se basan en la posibili-
dad de separar la presentación (estilo) del contenido de las páginas web:
• Permite unificar y controlar la presentación de todas las páginas
de un sitio web de forma centralizada.
• Permite controlar con más detalle la presentación de la página web.
• Permite modificar la presentación y el contenido por separado por
distintas personas en un equipo de trabajo.
• Permite definir distintas presentaciones para el mismo contenido.
• Permite reducir el peso de los sitios web y mejorar su carga en
los navegadores.
El lenguaje HTML permite definir diferentes presentaciones y diferentes
hojas de estilo para un mismo sitio web. Por ejemplo, en la Figura 173
se muestra una página web86 con su estilo normal. La presentación de
esta página web se puede cambiar, ya que se permite al usuario elegir
diferentes estilos alternativos.

Figura 173: Estilo de presentación normal

86 Disponible en http://accesibilidadweb.dlsi.ua.es/

302 © Alfaomega - Altaria

Curso práctico avanzado

En la Figura 174 se presenta la misma página web con un estilo alter-

nativo en el que se han eliminado los colores, los cambios de tipo de letra,
los bordes y otros elementos decorativos. Además, la página no presenta
un diseño a dos columnas, sino un diseño basado en una única columna.

Figura 174: Estilo de presentación alternativo

En la Figura 175 y la Figura 176 se muestra la misma página web pero

con dos estilos alternativos accesibles que emplean una combinación de
colores de alto contraste, amarillo sobre negro y verde sobre negro, y un
tamaño de letra más grande de lo normal. Esta presentación es adecuada
para personas con baja visión.

Figura 175: Estilo de presentación alternativo

© Alfaomega - Altaria 303

HTML & CSS

Figura 176: Estilo de presentación alternativo

Consejo
Utilice colores para el texto y el fondo de alto contraste para que el texto sea
lo más legible posible.
Fuente: 113 Design Guidelines for Homepage Usability, Jakob Nielsen

http://www.nngroup.com/articles/113-design-guidelines-homepage-usability/

Además, también se pueden deﬁnir presentaciones diferentes para

diferentes dispositivos. Por ejemplo, en la Figura 177 y la Figura 178 se
muestra la misma página web visualizada mediante Opera Mobile Emu-
lator87, que simula la visualización de cada una de ellas en un dispositivo
móvil como un teléfono móvil o una tableta. En la Figura 177 se muestra
la página web con una orientación vertical, y en la Figura 178 con una
orientación horizontal. En ambos casos, su presentación de la página
web se modiﬁca automáticamente para que se visualice de una forma
más adecuada para una pantalla de pequeñas dimensiones.

87 Disponible en http://www.opera.com/es/developer/mobile-emulator

304 © Alfaomega - Altaria

Curso práctico avanzado

Figura 177: Estilo de presentación para dispositivo móvil, orientación vertical

Figura 178: Estilo de presentación para dispositivo móvil, orientación horizontal

© Alfaomega - Altaria 305

HTML & CSS

Conceptos básicos de CSS

Una hoja de estilo CSS se compone de un conjunto de reglas que
definen la presentación de los diferentes elementos que componen una
página web.
Una regla de CSS se compone de un selector y un conjunto de parejas
propiedad/valor que definen una característica del elemento de la página
web seleccionado con el selector. En la Figura 179 se resume gráfica-
mente la estructura general de una regla de CSS. En este ejemplo, el
selector es el elemento h1 (encabezado de nivel 1), lo que significa que
esta regla se aplicará a todos los elementos h1 de la página. El conteni-
do de la regla se escribe encerrado entre llaves “{…}”. La regla posee dos
propiedades separadas por el separador, que es un punto y coma. La
primera propiedad font-weight define el peso del tipo de letra. En este
ejemplo toma el valor bolder, que significa que se quiere aumentar el
peso de la tipografía. La segunda propiedad background define el color
de fondo88 del elemento. En este ejemplo toma el valor #00FF00 que re-
presenta el color verde.

Figura 179: Estructura general de una regla de CSS

Las reglas de CSS se pueden escribir en una sola línea, pero también se
pueden escribir en varias líneas. Por ejemplo, la regla que se muestra en
la Figura 179 se puede también escribir como se muestra a continuación:

h1 {
font-weight: bolder;
background: #00FF00;
}

88 El color de fondo de un elemento también se puede deﬁnir con la propiedad background-color.

306 © Alfaomega - Altaria

Curso práctico avanzado

Consejo
La última regla no necesita el separador (el punto y coma), ya que no hay una
regla a continuación, pero es una buena práctica escribir siempre el separador.

Más información
https://youtu.be/7aAsXtFzNH8

Qué es CSS, versiones de CSS,

esquema de una regla de CSS.

Cómo aplicar los estilos

Existen tres métodos de aplicar los estilos CSS en una página web:
• En línea.
• Embebido.
• Externo.

Consejo
Intenta utilizar siempre el estilo externo, ya que ofrece la máxima separación
del contenido y la presentación y permite la reutilización de la hoja de estilo
en diferentes páginas web.

En el modo en línea, se asigna el estilo dentro de la etiqueta HTML con

el atributo style. Por ejemplo, el Listado 53 muestra una página web
sencilla que contiene dos párrafos (elemento <p>) con el atributo style
con el valor font-size: 10px;. Este estilo cambia el tamaño por defecto
del texto dentro del párrafo a un tamaño de 10 píxeles.

© Alfaomega - Altaria 307

HTML & CSS

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Una página web con estilo en línea</title>
</head>
<body>
<p style=”font-size: 10px;”>Párrafo con texto tamaño 10px.</p>
<p style=”font-size: 10px;”>Otro párrafo con texto tamaño 10px.</p>
</body>
</html>
Listado 53: Ejemplo de página web con estilo en línea

El uso del estilo en línea no está recomendado para aplicar estilos a

todo el documento porque se debe escribir el estilo en cada uno de los
elementos que se quiere modificar, lo cual conlleva dos inconvenientes
muy importantes:
• Incrementa el tamaño del documento: en el ejemplo anterior se
ha escrito dos veces la regla font-size: 10px;.
• Dificulta el mantenimiento y modificación de los estilos: en el
ejemplo anterior, si se quiere modificar el tamaño de los párrafos,
se tienen que modificar dos líneas de la página.

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Una página web con estilo en línea</title>
</head>
<body>
<p style=”font-size: 10px; color: red;”>Párrafo con texto tamaño 10px y color
rojo.</p>
<p style=”font-size: 10px; color: blue;”>Otro párrafo con texto tamaño 10px
y color azul.</p>
</body>
</html>
Listado 54: Ejemplo de página web con estilo en línea

308 © Alfaomega - Altaria

Curso práctico avanzado

En el atributo style se pueden escribir varias reglas de CSS sepa-

radas por punto y coma. Por ejemplo, en el Listado 54 se ha añadido
la propiedad color89 para definir el color del texto: el primer párrafo se
muestra con color rojo y el segundo párrafo con color azul.
En el modo embebido, los estilos se definen en la cabecera de la página
web (<head>) con el elemento <style>. Para ello, en las reglas de CSS
se emplean selectores que seleccionan las partes de la página web que
se quieren modificar. Los diferentes tipos de selectores se explican en un
capítulo posterior. Por ejemplo, el Listado 55 muestra una página similar
a la definida en el Listado 53, pero el estilo se ha definido en la cabecera
con la regla de CSS p {font-size: 10px;}. El selector empleado es
p, que selecciona todos los párrafos de la página. Con este modo se re-
duce el código y se facilita el mantenimiento y modificación del código,
ya que si se desea cambiar el tamaño del texto de los párrafos sólo se
tiene que hacer en un punto del código de la página. Sin embargo, si se
quiere emplear el mismo estilo en diferentes páginas se debe copiar todo
el contenido de <style> en cada página.

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Una página web con estilo embebido</title>
<style>
p { font-size: 10px;}
</style>
</head>
<body>
<p>Párrafo con texto tamaño 10px.</p>
<p>Otro párrafo con texto tamaño 10px.</p>
</body>
</html>
Listado 55: Ejemplo de página web con estilo embebido

En el modo externo, los estilos se deﬁnen en un ﬁchero externo y luego

se emplea el elemento <link> para insertar el ﬁchero externo dentro de
cada documento que los necesite. Este modo ofrece importantes ventajas
y por eso es el que se recomienda utilizar:

89 El color de un elemento se deﬁne con la propiedad color (color en inglés americano), no se puede
utilizar colour (color en inglés británico).

© Alfaomega - Altaria 309

HTML & CSS

• Permite cambiar completamente el estilo de una página web sim-

plemente cambiando el fichero de estilos, sin tener que modificar
la página web.
• Permite modificar la presentación de todas las páginas de un sitio
web simplemente modificando un fichero, ya que todas las pági-
nas de un sitio web (o incluso de diferentes sitios web) pueden
compartir el mismo fichero de estilos.
• Reduce el tiempo de carga de las páginas de un sitio web, ya que
el fichero de estilos se puede descargar una única vez y almacenar
en la caché del navegador del usuario.
Por ejemplo, el Listado 56 muestra una página similar a los ejemplos
anteriores. Pero en este ejemplo los estilos se encuentran definidos en un
fichero externo llamado estilos.css que se referencia con el elemento
<link>.

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Una página web con estilo externo</title>
<link rel=”stylesheet” href=”estilos.css” />
</head>
<body>
<p>Párrafo con texto tamaño 10px.</p>
<p>Otro párrafo con texto tamaño 10px.</p>
</body>
</html>
Listado 56: Ejemplo de página web con estilo externo

Recuerda que en HTML el orden de los atributos no es importante, por lo que

también se podría haber escrito el elemento <link> de la siguiente forma:

<link href=”estilos.css” rel=”stylesheet” />

310 © Alfaomega - Altaria

Curso práctico avanzado

El contenido del ﬁchero estilos.css se muestra en el Listado 57. El ﬁchero

contiene una única regla de CSS que modiﬁca el tamaño del texto de los pá-
rrafos de la página.

p { font-size: 10px;}
Listado 57: Fichero estilos.css

En las versiones anteriores a CSS3 se tenía que

indicar el tipo de lenguaje empleado para crear
la hoja de estilo con el atributo type:
<link rel=”stylesheet” href=”esti-
los.css” type=”text/css” />
En CSS3 se puede seguir haciendo, pero ya no es
obligatorio porque toma como valor por defecto
“text/css”. Por tanto, ahora se puede escribir
simplemente:
<link rel=”stylesheet”
href=”estilos.css” />
Evidentemente, es posible combinar las tres formas de definir los estilos
CSS en una página web, pero no es una buena práctica. Por ejemplo, en
el Listado 58 se han definido los siguientes estilos:
• El primer párrafo tiene definido el color rojo con style=”color:
red;”.
• El segundo párrafo tiene definido el color azul con style=”color:
blue;”.
• Los dos párrafos tienen definido un tamaño del texto de 10 píxeles
con la regla p {font-size: 10px;} definida con un elemento
<style>.
• Los dos párrafos tienen definido el estilo negrita con la regla p
{font-weight: bold;} definida en una hoja de estilo externa
con el elemento <link> (Listado 59).

© Alfaomega - Altaria 311

HTML & CSS

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Una página web con estilo externo</title>
<link rel=”stylesheet” href=”estilos.css” />
<style>
p { font-size: 10px;}
</style>
</head>
<body>
<p style=”color: red;”>Párrafo con texto tamaño 10px y color rojo.</p>
<p style=”color: blue;”>Otro párrafo con texto tamaño 10px y color azul.</p>
</body>
</html>
Listado 58: Ejemplo de página web con las tres formas de deﬁnir los estilos CSS

El contenido del ﬁchero estilos.css se muestra en el Listado 59. El ﬁchero

contiene una única regla de CSS que modiﬁca el estilo del texto con la propie-
dad font-weight.

p { font-weight: bold;}
Listado 59: Fichero estilos.css

Más información
https://youtu.be/pXttPcKkPzg

El acoplamiento en un sistema
informático, las tres formas de
usar CSS en HTML, el atributo
style, demostración de uso.

312 © Alfaomega - Altaria

Curso práctico avanzado

https://youtu.be/TwYfHrTUrFE

La etiqueta style, demostración

de uso.

https://youtu.be/Y4BAwYR-wBc

La etiqueta link, demostración

de uso.

Comentarios
En el modo embebido y el modo externo se pueden incluir comentarios
con la sintaxis /* Comentario */. Un comentario puede ocupar una
o varias líneas de código, ya que el delimitador de cierre de comentario
*/ se puede situar en una línea diferente al delimitador de apertura de
comentario /*. Los comentarios no se procesan y no producen una salida
visible en la página web.
Por ejemplo, el Listado 60 contiene dos reglas de CSS que modiﬁcan
el tamaño del texto y el color de un párrafo. La segunda regla está co-
mentada para realizar pruebas de cómo se visualiza la página web con
una regla o con la otra.

© Alfaomega - Altaria 313

HTML & CSS

p{
font-size: 10px;
color: blue;
}
/*
p{
font-size: 20px;
color: red;
}
*/
Listado 60: Código CSS con comentario

Consejo
Emplea los comentarios de CSS para clariﬁcar la estructura de la hoja de es-
tilos: utiliza los comentarios para separar distintas partes del código.
También puedes emplear los comentarios para desactivar temporalmente
alguna parte de la hoja de estilo para realizar pruebas sin tener que borrar
esa parte del código.

Estilos para diferentes dispositivos

Para indicar que se está usando un fichero CSS en una página web
se emplea la etiqueta <link>. Es una misma página web se pueden in-
dicar varios ficheros CSS que se combinan todos ellos para producir el
resultado final, o también se puede indicar de forma que definan estilos
alternativos que se emplean de forma independiente.
Los estilos alternativos se pueden definir para un mismo dispositivo
o se pueden definir para distintos dispositivos (ordenador, impresora,
teléfono móvil y otros dispositivos). Para definir un dispositivo concreto
se emplea el atributo media; si no se indica un dispositivo, el estilo CSS
se aplica a todos los dispositivos, ya que el atributo toma el valor por de-
fecto all: equivale a que el desarrollador de la página web haya incluido
media=”all” en la etiqueta <link>.
Por ejemplo, en el siguiente código se define un estilo CSS que se debe
emplear cuando se imprima una página web (media=”print”) y un estilo
que se debe emplear cuando se visualiza en pantalla (media=”screen”):

314 © Alfaomega - Altaria

Curso práctico avanzado

<link rel=”stylesheet” href=”home.css” media =”screen” />

Por ejemplo, en la Figura 180 se muestra una página web con una
noticia del periódico El País90. Además de la noticia, en la página web
existen muchos elementos adicionales como diferentes barras de nave-
gación, un cuadro de texto para realizar búsquedas, un panel con las
últimas noticias, etc. Todos estos elementos son útiles cuando la noticia
se visualiza en una página web, pero no cuando la noticia se imprime
en papel.

Figura 180: Noticia del periódico El País

En la Figura 181 se muestra parte del código HTML de la página an-

terior. En el código HTML se han destacado las dos siguientes líneas:

<link href=”http://ep01.epimg.net/estilos/v1.x/v1.2/imprimir.css” rel=”-

stylesheet” media=”print” />
<link href=”http://ep01.epimg.net/tecnologia/estilos/v1.x/v1.2/imprimir.css”
rel=”stylesheet” media=”print” />

Estas dos líneas deﬁnen los estilos CSS que se deben emplear cuando
la página web se imprima (media=”print”).

90 Disponible en http://elpais.com/

© Alfaomega - Altaria 315

HTML & CSS

Figura 181: Código HTML de una noticia del periódico El País

Un navegador web moderno es capaz de seleccionar automáticamente

el estilo deﬁnido para la impresora cuando se manda a imprimir una
página web. Por ejemplo, en la Figura 182 se muestra la vista previa de
impresión en Google Chrome de la noticia mostrada en la Figura 180;
se pude apreciar que muchos elementos de la página web desaparecen
al imprimir la página.

Figura 182: Vista previa de impresión de una noticia del periódico El País

316 © Alfaomega - Altaria

Curso práctico avanzado

La versión impresa de una página web no es la página web en sí mis-

ma: los enlaces y los botones no funcionan. Además, es muy normal
que una página web no se imprima en color. Por tanto, para lograr una
correcta versión impresa de una página web es aconsejable aplicar los
siguientes consejos:
• Cambia los colores a negro sobre un fondo blanco.
• Cambia el tipo de letra a serif.
• Cambia el tamaño del texto (mínimo 12pt).
• Destaca los enlaces: utiliza el subrayado y un color diferente.
• Elimina los elementos que no sean esenciales, como las imágenes.
• Elimina los elementos de navegación (por ejemplo, la barra de
navegación o el buscador).
• Elimina los elementos dinámicos generados por JavaScript, Java
o Flash.
• Incluye la URL de la página.
• Incluye un aviso sobre los derechos de uso (copyright).
¿Cómo se puede comprobar el estilo desarrollado para impresión sin
tener que imprimir la página web? Hay dos posibilidades:
• Puedes añadir un estilo alternativo para la pantalla que haga uso
del estilo para impresión. Los estilos alternativos se explican en
la siguiente sección.
• Puedes utilizar la opción de “Vista preliminar” o “Vista previa de im-
presión” que ofrecen los navegadores para visualizar en pantalla
una visualización previa de cómo se va a imprimir la página web.

Estilos alternativos
HTML permite deﬁnir estilos alternativos de presentación de una
página web no sólo para diferentes dispositivos, sino para el mismo
dispositivo.
Cuando se deﬁnen estilos alternativos con rel=”alternate styles-
heet” para un mismo dispositivo, es necesario indicar un nombre para
cada estilo alternativo con el atributo title. Pueden existir varias hojas
de estilo con el mismo nombre, en cuyo caso se aplicarán todas ellas en

© Alfaomega - Altaria 317

HTML & CSS

conjunto al elegir el nombre que las identiﬁca. Por ejemplo, el Listado

61 es un fragmento de una página web que define cuatro estilos CSS:
• Estilo principal, que emplea el fichero home.css.
• Estilo de alto contraste, que emplea el fichero contrast.css.
• Estilo de tamaño grande, que emplea el fichero big.css.
• Y el estilo de impresión (media=”print”), que emplea el fichero
print.css.

<link rel=”stylesheet” type=”text/css” href=”home.css” title=”Estilo principal”

/>
<link rel=”alternate stylesheet” type=”text/css” href=”contrast.css” title=”Estilo
de alto contraste” />
<link rel=”alternate stylesheet” type=”text/css” href=”big.css” title=”Estilo de
tamaño grande” />
<link rel=”stylesheet” type=”text/css” href=”print.css” media=”print” />
Listado 61: Ejemplo de estilos alternativos

No todos los navegadores modernos ofrecen la opción de seleccionar

un estilo alternativo. Google Chrome no posee esta opción, pero se puede
instalar la extensión Alt CSS91, que añade un nuevo botón al navegador
web para seleccionar un estilo alternativo.
Microsoft Internet Explorer incorpora la opción de seleccionar un estilo
alternativo desde hace varias versiones. En la Figura 183 se muestra
como seleccionar un estilo alternativo en este navegador a través del
menú “Ver”, “Estilo”. En este ejemplo se muestran los estilos alternativos
de la versión anterior de la página personal92 del autor de este libro y que
se muestran en el Listado 62.

91 Disponible en https://chrome.google.com/webstore/detail/alt-css/deaodobjfcolfhkecnnghdclnlmfjdje
92 Disponible en http://gplsi.dlsi.ua.es/~slujan/version-anterior.html

318 © Alfaomega - Altaria

Curso práctico avanzado

<link rel=”stylesheet” type=”text/css” media=”all” href=”css/estilo01.css”

title=”Normal” />
<link rel=”alternate stylesheet” type=”text/css” media=”all” href=”css/estilo02.
css” title=”Alternativo UA” />
<link rel=”alternate stylesheet” type=”text/css” media=”all” href=”css/estilo03.
css” title=”Columnas ﬂotantes” />
<link rel=”alternate stylesheet” type=”text/css” media=”all” href=”css/estilo04.
css” title=”Todo junto” />
Listado 62: Ejemplo de deﬁnición de estilos alternativos

Figura 183: Selección de estilos alternativos en Microsoft Internet Explorer 11

Como se puede apreciar, existe una correspondencia entre los títulos

de los estilos deﬁnidos con el atributo title y lo que se visualiza en
Microsoft Internet Explorer.
En la Figura 184 se muestra cómo seleccionar un estilo alternativo en
Mozilla Firefox a través del menú “Ver”, “Estilo de página”. Dentro de este
menú aparece la lista de los estilos alternativos, deﬁnidos en la página.
Además de los estilos alternativos también existe la opción “Sin estilo”
para visualizar la página web sin ningún tipo de estilo CSS.

© Alfaomega - Altaria 319

HTML & CSS

Figura 184: Selección de estilos alternativos en Mozilla Firefox 36

Estilos persistente, preferido y alternativo

En CSS existen tres tipos de hojas de estilo:
• Estilo persistente: el atributo rel toma el valor stylesheet y el
atributo title no tiene valor. La hoja de estilo se aplica en todas
las situaciones.
• Estilo preferido: el atributo rel toma el valor stylesheet y el
atributo title tiene un valor. La hoja de estilo se aplica a menos
que el usuario elija una hoja de estilo alternativa.
• Estilo alternativo: el atributo rel toma el valor alternate styles-
heet y el atributo title tiene un valor. La hoja de estilo se aplica
cuando el usuario la selecciona explícitamente; las hojas de estilo
alternativas son excluyentes entre sí: sólo se puede aplicar una.
Lo anterior se aplica para cada dispositivo, es decir, una hoja de es-
tilo es persistente para un dispositivo, pero no tiene por qué ser para
todos. Si se quiere que sea para todos, se tiene que emplear el atributo
media=”all”.

Cómo validar una hoja de estilo en cascada

Aunque el lenguaje CSS es muy sencillo de emplear, eso no signiﬁca
que las propiedades y valores se puedan escribir de cualquier forma:
existen una serie de reglas que deﬁnen la forma correcta de escribir el
320 © Alfaomega - Altaria
Curso práctico avanzado

código CSS.
Si se escribe mal el código CSS, normalmente la página web se visualizará
más o menos bien en la mayoría de los navegadores porque estos están
preparados para admitir errores, pero en algunos casos la presentación
de la página puede variar enormemente de un navegador a otro. Por tan-
to, para asegurar que una página web se visualiza correctamente, en la
mayoría de los navegadores es imprescindible escribir un código correcto.
Cuando se escribe el código CSS a mano, se puede utilizar la herra-
mienta “W3C CSS Validation Service”93 para comprobar que el código es
correcto.
En la Figura 185 se muestra la página principal de “W3C CSS Vali-
dation Service”. Este servicio ofrece tres modos de validar el CSS de una
página web:
• Mediante URI: permite validar una página web mediante la in-
troducción de su URL. Por tanto, la página web tiene que estar
publicada en Internet.
• Mediante carga de archivo: permite validar una página web mediante
la subida del ﬁchero correspondiente.
• Mediante entrada directa: permite validar una página web mediante
la introducción directa de su código.

Figura 185: Validador de CSS del W3C

93 Disponible en https://jigsaw.w3.org/css-validator/

© Alfaomega - Altaria 321

HTML & CSS

En la Figura 186 se muestra el resultado de validar el código del

Listado 63. Cuando el código es correcto se muestra en color verde el
mensaje “¡Enhorabuena! No error encontrado.” y la versión de CSS que
se ha validado.

body {
color: black;
background-color: white;
}
h1 {
font-size: 4em;
}
h2 {
font-size: 2em;
}
Listado 63: Ejemplo de CSS

Figura 186: Validación correcta del código CSS

Sin embargo, si el código contiene algún error, se muestra en color

rojo el mensaje “¡Disculpas! Hemos encontrado las siguientes errores”
(sic) junto con el número de errores encontrados. Además, también se
muestra la versión de HTML que se ha intentado validar.

322 © Alfaomega - Altaria

Curso práctico avanzado

Por ejemplo, el siguiente código CSS (Listado 64) contiene dos errores:
• En la línea 3, el valor whit no es un nombre de color correcto
para la propiedad background-color.
• En la línea 11, el valor em no es un valor correcto para la propie-
dad font-size.

body {
color: black;
background-color: whit;
}
h1 {
font-size: 4em;
}
h2 {
font-size: em;
}
Listado 64: Ejemplo de CSS con errores

En la Figura 187 se muestra el resultado de validar el código anterior.

Además de mostrar el número total de errores, se detallan uno por uno
los errores que contiene el código.

Figura 187: Validación incorrecta del código CSS

© Alfaomega - Altaria 323

HTML & CSS

Más información
Si quieres saber más sobre la importancia de emplear los estándares en el desa-
rrollo de las páginas web y los beneﬁcios que reporta, consulta la página web
de “The Web Standards Project” disponible en http://www.webstandards.org/

Lenguaje de estilo por defecto

En las versiones anteriores a HTML5, era necesario indicar el lenguaje
de estilo por defecto empleado en una página web. Esto se podía hacer
de dos formas, mediante un elemento <meta> o mediante un encabezado
HTTP enviado por el servidor web.
El lenguaje de estilo por defecto se puede deﬁnir mediante el elemento
<meta> de la siguiente forma:

<meta http-equiv=”Content-Style-Type” content=”text/css” />

El lenguaje de estilo por defecto también se puede deﬁnir mediante

un encabezado HTTP con la siguiente cabecera:

Content-Style-Type: text/css

Ambas formas son totalmente equivalentes. Para determinar cuál se

debe aplicar, los agentes de usuario (los navegadores) deben aplicar el
siguiente procedimiento, que va de mayor a menor prioridad:
1. Si algún elemento <meta> especifica el valor Content-Style-Type,
la última declaración que aparezca determina el lenguaje de estilo
por defecto.
2. Si no, si alguna cabecera HTTP especifica el valor Content-Style-
Type, la última declaración que aparezca determina el lenguaje
de estilo por defecto.
3. Si no, el lenguaje de estilo por defecto es “text/css”.
Por ejemplo, la página web que aparece en el Listado 65 contiene un
párrafo con un estilo definido con el atributo style. Al validar esta página
web, el validador del W3C94 indica que esta página no contiene errores,
pero Total Validator95 indica que existe el error “E650 The default style sheet
language must be speciϔied when style attributes are used”, tal como podemos ver
en la Figura 188.
94 Disponible en http://validator.w3.org/
95 Disponible en http://www.totalvalidator.com/

324 © Alfaomega - Altaria

Curso práctico avanzado

<?xml version=”1.0” encoding=”iso-8859-1”?>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml“ xml:lang=“es“ lang=“es“>
<head>
<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8” />
<title>Sin lenguaje de estilo por defecto</title>
</head>
<body>
<p style=”color: red”>
Un párrafo con el texto de color rojo.
</p>
</body>
</html>
Listado 65: Ejemplo página web sin lenguaje de estilo por defecto

Figura 188: Resultado de validar con Total Validator una página web sin lenguaje de estilo por defecto

Este error se puede solucionar añadiendo la siguiente línea en la ca-

becera de la página web:

<meta http-equiv=”Content-Style-Type” content=”text/css” />

© Alfaomega - Altaria 325

HTML & CSS

Con la etiqueta <meta> se indica el lenguaje de estilo por defecto que

se emplea en la página web. Tal como se puede ver en la Figura 189, una
vez añadida esta etiqueta el error de validación desaparece.

Figura 189: Resultado de validar con Total Validator una página web con lenguaje de estilo por defecto

Por otro lado, en las versiones de HTML anteriores a HTML5 era nece-
sario indicar el lenguaje de la hoja de estilo con el atributo type en los
elementos <style> y <link>. Sin embargo, a partir de HTML5 ya no es
necesario, porque se sobreentiende que es CSS.
Por ejemplo, en el Listado 66 se muestra el código fuente de una pá-
gina web escrita con XHTML 1.0 Strict. En la página existe un elemento
<style> que no incluye el atributo type. Cuando se valida esta página
con el validador del W3C96, el validador indica que la página contiene un
error, tal como se puede ver en la Figura 190.

96 Disponible en http://validator.w3.org/

326 © Alfaomega - Altaria

Curso práctico avanzado

<?xml version=”1.0” encoding=”utf-8”?>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml“ xml:lang=“es“ lang=“es“>
<head>
<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8” />
<title>Sin lenguaje de estilo por defecto</title>
<style>
p {color: red;}
</style>
</head>
<body>
<p>
Un párrafo con el texto de color rojo.
</p>
</body>
</html>
Listado 66: Ejemplo de página XHTML 1.0 sin el atributo type

Figura 190: Resultado de validar la página XHTML 1.0 sin el atributo type

En la Figura 191 se muestra el mensaje de error de la validación. El

mensaje indica que el elemento <style> carece del atributo type con el
valor “text/css”.

© Alfaomega - Altaria 327

HTML & CSS

Figura 191: Mensaje de error de la validación de la página XHTML 1.0 sin el atributo type

Sin embargo, este error no se produce en HTML5, ya que en HTML5

el atributo type no es obligatorio. En el Listado 67 se muestra la mis-
ma página que la del Listado 66, pero se ha modiﬁcado para que sea
HTML5. Como se puede ver en la Figura 192, esta página sí que valida
correctamente.

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Sin lenguaje de estilo por defecto</title>
<style>
p {color: red;}
</style>
</head>
<body>
<p>
Un párrafo con el texto de color rojo.
</p>
</body>
</html>
Listado 67: Ejemplo de página HTML5 sin el atributo type

328 © Alfaomega - Altaria

Curso práctico avanzado

Figura 192: Resultado de validar la página HTML5 sin el atributo type

En HTML5 ya no es necesario incluir el

atributo type=”text/css” en el elemento
<style>.

Compatibilidad con los navegadores

Los navegadores modernos implementan completamente CSS1 y CSS2.
No ocurre lo mismo con las novedades que incorpora CSS3, por lo que
se pueden dar diferentes situaciones de compatiblidad:
• Algunas propiedades sí que son aceptadas por todos los navega-
dores modernos.
• Algunas propiedades son aceptadas parcialmente, es decir, no se
aceptan todos los posibles valores que pueden tomar las propie-
dades.

© Alfaomega - Altaria 329

HTML & CSS

• Algunas propiedades son aceptadas pero como propiedades propias

del navegador con los preﬁjos del fabricante, como -moz, -ms y -o.
• Algunas propiedades sólo son aceptadas por unos pocos navega-
dores modernos.

Las novedades de CSS3 se tienen que emplear

con sumo cuidado, ya que no todos los nave-
gadores modernos las aceptan.

Antes de emplear una propiedad nueva de CSS3, es aconsejable con-

sultar el grado de compatibilidad con los navegadores actuales. Esta
comprobación se puede realizar en varios sitios web que proporcionan
tablas de compatibilidad.
Por ejemplo, el sitio “Can I use…?”97 permite comprobar el estado
de implementación de las nuevas tecnologías de desarrollo web, como
HTML5, CSS3, SVG y las nuevas APIs de JavaScript en diferentes nave-
gadores, tal como se puede ver en la Figura 193.

Figura 193: Página principal de Can I use...?

97 Disponible en http://caniuse.com/

330 © Alfaomega - Altaria

Curso práctico avanzado

Por ejemplo, CSS3 introduce una nueva propiedad llamada text-

align-last, que permite deﬁnir la alineación de la última línea de texto
en un bloque de texto como es un párrafo.

CSS3 Text Module Level 35 deﬁne la propie-

dad text-align-last.

En la tabla de compatibilidad de text-align-last98 de “Can I use…?”

que se muestra en la Figura 194 se puede ver que esta propiedad está
parcialmente soportada en Microsoft Internet Explorer desde la versión
8. En Mozilla Firefox se soporta pero con el preﬁjo -moz y en el resto de
navegadores no está soportada.

Figura 194: Tabla de compatibilidad de la propiedad text-align-last en Can I use...?

El ejemplo que se muestra en el Listado 68 muestra el uso de la pro-

piedad text-align-last con cuatro valores diferentes: left, right,
center y justify.

98 Disponible en http://caniuse.com/#feat=css-text-align-last

© Alfaomega - Altaria 331

HTML & CSS

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Alineación del texto</title>
<style>
.izquierda {
text-align: justify;
text-align-last: left;
}
.derecha {
text-align: justify;
text-align-last: right;
}
.centrado {
text-align: justify;
text-align-last: center;
}
.justiﬁcado {
text-align: justify;
text-align-last: justify;
}
</style>
</head>
<body>
<p class=”izquierda”>
Style sheets represent a major breakthrough for Web page designers, expand-
ing their…
</p>
<p class=”derecha”>
HTML allows authors to design documents that take advantage of the char-
acteristics of…
</p>
<p class=”centrado”>
Media control is particularly interesting when applied to external style sheets
since user…
</p>
<p class=”justiﬁcado”>
Authors may specify a number of mutually exclusive style sheets called al-
ternate style…
</p>
</body>
</html>
Listado 68: Ejemplo de uso de la propiedad text-align-last de CSS3
332 © Alfaomega - Altaria
Curso práctico avanzado

En la Figura 195 se visualiza el ejemplo anterior en el navegador web

Microsoft Internet Explorer. Este navegador sí que reconoce la propiedad
text-align-last y se puede ver el efecto que produce en la última línea
de cada párrafo de texto:
• En el primer párrafo, la última línea está alineada a la izquierda
por text-align-last: left;.
• En el segundo párrafo, la última línea está alineada a la derecha
por text-align-last: right;.
• En el tercer párrafo, la última línea está centrada por text-align-
last: center;.
• En el último párrafo, la última línea está justiﬁcada por text-
align-last: justify;.

Figura 195: Ejemplo de uso de la propiedad text-align-last en Microsoft Internet Explorer

Sin embargo, Google Chrome no reconoce la propiedad text-align-

last, y por tanto cuando se muestra la página web no se produce ningún
cambio en la representación de la última línea de cada párrafo; todas
las líneas se muestran alineadas a la izquierda, tal como se puede ver
en la Figura 196.

© Alfaomega - Altaria 333

HTML & CSS

Figura 196: Ejemplo de uso de la propiedad text-align-last en Google Chrome

Además de “Can I use…?”, existen otros sitios web en los que se puede
veriﬁcar la compatibilidad de CSS3 con los navegadores actuales. Por
ejemplo, el sitio web “CSS3 Click Chart”99 agrupa la información sobre
CSS3 en categorías y, además del soporte de los navegadores web, in-
cluye ejemplos de uso.

Figura 197: Página principal de CSS3 Click Chart

También se puede consultar la documentación oﬁcial de los fabricantes

de los navegadores web para conocer el nivel de compatibilidad con las
nuevas tecnologías. Por ejemplo, en la Figura 198 aparece la página web
99 Disponible en http://css3clickchart.com/

334 © Alfaomega - Altaria

Curso práctico avanzado

“CSS Compatibility in Internet Explorer”100, en la que se puede consultar

el nivel de compatibilidad del navegador Microsoft Internet Explorer con
CSS.

Figura 198: Compatibilidad de CSS en Microsoft Internet Explorer

Y “Mozilla CSS support chart”101 informa de la compatibilidad del na-

vegador Mozilla Firefox con las diferentes versiones de CSS, tal como se
puede ver en la Figura 199.

Figura 199: Compatibilidad de CSS en Mozilla Firefox

100 Disponible en https://msdn.microsoft.com/en-us/library/hh781508(v=vs.85).aspx
101 Disponible en https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_support_chart

© Alfaomega - Altaria 335

HTML & CSS

Consejo
Recuerda, no diseñas para IE, Chrome, iPhone o Android. Diseñas para las personas.
Fuente: Jeﬀrey Zeldman

https://psdtowp.net/interview-jeffrey-zeldman.html

336 © Alfaomega - Altaria

14
El color

El color es una de las principales características que se emplea para

definir la presentación de una página web. CSS permite modificar el
color de diferentes partes de una página web: el color de fondo, el color
del texto y el color del borde. Además, CSS también permite definir un
color con diferentes notaciones.
Los objetivos de este capítulo son:
• Conocer las distintas notaciones que existen en CSS para definir
un color.
• Conocer las novedades de CSS3 respecto a la representación de
los colores.
En este capítulo se explican las propiedades de CSS: background-
color, border-color, color y outline-color.

Introducción
El color es una de las principales características que se emplea para
definir la presentación de una página web. Existen varias propiedades
que definen el color de alguna parte de un elemento:
• background-color: define el color del fondo.
• border-color: define el color del borde.

© Alfaomega - Altaria 337

HTML & CSS

• color: deﬁne el color del texto.

• outline-color: deﬁne el color del resaltado.
Estas cuatro propiedades toman como valor un color. En CSS los
colores se pueden especiﬁcar con los siguientes métodos:
• Nombres básicos de colores.
• Nombres extendidos de colores.
• Código hexadecimal.
• Código RGB decimal o en porcentaje.
• Código RGBA decimal o en porcentaje.
• Código HSL.
• Código HSLA.

Consejo
Limita el número de tipos de letra y los colores en tu sitio y aplícalos con consis-
tencia. La gente no conϔía en los sitios que parecen notas de secuestro.
Fuente: Prioritizing Web Usability. Jakob Nielsen, Hoa Loranger. New Riders, 2006

Nombres básicos de colores

La primera versión de CSS deﬁnía 16 nombres básicos de colores, como
black (negro), red (rojo), green (verde), blue (azul) y white (blanco). Es-
tos nombres básicos de colores se siguen manteniendo en las versiones
posteriores de CSS.
En la Figura 200 se muestra la lista completa de los nombres básicos
de colores. Al lado de cada color aparece su código hexadecimal y su
código RGB decimal, que se explican en las siguientes secciones.
Los nombres de los colores no son sensibles a mayúsculas, por lo que
se puede escribir black o BLACK.

Curso práctico avanzado

Figura 200: Nombres básicos de colores

Nombres extendidos de colores

En CSS Color Module Level 3102 se añadieron los nombres de los 147
colores disponibles en los sistemas X11. Algunos de los nombres represen-
tan colores, como blueviolet o darkred, mientras que otros representan
materiales, sustancias o cosas, como chocolate, gold, ivory o tomato.
Como curiosidad, los nombres extendidos de colores incluyen las
variantes grey (inglés británico) y gray (inglés americano) para indicar
el color gris.

Código hexadecimal
El código hexadecimal se especiﬁca con el formato #RRGGBB, donde RR
representa la componente roja (red) del color, GG la componente verde
(green) y BB la componente azul (blue) mediante dígitos hexadecimales
que toman valores desde 00 (0 en decimal) hasta FF (255 en decimal).
Los dígitos hexadecimales no son sensibles a mayúsculas, por lo que se
puede escribir FF o ff.

102 Disponible en http://www.w3.org/TR/css3-color/

HTML & CSS

Por ejemplo, el valor #0000FF representa el color azul, porque la com-

ponente azul (los dos últimos dígitos del valor) está fijada al máximo
valor FF, mientras que las otras dos componentes están fijadas a cero.
Existe una variante corta del código hexadecimal que emplea el for-
mato #RGB. En este formato, cada dígito se tiene que duplicar, es decir,
#RGB equivale a #RRGGBB.
En el Listado 69 se muestra un ejemplo de reglas de CSS que especi-
fican el color de fondo de tres elementos mediante código hexadecimal.

/* rojo */
p {background-color: #ff0000;}
/* verde */
ul {background-color: #00ff00;}
/* azul */
ol {background-color: #0000ff;}
Listado 69: Ejemplo de colores especificados con código hexadecimal

Código RGB decimal o en porcentaje

El código RGB decimal se especifica con el formato rgb(r, g, b),
donde los parámetros r (red), g (green) y b (blue) definen la intensidad de
los tres colores básicos rojo, verde y azul con un valor entre 0 y 255.
Por ejemplo, el valor rgb(0, 255, 0) representa el color verde, porque
la componente verde está fijada al máximo valor 255, mientras que las
otras dos componentes están fijadas a cero.
Existe una variante de este código que emplea valores con porcentaje
en vez de valores decimales. Cada componente puede tomar un valor
entre 0% y 100%.
Por ejemplo, el valor rgb(0%, 100%, 0%) representa otra vez el color
verde.

Curso práctico avanzado

Como se ha visto hasta ahora, un mismo color se puede deﬁnir de di-

ferentes formas: nombre de color, código hexadecimal corto, código hexa-
decimal, código RGB decimal y código RGB en porcentaje. Por ejemplo, en
el Listado 70 se muestran diferentes formas de especiﬁcar el color rojo.

/* nombre de color predeﬁnido */

p {color: red;}
/* #rgb */
p { color: #f00;}
/* #rrggbb */
p { color: #ﬀ0000;}
/* RGB rango 0-255 */
p {color: rgb(255,0,0)}
/* rango ﬂotante 0.0% - 100.0% */
p {color: rgb(100%, 0%, 0%);}

Listado 70: El mismo color especiﬁcado con diferentes notaciones

Código RGBA decimal o en porcentaje

El código RGBA decimal o en porcentaje es una extensión del código
RGB que añade la componente A, que representa el canal alfa de trans-
parencia (u opacidad).
El código RGBA tiene cuatro parámetros. Los tres primeros son simi-
lares a los usados en el código RGB y simplemente declaran los valores
para los colores rojo, verde y azul en números decimales del 0 al 255 o
en porcentaje de 0% a 100%. El último parámetro representa el canal
alfa, un valor decimal entre 0.0 (totalmente transparente) y 1.0 (total-
mente opaco).

CSS Color Module Level 36 añade el código RGBA

decimal y en porcentaje.

HTML & CSS

Más información
https://youtu.be/Y7Vfnt2OK2M

Métodos para definir colores

(CMYK , HSV, HSB, RGB), el
método RGB (Red, Green, Blue),
nombres de colores, notación
de los colores en hexadecimal,
consejos.

Código HSL
El código HSL representa un color mediante tres componentes: matiz
(hue), saturación (saturation) y luminosidad (lightness).
El matiz, también llamado tono o tinte, se representa mediante un valor
entre 0 y 360 grados correspondiente a la rueda de color que se muestra
en la Figura 201. Según esta rueda de color, 0 (o 360) representa el rojo,
120 es el verde y 240 es el azul. En la Figura 201 se muestra también el
nombre del color y el código RGB del color.

Figura 201: Rueda del matiz de los colores

Curso práctico avanzado

La saturación es un valor representado mediante un porcentaje: 0%

signiﬁca una sombra de gris y 100% representa el máximo color. La
luminosidad es también un porcentaje: 0% es negro y 100% es blanco.
El Listado 71 deﬁne el color de fondo para un párrafo utilizando el
código HSL. Los cuatro colores se basan en el verde (matiz 120), pero
tienen diferentes niveles de saturación o luminosidad.

/* Verde */
p {background-color: hsl(120, 100%, 50%);}
/* Verde claro */
p {background-color: hsl(120, 100%, 75%);}
/* Verde oscuro */
p {background-color: hsl(120, 100%, 25%);}
/* Verde pastel */
p {background-color: hsl(120, 60%, 70%);}
Listado 71: Ejemplo de colores especiﬁcados con código HSL

Código HSLA
El código HSLA es similar al código HSL, pero añade la componente
A, que representa el canal alfa de transparencia (u opacidad). Su fun-
cionamiento es el mismo que el canal alfa en el código RGBA, un valor
decimal entre 0.0 (totalmente transparente) y 1.0 (totalmente opaco).
El ejemplo mostrado en el Listado 72 deﬁne el color de fondo para un
párrafo utilizando el código HSLA.

/* Verde totalmente transparente */

p {background-color: hsla(120, 100%, 50%, 0.0);}
/* Verde semitransparente */
p {background-color: hsla(120, 100%, 50%, 0.5);}
/* Verde totalmente opaco */
p {background-color: hsla(120, 100%, 50%, 1.0);}
/* Verde claro con transparencia */
p {background-color: hsla(120, 100%, 75%, 0.3);}
/* Verde oscuro con transparencia */
p {background-color: hsla(120, 100%, 25%, 0.3);}
/* Verde pastel con transparencia */
p {background-color: hsla(120, 60%, 70%, 0.3);}
Listado 72: Ejemplo de colores especiﬁcados con código HSLA

HTML & CSS

CSS Color Module Level 37 añade el código HSL

y HSLA.

Las combinaciones de colores de una página

deben tener el suﬁciente contraste para faci-
litar la lectura a todos los usuarios, incluidos
los usuarios con problemas de baja visión.

Más información
https://youtu.be/mDAobnj359A

Nuevos métodos para definir

colores en CSS3: opacidad o
transparencia (RGBA), modelo
de color HSL (Hue, Saturation,
Lightness), matiz, saturación,
luminosidad.

15
Selectores,
unidades y
funciones

En este capítulo se explican los selectores de CSS2 y CSS3, que per-

miten seleccionar los elementos de una página web para aplicarles pro-
piedades de CSS. También se explican las diferentes unidades de medida
que se emplean para indicar los valores de las propiedades de CSS. Por
último, también explican las funciones de CSS.

Selectores
Una regla de CSS se compone de un selector y un conjunto de pare-
jas propiedad/valor que deﬁnen una característica del elemento de la
página web seleccionado por el selector. En la Figura 202 se muestra la
estructura general de una regla de CSS.
En este ejemplo, el selector es el elemento h1 (encabezado de nivel 1),
lo que signiﬁca que esta regla se aplicará a todos los elementos h1 de la
página sin distinción. El selector indica la parte de la página a la que se
debe aplicar la regla.

HTML & CSS

Figura 202: Estructura general de una regla de CSS

En la Tabla 14 se muestran los selectores disponibles en CSS 2.1103.

Los selectores “E F”, “E > F”, “E:ﬁrst-child” y “E + F” se basan en las
relaciones de parentesco, como padre/hijo o hermano/hermano, que se
establecen entre los elementos de una página web.

Patrón Significado
* Cualquier elemento
E Un elemento de tipo E
EF Un elemento F que desciende de un elemento E
E>F Un elemento F que es hijo de un elemento E
E:first-child Un elemento E cuando E es el primer hijo de su padre
E:link Un elemento E si E es un enlace y no ha sido visitado
E:visited Un elemento E si E es un enlace y ha sido visitado
E:active Un elemento E cuando el elemento es activado por el
usuario
E:hover Un elemento E cuando el cursor del ratón está situado
sobre el elemento
E:focus Un elemento E cuando el elemento ha recibido el foco
E:lang(c) Un elemento E si tiene definido el idioma c
E+F Un elemento F precedido inmediatamente por un
elemento E
E[foo] Un elemento E con el atributo foo con valor (cualquier
valor)
E[foo=”warning”] Un elemento E con el atributo foo con el valor “war-
ning”

103 Disponible en http://www.w3.org/TR/CSS2/

Curso práctico avanzado

E[foo~=”warning”] Un elemento E con el atributo foo con una lista de

valores separados por espacios en blanco, uno de los
cuales es exactamente el valor “warning”
E[lang|=”en”] Un elemento E con el atributo lang con un valor que
comienza con “en” o “en-”
.miClase Un elemento con la clase miClase
E.miClase Un elemento E con la clase miClase
#id Un elemento con el identiﬁcador id
E#myid Un elemento E con el identiﬁcador id
Tabla 14: Selectores en CSS 2.1

Es importante saber distinguir los selectores “E F”, “E > F” y “E + F”.

“E F” selecciona un elemento F que desciende de un elemento E. Por
ejemplo, si tenemos este fragmento de página web:

<div>
<p>Un párrafo</p>
<blockquote >
<p>Otra párrafo</p>
</blockquote >
<p>Otra párrafo más</p>
</div>

la regla:

div p {
background-color: yellow;
}

selecciona los tres párrafos del fragmento de la página.

“E > F” selecciona un elemento F que es hijo de un elemento E. Hijo
signiﬁca que F es descendiente directo de E. Por ejemplo, si tenemos este
fragmento de página web:

<div>
<p>Un párrafo</p>
<blockquote>
<p>Otra párrafo</p>
</blockquote>
<p>Otra párrafo más</p>
</div>

HTML & CSS

la regla:

div > p {
background-color: yellow;
}

selecciona el párrafo <p>Un párrafo</p> y el párrafo <p>Otra pá-

rrafo más</p>, ya que estos dos párrafos tienen como padre un ele-
mento <div>.
“E + F” selecciona un elemento F precedido inmediatamente por un
elemento E. Tanto el elemento E como el elemento F deben compartir
el mismo elemento padre. Por ejemplo, si tenemos este fragmento de
página web:

<div>
<p>Un párrafo</p>
<blockquote>
<p>Otra párrafo</p>
</blockquote>
<p>Otra párrafo más</p>
</div>

la regla:

div + p {
background-color: yellow;
}

no selecciona ningún párrafo, porque en este fragmento no hay un

elemento <p> que esté precedido por un elemento <div>.
El código del Listado 73 deﬁne dos reglas de CSS en las que se emplea
el selector de atributo para dar estilo a los cuadros de texto (type=”text”)
y a los botones (type=”button”) de un formulario.

Curso práctico avanzado

input[type=”text”] {
width: 150px;
margin-bottom: 10px;
background-color: yellow;
display: block;
}
input[type=”button”] {
width: 120px;
margin-left: 35px;
display: block;
}
Listado 73: Selector de atributo

Además, en CSS 2.1 también se deﬁnen las pseudoelementos que

aparecen en la Tabla 15. Los pseudoelementos ::first-line y ::first-
letter permiten seleccionar una parte del elemento indicado. Los pseu-
doelementos ::before y ::after permiten insertar contenido generado
desde CSS en una página web.

Patrón Significado
E::first-line La primera línea del elemento E
E::first-letter La primera letra del elemento E
E::before Contenido generado antes del elemento E
E::after Contenido generado después del elemento E
Tabla 15: Pseudoelementos en CSS 2.1

Por ejemplo, en el Listado 74 se muestra cómo se puede utilizar el

pseudoelemento ::before para destacar los elementos importantes en
una lista. Este pseudoelemento añade el contenido “Importante: ” con
color rojo, fondo amarillo y en negrita antes del elemento importante.

HTML & CSS

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Pseudoclase ::before</title>
<style type=”text/css”>
.importante::before {
content: “Importante: “;
background-color: yellow;
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p>Los elementos necesarios para la reparación son:</p>
<ul>
<li>Resina</li>
<li class=”importante”>Tela asfáltica</li>
<li>Pintura</li>
<li class=”importante”>Pegamento</li>
<li>Cemento</li>
</ul>
</body>
</html>
Listado 74: Ejemplo de uso de ::before

En la Figura 203 se puede ver visualizado el ejemplo del Listado 74. Se

puede ver que se ha añadido el contenido “Importante: ” a dos elementos
de la lista, a los dos elementos que tienen la clase class=”importante”.

Figura 203: Ejemplo de uso de ::before

Curso práctico avanzado

Más información
https://youtu.be/jNQfWCjV8Os

Selector de tipo (elemento o eti-

queta), selector de clase, selector
de identificador, selección de
etiquetas anidadas, pseudocla-
ses (link, visited, hover, active,
focus), agrupación de reglas,
reducción de código y reutiliza-
ción, consejos.

Selectores en CSS3
En CSS3 existen todos los selectores de CSS2 más los nuevos que se
deﬁnen en CSS3. En la Tabla 16 se muestran los nuevos selectores que
incorpora CSS3.

Los nuevos selectores de CSS3 se deﬁnen en

Selectors level 3 disponible en http://www.
w3.org/TR/css3-selectors/

Patrón Signiﬁcado
E[foo^=”bar”] Un elemento E que tiene un atributo foo cuyo valor
comienza exactamente con la cadena “bar”
E[foo$=”bar”] Un elemento E que tiene un atributo foo cuyo valor
ﬁnaliza exactamente con la cadena “bar”
E[foo*=”bar”] Un elemento E que tiene un atributo foo cuyo valor
contiene la subcadena “bar”
E:root Un elemento E raíz del documento
E:nth-child(n) Un elemento E, el hijo n de su padre
E:nth-last-child(n) Un elemento E, el hijo n de su padre contando desde
el último
E:nth-of-type(n) Un elemento E, el hermano n de su tipo

HTML & CSS

E:nth-last-of- Un elemento E, el hermano n de su tipo contando

type(n) desde el último
E:last-child Un elemento E, el último hijo de su padre
E:ﬁrst-of-type Un elemento E, el primer hermano de su tipo
E:last-of-type Un elemento E, el último hermano de su tipo
E:only-child Un elemento E, el único hijo de su padre
E:only-of-type Un elemento E, el único hermano de su tipo
E:empty Un elemento E que no tiene hijos
E:target Un elemento E que es el destino de un enlace
E:enabled Un elemento E de la interfaz de usuario que está ac-
tivado
E:disabled Un elemento E de la interfaz de usuario que está
desactivado
E:checked Un elemento E de la interfaz de usuario que está
marcado
E:not(s) Un elemento E que no cumple el selector simple s
E~F Un elemento F precedido por un elemento E
Tabla 16: Selectores de CSS3

En el Listado 75 se muestra un ejemplo de uso del selector :nth-

child(). Este selector se usa para seleccionar de forma individual cada
párrafo de la página web y aplicarle un color de fondo distinto.

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Prueba de nth-child</title>
<style type=”text/css”>
p:nth-child(1) {
background-color: #777;
}
p:nth-child(2) {
background-color: #999;
}
p:nth-child(3) {
background-color: #BBB;

Curso práctico avanzado

}
p:nth-child(4) {
background-color: #DDD;
}
</style>
</head>
<body>
<p>Primer párrafo de prueba.</p>
<p>Segundo párrafo de prueba.</p>
<p>Tercer párrafo de prueba.</p>
<p>Cuarto párrafo de prueba.</p>
</body>
</html>
Listado 75: Ejemplo de uso de nth-child()

En la Figura 204 se puede ver cómo se visualiza la página web del

Listado 75.

Figura 204: Ejemplo de uso de nth-child()

CSS3 añade nuevos selectores, pero se tienen

que usar con precaución, ya que pueden no
funcionar en navegadores antiguos.

HTML & CSS

Más información
https://youtu.be/-LIc4yu-Ojc

Descendientes directos, ele-

mentos contiguos, :first-child,
:ﬁrst-letter, :ﬁrst-line, valores de
atributos, :lang, :after, :before.

Unidades de medida
CSS proporciona diferentes unidades de medida para los diferentes
valores que pueden tomar sus propiedades. Las unidades de medida se
organizan en:
• Unidades relativas de longitud (Tabla 17).
• Unidades absolutas de longitud (Tabla 18).
• Unidades de ángulos (Tabla 19).
• Unidades de tiempo (Tabla 20).

Unidad Signiﬁcado
em El tamaño calculado del tipo de letra
ex La altura de la letra minúscula “x”
px Píxel
% Porcentaje
rem El tamaño del tipo de letra del elemento raíz
vw La anchura de la ventana de visualización
vh La altura de la ventana de visualización
vm El valor menor de la anchura o la altura de la
ventana de visualización
ch La anchura del cero
Tabla 17: Unidades relativas de longitud

Curso práctico avanzado

Unidad Signiﬁcado
in Pulgadas (1 pulgada = 2,54 centímetros)
cm Centímetros
mm Milímetros
pt Puntos (1 punto = 1/72 pulgadas)
pc Picas (1 pica = 12 puntos)
Tabla 18: Unidades absolutas de longitud

Unidad Signiﬁcado
deg Grados sexagesimal
grad Grado centesimal
rad Radianes
turn Giros
Tabla 19: Unidades de ángulos

Unidad Signiﬁcado
ms Milisegundos
s Segundos
Tabla 20: Unidades de tiempo

Funciones
CSS proporciona una serie de funciones que se pueden emplear en
las reglas:
• attr(): devuelve el valor del atributo indicado.
• url(): indica una URL para un recurso.
• counter(): devuelve el valor del contador indicado.
• calc(): realiza un cálculo aritmético. Admite alguno de estos cinco
operadores: suma “+”, resta “-”, multiplicación “*”, división “/” y
módulo de la división “mod”.
En el Listado 76 se muestra un ejemplo de uso de la función attr().
En este ejemplo se usa esta función para obtener la URL de un enlace y
visualizarla junto el enlace.

HTML & CSS

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Prueba de attr</title>
<style type=”text/css”>
a::after {
content: “ (“ attr(href) “) “;
}
</style>
</head>
<body>
<p>El lenguaje <a href=”http://es.wikipedia.org/wiki/HTML”>HTML</
a> y el lenguaje <a href=”http://es.wikipedia.org/wiki/Hoja_de_estilos_en_
cascada”>CSS</a> son la base de las páginas web.</p>
</body>
</html>
Listado 76: Ejemplo de uso de attr()

En la Figura 205 se muestra la página del Listado 76, pero sin la re-
gla de CSS a::after. Los enlaces se muestran únicamente con el texto
del enlace. Sin embargo, cuando se aplica esa regla de CSS, además del
texto del enlace también se muestra la URL de éste, tal como se puede
ver en la Figura 206.

Figura 205: Ejemplo de uso de attr()

Figura 206: Ejemplo de uso de attr()

Curso práctico avanzado

Elementos en línea o en bloque

En HTML se distinguen básicamente dos tipos de elementos, los
elementos en línea (en inglés, inline elements o text level elements) y los ele-
mentos en bloque (block level elements). La distinción de estos dos tipos de
elementos se basa en dos características:
• Contenido: normalmente, los elementos en bloque pueden contener
otros elementos en bloque o en línea, mientras que los elementos
en línea sólo pueden contener otros elementos en línea y datos.
• Presentación: los elementos en bloque comienzan en una nueva
línea, mientras que los elementos en línea se muestran uno a
continuación de otro.
En HTML, cada elemento tiene definida una presentación, en línea o
en bloque. Sin embargo, la propiedad display de CSS permite modificar
el comportamiento normal que tienen predefinidos los elementos.

Los principales valores que puede tomar la propiedad display son:

• none: el elemento no se visualiza, como si no existiera.
• inline: el elemento se muestra en línea.
• block: el elemento se muestra en bloque.
• inline-block: el elemento se muestra como un elemento en lí-
nea, pero su contenido se comporta como si fuera un elemento
en bloque.
Además, también existen un conjunto de valores para mostrar un
elemento como si fuera una tabla: table, table-caption, table-
cell, table-column, table-column-group, table-footer-group,
table-header-group, table-row y table-row-group.

HTML & CSS

CSS3 incorpora nuevos valores para la propiedad

display (flex, inline-flex, grid, inline-
grid) y otros para ser usados con lenguas asiáticas
que emplean el sistema de notación ruby (ruby,
ruby-base, ruby-text, ruby-base-contai-
ner, ruby-text-container).
Por ejemplo, en el Listado 77 se muestra el código fuente de una pá-
gina web que contiene tres párrafos y una lista con tres elementos. Uno
de los párrafos contiene tres imágenes. En la Figura 207 se puede ob-
servar que las tres imágenes aparecen una a continuación de la otra en
la misma línea (porque son elementos en línea) y los párrafos aparecen
uno a continuación del otro en distintas líneas (porque son elementos
en bloque). Los tres elementos que componen la lista también aparecen
en distintas líneas, uno a continuación del otro, porque son elementos
en bloque.

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Una página con inline-block normal</title>
</head>
<body>
<p>
Algunos iconos del W3C
<img src=”valid-xhtml10.png” alt=”XHTML válido”/>
<img src=”vcss.gif” alt=”CSS válido” />
<img src=”wcag1AAA.png” alt=”AAA válido” />
que se pueden descargar de su página web.
</p>
<p>
Otro párrafo con otras cosas.
</p>
<p>
Y una lista con elementos:
</p>
<ul>
<li>Elemento 1.</li>
<li>Elemento 2.</li>
<li>Elemento 3.</li>
</ul>
</body>
</html>
Listado 77: Ejemplo de elementos en línea y en bloque
358 © Alfaomega - Altaria
Curso práctico avanzado

Figura 207: Ejemplo de elementos en línea y en bloque

El comportamiento normal de los elementos se puede modiﬁcar con CSS. En el

ejemplo que se muestra en el Listado 78, mediante la etiqueta <style> se han
definido dos clases para modificar el valor de la propiedad display. La clase
enbloque se ha aplicado a la segunda imagen y la clase enlinea a los dos
últimos párrafos y a los tres elementos de la lista. En la Figura 208 se puede
observar el resultado de estas modificaciones: la segunda imagen aparece ella
sola en una línea, los dos últimos párrafos aparecen uno a continuación del
otro en la misma línea y los tres elementos de la lista también aparecen uno
a continuación del otro.

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=“utf-8“ />
<title>Una página con inline-block cambiado</title>
<style>
.enbloque {display: block}
.enlinea {display: inline}
</style>
</head>
<body>
<p>
Algunos iconos del W3C
<img src=“valid-xhtml10.png“ alt=“XHTML válido“/>
<img src=“vcss.gif“ alt=“CSS válido“ class=“enbloque“ />
<img src=“wcag1AAA.png“ alt=“AAA válido“ />
que se pueden descargar de su página web.
</p>
<p class=”enlinea”>
Otro párrafo con otras cosas.
</p>

HTML & CSS

<p class=”enlinea”>
Y una lista con elementos:
</p>
<ul>
<li class=”enlinea”>Elemento 1.</li>
<li class=”enlinea”>Elemento 2.</li>
<li class=”enlinea”>Elemento 3.</li>
</ul>
</body>
</html>
Listado 78: Ejemplo de uso de la propiedad display

Figura 208: Ejemplo de uso de la propiedad display

Curso práctico avanzado

Advertencia
¡Cuidado! No es una buena práctica cambiar el comportamiento normal de
los elementos.

Recomendaciones para escribir una hoja de

estilo correcta
Con unas pocas reglas de CSS bien elegidas se puede lograr un estilo
visual impactante.
En general, se recomienda que como mínimo se utilicen tres colores
diferentes (y suele ser lo suficiente en la mayoría de los casos) y no más
de seis colores en una página web.
Además, también se recomienda que se utilicen dos tipos de letra (un
tipo de letra para los títulos y otro para el contenido principal) y como
máximo tres (un tipo de letra para el contenido adicional, como puede
ser una barra lateral con información auxiliar).
Una mala práctica es definir múltiples clases (atributo class) e iden-
tificadores (atributo id). Siempre que sea posible, se deben emplear
selectores simples que hagan referencia a elementos de HTML.
Hay propiedades que se heredan, por lo que no es necesario definirlas
para todos los elementos, sino que si se define en un elemento padre,
todos sus hijos la tomarán y utilizarán. Por ejemplo, para aplicar un
mismo estilo de texto en toda una página web, lo más sencillo es definirlo
en el elemento html o body.
Un fichero CSS puede llegar a tener cientos o incluso miles de líneas,
por lo que pueden aparecer problemas importantes:
• Reglas no utilizadas.
• Reglas duplicadas, que indican lo mismo o son contradictorias.
• Propiedades heredadas que pasan desapercibidas.
• Y, por supuesto, el tiempo que se pierde para localizar una regla
entre miles de líneas.

HTML & CSS

Para evitar estos problemas, es necesario organizar un ﬁchero CSS

de alguna forma. Existen diferentes formas de organizar un fichero CSS:
• Organizar las reglas por orden alfabético. Por ejemplo: a, div,
em, .importante, #principal, table.
• Organizar las reglas por orden de aparición. Por ejemplo: html,
body, h1, h2, div, #principal, p, .importante.
• Separar las reglas según la función que realizan. Por ejemplo:
por un lado las reglas que modifican los bordes, por otro lado las
reglas que modifican los colores, y por otro lado las reglas que
definen la maquetación.
• Organizar las propiedades de una regla por orden alfabético. Por
ejemplo: border, font-size, margin, padding, text-align.
• Organizar las propiedades de una regla del exterior del elemento al
interior. Por ejemplo: margin, border, padding, text-align,
font-size.
Utiliza los comentarios de CSS /*…*/ para separar las diferentes
partes de un CSS y para desactivar ciertas propiedades cuando quieras
realizar pruebas.
También existen algunas herramientas que se pueden emplear para
organizar un fichero CSS. Por ejemplo, “Format CSS Code”104 es una
herramienta online que formatea el aspecto de un CSS: introduce saltos
de línea, espacios en blanco, etc. “CSS Optimizer”105 es otra herramienta
online que ayuda a reducir el tamaño de un fichero CSS al aplicar algu-
nas transformaciones, como por ejemplo, cambiar el nombre de algunas
propiedades y valores.
Por último, también es recomendable minimizar el tamaño de las ho-
jas de estilo, que consiste en eliminar los caracteres innecesarios, como
los espacios en blanco adicionales, los saltos de línea y las sangrías que
hacen aumentar el tamaño de las hojas de estilo. Al minimizar las hojas
de estilo es posible acelerar la descarga, el análisis y el tiempo de ejecu-
ción de las mismas.

104 Disponible en http://www.cssportal.com/format-css/

105 Disponible en http://www.cssportal.com/css-optimize/

Curso práctico avanzado

Por ejemplo, en el Listado 79 se muestran las reglas de CSS del ejem-

plo del Listado 68. Estas reglas contienen espacios en blanco y saltos de
línea que facilitan su lectura, pero se pueden eliminar para reducir su
tamaño sin alterar el funcionamiento de la hoja de estilo.

.izquierda {
text-align: justify;
text-align-last: left;
}
.derecha {
text-align: justify;
text-align-last: right;
}
.centrado {
text-align: justify;
text-align-last: center;
}
.justiﬁcado {
text-align: justify;
text-align-last: justify;
}
Listado 79: Hoja de estilo sin minimizar

Una hoja de estilo se puede minimizar a mano o se puede emplear alguna

herramienta online, como por ejemplo “CSS Compressor”106, que se muestra
en la Figura 209. Esta herramienta permite elegir cuatro niveles de compresión
de la hoja de estilo.
En el Listado 80 se muestra el resultado de minimizar la hoja de estilo del Lis-
tado 79. Como se puede observar, se han eliminado los espacios en blanco y los
saltos de línea, toda la hoja de estilo está escrita en una única línea de código.
El CSS de entrada tenía un tamaño de 279 bytes, mientras que el CSS minimi-
zado tiene un tamaño de 209 bytes, lo que supone un ahorro del 33,49%.

106 Disponible en http://csscompressor.com/

HTML & CSS

Figura 209: CSS Compressor

.izquierda{text-align:justify;text-align-last:left}.derecha{text-align:justify;-
text-align-last:right}.centrado{text-align:justify;text-align-last:center}.justiﬁca-
do{text-align:justify;text-align-last:justify}
Listado 80: Hoja de estilo minimizada

16
El texto

En este capítulo se explica cómo deﬁnir la presentación visual del texto.

CSS permite definir la presentación de los caracteres, el espacio entre
los caracteres, el espacio entre las palabras, las palabras y los párrafos.
Los objetivos de este capítulo son:
• Conocer las propiedades básicas de CSS que permiten especificar
el tipo de letra, el tamaño y el color del texto.
• Conocer las propiedades de CSS que permiten especificar carac-
terísticas avanzadas de la presentación del texto, como el espacio
entre los caracteres o la altura de las líneas de texto.
• Aprender nuevos selectores que permiten seleccionar partes del
texto.
En este capítulo se explican las propiedades de CSS: font-family,
font-size, font-style, font-variant, font-weight, letter-
spacing, line-height, text-indent, text-align, text-decora-
tion, text-shadow, text-transform, white-space, word-spacing.

HTML & CSS

La propiedad font
En las primeras versiones de HTML, la presentación del texto se po-
día cambiar con la etiqueta <font>. Esta etiqueta tenía tres atributos
opcionales:
• face: define el tipo de letra (la fuente) del texto.
• size: define el tamaño del texto, un valor de 1 (el tamaño más
pequeño) a 7 (el tamaño más grande).
• color: define el color del texto con la notación hexadecimal #RR-
GGBB.
En el Listado 81 se muestra un ejemplo de uso de esta etiqueta. En
esta página se emplea la etiqueta <font> para modificar la presentación
de los encabezados (<h1> y <h2>) y los párrafos (<p>).

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Uso de la antigua etiqueta <font></title>
</head>
<body>
<h1><font face=”Verdana” size=”7” color=”#0000CC”>Encabezado nivel 1</
font></h1>
<p><b><font face=”Courier” size=”5” color=”#00AA00”>Un párrafo de texto.</
font></b></p>
<h2><font face=”Arial” size=”6” color=”#0000AA”>Encabezado nivel 2</font></
h2>
<p><b><font face=»Courier»><font size=»5»><font color=»#00AA00»>Otro
párrafo de texto.</font></font></font></b></p>
</body>
</html>
Listado 81: Ejemplo de uso de la etiqueta <font>

El encabezado de nivel 1 se muestra con el tipo de letra Verdana, con

el tamaño máximo 7 y con el color azul (#0000CC). El encabezado de ni-
vel 2 se muestra con el tipo de letra Arial, con el tamaño 6 y con el color
azul (#0000CC). Los párrafos se muestran con el tipo de letra Courier, el
tamaño 5 y con el color verde (#00AA00). En la Figura 210 se visualiza
esta página en el navegador Google Chrome.
366 © Alfaomega - Altaria
Curso práctico avanzado

Figura 210: Ejemplo de uso de la etiqueta <font>

La etiqueta <font> estaba desaconsejada en XHTML 1.0 y en HTML5

ya no existe, por lo que no se debe emplear. En la Figura 211 se pueden
ver los mensajes de error que muestra W3C Markup Validation Service107:
“The font element is obsolete. Use CSS instead”.

Figura 211: Validación de una página web con la etiqueta <font>

En vez de la etiqueta <font> se debe emplear la propiedad font de

CSS, que, además de definir el tipo de letra y el tamaño del texto, tam-
bién permite definir otras características de la presentación de éste. Para
modificar el color del texto se debe emplear la propiedad color.

107 Disponible en http://validator.w3.org/

HTML & CSS

La propiedad font resume en una única propiedad las siguientes

propiedades de CSS:
• font-family: especifica el tipo de letra (la fuente tipográfica).
• font-size: especifica el tamaño del tipo de letra. El valor por
defecto es normal.
• font-style: especifica el estilo del tipo de letra. El valor por de-
fecto es normal.
• font-variant: especifica la variante del tipo de letra. El valor por
defecto es normal.
• font-weight: especifica el peso del tipo de letra. El valor por
defecto es normal.
En el Listado 82 se muestra un ejemplo de uso de la propiedad font:
• El encabezado nivel 1 <h1> se define en negrita, con un tamaño
de 36 píxeles y el tipo de letra Arial: font: bold 36px Arial;.
• El encabezado nivel 2 <h2> se define con versalitas (mayúsculas
pequeñas), negrita, con un tamaño de 24 píxeles y el tipo de letra
Georgia: font: small-caps bold 24px Georgia;.
• El encabezado nivel 3 <h3> se define en cursiva, con un peso
normal, con un tamaño de 20 píxeles y el tipo de letra Tahoma:
font: italic normal 20px Tahoma;.
En la Figura 212 se muestra la página del Listado 82.

Figura 212: Ejemplo de uso de la propiedad font

Curso práctico avanzado

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Prueba de font</title>
<style type=”text/css”>
h1 {
font: bold 36px Arial, Verdana, sans-serif;
}
h2 {
font: small-caps bold 24px Georgia, Times, serif;
}
h3 {
font: italic normal 20px Tahoma, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>Encabezado nivel 1</h1>
<h2>Encabezado nivel 2</h2>
<h3>Encabezado nivel 3</h3>
</body>
</html>
Listado 82: Ejemplo de uso de la propiedad font

Consejo
Limite los estilos de fuente y otros formatos del texto, como los tamaños, los
colores, etc. en la página, porque demasiado diseño del texto puede disminuir
el signiϔicado de las palabras. Si el texto se parece demasiado a los gráϔicos, los
usuarios tienden a pasarlos por alto, confundiéndolos con los anuncios.
Fuente: 113 Design Guidelines for Homepage Usability, Jakob Nielsen

http://www.nngroup.com/articles/113-design-guidelines-homepage-usability/

Consejo
Un tamaño de letra pequeño no es una solución para meter más contenido en una
página. Más texto a menudo signiϔica menos lectura. El texto denso echa a la gente.
Fuente: Prioritizing Web Usability. Jakob Nielsen, Hoa Loranger. New Riders, 2006

HTML & CSS

Tipos de letra de reserva

CSS permite definir varios tipos de letra de reserva (fallback fonts) que
se deben emplear en caso de que el tipo de letra indicado no esté dis-
ponible. La propiedad font-family acepta una lista de tipos de letra
separados por comas para ser usados en el orden especificado. El primer
tipo de letra declarado es el tipo preferido, el primero que el navegador
web debe intentar utilizar. Si el tipo de letra no se encuentra disponi-
ble, el navegador web debe intentar usar el siguiente tipo de letra en la
lista. Si ninguno de los tipos de letra especificados se encuentra en el
sistema operativo del usuario, el navegador web utilizará el tipo de letra
predeterminado.
Por ejemplo, en el Listado 83 se muestra un fragmento de código CSS
en el que se declara el tipo de letra para los encabezados <h1>, <h2>
y <h3>, y para los párrafos <p>. Para los encabezados se ha declarado
como tipo de letra preferido Georgia, pero si este tipo de letra no está
disponible, entonces el navegador web debe intentar utilizar los tipos de
letra “Times New Roman”, Times y serif, en ese orden. El tipo de letra
serif es un tipo genérico. Para los párrafos se ha declarado como tipo
de letra preferido Arial. Si el tipo de letra Arial no está disponible en el
ordenador del usuario, el navegador web debe intentar utilizar los tipos de
letra Helvetica, “Nimbus Sans L”, “Liberation Sans” y sans-serif
en el orden indicado. El tipo de letra sans-serif es un tipo genérico.

h1, h2, h3 {
font-family: Georgia, “Times New Roman”, Times, serif;
}

p{
font-family: Arial, Helvetica, “Nimbus Sans L”, “Liberation Sans”, sans-serif;
}
Listado 83: Deﬁnición de tipos de letra de reserva

Curso práctico avanzado

Uso de cualquier tipo de letra

La instrucción @font-face de CSS permite especificar tipos de letra,
también llamadas fuentes tipográficas, para ser usadas en las páginas
web, sin depender del número limitado de ellos instalados en los ordena-
dores de los visitantes de un sitio web. Esta instrucción permite utilizar
un tipo de letra sin tener que descargarla e instalarla previamente en el
ordenador del usuario.
La instrucción @font-face apareció por primera vez en los borradores
de CSS2 en 1998108, pero finalmente no se incluyó en la versión definitiva
de CSS2.

@font-face está definido en CSS Fonts

Module Level 38.

La sintaxis de la instrucción @font-face es:

@font-face {
font-family: <un-nombre-de-fuente-remota>;
src: <origen> [,<origen>]*;
[font-weight: <altura>];
[font-style: <estilo>];
}

En el atributo src se indica el ﬁchero fuente que contiene la deﬁnición del tipo
de letra que se quiere utilizar. Desafortunadamente, existen varios formatos de
tipo de letra, como OpenType, TrueType y Web Open Font Format (WOFF) y
los diferentes navegadores web actuales soportan diferentes formatos. Debido
a esto, cuando se emplea esta instrucción se debe indicar el mismo tipo de letra
con diferentes formatos, tal como se muestra en el ejemplo del Listado 84.

108 “15.3.1 Font Descriptions and @font-face” disponible en

http://www.w3.org/TR/1998/REC-CSS2-19980512/fonts.html#font-descriptions

HTML & CSS

@font-face {
font-family: ‘MyWebFont’;
/* Compatible con IE9 */
src: url(‘webfont.eot’);
/* Compatible con IE6-IE8 */
src: url(‘webfont.eot?#iefix’) format(‘embedded-opentype’),
/* Compatible con los navegadores más modernos */
url(‘webfont.woff2’) format(‘woff2’),
/* Compatible con los navegadores modernos */
url(‘webfont.woff’) format(‘woff’),
/* Safari, Android, iOS */
url(‘webfont.ttf’) format(‘truetype’),
/* Otros navegadores */
url(‘webfont.svg#svgFontName’) format(‘svg’);
}
Listado 84: Uso de @font-face

La complejidad del código del Listado 84 se puede eliminar al utilizar un

servicio en línea de tipos de letra como Adobe Edge Web Fonts109 o Google
Fonts110, que permiten utilizar un tipo de letra sin tener que descargarla
e instalarla previamente en el sitio web. También existen otros servicios
como Font Squirrel111, que permiten la descarga de los tipos de letra para
instalarse en el servidor web y así no depender de un servicio externo.
Google Fonts es uno de los sistemas más populares porque es gratuito
y muy sencillo de utilizar. En la actualidad incluye casi 700 tipos de letra.
El proceso de uso de un tipo de letra se divide en tres pasos:
• Seleccionar (Choose): buscar y seleccionar los tipos de letra que se
quieren utilizar en una página web.
• Revisar (Review): revisar los tipos de letra seleccionados.
• Utilizar (Use): obtener el código fuente para incorporar los tipos de
letra en una página web.
En la Figura 213 se muestra la página principal de Google Fonts. En la
parte izquierda de esta página existe un grupo de ﬁltros que permiten al
usuario seleccionar las características del tipo de letra que desea utilizar.

109 Disponible en https://edgewebfonts.adobe.com/

110 Disponible en https://www.google.com/fonts
111 Disponible en http://www.fontsquirrel.com/

Curso práctico avanzado

Figura 213: Página principal de Google Fonts

El primer ﬁltro (Figura 214) permite escoger las familias entre las que se quiere
buscar el tipo de letra.

Figura 214: Categorías de tipos de letra en Google Fonts

El segundo ﬁltro (Figura 215) permite seleccionar el grosor (thickness), la incli-

nación (slant) y la anchura (width).

Figura 215: Opciones de ﬁltrado en Google Fonts

HTML & CSS

Una vez escogidos los tipos de letra, el siguiente paso es la revisión

(Figura 216), en la que se puede comprobar la apariencia del tipo de
letra con diferentes textos. El usuario puede introducir su propio texto
de prueba.

Figura 216: Revisión de los tipos de letra seleccionados

El siguiente paso (Figura 217) es escoger los estilos de los tipos de letra
seleccionados. Para cada tipo de letra se pueden seleccionar diferentes
estilos, como negrita o cursiva. Además, en esta página se informa del
impacto de los tipos de letra seleccionados en la carga de la página web.
Cuantos más tipos de letra y más estilos se seleccionen, más tiempo
tardará en cargarse la página web.

Figura 217: Selección ﬁnal de los estilos del tipo de letra

Curso práctico avanzado

En el último paso (Figura 218), el usuario tiene acceso al código que

permite usar los tipos de letra que ha seleccionado. Google Fonts ofrece
tres alternativas de uso: mediante la etiqueta <link>, mediante la ins-
trucción @import y mediante código JavaScript.

Figura 218: Código para usar los tipos de letra de Google Fonts

El código de la etiqueta <link> se debe añadir a la página web en la

sección <head>:

El código @import se debe añadir al principio de una hoja de estilo

CSS que se utilice en la página web:

@import url(http://fonts.googleapis.com/css?family=Lora|Open+Sans);

Por último, el código JavaScript se debe añadir en cualquier punto de

la página web; lo mejor es que se añada al ﬁnal de la página, antes de

HTML & CSS

la etiqueta </body> para evitar que se produzca un bloque en la carga

de la página web:

Independientemente de la forma que se utilice para cargar los tipos de letra,

la forma de usar el tipo de letra en la hoja de estilo CSS es siempre la misma:

font-family: ‘Lora’, serif;

font-family: ‘Open Sans’, sans-serif;

Más información
https://youtu.be/67gVFpvkdDk

Deﬁnición del estilo del texto con

CSS, font-family, font-size, font-
weight, font-style y font-variant.

Propiedades del texto

CSS posee numerosas propiedades que permiten deﬁnir las siguientes
características de la presentación visual del texto:

Curso práctico avanzado

• Sangría: la sangría de la primera línea de un bloque de texto (un

conjunto de líneas de texto) se define con la propiedad text-
indent.
• Alineación: la alineación de un bloque de texto se define con la
propiedad text-align.
• Decoración: la decoración, como tachado, subrayado o parpadeo,
que se puede agregar a un texto se define con la propiedad text-
decoration.
• Sombra: la sombra de un texto se define con la propiedad text-
shadow.
• Cambio de minúsculas y mayúsculas: el cambio de un texto entre
mayúsculas y minúsculas se define con la propiedad text-
transform.
• Espaciado de letras, palabras y líneas: el comportamiento del espacio
en blanco entre letras y palabras se define respectivamente con las
propiedades letter-spacing y word-spacing; el espacio entre
líneas se define con la propiedad line-height.
• Espacios en blanco: la forma de tratar el espacio en blanco en un
elemento se define con la propiedad white-space.

Sangría
En tipografía, la sangría o el sangrado (en inglés indentation) de un
texto consiste en empezar un renglón de un bloque de texto más adentro
que el resto. Normalmente se suele hacer con el primer renglón de cada
párrafo, que suele aparecer de tres a cinco caracteres más a la derecha.
Pero también existe la sangría negativa o sangría francesa, en la que la
primera línea sobresale por la izquierda algo más que el resto, que van
algo más sangradas.
Las sangrías son un recurso muy usual en los textos impresos, ya que
ayudan a mejorar la legibilidad de los textos. En informática, la sangría
se utiliza para mejorar la legibilidad del código fuente por parte de los
programadores.
En CSS existe la propiedad text-indent, que puede tomar como valor
una medida o un porcentaje, ya sea positivo o negativo. Por ejemplo, en

HTML & CSS

el siguiente código el primer párrafo tiene una sangría positiva de tres

veces el tamaño actual del texto (3em), el segundo párrafo tiene una san-
gría francesa de también tres veces el tamaño actual del texto y el tercer
párrafo tiene una sangría positiva indicada en porcentaje.

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Sangría del texto</title>
<style type=”text/css”>
.positiva {text-indent: 3em;}
.francesa {text-indent: -3em; margin-left: 3em;}
.porcentaje {text-indent: 3%;}
</style>
</head>
<body>
<p class=”positiva”>
Una regla CSS consta de dos partes principales: un selector (‘H1’) y una decla-
ración (‘color: blue’). La declaración tiene dos partes: una propiedad (‘color’)
y un valor (‘blue’). Con tal de que el ejemplo anterior intente influir en una
sola propiedad necesaria para el procesamiento de un documento HTML, ya
lo califica como una hoja de estilo en sí mismo. Combinado con otras hojas de
estilo (un rasgo fundamental de CSS es que las hojas de estilo se combinan),
determinará la presentación final del documento.
, </p>
<p class=”francesa”>
CSS puede usarse con cualquier formato de documento estructurado, por
ejemplo con aplicaciones del eXtensible Markup Language [XML10]. De hecho,
XML depende más de las hojas de estilo que HTML, puesto que los autores
pueden construir elementos propios que las aplicaciones del usuario no saben
cómo mostrar.
</p>
<p class=”porcentaje”>
En todos los medios, el término lienzo describe “el espacio donde la estructura
del formato es procesada”. El lienzo es infinito por cada dimensión del espacio,
pero el procesamiento generalmente tiene lugar en una región limitada del
lienzo, establecida por la aplicación del usuario de acuerdo con el medio al
que está dirigido. Por ejemplo, las aplicaciones del usuario que procesan para
pantalla, generalmente imponen un ancho mínimo y eligen un ancho inicial
basado en las dimensiones del acceso visual.
</p>
</body>
</html>
Listado 85: Ejemplo de sangría del texto

Curso práctico avanzado

En el código anterior, para lograr la sangría francesa se ha tenido que emplear

la propiedad margin-left para aumentar el margen izquierdo del párrafo,
ya que al emplear una sangría negativa la primera línea se desplaza hacia la
izquierda fuera de la ventana del navegador.
En la Figura 219 se puede ver cómo se muestra el ejemplo del Listado 85.

Figura 219: Ejemplo de sangría del texto

Alineación
La propiedad text-align define cómo se alinea el contenido al ni-
vel de línea del bloque en que se aplica la propiedad. Por ejemplo, esta
propiedad define cómo se alinea el texto de un párrafo (el contenido a
nivel de línea), pero no indica cómo se alinea el propio párrafo (el bloque)
respecto a otros bloques.
La propiedad text-align puede tomar cuatro posibles valores:
• left: alinear a la izquierda.
• right: alinear a la derecha.
• center: alinear al centro, centrar.
• justify: alinear a la izquierda y a la derecha, justificar.

Consejo
Si quieres saber cómo alinear un bloque, como una tabla o una lista, consulta
la sección sobre el modelo de caja.

HTML & CSS

El ejemplo que se muestra en el Listado 86 contiene cuatro párrafos:

el primero está alineado a la izquierda, el segundo a la derecha, el tercero
está centrado y el cuarto está justiﬁcado. En la Figura 220 se puede ver
cómo se muestra este código en un navegador.

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Alineación del texto</title>
<style type=”text/css”>
.izquierda {text-align: left;}
.derecha {text-align: right;}
.centrado {text-align: center;}
.justificado {text-align: justify;}
</style>
</head>
<body>
<p class=”izquierda”>
Style sheets represent a major breakthrough for Web page designers, expand-
ing their ability to improve the appearance of their pages. In the scientific
environments in which the Web was conceived, people are more concerned
with the content of their documents than the presentation. As people from
wider walks of life discovered the Web, the limitations of HTML became a
source of continuing frustration and authors were forced to sidestep HTML’s
stylistic limitations. While the intentions have been good -- to improve the
presentation of Web pages -- the techniques for doing so have had unfortunate
side effects. These techniques work for some of the people, some of the time,
but not for all of the people, all of the time.
</p>
<p class=”derecha”>
HTML allows authors to design documents that take advantage of the char-
acteristics of the media where the document is to be rendered (e.g., graphical
displays, television screens, handheld devices, speech-based browsers, braille-
based tactile devices, etc.). By specifying the media attribute, authors allow
user agents to load and apply style sheets selectively. Please consult the list
of recognized media descriptors.
</p>
<p class=”centrado”>

Curso práctico avanzado

Media control is particularly interesting when applied to external style sheets

since user agents can save time by retrieving from the network only those style
sheets that apply to the current device. For instance, speech-based browsers
can avoid downloading style sheets designed for visual rendering. See the
section on media-dependent cascades for more information.
</p>
<p class=”justiﬁcado”>
Authors may specify a number of mutually exclusive style sheets called alter-
nate style sheets. Users may select their favorite among these depending on
their preferences. For instance, an author may specify one style sheet designed
for small screens and another for users with weak vision (e.g., large fonts).
User agents should allow users to select from alternate style sheets.
</p>
</body>
</html>

Listado 86: Ejemplo de alineación del texto

Figura 220: Ejemplo de alineación del texto

Recuerda que CSS3 Text Module Level 39 de-

ﬁne la propiedad text-align-last que se
puede emplear para deﬁnir la alineación de
la última línea de un bloque de texto como
un párrafo.

HTML & CSS

Decoración
La propiedad text-decoration permite deﬁnir la decoración que se
aplica al texto de un elemento. Esta propiedad puede tomar los siguien-
tes valores:
• none: no produce ninguna decoración del texto.
• underline: el texto es subrayado.
• overline: el texto tiene una línea encima.
• line-through: el texto tiene una línea por el medio (tachado).
• blink: el texto parpadea.

CSS Text Decoration Module Level 310 añade

nuevas subpropiedades a t e x t - d e c -
oration: text-decoration-line,
text-decoration-color, text-decora-
tion-style y text-decoration-skip.

El siguiente código (Listado 87) contiene varios ejemplos de uso de

la propiedad text-decoration. En primer lugar, se emplea esta pro-
piedad para impedir que un texto aparezca subrayado cuando además
aparece en negrita. Pero como se puede ver en la Figura 221, el orden de
declaración de los selectores en la regla CSS es muy importante, ya que
al escribir b u, la regla se aplica cuando en el código HTML se escribe
<b><u>, pero no cuando se escribe <u><b>. El resto del código permite
comprobar cómo se muestra un texto subrayado, con una línea encima,
tachado y parpadeante.

El parpadeo del texto (text-decoration:

blink) puede causar problemas a algunos
grupos de usuarios.

Curso práctico avanzado

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Decoración del texto</title>
<style type=”text/css”>
b u {text-decoration: none;}
.subrayado{text-decoration: underline;}
.encima {text-decoration: overline;}
.tachado {text-decoration: line-through;}
.parpadeante {text-decoration: blink;}
</style>
</head>
<body>
<p>
Este texto está <u>subrayado</u>, <b><u>pero este no</u></b>, pero
<u><b>este sí</b></u>.
Una prueba de <span class=”subrayado”>texto subrayado</span>.
Una prueba de <span class=”encima”>texto con una línea encima</span>.
Una prueba de <span class=”tachado”>texto tachado</span>.
Una prueba de <span class=”parpadeante”>texto parpadeante</span>.
</p>
</body>
</html>
Listado 87: Ejemplo de decoración del texto

Figura 221: Ejemplo de decoración del texto

Sombra
La propiedad text-shadow permite definir la sombra que se aplica
a un texto. Esta propiedad text-shadow fue definida por primera vez
en CSS2, pero fue eliminada en CSS2.1 debido a que su definición era
incorrecta. El uso de ésta se extendió a partir de que Microsoft Internet
Explorer 10 la aceptase.
© Alfaomega - Altaria 383
HTML & CSS

Esta propiedad acepta una lista separada por comas de efectos de

sombra para ser aplicados al texto del elemento. Los efectos de sombra
son aplicados en el orden especificado y por eso pueden cubrirse unos a
otros, pero nunca cubrirán al propio texto. Cada efecto de sombra debe
especificar un desplazamiento de la sombra y puede especificar opcio-
nalmente un radio de desenfoque y un color para la sombra.
En el Listado 88 se muestra el código de una página web112 que contie-
ne varios encabezados <h1>. Cada encabezado tiene asignada una clase
que define un estilo con sombras del texto.

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Sombra del texto</title>
<link rel=”stylesheet” href=”sombra.css” />
</head>
<body>
<h1 class=”simple”>Monster Mash</h1>
<h1 class=”otto”>Slippery Slime</h1>
<h1 class=”relief”>Mummy Mommy</h1>
<h1 class=”close”>Graveyard Smash</h1>
<h1 class=”printers”>Skeleton Crew</h1>
<h1 class=”glow”>Smooth Zombie</h1>
<h1 class=”vamp”>Vampire Diaries</h1>
</body>
</html>
Listado 88: Ejemplo de sombra del texto

En el Listado 89 se muestra la deﬁnición del estilo para los primeros

tres encabezados. En la Figura 222 se puede ver cómo se muestran estos
encabezados. El primer encabezado tiene una sombra simple, pero los
otros dos encabezados tienen una sombra compleja formada por múlti-
ples sombras superpuestas.

112 Ejemplo adaptado de https://css-tricks.com/almanac/properties/t/text-shadow/

Curso práctico avanzado

.simple {
background: #91877b;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
.otto {
background: #0e8dbc;
color: white;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
.relief {
background-color: #3a50d9;
color: #e0eﬀ2;
font: italic bold 100px Georgia, Serif;
text-shadow: -4px 3px 0 #3a50d9, -14px 7px 0 #0a0e27;
}
Listado 89: Ejemplo de sombra del texto (deﬁnición de estilos)

Figura 222: Ejemplo de sombra del texto

HTML & CSS

El Listado 90 contiene la deﬁnición de los estilos de los otros cuatro

encabezados. En la Figura 223 se puede ver cómo se visualizan estos
encabezados.

.close {
background-color: #ﬀf;
color: #202c2d;
text-shadow:
0 1px #808d93,
-1px 0 #cdd2d5,
-1px 2px #808d93,
-2px 1px #cdd2d5,
-2px 3px #808d93,
-3px 2px #cdd2d5,
-3px 4px #808d93,
-4px 3px #cdd2d5,
-4px 5px #808d93,
-5px 4px #cdd2d5,
-5px 6px #808d93,
-6px 5px #cdd2d5,
-6px 7px #808d93,
-7px 6px #cdd2d5,
-7px 8px #808d93,
-8px 7px #cdd2d5;
}
.printers {
background-color: #edde9c;
color: #bc2e1e;
text-shadow:
0 1px 0px #378ab4,
1px 0 0px #5dabcd,
1px 2px 1px #378ab4,
2px 1px 1px #5dabcd,
2px 3px 2px #378ab4,
3px 2px 2px #5dabcd,
3px 4px 2px #378ab4,
4px 3px 3px #5dabcd,
4px 5px 3px #378ab4,
5px 4px 2px #5dabcd,
5px 6px 2px #378ab4,

Curso práctico avanzado

6px 5px 2px #5dabcd,

6px 7px 1px #378ab4,
7px 6px 1px #5dabcd,
7px 8px 0px #378ab4,
8px 7px 0px #5dabcd;
}
.glow {
color: #444;
text-shadow:
1px 0px 1px #ccc, 0px 1px 1px #eee,
2px 1px 1px #ccc, 1px 2px 1px #eee,
3px 2px 1px #ccc, 2px 3px 1px #eee,
4px 3px 1px #ccc, 3px 4px 1px #eee,
5px 4px 1px #ccc, 4px 5px 1px #eee,
6px 5px 1px #ccc, 5px 6px 1px #eee,
7px 6px 1px #ccc;
}
.vamp {
color: #92a5de;
background: red;
text-shadow:0px 0px 0 rgb(137,156,213),1px 1px 0 rgb(129,148,205),2px 2px 0
rgb(120,139,196),3px 3px 0 rgb(111,130,187),4px 4px 0 rgb(103,122,179),5px 5px
0 rgb(94,113,170),6px 6px 0 rgb(85,104,161),7px 7px 0 rgb(76,95,152),8px 8px 0
rgb(68,87,144),9px 9px 0 rgb(59,78,135),10px 10px 0 rgb(50,69,126),11px 11px 0
rgb(42,61,118),12px 12px 0 rgb(33,52,109),13px 13px 0 rgb(24,43,100),14px 14px
0 rgb(15,34,91),15px 15px 0 rgb(7,26,83),16px 16px 0 rgb(-2,17,74),17px 17px 0
rgb(-11,8,65),18px 18px 0 rgb(-19,0,57),19px 19px 0 rgb(-28,-9,48), 20px 20px 0
rgb(-37,-18,39),21px 21px 20px rgba(0,0,0,1),21px 21px 1px rgba(0,0,0,0.5),0px
0px 20px rgba(0,0,0,.2);
}
Listado 90: Ejemplo de sombra del texto (deﬁnición de estilos)

HTML & CSS

Figura 223: Ejemplo de sombra del texto

Generar la sombra del texto a mano con la propiedad text-shadow

puede ser muy laborioso. Afortunadamente, existen muchas páginas
web que ofrecen herramientas online para generar el código CSS que
deﬁne una sombra del texto. Por ejemplo, en la Figura 224 se muestra
la herramienta “CSS3 Text Shadow Generator”113. A continuación se
muestra el código CSS que genera la sombra del texto que se puede ver
en la Figura 224:

text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);

Figura 224: CSS3 Text Shadow Generator

113 Disponible en http://css3gen.com/text-shadow/

Curso práctico avanzado

CSS Text Decoration Module Level 311 deﬁne

la propiedad text-shadow.

Conviene no abusar de la sombra del texto,

ya que puede diﬁcultar la lectura a ciertos
grupos de usuarios con baja visión.

Cambio de minúsculas y mayúsculas

La propiedad text-transform permite cambiar el texto de un elemento
para que se muestre en minúsculas o mayúsculas. Esta propiedad tiene
los siguientes posibles valores:
• capitalize: pone el primer carácter de cada palabra en mayús-
cula.
• uppercase: pone todos los caracteres de cada palabra en mayús-
culas.
• lowercase: pone todos los caracteres de cada palabra en minús-
culas.
• none: ningún efecto de cambio entre mayúsculas y minúsculas.

CSS Text Module Level 312 añade el valor

full-width que es útil cuando se repre-
sentan caracteres latinos y dígitos junto con
ideogramas empleados en idiomas como el
chino o el japonés.

HTML & CSS

Consejo
TODO EL TEXTO EN MAYÚSCULAS REDUCE LA VELOCIDAD DE LECTURA APROXI-
MADAMENTE EN UN DIEZ POR CIERTO. LAS LETRAS EN MAYÚSCULAS Y MINÚSCU-
LAS TIENEN VARIACIONES QUE ROMPEN EL TEXTO EN FORMAS RECONOCIBLES,
MIENTRAS QUE UN PÁRRAFO TODO EN MAYÚSCULAS TIENE UNA ALTURA Y
FORMA UNIFORMES, HACIENDO QUE PAREZCA FORMADO POR BLOQUES Y TODO
JUNTO. ADEMÁS, LA UTILIZACIÓN DE TODAS LAS LETRAS EN MAYÚSCULAS PUE-
DE PARECER INFANTIL Y DE AFICIONADOS, O AGRESIVO O POCO PROFESIONAL.
RESERVA TODO EN MAYÚSCULAS PARA LOS ENCABEZADOS Y TÍTULOS CORTOS,
Y PARA GRITAR.
Fuente: Prioritizing Web Usability. Jakob Nielsen, Hoa Loranger. New Riders, 2006

Esta propiedad se suele emplear con los encabezados de secciones, como se

muestra en el ejemplo del Listado 91 que se visualiza en la Figura 225: aunque
el texto de los encabezados <h1> y <h2> se haya escrito únicamente con la
primera letra en mayúsculas, al emplear la propiedad text-transform el
texto etiquetado con <h1> aparece todo en mayúsculas y el texto etiquetado
con <h2> aparece la primera letra de cada palabra en mayúsculas.

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Transformación del texto</title>
<style type=”text/css”>
h1 {text-transform: uppercase;}
h2 {text-transform: capitalize;}
</style>
</head>
<body>
<h1>Propiedades del borde</h1>
<h2>Ancho del borde</h2>
<p>
Las propiedades del ancho del borde especifican la medida del área del bor-
de. Las propiedades definidas en esta sección se refieren al tipo de valor de
border-width, que puede tomar uno de los siguientes valores:
thin, medium, thick.
</p>

Curso práctico avanzado

<h2>Color del borde</h2>

<p>
Las propiedades del color del borde especifican el color del borde de una caja.
</p>
<h2>Estilo del borde</h2>
<p>
Las propiedades del estilo del borde especifican el estilo de la línea del borde
de una caja (sólida, doble, punteada, etc.). Las propiedades definidas en esta
sección se refieren al tipo de valor de border-style, que puede estar constituido
por uno de los siguientes:
none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset.
</p>
</body>
</html>

Listado 91: Ejemplo de transformación del texto

Figura 225: Ejemplo de transformación del texto

Más información
https://youtu.be/lwhzMhnFB2I

Definición del estilo del texto

con CSS, text-align, text-indent,
text-decoration y text-transform.

HTML & CSS

Espaciado de letras, palabras y líneas

La propiedad letter-spacing permite indicar el comportamiento de
los espacios entre los caracteres del texto. Los valores que puede tomar
esta propiedad son normal para indicar el espaciado normal del tama-
ño del tipo de letra actual o una medida que se puede definir utilizando
diferentes unidades de medida, como, por ejemplo, px, pt, em, etc.
La propiedad word-spacing permite indicar el comportamiento de los
espacios entre las palabras. Esta propiedad puede tomar el valor normal
para indicar el espaciado normal correspondiente al tamaño del tipo de
letra actual o una medida.
Por otro lado, la propiedad line-height permite definir la altura de
cada elemento a nivel de línea, y mediante su modificación se puede
definir el interlineado del texto. Esta propiedad puede tomar el valor
normal para indicar una altura en base al tamaño del tipo de letra del
elemento o una medida.
En el ejemplo del Listado 92 se muestra cómo se pueden emplear
las propiedades letter-spacing, word-spacing y line-height para
modificar la presentación del texto. Los valores de letter-spacing y
word-spacing se han exagerado para que se aprecie cómo afectan a la
presentación del texto, tal como se puede ver en la Figura 226.

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Espaciado del texto</title>
<style type=”text/css”>
h1 {letter-spacing: 1em; word-spacing: 2em;}
h2 {letter-spacing: 0.5em; word-spacing: 1em;}
.unoymedio {line-height: 1.5em;}
.doble {line-height: 2em;}
</style>
</head>
<body>
<h1>Espaciado de letras y palabras</h1>
<h2>Espaciado de letras</h2>
<p class=”unoymedio”>
La propiedad letter-spacing especiﬁca el comportamiento de los espacios entre
los caracteres del texto.

Curso práctico avanzado

Los algoritmos para el espaciado de caracteres dependen de la aplicación del

usuario. El espaciado entre caracteres también puede ser influenciado por la
justificación (ver la propiedad ‘text-align’).
</p>
<h2>Espaciado de palabras</h2>
<p class=”doble”>
La propiedad word-spacing especifica el comportamiento de los espacios
entre palabras.
Los algoritmos para el espaciado entre palabras dependen de la aplicación
del usuario. Los espacios entre palabras también son influenciados por la
justificación (ver la propiedad ‘text-align’).
</p>
<h2>Interlineado</h2>
<p>
Las aplicaciones del usuario centran verticalmente los signos en una caja a
nivel de línea, agregando medio interlineado por encima y por debajo. Por
ejemplo, si un fragmento de texto es de ‘12pt’ de alto y el valor de ‘line-height’
es ‘14pt’, 2 puntos de espacio extra deberían ser agregados: 1pt encima y 1pt
abajo de las letras. (Esto se aplica también a las cajas vacías, como si la caja
vacía contuviera una letra infinitamente condensada.)
</p>
</body>
</html>

Listado 92: Ejemplo de espaciado del texto

Figura 226: Ejemplo de espaciado del texto

HTML & CSS

Cambiar el espaciado entre letras, palabras y

líneas puede afectar negativamente a la legi-
bilidad del texto y por tanto a la accesibilidad
de una página web.

Espacios en blanco
En HTML los espacios en blanco no son significativos, lo que signifi-
ca que no producen los efectos visuales de espaciado que normalmente
generan. Recordemos que se definen como espacios en blanco el espacio
(código 32 en ASCII y Unicode114), el tabulador (código 9), el avance o
salto de línea (código 10), el retorno de carro (código 13) y el avance de
página (código 12).
Sin embargo, la propiedad de CSS white-space permite indicar cómo
tratar los espacios en blanco dentro de un elemento. Esta propiedad
puede tomar los siguientes valores:
• normal: el comportamiento normal. Los saltos de línea se indican
con la etiqueta <br> y las líneas se cortan automáticamente para
ajustarse al ancho disponible.
• pre: el comportamiento es similar a la etiqueta <pre>, los saltos
de línea se producen por los saltos de línea que contenga el texto
o por los indicados con la etiqueta <br> y las líneas no se cortan
automáticamente.
• nowrap: similar al comportamiento normal, pero las líneas no se
cortan automáticamente.
En el ejemplo del Listado 93 se muestra el comportamiento de la pro-
piedad white-space con los tres valores comentados. En el ejemplo hay
tres párrafos con el mismo texto, que contiene saltos de línea, espacios,
tabuladores y la etiqueta <br>. En la Figura 227 se puede ver cómo se
muestra este ejemplo en un navegador.

114 Con el objetivo de lograr compatibilidad hacia atrás, los 128 primeros caracteres de Unicode coinciden
con los 128 caracteres de ASCII.

Curso práctico avanzado

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Espacios en blanco del texto</title>
</head>
<body>
<p>
Ciertas propiedades CSS son diseñadas sólo para ciertos medios (ej., la pro-
piedad ‘cue-before’ para las aplicaciones del usuario auditivas).
<br />
En ocasiones, sin embargo, las hojas de estilo para diferentes tipos de medios
pueden compartir una propiedad, pero requieren de valores diferentes para
esa propiedad.
Por ejemplo, la propiedad ‘font-size’ es útil para la pantalla y los medios
impresos.
Sin embargo, los dos medios son lo suﬁcientemente diferentes como para re-
querir diferentes valores para la propiedad común; un documento necesitará
típicamente una fuente mayor en una pantalla de computadora que sobre
papel.
</p>
<p style=”white-space: pre”>
Ciertas propiedades CSS son diseñadas sólo para ciertos medios (ej., la pro-
piedad ‘cue-before’ para las aplicaciones del usuario auditivas).
<br />
En ocasiones, sin embargo, las hojas de estilo para diferentes tipos de medios
pueden compartir una propiedad, pero requieren de valores diferentes para
esa propiedad.
Por ejemplo, la propiedad ‘font-size’ es útil para la pantalla y los medios
impresos.
Sin embargo, los dos medios son lo suﬁcientemente diferentes como para re-
querir diferentes valores para la propiedad común; un documento necesitará
típicamente una fuente mayor en una pantalla de computadora que sobre
papel.
</p>
<p style=”white-space: nowrap”>
Ciertas propiedades CSS son diseñadas sólo para ciertos medios (ej., la pro-
piedad ‘cue-before’ para las aplicaciones del usuario auditivas).
<br />

HTML & CSS

En ocasiones, sin embargo, las hojas de estilo para diferentes tipos de medios
pueden compartir una propiedad, pero requieren de valores diferentes para
esa propiedad.
Por ejemplo, la propiedad ‘font-size’ es útil para la pantalla y los medios
impresos.
Sin embargo, los dos medios son lo suﬁcientemente diferentes como
para requerir diferentes valores para la propiedad común; un documento ne-
cesitará típicamente una fuente mayor en una pantalla de computadora que
sobre papel.
</p>
</body>
</html>
Listado 93: Ejemplo de espacios en blanco del texto

Figura 227: Ejemplo de espacios en blanco del texto

El último párrafo tiene deﬁnido white-space: nowrap, por lo que las

líneas de texto no se “rompen” para que quepan en el área de visualiza-
ción de la ventana del navegador. Como se puede ver en la Figura 228,
el zoom de la página hay que reducirlo a un 50% para que se pueda ver
el contenido en su totalidad sin la barra de desplazamiento horizontal.

Curso práctico avanzado

Figura 228: Ejemplo de espacios en blanco del texto (zoom reducido al 50%)

Más información
https://youtu.be/sui6ru74PT8

Deﬁnición del estilo del texto con

CSS, letter-spacing, word-spac-
ing, line-height y white-space.

17
Tablas

Las tablas se emplean para presentar datos y relaciones entre los

datos en una rejilla de dos dimensiones. La presentación visual de las
tablas se puede modiﬁcar mediante CSS para facilitar la interpretación
de los datos.
Los objetivos de este capítulo son:
• Aprender a utilizar los atributos de CSS que permiten modiﬁcar
la presentación visual de una tabla de datos.
En este capítulo se explican las propiedades de CSS: border-collap-
se, border-spacing, caption-side y vertical-align.
En este capítulo se explican las pseudoclases:nth-child(x) y :first-
child.

Los antiguos atributos de la tabla

En versiones anteriores de HTML5 existían los siguientes atributos de
la etiqueta <table>, que se podían utilizar para modiﬁcar la presenta-
ción visual de una tabla:
• align=”left”|“center”|“right”: especiﬁca el alineamiento de
la tabla respecto el contenido que la rodea.

HTML & CSS

• border=”n”: indica el grosor del borde exterior de la tabla y de las

líneas delimitadoras interiores. Un valor 0 produce que no tenga
borde (borde invisible).
• cellpadding=”n”: determina el espacio que debe existir entre los
bordes de cada celda y el contenido de la celda.
• cellspacing=”n”: especifica la cantidad de espacio que debe
existir entre celdas contiguas.
• summary=”texto”: define un resumen de la tabla.
• width=”n”|“n%”: ancho de la tabla. Se puede indicar en píxelEs
o en tanto por ciento en relación a la anchura total disponible.
• En versiones anteriores de HTML5 también existían los siguientes
atributos de las etiquetas <tr>, <th> y <td>:
• align=”left”|“center”|“right”|“justify”: alineación ho-
rizontal del contenido de una fila (<tr>) o de una celda (<th> y
<td>).
• valign=”baseline”|“bottom”|“middle”|“top”: alineación ver-
tical del contenido de una una fila (<tr>) o de una celda (<th> y
<td>).

En HTML5 no existen los atributos de HTML

que permitían modiﬁcar la presentación de
una tabla.

Todos estos atributos ya no existen en HTML5 y su función se realiza

ahora con CSS. Estos atributos ya no se deben emplear y en su lugar se
deben utilizar reglas de CSS como las mostradas en el Listado 94:
• cellpadding se debe sustituir por la propiedad padding de CSS.
• cellspacing se debe sustituir por las propiedades border-co-
llapse y border-spacing de CSS.

Curso práctico avanzado

• valign se debe sustituir por la propiedad vertical-align de

CSS.
• align se debe sustituir por la propiedad margin de CSS.

// cellpadding
th, td { padding: 5px; }
// cellspacing
table { border-collapse: separate; border-spacing: 5px; } // cellspacing=”5”
table { border-collapse: collapse; border-spacing: 0; } // cellspacing=”0”
// valign
th, td { vertical-align: top; }
// align (center)
table { margin: 0 auto; }
Listado 94: Simulación de atributos de tabla con CSS

Por ejemplo, el código del Listado 95 muestra una tabla cuyos bordes
han sido modiﬁcados con las propiedades border, border-spacing y
border-collapse. Con estas modiﬁcaciones, la tabla se visualiza (Figura
229) de la misma forma que la tabla que se había creado con caracteres
y la etiqueta <pre> (Figura 93).

HTML & CSS

border-collapse: collapse;
font-family: monospace;
}
th, td {
font-weight: normal;
padding-top: 8px;
padding-bottom: 8px;
text-align: left;
vertical-align: top;
border: 1px solid #000;
}
th.right, td {
width: 40px;
text-align: right;
}
</style>
</head>
<body>
<table>
<tr>
<th>Mes</th><th class=”right”>Agua</th><th class=”right”>Gas</th>
</tr>
<tr>
<th>enero</th><td>1200</td><td>5720</td>
</tr>
<tr>
<th>febrero</th><td>2000</td><td>4000</td>
</tr>
<tr>
<th>marzo</th><td>1500</td><td>6000</td>
</tr>
<tr>
<th>abril</th><td>500</td><td>3000</td>
</tr>
</table>
</body>
</html>
Listado 95: Tabla con bordes modiﬁcados

Curso práctico avanzado

Figura 229: Tabla con bordes modiﬁcados

El título de la tabla
El título de una tabla se deﬁne con el elemento <caption>. Por de-
fecto el título de una tabla aparece en la parte superior de la tabla, pero
la posición se puede cambiar con la propiedad caption-side de CSS.
Esta propiedad puede tomar los valores:
• top: en la parte superior de la tabla, el valor por defecto.
• bottom: en la parte inferior de la tabla.
El Listado 96 contiene el código de una página web que posee dos
tablas. Como se puede ver en la Figura 230, el título de la primera tabla
aparece en la parte superior, mientras que el título de la segunda tabla
aparece en la parte inferior porque se ha aplicado la clase titulo-in-
ferior que tiene la regla caption-side: bottom.

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Tabla con título</title>
<style>
table, th, td {
border: 1px solid #000;
}
.titulo-inferior {
caption-side: bottom;
}
</style>

HTML & CSS

</head>
<body>
<p>Una tabla con gastos:</p>
<table>
<caption>Gastos de agua y gas en los meses enero, febrero, marzo y abril</
caption>
<tr>
<th>Mes</th><th class=”right”>Agua</th><th class=”right”>Gas</th>
</tr>
<tr>
<th>enero</th><td>1200</td><td>5720</td>
</tr>
<tr>
<th>febrero</th><td>2000</td><td>4000</td>
</tr>
<tr>
<th>marzo</th><td>1500</td><td>6000</td>
</tr>
<tr>
<th>abril</th><td>500</td><td>3000</td>
</tr>
</table>
<p>Otra tabla con gastos:</p>
<table class=”titulo-inferior”>
<caption>Gastos de agua y gas en los meses enero, febrero, marzo y abril</
caption>
<tr>
<th>Mes</th><th class=”right”>Agua</th><th class=”right”>Gas</th>
</tr>
<tr>
<th>enero</th><td>1200</td><td>5720</td>
</tr>
<tr>
<th>febrero</th><td>2000</td><td>4000</td>
</tr>
<tr>
<th>marzo</th><td>1500</td><td>6000</td>
</tr>
<tr>

Curso práctico avanzado

<th>abril</th><td>500</td><td>3000</td>
</tr>
</table>
</body>
</html>
Listado 96: Ejemplo de tabla con la posición del título modiﬁcada

Figura 230: Ejemplo de tabla con la posición del título modiﬁcada

Estilo cebra
El estilo cebra o en franjas consiste en colorear de forma alternativa
las filas que forman una tabla. Este estilo busca dos objetivos principales:
• Mejorar la presentación visual de las tablas con un estilo más
estético.
• Ayudar al usuario a consultar la tabla, ya que ayuda a guiar el
ojo para que siga los datos que forman una fila.
La forma tradicional de lograr esta presentación es definiendo una o
dos clases de CSS que se aplican a las filas de la tabla de forma alterna-
da. Sin embargo, esta solución tiene dos problemas muy importantes:
requiere mucho trabajo manual y se pueden producir inconsistencias si
se añaden o eliminan filas de la tabla una vez finalizada.
© Alfaomega - Altaria 405
HTML & CSS

Otra forma mejor es utilizar JavaScript y DOM para asignar las cla-
ses a las ﬁlas de forma dinámica. Esta solución no tiene los problemas
que presenta la primera solución, pero tiene el inconveniente de ser una
solución pesada que requiere la ejecución de código.

CSS Selectors Level 3 13 añade las nue-

vas pseudoclases estructurales : n t h -
child(),:nth-last-child(), :first-
child y :last-child.

La mejor forma es utilizar la pseudoclase :nth-child(x) de CSS3,

que se aplica al elemento que ocupa la posición x entre sus hermanos.
Esta pseudoclase se puede escribir de la forma :nth-child(an+b),
donde a y b son valores que se pueden conﬁgurar y n es un contador que
comienza desde 0. Además, también se pueden emplear las expresiones
:nth-child(even), que selecciona los elementos que ocupan una posi-
ción par y :nth-child(odd), que selecciona los elementos que ocupan
una posición impar.
En el siguiente ejemplo del Listado 97 se muestra el uso de esta pseu-
doclase para lograr el efecto cebra que se puede ver en la Figura 231.

Curso práctico avanzado

th, td {
font-weight: normal;
padding-top: 8px;
padding-bottom: 8px;
text-align: left;
vertical-align: top;
border: 1px solid #000;
}
th.right, td {
width: 40px;
text-align: right;
}
tr:nth-child(odd) {
background-color: #AAA;
}
tr:nth-child(1) {
color: #FFF;
background-color: #000;
}
</style>
</head>
<body>
<table>
<tr>
<th>Mes</th><th class=”right”>Agua</th><th class=”right”>Gas</th>
</tr>
<tr>
<th>enero</th><td>1200</td><td>5720</td>
</tr>
<tr>
<th>febrero</th><td>2000</td><td>4000</td>
</tr>
<tr>
<th>marzo</th><td>1500</td><td>6000</td>
</tr>
<tr>
<th>abril</th><td>500</td><td>3000</td>
</tr>
</table>
</body>
</html>
Listado 97: Tabla con estilo cebra
© Alfaomega - Altaria 407
HTML & CSS

Figura 231: Tabla con estilo cebra

La regla tr:nth-child(1) se ha empleado para deﬁnir un estilo es-

pecial para la primera ﬁla de la tabla (texto blanco sobre fondo negro).
En vez de tr:nth-child(1) se podría haber utilizado tr:first-child
que también selecciona la primera ﬁla de la tabla.
El orden de esta regla en el CSS es muy importante, ya que si se
hubiera escrito en un orden diferente el resultado podría haber sido
distinto. Por ejemplo, si se intercambia el orden de tr:nth-child(1) y
tr:nth-child(odd):

tr:nth-child(1) {
color: #FFF;
background-color: #000;
}
tr:nth-child(odd) {
background-color: #AAA;
}

se obtiene el resultado que se puede ver en la Figura 232.

Figura 232: Tabla con estilo cebra diferente

18
Transformaciones

CSS3 incluye propiedades nuevas que permiten realizan transforma-

ciones geométricas en la presentación de los elementos de una página
web. Estas propiedades facilitan el desarrollo de las páginas web, ya
que eliminan la necesidad de utilizar código JavaScript para realizar las
transformaciones. Además, al eliminar parte del código JavaScript se
mejora la compatibilidad con los diferentes navegadores web y se reduce
el tamaño de las páginas web, lo que reduce el tiempo de descarga de
las páginas web.
Los objetivos de este capítulo son:
• Aprender a utilizar la propiedad transform para realizar trans-
formaciones geométricas en la presentación de los elementos de
una página web.
En este capítulo se explican la propiedad de CSS transform y las
funciones scale(), rotate(), skew() y translate().

Introducción
CSS3 añade nuevas propiedades que permiten realizar transformacio-
nes de los elementos presentados en una página web sin necesidad de
utilizar JavaScript o alguna librería basada en JavaScript como jQuery115
o Zepto.js116. Esto supone una gran ventaja, ya que el uso de JavaScript
115 Disponible en https://jquery.com/
116 Disponible en http://zeptojs.com/

HTML & CSS

requiere poseer conocimientos de programación, mientras que con las

nuevas propiedades de CSS3 simplemente hay que escribir reglas utili-
zando la sintaxis de CSS y ajustar unos pocos parámetros para lograr
el efecto deseado.
La propiedad transform permite cuatro transformaciones básicas
de un elemento: scale (escalar), rotate (rotar), skew (sesgar o inclinar) y
translate (trasladar).

CSS Transforms Module Level 1 14 define

las nuevas propiedades para transformar la
presentación de los elementos de una página
web.

Escalar
La función scale() permite modiﬁcar el tamaño del elemento. Esta
función recibe dos parámetros: el valor X para el eje horizontal y el valor
Y para el eje vertical. Si sólo recibe un valor, ese valor es aplicado a am-
bos ejes. Los valores entre 0 y 1 reducen las dimensiones del elemento,
un valor de 1 mantiene la dimensión original y los valores mayores que
1 aumentan las dimensiones del elemento.
En la Figura 233 se muestra un elemento con su tamaño original. El
elemento está compuesto de un rectángulo con bordes redondeados que
en su interior posee el texto “CSS3.0 Transform”.

Figura 233: Elemento con escala normal

Curso práctico avanzado

En la Figura 234 se muestra el elemento de la ﬁgura anterior pero

después de realizarse una transformación que ha modiﬁcado su anchura.
Esta transformación se logra con la siguiente regla de CSS que modiﬁca
el eje horizontal a la mitad (0.5), pero mantiene las dimensiones del eje
vertical (1.0):

transform: scale(0.5, 1.0);

Figura 234: Elemento con escala 0,5 en el eje horizontal

En la Figura 235 se muestra el mismo elemento pero con otra trans-

formación. En este ejemplo se ha modiﬁcado el eje vertical a la mitad
(0.5), pero se ha mantenido el eje horizontal (1.0). Para lograr esta trans-
formación se tiene que aplicar la siguiente regla de CSS:

transform: scale(1.0, 0.5);

Figura 235: Elemento con escala 0,5 en el eje vertical

También se puede realizar una transformación parcial del eje hori-

zontal o del eje vertical utilizando las funciones scaleX() y scaleY().

HTML & CSS

Rotar
La función rotate() rota o gira un elemento el número de grados
indicados en el sentido de las agujas del reloj. Si el número de grados
es un valor negativo, la rotación se realiza en el sentido contrario a las
agujas del reloj.
El ángulo de rotación se puede indicar con diferentes unidades de
medida:
• deg: grado sexagesimal. Hay 360 grados sexagesimales en una
circunferencia completa.
• grad: grado centesimal, gon o gradián. Hay 400 grados centesi-
males en una circunferencia completa.
• rad: radián. Hay 2π radianes en una circunferencia completa.
• turn: giro. Hay 1 giro en una circunferencia completa.
Un mismo ángulo se puede indicar con cualquiera de las cuatro uni-
dades. Por ejemplo, un ángulo recto se puede representar como 90deg,
100grad, 0.25turn o aproximadamente 1.570796326794897rad.
En la Figura 236 se muestra un elemento que ha sido girado 340
grados con la siguiente regla de CSS:

transform: rotate(340deg) ;

El mismo efecto se puede lograr si se realiza el giro en sentido contrario con

la siguiente regla de CSS:

transform: rotate(-20deg) ;

Figura 236: Elemento girado 340 grados

Curso práctico avanzado

En la Figura 237 se muestra el mismo elemento invertido. Este resul-

tado se puede lograr con un giro de 180 grados:

transform: rotate(180deg) ;

Figura 237: Elemento girado 180 grados

El mismo efecto se puede lograr si se realiza el giro en sentido contrario

con la siguiente regla de CSS:

transform: rotate(-180deg) ;

Sesgar
La función skew(), que se puede traducir como sesgar o inclinar,
permite inclinar un elemento y cambiar la simetría del eje horizontal y
vertical. Esta función recibe dos parámetros: el primero para el eje hori-
zontal y el segundo para el eje vertical. Si sólo se proporciona un valor,
el segundo parámetro toma el valor 0.
Por ejemplo, en la Figura 238 se ha aplicado un sesgo de -16 grados
en el eje vertical con la siguiente regla de CSS:

transform: skew(0deg, -16deg) ;

Figura 238: Sesgo de -16 grados en el eje vertical

HTML & CSS

En la Figura 239 se muestra el mismo elemento pero con un sesgo de

-16 grados en el eje horizontal:

transform: skew(-16deg, 0deg) ;

Figura 239: Sesgo de -16 grados en el eje horizontal

Por último, en la Figura 240 se ha aplicado un sesgo de 5 grados tanto

al eje horizontal como al eje vertical:

transform: skew(5deg, 5deg) ;

Figura 240: Sesgo de 5 grados en el eje horizontal y vertical

También se puede realizar una inclinación parcial del eje horizontal o

del eje vertical utilizando las funciones skewX() y skewY().

Curso práctico avanzado

Trasladar
La función translate() traslada un elemento de posición. Esta
función recibe dos parámetros, el primero para la translación en el eje
horizontal y el segundo para la translación en el eje vertical. Si sólo se
proporciona un valor, el segundo parámetro toma el valor 0.
También se puede realizar una parcial en el eje horizontal o en el eje
vertical utilizando las funciones translateX() y translateY().

Varias transformaciones a la vez

Sobre un mismo elemento se pueden aplicar varias transformaciones
a la vez. Por ejemplo, la siguiente regla de CSS rota el elemento 347 gra-
dos, aumenta su tamaño en un 20% (escala 1.2), lo inclina -45 grados
y por último lo traslada 5 píxeles hacia la izquierda (-5px). El resultado
de esta transformación se muestra en la Figura 241:

transform: rotate(347deg) scale(1.2) skew(-45deg) translate(-5px);

Figura 241: Elemento con varias transformaciones simultáneas

19
Transiciones

CSS3 incluye nuevas propiedades que permiten realizan transiciones

en las propiedades de CSS. Gracias a las transiciones se pueden rea-
lizar pequeñas animaciones como, por ejemplo, cambiar el color de un
elemento o cambiar su tamaño de un elemento. Estas propiedades faci-
litan el desarrollo de las páginas web, ya que eliminan la necesidad de
utilizar código JavaScript para realizar animaciones y cambios sencillos
en una página web. Además, al eliminar parte del código JavaScript, se
mejora la compatibilidad con los diferentes navegadores web y se reduce
el tamaño de las páginas web, lo que reduce el tiempo de descarga de
las páginas web.
Los objetivos de este capítulo son:
• Aprender a utilizar la propiedad transition para realizar tran-
siciones en la presentación de los elementos de una página web.
En este capítulo se explican las propiedades de CSS: transition,
transition-property, transition-duration, transition-delay
y transition-timing-function.

Introducción
CSS3 añade nuevas propiedades que permiten realizar transiciones
en una página web sin necesidad de utilizar JavaScript

HTML & CSS

basada en JavaScript como jQuery117 o Zepto.js118. Esto supone una gran

ventaja, ya que el uso de JavaScript requiere poseer conocimientos de
programación, mientras que con las nuevas propiedades de CSS3 sim-
plemente hay que escribir reglas utilizando la sintaxis de CSS y ajustar
unos pocos parámetros para lograr el efecto deseado.
La propiedad transition permite cambiar los valores de una propie-
dad, desde un valor inicial a un valor final. Una transición se define con
los siguientes parámetros:
• transition-property: define la propiedad que va a experimentar
la transición. Permite definir un conjunto de propiedades separa-
das por comas.
• transition-duration: define la duración de la transición.
• transition-delay: define el retraso de la transición entre el
momento en que se activa el cambio de una propiedad y el inicio
de la transición.
• transition-timing-function: define la función de intervalo o
de temporarización de la transición que se emplea para calcular
los valores intermedios entre el valor inicial y el valor final.
La propiedad transition permite escribir las cuatro propiedades que
definen una transición mediante una sola propiedad.

CSS Transitions15 deﬁne las nuevas propie-

dades para definir las transiciones en las
propiedades de CSS.

117 Disponible en https://jquery.com/

118 Disponible en http://zeptojs.com/

Curso práctico avanzado

Propiedades que pueden ser animadas

No todas las propiedades de CSS se pueden animar. Sólo se pueden
animar aquellas en las que se puede establecer un valor inicial, un valor
ﬁnal y aplicar una función para interpolar los valores intermedios entre
los dos extremos.
En la Tabla 21 se recogen las propiedades de CSS que pueden ser
animadas. En la columna “Tipo de valor” se indica el tipo de valor que
puede ser asignado a la propiedad: un color, un porcentaje, una longitud,
unas coordenadas de un rectángulo, un peso del tipo de letra, un cálculo
aritmético o un número entero.

Propiedad Tipo de valor

HTML & CSS

max-width Porcentaje | longitud | cálculo

Tabla 21: Propiedades de CSS que pueden ser animadas

En el Listado 98 se muestra un ejemplo de uso de la propiedad tran-

sition para cambiar el color de fondo de los elementos de una lista <ul>.
Cuando un elemento de la lista <li> cambia al estado hover (ﬂotar),
se activa la regla de CSS li:hover, que cambia el color de fondo del
elemento de amarillo a rojo. Este cambio se produce en 2 segundos, que
es el valor indicado en la propiedad transition-duration.

Curso práctico avanzado

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Prueba de transition</title>
<style type=”text/css”>
li {
transition: background-color 1s;
background: yellow;
}
li:hover {
background-color: red;
transition-duration: 2s;
}
</style>
</head>
<body>
<p>Principios de la accesibilidad web:</p>
<ul>
<li>Perceptible</li>
<li>Operable</li>
<li>Comprensible</li>
<li>Robusto</li>
</ul>
</body>
</html>
Listado 98: Ejemplo de uso de transition

Posteriormente, cuando el cursor del ratón deja de estar encima del

elemento de la lista, el elemento deja de estar en el estado hover y el
color de fondo del elemento vuelve a ser amarillo. Este cambio se realiza
mediante otra transición, que tiene una duración de 1 segundo.
En la Figura 242 se muestra la página web del Listado 98 antes de
iniciarse una transición. Por defecto, el color de fondo de todos los ele-
mentos de la lista es el amarillo. Cuando el cursor del ratón se sitúa sobre
uno de los elementos de la lista, se activa la transición que modiﬁca el
color de fondo del elemento.

HTML & CSS

Figura 242: Página web antes de una transición

En la Figura 243 se muestra la página web después de que haya ﬁna-

lizado una transición. En este ejemplo, el cursor del ratón se ha situado
sobre el último elemento de la lista y el color de fondo ha cambiado de
amarillo a rojo.

Figura 243: Página web después de una transición

Funciones de intervalos de transición

La propiedad transition-timing-function define la función de
intervalo o de temporarización de una transición. La función de intervalo
determina el cálculo de los valores intermedios que toma una propiedad
entre el valor inicial y el valor final.
La función de intervalo se especifica mediante una curva definida con
una función de Bézier de cuatro puntos como la que se muestra en la
Figura 244. Alterando la posición de los cuatro puntos P0, P1, P2 y P3 se
definen distintas curvas.

Figura 244: Curva de Bézier para la función de transición

Curso práctico avanzado

La curva de Bézier se deﬁne con la función cubic-bezier(), que

recibe cuatro parámetros. Además, en lugar de especificar una curva de
Bézier, existen varias funciones predeterminadas:
• ease: equivalente a cubic-bezier(0.25, 0.1, 0.25, 1.0),
define un inicio lento, después rápido y, por último, un final lento.
Es el valor por defecto.
• linear: equivalente a cubic-bezier(0.0, 0.0, 1.0, 1.0),
define una transición con la misma velocidad desde el inicio hasta
el final.
• ease-in: equivalente a cubic-bezier(0.42, 0, 1.0, 1.0),
define una transición con un inicio lento.
• ease-out: equivalente a cubic-bezier(0, 0, 0.58, 1.0), de-
fine una transición con un final lento.
• ease-in-out: equivalente a cubic-bezier(0.42, 0, 0.58,
1.0), define una transición con un inicio y un final lento.
En la Figura 245 se muestra la página principal de “CSS Easing Ani-
mation Tool (Ceaser)”119, una herramienta en línea que ayuda a calcular
de forma gráfica una curva de Bézier para ser usada con la propiedad
transition.

Figura 245: Página principal de Ceaser

119 Disponible en http://matthewlein.com/ceaser/

HTML & CSS

En la Figura 246 se muestra una curva de Bézier en la que la tran-

sición es lenta al inicio y rápida al ﬁnal. Esta curva genera la siguiente
propiedad de CSS:

transition-timing-function: cubic-bezier(0.880, 0.085, 0.885, 0.170);

Figura 246: Transición lenta al inicio y rápida al principio

En la Figura 247 se muestra una curva de Bézier en la que la tran-

sición es rápida al inicio y lenta al ﬁnal. Esta curva genera la siguiente
propiedad de CSS:

transition-timing-function: cubic-bezier(0.110, 0.875, 0.225, 0.945);

Figura 247: Transición rápida al inicio y lenta al ﬁnal

En el Listado 99 se muestra un ejemplo en el que se hace uso de dos

funciones de temporarización, la función ease-in y la función cubic-
bezier(), para deﬁnir una transición en la anchura de un párrafo de
424 © Alfaomega - Altaria
Curso práctico avanzado

texto. Cuando el cursor del ratón se sitúa encima del párrafo de texto,
su anchura aumenta desde 100 píxeles hasta 300 píxeles.

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Prueba de transition</title>
<style type=”text/css”>
p{
width: 100px;
height: 100px;
background: red;
transition: width ease-in 3s;
}
p:hover {
width: 300px;
transition: width cubic-bezier(0.110, 0.875, 0.225, 0.945) 1s;
}
</style>
</head>
<body>
<p>Un párrafo de texto.</p>
</body>
</html>
Listado 99: Ejemplo de transición con función de intervalo

En la Figura 248 se muestra el párrafo antes de iniciarse la transición.

Cuando el cursor del ratón se sitúa encima del párrafo, su anchura se
triplica hasta llegar al tamaño que se muestra en la Figura 249.

Figura 248: Página web antes de una transición

HTML & CSS

Figura 249: Página web después de una transición

20
Diseño

El diseño de una página web consiste en planear e implementar la

presentación del contenido de una página web antes de su desarrollo. Un
buen diseño debe tener en cuenta no sólo el aspecto visual, sino otros
factores relacionados con la interacción del usuario con la página web,
como la navegabilidad, la usabilidad, la accesibilidad y la arquitectura
de la información. En este capítulo sólo se van a ver los aspectos rela-
cionados con la presentación visual que se definen mediante CSS.
Los objetivos de este capítulo son:
• Conocer el concepto de maquetación de una página web.
• Conocer el modelo de caja de CSS.
• Aprender a controlar el borde, el margen y el relleno de los ele-
mentos.
• Conocer las propiedades de CSS que permiten definir la posición
de los elementos.
• Aprender las diferencias entre un diseño fijo, un diseño líquido,
un diseño elástico y un diseño adaptativo.
• Aprender algunas técnicas de maquetación.
En este capítulo se explican las propiedades de CSS: padding, bor-
der, margin, display, position, float, clear y overflow.

HTML & CSS

Maquetación de una página web

Según el Diccionario de la Lengua de la Real Academia Española120 de
la Real Academia Española, maquetar es “Hacer la maqueta de una publicación
que se va a imprimir”. Si buscamos la palabra maqueta, obtenemos varias
acepciones y una de ellas dice: “Boceto previo de la composición de un texto que
se va a publicar, usado para determinar sus características deϔinitivas”.
En el desarrollo de las páginas web, se entiende por maquetación a la
acción de distribuir o posicionar los distintos elementos que queremos
que aparezcan en una página web.
La maquetación de una página web se puede realizar con “lápiz y
papel”, pero también se pueden emplear herramientas informáticas es-
pecíﬁcas para deﬁnir su maquetación de una página web.
Por ejemplo, en la Figura 250 se muestra la página principal de Pen-
cil121, una herramienta gratuita que permite maquetar páginas web y
prototipar las interfaces de usuario de páginas web y de aplicaciones.

Figura 250: Página principal de Pencil

Por ejemplo, en la Figura 251 se muestra la página principal de Google.

En la Figura 252 se muestra ésta página maquetada con la herramienta
Pencil.

120 Disponible en http://www.rae.es/

121 Disponible en http://pencil.evolus.vn/

Curso práctico avanzado

En la maquetación de una página web no es necesario tener en cuenta

aspectos como los colores o los tipos de letra. En la maquetación, lo más
importante es estudiar la disposición de los diferentes elementos en ella.

Figura 251: Página principal de Google

Figura 252: Página principal de Google maquetada con Pencil

HTML & CSS

Una vez maquetada una página web, se puede pasar a su desarrollo

con HTML y CSS. HTML se emplea para definir su estructura y conte-
nido, mientras que CSS se emplea para definir la presentación visual.
Para definir la posición espacial de los elementos de una página web es
necesario conocer el modelo de caja de CSS.

Más información
https://youtu.be/9HVBvwPp1MA

Qué es la maquetación de una

página web: deﬁnición de la es-
tructura, diseño o composición
(layout o mockup), maquetación
por bloques.

https://youtu.be/N7p3OMM1wII

Niveles de maquetación, macro

y micro.

El modelo de caja
El modelo de caja (en inglés box model) de CSS describe las cajas rec-
tangulares que son generadas por los elementos de la estructura del
documento. Cada caja tiene un área de contenido como, por ejemplo
un texto o una imagen, y las áreas circundantes opcionales del relleno
(padding), el borde (border) y el margen (margin). La Figura 253 mues-
tra cómo se relacionan las cuatro áreas y la forma de referirse a cada
una de ellas: el área de contenido es la de más adentro y el resto están
anidadas unas dentro de las otras.

Curso práctico avanzado

Figura 253: El modelo de caja de CSS

Las áreas padding, border y margin pueden ser divididas en los

segmentos o límites top (arriba), right (derecha), bottom (abajo) y left
(izquierda). Por ejemplo, en la Figura 253, ML significa margin-left,
PR significa padding-right, BT significa border-top y, así con el resto
de segmentos.
Los navegadores modernos incluyen opciones para visualizar el mo-
delo de caja de cualquier elemento de una página web. Por ejemplo, en
la Figura 254 se muestra la página principal del W3C122 en el navegador
Google Chrome. En el navegador se han activado las “Herramientas para
desarrolladores” (Ctrl+Mays+I) que permiten visualizar el código HTML
de la página, los estilos CSS aplicados y el modelo de caja. En la parte
izquierda de la figura se puede ver un párrafo con una imagen que ha
sido seleccionado; en la parte de la derecha se muestra el modelo de caja
de ese párrafo con las dimensiones de cada una de sus partes.

122 Disponible en http://www.w3.org/

HTML & CSS

Figura 254: Visualización del modelo de caja en Google Chrome

En la Figura 255 se muestra el modelo de caja que visualiza el na-

vegador Google Chrome para el párrafo de texto que aparece destacado
en la Figura 254. En el modelo de caja se indican las dimensiones de:
• El contenido (en color azul): 289.200 x 301 píxeles.
• El padding (en color verde): 20 píxeles arriba, a la derecha y a la
izquierda.
• El borde y el margen están a cero.

Figura 255: El modelo de caja en Google Chrome

Curso práctico avanzado

En la Figura 256 se muestra otra vez la página principal del W3C en

Mozilla Firefox. También se han activado las herramientas para desa-
rrolladores de este navegador web.

Figura 256: Visualización del modelo de caja en Mozilla Firefox

En la Figura 257 se muestra el modelo de caja que visualiza el nave-

gador Mozilla Firefox para el párrafo de texto que aparece destacado en
la Figura 256. En el modelo de caja se indican las dimensiones de:
• El contenido (en color azul): 289 x 298 píxeles.
• El padding (en color verde): 20 píxeles arriba, a la derecha y a la
izquierda.
• El borde y el margen están a cero.

Figura 257: El modelo de caja en Mozilla Firefox

HTML & CSS

El estilo del fondo de las distintas áreas de una caja es determinado

como sigue:
• Área del contenido: la propiedad background del elemento gene-
rador.
• Área del relleno (padding): la propiedad background del elemento
generador.
• Área del borde (border): las propiedades del borde del elemento
generador.
• Área del margen (margin): los márgenes son siempre transpa-
rentes, por lo que aparentemente tienen como estilo del fondo la
propiedad background del elemento contenedor.
El área del contenido y el área de relleno comparten siempre el mismo
estilo del fondo. A continuación se explican de forma detallada el relleno,
el borde y el margen de un elemento.

El relleno
Las propiedades del relleno especifican el ancho del área de relleno de
una caja. La propiedad resumida padding define el relleno para los cuatro
lados padding-top, padding-right, padding-bottom y padding-left.
Los valores de relleno no pueden ser negativos.
Cuando se emplea la propiedad resumida padding, si sólo hay un valor,
se aplica a todos los lados del elemento. Si hay dos valores, los rellenos
superior e inferior son determinados por el primer valor y los rellenos
derecho e izquierdo son determinados por el segundo. Si hay tres valo-
res, el superior es definido por el primer valor, el izquierdo y el derecho
son definidos por el segundo, y el inferior es definido por el tercero. Si
hay cuatro valores, ellos se aplican empezando por el relleno superior y
girando en el sentido de las agujas del reloj: superior, derecho, inferior
e izquierdo, respectivamente.
Por ejemplo, en el Listado 100 se muestran varias formas de definir
el relleno de un párrafo. Para cada regla de CSS se ha indicado con un
comentario la interpretación de la regla.

Curso práctico avanzado

/* Todos los rellenos en 2em */

p {padding: 2em;}

/* padding-top y padding-bottom = 1em,

padding-right y padding-left = 2em */
p {padding: 1em 2em;}

/* padding-top = 1em,
padding-right y padding-left = 2em,
padding-bottom = 3em */
p {padding: 1em 2em 3em;}

/* padding-top = 1em,
padding-right = 2em,
padding-bottom = 3em,
padding-left = 4em */
p {padding: 1em 2em 3em 4em;}
Listado 100: Asignación de valores en la propiedad padding

La última regla del Listado 100 es equivalente a la siguiente regla de

CSS:

p{
padding-top: 1em;
padding-right: 2em;
padding-bottom: 3em;
padding-left: 4em;
}

El borde
Las propiedades del borde especiﬁcan el ancho, el color y el estilo del
área del borde de una caja que se dibuja a su alrededor. A continuación
se explican de forma detallada estas tres propiedades:
• border-width: la anchura del borde.
• border-color: el color del borde.
• border-style: el estilo del borde.
Además, también se explica la propiedad resumida border, que permi-
te establecer las tres propiedades anteriores con una sola regla de CSS.

HTML & CSS

Ancho del borde

La propiedad resumida border-width deﬁne el ancho del borde para

los cuatro lados border-top-width, border-right-width, border-
bottom-width y border-left-width. El ancho del borde no puede ser
negativo.
Cuando se emplea la propiedad resumida border-width, si hay sólo
un valor, se aplica a todos los lados. Si hay dos valores, los bordes supe-
rior e inferior son determinados por el primer valor y los bordes derecho
e izquierdo son determinados por el segundo valor. Si hay tres valores,
el superior es definido por el primer valor, el izquierdo y el derecho son
definidos por el segundo, y el inferior es definido por el tercero. Si hay
cuatro valores, ellos se aplican empezando por el borde superior y gi-
rando en el sentido de las agujas del reloj: superior, derecho, inferior e
izquierdo, respectivamente.
Por ejemplo, en el Listado 101 se muestran varias formas de definir la
anchura del borde de un párrafo. Para cada regla de CSS se ha indicado
con un comentario la interpretación de la regla.

/* Todos los bordes en 2em */

p {border-width: 2em;}
/* border-width-top y border-width-bottom = 1em,
border-width-right y border-width-left = 2em */
p {border-width: 1em 2em;}
/* border-width-top = 1em,
border-width-right y border-width-left = 2em,
border-width-bottom = 3em */
p {border-width: 1em 2em 3em;}
/* border-width-top = 1em,
border-width-right = 2em,
border-width-bottom = 3em,
border-width-left = 4em */
p {border-width: 1em 2em 3em 4em;}
Listado 101: Asignación de valores en la propiedad border-width

Además de un valor numérico, el valor del borde puede tomar los

valores thin (ﬁno), medium (mediano) y thick (grueso) o una medida.
La interpretación de los primeros tres valores depende del agente de

Curso práctico avanzado

usuario (el navegador web), pero se debe mantener la siguiente relación

en la interpretación:

thin < medium < thick

Como la interpretación depende del agente de usuario, la presentación

de una página web puede variar de un navegador a otro, por lo que no
se recomienda su uso si se desea lograr una presentación idéntica en
diferentes navegadores.

Estilo del borde

La propiedad resumida border-style deﬁne el estilo de la línea del

borde (sólida, doble, punteada, etc.) para los cuatro lados border-top-
style, border-right-style, border-bottom-style y border-left-
style.
La propiedad border-style puede tener de uno a cuatro valores, y
los valores son aplicados a los distintos lados como en las propiedades
padding y border-width.
Los posibles estilos del borde son:
• none: ningún borde; este valor fuerza al valor calculado de border-
width a 0.
• hidden: igual a none, excepto en términos de resolución de con-
ﬂictos de bordes para los elementos de tabla.
• dotted: el borde es una serie de puntos.
• dashed: el borde es una serie de pequeños segmentos de línea.
• solid: el borde es un único segmento de línea.
• double: el borde son dos líneas sólidas. La suma de las dos líneas
y el espacio entre ellas es igual al valor de border-width.
• groove: el borde luce como si estuviese tallado en el lienzo.
• ridge: lo opuesto a grove. El borde parece que estuviera sobre-
saliendo del lienzo.
• inset: el borde hace que toda la caja luzca como si estuviera
empotrada en el lienzo.

HTML & CSS

• outset: lo opuesto a inset. El borde hace que toda la caja parezca

sobresalir del lienzo.
El ejemplo que se muestra en el Listado 102 es el código de una página
web compuesta de varios párrafos, donde cada párrafo posee un estilo
de borde distinto. El estilo del borde se ha deﬁnido directamente en cada
párrafo con el atributo style de HTML; además, al principio de la página,
en una sección <style>, se ha deﬁnido un estilo común para todos los
párrafos para que aparezcan centrados en la página. En la Figura 258
se puede ver cómo se visualiza este ejemplo en un navegador.

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Estilos de los bordes</title>
<style>
p{
width: 50%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
</style>
</head>
<body>
<p style=”border-style: none”>
none
</p>
<p style=”border-style: hidden”>
hidden
</p>
<p style=”border-style: dotted”>
dotted
</p>
<p style=”border-style: dashed”>
dashed
</p>

Curso práctico avanzado

<p style=”border-style: solid”>

solid
</p>
<p style=”border-style: double”>
double
</p>
<p style=”border-style: groove”>
groove
</p>
<p style=”border-style: ridge”>
ridge
</p>
<p style=”border-style: inset”>
inset
</p>
<p style=”border-style: outset”>
outset
</p>
</body>
</html>
Listado 102: Ejemplo de estilos de los bordes

Figura 258: Ejemplo de estilos de los bordes

HTML & CSS

Color del borde

La propiedad resumida border-color deﬁne el color del borde para

los cuatro lados border-top-color, border-right-color, border-
bottom-color y border-left-color.
La propiedad border-color puede tener de uno a cuatro valores, y
los valores son aplicados a los distintos lados como en border-width.
Si el color del borde de un elemento no es especiﬁcado con una pro-
piedad del borde, los agentes de usuario (los navegadores web) deben
tomar el valor de la propiedad color del elemento como el valor calculado
para el color del borde.
Esta última regla no la cumple correctamente el navegador Google
Chrome, tal como se puede apreciar en la Figura 259 en la que se mues-
tra la página del Listado 103. En los navegadores Mozilla Firefox (Figura
260) y Microsoft Internet Explorer (Figura 261), sí que se muestra co-
rrectamente el color del borde.

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Estilos de los bordes con color</title>
<style>
p{
width: 50%;
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: gold;
border-width: 5px;
}
</style>
</head>
<body>
<p style=”border-style: solid”>
solid
</p>
<p style=”border-style: solid; color: red”>
solid
</p>

Curso práctico avanzado

<p style=”border-style: double”>

double
</p>
<p style=”border-style: double; color: red”>
double
</p>
<p style=”border-style: groove”>
groove
</p>
<p style=”border-style: groove; color: red”>
groove
</p>
<p style=”border-style: ridge”>
ridge
</p>
<p style=”border-style: ridge; color: red”>
ridge
</p>
<p style=”border-style: inset”>
inset
</p>
<p style=”border-style: inset; color: red”>
inset
</p>
<p style=”border-style: outset”>
outset
</p>
<p style=”border-style: outset; color: red”>
outset
</p>
</body>
</html>
Listado 103: Ejemplo de bordes con color

En la Figura 259 se puede observar que las dos primeras cajas, la caja
que tiene un borde con el estilo solid y la caja que tiene un borde con el
estilo double sí que se visualizan con el borde de color rojo, pero el resto
de cajas aparecen todas con el borde negro, aunque se haya indicado el
color rojo con la propiedad color: red.

HTML & CSS

Figura 259: Ejemplo de bordes con color en Google Chrome

En Mozilla Firefox (Figura 260) y Microsoft Internet Explorer (Figura

261), sí que se muestra correctamente el color de los bordes en todos
los casos.

Figura 260: Ejemplo de bordes con color en Mozilla Firefox

Curso práctico avanzado

Figura 261: Ejemplo de bordes con color en Microsoft Internet Explorer

Otra diferencia importante la podemos apreciar si nos ﬁjamos en el

detalle de los bordes que se muestra en la Figura 262. Como se puede ver,
existen diferencias importantes cuando se emplean los estilos groove,
ridge, inset y outset.

Google Chrome Mozilla Firefox Microsoft Internet Explorer

(a) (b) (c)
Figura 262: Ejemplo de bordes con color en diferentes navegadores

HTML & CSS

Propiedades resumidas del borde

La propiedad border es una propiedad resumida que permite deﬁnir

el mismo ancho, color y estilo a los cuatro bordes de una caja, border-
left, border-right, border-top y border-bottom, con una sola regla.
A diferencia de las propiedades resumidas padding y margin, la propie-
dad border no puede definir diferentes valores para los cuatro bordes.
Para eso, deben usarse una o más de las otras propiedades del borde.
Cuando se emplean las propiedades resumidas del borde, los valo-
res omitidos son colocados en sus valores iniciales. Por ejemplo, en el
siguiente ejemplo se emplea la propiedad border-left para definir la
apariencia del borde izquierdo, pero no se especifica un color para el
borde, por lo que el borde tendrá el color especificado en la propiedad
color, ya que se aplica la siguiente regla de CSS: “Si el color del borde de un
elemento no es especiϔicado con una propiedad del borde, las aplicaciones del usuario
deben tomar el valor de la propiedad color del elemento como el valor computado
para el color del borde”.
En el ejemplo del Listado 104 se han definido varias reglas de CSS para
modificar el borde izquierdo de una serie de párrafos. En cada párrafo se
asigna el color de elemento con la propiedad color y el color del borde
con la propiedad border-color en un orden distinto.

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Estilos de los bordes deﬁnidos con las propiedades resumidas</title>
<style>
p {width: 50%; margin-left: auto; margin-right: auto;}

.caja1 {border: 5px dashed blue;}

.caja2 {border-color: red; color: green; border-left: 5px double;}
.caja3 {color: green; border-color: red; border-left: 5px double;}
.caja4 {border-color: red; border-left: 5px double; color: green;}
.caja5 {color: green; border-left: 5px double; border-color: red;}
</style>
</head>
<body>
<p class=”caja1”>
Esto es una caja.
</p>

Curso práctico avanzado

<p class=”caja2”>
Esto es una caja: el borde izquierdo toma el color de la propiedad color.
</p>
<p class=”caja3”>
Esto es una caja: el borde izquierdo toma el color de la propiedad color.
</p>
<p class=”caja4”>
Esto es una caja: el borde izquierdo toma el color de la propiedad color.
</p>
<p class=”caja5”>
Esto es una caja: inicialmente el borde izquierdo toma el color de la propiedad
color, pero posteriormente border-color modiﬁca su valor.
</p>
</body>
</html>
Listado 104: Ejemplo de bordes deﬁnidos con las propiedades resumidas

En la Figura 263 se puede ver cómo se visualiza este ejemplo en el

navegador Google Chrome. Como se puede ver, los párrafos segundo,
tercero y cuarto tienen un borde de color verde, pero el último párrafo
tiene un borde de color rojo.

Figura 263: Ejemplo de bordes deﬁnidos con las propiedades resumidas

HTML & CSS

Advertencia
Recuerda: cuando se emplean las propiedades resumidas del borde, si no se
especiﬁca un valor para una propiedad, la propiedad tomará como valor el
valor inicial.

El margen
Las propiedades del margen especifican el ancho del área de margen de
una caja. La propiedad resumida margin define el margen para los cua-
tro lados margin-top, margin-right, margin-bottom y margin-left.
Los valores negativos para las propiedades de los márgenes son permi-
tidos, pero pueden existir limitaciones específicas de la implementación
realizada por el navegador web.
La propiedad margin puede tomar uno de los siguientes valores:
• una medida: especifica un ancho fijo.
• un porcentaje: el valor es calculado con respecto al ancho del
bloque contenedor y de la propia caja.
• auto: el margen se calcula automáticamente, dependiendo del
ancho del bloque contenedor y de la propia caja.
Cuando se emplea la propiedad resumida margin, si hay sólo un valor,
se aplica a todos los lados. Si hay dos valores, los márgenes superior e
inferior son determinados por el primer valor y los márgenes derecho e
izquierdo son determinados por el segundo. Si hay tres valores, el supe-
rior es definido por el primer valor, el izquierdo y el derecho son definidos
por el segundo, y el inferior es definido por el tercero. Por último, si hay
cuatro valores, se aplican empezando por el margen superior y girando en
el sentido de las agujas del reloj: superior, derecho, inferior e izquierdo,
respectivamente.
Para alinear un elemento en bloque es un error emplear la propiedad
text-align, ya que esta propiedad define la alineación del contenido
del elemento, pero no la alineación del elemento en sí mismo. La pro-
piedad margin se puede emplear para alinear un elemento en el espacio
disponible.
Por ejemplo, el Listado 105 muestra un ejemplo de alienación incorrecta
de un elemento con la propiedad text-align. Como se puede ver en la
Figura 264, los párrafos no aparecen alineados en el espacio disponible,
lo que aparece alineado es el contenido de los párrafos.
446 © Alfaomega - Altaria
Curso práctico avanzado

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Alineación de un elemento</title>
<style>
p {width: 70%;}
.izquierda {text-align: left;}
.derecha {text-align: right;}
.centrado {text-align: center;}
</style>
</head>
<body>
<p class=”izquierda”>
Style sheets represent a major breakthrough for Web page designers, expand-
ing their ability to improve the appearance of their pages. In the scientiﬁc
environments in which the Web was conceived, people are more concerned
with the content of their documents than the presentation. As people from
wider walks of life discovered the Web, the limitations of HTML became a
source of continuing frustration and authors were forced to sidestep HTML’s
stylistic limitations. While the intentions have been good -- to improve the
presentation of Web pages -- the techniques for doing so have had unfortunate
side eﬀects. These techniques work for some of the people, some of the time,
but not for all of the people, all of the time.
</p>
<p class=”derecha”>
HTML allows authors to design documents that take advantage of the char-
acteristics of the media where the document is to be rendered (e.g., graphical
displays, television screens, handheld devices, speech-based browsers, braille-
based tactile devices, etc.). By specifying the media attribute, authors allow
user agents to load and apply style sheets selectively. Please consult the list
of recognized media descriptors.
</p>
<p class=”centrado”>
Media control is particularly interesting when applied to external style sheets
since user agents can save time by retrieving from the network only those style
sheets that apply to the current device. For instance, speech-based browsers
can avoid downloading style sheets designed for visual rendering. See the
section on media-dependent cascades for more information.
</body>
</html>
Listado 105: Ejemplo de alineación incorrecta de un elemento

HTML & CSS

Figura 264: Ejemplo de alineación incorrecta de un elemento

En el Listado 106 se muestra el código fuente de un ejemplo de ali-

neación correcta de un elemento en bloque:
• Para alinear un elemento a la izquierda se debe emplear margin-
left: 0px; y margin-right: auto;.
• Para alinear un elemento a la derecha se debe emplear margin-
left: auto; y margin-right: 0px;.
• Para centrar un elemento se debe emplear margin-left: auto;
y margin-right: auto;.
En la Figura 265 se puede ver cómo cada párrafo se muestra correc-
tamente alineado a la izquierda, a la derecha y centrado.

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Alineación de un elemento</title>
<style>
p {width: 70%;}
.izquierda {
margin-left: 0px;
margin-right: auto;
}

Curso práctico avanzado

.derecha {
margin-left: auto;
margin-right: 0px;
}
.centrado {
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<p class=”izquierda”>
Style sheets represent a major breakthrough for Web page designers, expand-
ing their ability to improve the appearance of their pages. In the scientiﬁc
environments in which the Web was conceived, people are more concerned
with the content of their documents than the presentation. As people from
wider walks of life discovered the Web, the limitations of HTML became a
source of continuing frustration and authors were forced to sidestep HTML’s
stylistic limitations. While the intentions have been good -- to improve the
presentation of Web pages -- the techniques for doing so have had unfortunate
side eﬀects. These techniques work for some of the people, some of the time,
but not for all of the people, all of the time.
</p>
<p class=”derecha”>
HTML allows authors to design documents that take advantage of the char-
acteristics of the media where the document is to be rendered (e.g., graphical
displays, television screens, handheld devices, speech-based browsers, braille-
based tactile devices, etc.). By specifying the media attribute, authors allow
user agents to load and apply style sheets selectively. Please consult the list
of recognized media descriptors.
</p>
<p class=”centrado”>
Media control is particularly interesting when applied to external style sheets
since user agents can save time by retrieving from the network only those style
sheets that apply to the current device. For instance, speech-based browsers
can avoid downloading style sheets designed for visual rendering. See the
section on media-dependent cascades for more information.
</p>
</body>
</html>
Listado 106: Ejemplo de alineación correcta de un elemento

HTML & CSS

Figura 265: Ejemplo de alineación correcta de un elemento

El contorno

A veces puede interesar crear un contorno alrededor de los elementos

de una página como botones, campos activos de los formularios, mapas
de imágenes, etc., para enfatizarlos o destacarlos cuando ocurre alguna
situación concreta, como por ejemplo cuando reciben el foco. El contorno
se puede confundir con el borde, pero difiere en los siguientes sentidos:
1. El contorno no ocupa espacio, el contorno no forma parte del
modelo de caja.
2. Los contornos pueden ser no rectangulares.
El contorno se dibuja sobre la caja del elemento, es decir, el contorno
está siempre encima y no influye en la posición o tamaño de la caja o de
ninguna otra caja. Por lo tanto, mostrar u ocultar el contorno no provo-
ca el redibujado de la página web. El contorno se dibuja justo fuera del
límite del borde del elemento.
El contorno puede ser no rectangular. Por ejemplo, si el elemento se
divide entre varias líneas, el contorno es la unión de todos los contornos
que encierran a todas las cajas del elemento.
El contorno se define con la propiedad outline, que es una propie-
dad que resume las propiedades outline-width, outline-style y
outline-color.
La propiedad outline-width acepta los mismos valores que border-
width.
450 © Alfaomega - Altaria
Curso práctico avanzado

La propiedad outline-style acepta los mismos valores que border-

style, excepto que hidden no es un estilo de contorno lícito.
La propiedad outline-color acepta todos los colores, como así tam-
bién la palabra clave invert.
El contorno es el mismo en todos los lados del elemento: en el borde
se pueden deﬁnir las propiedades de cada lado por separado (border-
top, border-right, border-bottom y border-left), pero en el caso
del contorno no existen esas propiedades.
El estándar de CSS indica que la propiedad outline-color puede
tomar el valor invert, que produce una inversión del color en los píxeles
que forman el contorno. Este valor asegura que el contorno siempre sea
visible, sin que importe el color de fondo. Desgraciadamente, este valor
sólo funciona en los navegadores Microsoft Internet Explorer y Opera123.
Por ejemplo, la siguiente regla de CSS establece que en los enlaces se
debe mostrar un contorno de dos píxeles de ancho, sólido y con el color
invertido:

a:focus {
outline: 2px solid invert;
}

En la Figura 266 se muestra un fragmento de página web en la que se

ha aplicado la regla anterior. El texto “Accesibilidad Web” es un enlace
que cuando recibe el foco se destaca con un recuadro que tiene un color
naranja (el código de color hexadecimal #D25E40), que es el color inverso
del color azul de fondo (el código de color hexadecimal #2DA1BF). El in-
verso de un color se calcula restando el código del color en hexadecimal
del color blanco (el código de color hexadecimal #FFFFFF).

Figura 266: Uso de invert en Microsoft Internet Explorer

123 MDN outline-color, disponible en https://developer.mozilla.org/en-US/docs/Web/CSS/outline-color

HTML & CSS

En la Figura 267 se muestra el mismo fragmento de página web en la que el

enlace “¿Qué es la accesibilidad web?” tiene el foco asignado. Este enlace está
destacado con un recuadro que tiene un color negro (el código de color hexade-
cimal #000000), que es el inverso del color blanco de fondo (el código de color
hexadecimal #FFFFFF).

Figura 267: Uso de invert en Microsoft Internet Explorer

Posicionamiento
Existen tres propiedades de CSS que se emplean para definir el posi-
cionamiento de los elementos en una página web: display, position
y float.
La propiedad display define el tipo de visualización para un elemento
en una página web. El tipo de visualización se define indicando el tipo de
caja del elemento. Existen más de 20 valores para esta propiedad, pero
los más comunes son:
• block: el elemento se comporta como un elemento de bloque,
como <div> o <p>.
• inline: el elemento se comporta como un elemento en línea, como
<a> o <span>.
• table: el elemento se comporta como una tabla.
• none: el elemento no se visualiza y no participa en la maquetación
de la página.

Curso práctico avanzado

CSS3 añade los valores flex e inline-flex

a la propiedad display.

En el ejemplo del Listado 107 se deﬁne la clase enlinea que posee la

propiedad display: inline. Esta clase se ha aplicado a tres párrafos
que ya no se visualizan como elementos de bloque, sino como elementos
en línea, tal como se puede ver en la Figura 268. Además, se ha modi-
ﬁcado la forma de visualizar el elemento <b>, ya que se ha deﬁnido que
se visualice como elemento de bloque: las palabras block, inline, table y
none se muestran en líneas separadas porque cada palabra es un bloque.

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Prueba de display</title>
<style>
.enlinea {
display: inline;
}
b{
display: block;
}
</style>
</head>
<body>
<p>Un párrafo normal.</p>
<p class=”enlinea”>Primer párrafo de texto.</p>
<p class=”enlinea”>Segundo párrafo de texto.</p>
<p class=”enlinea”>Tercer párrafo de texto.</p>
<p>Otro párrafo normal.</p>
<p>Los valores que puede tomar la propiedad display son: <b>block,</b>
<b>inline,</b> <b>table y</b> <b>none.</b></p>
</body>
</html>
Listado 107: Ejemplo de uso de display

HTML & CSS

Figura 268: Ejemplo de uso de display

La propiedad display: none no se debe emplear para ocultar un

contenido de forma visual para que esté disponible para los lectores de
pantalla, ya que se oculta para cualquier dispositivo. Para ello se debe
emplear la propiedad position, que se explica a continuación.
La propiedad position especifica el tipo de posicionamiento de un
elemento. Esta propiedad puede tomar los siguientes valores:
• static: el elemento se posiciona según su orden de aparición en
el flujo de la página. Es el valor por defecto.
• relative: el elemento se posiciona de forma relativa a su posición
normal.
• absolute: el elemento se posiciona de forma relativa a su primer
antecesor posicionado con un valor distinto de static.
• fixed: el elemento se posiciona de forma relativa a la ventana del
navegador.
La propiedad position se suele emplear junto con las propiedades
top, right, bottom y left que permiten indicar las coordenadas para
posicionar el elemento.
En el ejemplo del Listado 108 se define la clase fijo que posee la pro-
piedad position: fixed. Además, se han empleado las propiedades top
y left para posicionar el elemento en la esquina superior izquierda. Esta
clase se emplea para posicionar un párrafo que contiene el logo del W3C
en una posición fija de la página, tal como se puede ver en la Figura 269.

Curso práctico avanzado

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Prueba de position</title>
<style>
.fijo {
position: fixed;
top: 0;
left: 0;
margin: 0;
}
body {
padding-left: 160px;
}
</style>
</head>
<body>
<p class=”fijo”><img src=”w3c-logo.png” alt=”” /></p>
<h1>Prueba de position</h1>
<p>Esto es una prueba de position: fixed.</p>
<p>Esto es una prueba de position: fixed.</p>
<p>Esto es una prueba de position: fixed.</p>

</body>
</html>
Listado 108: Ejemplo de uso de position

Figura 269: Ejemplo de uso de position

HTML & CSS

Cuando se realiza un desplazamiento (scroll) vertical en la página, el

contenido de la página se desplaza, pero la imagen se queda ﬁja en su
posición. Para evitar que el contenido de la página se superponga a la
imagen, se ha aplicado la propiedad padding-left: 160px; al elemento
<body> para lograr que exista una separación a la izquierda equivalente
al ancho de la imagen.

Figura 270: Ejemplo de uso de position

La propiedad float indica si una caja debe ﬂotar a la izquierda, a la

derecha o no debe flotar en absoluto. Esta propiedad se puede emplear
con cajas que no están posicionadas absolutamente. Esta propiedad
puede tomar los siguientes valores:
• left: la caja flota a la izquierda. El contenido fluye sobre el cos-
tado derecho de la caja, comenzando en la parte superior.
• right: la caja flota a la derecha. El contenido fluye sobre el costado
izquierdo de la caja, comenzando en la parte superior.
• none: la caja no es flotante.
Además, para anular el efecto de una caja flotante existe la propiedad
clear. Esta propiedad puede tomar los siguientes valores:
• left: la caja generada se mueve debajo de todas las cajas flotan-
tes a la izquierda.

Curso práctico avanzado

• right: la caja generada se mueve debajo de todas las cajas ﬂo-

tantes a la derecha.
• both: la caja generada se mueve debajo de todas las cajas ﬂotantes
que aparecen antes del documento.
• none: no se aplica ninguna restricción a la posición de la caja con
respecto a las cajas ﬂotantes que puedan existir.
Utilizando todas estas propiedades se pueden crear diferentes estilos
de diseño de una página web.

Estilos de diseños
Tradicionalmente han existido tres estilos de diseño de las páginas web:
el diseño ϐijo, el diseño ϐluido y el diseño elástico, más una combinación de
todos ellos que se conoce como diseño híbrido, en el que los tres estilos
de diseño se emplean en distintas partes de la página web.
Sin embargo, el uso generalizado de los dispositivos móviles como
los teléfonos móviles y las tabletas ha producido que el acceso a la Web
ya no se realice exclusivamente desde un ordenador. Esta situación ha
motivado el desarrollo de nuevas técnicas de diseño de las páginas web
para garantizar que las páginas se puedan visualizar en cualquier tipo
de dispositivo, independientemente del tamaño de la pantalla del dispo-
sitivo. Las nuevas técnicas de diseño se suelen agrupar bajo el nombre
de diseño adaptable o diseño adaptativo.
En los siguientes apartados se van a repasar los cinco estilos de dise-
ño, ﬁjo, líquido o ﬂuido, elástico, híbrido y adaptativo. Para cada uno de
los estilos se va a analizar su comportamiento ante diferentes tamaños
de pantalla. En todos los diseños se va a emplear la misma página para
comparar el comportamiento de cada diseño.

Consejo
La creación de un diseño perfecto hasta el píxel es inútil. Deϔine el diseño por de-
fecto, pero permite a la gente reemplazar tu diseño. Mantener el control signiϔica
renunciar a parte de él.
Fuente: Prioritizing Web Usability. Jakob Nielsen, Hoa Loranger. New Riders, 2006

HTML & CSS

Consejo
A menos que estés diseñando para usuarios de gama alta, tienes que asumir que
un porcentaje signiϔicativo de tu audiencia utiliza viejas máquinas con monitores
malos.
Fuente: Prioritizing Web Usability. Jakob Nielsen, Hoa Loranger. New Riders, 2006

Diseño fijo
En el diseño fijo, la anchura del contenido de la página y de los dife-
rentes componentes de la página se especifica con unidades de medida
absolutas, normalmente el píxel (px), aunque también se pueden usar
otras medidas como el punto (pt), el centímetro (cm) o la pulgada (in).
Este diseño permanece inalterable sea cual sea el dispositivo donde
se visualiza la página web: sean cuales sean las características del dis-
positivo, pantalla o navegador, siempre se visualiza el mismo tamaño
preestablecido por el diseñador de la página web. El usuario no puede
cambiar la anchura de la página, ya sea cambiando el tamaño de la
ventana del navegador o cambiando el tamaño del texto.
En el Listado 109 se muestra el código fuente de una página web con
diseño fijo. La página se compone de una cabecera, un menú lateral con
tres enlaces, el contenido principal y el pie de página. El código CSS se
ha incluido en la misma página con la etiqueta <style>, pero se podría
haber escrito en un fichero separado y enlazado con <link>. En el código
se han indicado las reglas de CSS que definen un diseño fijo:
• Se define una anchura del contenido principal de la página de
960px, que es adecuado para una resolución de pantalla de
1024px. Además, el contenido principal está centrado con mar-
gin: 0 auto;.
• La barra lateral que contiene la lista de enlaces tiene una anchura
de 80px.
• El contenido principal tiene una anchura de 960px – 80px = 880px.

Curso práctico avanzado

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Ejemplo de diseño ﬁjo</title>
<style>
body {
background-color: #E0CC97;
color: #000000;
margin: 0;
padding: 0;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
h1, h2, p {
margin: 0;
padding: 10px;
}
#contenedor {
background-color: #E1B378;
width: 960px; /* Fijo */
margin: 0 auto; /* Centra horizontalmente este elemento */
padding: 5px;
}
#cabecera {
background-color: #4D8963;
color: #FFFFFF;
text-align: center;
}
#barralateral {
background-color: #ECB8C7;
ﬂoat: left; /* Este elemento se sitúa a la izquierda, necesita una anchura */
width: 80px; /* Fijo */
}
#contenido {
background-color: #EC799A;
margin-left: 80px; /* Fijo */
}
#pie {
background-color: #69A583;
© Alfaomega - Altaria 459
HTML & CSS

color: #FFFFFF;
clear: both; /* Necesario para que ‘float: left’ no tenga más efecto */
}
</style>
</head>
<body>
<div id=”contenedor”>

<div id=”cabecera”>
<h1>Ejemplo de diseño fijo</h1>
</div>
<div id=”barralateral”>

<ul>
<li><a href=””>Enlace a 1</a></li>
<li><a href=””>Enlace a 2</a></li>
<li><a href=””>Enlace a 3</a></li>
</ul>
</div>
<div id=”contenido”>

<h2>Contenido de la página</h2>
<p>Los distintos estilos de diseño de una página web son: fijo, líquido o fluido,
elástico e híbrido o mixto.
El diseño fijo establece un anchura fija, normalmente indicada en píxel.</p>
<p>El diseño líquido o fluido establece una anchura relativa de los componen-
tes de la página, mediante porcentajes respecto a la anchura de la ventana del
navegador.</p>
<p>El diseño elástico establece una anchura relativa de los componentes de la
página, mediante unidades relativas respecto al tamaño del texto (em o ex). </p>
</div>
<div id=”pie”>

<h2>Pie de la página</h2>
</div>
</div>
</body>
</html>
Listado 109: Ejemplo de diseño fijo

Curso práctico avanzado

En la Figura 271 se muestra esta página con una resolución de pan-

talla de 1366x768 píxeles. La página se muestra correctamente, ya que
el contenido tiene una anchura de 960px.

Figura 271: Ejemplo de diseño ﬁjo a 1366x768

Sin embargo, cuando la página se muestra con una resolución de

pantalla de 800x600 píxeles, como el contenido tiene una anchura su-
perior a 800 píxeles no se puede visualizar en su totalidad, por lo que el
navegador muestra una barra de desplazamiento horizontal, tal como
se puede ver en la Figura 272. En general, no es adecuado que en una
página web se muestre la barra de desplazamiento horizontal, ya que
diﬁculta la lectura del texto porque el usuario se tiene que desplazar de
izquierda a derecha.

Figura 272: Ejemplo de diseño ﬁjo a 800x600

HTML & CSS

Por otro lado, cuando esta página web se muestra con una resolución
de pantalla elevada, como por ejemplo 1920x1080 píxeles, en la página
queda mucho espacio vacío, ya que el contenido tiene una anchura ﬁja
y no se extiende hasta ocupar todo el espacio disponible, tal como se
puede ver en la Figura 273.

Figura 273: Ejemplo de diseño ﬁjo a 1920x1080

Más información
https://youtu.be/ReSHLFPsCFA

El diseño ﬁjo fue el más común

durante los años 90 y parte de la
siguiente década (en su momen-
to tenía sentido, aunque parcial-
mente). Es un diseño totalmente
desaconsejado en la actualidad,
sin embargo todavía hay gente
que lo emplea. Sólo tiene senti-
do aplicar el diseño ﬁjo a partes
concretas de una página web, no
a toda la página en su conjunto.

Diseño líquido o ﬂuido

En el diseño líquido, también llamado diseño ﬂuido, la anchura de los
componentes de la página se especiﬁca mediante porcentajes respecto
a la anchura de la ventana del navegador. Si el usuario amplía o dismi-
nuye la anchura de la ventana, el diseño de la página se adapta, pero el
diseño no se ve afectado por cambios en el tamaño del texto. El término

Curso práctico avanzado

líquido alude a que el contenido de la página tiende a ocupar todo el

ancho disponible de la ventana del navegador, como si fuera un líquido
que se distribuye por el contenedor que lo contiene.

Consejo
Utilice un diseño líquido para que la página principal se ajuste a diferentes
resoluciones de pantalla.
Fuente: 113 Design Guidelines for Homepage Usability, Jakob Nielsen

http://www.nngroup.com/articles/113-design-guidelines-homepage-usability/

Por ejemplo, en el Listado 110 se muestra el código fuente de una

página web con diseño líquido. En el código se han indicado las reglas
de CSS que lo deﬁnen un diseño líquido:
• Se deﬁne una anchura del contenido principal de la página del
75%. El contenido principal está centrado, por lo que a cada lado
del contenido se deja un margen de 12,5%.
• La barra lateral que contiene la lista de enlaces tiene una anchura
de 10%.
• El contenido principal tiene una anchura de 100% - 10% = 90%
del ancho disponible.

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Ejemplo de diseño líquido</title>
<style>
body {
background-color: #E0CC97;
color: #000000;
margin: 0;
padding: 0;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}

HTML & CSS

h1, h2, p {
margin: 0;
padding: 10px;
}
#contenedor {
background-color: #E1B378;
width: 75%; /* Líquido */
margin: 0 auto; /* Centra horizontalmente este elemento */
padding: 5px;
}
#cabecera {
background-color: #4D8963;
color: #FFFFFF;
text-align: center;
}
#barralateral {
background-color: #ECB8C7;
ﬂoat: left; /* Este elemento se sitúa a la izquierda, necesita una anchura */
width: 10%; /* Líquido */
}

#contenido {
background-color: #EC799A;
margin-left: 10%; /* Líquido */
}
#pie {
background-color: #69A583;
color: #FFFFFF;
clear: both; /* Necesario para que ‘ﬂoat: left’ no tenga más efecto */
}
</style>
</head>
<body>
<div id=”contenedor”>
<div id=”cabecera”>
<h1>Ejemplo de diseño líquido</h1>
</div>
<div id=”barralateral”>

Curso práctico avanzado

<ul>
<li><a href=””>Enlace a 1</a></li>
<li><a href=””>Enlace a 2</a></li>
<li><a href=””>Enlace a 3</a></li>
</ul>
</div>
<div id=”contenido”>
<h2>Contenido de la página</h2>
<p>Los distintos estilos de diseño de una página web son: fijo, líquido o fluido,
elástico e híbrido o mixto.
El diseño fijo establece un anchura fija, normalmente indicada en píxel.</p>
<p>El diseño líquido o fluido establece una anchura relativa de los componen-
tes de la página, mediante porcentajes respecto a la anchura de la ventana del
navegador.</p>
<p>El diseño elástico establece una anchura relativa de los componentes de la
página, mediante unidades relativas respecto al tamaño del texto (em o ex). </p>
</div>
<div id=”pie”>
<h2>Pie de la página</h2>
</div>
</div>
</body>
</html>
Listado 110: Ejemplo de diseño líquido

En la Figura 274 se muestra esta página web con una resolución de

pantalla de 1366x768. La página se muestra correctamente con esta
resolución, el contenido ocupa el 75% de 1366 píxeles, es decir, 1024
píxeles. Esta cantidad no es ﬁja, depende del navegador, ya que algunos
navegadores poseen un borde en la ventana que resta algunos píxeles
al ancho disponible.

HTML & CSS

Figura 274: Ejemplo de diseño líquido a 1366x768

Con una resolución inferior, la página también se visualiza correcta-

mente, ya que se adapta al ancho disponible. En la Figura 275 se puede
ver cómo se visualiza esta página con una resolución de 800x600. El
contenido ocupa un 75% del ancho disponible, es decir 600 píxeles. La
barra lateral ocupa un 10% de los 600 píxeles, es decir, 60 píxeles. En
esa anchura no cabe el texto “Enlace a 1”, así que se tiene que mostrar
en dos líneas. El diseño de la página se adapta a la anchura disponible,
pero el texto puede ser que no se muestre correctamente, ya que algunas
partes del diseño de la página se pueden hacer muy pequeños.

Figura 275: Ejemplo de diseño líquido a 800x600

Curso práctico avanzado

En la Figura 276 se puede ver cómo se visualiza esta página con una
resolución de pantalla de 1920x1080. Como el contenido ocupa un 75%
del ancho disponible, es decir, 1440 píxeles, el ancho de la barra lateral
y del contenido principal es mayor que en los casos anteriores.

Figura 276: Ejemplo de diseño líquido a 1920x1080

El diseño líquido se deﬁne en base al ancho disponible y no en base

al tamaño del texto. Esto puede ocasionar problemas cuando se aumen-
ta el tamaño del texto, es decir, cuando se hace zoom sobre la página.
Por ejemplo, en la Figura 277 se visualiza esta página con un zoom del
200%. Si se sigue aumentando el zoom, llegará un momento en el que el
texto se saldrá de cada caja, ya que el tamaño de las cajas no aumenta
al realizar zoom.

HTML & CSS

Figura 277: Ejemplo de diseño líquido con zoom 200%

Más información
https://youtu.be/AjHZH-_VoZU

El diseño líquido permite crear

diseños que se adaptan correcta-
mente a diferentes dispositivos,
pero en situaciones extremas
(pantallas muy pequeñas o muy
grandes) presenta algunos pro-
blemas. Además, no permite
transformaciones profundas en
el diseño de la página.

Diseño elástico
En el diseño elástico, la anchura de los componentes de la página se
especiﬁca en unidades relativas respecto al tamaño del texto, por ejemplo
en unidades em o ex. El tamaño de la página aumenta o disminuye con-
forme el usuario cambia el tamaño del texto, pero permanece constante
al cambiar el tamaño de la ventana del navegador.
Por ejemplo, en el Listado 111 se muestra el código fuente de una
página web con diseño elástico. En el código se han indicado las reglas
de CSS que deﬁnen este tipo de diseño:
468 © Alfaomega - Altaria
Curso práctico avanzado

• Se deﬁne una anchura del contenido principal de la página de

56em.
• La barra lateral que contiene la lista de enlaces tiene una anchura
de 6em.
• El contenido principal tiene una anchura de 56em – 6em = 50em.

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Ejemplo de diseño elástico</title>
<style>
body {
background-color: #E0CC97;
color: #000000;
margin: 0;
padding: 0;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
h1, h2, p {
margin: 0;
padding: 10px;
}
#contenedor {
background-color: #E1B378;
width: 56em; /* Elástico */
margin: 0 auto; /* Centra horizontalmente este elemento */
padding: 5px;
}
#cabecera {
background-color: #4D8963;
color: #FFFFFF;
text-align: center;
}

HTML & CSS

#barralateral {
background-color: #ECB8C7;
float: left; /* Este elemento se sitúa a la izquierda, necesita una anchura */
width: 6em; /* Elástico */
}
#contenido {
background-color: #EC799A;
margin-left: 6em; /* Elástico */
}
#pie {
background-color: #69A583;
color: #FFFFFF;
clear: both; /* Necesario para que ‘float: left’ no tenga más efecto */
}
</style>
</head>
<body>
<div id=”contenedor”>
<div id=”cabecera”>
<h1>Ejemplo de diseño elástico</h1>
</div>
<div id=”barralateral”>
<ul>
<li><a href=””>Enlace a 1</a></li>
<li><a href=””>Enlace a 2</a></li>
<li><a href=””>Enlace a 3</a></li>
</ul>
</div>
<div id=”contenido”>
<h2>Contenido de la página</h2>
<p>Los distintos estilos de diseño de una página web son: fijo, líquido o
fluido, elástico e híbrido o mixto.
El diseño fijo establece un anchura fija, normalmente indicada en píxel.</p>
<p>El diseño líquido o fluido establece una anchura relativa de los compo-
nentes de la página, mediante porcentajes respecto a la anchura de la ventana
del navegador.</p>

Curso práctico avanzado

<p>El diseño elástico establece una anchura relativa de los componentes de la

página, mediante unidades relativas respecto al tamaño del texto (em o ex).
</p>
</div>
<div id=”pie”>
<h2>Pie de la página</h2>
</div>
</div>
</body>
</html>
Listado 111: Ejemplo de diseño elástico

En la Figura 278 se muestra esta página, con una resolución de pan-

talla de 1366x768 píxeles. La página web se visualiza de forma correcta.

Figura 278: Ejemplo de diseño elástico a 1366x768

Cuando se disminuye el tamaño de la ventana del navegador, el diseño

de la página web no se adapta al nuevo ancho disponible. Por ejemplo,
en la Figura 279 se muestra la página con una resolución de 800x600.
La página no cabe en el ancho disponible, porque en realidad tiene un
ancho ﬁjo de 56em, así que el navegador web tiene que mostrar la barra
de desplazamiento horizontal.

HTML & CSS

Figura 279: Ejemplo de diseño elástico a 800x600

Con resoluciones de pantalla mayores en la página puede quedar

mucho espacio vacío, tal como se puede ver en la Figura 280.

Figura 280: Ejemplo de diseño elástico a 1920x1080

Como el diseño elástico sólo se modiﬁca si se cambia el tamaño del

texto, cuando se realiza un zoom, se puede llegar a una situación en la
que la página web no quepa en la anchura de la ventana del navegador.

Curso práctico avanzado

Por ejemplo, en la Figura 281 se puede ver que al aumentar el zoom de

la página a un 200% es necesaria la barra de desplazamiento horizontal.

Figura 281: Ejemplo de diseño elástico con zoom 200%

Más información
https://youtu.be/25rtJU1EL7E

El diseño elástico permite crear

diseños que se adaptan a distin-
tos dispositivos, pero se basa en
el tamaño del texto y sus posibi-
lidades son limitadas.

Diseño híbrido
El diseño híbrido, también llamado diseño mixto, es una mezcla de
varios de los diseños básicos (diseño ﬁjo, diseño líquido y diseño elásti-
co). En cada uno de los componentes de la página se puede añadir una
técnica de diseño diferente. Por ejemplo, el diseño general de ésta puede
emplear el diseño líquido, pero una columna que contiene un menú de
navegación puede tener un diseño ﬁjo.

HTML & CSS

En el Listado 112 se muestra el código fuente de una página web con

diseño híbrido. En el código se han indicado las reglas de CSS que defi-
nen este tipo de diseño:
• Se define una anchura del contenido principal de la página de
75%, es decir, un diseño líquido.
• La barra lateral que contiene la lista de enlaces tiene una anchura
de 80 píxeles, es decir, un diseño fijo.
• El contenido principal tiene una anchura de 75% – 80px. La an-
chura exacta depende de la anchura de la ventana del navegador.

<!DOCTYPE html>
<html lang=“es“>
<head>
<meta charset=”utf-8” />
<title>Ejemplo de diseño híbrido</title>
<style>
body {
background-color: #E0CC97;
color: #000000;
margin: 0;
padding: 0;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
h1, h2, p {
margin: 0;
padding: 10px;
}
#contenedor {
background-color: #E1B378;
width: 75%; /* Líquido */
margin: 0 auto; /* Centra horizontalmente este elemento */
padding: 5px;
}

Curso práctico avanzado

#cabecera {
background-color: #4D8963;
color: #FFFFFF;
text-align: center;
}
#barralateral {
background-color: #ECB8C7;
float: left; /* Este elemento se sitúa a la izquierda, necesita una anchura */
width: 80px; /* Fijo */
}
#contenido {
background-color: #EC799A;
margin-left: 80px; /* Fijo */
}
#pie {
background-color: #69A583;
color: #FFFFFF;
clear: both; /* Necesario para que ‘float: left’ no tenga más efecto */
}
</style>
</head>
<body>
<div id=”contenedor”>
<div id=”cabecera”>
<h1>Ejemplo de diseño híbrido</h1>
</div>
<div id=”barralateral”>
<ul>
<li><a href=””>Enlace a 1</a></li>
<li><a href=””>Enlace a 2</a></li>
<li><a href=””>Enlace a 3</a></li>
</ul>
</div>
<div id=”contenido”>
<h2>Contenido de la página</h2>
<p>Los distintos estilos de diseño de una página web son: fijo, líquido o
fluido, elástico e híbrido o mixto.
El diseño fijo establece un anchura fija, normalmente indicada en píxel.</p>

HTML & CSS

<p>El diseño líquido o ﬂuido establece una anchura relativa de los com-
ponentes de la página, mediante porcentajes respecto a la anchura de la
ventana del navegador.
</p>
<p>El diseño elástico establece una anchura relativa de los componentes de
la página, mediante unidades relativas respecto al tamaño del texto (em o ex).
</p>
</div>
<div id=”pie”>
<h2>Pie de la página</h2>
</div>
</div>
</body>
</html>
Listado 112: Ejemplo de diseño híbrido

En la Figura 282 se muestra esta página con una resolución de pan-

talla de 1366x768 píxeles. Como se puede ver, la página se visualiza de
forma correcta.

Figura 282: Ejemplo de diseño híbrido a 1366x768

Curso práctico avanzado

Cuando se disminuye el tamaño de la ventana del navegador o se

realiza un zoom, el diseño de la página web se adapta al nuevo ancho
disponible. Por ejemplo, en la Figura 283 se muestra la página al au-
mentar el zoom a un 200%.
La barra lateral que contiene la lista de enlaces tiene una anchura
ﬁja, por lo que al aumentar el zoom la relación entre el texto y el ancho
de la columna no varía y el texto se sigue viendo bien.
El contenido principal tiene un diseño líquido, su anchura se ajusta
a la anchura disponible y el texto se distribuye en el nuevo espacio que
existe.

Figura 283: Ejemplo de diseño híbrido con zoom 200%

Diseño adaptativo o adaptable

El diseño adaptativo, también llamado diseño adaptable, mal llamado
diseño sensible o responsivo (del inglés responsive design) transforma el diseño
de la página en función del ancho disponible. El diseño adaptativo no
implica sólo cambiar el tamaño de los elementos de la página, sino que
cambiar su posición o incluso su forma. La transformación de la página
puede suponer cualquier cosa, como por ejemplo:
• Mostrar u ocultar contenido de la página.
• Cambiar la interfaz de la página.

https://dogramcode.com/programacion
HTML & CSS

• Cambiar la posición del contenido.

• Cambiar la semántica del contenido.
El diseño adaptativo se basa en el empleo de media query, una condición
que limita las hojas de estilo que se deben emplear. La condición se basa
en características del medio en el que se muestra la página web, como el
ancho o el alto del dispositivo de visualización. Una media query emplea
la regla @media de CSS junto con una condición que evalúa alguna ca-
racterística del dispositivo:
• width: la anchura del área de visualización.
• height: la altura del área de visualización.
• orientation: la orientación del dispositivo.
• color: el número de colores de visualización del dispositivo.

El diseño adaptativo emplea Media Queries16,

recomendación del W3C desde junio de 2012.

Por ejemplo, en el Listado 113 se muestra el código fuente de una

página que tiene diseño adaptativo. En este ejemplo se han deﬁnido tres
puntos de ruptura o cambio:
• Anchura menor o igual que 760px: @media screen and (max-
width: 760px).
• Anchura mayor que 760px y menor o igual que 1280px.
• Anchura mayor que 1280px: @media screen and (max-width:
1280px).

https://dogramcode.com/programacion
Curso práctico avanzado

<!DOCTYPE html>
<html lang=”es”>
<head>
<meta charset=”utf-8” />
<title>Ejemplo de diseño adaptativo</title>
<style>
body {
background-color: #E0CC97;
color: #000000;
margin: 0;
padding: 0;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
h1, h2, p {
margin: 0;
padding: 10px;
}
#contenedor {
background-color: #E1B378;
width: 1024px; /* Fijo */
margin: 0 auto; /* Centra horizontalmente este elemento */
padding: 5px;
}
#cabecera {
background-color: #4D8963;
color: #FFFFFF;
text-align: center;
}
#barralateral {
background-color: #ECB8C7;
ﬂoat: left; /* Este elemento se sitúa a la izquierda, necesita una anchura */
width: 120px; /* Fijo */
}
#contenido {
background-color: #EC799A;
margin-left: 120px; /* Fijo */
}

https://dogramcode.com/programacion
HTML & CSS

#pie {
background-color: #69A583;
color: #FFFFFF;
clear: both; /* Necesario para que ‘ﬂoat: left’ no tenga más efecto */
}

@media screen and (max-width: 1280px) {

#contenedor {
width: 700px;
}
#barralateral {
ﬂoat: left;
width: 80px;
}

#contenido {
margin-left: 80px;
}
}

@media screen and (max-width: 760px) {

#contenedor {
width: auto;
}

#barralateral {
ﬂoat: none;
width: auto;
}
#contenido {
margin-left: 0;
}
}
</style>
</head>

https://dogramcode.com/programacion
Curso práctico avanzado

<body>
<div id=”contenedor”>
<div id=”cabecera”>
<h1>Ejemplo de diseño adaptativo</h1>
</div>
<div id=”barralateral”>
<ul>
<li><a href=””>Enlace a 1</a></li>
<li><a href=””>Enlace a 2</a></li>
<li><a href=””>Enlace a 3</a></li>
</ul>
</div>
<div id=”contenido”>
<h2>Contenido de la página</h2>
<p>Los distintos estilos de diseño de una página web son: fijo, líquido o
fluido, elástico e híbrido o mixto.
El diseño fijo establece un anchura fija, normalmente indicada en píxel.</p>
<p>El diseño líquido o fluido establece una anchura relativa de los compo-
nentes de la página,
mediante porcentajes respecto a la anchura de la ventana del navegador.</p>
<p>El diseño elástico establece una anchura relativa de los componentes de
la página, mediante unidades relativas respecto al tamaño del texto (em o ex).
</p>
</div>
<div id=”pie”>
<h2>Pie de la página</h2>
</div>
</div>
</body>
</html>
Listado 113: Ejemplo de diseño adaptativo

En la Figura 284 se muestra esta página con una resolución de pantalla

de 1366x768 píxeles. Como se puede ver, se visualiza de forma correcta.

https://dogramcode.com/programacion
HTML & CSS

Figura 284: Ejemplo de diseño adaptativo a 1366x768

Cuando se disminuye el tamaño de la ventana del navegador a

800x600, el diseño de la página web se adapta al nuevo ancho disponible,
tal como se puede ver en la Figura 285.

Figura 285: Ejemplo de diseño adaptativo a 800x600

Cuando se disminuye todavía más el tamaño de la ventana del na-

vegador, por ejemplo a 640x480, el diseño de la página web sufre una
transformación, tal como se puede ver en la Figura 286. La barra lateral
que contiene la lista de enlaces se transforma en un panel que ocupa

https://dogramcode.com/programacion
Curso práctico avanzado

todo el ancho del contenido. El contenido principal se sitúa justo debajo

de la barra lateral.

Figura 286: Ejemplo de diseño adaptativo a 640x480

Más información
https://youtu.be/yWW8pzPFT1U

El diseño adaptable (responsive

design) permite crear diseños
para múltiples dispositivos. Exis-
ten diferencias entre el diseño
adaptable y el diseño líquido
(transformaciones, varias hojas
de estilo, uso de media queries,
uso de JavaScript).

Separación de la presentación y la
maquetación
Aunque se puede tener toda la definición de una hoja de estilo junta
en un único fichero, es una buena práctica separar los detalles de la
presentación (colores, tipo de letra, etc.) de la maquetación (posición,
márgenes). De este modo, la hoja de estilo es más fácil de manejar y de
mantener, ya que las reglas se encuentran más fácilmente.
Por ejemplo, en el Listado 114 se presenta un fragmento de una página
web en la que se enlaza con dos hojas de estilo externas. En la hoja de
estilo presentation.css se definen las características que no varían con
la maquetación, como los colores del texto y del fondo y las característi-
© Alfaomega - Altaria 483
https://dogramcode.com/programacion
HTML & CSS

cas del texto (tipo de letra, tamaño del texto), mientras que en la hoja de
estilo layout.css se deﬁnen las características de la maquetación, como
la posición de los elementos y el margen que existe entre los elementos.

https://dogramcode.com/programacion

También podría gustarte

Aprende JavaScript en Un Fin de Semana
100% (2)
Aprende JavaScript en Un Fin de Semana
224 páginas
Aprender PHP, MySQL y JavaScript Con Jquery, CSS y HTML5 5E PDF
60% (10)
Aprender PHP, MySQL y JavaScript Con Jquery, CSS y HTML5 5E PDF
790 páginas
Curso de Desarrollo Web HTML Css y Javascript Edicion 2021
50% (4)
Curso de Desarrollo Web HTML Css y Javascript Edicion 2021
14 páginas
El Lenguaje JavaScript (Parte 1) (Ilya Kantor) (Z-Library)
100% (2)
El Lenguaje JavaScript (Parte 1) (Ilya Kantor) (Z-Library)
744 páginas
PHP Desde Cero
91% (11)
PHP Desde Cero
299 páginas
Angular y Nodejs
100% (2)
Angular y Nodejs
370 páginas
Aprende JavaScript en Un Fin de Semana (Spanish Edition) (Alfredo Moreno Muñoz Sheila Córcoles Córcoles)
100% (11)
Aprende JavaScript en Un Fin de Semana (Spanish Edition) (Alfredo Moreno Muñoz Sheila Córcoles Córcoles)
225 páginas
Diseñoweb 1
100% (6)
Diseñoweb 1
433 páginas
A Prende PHP Con Ejercicios
86% (7)
A Prende PHP Con Ejercicios
128 páginas
Curso de HTML5 PDF
100% (10)
Curso de HTML5 PDF
118 páginas
Javascript PDF
100% (3)
Javascript PDF
131 páginas
PHP Es
Aún no hay calificaciones
PHP Es
621 páginas
Bootstrap
100% (1)
Bootstrap
42 páginas
Aprender PHP, MySQL y JavaScript Con JQuery, CSS y HTML5 5E
100% (3)
Aprender PHP, MySQL y JavaScript Con JQuery, CSS y HTML5 5E
790 páginas
Node, Js
100% (1)
Node, Js
16 páginas
Manual Javascript
100% (8)
Manual Javascript
125 páginas
HTML5 y CSS3 - Para diseñadores
De Everand
HTML5 y CSS3 - Para diseñadores
Hernán Beati
5/5 (3)
Diseño Web Con HTML5 y CSS3 - G Sanchez Cano PDF
90% (10)
Diseño Web Con HTML5 y CSS3 - G Sanchez Cano PDF
218 páginas
Un Diseño Atractivo, Con Contenidos Organizados
Aún no hay calificaciones
Un Diseño Atractivo, Con Contenidos Organizados
185 páginas
Aprender A Desarrollar Un Sitio Web Con PHP y MySQL
100% (2)
Aprender A Desarrollar Un Sitio Web Con PHP y MySQL
385 páginas
Javascript Del Lado Del Cliente
100% (1)
Javascript Del Lado Del Cliente
81 páginas
Javascript Es
80% (5)
Javascript Es
639 páginas
Como Ser Front-End Sin Fallar e - Alan Buscaglia
100% (3)
Como Ser Front-End Sin Fallar e - Alan Buscaglia
158 páginas
Javascript Libro Español
100% (5)
Javascript Libro Español
561 páginas
Entendiendo Angular Jorege Cano PDF
100% (1)
Entendiendo Angular Jorege Cano PDF
118 páginas
Fundamentos de JavaScript y AJAX Jose Manuel Alarcon Krasis Press
86% (7)
Fundamentos de JavaScript y AJAX Jose Manuel Alarcon Krasis Press
40 páginas
HTML Guia Complet A
100% (6)
HTML Guia Complet A
546 páginas
Manual de Css 3
Aún no hay calificaciones
Manual de Css 3
144 páginas
JavaScript - Curso de Programacion para Principiantes (Spanish Edition) PDF
Aún no hay calificaciones
JavaScript - Curso de Programacion para Principiantes (Spanish Edition) PDF
43 páginas
PHP Macro
83% (6)
PHP Macro
425 páginas
Curso Javascript Intermedio
Aún no hay calificaciones
Curso Javascript Intermedio
164 páginas
Git y GitHub Con Ramas
100% (1)
Git y GitHub Con Ramas
16 páginas
Manual-Javascript Bueno PDF
Aún no hay calificaciones
Manual-Javascript Bueno PDF
121 páginas
Manual de Javascript
50% (2)
Manual de Javascript
163 páginas
JavaScript v1.0.0
100% (1)
JavaScript v1.0.0
219 páginas
HTML5 CSS3 (!!!) y JavaScript
80% (10)
HTML5 CSS3 (!!!) y JavaScript
56 páginas
Desarrollo de Aplicaciones Web Con PHP - Manuel Ángel Torres Remon PDF
100% (9)
Desarrollo de Aplicaciones Web Con PHP - Manuel Ángel Torres Remon PDF
425 páginas
Guion de Curso HTML CSS JS Inaki Martin
Aún no hay calificaciones
Guion de Curso HTML CSS JS Inaki Martin
210 páginas
Creación de componentes en JavaScript Curso practico
De Everand
Creación de componentes en JavaScript Curso practico
Pablo E. Fernández
Aún no hay calificaciones
Angularjs Es
Aún no hay calificaciones
Angularjs Es
255 páginas
Programación Reactiva Con React-NodeJS-MongoDB-rev006 PDF
100% (4)
Programación Reactiva Con React-NodeJS-MongoDB-rev006 PDF
591 páginas
Introduccion A Node Js
Aún no hay calificaciones
Introduccion A Node Js
98 páginas
Parte 2 Desarrollo en Javascript Del Lado Del Cliente
100% (1)
Parte 2 Desarrollo en Javascript Del Lado Del Cliente
95 páginas
Descubriendo Nodejs Express
100% (3)
Descubriendo Nodejs Express
172 páginas
Curso HTML+Css+Sass+Accesibilidad+Javascript
100% (1)
Curso HTML+Css+Sass+Accesibilidad+Javascript
134 páginas
El Gran Libro de PHP
Aún no hay calificaciones
El Gran Libro de PHP
402 páginas
Tutorial de Css Basico
100% (3)
Tutorial de Css Basico
151 páginas
More
100% (1)
More
221 páginas
Curso de Cascade Style Sheet (CSS)
0% (2)
Curso de Cascade Style Sheet (CSS)
26 páginas
Desarrollo Web Agil Con AngularJS de Carlos Azaustre
100% (10)
Desarrollo Web Agil Con AngularJS de Carlos Azaustre
82 páginas
HTML 5 Y CSS
De Everand
HTML 5 Y CSS
antonio1961
Aún no hay calificaciones
La programación JavaScript
De Everand
La programación JavaScript
Preston Prescott
Aún no hay calificaciones
Desarrollo Web en Java
De Everand
Desarrollo Web en Java
Jorge Arrambide
3/5 (3)
Gestión de Bases de Datos
De Everand
Gestión de Bases de Datos
Rafael Núñez
Aún no hay calificaciones
La Guía Básica de JavaScript
De Everand
La Guía Básica de JavaScript
Miguel Ángel Arias
4/5 (1)
Control de Versiones de Software con GIT
De Everand
Control de Versiones de Software con GIT
Arturo Paz Arias
Aún no hay calificaciones
Java 17 Programación Avanzada
De Everand
Java 17 Programación Avanzada
José María Vegas
Aún no hay calificaciones
HTTP - Lo mínimo que todo desarrollador web debe saber
De Everand
HTTP - Lo mínimo que todo desarrollador web debe saber
Marcelo Galhego
4.5/5 (5)
Java Curso Práctico
De Everand
Java Curso Práctico
José María Vegas Gertrudix
Aún no hay calificaciones
Diseño Web con CSS
De Everand
Diseño Web con CSS
Alicia Durango
5/5 (1)