UNIDAD 1: DISEÑO DE PÁGINAS WEB CON

HTML

Módulo Profesional:
Lenguajes de marcas y sistemas de gestión de la
información

1
Índice
1. LOS LENGUAJES DE MARCAS............................................................ 5
1.1 Editores de texto para código html ............................................... 5
2. ESTRUCTURA DE HTML .................................................................... 7
2.1 Partes de un documento HTML ..................................................... 8
2.2 Evolución de HTML .................................................................... 10
3. ELEMENTOS, ETIQUETAS Y ATRIBUTOS ............................................ 12
3.1 Caracteres especiales................................................................. 14
3.2 Espacios, tabuladores y saltos de línea ......................................... 15
4. ELEMENTOS HTML DE LA CABECERA ................................................ 17
5. ELEMENTOS HTML DEL CUERPO ....................................................... 19
5.1 Párrafos ................................................................................... 20
5.2 Títulos de encabezado ................................................................ 22
5.3 Líneas horizontales .................................................................... 24
5.4 Negrita, cursiva, subrayado y tachado ......................................... 25
5.5 Texto preformateado ................................................................. 27
5.6 Citas textuales .......................................................................... 28
5.7 Superíndices y subíndices ........................................................... 28
5.8 Hipervínculos, enlaces o hiperenlaces........................................... 29
5.8.1 Enlaces absolutos ................................................................ 31
5.8.2 Enlaces relativos .................................................................. 33
5.8.3 Enlaces internos .................................................................. 35
5.8.4 Enlaces a otros elementos..................................................... 38
5.9 Listas ....................................................................................... 42
5.9.1 Listas desordenadas ............................................................. 42
5.9.2 Listas ordenadas o numeradas .............................................. 45
5.9.3 Listas de descripción ............................................................ 48
5.10 Imágenes ............................................................................... 49
5.10.1 Formatos gráficos en la web ................................................ 49
5.10.2 Insertando imágenes .......................................................... 51
5.10.3 Alineación de imágenes....................................................... 56
5.10.4 Bordes en imágenes ........................................................... 59

2
 5.10.5 Márgenes en imágenes ....................................................... 61
5.10.6 Usando imágenes como enlaces ........................................... 63
5.11 Tablas .................................................................................... 64
5.11.1 Espaciado en tablas ............................................................ 70
5.11.2 Títulos y encabezados de tablas ........................................... 72
5.11.3 Imágenes en tablas ............................................................ 75
5.11.4. Dimensionado de tablas ..................................................... 77
5.11.5 Alineación de celdas ........................................................... 80
5.11.6 Tablas con secciones .......................................................... 82
5.12 Fondos ................................................................................... 84
5.12.1 Fondos de tablas ................................................................ 89
5.13 Fuentes .................................................................................. 90
5.14 Frames (marcos) ..................................................................... 92
5.15 Iframes (frames en línea o flotantes) ........................................ 95
5.16 Applets de Java y controles ActiveX ........................................... 98
5.17 Audio ................................................................................... 100
5.18 Vídeo ................................................................................... 103
5.19 Formularios........................................................................... 105
6. LA WEB SEMÁNTICA ..................................................................... 112
6.1 Etiquetas semánticas en HTML5 ................................................ 112
6.1.1. Etiquetas para estructura ................................................... 113
6.1.2 Etiquetas para contenido .................................................... 113
6.1.3 Etiquetas para resaltar contenido ......................................... 114
6.1.4 Otras etiquetas .................................................................. 115
7. COMPOSICIÓN DE PÁGINAS WEB ................................................ 115
7.1 Estructura interna de una página ............................................... 115
7.2 Información ............................................................................ 117
7.3 Composición ........................................................................... 118
RESUMEN FINAL .............................................................................. 121

3
RESUMEN INTRODUCTORIO

En la presente unidad se estudiarán los conceptos básicos para la creación

de páginas web en HTML, haciendo hincapié en el uso de las etiquetas y
atributos más adecuados. Igualmente se proporcionarán pautas de diseño
para conseguir realizar páginas que sean fáciles de modificar y mantener en
el futuro.

INTRODUCCIÓN

Los lenguajes de marcas son lenguajes fundamentales para estructurar todo

tipo de información. En particular, el lenguaje HTML, es un lenguaje de
marcado destinado a la elaboración de páginas web.

Este lenguaje, está compuesto por etiquetas, por lo que para poder crear
páginas web, será necesario estudiar cada una de estas etiquetas, así como
la forma de estructurarlas. Asimismo, cada una de estas etiquetas pueden
personalizar su comportamiento mediante atributos, lo cual dotará de
mayor potencia al lenguaje.

De forma transversal a todo el desarrollo, se estudiará cómo hacer un uso

correcto del lenguaje HTML con el objetivo tanto de realizar nuevas páginas
correctamente, como de poder corregir páginas obsoletas o mal realizadas.

CASO INTRODUCTORIO

Juan es uno de los programadores web que trabaja para la empresa de

desarrollo CS Software. La tienda de reparación de calzado El zapato feliz,
encarga a la empresa la realización de una página web para publicitar sus
servicios. Como responsable del desarrollo de tal producto, Juan hace un
análisis previo y decide que lo más adecuado es crear una página web
estática, compuesta por la información sobre el negocio que la empresa le
ha facilitado (vídeos, mapas, listas, imágenes etc.), así como por un
formulario para poder contactar con ella.

Al finalizar la unidad conocerás el esquema básico de una página web y la

funcionalidad de las diversas etiquetas que componen el lenguaje HTML.
También, serás capaz de realizar una página web desde cero, introduciendo
los elementos que estime oportuno y lo más importante.

4
1. LOS LENGUAJES DE MARCAS

Los lenguajes de marcas nacen de la necesidad de aportar información

sobre el contenido de un documento. Por ejemplo, si se tiene una lista de
personas y se quiere saber cuáles son los nombres y apellidos, es necesario
indicar de alguna forma qué parte de cada elemento de la lista se
corresponde con el nombre y qué parte con cada apellido.

Para conseguirlo, se pueden emplear diversas formas de codificación de

dicho documento. Una de ellas es utilizando etiquetas o marcas que añadan
esa información extra que necesitamos. El lenguaje definido por estas
etiquetas es lo que se denomina lenguaje de marcas.

Por supuesto, al igual que sucede con el lenguaje usado para comunicarse
en cualquier idioma, será necesario establecer una serie de reglas que le
den validez. No obstante, la sintaxis será mucho más sencilla que la de un
idioma.

Los lenguajes de marcas más extendidos son HTML y XML. En el caso de

HTML, se trata de un lenguaje de marcas orientado a la creación de páginas
web. Por ello, su función fundamental es la de crear la estructura de una
página y dar formato a los elementos que la componen. Además, en
muchos casos añade información semántica, es decir, de significado.

HTML se creó en un principio con objetivos divulgativos. No se imaginó que

la web llegaría a ser una red de ocio con carácter multimedia, de modo que,
a lo largo del tiempo ha tenido que ir ampliándose en sucesivas
actualizaciones para ir dando respuesta a todas las nuevas necesidades,
aunque ha seguido manteniendo su estructura básica.

1.1 Editores de texto para código html

Antes de empezar a crear las primeras páginas, es necesario saber con qué
herramienta se puede hacer. Al contrario de lo que sucede con los lenguajes
de programación, no es necesario usar un entorno específico de desarrollo,
basta con usar un editor de textos.

Cualquier sistema operativo dispone de editores de texto de forma nativa o

disponibles de forma gratuita. Un claro ejemplo es el bloc de notas de
Windows, disponible en todas sus versiones.

5
Los usuarios de Macintosh pueden usar un editor de texto llamado
SimpleText, que además permite colorear la edición del texto, dando
puntos de referencia a las etiquetas.

También se pueden encontrar diversos editores más avanzados, igualmente

gratuitos, que proporcionan mayor comodidad a la hora de trabajar, como
control de sangrías, búsquedas y reemplazos avanzados, etc. Notepad++ es
un buen ejemplo de ello: un editor de texto potente y repleto de opciones.
A medio camino entre un bloc de notas mejorado y un entorno de desarrollo
ligero.

No obstante, existen editores de código mucho más potentes e indicados

para el diseño de páginas web con html que incorporan barras de
herramientas que generan automáticamente algunas de las etiquetas del
código HTML, con lo que así se puede evitar escribirlas. Es el caso, por
ejemplo, del editor Edit Plus.

6
Bluefish es un editor HTML multiplataforma, que se puede descargar de la
siguiente página Web: http://bluefish.openoffice.nl/index.html

Además, quien esté acostumbrado a manejar un IDE para programar,

también puede usarlo para trabajar con HTML, ya que los más populares
como Eclipse, NetBeans e IntelliJ tienen soporte para editar HTML.

2. ESTRUCTURA DE HTML

Las marcas son señales que se colocan entre el texto, añadiéndole

significado. Habitualmente, estas marcas o etiquetas consisten en un
nombre encerrado entre signos de menor y mayor. Además, suelen
aparecer por parejas, de manera que la primera abre un contexto y la
segunda lo cierra, afectando a todo lo que queda dentro de dicho contexto.

El nombre que se le haya dado a la etiqueta será el que le dé un significado

u otro. Por ejemplo, <p> será indicativo de párrafo y <b> significará
negrita. Además, se permite el anidamiento de etiquetas, es decir, pueden
aparecer unas dentro del contexto limitado por otras.

7
A estas mismas etiquetas, se les puede añadir una barra (/) tras el símbolo
de menor, convirtiéndolas así en etiquetas de cierre. En los ejemplos
anteriores, serían </p> y </b>. A partir de estas etiquetas de cierre, las
correspondientes etiquetas de apertura pierden vigencia, dejando así de
afectar al texto:

<b>Esto aparecerá en negrita. </b> Esto ya no.

Un archivo HTML estará compuesto por un conjunto de etiquetas, que se

utilizan para definir la forma o estilo que se quiere aplicar a cada parte del
documento. Será el navegador el que se encargue de interpretar todas
estas etiquetas y mostrar el contenido con el formato definido por ellas.

Es importante tener en cuenta que HTML no es un lenguaje de

programación, ya que su función no es la de crear un programa, ni cuenta
con las estructuras básicas de los lenguajes de programación. Por tanto, no
se debe usar la palabra programar para referirse a la creación de páginas
web. No obstante, es posible combinar HTML con otros lenguajes como
javascript, que sí es un lenguaje de programación.

2.1 Partes de un documento HTML

Todo documento HTML ha de estar delimitado por las etiquetas <html> y

</html>.

Dentro de este documento, se pueden asimismo distinguir dos partes

principales:

 La cabecera, delimitada por <head> y </head>, donde se colocarán

etiquetas de índole informativo como, por ejemplo, el título de
nuestra página.

 El cuerpo, flanqueado por las etiquetas <body> y </body>, que será

donde se coloque todo el contenido de la página.

El resultado es un documento con la siguiente estructura:

8
<html>
<head>
<title>Cesur</title>
<!--Etiquetas y contenidos de la cabecera.
Datos que no aparecen en la página pero que son importantes
para catalogarla: Titulo, palabras clave,...-->
</head>
<body>
<!-- Etiquetas y contenidos del cuerpo.
Parte del documento que será mostrada por el navegador: Texto e
imágenes-->
</body>
</html>

Este ejemplo, puede servir también para ver cómo incluir comentarios en el
archivo HTML. Tan sólo se trata de escribir el texto que interese entre las
etiquetas <!-- y -->. Su función es la de poder añadir texto que no será
interpretado por los navegadores, y por tanto no aparecerá por pantalla.
Como se ha comentado anteriormente, HTML ha ido evolucionando con el
tiempo, dando lugar a diferentes versiones, cada una con soporte para unas
u otras etiquetas, si bien, la estructura que se acaba de presentar es común
para todas. No obstante, resulta importante para el navegador conocer qué
versión de HTML usa la página que está leyendo, ya que ello podrá
determinar si la sintaxis del documento es válida o no. Para eso, se debe
usar el elemento DOCTYPE.

Las declaraciones DOCTYPE no son más que enlaces a documentos de

definición (DTD), que se estudiarán más adelante, cuyo cometido es definir
los elementos válidos del lenguaje y la relación entre ellos. Deben aparecer
al principio del documento, antes de su estructura, con la sintaxis siguiente:
<!DOCTYPE …>

Para la versión 4 de HTML, que ha sido la que ha tenido mayor vigencia en

el tiempo y la más extendida hasta la aparición de la versión 5, se pueden
encontrar las siguientes declaraciones DOCTYPE:

 Estricta: se trata de la declaración por defecto, que no permite usar

elementos del lenguaje desfasados.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">

 Transitional: para facilitar la transición entre versiones anteriores y

esta, permite usar elementos obsoletos.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">

9
  Frameset: una variante de transitional pero para usar páginas con
marcos.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"http://www.w3.org/TR/REC-html40/frameset.dtd">

EJEMPLO PRÁCTICO

A continuación, se muestra cómo quedaría una página,

con estos primeros conceptos que se han presentado:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN"

"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Hola Mundo</title>
</head>
<body>
<p>
<b>Bienvenido,</b>
</p>
<p>
Esta es la página <b>Hola Mundo</b>.
</p>
</body>
</html>

2.2 Evolución de HTML

Aunque HTML nace en 1991, el primer estándar oficial aparece en 1995 con
el nombre de HTML 2.0. No obstante, ni este ni el posterior estándar
aparecido en 1997 (HTML 3.2) tuvieron tanta importancia como HTML 4.0,
aparecido en 1998 y, su actualización, HTML 4.01 (1999).

10
En el año 2000, W3C (World Wide Web Consortium), el organismo
encargado de elaborar estos estándares, publica XHTML 1.0, que en
realidad se trata de una adaptación de la versión 4 de HTML a la
especificación XML, de forma que cumpla con unas especificaciones más
estrictas y permita la extensión del lenguaje.

Desde ese momento, tanto HTML 4 como XHTML han sido los estándares
más ampliamente utilizados para la creación de páginas web hasta la
aparición de la versión 5.

Por supuesto, el elemento DOCTYPE cambia para XHTML, escribiéndose de

la siguiente manera, según cada uno de los 3 tipos presentados
anteriormente:

 Estricta: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 Transitional: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">

 Frameset: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
frameset.dtd">

Además, es importante tener en cuenta que en XHTML es necesario

especificar también un espacio de nombres para que sea válido, por lo que
la etiqueta <html>, se debe escribir de la siguiente forma:

<html xmlns="http://www.w3.org/1999/xhtml">

Posteriormente, la W3C trató de seguir por el camino iniciado con XHTML,

abandonando HTML, hasta el punto de desarrollar una segunda versión de
XHTML que no era compatible con HTML ni tan siquiera con la primera
versión de XHTML. La falta de aceptación por parte de la industria y de los
usuarios, interesados en mantener la compatibilidad con las versiones
anteriores, hizo que se retomara el desarrollo de HTML y se abandonara el
camino seguido por XHTML 2.0. Aunque en 2008 se redactó el primer
borrador de HTML5, no fue hasta 2014 cuando se publicó su primera
versión definitiva, lo cual dificultó su implantación. La última versión del
estándar es la 5.2, aparecida en 2017.

HTML5 abandona los distintos tipos de DOCTYPE, quedándose únicamente

en:

11
<!DOCTYPE html>

Durante los primeros años en la evolución de HTML, surge uno de sus

principales problemas. La web comenzó a crecer muy rápidamente, y con
ello, las necesidades de los usuarios, que fueron evolucionando a mayor
velocidad que los estándares, por lo que los desarrolladores de los
navegadores fueron creando sus propias extensiones del lenguaje para
conseguir implementar las características que los usuarios demandaban. De
esta forma, llegó un momento en que se encontraban diversas formas no
estándar de conseguir un mismo resultado.

Otro problema, ha sido la distinta interpretación que cada navegador ha

hecho de diversos aspectos de la especificación, como las medidas relativas
o la asignación de diferentes valores por defecto. De igual forma, algunos
navegadores son más flexibles en la aplicación de los estándares y admiten
código no correcto que en otros navegadores es ignorado.

El resultado de toda esta problemática es que muchas páginas no se ven

igual en un navegador u otro, lo que obliga a los desarrolladores a
implementar diferentes soluciones en función del navegador que lea la
página. HTML5 soluciona en gran medida estos problemas, si bien, la
coexistencia con versiones anteriores y con navegadores no totalmente
compatibles, hace que en muchos casos estos aspectos aún deban ser
tenidos en cuenta.

3. ELEMENTOS, ETIQUETAS Y ATRIBUTOS

Un archivo HTML no es más que un conjunto de elementos, cada uno con

un nombre (etiqueta), un contenido y unas características (atributos). Al ser
un lenguaje de marcas, son las etiquetas (tags) las que se usan para
delimitar el contenido de estos elementos.

Las etiquetas pueden ser de 3 tipos:

 De apertura: <xxx>
 De cierre: </xxx>
 Autocerradas. Son como una combinación de las dos anteriores, para
elementos que no tienen contenido: <xxx />

Aunque los nombres de las etiquetas se pueden escribir tanto en

mayúsculas como en minúsculas, como convención se usa la escritura en
minúsculas.

12
Por otro lado, cada uno de los elementos puede tener una serie de
propiedades que se denominan atributos, y se declaran en la etiqueta de
apertura de dicho elemento, asignándoles un valor entre comillas (simples o
dobles), de la forma: atributo="valor". Todos los atributos deben escribirse
separados tanto de la etiqueta como de otros atributos.

Los atributos admitidos y el valor que se le puede dar a cada uno de ellos
vendrá determinado por la especificación de la versión de HTML que se esté
usando, siendo posibles valores de tipo textual o numérico. Éstos últimos,
pueden aparecer en diferentes bases (decimal, hexadecimal…) y con
diferentes unidades (sin unidades, en píxeles, en porcentajes…).

Por tanto, la sintaxis de un elemento es la siguiente:

<nombre_elemento atributo1="valor1" atributo2="valor2" …>

contenido_elemento
</nombre_elemento>

Por ejemplo, como se vio anteriormente, el elemento principal en un

documento html es el delimitado por <html> y </html>. Su contenido es el
propio contenido del documento, compuesto a su vez por los elementos
<head> y <body>.

El principal atributo de <html> es lang, que identifica el idioma en el que

está nuestra página. Por tanto, para una página en español, se escribiría:
<html lang="es">

Cada etiqueta puede tener unos posibles atributos, según viene dado en la
especificación de la versión de HTML correspondiente. Eso sí, no todos los
atributos admitidos en versiones anteriores, se admiten en las posteriores,
como es el caso de los atributos relativos a la presentación, como se verá
más adelante.

Se debe tener en cuenta que cada etiqueta tiene sus propios

requerimientos:

 Algunas necesitan aparecer cerradas, como <a></a>.

 Otras pueden tener etiqueta de cierre o no (como <p>, que no
siempre requiere </p>).
 Otras no llevan nunca etiqueta de cierre (como <img>, la cual jamás
lleva </img>).

13
No obstante, es importante saber que la validez de estas etiquetas cambia
según la versión de HTML o XHTML que se esté usando, lo que puede
inducir a error en algunos casos.

Para no equivocarse, conviene saber:

- Elementos vacíos (aquellos que no tienen etiqueta de cierre, como <br>):

en HTML podían cerrarse o no. En XHTML deben cerrarse siempre (<br />).
Sin embargo, en HTML5 no se usan elementos autocerrados, por lo que
actualmente se escribe <br>. De todos modos, <br /> no produce error (en
ocasiones se usa para mantener compatibilidad con XHTML), ya que HTML5
ignora la barra de autocierre en las siguientes etiquetas: area, base, br, col,
embed, hr, img, input, link, meta, param, source, track, wbr.

- Elementos no vacíos: mientras que en XHTML deben cerrarse siempre, en

HTML5 hay muchos que se permite que se escriban sin cerrar. Por ejemplo,
<p>. Esto permite ahorrar código, si bien, habitualmente no resulta
recomendable, ya que el código así escrito pierde legibilidad.

- Atributos vacíos: en XHTML no estaban permitidos, mientras que en

HTML5 sí (su valor por defecto es una cadena vacía).

- Atributos con valores sin comillas: en XHTML no era válido, necesitando

especificar comillas (dobles o simples), mientras que en HTML5 son válidos.

NOTA DE INTERÉS

Es recomendable usar siempre comillas para mantener un

estilo uniforme y evitar errores cuando el valor del atributo
contenga ciertos caracteres como el espacio.

3.1 Caracteres especiales

Hay caracteres que no se pueden escribir tal cual en código HTML, unos por
coincidir con las etiquetas (como <, > y &), otros por no aparecer en la
codificación básica ASCII (las letras con tilde, las eñes), etc...

En general se pueden obtener todos los caracteres mediante un código

numérico o textual, con la etiqueta &xxx; sustituyendo xxx por el número o
el identificador textual del carácter correspondiente.

14
Por ejemplo, para mostrar por pantalla la etiqueta <body>, se debe
escribir: &lt;body&gt; o, de forma equivalente: &#60;body&#62;

PARA SABER MÁS

A continuación encontrarás una tabla con estos códigos y

otros :

https://eu.awp.autotask.net/2/filelink/408ad-32f77676-
58a507c74b-2

3.2 Espacios, tabuladores y saltos de línea

Todos los espacios en blanco, tabuladores y saltos de línea, son

considerados por el intérprete HTML como un espacio simple, ya que de
esta forma se puede escribir el código ordenadamente y con sangrías.

Por tanto, si hace falta poner más de un espacio en blanco en medio de un

texto, se debe usar el carácter especial equivalente al espacio en blanco
visto en la sección anterior: &nbsp;

15
 EJEMPLO PRÁCTICO

<!DOCTYPE html>
<html>
<head>
<title>espacios</title>
</head>
<body>
<p> Esta es mi página WEB</p>
<p>Esta es mi página WEB</p>
</body>
</html>

Para que se vean las dos frases de forma diferente, como en el propio
archivo html, habrá que escribir:

<!DOCTYPE html>
<html>
<head>
<title>espacios</title>
</head>
<body>
<p> Ésta&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; es mi
página WEB</p>
<p>Esta es mi página WEB</p>
</body>
</html>

16
Para conseguir saltos de línea, se debe usar la etiqueta <br> (no lleva
etiqueta de cierre). No obstante, se debe tener en cuenta que otros
elementos pueden generar por sí mismos saltos de línea, como los párrafos
y encabezados.

Por el contrario, para conseguir tabulaciones, no se emplean etiquetas ni

códigos especiales, sino que se definen márgenes, como se estudiará más
adelante.

4. ELEMENTOS HTML DE LA CABECERA

El elemento contenedor de los elementos de la cabecera de un documento

HTML es <head>. Estos otros elementos que puede contener son:

- <title>: indica el título de la página que mostrará el navegador. Es

obligatorio para que el HTML sea válido. Dicho título se especifica entre las
etiquetas de apertura y cierre.

- <meta>: sirve para declarar meta etiquetas, que se utilizan para definir
propiedades del documento como la descripción, palabras clave, autor, etc.
Se usa sin etiqueta de cierre.

Habitualmente, las meta etiquetas se componen de un nombre, definido

mediante el atributo name, y un valor para la propiedad, definido mediante
el atributo content. Su función es principalmente informar a los buscadores
sobre el contenido del documento, para que puedan clasificar mejor la
página en los resultados de búsqueda. No obstante, hoy en día, su impacto
en este aspecto es relativo, ya que, para evitar manipulaciones, los
buscadores extraen esta información principalmente del análisis que
realizan sobre el contenido.

Algunas meta etiquetas populares son:

 description: para incluir una descripción de lo que contiene la página.

Por ejemplo: <meta name="description" content="Receta de
paella">

 keywords: para incluir palabras que representan bien el contenido de

la página. Por ejemplo: <meta name="keywords" content="cocina,
receta, paella, arroz">

 author: para especificar el nombre del autor.

17
  viewport: para presentación en distintas pantallas, como se verá
posteriormente.

Se pueden encontrar otro tipo de meta etiquetas, que en lugar de definir el

atributo name, usan el atributo http-equiv. Éstas, se utilizan para enviar
cabeceras al navegador, como si las hubiera generado el propio servidor,
pudiendo de esta forma desencadenar una acción, al contrario de lo que
sucede con las anteriores cuyo carácter es únicamente informativo.

En la mayoría de los casos, su uso se encuentra desaconsejado en la

actualidad, ya que hay nuevas formas de realizar dichas acciones. Por
ejemplo, para definir el conjunto de caracteres, en lugar de <meta http-
equiv="content-type" content="text/html; charset=UTF-8">, en HTML5
debe usarse <meta charset="UTF-8">. Lo mismo ocurre con el idioma, en
vez de <meta http-equiv="content-language" content="es">, en HTML5
debe definirse, como se vio anteriormente, usando el atributo lang de la
etiqueta <html>: <html lang="es">

- <link>: para enlazar con archivos externos. Se suele utilizar para hojas
de estilo. No lleva etiqueta de cierre.

- <script>: para incluir código que ejecutará el propio navegador,

normalmente javascript. También puede usarse para incluir archivos de
script. En ese caso, no lleva etiqueta de cierre.

EJEMPLO PRÁCTICO

Un ejemplo más completo podría ser el siguiente:

<!DOCTYPE html>
<html lang="es">
<head>
<title>Cesur</title>
<meta charset="utf-8">
<meta name="description" content="Web de Cesur">
<meta name="author" content="Pablo">
</head>
<body>
<!--Aquí va lo que se mostrará en pantalla del documento HTML-->
</body>
</html>

18
5. ELEMENTOS HTML DEL CUERPO

La parte contenida entre las etiquetas <body> y </body> es el cuerpo,

donde se incluyen los elementos que se ven en pantalla, como texto,
imágenes, tablas, enlaces, formularios...

Todos estos elementos serán mostrados por el navegador, por lo que es

necesario establecer un mecanismo para controlar los aspectos de dicha
visualización. Inicialmente, la forma de hacerlo era mediante la inclusión de
atributos que servían para ajustar las diversas propiedades del elemento. El
problema era que, de esta forma, información y presentación aparecen
mezcladas, lo cual dificulta tanto la creación como el mantenimiento de la
web. Más tarde, con la aparición de las hojas de estilo, se estableció un
mecanismo alternativo mediante el atributo style, manteniendo también la
funcionalidad del resto de atributos de presentación. A partir HTML5, estos
atributos obsoletos ya no son admitidos.

Los estilos son una forma de separar presentación y contenido. Definen

propiedades que funcionan de forma independiente a las etiquetas, por lo
que, con su implantación, desaparecen los atributos de presentación de las
etiquetas (por ejemplo, bgcolor para el color de fondo de la etiqueta
<body>) e incluso desaparecen las etiquetas que estaban destinadas
únicamente a presentación (como la etiqueta para controlar las fuentes de
texto <font>).

Los estilos se definen en cualquier etiqueta mediante el atributo style. Cada

propiedad de estilo se escribe de la forma propiedad:valor. Se pueden
especificar tantos estilos como se quiera, separándolos con comas. Por
tanto, sería:

<etiqueta style="propiedad1:valor1,propiedad2:valor2,…">

ENLACE DE INTERÉS

Para saber cómo usar las etiquetas y sus atributos posibles,

es conveniente tener siempre a mano la referencia. La
siguiente página ofrece una ayuda bastante clara y muy bien
organizada:

https://www.w3schools.com/tags/default.asp

19
5.1 Párrafos

Las etiquetas de párrafo <p> servirán para iniciar un nuevo párrafo de

texto. No se necesita la etiqueta de cierre </p> si no están alineados de
ninguna manera. No obstante, es recomendable usarla, como se comentó
anteriormente.

Los párrafos pueden alinearse. En este caso sí que necesitan su

correspondiente etiqueta de cierre </p>. El atributo usado inicialmente era
align, cuyos valores podían ser left, right, center o justify para alinear a
ambos márgenes. La propiedad equivalente para el atributo style es text-
align. Su valor puede ser cualquiera de los 4 anteriores. Por ejemplo, para
alinear el contenido del párrafo a la izquierda, en lugar de escribir:

<p align="left">
Se debe escribir:
<p style="text-align:left">

20
 EJEMPLO PRÁCTICO

A continuación se pueden ver los diferentes tipos de alineado:

<!DOCTYPE html>
<html lang="es">
<head>
<title>parrafos</title>
<meta charset="utf-8">
</head>
<body>
<p style="text-align:left"> Para alinear el texto con el margen
izquierdo.</p>
<p style="text-align:center"> Para centrar el texto.</p>
<p style="text-align:right"> Para alinear el texto con el margen
derecho.</p>
<p style="text-align:justify">Para alinear el texto a los dos
márgenes se debe utilizar la propiedad text-align con el valor
justify, que significa texto justificado. Es necesario incluir varias
líneas de texto para ver el efecto. Por eso este párrafo es más largo
que los tres escritos anteriormente. Se puede observar cómo el
navegador varía el tamaño de los espacios en blanco de cada línea,
para conseguir que todas ellas queden alineadas a ambos márgenes</p>
</body>
</html>

21
 NOTA

Actualmente, tampoco debe usarse la etiqueta <center> para

centrar un texto.

5.2 Títulos de encabezado

Sirven para poner títulos en las páginas. Usan las etiquetas <hx> y
</hx>, donde x es un número del 1 al 6.

Es importante tener en cuenta que estos números no tienen nada que ver
con el número de píxeles de la fuente ni con los números de la antigua
etiqueta <font>. Cuanto menor sea el número, mayor será la importancia
del título y por tanto su tamaño. El que corresponde al tamaño estándar del
texto es h3.

Se debe usar la etiqueta <h1> o <h2> para el título principal de la página,

y los otros tamaños menores para los títulos inferiores de segunda
categoría.

Se pueden alinear de forma similar a como se ha visto para los párrafos.

22
 EJEMPLO PRÁCTICO

<!DOCTYPE html>
<html lang="es">
<html>
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
<h1>Prueba1</h1>
<h2>Prueba2</h2>
<h3>Prueba3</h3>
<h4>Prueba4</h4>
<h5>Prueba5</h5>
<h6>Prueba6</h6>
</body>
</html>

23
5.3 Líneas horizontales

Son líneas que se usan para separar secciones de texto. Se usa la etiqueta
<hr>, sin etiqueta de cierre. Por defecto, la línea ocupará todo el ancho de
la página o el bloque en el que se encuentre.

Los antiguos atributos de presentación width y size (ancho y altura), se

definen mediante las propiedades de estilo width y height,
respectivamente, especificando un valor determinado, en píxeles,
porcentaje, etc.

EJEMPLO PRÁCTICO

Para crear una línea horizontal que ocupe el 75% de la

pantalla, habría que escribir:

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
<h1>Prueba1</h1>
<hr style="width:75%">
<h2>Prueba2</h2>
</body>
</html>

También se puede especificar la anchura en píxeles, para lo cual se

introduce el valor sin el símbolo %, sino seguido por px

24
<!DOCTYPE html>
<html lang="es">
<head>
<title>Hola Mundo</title>
<meta charset="utf-8">
</head>
<body>
<hr style="height:3px">
</body>
</html>

5.4 Negrita, cursiva, subrayado y tachado

Las siguientes etiquetas se pueden utilizar para conseguir diversos efectos

sobre el texto. Necesitan etiqueta de cierre. Son:

<b>negrita</b> para negrita.

<i>cursiva</i> para cursiva.

<u>subrayado</u> para subrayado

<s>tachado</s> para tachado.

25
Es posible realizar varios de estos efectos al mismo tiempo sobre un texto.
Para ello, se deben anidar las etiquetas, abriendo varias seguidas y después
cerrándolas, teniendo cuidado de no cerrar etiquetas dejando otras abiertas
en el interior. Es decir, se deben cerrar las etiquetas en el orden inverso al
que fueron abiertas. Por ejemplo, escribiendo
<b><i><u><s>texto</s></u></i></b>, se mostraría la palabra texto en
negrita, cursiva, subrayada y tachada.

EJEMPLO PRÁCTICO

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
<b>negrita</b><br>
<i>cursiva</i><br>
<u>subrayado</u><br>
<s>tachado</s><br>
<b><i><u><s>anidando etiquetas</s></u></i></b>
</body>
</html>

Hay otras etiquetas que se usan a menudo para conseguir estos mismos
efectos:

 <strong>, que los navegadores suelen definir por defecto como

negrita.
 <cite> y <em> que por defecto suele definirse como cursiva.

26
  <strike> (obsoleta) y <del>, que por defecto aparecen como texto
tachado.

No obstante, estas etiquetas tienen en HTML5 otros matices semánticos,

como se verá más adelante.

5.5 Texto preformateado

Como se vio anteriormente, HTML no conserva los espacios a partir del

primero, ni las tabulaciones y saltos de línea. Si bien es posible sustituirlos
por los códigos correspondientes, a veces, resulta interesante poder escribir
el texto tal cual se quiere que aparezca. Para ello, existe la etiqueta <pre>,
que define el elemento de texto preformateado, de forma que todo su
contenido será mostrado igual que se escribió.

EJEMPLO PRÁCTICO

<!DOCTYPE html>
<html lang="es">
<head>
<title>Ejemplo</title>
<meta charset="utf-8">
</head>
<body>
<pre>
Hola
Esto es una prueba del texto preformateado
</pre>
</body>
</html>

27
5.6 Citas textuales

La etiqueta empleada será <blockquote>, con etiqueta de cierre,

</blockquote>, para resaltar partes de texto con márgenes a ambos
lados.

EJEMPLO PRÁCTICO

<!DOCTYPE html>
<html lang="es">
<head>
<title>Ejemplo</title>
<meta charset="utf-8">
</head>
<body>
<p>Hola</p>
<blockquote>Esto es una cita textual</blockquote>
</body>
</html>

5.7 Superíndices y subíndices

Los superíndices y subíndices se mostrarán como texto más pequeño

situado ligeramente más arriba o debajo de la línea base del texto. Las
etiquetas serán <sup> para el superíndice y <sub> para el subíndice
(ambas con etiqueta de cierre).

28
 EJEMPLO PRÁCTICO

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
E=mc²<br>
<br>
H₂SO₄
</body>
</html>

5.8 Hipervínculos, enlaces o hiperenlaces

Cualquiera de estos tres nombres son los que se pueden utilizar para
denominar a los elementos que conectan unas páginas con otras. Los
enlaces son uno de los pilares sobre los que se construyó la Web. Mediante
ellos se consigue relacionar unos documentos con otros, en lugar de ser
simples documentos aislados.

La etiqueta usada para implementar los enlaces es <a>, con etiqueta de

cierre. El contenido del elemento definido por esta etiqueta será lo que sirva
como enlace, que puede ser un texto o cualquier otro elemento que se
pueda definir en html, como una imagen. De esta forma, al hacer clic sobre

29
este texto o imagen, el navegador accederá al contenido apuntado por
dicho enlace.

Un documento HTML puede enlazarse consigo mismo o con otro, con

documentos dentro de la misma web o fuera de ella. En caso de que el
documento enlazado sea de un tipo reconocible por el navegador, éste lo
abrirá. En caso contrario, preguntará si se desea descargar dicho archivo.

Para funcionar adecuadamente, la etiqueta <a> debe tener ciertos

atributos. El más básico y común es href (hypertext reference). Se trata del
atributo que contendrá la dirección en la que se encuentra el documento
que se quiere enlazar. Habitualmente, se le asigna como valor una URL.

EJEMPLO PRÁCTICO

Para crear un enlace textual a la web de Microsoft, cuya url es

http://www.microsoft.com, se escribiría:

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
Pulsa <a href="http://www.microsoft.com">aquí</a> para ir al sitio
web de Microsoft
</body>
</html>

El atributo principal que pueden tener los enlaces es target. Se trata de un

parámetro que indica al navegador, dónde se debe abrir el documento
apuntado por el enlace.

30
Sus posibles valores son:

 _blank: abre el documento enlazado en una nueva pestaña o ventana

(según esté configurado en el navegador).

 _self: abre el documento en la misma pestaña o ventana en la que

está el enlace. Es el valor por defecto.

También puede tomar otros valores relativos a frames, que se verán

posteriormente en el apartado correspondiente.

EJEMPLO PRÁCTICO

Continuando con el ejemplo anterior, para abrir dicho enlace en

una nueva pestaña, se escribiría:

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
Pulsa <a href="http://www.microsoft.com" target="_blank">aquí</a>
para ir al sitio web de Microsoft
</body>
</html>

Se pueden distinguir diferentes tipos de enlaces:

 Enlaces absolutos (a páginas situadas en otras webs).

 Enlaces relativos (a páginas de la propia web).
 Enlaces dentro de la misma página.

5.8.1 Enlaces absolutos

El ejemplo anterior, en el que se especifica una URL completa, se trata de

un enlace absoluto. Esto significa que se usa toda la dirección del sitio web,
no sólo una parte de él. Debe incluir la palabra inicial http:// seguida del
nombre del dominio.

31
Si sólo se especifica el nombre del dominio en lugar de una página concreta
dentro de la web, el navegador accederá a la página inicial por defecto del
sitio web. Esta página viene determinada por la configuración del servidor
web y suele ser index.html o similar.

Los enlaces absolutos son fundamentales para enlazar webs ajenas o sitios
que están hospedados en otros servidores. El caso anterior del enlace a
Microsoft sería un ejemplo de enlace absoluto.

Si se desea acceder a una página específica dentro del sitio web, se añadirá
el nombre de la carpeta seguido por el nombre de la página separados por
barras inclinadas: /

EJEMPLO PRÁCTICO

Siguiendo el ejemplo anterior, para enlazar con la página

sitemap.aspx situada en la carpeta es-es, quedaría:

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
<a href=" http://www.microsoft.com/es-es/sitemap.aspx ">Mapa de la
web</a> de Microsoft
</body>
</html>

Este enlace, pues, lleva a una página concreta de un sitio web más grande.

32
5.8.2 Enlaces relativos

Para ilustrar este caso, se puede pensar en varias personas dentro de

distintas habitaciones en una casa. Si desde dentro se quiere decir a una de
ellas dónde está otra de las personas, no será necesario decirle el domicilio
completo junto con la habitación, bastará con decirle únicamente el nombre
de esta última.

Los enlaces relativos permiten enlazar páginas situadas dentro de una

misma web, es decir, en su propia estructura de carpetas. Por tanto, estos
archivos pueden estar en el mismo directorio desde el que son
referenciados, o cada uno de ellos en un directorio distinto.

Si se desea enlazar una página con otra dentro de un mismo sitio web y
ambas residen en el mismo directorio, se debe poner directamente el
nombre del documento como valor de href.

EJEMPLO PRÁCTICO

Por ejemplo, para enlazar con intro.htm, quedaría:

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
Pulsa <a href="intro.htm">aquí</a> para ir a la introducción del
curso de HTML
</body>
</html>

Si lo que se desea es enlazar un documento en otro directorio dentro del

mismo servidor, el caso más sencillo será que este directorio se encuentre
más abajo en la jerarquía que el directorio actual. En ese caso, habrá que
añadir a la ruta el nombre de dicho directorio.

33
 EJEMPLO PRÁCTICO

Si en el directorio principal hay un directorio llamado

“ejemplos” donde se encuentra un archivo llamado “ej1.htm”,
para enlazar este archivo habrá que escribir el código que se
indica a continuación:

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
Pulsa <a href="ejemplos/ej1.htm">aquí</a> para ver un ejemplo
</body>
</html>

En el caso contrario, si el directorio actual es “ejemplos” y se quisiera poner

un enlace a una página situada en el directorio principal, habría que poner
dos puntos seguidos “..” para retroceder a cada directorio al que se necesite
subir en la jerarquía. Es decir, se hace de la misma forma que se
especifican las rutas de sistemas de archivos como los de Windows o Linux.

EJEMPLO PRÁCTICO

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
Pulsa <a href="../index.htm">aquí</a> para volver a la página
principal
</body>
</html>

34
Estos dos últimos casos vistos pueden combinarse.

EJEMPLO PRÁCTICO

Por ejemplo, si estando en el directorio “ejemplos”, se quiere

enlazar con una página llamada “prueba1.htm” situada en un
directorio llamado “pruebas” que se encuentra al mismo nivel
de “ejemplos”, es decir, que también es un subdirectorio del
directorio principal, el código para enlazarlo sería:

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
Pulsa <a href="../pruebas/prueba1.htm">aquí</a> para ver el primer
ejemplo
</body>
</html>

5.8.3 Enlaces internos

Los enlaces internos facilitan la navegación dentro de una misma página,

permitiendo a los usuarios acceder más rápidamente a la información
contenida en ella desde otro punto de la página.

A diferencia del resto de enlaces, al hacer clic en algún texto o imagen, la

página actual se desplazará a un determinado punto de sí misma, sin cargar
una nueva página.

Para crear este tipo de enlaces es necesario realizar dos operaciones. En

primer lugar, hay que definir los puntos a los que se desea poder dirigirse
desde los enlaces. Son los llamados marcadores o anclas. El siguiente paso
será crear los enlaces propiamente dichos. En esta ocasión, en vez de
apuntar a páginas diferentes, apuntarán a los marcadores creados.

La definición de las anclas se hacía mediante el atributo name de la propia

etiqueta <a>. Sin embargo, este sistema no está admitido actualmente. La
forma correcta de hacerlo es mediante el atributo id. Como este atributo
está disponible en todos los elementos html, es posible usar como ancla
cualquier elemento de la página.

35
Es importante saber que los identificadores de los elementos deben ser
únicos, por lo que no pueden definirse varios id con el mismo nombre en la
misma página.

Para realizar el enlace a un elemento, bastará con referenciar su

identificador precedido del símbolo de almohadilla: #

Por ejemplo:
<a href="#principio">principio</a>

PARA SABER MÁS

Al igual que id, hay más atributos globales, que están

disponibles para cualquier elemento html. Se pueden
consultar en la siguiente dirección:

https://www.w3.org/wiki/Html/Attributes/_Global

36
 EJEMPLO PRÁCTICO

En el siguiente ejemplo, se enlaza con el título, situado al

principio de la página:

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
<h1 id="principio">CESUR</h1>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Pulsa para volver al <a href="#principio">principio</a>
</body>
</html>

Para apreciar el funcionamiento de estos enlaces, es necesario que la

página se haya desplazado, por lo que el contenido tiene que ocupar más
que la parte visible de la página. Por eso se han añadido varios saltos de
línea en el ejemplo anterior.

Si se colocan varios marcadores en distintas secciones de la página, será

posible saltar de una a otra como si de páginas diferentes se tratara, pero

37
con la ventaja de no tener que cargar una nueva página. No obstante, esta
técnica debe emplearse con precaución, ya que no es conveniente que una
misma página contenga mucha información, puesto que aumentará el
tiempo de carga y también puede resultar incómoda para el usuario, que
debe usar continuamente la barra de desplazamiento.

NOTA DE INTERÉS

Se debe tener en cuenta que los identificadores de los

elementos son sensibles a mayúsculas y minúsculas. Los
siguientes ejemplos no corresponden al mismo marcador:

<p id="Principio"></p>
<p id="principio"></p>

5.8.4 Enlaces a otros elementos

No sólo se pueden enlazar páginas. Cualquier elemento puede ser enlazado,

desde otros archivos independientes hasta otros protocolos de internet.

- Enlaces a archivos independientes

Se usa para abrir archivos directamente con el navegador. Suelen ser

archivos grandes como imágenes, canciones, documentos de texto, etc. Si
el formato del archivo no es reconocido por el navegador, éste preguntará si
se desea descargar el archivo.

Se construyen referenciando directamente el archivo, en lugar de una

página web. Por ejemplo:

<a href="bandera.gif">Imagen de la bandera<a>

Las rutas pueden especificarse igualmente de manera absoluta o relativa.

38
 EJEMPLO PRÁCTICO

En el siguiente ejemplo que sirve para descargar un archivo zip,

se muestran ambas formas.

Con enlace absoluto:

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
Descarga este <a href="http://www.cesur.com/ASIR.zip">archivo</a>
</body>
</html>

Con enlace relativo:

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
Descarga este <a href="archivo.zip">archivo</a>
</body>
</html>

- Enlaces a direcciones de correo electrónico

Una forma muy conveniente de que los navegantes contacten con el

propietario de la página, es ofreciéndoles un enlace a la dirección de email

39
del propietario. Puede hacerse mediante la etiqueta <a> y una referencia
conocida como naukti.

Estas referencias se construyen mediante la palabra clave mailto seguida de

dos puntos y la dirección de email.

EJEMPLO PRÁCTICO

El siguiente ejemplo serviría para enviar un correo a

[email protected]:

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
Pulsa <a href="mailto:[email protected]">aquí</a>
para enviar un correo.
</body>
</html>

Cuando se haga clic en el enlace, el navegador llamará al gestor de correo

predeterminado del ordenador en el que se está ejecutando, abriéndose la
ventana de correo nuevo. La diferencia con respecto a simplemente abrir
dicho programa es que uno o varios campos aparecerán ya rellenos. En este
caso, el campo “Para”.

También es posible especificar otros datos que rellenarán otros elementos

de la ventana de nuevo correo. El más útil es el asunto del mensaje, de
forma que se añada dicho dato al mensaje de forma predeterminada. Esto
puede ser muy útil para diferenciar automáticamente los correos enviados a
uno u otro departamento o por un motivo determinado.

40
 EJEMPLO PRÁCTICO

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
<a href="mailto:[email protected]?subject=Consulta
de notas">Email notas</a>
</body>
</html>

En esta ocasión, tras hacer clic en el enlace se abrirá la ventana para

escribir un nuevo correo, apareciendo la frase "Consulta de notas" en el
asunto del mensaje de correo que se va a enviar.

- Direcciones de grupos de noticias

Se escriben de la forma servidor_de_noticias: grupo_de_noticias.

EJEMPLO PRÁCTICO

Para hacer un enlace al grupo de noticias de Windows situado

en el servidor de Microsoft, se escribiría:

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
Pulsa <a
href="msnews.microsoft.com:microsoft.public.es.windows">aquí </a>para
ir al grupo de noticias de Windows.
</body>
</html>

41
- Enlaces a protocolos de internet

También se pueden hacer enlaces a otros protocolos de internet. Por

ejemplo, a FTP. Un FTP (File Transfer Protocol), permite descargar archivos
desde un servidor. En realidad, se trata de un directorio del ordenador
servidor que está compartido, es decir, los usuarios de internet pueden
entrar en él y acceder a sus archivos.

La forma de implementar estos enlaces es muy similar a los enlaces a

páginas web, pero en vez de escribir http://www al principio, se escribe
ftp://ftp.

EJEMPLO PRÁCTICO

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
<a href="ftp://ftp.rediris.es/debian/tools/loadlin.exe">Descarga
Loadlin para debian</a>
</body>
</html>

5.9 Listas

En este apartado veremos cómo realizar listas ordenadas o numéricas,

desordenadas y de descripción en HTML.

5.9.1 Listas desordenadas

Las listas desordenadas son aquellas en las que no importa el orden de los
elementos, por lo que no llevarán numeración. La etiqueta usada es <ul>,
con etiqueta de cierre </ul>, para la lista, y la etiqueta <li> para cada
uno de los elementos de la lista. Por tanto, quedaría de la siguiente forma:
<ul>
<li>Elemento</li>
…
</ul>

42
Es posible controlar la forma de la viñeta que antecede a cada elemento de
la lista. Para ello, no se debe usar el atributo obsoleto type sino la
propiedad de estilo list-style-type.

Los valores de list-style-type más comunes son:

 disc: disco. Es el valor por defecto. Se representa mediante un círculo

relleno.
 circle: círculo. Al contrario de disc, el círculo está hueco en su interior.
 square: cuadrado.
 none: para no mostrar ninguna viñeta.

EJEMPLO PRÁCTICO

Para que se muestre un cuadrado

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
<ul style="list-style-type:square">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
</body>
</html>

43
Es posible anidar las listas, incluyendo una dentro de otra.

EJEMPLO PRÁCTICO

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
<ul>
<li>Elemento 1
<ul>
<li>Elemento 1.1</li>
<li>Elemento 1.2</li>
<li>Elemento 1.3</li>
</ul>
</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
</body>
</html>

44
También se puede cambiar el tipo de símbolo, elemento por elemento. Para
ello, se debe especificar la propiedad list-style-type para cada elemento en
lugar de para la lista:

EJEMPLO PRÁCTICO

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
<ul>
<li style="list-style-type:square">Elemento 1</li>
<li style="list-style-type:circle">Elemento 2</li>
<li style="list-style-type:disc">Elemento 3</li>
</ul>
</body>
</html>

5.9.2 Listas ordenadas o numeradas

En estas listas el orden importa, por lo que aparecerán con numeración en

lugar de con viñetas. Dicha numeración puede estar expresada en decimal,
mediante letras ordenadas alfabéticamente o con números romanos.

La etiqueta que se debe usar es <ol>, con etiqueta de cierre </ol>para la

lista e, igualmente, <li> para cada uno de los elementos que contenga la
lista:

45
<ol>
<li>Elemento</li>
…
</ol>

Puede llevar los siguientes atributos:

- start=num: indica que número será el primero de la lista. Si no se indica,

por defecto será 1, es decir, empezará por el primer elemento (1, a, i…).

- type=tipo: indica el tipo de numeración utilizada. Si no se indica, por

defecto será una lista ordenada numéricamente.

Los tipos posibles son:

 1 = Decimal (1,2,3,4...).
 a = Letras minúsculas (a,b,c,d...).
 A = Letras mayúsculas (A,B,C,D...).
 i = Números romanos en minúsculas (i.ii,iii,iv,v...).
 I = Números romanos en mayúsculas (I,II,III,IV,V...).

Estas listas también pueden anidarse, al igual que las listas desordenadas.

46
 EJEMPLO PRÁCTICO

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
<ol type="i">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ol>
</body>
</html>

De forma equivalente, a cada elemento puede dársele un valor de manera

similar a start=x, con value=x. En lugar de asignar dicho valor en la
etiqueta <ol>, ahora se haría directamente en el elemento, es decir, en la
etiqueta <li>:

47
 EJEMPLO PRÁCTICO

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
<ol>
<li value="10">Este elemento está numerado como 10</li>
<li>Elemento siguiente</li>
<li>Otro elemento más</li>
</ol>
</body>
</html>

5.9.3 Listas de descripción

Las listas de descripción, anteriormente llamadas listas de definición, sirven

para enumerar conjuntos de términos con sus respectivas descripciones.

La etiqueta que se usará es <dl>, con etiqueta de cierre </dl> para la

lista, <dt> para cada término y <dd> para cada descripción de cada
término. Es decir, el elemento dl contendrá tantos pares de elementos dt y
dd como términos o nombres haya.
<dl>
<dt>Término</dt>
<dd>Descripción</dd>
…
</dl>

48
 EJEMPLO PRÁCTICO

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
<dl>
<dt>Elemento 1</dt>
<dd>Descripción del elemento 1</dd>
<dt>Elemento 2</dt>
<dd>Descripción del elemento 2</dd>
<dt>Elemento 3</dt>
<dd>Descripción del elemento 3</dd>
</dl>
</body>
</html>

5.10 Imágenes

A lo largo de este apartado estudiaremos los diferentes formatos de imagen

que se pueden incluir en una web, así como la forma de insertarlas,
encuadrarlas, ponerles marcos y márgenes.

5.10.1 Formatos gráficos en la web

Los formatos de imagen que pueden encontrarse en la web son:

49
- GIF

Este formato, compatible con la inmensa mayoría de los navegadores,

ofrece 256 colores y un grado de compresión estándar bastante alto.
Ofrece algunas variantes, como el GIF entrelazado, muy usado, que permite
que los píxeles de cada imagen se carguen poco a poco de forma que según
se vaya cargando la imagen se vaya volviendo más nítida. Es altamente
recomendable usar GIF entrelazados, ya que, además, ocupan el mismo
tamaño que los GIF normales.

También se pueden usar GIF transparentes. Para ello se necesita un

programa que permita crear índices de transparencia, es decir, hacer que
un color de fondo se vuelva transparente, como el Paint Shop Pro.

Hay que mencionar que existen varios formatos de GIF: el 87a y el 89a. El
primero no soporta transparencias y el segundo sí, por lo que es
conveniente usar éste último. Los dos soportan entrelazado.

- GIF ANIMADOS

Para crearlos se necesita agrupar varios fotogramas en un sólo archivo GIF

en formato 89a, los cuales pueden ser transparentes. Estos tipos de gráficos
son iguales que las imágenes normales a la hora de usar etiquetas HTML.
Algunos programas que permiten hacer esto son el Microsoft GIF Animator y
el GIF Construction Set. Es más recomendable usar este tipo de
animaciones que las típicas AVI y FLC, ya que se cargan desde el navegador
y ocupan mucho menos espacio.

- JPEG

Este otro formato ofrece 16,7 millones de colores en varias calidades de

imagen, según la compresión utilizada. Tiene un grado de compresión (con
pérdida) mayor que el GIF, y es el ideal para imágenes fotográficas. No es
recomendable usarlo para dibujos con colores planos, elementos gráficos o
textos, ya que la compresión con pérdida produce elementos pixelados y
manchas en las superficies con colores planos, cosas que normalmente no
resultan apreciables en las fotografías. Para cubrir esas necesidades se debe
recurrir a formatos como GIF o PNG.

- PNG

Formato diseñado para solucionar las limitaciones del GIF, como el número
de colores. Se trata de un formato comprimido sin pérdida, que además

50
soporta transparencias. Actualmente, es recomendable usar este formato en
lugar del GIF.

5.10.2 Insertando imágenes

Las imágenes se pueden insertar como fondo de diversos elementos (por

ejemplo, fondo de página), o bien como un elemento por sí mismo. En este
caso, se usa la etiqueta <img>. No lleva etiqueta de cierre.

Para especificar la imagen que se quiere que aparezca, la etiqueta requiere

un origen de datos obligatorio dado por el atributo src, en el que se indicará
la ruta de acceso al archivo de imagen:

<img src="imagen.gif">

El ejemplo anterior, al especificar sólo el nombre del archivo, mostrará la

imagen situada en el mismo directorio del documento HTML.

Normalmente, las imágenes se suelen colocar en un subdirectorio creado

específicamente para ellas bajo el directorio raíz de la página web. Este
directorio se puede llamar images, imágenes, gráficos..., dependiendo de
los gustos. Si la imagen está en un subdirectorio y la página HTML en el
directorio principal, se necesitará incluir dicha carpeta en la dirección,
componiendo así lo que se conoce como ruta relativa:

<img src="imagenes/imagen.gif">

Al igual que se vio para el caso de los enlaces, otra alternativa es usar
direcciones absolutas. Para ello, se especifica la ruta completa del archivo.

Por ejemplo:
<img src="/www/imagenes/imagen.gif">

Esta ruta también puede ser un hiperenlace (una dirección en la web):

<img src="http://example.com/imagenes/imagen.gif">

Lo más recomendable es usar siempre direcciones relativas. De esta forma,

aunque se mueva toda la estructura de carpetas de la web a otra ubicación,
los enlaces seguirán funcionando.

El segundo atributo obligatorio para la etiqueta <img> es alt. Consiste en

una descripción textual del contenido de la imagen. Se usa para saber a qué
hace referencia la imagen en caso de que no se pueda cargar, y para ser

51
usado por sistemas accesibles o buscadores. Será la descripción que
muestre el navegador al colocar el ratón encima de la imagen:
<img src="imagenes/gato.gif" alt="gato persa">

También se pueden añadir atributos para controlar el tamaño de la imagen.

Si no se especifica nada, la imagen se cargará con su tamaño original, lo
que puede no resultar recomendable. Por tanto, aunque no son obligatorios,
resulta conveniente especificar un valor para estos atributos. Son:

 width="x" Permite al navegador predeterminar el ancho que tendrá la

imagen, en píxeles.
 height="x" Junto con el atributo width, el navegador puede preparar
el espacio necesario para la imagen antes de que se muestre.

Aunque en versiones anteriores se podían especificar tamaños en

porcentaje, los únicos valores admitidos actualmente son píxeles (sólo se
especifica el número, no se escribe px). No obstante, siempre se pueden
usar atributos de estilo para especificar todo tipo de unidades que puedan
resultar más convenientes, como se verá más adelante.

52
 EJEMPLO PRÁCTICO

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
<img src="playa.jpg" alt="playa" width="480" height="268">
</body>
</html>

Las imágenes se adaptan a los tamaños que se especifiquen con estos

parámetros, de forma que, si la imagen original es mayor, se reducirá, y si
es menor, se ampliará para adaptarse a dichas dimensiones.

Si sólo se especifica uno de los dos parámetros, la otra dimensión se

generará automáticamente de forma que se mantengan las proporciones de
la imagen.

53
 EJEMPLO PRÁCTICO

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
<img src="playa.jpg" alt="playa" width="240">
</body>
</html>

Si se especifican ambos parámetros, se debe tener en cuenta que la imagen

puede aparecer distorsionada si los valores especificados no mantienen las
mismas proporciones de la imagen original.

54
 EJEMPLO PRÁCTICO

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
<img src="playa.jpg" alt="playa" width="100" height="200">
</body>
</html>

Es importante tener en cuenta que estos tamaños son los que se usan para
mostrar la imagen, pero no intervienen en la descarga de las imágenes que
se realiza al cargar la página. Es decir, todas las imágenes se descargan tal
cual estén almacenadas en el servidor y luego se escalan a la hora de
mostrarse en el navegador. Por tanto, si, por ejemplo, se quiere crear una
galería de imágenes con miniaturas que mostrarán la imagen ampliada tras
pulsar sobre ellas, no se debe usar la misma imagen para mostrar las
miniaturas, ya que se tendrían que cargar las imágenes completas
igualmente. Para estos casos en los que se muestre la misma imagen en
varios tamaños, lo que se hace es almacenar estos diferentes tamaños (o
varios de ellos) como archivos distintos. En el ejemplo, se guardarían las
miniaturas, que serían las que se mostrarían en la galería de imágenes, y

55
las imágenes originales, que serían las que se mostrarían tras pulsar sobre
una miniatura.

Por defecto, las imágenes aparecerán en la parte superior izquierda de la

página. Es la posición predeterminada del navegador. Para cambiarla, antes
se podía recurrir a otros atributos como align para alinear, y hspace y
vspace para dejar márgenes. Estos atributos obsoletos ya no están
admitidos, por lo que se debe hacer con propiedades de estilo.

5.10.3 Alineación de imágenes

Se distinguen dos tipos de alineación, una en sentido vertical y otra en

horizontal. La alineación vertical, se puede lograr mediante la propiedad de
estilo vertical-align. Algunos de los valores que puede tomar son:

 top: este valor coloca la imagen en la parte superior del elemento en

el que esté insertada.
 middle: este valor colocará la imagen alineada con el centro del
elemento en el que esté insertada.
 bottom: con este valor, la imagen estará alineada con la parte inferior
del elemento en el que esté insertada.

Para verlo en un ejemplo, es necesario poner como altura de línea un

tamaño mayor al de la imagen ya que si no, no se podrá apreciar su
alineación en vertical. Para ello, se usa la propiedad de estilo line-height.

56
 EJEMPLO PRÁCTICO

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body style="line-height:200px">
<img src="playa.jpg" width="200" height="100" alt="playa"
style="vertical-align:top">
<img src="playa.jpg" width="200" height="100" alt="playa"
style="vertical-align:middle">
<img src="playa.jpg" width="200" height="100" alt="playa">
style="vertical-align:bottom">
</body>
</html>

Para alinear horizontalmente una imagen, si bien se puede conseguir

alineando un párrafo o bloque en el que esté contenida, se debe tener en
cuenta que no se está alineando la imagen en sí, aunque en muchos casos
el efecto conseguido sea el mismo.

Las imágenes son elementos en línea (inline), por lo que pueden tener otros
elementos a su alrededor que adaptarán su espacio al hueco dejado por la
imagen. Es el caso de las columnas de texto a un lado de la imagen. Para

57
ello, se debe alinear la imagen a un lado, pero sin que esta alineación afecte
al texto del párrafo. Esto se consigue mediante lo que se denomina
imágenes flotantes.

Un elemento flotante es aquel que tiene la propiedad de estilo float. Si su

valor es left, flotará a la izquierda, quedando el texto (u otros elementos
inline), si lo hay, a la derecha. Si es right, flotará a la derecha, quedando el
texto, si lo hay, a la izquierda. Para que un elemento no flote, el valor que
se debe especificar es none (su valor por defecto).

EJEMPLO PRÁCTICO

En este ejemplo se alinea a la izquierda la imagen:

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
<img src="playa.jpg" width="480" height="268" alt="playa"
style="float:left">
</body>
</html>

También se puede probar alineando la imagen al otro margen. A

continuación se muestra un ejemplo similar al anterior, pero con una
imagen flotante a la derecha.

58
 EJEMPLO PRÁCTICO

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
<img src="playa.jpg" width="480" height="268" alt="playa"
style="float:right">
</body>
</html>

5.10.4 Bordes en imágenes

Dado que el atributo obsoleto border ya no está admitido y las imágenes ya

no tienen borde por defecto, no es necesario desactivarlo como era
frecuente realizar. Sin embargo, si lo que interesa es añadir un borde, se
puede conseguir usando la propiedad de estilo border.

Su sintaxis es la siguiente (los elementos no son obligatorios y pueden

aparecer en cualquier orden):

59
border: ancho estilo color
Donde:
 ancho: el ancho del borde en píxeles u otras unidades.
 estilo: define si la línea de borde será continua (solid), punteada
(dotted), etc.
 color: el color del borde, especificado textualmente, en rgb,
hexadecimal, etc.

Por defecto, no aparecen bordes, como se ha visto en los ejemplos

anteriores.

EJEMPLO PRÁCTICO

Añadiendo un borde de 8 píxeles de anchura, quedaría:

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
<img src="playa.jpg" width="480" height="268" style="border:8px
solid black">
</body>
</html>

60
5.10.5 Márgenes en imágenes

Al igual que ocurre con el borde, los atributos hspace y vspace quedaron
obsoletos y ya no están admitidos, pero conseguir los márgenes resulta tan
sencillo como usar la propiedad de estilo margin. Su sintaxis es la
siguiente:
margin: margen-superior margen-derecho margen-inferior margen-
izquierdo

Siendo estos 4 valores números que especifican los márgenes a cada uno
de esos lados, en píxeles o cualquier otra unidad admitida.
Por ejemplo: margin: 1px 1px 1px 1px

Si los márgenes superior e inferior son iguales y derecho e izquierdo

también, se puede expresar el margen con tan sólo dos números. Quedando
en ese caso:
margin: margen-sup-inf margen-der-izq

En general, si algún valor se omite, tomará el valor del margen en la misma

dirección. Si sólo se especifica un valor, todos los márgenes tomarán ese
valor:
margin: margen

También es posible definir cada uno de los márgenes por separado

mediante las propiedades:
margin-top: margen-superior
margin-right: margen-derecho
margin-bottom: margen-inferior
margin-left: margen-izquierdo

61
 EJEMPLO PRÁCTICO

A continuación se ve cómo queda una imagen sin márgenes con

respecto al texto:

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
Texto al lado de la imagen<img src="playa.jpg" width="240"
alt="playa">
</body>
</html>

Definiendo un margen a la izquierda de la imagen, ésta se separará del texto:

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
Texto al lado de la imagen<img src="playa.jpg" width="400"
height="200" style="margin:0px 20px" alt="playa">
</body>
</html>

62
Y si el margen es horizontal, quedaría:

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
Texto al lado de la imagen<img src="playa.jpg" width="400"
height="200" style="margin:20px 0px" alt="playa">
</body>
</html>

5.10.6 Usando imágenes como enlaces

Como se comentó al explicar los enlaces, no sólo es posible realizar enlaces

de texto, sino que puede usarse como enlace cualquier tipo de elemento,
siendo muy común usar imágenes.

63
Basta con incluir la etiqueta <img> dentro del contexto de la etiqueta <a>.
De esta forma, al hacer clic sobre la imagen, saltará al documento con el
que se haya enlazado mediante enlace absoluto o relativo.

EJEMPLO PRÁCTICO

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
<p>Pulsa sobre la imagen para acceder a la página:</p>
<a href="vacacciones.htm"><img src="playa.jpg" width="240"
alt="playa"><a>
</body>
</html>

Si se hace clic sobre cualquier punto de la imagen, se accederá a la página

“vacaciones.htm”.

5.11 Tablas

64
Las tablas sirven fundamentalmente para colocar de una forma ordenada
cualquier elemento, desde textos hasta imágenes. En los inicios de HTML,
fueron muy utilizadas para maquetar, debido a la facilidad para disponer
elementos en la página siguiendo un determinado esquema. Hoy día, sin
embargo, no deben usarse para maquetar, sino sólo con la función
habitual de una tabla, es decir, la de presentar información. Los motivos
son múltiples: mayor accesibilidad, adaptabilidad, separación de contenido
y presentación, etc.

La etiqueta que define una tabla es <table>, con cierre </table>. Dentro
de su ámbito, es necesario definir filas y columnas. Dicha tarea se realiza
con la etiqueta <tr> para las filas y <td> para las celdas, es decir, lo que
serían las columnas dentro de cada fila. Sus cierres no son obligatorios,
pero sí convenientes. Se realizan con </tr> y </td>, respectivamente.

Lo primero que deben definirse son las filas, por lo que habrá que escribir
tantos pares <tr></tr> como filas se quiere que tenga la tabla. Luego,
dentro de cada elemento tr, habrá que añadir tantos pares <td></td>
como columnas se quieran definir. Lo habitual será incluir el mismo número
de elementos td en cada uno de los elementos tr.

Por defecto, las tablas aparecen sin bordes:

65
 EJEMPLO PRÁCTICO

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
<table>
<tr>
<td>00</td>
<td>01</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
</tr>
</table>
</body>
</html>

También es posible añadir bordes a las tablas, para incrementar la

legibilidad de los datos contenidos en ellas. Para ello, es necesario definir
los bordes de igual manera a como se hacía con las imágenes. No se debe
usar el atributo obsoleto border, sino que se realiza añadiendo una
propiedad de estilo con el mismo formato visto anteriormente:
border:ancho estilo color

Por tanto, para un borde negro de un píxel de ancho, se escribiría:

border: 1px solid black

66
Lo más habitual es aplicarlo tanto a la tabla, para poner un recuadro
alrededor de ella, como a cada una de las celdas, para separar sus
contenidos:

EJEMPLO PRÁCTICO

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
<table style="border:1px solid black">
<tr>
<td style="border:1px solid black">00</td>
<td style="border:1px solid black">01</td>
</tr>
<tr>
<td style="border:1px solid black">10</td>
<td style="border:1px solid black">11</td>
</tr>
</table>
</body>
</html>

Aunque no es habitual, también es posible crear tablas con un número

distinto de celdas en las filas:

67
 EJEMPLO PRÁCTICO

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
<table>
<tr>
<td>00</td>
<td>01</td>
</tr>
<tr>
<td>10</td>
</tr>
</table>
</body>
</html>

Lo normal, será hacer que el hueco libre quede ocupado por una de las
celdas adyacentes, es decir, crear celdas que ocupen más de una columna o
más de una fila. Mediante el atributo colspan, se puede conseguir que la
celda ocupe más de una columna y mediante rowspan, que ocupe más de
una fila.

Su sintaxis es:
 colspan="x", siendo x el número de columnas que abarcará la
celda.

68
  rowspan="x", donde x es el número de filas que abarcará la celda.

EJEMPLO PRÁCTICO

Para abarcar dos columnas:

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
<table style="border:1px solid black">
<tr>
<td colspan="2" style="border:1px solid black">Celda
abarcando</td>
</tr>
<tr>
<td style="border:1px solid black">00</td>
<td style="border:1px solid black">01</td>
</tr>
<tr>
<td style="border:1px solid black">10</td>
<td style="border:1px solid black">11</td>
</tr>
</table>
</body>
</html>

Y para abarcar dos filas:

69
<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
<table style="border:1px solid black">
<tr>
<td rowspan="2" style="border:1px solid black">Celda
abarcando</td>
<td style="border:1px solid black">a</td>
<td style="border:1px solid black">b</td>
</tr>
<tr>
<td style="border:1px solid black">c</td>
<td style="border:1px solid black">d</td>
</tr>
</table>
</body>
</html>

5.11.1 Espaciado en tablas

Es posible separar unas celdas de otras, así como el contenido con respecto
al borde de la propia celda. Para ello, no se deben emplear los atributos no
admitidos de table: cellspacing (espaciado entre celdas) y cellpadding
(margen interno de la celda), sino que se deben usar propiedades de estilo.

Para separar unas celdas de otras, se usa la propiedad border-spacing.

Como valor se le asigna el número de píxeles de separación entre las celdas
y el borde de la tabla. Por defecto es de dos píxeles.

70
 EJEMPLO PRÁCTICO

Para poner un espacio de 25 píxeles:

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
<table style="border:1px solid black;border-spacing:25px">
<tr>
<td style="border:1px solid black">00</td>
<td style="border:1px solid black">01</td>
</tr>
<tr>
<td style="border:1px solid black">10</td>
<td style="border:1px solid black">11</td>
</tr>
</table>
</body>
</html>

El otro posible espaciado es el del contenido de las celdas con respecto a su

borde. Por defecto es 1 píxel, pero puede ser ajustado también. La
propiedad a usar es padding, asignándole como valor el espaciado en
píxeles.

71
 EJEMPLO PRÁCTICO

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
<table style="border:1px solid black">
<tr>
<td style="border:1px solid black;padding:25px">00</td>
<td style="border:1px solid black;padding:25px">01</td>
</tr>
<tr>
<td style="border:1px solid black;padding:25px">10</td>
<td style="border:1px solid black;padding:25px">11</td>
</tr>
</table>
</body>
</html>

5.11.2 Títulos y encabezados de tablas

Se puede asignar un título a la tabla. Para ello se usa la etiqueta <caption>,

con cierre </caption>. Se debe especificar dentro del elemento table.

72
 EJEMPLO PRÁCTICO

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
<table style="border:1px solid black">
<caption>Tabla</caption>
<tr>
<td>00</td>
<td>01</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
</tr>
</table>
</body>
</html>

También es posible asignar títulos a las columnas de la tabla. En realidad,

se trata de celdas como las definidas por la etiqueta <td>, pero que por
defecto aparecen centradas y en negrita.

La etiqueta que se debe utilizar es <th>, con cierre </th>. Su

funcionamiento es equivalente al de <td>, debiendo aparecer igualmente
dentro de un elemento tr.

73
 EJEMPLO PRÁCTICO

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
<table style="border:1px solid black">
<tr>
<th style="border:1px solid black">Letras</th>
<th style="border:1px solid black">Números</th>
</tr>
<tr>
<td style="border:1px solid black">a</td>
<td style="border:1px solid black">1</td>
</tr>
<tr>
<td style="border:1px solid black">b</td>
<td style="border:1px solid black">2</td>
</tr>
</table>
</body>
</html>

74
5.11.3 Imágenes en tablas

Una celda no sólo puede contener texto sino cualquier otro elemento HTML,
por lo que es posible insertar imágenes en ellas. El procedimiento es el
mismo que se ha visto para insertar imágenes, sólo que la etiqueta <img>
debe incluirse dentro del ámbito definido por una etiqueta <td>.

Es importante tener en cuenta que no se trata de una imagen de fondo, por

lo que, si la celda también contiene texto, compartirá el espacio disponible
de la celda.

75
 EJEMPLO PRÁCTICO

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
<table style="border:1px solid black">
<tr>
<th style="border:1px solid black">Columna 1</th>
<th style="border:1px solid black">Columna 2</th>
</tr>
<tr>
<td style="border:1px solid black">Texto<img
src="playa.jpg" width="240" alt="playa"></td>
<td style="border:1px solid black">1</td>
</tr>
<tr>
<td style="border:1px solid black">b</td>
<td style="border:1px solid black">2</td>
</tr>
</table>
</body>
</html>

76
5.11.4. Dimensionado de tablas

Como se ha podido observar en los ejemplos anteriores, las celdas adoptan

por defecto, el tamaño del mayor de sus elementos, bien sea de ancho o de
alto. Y, por tanto, las tablas tendrán por defecto, la suma del espacio
ocupado por sus celdas.

Es posible forzar el tamaño de la tabla para que ocupe un tamaño

determinado sin hacer caso a su contenido. Los atributos obsoletos de
<table>, width y height, no deben ser utilizados para dimensionar la tabla.
Como en casos anteriores, se debe recurrir a las propiedades de estilo con
el mismo nombre: width para especificar el ancho de la tabla, y height
para especificar el alto de la tabla.

EJEMPLO PRÁCTICO

Para asignar una anchura total de 400 píxeles:

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
<table style="border:1px solid black;width:400px">
<tr>
<td style="border:1px solid black">a</td>
<td style="border:1px solid black">b</td>
</tr>
<tr>
<td style="border:1px solid black">c</td>
<td style="border:1px solid black">d</td>
</tr>
</table>
</body>
</html>

77
<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
<table style="border:1px solid black;height:200px">
<tr>
<td style="border:1px solid black">a</td>
<td style="border:1px solid black">b</td>
</tr>
<tr>
<td style="border:1px solid black">c</td>
<td style="border:1px solid black">d</td>
</tr>
</table>
</body>
</html>

También es posible asignar tamaños a las celdas. No obstante, se debe

tener en cuenta que todas las celdas de una misma columna tendrán
finalmente el mismo ancho, y todas las celdas de una misma fila tendrán
finalmente la misma altura. Por lo tanto, si se especifican diferentes valores
para las celdas, el navegador los irá aplicando en orden de aparición, por lo
que, en la práctica, el valor que se aplicará será el último que se defina.

Por ejemplo, en el siguiente caso, inicialmente, al definir un tamaño para la

tabla completa, se divide dicho espacio total de forma proporcional para
cada celda. Posteriormente, al especificar un valor de width y height para la
primera celda, el navegador asigna a la primera columna un ancho de 120
píxeles y a la primera fila una altura también de 120 píxeles. Las restantes
filas y columnas se reajustan para seguir manteniendo el tamaño total
definido en la etiqueta <table>. Después, al leer la siguiente celda, que
especifica una anchura de 20 píxeles, hace que la segunda columna

78
adquiera dicha anchura, por tanto, la primera será la que se adapte esta
vez para mantener el ancho total de la tabla, ignorando el valor que le fue
asignado antes.

EJEMPLO PRÁCTICO

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
<table style="border:1px solid black;width:300px;height:200px">
<tr>
<td style="width:120px;height:120px;border:1px solid
black">a</td>
<td style="width:20px;border:1px solid black">b</td>
</tr>
<tr>
<td style="border:1px solid black">c</td>
<td style="border:1px solid black">d</td>
</tr>
</table>
</body>
</html>

79
Por tanto, como se ve en el ejemplo, no tiene mucho sentido volver a
especificar anchos o altos diferentes en varias celtas de la misma fila o
columna.

5.11.5 Alineación de celdas

Se puede alinear el contenido de una celda tanto horizontalmente como

verticalmente, usando las propiedades de estilo text-align y vertical-
align, en sustitución del atributo obsoleto align. Para alinear el contenido
en horizontal se usará text-align, de igual forma que se hacía para un
párrafo, es decir, text-align:left para alineado a la izquierda, text-align:right
para alineado a la derecha, y text-align:center para texto centrado, que es
precisamente la alineación horizontal por defecto.

80
 EJEMPLO PRÁCTICO

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
<table style="border:1px solid black">
<tr>
<td style="border:1px solid black">---------------</td>
</tr>
<tr>
<td style="border:1px solid black;text-align:left">a</td>
</tr>
<tr>
<td style="border:1px solid black;text-align:center">b</td>
</tr>
<tr>
<td style="border:1px solid black;text-align:right">c</td>
</tr>
</table>
</body>
</html>

Para alinear el contenido en vertical, los valores posibles para la propiedad

vertical-align son: top para alinearlo arriba, bottom para alinearlo abajo y
middle para alinearlo en el medio. Siendo esta última la alineación vertical
por defecto.

81
 EJEMPLO PRÁCTICO

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
<table style="border:1px solid black">
<tr>
<td style="height:100px">-----</td>
<td style="border:1px solid black;vertical-align:top">a</td>
<td style="border:1px solid black;vertical-align:bottom">b</td>
<td style="border:1px solid black;vertical-align:middle">c</td>
</tr>
</table>
</body>
</html>

5.11.6 Tablas con secciones

Es posible definir las tablas de una manera diferente a la vista hasta el

momento. Se trata de especificar cada una de las secciones que puede
tener una tabla. Éstas son: cabecera, cuerpo y pie. Aparecerán arriba, en
medio y abajo, respectivamente.

Las etiquetas para definir cada una de estas secciones son:

Cabecera: <thead>
Cuerpo: <tbody>

82
Pie: <tfoot>

Por defecto, las diferentes secciones se mostrarán igual, si bien, se pueden

aplicar estilos para personalizar cada una de ellas.

Se debe tener en cuenta que, en este caso, la tabla se crea ordenando las
secciones, no en el orden en el que se escriban las filas, como
habitualmente. Es decir, aunque el elemento thead se defina después de
tbody, aparecerá por encima de este último, como se puede apreciar en el
siguiente ejemplo.

EJEMPLO PRÁCTICO

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
<table style="border:1px solid black">
<tbody>
<tr>
<td style="border:1px solid black">a</td>
<td style="border:1px solid black">1</td>
</tr>
<tr>
<td style="border:1px solid black">b</td>
<td style="border:1px solid black">2</td>
</tr>
</tbody>
<thead>
<tr>
<th style="border:1px solid black">Letras</th>
<th style="border:1px solid black">Números</th>
</tr>
</thead>
</table>
</body>

83
5.12 Fondos

Aunque en realidad muchos elementos pueden tener un fondo, el principal

de ellos es el de la propia página. Por defecto, los navegadores muestran el
fondo de la página en color blanco. Como el elemento que define la página
es body, manipulando sus propiedades será posible asignar un fondo
distinto a la página.

Se pueden diferenciar dos tipos de fondos:

 De color.
 Con imagen.

Para los fondos de un sólo un color, o colores sólidos, se usa la propiedad

de estilo background-color. No se deben usar atributos obsoletos como
bgcolor ni para body ni para ningún otro elemento.

Además de poder usar uno de los nombres de colores predefinidos, se

puede especificar un código numérico en base a sus componentes de color.
Esta especificación se basa en la teoría aditiva de color, que es el sistema
que siguen los colores compuestos por una fuente de luz, como es el caso
de los monitores. De esta forma, en el sistema RGB un color se compone de
tres componentes de color, una roja, una verde y otra azul (RBG=red,
green, blue). Cada una de estas componentes podrá tener mayor o menor
intensidad, según un número del 0 al 255. Así, 0 representa que no hay
nada de ese color y 255 que ese color está presente al máximo. De esta
forma rgb(255,0,0) representará al color rojo, rgb(0,255,0) representará al
color verde y rgb(0,0,255) representará al color azul. La suma de todos los
colores al máximo dará el color blanco: rgb(255,255,255), y la ausencia el
negro: rgb(0,0,0).

84
No obstante, la forma más común de codificar los colores es mediante la
representación hexadecimal. Para ello, tan sólo se trata de convertir los
números anteriores a hexadecimal y escribirlos seguidos, de la forma
#rrggbb, representando rr la cantidad de rojo, gg la cantidad de verde y bb
la cantidad de azul.

Hay que recordar que el sistema hexadecimal consta de 16 dígitos, que de

menor a mayor son: {0 1 2 3 4 5 6 7 8 9 A B C D E F}, por lo que, si cada
color puede tomar valores del 0 al 255, escritos en hexadecimal, el rango
será del 0 al FF.

Por tanto, quedaría el rojo como #FF0000, el verde como #00FF00 y el azul
como #0000FF. El blanco sería #FFFFFF y el negro #000000.

Es posible abreviar los colores en esta notación en el caso de que los dígitos
de cada componente sean iguales, escribiendo sólo uno de ellos. Es decir, el
rojo sería: #F00, al verde #0F0, el azul #00F, el blanco #FFF y el negro
#000.

EJEMPLO PRÁCTICO

Para poner el fondo de color rojo puro de alta intensidad:

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body style="background-color:#FF0000">
colores
</body>
</html>

85
Como se ha visto, si en lugar de asignar FF a la componente de rojo, que es
el máximo valor posible, se le da un valor menor, se obtendrá otro color de
la gama de rojos pero con menor intensidad:

EJEMPLO PRÁCTICO

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body style="background-color:#AA0000">
colores
</body>
</html>

Para un verde con intensidad quedaría:

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body style="background-color:#00AA00">
colores
</body>
</html>

86
 Y, por último, para la gama de los azules:

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body style="background-color:#0000AA">
colores
</body>
</html>

La otra posibilidad para asignar un fondo a la página es usar una imagen.

No se debe usar el atributo obsoleto background, sino la propiedad de estilo
background-image. Para asignar una imagen, se usa la siguiente
sintaxis:
url('ruta_archivo_imagen')

Pudiendo especificar la ruta del archivo de imagen de forma absoluta o

relativa, como en los casos vistos anteriormente.

Si el tamaño de la imagen es mayor que el de la página, se verá sólo la

parte correspondiente, sin que aparezcan barras de scroll, ya que se trata
de un fondo, no de una imagen insertada en la página.

87
 EJEMPLO PRÁCTICO

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body style="background-image:url('playa.jpg');">
Imagen de fondo
</body>
</html>

Por el contrario, si el tamaño de la página excede al de la imagen, ésta se

repetirá en modo mosaico (es decir, tanto horizontal como verticalmente):

88
También es posible modificar este comportamiento. Para ello, se debe
emplear la propiedad de estilo background-repeat. Su valor por defecto
es repeat para repetir la imagen. Si se desea que sólo se repita en una
dirección, se puede especificar repeat-x o repeat-y (se repite
horizontalmente y verticalmente, respectivamente). Si no se desea que se
repita en ninguna dirección, se debe especificar el valor no-repeat.

5.12.1 Fondos de tablas

Aunque los fondos pueden aplicarse a cualquier elemento HTML, un caso

particular muy común es el de las tablas. Anteriormente, se usaban
atributos específicos de la etiqueta <table> (bgcolor y background), que ya
no deben ser utilizados.

La forma de proceder es similar a la vista para el cuerpo de la página, pero

teniendo en cuenta que los fondos son aplicables no solo a la tabla en sí,
sino también a cada uno de sus elementos. Si se asignan a la etiqueta
<table> afectarán a la tabla al completo, si se aplican a <tr> afectarán a
una fila determinada, y si es a <td>, a una celda.

En el siguiente ejemplo, se asigna una imagen a la tabla, un color a la

primera fila y otro color a la segunda celda de la segunda fila:

EJEMPLO PRÁCTICO

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
<table style="border:1px solid black;background-
image:url('agua.jpg')">
<tr style="background-color:#AACCFF">
<td>00</td>
<td>01</td>
</tr>
<tr>
<td>10</td>

89
 <td style="background-color:#DDAA55">11</td>
</tr>
<tr>
<td>20</td>
<td>21</td>
</tr>
</table>
</body>
</html>

5.13 Fuentes

Anteriormente, los ajustes de fuentes se realizaban con una etiqueta

específica llamada <font>, con tamaños predefinidos del 1 al 7.
Actualmente, no está admitida, por lo que se deben realizar mediante
propiedades de estilo aplicadas a un párrafo o a otro elemento cualquiera
en el que aparezca texto.

ENLACE DE INTERÉS

Antes de usar cualquier etiqueta o atributo, es importante

comprobar su vigencia, así como el grado de aceptación por
parte de los navegadores. En la siguiente web se puede buscar
cualquier tipo de elemento para comprobarlo:

https://caniuse.com/

Destacan las siguientes propiedades de estilo relacionadas con el uso de

fuentes:

90
  font-size: xxx, especifica el tamaño de la fuente, siendo xxx el
tamaño, expresado textualmente (small, medium, etc), en porcentaje
o en otras unidades (píxeles, etc).
Una de las unidades más extendidas es el píxel (px), no obstante, hay
que tener en cuenta que hay otras cuyo uso es más recomendable en
muchas circunstancias, como se verá más adelante.

NOTA

Actualmente, no deben usarse las etiquetas <big> y <small>

para modificar el tamaño de una fuente.

 color: xxx siendo xxx el color, expresado textualmente (red, yellow,

etc) o numéricamente (hexadecimal (el más común), rgb, etc), de la
manera explicada anteriormente.

 font-family: xxx, siendo xxx el nombre de la fuente. Si la fuente tiene

más de una palabra, deberá escribirse entre comillas. Por otro lado, se
puede especificar una lista de varios nombres separados por comas,
así el sistema podrá sustituir unas fuentes por otras en caso de que no
se encuentren las anteriores instaladas, si no, se mostrará la fuente
por defecto del navegador.

Por otro lado, existen otras etiquetas interesantes con las que se pueden
conseguir los efectos sobre fuentes vistos anteriormente tales como negrita,
subrayado, etc:

 Negrita: font-weight:bold (por defecto, el valor de font-weight es

normal).
 Cursiva: font-style:italic (por defecto, el valor de font-style es
normal).
 Subrayado: text-decoration:underline (su valor por defecto es
none).
 Tachado: text-decoration:line-through

91
 EJEMPLO PRÁCTICO

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
<p style="font-size:40px;color:#AA0000;font-
family:Arial,Verdana">Prueba texto</p>
</body>
</html>

5.14 Frames (marcos)

Los frames o marcos son una forma de construir una página en base a
varias subpáginas.

Aquí se van a describir brevemente con objeto de comprender su

funcionamiento en sitios ya existentes, pero es importante saber que no
deben usarse ya que han quedado obsoletos e incluso a partir de HTML5 ni
siquiera están admitidos. Actualmente, sólo se puede hacer uso de frames
en línea (iframes).

Lo primero que se debe hacer es usar las declaraciones DOCTYPE

correspondientes a frames que se vieron en el primer capítulo.
Los sitios web que poseen frames siempre constan de:

92
  Una página donde se define la posición y el número de frames de los
que constará la página que se debe mostrar en el navegador.

 Las páginas independientes que constituyen cada uno de esos frames.

Son páginas normales, como las vistas hasta el momento.

La página con frames no está compuesta por el elemento <body> como

habitualmente, sino que se compone de un elemento frameset, que
representa a un conjunto de frames. Se define con las etiquetas
<frameset> y </frameset>. Sus atributos son:

 cols="x, …" para indicar que los frames se disponen en columnas.

 rows="x, …" para indicar que los frames se disponen en filas.

Sus valores deben ser los tamaños que se quieren asignar a cada uno de los
frames que componen dicho frameset. Pueden ser píxeles o, de forma más
habitual, porcentajes. El símbolo * se usa para indicar que use el espacio
disponible restante.

Por ejemplo, cols="20%, *" indica que el frameset se compone de dos

frames dispuestos en columnas, la primera ocupa el 20% de la página y la
otra columna el resto. Si fuera cols="20%, *, *" habría tres columnas, la
primera ocuparía el 20% como antes y las otras dos ocuparían el resto
equitativamente, es decir, 40% cada una. Incluso se puede incluir un factor
multiplicativo antes del *. Así, cols="*, 2*" definiría dos columnas, donde la
segunda ocuparía el doble espacio que la primera, es decir, el 33’33% y el
66’66%, respectivamente.

Dentro del frameset, cada frame se define mediante la etiqueta <frame>

sin cierre y con atributo src, que contendrá la url de la página del frame.
También puede aparecer la etiqueta <noframes>, que define un elemento
que contiene el cuerpo de una página alternativa que se mostrará en caso
de que el navegador no admita frames.

Para conseguir combinaciones de filas y columnas, se pueden anidar

elementos frameset.

93
 EJEMPLO PRÁCTICO

Para conseguir la siguiente distribución, se definirían dos

columnas y en la primera se definirían dos filas:

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<frameset cols="25%, *">
<frameset rows="40%, *">
<frame src="frame1.html">
<frame src="frame2.html">
</frameset>
<frame src="frame3.html" name="Contenido">
<noframes>
<body>
Tu navegador no soporta frames. Pulsa <a
href="contenid.html">aquí<a> para acceder a la página de
contenidos.
</body>
</noframes>
</frameset>
</html>

94
En el ejemplo anterior, las páginas frame1.html, frame2.html y frame3.html
están vacías, sólo se les ha asignado un color de fondo para poder apreciar
el resultado (serán similares a las vistas en los ejemplos del apartado sobre
fondos).

Para conseguir que no se note la separación entre unos y otros, se puede

eliminar el borde mediante los atributos siguientes: <frameset
frameborder=0 framespacing=0 border=0>.

Por su parte, en la etiqueta <frame>, además del mencionado src, pueden

aparecer otros atributos. Destacan los siguientes:

 name="xxx". Para nombrar al frame y así poder enlazar con él.

 scrolling="yes/no/auto". Para mostrar o no la barra de
desplazamiento. Con "yes" la tendrá siempre, con "no" no la tendrá
nunca y con "auto" (por defecto) la tendrá sólo cuando sea necesaria.
 noresize. Para impedir que el usuario pueda redimensionar el frame.

Cuando se estudiaron los enlaces, uno de los atributos que se podían usar
era target. Pues bien, parte de sus posibles valores hacen referencia al
trabajo con frames. Por ejemplo, asignándole el nombre de un frame que se
haya definido mediante name, el enlace se abrirá en dicho frame. Si el valor
es "_self", se abrirá en el propio frame, y si es "_top", se abrirá ocupando
toda la ventana del navegador.

5.15 Iframes (frames en línea o flotantes)

Se trata de elementos en forma de recuadro que contienen otra página en

su interior. De esta forma, es posible incluir contenido dinámico de otra
página, sin salir de la propia página. Habitualmente, se usa para crear
widgets mediante los que una web ofrece servicios a otras.
Los frames flotantes se crean mediante la etiqueta <iframe>, con cierre
</iframe>. Sus atributos posibles son:

 src. El más importante, especifica la url de la página que se mostrará

en el iframe.
 name. Análogo al mismo atributo de <frame>, es decir, se usa para
poder, mediante target, cargar enlaces en el iframe.
 height y width son los píxeles de alto y ancho que ocupará el
rectángulo destinado para el iframe.

95
Otros atributos como scrolling y border han quedado obsoletos, debiendo
emplearse propiedades de estilo. Por ejemplo, para los bordes se usará
border, de la misma forma ya vista en apartados anteriores.

Como ejemplo, se puede insertar un mapa de Google Maps. Dicha web

ofrece de forma gratuita mapas para insertar en cualquier web. Tan sólo
habrá que hacer clic en compartir y luego en la pestaña “Insertar un mapa”,
donde se proporciona el código para copiar:

Ahora, sólo hay que copiar dicho código en la página. Se le puede añadir
cualquiera de los atributos vistos para configurarlo.

96
 EJEMPLO PRÁCTICO

Para que tenga un tamaño de 400 por 400 píxeles y se muestre

sin borde:

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11241.43627
3243153!2d-
4.427093053629303!3d36.71669412757666!2m3!1f0!2f0!3f0!3m2!1i1024!2i768
!4f13.1!3m3!1m2!1s0x0%3A0x176a2740a1f33f8d!2sCESUR+FORMACION!5e1!3m2!1
ses!2s!4v1404553577143"
width="400" height="400" style="border: 0"></iframe>
</body>
</html>

97
5.16 Applets de Java y controles ActiveX

Los applets de Java y los controles ActiveX son dos formas usadas con
frecuencia en el pasado para ejecutar aplicaciones incrustadas en páginas
web. De esta forma, se conseguía poder ejecutar programas que de otra
manera no era posible construir con HTML/JavaScript. Por motivos de
seguridad, se ha ido limitando la ejecución de este tipo de programas por
parte de los navegadores. A partir de HTML5, ya es posible conseguir toda
la funcionalidad ofrecida por este este tipo de aplicaciones, usando
únicamente HTML5/JavaScript, por lo que han ido quedando en desuso.

Incluso, algunos navegadores como Edge no admiten ya controles ActiveX.

Los applets son pequeños archivos programados en Java, con extensión

*.class, que necesitan ejecutarse sobre una máquina virtual Java instalada
en un navegador. Al ser Java un lenguaje multiplataforma, pueden
ejecutarse en cualquier navegador independientemente del sistema
operativo en el que se esté ejecutando.

Para insertarlos, se requiere un código específico que sigue la siguiente

estructura:

<applet code=xxx.class width=yyy height=zzz>

<param name=aaa value="bbb">
…
</applet>

Donde xxx es el nombre del archivo, yyy la altura del applet, zzz la
anchura, aaa el tipo de cada parámetro y bbb el valor de dicho parámetro.

98
 EJEMPLO PRÁCTICO

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
<applet code="a.class" width="200" height="200">
<param name="aaa" value="bbb">
</applet>
</body>
</html>

99
Como se puede observar en el ejemplo anterior, el navegador debe solicitar
permiso para ejecutar este tipo de archivos, lo cual lo hace poco práctico.

Los controles ActiveX, por su parte, hacen uso de la siguiente estructura:

<object id="xxx" classid="yyy"><object>

Siendo xxx el nombre el control ActiveX e yyy una larga cadena de

caracteres alfanuméricos que identifica al tipo de control. También puede
hacer uso de parámetros mediante etiquetas <param> como las
presentadas anteriormente.

No obstante, el elemento object es una estructura genérica que no sólo

sirve para controles ActiveX sino también para applets, objetos flash, etc.
Antiguamente, también era común usar este tipo de estructuras para
insertar reproductores de audio o vídeo embebidos, por lo que se podían
usar para insertar objetos de otras fuentes como, por ejemplo, al compartir
un vídeo de YouTube. Hoy día, los reproductores funcionan directamente
con elementos HTML5 por lo que, para compartir un vídeo de YouTube, se
proporciona un código iframe como el visto para Google Maps.

Ejemplo de reproductor flash embebido para un vídeo de youtube:

<object width="560" height="315"><param name="movie"

value="http://www.youtube.com/v/YNuyoaHuC08"></param><embed
src="http://www.youtube.com/v/YNuyoaHuC08" type="application/x-
shockwave-flash" width="560" height="315"></embed></object>

5.17 Audio

Anteriormente, la forma de insertar audio en una página web era mediante

reproductores externos que se podían embeber en la página mediante
iframes o etiquetas como <bgsound> y <embed>, que ni siquiera
pertenecía al estándar HTML 4.

HTML5 soluciona ese problema y añade la etiqueta <audio>. Los formatos

soportados son mp3, wav y ogg, aunque el primero es que está soportado
por mayor número de navegadores. Eso sí, se debe tener en cuenta que no
es un formato libre como sí lo es ogg.

100
Mediante esta etiqueta, se define el elemento audio, que deberá contener
uno o varios elementos source en los que se deben especificar los archivos
que se desean reproducir. Se pueden especificar tantos archivos como se
desee. El sistema reproducirá el primero de ellos que sea válido. Los
elementos source no tienen etiqueta de cierre y se componen
principalmente de dos atributos, src para especificar el archivo, al igual que
se hacía con las imágenes, y type para especificar el formato.

El resto del contenido que aparezca dentro del elemento audio, se mostrará
sólo si el navegador no reconoce dicho elemento.

Por ejemplo, para reproducir un archivo con extensión ogg, añadiendo como
alternativa uno con extensión mp3 por si el navegador no soporta ogg,
quedaría:

<audio>
<source src="sonido.ogg" type="audio/ogg">
<source src="sonido.mp3" type="audio/mpeg">
El navegador no soporta el elemento audio.
</audio>

La etiqueta audio también puede contar con diversos atributos que

controlarán las características de la reproducción del sonido:

 autoplay: para que la reproducción comience automáticamente nada

más cargarse la página.
 controls: para que se muestren los controles de reproducción del
sonido (play, stop, etc).
 loop: para que el sonido se vuelva a reproducir automáticamente al
llegar al final.
 muted: para que el volumen sea inicialmente nulo.
 preload: para precargar el archivo en memoria
 src: para especificar directamente el archivo de sonido sin usar
elementos source.

101
 EJEMPLO PRÁCTICO

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
<audio width="320" controls>
<source src="sonido.mp3" type="audio/mp3">
El navegador no puede reproducir el audio
</audio>
</body>
</html>

Existe otra posibilidad que consiste en crear enlaces a archivos de sonido

mediante texto o imagen. Si el navegador los reconoce o tiene un plugin
instalado que lo haga, los reproducirá directamente. En caso contrario, el
archivo se descargará.

102
 EJEMPLO PRÁCTICO

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
Escucha esta canción: <a href="4_allnig.mid">All night long</a>
<br>
También puedes escucharla haciendo clic en la imagen: <a
href="4_allnig.mid" style="width:100px;">
<img src="cd.jpg"></a>
</body>
</html>

5.18 Vídeo

De igual manera a lo comentado para el audio, hasta HTML5, era necesario

usar reproductores externos que se embebían en la página mediante un
plugin. A partir de HTML5, se dispone de la etiqueta <video> para definir
este tipo de elementos. Ahora, será el navegador el que proporcione los
servicios para poder reproducir el vídeo. Los formatos soportados más
comunes son mp4, webm y ogg.

103
La sintaxis es similar a la de la etiqueta <audio>, permitiendo definir
múltiples fuentes alternativas:

<video>
<source src="video.ogg" type="video/ogg">
<source src="video.mp4" type="video/mp4">
El navegador no soporta el elemento video.
</video>

EJEMPLO PRÁCTICO

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
<video width="320" height="240" controls>
<source src="bosque.mp4" type="video/mp4">
El navegador no puede reproducir el vídeo
</video>
</body>
</html>

104
5.19 Formularios

Los formularios son secciones de la página compuestas por elementos

destinados a recoger datos. Representan un método de comunicación del
usuario con el servidor.

Al no estar diseñado HTML como lenguaje para transmitir información del

cliente al servidor, es necesario apoyarse en un programa externo que
realice tal tarea. Otra alternativa usada antiguamente, ofrecida por los
navegadores, era la de usar los datos introducidos en el formulario para
generar un mensaje de correo que, posteriormente, el usuario debía enviar
mediante su programa cliente de correo.

Los programas que recogen esta información se denominan CGI (Common

Gateway Interface). Inicialmente, se creaban scripts en el servidor
mediante lenguajes como C. Actualmente, se usan los mismos lenguajes
con los que se programan las webs, como php, y el código para procesar los
datos recogidos se implementa a menudo en las propias páginas.

El elemento que constituye un formulario está definido por la etiqueta

<form>, con cierre </form>. Dentro de su ámbito, se dispondrán los
diferentes elementos de entrada de información, como campos de texto,
desplegables, botones, etc. Todo formulario deberá tener también un botón
para realizar el envío de los datos.

Los atributos básicos de la etiqueta <form> son:

 action: indica la url a la que se enviarán los datos del formulario. Si se

usa un script CGI se pondrá la ubicación del mismo, si se usa una
página en un lenguaje de servidor como php, se especificará la url de
dicha página.

 method="get"/"post": indica cuál será el método usado para

transmitir la información, "get" lo hará de forma visible incluyéndola en
la propia url y "post" lo hará de forma oculta para el usuario de la web.

 enctype, indica la codificación de envío de los caracteres. Por defecto

vale "application/x-www-form-urlencoded" para que los caracteres se
codifiquen según la codificación ASCII. Si se especifica "text/plain", se
envían sin codificar.

105
 NOTA

Al enviar "get" la información de forma visible, no debe ser

usado para datos de carácter privado, como contraseñas.
También existe una limitación de tamaño de los datos que se
pueden enviar mediante "get", ya que una url tiene una
longitud máxima de unos 2000 caracteres.

EJEMPLO PRÁCTICO

La estructura de un formulario es la siguiente:

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
<form action="mailto:dir_mail" method="post" enctype="text/plain">
<!--Elementos del formulario para introducir datos.
Botones de envío y de borrado. -->
</form>
</body>
</html>

En el interior de un formulario se pueden encontrar los siguientes

elementos:

- input: es el principal elemento de entrada de información. Se define

mediante la etiqueta sin cierre <input> y debe contar con algunos
atributos. Uno de ellos es name, que le asigna un nombre que servirá para
poder recoger el valor introducido, posteriormente. Se trata de un atributo
obligatorio.

El elemento input puede ser de diferentes tipos según el tipo de datos que
se quieran recoger. Para ello, se debe definir el atributo type. Sus valores
más comunes son:

106
 text: el valor por defecto, para recoger una línea de texto. Mediante
el atributo size, se puede ajustar su longitud en caracteres. También
se puede ajustar el ancho mediante la propiedad de estilo width. Para
controlar el máximo número de caracteres que admite, se usa el
atributo maxlength.
El atributo value sirve para especificar el valor por defecto que
aparecerá ya relleno al abrir el formulario.

 password: recoge una línea de texto, pero sin mostrarla tal cual,
ocultando los caracteres, lo que sirve para introducir contraseñas.

 checkbox: crea un botón de selección, es decir, una casilla que se

puede marcar y desmarcar. Se representa mediante un cuadrado. Se
puede usar el atributo vacío checked para indicar que esté
seleccionado por defecto.

 radio: crea un botón de tipo radio, es decir, un botón para selección

única. Se usa cuando sólo una opción puede estar seleccionada en un
grupo de opciones. Se representa mediante un círculo. Para que
pueda funcionar correctamente, el atributo name de todos los
botones radio de un mismo grupo de opciones, debe ser el mismo. Se
puede usar el atributo vacío checked en uno de ellos para indicar
que sea el que esté seleccionado por defecto.

 submit: crea el botón de envío del formulario. Si se desea usar una

imagen como botón de envío, el valor de type debe ser image en
lugar de submit. En ese caso, se añade un atributo src para
especificar la ruta en la que se encuentra el archivo de imagen, al
igual que se hace con <img>.

107
  reset: crea un botón para resetear todo el formulario, volviendo a
mostrar sus valores por defecto.

 hidden: se trata de un tipo especial de input en el que no se muestra

nada por pantalla. Se usa para enviar datos de forma oculta. Debe
tener un atributo name y otro value con el valor que se quiera
enviar asociado a dicho nombre.

PARA SABER MÁS

HTML5 define muchos más tipos de elementos input para

recoger otros datos como fechas, colores, etc. Se pueden
consultar en el siguiente enlace:

https://www.w3.org/TR/2010/WD-html5-20101019/the-input-element.html

- textarea: estos elementos crean un cuadro de texto en el que se pueden

introducir múltiples líneas en lugar de una sola. Se usa la etiqueta
<textarea>, que debe cerrarse con </textarea>. Entre ambas, se puede
introducir el texto que se quiere que aparezca por defecto en su interior.

Su tamaño se puede ajustar mediante los atributos cols y rows, que

contendrán el número de caracteres que caben de ancho y el número de
filas que caben de alto, respectivamente. También se pueden ajustar las
dimensiones mediante las propiedades de estilo width y height.

- select: estos elementos sirven para crear listas desplegables, es decir,

elementos que desplegarán una serie de opciones en forma de lista,
permitiendo seleccionar una de ellas. Usan la etiqueta <select>, con cierre
</select>, conteniendo en su interior tantos elementos option como
opciones se quiera que tenga la lista. Cada uno de estos elementos, se
define mediante la etiqueta <option>, con cierre </option>. En su interior,
se especificará el texto de esa opción. Se debe incluir en cada etiqueta
<option> un atributo value para poder recoger posteriormente la opción

108
marcada. Se puede usar el atributo vacío multiple si se desea que la lista
permita seleccionar múltiples opciones de forma simultánea.

- fieldset: se trata de recuadros para agrupar elementos del formulario. Se

suele usar para separar distintos conceptos. Se usa la etiqueta <fieldset>,
con cierre </fieldset>. Todos los elementos de formulario que queden
englobados por estas etiquetas, aparecerán en el interior del recuadro.

Así mismo, pueden contener la etiqueta <legend>, también con cierre, en

cuyo interior se puede definir un texto que aparecerá como título del
fieldset:

<fieldset>
<legend>Título</legend>
<input …>
…
</fieldset>

109
 EJEMPLO PRÁCTICO

A continuación, se muestra un ejemplo de formulario con los

elementos vistos. Para poder ver los resultados, en lugar de
enviar la información a otra página, se usa mailto: de la forma
vista para los enlaces, para que el navegador genere el envío
de un correo electrónico con los datos introducidos en el formulario:

<!DOCTYPE html>
<html lang="es">
<head>
<title>ejemplo</title>
<meta charset="utf-8">
</head>
<body>
<form action="mailto:[email protected]" method="post"
enctype="text/plain">
<input type="hidden" name="tipo" value="Formulario de ejemplo">
<fieldset>
<legend>Datos personales</legend>
<p>Nombre:
<input type="text" name="Nombre" size="30" maxlenght="30">
</p>
<p>Apellidos:
<input type="text" name="Apellidos" size="40"
maxlenght="50">
</p>
</fieldset>
<p>Mensaje:</p>
<textarea name="Mensaje" rows="5" cols="35"></textarea>
<p>Asunto del mensaje:
<select name="asunto">
<option>Contacto</option>
<option>Dudas</option>
<option>Pedidos</option>
<option>Reclamaciones</option>
</select>
</p>
<p>¿Eres socio?
<input type="radio" name="socio" value="No" checked>No
<input type="radio" name="socio" value="Si" >Sí
</p>
<p>¿Deseas suscribirte al boletín de noticias?</p>
<input type="checkbox" checked name="Suscribirse">
Sí, acepto recibir información
<br><br><br>
<input type="submit" value="Enviar ">
<input type="reset" value="Borrar">
</form>

110
</body>
</html>

El mensaje se recibirá de la siguiente manera:

 Tipo = Formulario de ejemplo.

 Nombre = Nombre introducido.
 Apellidos = Apellidos introducidos.
 Mensaje = Mensaje introducido.
 Asunto = Contacto u otro asunto seleccionado.
 Socio = Si o no.
 Suscribirse = on. Si la casilla se desactiva no pondrá nada.

111
6. LA WEB SEMÁNTICA

La web semántica es un nuevo modelo de web en el que los ordenadores

son capaces de entender y procesar la información contenida en ellas, con
el objetivo de ser capaces de realizar búsquedas sobre esa información de
una forma más natural, más cercana a la comunicación entre humanos.

Para ello, es necesario que los ordenadores sean capaces de entender a los
humanos en el mayor grado posible. En el caso de la web, está diseñada
principalmente para que sea leída por humanos, por lo que para lograr ese
entendimiento es necesario establecer una semántica común a ambos.

En realidad, la web semántica es un modelo realmente complejo, en el que

no basta con definir esa semántica, sino que también es necesario
establecer un lenguaje especializado de consultas para trabajar sobre esos
datos generados, así como una lógica que permita razonar sobre ellos.

A nivel de datos, se emplea RDFa, que es una extensión de HTML5 que

añade atributos con carácter semántico a las etiquetas, si bien dicha
especificación excede a los objetivos de este curso. No obstante, a nivel de
estructura, HTML5 incorpora algunas etiquetas con carácter semántico, que
resulta recomendable usar.

6.1 Etiquetas semánticas en HTML5

Hasta ahora, los elementos HTML presentados no aportan información sobre

el contenido. Sin embargo, no todos los elementos presentes en una página
web tienen la misma función. Por ejemplo, habitualmente, las páginas
constan de un bloque de encabezado, un menú, etc. Un párrafo que esté
situado en medio del contenido será imposible de distinguir de otro que esté
en el pie de la página. Sin embargo, la información que aparece en cada
uno de ellos será diferente: el párrafo que se encuentra en la sección de
contenido, tendrá la información más relevante sobre el tema del que trate
de la página, mientras que el párrafo del pie de la página probablemente no
(podría ser, por ejemplo, una referencia a otro artículo relacionado).

HTML5 añade una serie de etiquetas que en su mayoría no tienen efecto

alguno sobre la presentación de los datos, sino que se utilizan para añadir
información semántica. Se trata de una diferencia fundamental con respecto
a casi todas las etiquetas HTML vistas anteriormente. Originalmente, el
objetivo de éstas era únicamente dar un tipo de formato particular a la

112
información (párrafos, listas, tablas…). Sin embargo, el propósito de estas
otras etiquetas es fundamentalmente semántico.

6.1.1. Etiquetas para estructura

 <header>: representa al encabezado de la página.

 <nav>: se trata del elemento de navegación. Habitualmente, un

menú que constará de una lista de opciones en forma de enlaces.

 <aside>: se usa para representar una barra lateral.

 <footer>: se usa para el pie de la página.

 <main>: elemento que define el contenido principal. Este elemento

sólo debe aparecer una vez en todo el documento y no puede ser hijo
de ninguno de los anteriores ni de <article>.

6.1.2 Etiquetas para contenido

 <article>: son los elementos que definen los contenidos en sí. Por
ejemplo, un post de un blog, una noticia…

 <section>: definen diferentes secciones. Se pueden usar a nivel de

página, para separar distintas secciones, o a nivel de artículo, para
separar distintos temas.

Estos elementos también pueden contener las anteriores etiquetas de

estructura. Por ejemplo, en artículo, para marcar el encabezado se podría
usar <header>.

 <figure> y <figcaption>: <figure> se usa para indicar que se

trata de una imagen. En su interior, puede contener <figcaption>,
etiqueta destinada a mostrar un pie de foto.

Es importante observar la diferencia entre marcar una imagen con

<figure> o no hacerlo. No todos los elementos img deben ser
marcados como <figure>. Hay imágenes cuyo cometido no es
ilustrativo, no forman parte del contenido. Por ejemplo, una imagen
usada como botón o el logotipo de la página.

113
6.1.3 Etiquetas para resaltar contenido

 <mark>: se usa para marcar el texto. Por defecto, se muestra con

un fondo amarillo intenso, como si estuviera señalado con rotulador
fosforescente.

 <strong>: esta etiqueta ya existía, siendo, por defecto, equivalente

a <b>, como se vio en el capítulo anterior. En HTML5 se le añade un
valor semántico, pasando a significar texto importante. Por ello, si en
un texto se usa la negrita con la finalidad de resaltar la importancia
de una palabra o frase, es preferible usar esta etiqueta a usar <b>.

 <em>: al igual que en el caso anterior, no se trata de una etiqueta

nueva en HTML5. No obstante, también sirve para añadir un matiz
semántico. En este caso, se debe usar para marcar un texto como
destacado. Por defecto, se representa con letra cursiva y si se usa en
un texto para destacar su contenido, es preferible usarlo en lugar de
<i>.

114
6.1.4 Otras etiquetas
 <details> y <summary>: <details> sirve para especificar
información extra sobre algo y <summary> para definir un
encabezado para dicha información. Por defecto, aparecerá oculta, de
forma que se pueda mostrar al hacer clic sobre la parte visible
(<summary>). Ojo, no todos los navegadores soportan estos dos
elementos (en tal caso, los datos se mostrarán siempre, como
párrafos normales).

 <time>: sirve para indicar fechas y horas. Se usa con etiqueta de

cierre </time>, incluyendo en su ámbito el texto con la fecha/hora, o
haciendo uso del atributo datetime. En este último caso, la
fecha/hora no se mostrarán por pantalla, sino que se asociarán a un
texto:

<p>Abrimos a las <time>9:00</time>.</p>

<p>Cerramos el <time datetime="2018-12-25">día de

navidad</time>.</p>

7. COMPOSICIÓN DE PÁGINAS WEB

Una vez presentados los elementos básicos para construir páginas web, es
necesario tener en cuenta una serie de recomendaciones para que las
páginas ofrezcan al usuario una buena experiencia de navegación, así como
para evitar errores de diseño y que resulte fácil mantenerlas.

7.1 Estructura interna de una página

Es fundamental que el código HTML esté bien estructurado. Se pueden

considerar los siguientes aspectos:

- Estructura general de la página:

Se deben usar los elementos con carga semántica estudiados en el apartado
anterior, en lugar de bloques genéricos. De esta forma, los buscadores o
cualquier otra máquina que acceda a la página, podrán entender mejor el
significado de cada una de las partes que la componen. Una página así
escrita es más fácilmente clasificable, resulta más sencillo extraer
información de ella y se considerará como más optimizada para búsquedas.

115
- Elementos de contenido:
Es conveniente estructurar la página de manera que cada parte del
contenido tenga asignado un tipo de elemento según el contenido de que se
trate. Por ejemplo, si se trata de un listado de elementos, es conveniente
que esté realizado mediante una lista, no mediante un conjunto de párrafos.

- Títulos de encabezado:
Es fundamental usar correctamente los títulos de encabezado,
aprovechando la función para la que han sido diseñados.

Los títulos de encabezado de primer nivel (h1) se deben usar para los
temas más relevantes, mientras que los de segundo nivel (h2) se utilizarán
para indicar los subtemas relacionados con los anteriores y así
sucesivamente. Es recomendable que toda página contenga al menos un
elemento de tipo h1 o h2.

Es importante recordar que, aunque por defecto, cada uno de estos

elementos asigna un determinado tamaño y grosor a la fuente, el propósito
de los títulos de encabezado no es el de maquetar texto (para ello se
pueden emplear estilos sobre cualquier otra etiqueta), sino que su función
es la de organizar una página mediante secciones. Para ello, las
recomendaciones son las siguientes:

 Se debe tratar de seguir el orden numérico de niveles. Es decir, los

subtemas de h3 deberían especificarse mediante h4 en vez de, por
ejemplo, h6.

 No se deben poner títulos de encabezado de mayor nivel por debajo

de otros de menor nivel, en la jerarquía. Es decir, un elemento h3 no
debe estar en un nivel superior que un h2.

 Es conveniente especificar los tamaños y tipos de letra mediante

estilos, como se verá en la próxima unidad. No se debe confiar en
que el navegador represente las fuentes con el tamaño y grosor
esperados, ya que cada uno puede hacerlo de distinta forma.

- Claridad y orden:
Para facilitar el mantenimiento de la página, es muy importante escribir el
código HTML de forma clara y ordenada, haciendo que se vea claramente
cuándo comienza y cuando finaliza cada elemento. Para ello, se aconseja
poner etiquetas en una misma línea si no tienen otras en su interior, o
realizando sangrías en caso de que abarquen varias líneas. También es
recomendable usar líneas en blanco para separar secciones de código.

116
De igual manera que sucede con los lenguajes de programación, resulta
conveniente usar comentarios aclaratorios, especialmente cuando la
extensión del archivo o sección sea grande y se complique identificar el
ámbito de cada etiqueta.

7.2 Información

Es importante que la información que ofrece la página sea relevante y esté

organizada de forma clara y efectiva. A continuación, se exponen algunas
consideraciones:

- Contenido:
En primer lugar, el propósito principal un sitio web es ofrecer contenido, es
decir, información de un determinado tipo, por tanto, no es recomendable
que una página se limite a ser un conjunto de enlaces a otras páginas.
También se debe evitar incluir enlaces a páginas sin contenido de utilidad.

- Título:
Toda web debe tener un título especificado mediante la etiqueta <title>. Se
debe elegir uno que sea significativo. Muchas veces no se presta atención al
título, eligiendo uno inapropiado o incluso dejándolo vacío. Sin embargo,
hay que tener en cuenta que la página será identificada mediante ese título
y, además, los buscadores relacionarán las búsquedas que se efectúan con
dicho título.

Por ello, es importante que el título sea lo más descriptivo posible del
contenido de la página. De esta forma, cuando alguien la guarde en sus
favoritos podrá identificarla fácilmente más tarde. Además, para que la
página pueda identificarse adecuadamente en otro contexto diferente, es
conveniente incluir el nombre de la web.

- Descripción del contenido:

Siempre que sea posible, es conveniente que las páginas cuenten con una
descripción introductoria de lo que contienen. En muchos casos, consistirá
en un titular o similar, pero en otros en los que el elemento más descriptivo
del contenido sea una imagen, resulta imprescindible usar una etiqueta alt
suficientemente descriptiva, como se comentó al hablar de las imágenes.
Esto es importante por la existencia de navegadores en modo texto, por
motivos de accesibilidad y por el uso que hacen los buscadores de este tipo
de información para catalogar las páginas.

- Longitud:

117
Si una página es demasiado larga, puede resultar conveniente
descomponerla en varias subpáginas. De esta forma, se evita que el usuario
deba hacer mucho scroll y se reduce el tiempo de carga de la página.

- Otras consideraciones:
Se puede mejorar la experiencia del usuario con la página si se incluyen
referencias a páginas interesantes sobre temas similares o relacionados.
También resulta interesante contar con elementos mediante los que el
usuario pueda interactuar con la página, como habilitar comentarios, ofrecer
una sección para contactar con la página, permitir interacción con redes
sociales, etc.

7.3 Composición

En lo relativo a la presentación, es importante considerar tanto aspectos

estéticos como funcionales. Se deben tener en cuenta los siguientes
consejos:

- Uso de hojas de estilo:

Se deben usar hojas de estilo para agrupar todos los aspectos relativos a la
presentación. No se deben usar atributos de presentación obsoletos ni
estilos en línea.

- Uniformidad:
Se debe tratar de dar un estilo uniforme a las distintas páginas que
componen una web. De esta forma, se facilitará la navegación de los
usuarios a través de la web y su aspecto será consistente y reconocible.
Para conseguirlo, se debe realizar un diseño gráfico común para todas las
páginas. Tal labor, a menudo, consiste en elegir un color o imagen de
fondo, colocar un logo determinado en la parte superior, o distribuir de una
forma específica el texto y las imágenes (en un determinado número de
columnas, etc). Por lo general, las páginas web suelen contar con una zona
de título común para todas las páginas, así como un menú de navegación
que facilita el paso de una a otra sección de la web.

A pesar de que en una página lo fundamental es el contenido, un diseño

gráfico funcional y atractivo es un factor muy importante de cara al éxito de
dicha página.

- Ayuda a la navegación:
Es importante que el usuario pueda localizar rápidamente lo que quiere y no
se pierda entre elementos superfluos. Por ejemplo, las imágenes o iconos

118
pueden ayudar a localizar las opciones de un menú, los distintos colores
pueden usarse para destacar las partes más importantes, etc.

No conviene abusar elementos multimedia, especialmente si no son

activados bajo petición del usuario. Por ejemplo, páginas con sonido o
vídeos que se reproducen automáticamente, no suelen ser recomendables.
Incluso, algunos navegadores no permitirán estos comportamientos.

También se debe prestar atención a la combinación de los colores. En

muchas ocasiones, se eligen colores por su aspecto estético, sin considerar
la facilidad de lectura. Sin embargo, es fundamental que el texto se pueda
leer claramente, por lo que no es conveniente usar colores con poco
contraste con respecto al color de fondo. Tampoco se deben emplear
colores muy brillantes como fondo, ya que pueden cansar a la vista. Y si se
trata de imágenes, se debe comprobar que el texto que aparezca por
encima sea fácilmente legible.

- Considerar los diferentes navegadores:

Como ya se ha comentado, en muchas ocasiones, los distintos navegadores
que hay en el mercado muestran un resultado diferente para una misma
página. Esto puede ser debido a la diferente interpretación de una etiqueta,
el uso de atributos obsoletos o no estandarizados, etc. Por ello, es
importante tenerlo en cuenta y comprobar los resultados del diseño en
diferentes navegadores.

Hoy en día, estos problemas se han solventado en gran medida gracias a la

implantación de HTML5. No obstante, es fundamental seguir las
recomendaciones aquí presentadas sobre el uso de etiquetas y atributos.
Habitualmente, en las páginas de referencia de HTML, se puede encontrar el
grado de aceptación de esa etiqueta, atributo o propiedad por parte de los
navegadores más usuales.

- Accesibilidad:
La accesibilidad consiste en diseñar las páginas de forma que personas con
algún tipo de discapacidad puedan acceder al contenido y navegar por la
web sin problemas. Al mismo tiempo, este diseño es aprovechable por
personas de avanzada edad que presentan dificultades.

Si la página es compleja, este proceso puede ser complicado, pero a

menudo, siguiendo algunas pautas sencillas, es fácil evitar los problemas
más frecuentes que se presentan en cuanto a accesibilidad.

Por ejemplo, usar siempre la etiqueta alt para describir el contenido de una
imagen, incorporar subtítulos a los vídeos, usar nombres descriptivos para

119
los enlaces (evitar por ejemplo un enlace con el texto “pulsar aquí”), seguir
una estructura similar para navegar por todas las páginas…

-Adaptabilidad:
Debido a los numerosos dispositivos existentes en la actualidad, tamaños de
pantalla y resoluciones muy diferentes, se hace imprescindible realizar un
diseño adaptable. Este tipo de diseños, también conocidos como
responsive, consisten en que la página se adapte automáticamente según
el dispositivo que la muestre. Dicha adaptación se puede lograr modificando
los tamaños de sus elementos, cambiando su disposición, o incluso,
mostrando otros elementos diferentes en función del dispositivo.

120
RESUMEN FINAL

En esta unidad se ha visto la estructura de una página web junto a los

componentes más importantes que la componen, como etiquetas, atributos
valores, entre otros aspectos.

Se ha incidido en el estudio de las etiquetas de la estructura básica:

párrafos, cabeceras, listas, hipervínculos entre otras.

Así mismo, se han presentado elementos más avanzados, como

complementos y elementos multimedia, así como formularios.

También se ha explicado el uso de etiquetas semánticas y, para finalizar, se

han visto las distintas formas de componer con estilo una página web.

121