UT 2: Lenguajes de Marcas: HTML
2.10- Imágenes
Las imágenes son uno de los elementos más importantes de las páginas web. De hecho, prácticamente
todas las páginas web contienen alguna imagen y la mayoría incluyen decenas de imágenes.
Es importante destacar que la imagen es un elemento en línea que se pone, si cabe, inmediatamente
después de los elementos previamente añadidos.
Podemos distinguir dos tipos de imágenes:
1. Imágenes de contenido
Son las que proporcionan información y complementan la información textual. Se
incluyen directamente en el código HTML mediante la etiqueta <img/>
2. Imágenes de adorno
Son las que se utilizan para hacer bordes redondeados, para mostrar pequeños iconos en
las listas de elementos, para mostrar fondos de página, etc. No se deberían incluir en el
código HTML, sino que deberían emplearse hojas de estilos CSS para mostrarlas.
Sus atributos básicos son los siguientes:
✔ src
Indica el path donde se encuentra la imagen a mostrar.
✔ alt
un texto alternativo para describir la imagen en caso de que no se cargue o para dispositivos
especiales para usuarios con discapacidad visual (por ejemplo).
✔ title
Breve descripción de la imagen. Deben tener una longitud inferior a 1024 caracteres.
✔ name
Nombre del elemento imagen.
30
UT 2: Lenguajes de Marcas: HTML
✔ height
Indica la altura con la que se debe mostrar la imagen. No es obligatorio que coincida con la
altura original de la imagen.
✔ width
Indica la anchura con la que se debe mostrar la imagen. No es obligatorio que coincida con la
anchura original de la imagen.
Tanto width como height, lo podemos indicar mediante un número entero, haciendo referencia
a la unidad de medida de pixel, o mediante un porcentaje, haciendo referencia a la
altura/anchura del elemento en el que está contenida la imagen. Si la imagen no se encuentra
dentro de ningún otro elemento, hace referencia a la anchura/altura total de la página.
Si solamente se establece la altura de la imagen, el navegador calcula la anchura necesaria
para que se mantenga la proporción de la imagen. De la misma forma, si sólo se establece la
anchura de la imagen, el navegador calcula la altura que hace que la imagen se siga viendo
con las mismas proporciones.
Ejemplo de una imagen con una descripción
<img src="/imagenes/proyecto1.png" alt="Imagen del Proyecto 1" />
XHTML no impone ninguna restricción sobre el formato gráfico que se puede utilizar en las
imágenes, por lo que en principio la etiqueta <img> puede incluir cualquier formato gráfico existente.
Sin embargo, si la imagen utiliza un formato poco habitual, todos o algunos navegadores no serán
capaces de mostrar esa imagen.
La recomendación es utilizar uno de los tres siguientes formatos gráficos que entienden todos los
navegadores modernos: gif, jpg y png.
Ejemplo de una imagen con una descripción, y un alto y ancho en píxeles.
<img src="/imagenes/foto1.jpg" alt="Fotografía de un paisaje" width="200" height="350"/>
En el ejemplo anterior, las dos imágenes se encuentran en el mismo directorio del servidor
(/imagenes/). Se trata de una estrategia habitual en la mayoría de sitios web: guardar todas las
imágenes de contenido en un directorio especial independiente del resto de contenidos HTML.
Además, el directorio siempre suele llamarse de la misma manera: "imagenes" o "images" en inglés.
31
UT 2: Lenguajes de Marcas: HTML
Ejemplo 15: Código XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>XHTML :: Imágenes</title>
<meta http-equiv="content-type" content="text/html" charset="ISO-8859-1">
</head>
<body>
<img src="imagenes/logo_insti.png" alt="logo del departamento informática IES Al-
Andalus"/>
</body>
</html>
Figura 16. Ejemplo 15. Imágenes
Figura 17. Imagen no mostrada. Muestra contenido atributo alt
2.10.1.- Alineación de imágenes (Desaprobado)
Se puede utilizar el atributo align para hacer que las imágenes floten a un lado de la página y el texto
y el resto de elementos se sitúen en el otro.
32
UT 2: Lenguajes de Marcas: HTML
Figura 18. Ejemplo de imágenes flotantes
Sus posibles valores son:
✗ top: si queremos que el texto esté alineado con la parte superior de la imagen.
✗ middle: alinea el texto con la parte central de la imagen.
✗ bottom:alinea el texto con la parte inferior de la imagen.
✗ left: alinea la imagen a la izquierda de la página forzando la colocación del texto en la parte
derecha y arriba.
✗ right: alinea la imagen en la derecha de la página forzando la colocación del texto en la parte
izquierda y arriba.
Si se quiere interrumpir el proceso de rellenado del texto a los lados de la imagen, para que salte hasta
debajo de ella, es decir, dejar un espacio en blanco parcialmente, se pueden emplear las siguientes
extensiones de la etiqueta <br>:
33
UT 2: Lenguajes de Marcas: HTML
✔ <br clear=”left” /> Busca el primer margen libre (clear) a la izquierda.
✔ <br clear = right/> Busca el primer margen libre a la derecha.
✔ <br clear =all/> Busca el primer margen libre a ambos lados.
El atributo clear añadido a una etiqueta <br/> indica que el texto no debería empezar hasta que el
margen especificado esté libre(es decir, al final de la imagen o imágenes).
Figura 19. Ejemplo de imágenes flotantes
2.10.2.- Espaciado alrededor de las imágenes
Para ello usamos los atributos hspace y vspace, que nos permite especificar respectivamente, el
espacio que queremos dejar a izquierda y derecha de la imagen, y arriba y abajo de la imagen, con
respecto al texto que la rodea.
34
UT 2: Lenguajes de Marcas: HTML
Ejemplo 16: Código XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Jacarandá :: XHTML :: Imágenes</title>
<meta http-equiv="content-type" content="text/html" charset="ISO-8859-1">
</head>
<body>
<p>
<img src="imagenes/mono.jpg" alt="Mono" align="left" border="1" hspace="10" width="250"
height="170">Esta imagen tiene los atributos: <font color="#0000FF">align=left , hspace=10 ,
width=250 , height=170 , border=1 , alt="Mono"</font> y como quiero que después de
estos comentarios el texto salte debajo de la imagen escribo:<br>
<font color="#0000FF"><br clear=all></font><font
size="2"><br>
<br clear="all">
</font>
Como ves, ésto está debajo de la foto</p>
<p><img src="imagenes/aguila.jpg" alt="Aguila" align="right" border="5" hspace="1" width="250"
height="165">Esta otra tiene los atributos: <font color="#0000FF">align=right , hspace=1 ,
border=5 , alt=" Aguila" width=250 , height=165</font>. También debería de
escribir<font color="#0000FF"> <br clear=all ></font> para que el final de página aparezca
en su sitio. Como no lo hago queda a la izquierda de la imagen. Fíjate en el borde</p>
</body>
</html>
35
UT 2: Lenguajes de Marcas: HTML
Figura 20. Ejemplo 16. Atributos de imágenes
2.11.- Enlaces/Vínculos
Los enlaces se utilizan para establecer relaciones entre dos recursos. Aunque la mayoría de enlaces
relacionan páginas web, también es posible enlazar otros recursos como imágenes, documentos y
archivos. Antes de empezar a crear enlaces, es necesario comprender y dominar el concepto de URL.
El acrónimo URL (del inglés Uniform Resource Locator) hace referencia al identificador único de
cada recurso disponible en Internet, permitiéndonos la localización de cualquier recurso que
queramos.
Para ello es necesario comprender las diferentes partes que forman las URL. Una URL sencilla
siempre está formada por las mismas tres partes. Si por ejemplo se considera la siguiente URL:
Las partes que componen la URL http://www.librosweb.es/xhtml/capitulo4.html son:
1. Protocolo (http://)
El mecanismo que debe utilizar el navegador para acceder a ese recurso. Todas las páginas
web utilizan http://. Las páginas web seguras (por ejemplo las de los bancos y las de los
servicios de email) utilizan https:// (se añade una letra s).
2. Servidor (www.librosweb.es)
Simplificando mucho su explicación, se trata del ordenador en el que se encuentra
guardada la página que se quiere acceder. Los navegadores son capaces de obtener la
dirección de cada servidor a partir de su nombre.
36
UT 2: Lenguajes de Marcas: HTML
3. Ruta (/xhtml/capitulo4.html)
Camino que se debe seguir, una vez que se ha llegado al servidor, para localizar el recurso
específico que se quiere acceder.
Por tanto, las URL no sólo identifican de forma única a cada recurso de Internet, sino que también
proporcionan a los navegadores la información necesaria para poder llegar hasta ese recurso.
A la hora de identificar estos recursos es importante no incluir ni espacios en blanco ni ningún carácter
especial, ni caracteres con tilde ni ñ.
2.11.1.- Enlaces internos y externos
Los enlaces los podemos clasificar en dos tipos:
1. Internos o locales
Son aquellos que enlazan a páginas que componen un mismo sitio web, y que estarán en
el mismo servidor web. Por esta razón sólo es necesario especificar el directorio donde se
encuentra nuestra página, y el nombre de la página.
/hobbies/index.html
2. Externos
Permiten enlazar a páginas que pueden estar alojadas en cualquier otro servidor web del
mundo. Por esta razón es necesario especificar la dirección web completa de la página a
la que queremos enlazar.
http://www.desarrolloweb.com/articulos/600.php
2.11.2.- Enlaces relativos y absolutos
Además de internos/externos, la otra característica que diferencia a los enlaces es si el enlace es
absoluto o relativo.
Las URL absolutas incluyen todas las partes de la URL (protocolo, servidor y ruta) por lo que no se
necesita más información para obtener el recurso enlazado.
Las URL relativas prescinden de algunas partes de las URL para hacerlas más breves.
37
UT 2: Lenguajes de Marcas: HTML
Las URL relativas se construyen a partir de las URL absolutas y prescinden de la parte del protocolo,
del nombre del servidor e incluso de parte o toda la ruta del recurso enlazado.
Imagina que dispones de una página en http://www.ejemplo.com/ruta1/ruta3/pagina1.html y quieres
incluir en ella un enlace a otra página que se encuentra en:
http://www.ejemplo.com/ruta1/ruta2/pagina2.html
Para especificar este enlace, lo podemos hacer de forma absoluta con:
http://www.ejemplo.com/ruta1/ruta2/pagina2.html
o de forma relativa de cualquiera de las siguientes opciones:
../ruta2/pagina2.html
/ruta1/ruta2/pagina2.html
2.11.3.- Enlaces básicos
Para la creación de enlaces utilizamos la etiqueta <a>...</a>, y entre ambas ponemos el elemento
html que usamos como enlace.
Mediante su atributo href, indicamos la página a la que queremos saltar
<a href=”http://www.google.es”>Ir a google</a>
También podemos asignarles un nombre a nuestros enlaces, para poderlos referenciar desde cualquier
otra parte de nuestra página. Para ello usamos el atributo name.
<a href=”http://www.google.es” name=”google”>Ir a google</a>
EJEMPLO 17: Código XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Jacarandá :: XHTML :: Enlaces</title>
<meta http-equiv="content-type" content="text/html" charset="ISO-8859-1">
</head>
<body>
<!-- Aquí empieza la página -->
38
UT 2: Lenguajes de Marcas: HTML
<h1>Enlaces o HIPERVINCULOS</h1>
<br>
<!-- Para poner enlaces a otras webs se mete una URL completa -->
<h3>Ejemplo de enlace externo</h3>
<a href="http://www.google.es" name="google">Ir a Google</a> <br/>
<h3>Ejemplo de enlace interno</h3>
<a href="ejemplo16.html">Ejemplo 16</a>
</body>
</html>
Figura 21. Ejemplo 17. Enlaces internos y externos
2.11.4.- Puntos de fijación. Anclas
Son un tipo especial de enlaces que nos permite saltar a un lugar concreto dentro de la página en la
que nos encontramos. Normalmente la usamos cuando tenemos distintas secciones dentro de una
misma página, o cuando tenemos páginas muy largas y queremos volver al principio de la página.
Para su creación utilizamos sólo el atributo name, creando de esta manera un enlace vacío. Una vez
definido el enlace vacío, es posible crear otro enlace que apunte a él.
Por tanto para la creación de este tipo de enlaces tenemos que dar dos pasos:
1. Insertar el ancla (enlace vacío), en el lugar de la página a la que se quiere saltar.
<a name=”inicio”></a>
2. Creamos el enlace que apunte al ancla.
39
UT 2: Lenguajes de Marcas: HTML
<a href=”#inicio”>Volver al principio de la página</a>
También podemos insertar un enlace que salte a un ancla situada en otra página, para lo cual, lo único
que tenemos que cambiar es el paso 2, antecediendo al nombre del ancla en el href, con la url de la
página a la que queremos saltar.
<a href=”pagina23.html#seccion1”>Ir a la sección 1 de la pagina 23</a>
Ejemplo 18: Código XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> XHTML :: Puntos de fijación</title>
<meta http-equiv="content-type" content="text/html" charset="ISO-8859-1">
</head>
<body>
<a name="arriba">Estamos arriba</a>
<h1>Enlaces internos del documento</h1>
<h1>Marcamos primero una zona del documento con <a name="nombre"></h1>
<h1>Y la enlazamos con <a href="#nombre"> </h1>
<br>
<a href="#abajo">Quiero ir abajo!!</a>
<!--A continuacion pongo una chapa para poder ver el efecto del enlace interno -->
<pre>
Winamp 5.05:
* Security bug fix
* Fix for upside down videos through DirectShowWinamp 5.0:
* Support for classic Winamp 1.x/2.x/2.9x skins and Winamp 3 ("Modern") skins
* Support for classic Winamp 1.x/2.x/2.9x skins and Winamp 3 ("Modern") skins....
etc
</pre>
<a name="abajo">Estamos abajo</a> <br>
<a href="#arriba">Quiero ir arriba!!</a>
</body>
</html>
40
UT 2: Lenguajes de Marcas: HTML
Figura 22. Ejemplo 18. Puntos de fijación
Figura 23. Ejemplo de sitio web
41
UT 2: Lenguajes de Marcas: HTML
Ejemplo 19: Código XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>XHTML :: Enlaces</title>
<meta http-equiv="content-type" content="text/html" charset="ISO-8859-1">
</head>
<body>
<h1>Mi Sitio</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis posuere
justo. Nam vel neque. Proin sagittis mauris sit amet nisl. Sed ipsum. Aliquam vitae
justo.</p>
<h2>Ultimos proyectos</h2>
<p>Etiam consectetuer, mauris vitae cursus scelerisque, dui turpis dignissim justo, et
euismod enim odio sit amet erat. Aliquam dui ligula, porttitor eu, facilisis vitae, ornare
sed, tortor.</p>
<p><a href="portfolio/indice.html" title="Ultimos proyectos realizados por Mi
Sitio">Acceder a los ultimos proyectos de Mi Sitio</a></p>
</body>
</html>
Figura 24. Ejemplo 19. Enlaces de misitio.com
42
UT 2: Lenguajes de Marcas: HTML
Ejemplo 20: Código XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>XHTML :: Enlaces</title>
<meta http-equiv="content-type" content="text/html" charset="ISO-8859-1">
</head>
<body>
<p><a href="../indice.html" title="Página principal de Mi Sitio">Volver a la pagina
principal</a></p> <h1>Ultimos proyectos</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis posuere
justo. Nam vel neque.</p>
<h3>Proyecto 1</h3>
<p>Etiam consectetuer, mauris vitae cursus scelerisque, dui turpis dignissim justo, et
euismod enim odio sit amet erat.</p>
<p><a href="../imagenes/proyecto1.png" title="Imagen del Proyecto 1">Ver imagen del
Proyecto 1</a></p>
<h3>Proyecto 2</h3>
<p>Etiam consectetuer, mauris vitae cursus scelerisque, dui turpis dignissim justo, et
euismod enim odio sit amet erat.</p>
<p><a href="../imagenes/proyecto2.png" title="Imagen del Proyecto 2">Ver imagen del
Proyecto 2</a></p>
</body>
</html>
43
UT 2: Lenguajes de Marcas: HTML
Figura 25. Ejemplo 20. Enlaces de misitio.com
2.11.5.- Abrir vínculos en ventanas específicas
XHTML nos permite abrir un vínculo en una ventana determinada, o incluso en una nueva ventana
creada para dicho vínculo.
Para ello usamos el atributo target que puede tomar los siguientes valores:
✔ _blank
Fuerza que el documento referenciado por el enlace sea mostrado en una nueva ventana
del navegador.
✔ _self
El documento enlazado será mostrado en el mismo frame o ventana donde está el enlace.
✔ _top
Fuera a que el documento enlazado sea mostrado usando todo el espacio de la ventana del
navegador destruyendo toda la estructura de frames.
2.11.6.- Ejemplos de enlaces
Enlace al inicio del sitio web
<a href="/">Inicio</a>
Al pulsar el enlace anterior desde cualquier página web, se vuelve directamente a la página de inicio,
home o página principal del sitio web.
Enlace a email
A una dirección de email:
<a href="mailto:[email protected]"> Solicita más información </a>
A varias direcciones de email:
información</a>
Con asunto incluido:
44
UT 2: Lenguajes de Marcas: HTML
<a href="mailto:[email protected]?subject=Solicitud de más información">
Solicita más información</a>
Con texto inicial en el cuerpo del email:
<a href="mailto:[email protected]?body=Estaría interesado en solicitar más
información sobre sus productos">Solicita más información</a>
Enlace a archivo FTP
<a href="ftp://ftp.ejemplo.com/ruta/archivo.zip">Descarga un ZIP con todos los
contenidos </a>
2.11.7.- Colores de los enlaces
XHTML nos ofrece la posibilidad de asignar colores a los enlaces en función de su estado, el cual
puede ser cualquiera de los siguientes tres:
1. Enlaces no visitados
2. Enlaces visitados
3. Enlaces activos
Para cada uno de estos estados existe un atributo que nos permite asignarle un color, de tal manera
que por dicho color, sabemos si el enlace ha sido ya visitado o no.
Estos atributos lo ponemos dentro de la etiqueta <body>, y se aplican para toda la página web. Son
los siguientes:
1. link: Asigna color a aquellos enlaces que aún no han sido visitados.
2. vlink: Asigna color a aquellos enlaces que ya han sido visitados.
3. alink: Asigna color al enlace que está activo.
45
