Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
Próximo SlideShare
Html - Tema 1
Html - Tema 1
Cargando en…3
×
1 de 27

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

1

Compartir

Descargar para leer sin conexión

Temas 2: Enlaces, Imagenes y Listas en HTML

Libros relacionados

Gratis con una prueba de 30 días de Scribd

Ver todo

Audiolibros relacionados

Gratis con una prueba de 30 días de Scribd

Ver todo

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

  1. 1. Hyper Text Markup Language Tema 2: Enlaces, Imágenes, Listas © Abril, 2015 Prof. Renny Batista
  2. 2. 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
  3. 3. 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
  4. 4. 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
  5. 5. 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
  6. 6. 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
  7. 7. 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)
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11. 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
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. 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
  16. 16. Listas en HTML  En HTML se pueden tener listas no ordenadas, listas ordenadas o listas de descripción. Abril, 2015 16
  17. 17. 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
  18. 18. 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
  19. 19. 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>
  20. 20. 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
  21. 21. 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
  22. 22. 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>
  23. 23. 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
  24. 24. 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
  25. 25. 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
  26. 26. 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
  27. 27. 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

×