Html - Tema 2: Enlaces, Imágenes y Listas
27
Hyper Text Markup Language Tema 2: Enlaces, Imágenes, Listas © Abril, 2015 Prof. Renny Batista
-
Upload
instituto-universitario-de-tecnologia-antonio-jose-de-sucre -
Category
Education
-
view
99 -
download
0
Transcript of 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;height: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
