Html - Tema 2: Enlaces, Imágenes y Listas

Hyper Text Markup Language
Tema 2: Enlaces, Imágenes, Listas
© Abril, 2015
Prof. Renny Batista

Los enlaces (links)
 Los enlaces se encuentran en casi todas las páginas
web, permiten a los usuarios hacer clic para poder ir
desde una página a otra.
 Un hipervínculo es un texto o una imagen en la que se
puede hacer clic y saltar a otro documento.
 En HTML, enlaces se definen con la etiqueta <a>:
<a href="url">link text</a>
<a href="http://www.google.com">Ir a google</a>
Abril, 2015 2

Los enlaces (links)
<a href="http://www.google.com">Ir a google</a>
 El atributo href especifica la dirección de destino
(http://www.google.com)
 El texto del enlace es la parte visible (Ir a google).
 Al hacer clic sobre el texto del enlace, le enviará a la
dirección especificada.
 El texto del vínculo no tiene que ser solo un texto. Puede
ser una imagen HTML o cualquier otro elemento HTML.
Abril, 2015 3

Los enlaces (links)
 Un enlace puede apuntar a cualquier tipo de recurso al
que pueda acceder el navegador. El siguiente enlace
apunta a una imagen.
<a href="http://www.ejemplo.com/fondo.jpg">Imagen para
un fondo de escritorio</a>
 De la misma forma, los enlaces pueden apuntar
directamente a documentos PDF, Word, etc.
<a href="http://www.ejemplo.com/informe.pdf">Descargar
informe</a>
 Un truco muy útil con los enlaces es el uso de URL relativas
para poder volver al inicio del sitio Web desde cualquier
página Web interior:
 <a href="/">Volver al inicio</a>
Abril, 2015 4

Los enlaces (links)
 Al mover el cursor del ratón sobre un enlace, normalmente
sucede que:
– El puntero del ratón se convertirá en una pequeña
mano
– El color del elemento de enlace va a cambiar
 Por defecto, los enlaces aparecerán en todos los
navegadores de la siguiente forma:
– Un enlace no visitado está subrayado y azul
– Un enlace visitado es subrayada y púrpura
– Un vínculo activo es subrayada y roja
Abril, 2015 5

Los enlaces (links)
 Se puede cambiar los valores predeterminados para los enlaces,
utilizando estilos definiendo sus características utilizando la
etiqueta <style> dentro del <head>:
<head>
<style>
a:link {color:#000000; background-color:transparent;
text-decoration:none}
a:visited {color:#000000; background-color:transparent;
text-decoration:none}
a:hover {color:#ff0000; background-color:transparent;
text-decoration:underline}
a:active {color:#ff0000; background-color:transparent;
text-decoration:underline}
</style>
</head>
Abril, 2015 6

Los enlaces: el atributo “target”
 El atributo de target especifica dónde abrir el documento
vinculado.
Abril, 2015 7
Valor del target Descripción
_blank Abre el documento vinculado en una nueva
ventana o pestaña
_self .Abre el documento vinculado en el misma
pestaña o marco donde se ha hecho clic (por
defecto)
_parent Abre el documento vinculado en el marco padre
_top Abre el documento vinculado en toda la ventana
(cuando se utilizan frames)
framename Abre el documento vinculado en el marco
definido (nombre del frame)

Los enlaces: imágenes como enlaces
 En un documento HTML es común utilizar una imagen como
un enlace.
<a href="http://www.google.com">
<img src="google.png" alt="Ir a google!"
style="width:50px;height:50px;border:0">
</a>
Abril, 2015 8

Los enlaces: el atributo “id”
 El atributo id puede ser usado para crear un “marcador” dentro de
un documento HTML.
 Los “marcadores” no se muestran de un modo especial. Son invisibles
para el lector:
 Ejemplo, añadimos un atributo al elemento <a>
<a id="tips">Sección de consejos</a>
 A continuación, cree un vínculo al elemento <a> (“Visite la sección
de consejos”) añadimos un atributo al elemento:
<a href="#tips">Visite la sección de consejos</a>
 Para acceder a una sección de un documento desde otro enlace
utilizamos:
<a href="http://www.ejemplo.com/pagina.htm#tips"> Visite la
sección de consejos</a>
Abril, 2015 9

Imágenes en HTML
 En HTML, las imágenes se definen con la etiqueta <img>.
 La etiqueta <img> es una de las pocas etiquetas vacías, contiene
atributos solamente, y no posee una etiqueta de cierre.
 El atributo src define la url (dirección web) de la imagen.
<img src="url" alt="some_text">
 El atributo alt especifica un texto alternativo para la imagen, si no
se puede mostrar. El valor del atributo alt debe describir la imagen
en palabras.
<img src="html5.gif" alt=“El logo oficial de HTML5">
 Se requiere usar el atributo alt. Una página web no se valida
correctamente sin este atributo.
Abril, 2015 10

Imágenes en HTML: Ancho y alto
 Puede utilizar el atributo de estilo para especificar la anchura
(width) y altura (height) de una imagen. Los valores se especifican
en píxeles (Utilizar px después del valor):
<img src="html5.gif" alt="HTML5
Icon" style="width:128px;height:128px">
 Alternativamente, puede utilizar los atributos de anchura y altura.
Los valores se especifican en píxeles (sin px después del valor):
<img src="html5.gif" alt="HTML5
Icon" width="128" height="128">
Abril, 2015 11

Imágenes en HTML: Ubicación
 Si no se especifica, el navegador espera encontrar la imagen en
la misma carpeta que la página web.
 Sin embargo, es común en la web, que las imágenes se
almacenan en una subcarpeta (/images), y se refieren a la
carpeta en el nombre de la imagen:
<img src="/images/html5.gif" alt="HTML5
Icon" style="width:128px;height:128px">
 Si un navegador no puede encontrar una imagen, se mostrará un
icono de enlace roto:
Abril, 2015 12

Imágenes en HTML: Ubicación
 Algunos sitios web almacenan sus imágenes en servidores de
imágenes. En realidad, se puede acceder a las imágenes desde
cualquier dirección web en el mundo:
<img src="http://www.w3schools.com/images/w3schools_green.jpg">
 En los documentos HTML es común utilizar una imagen como un
enlace (link)
<a href="default.asp"> <img src="smiley.gif" alt="HTML
tutorial" style="width:42px;height:42px;border:0"></a>
Abril, 2015 13

Imágenes en HTML: Mapas de imagenes
 Para una imagen, se puede crear un mapa de imagen (<map>)
con zonas seleccionables:
<img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;h
eight:126px">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
 El <area> define un área dentro de un mapa-imagen
 El elemento <area> está siempre anidado dentro de un <mapa>
etiqueta.
Abril, 2015 14

Imágenes en HTML: Imagen flotante
 Se puede colocar una imagen flotante a la izquierda o a la
derecha de un párrafo utilizando el atributo style y la propiedad
float :
<p>
<img src="smiley.gif" alt="Smiley face"
style="float:left;width:42px;height:42px">
A paragraph with an image. The image floats to the
left of the text.
</p>
Abril, 2015 15

Listas en HTML
 En HTML se pueden tener listas no ordenadas, listas
ordenadas o listas de descripción.
Abril, 2015 16

Listas no ordenadas
 Una lista no ordenada comienza con la etiqueta <ul>.
Cada elemento de la lista comienza con la etiqueta
<li>.
 Los elementos de la lista por defecto se marcarán
con pequeños círculos negros.
<ul>
<li>Primero</li>
<li>Segundo</li>
<li>Tercero</li>
</ul>
Abril, 2015 17

Listas no ordenadas
 Un atributo de estilo puede ser añadido a una lista no
ordenada, para definir el estilo del marcador (viñeta):
Abril, 2015 18
Style Descripción
list-style-type:disc Los elementos de la lista se marcará con círculos
negros
list-style-type:circle Los elementos de la lista serán marcados con
círculos
list-style-type:square los elementos de la lista estará marcado con
cuadrados
list-style-type:none Los elementos de la lista no se marcarán

Listas no ordenadas
<ul style="list-style-type:circle">
<li>Café</li>
<li>Leche</li>
<li>Jugo</li>
</ul>
Abril, 2015 19
<ul style="list-style-type:square">
<li>Café</li>
<li>Leche</li>
<li>Jugo</li>
</ul>

Listas ordenadas
 Una lista ordenada comienza con la etiqueta <ol>.
Cada elemento de la lista comienza con la etiqueta
<li>.
 Los elementos de la lista serán marcados con los
números.
<ol>
<li>Primero</li>
<li>Segundo</li>
<li>Tercero</li>
</ol>
Abril, 2015 20

Listas ordenadas
 Un atributo type se puede añadir a una lista
ordenada, para definir el tipo del marcador:
Abril, 2015 21
Type Descripción
Type=“1” Los elementos de la lista serán enumerados con
números (por defecto)
Type=“A” Los elementos de la lista serán enumerados con
letras mayúsculas
Type=“a” Los elementos de la lista serán enumerados con
letras
Type=“I” Los elementos de la lista serán enumerados con
números romanos en mayúsculas
Type=“i” Los elementos de la lista serán enumerados con
números romanos en minúsculas

Listas ordenadas
<ol type="A">
<li>Café</li>
<li>Leche</li>
<li>Jugo</li>
</ol>
Abril, 2015 22
<ol type="I">
<li>Café</li>
<li>Leche</li>
<li>Jugo</li>
</ol>

Listas de descripción
 Una lista de descripción, es una lista de términos, con
una descripción de cada término.
 El <dl> define una lista de descripciones.
 La etiqueta <dt> define el término (nombre), y el <dd>
define los datos (descripción).
<dl>
<dt>Café</dt>
<dd>- Bebida caliente</dd>
<dt>Leche</dt>
<dd>- Bebida fría</dd>
</dl>
Abril, 2015 23

Listas anidadas
 Una lista puede contener una o más listas (anidadas)
<ul>
<li>Café</li>
<li>Té
<ul>
<li>Té negro</li>
<li>Té Verde</li>
</ul>
</li>
<li>Leche</li>
</ul>
Abril, 2015 24

Listas anidadas
 Listas en HTML pueden ser personalizadas de muchas
maneras diferentes aplicando CSS. Una forma popular, es
personalizar una lista para ser mostrada horizontalmente
ul#menu {
padding: 0;
}
ul#menu li {
display: inline;
}
ul#menu li a {
background-color: black; color: white;
padding: 10px 20px;
text-decoration: none; border-radius: 4px 4px 0 0;
}
ul#menu li a:hover {
background-color: orange;
}
Abril, 2015 25

Listas anidadas
<body>
<h2>Horizontal List</h2>
<ul id="menu">
<li><a href="/html/default.asp">HTML</a></li>
<li><a href="/css/default.asp">CSS</a></li>
<li><a href="/js/default.asp">JavaScript</a></li>
<li><a href="/php/default.asp">PHP</a></li>
</ul>
</body>
Abril, 2015 26

Bibliografías
Abril, 2015 27
Eguíluz Pérez, J. Introducción a XHTML. http://www.librosweb.es
2008. Creative Commons reconocimiento no comercial -
sin obra derivada 3.0
W3Schools a web developers site. http://www.w3schools.com

Html - Tema 2: Enlaces, Imágenes y Listas

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Html - Tema 2: Enlaces, Imágenes y Listas

Ähnlich wie Html - Tema 2: Enlaces, Imágenes y Listas (20)

Mehr von Renny Batista

Mehr von Renny Batista (8)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Html - Tema 2: Enlaces, Imágenes y Listas