Introduccion
El lenguaje de marcado HTML se definió teniendo en cuenta algunas de las características que existían en ese momento para la publicación digital de contenidos. Entre los conceptos utilizados en su creación, se encuentra el mecanismo de "hipertexto".
La incorporación del hipertexto fue una de las claves del éxito del lenguaje HTML, ya que permitió crear documentos interactivos que proporcionan información adicional cuando se solicita. El elemento principal del hipertexto es el "hiperenlace", también llamado "enlace web" o simplemente "enlace".
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.
Una característica que no se suele tener en cuenta en los enlaces es que están formados por dos extremos y un sentido. En otras palabras, el enlace comienza en un recurso y apunta hacia otro recurso. Cada uno de los dos extremos se llaman "anchors" en inglés, que se puede traducir literalmente como "anclas".
Objetivos
1. Conocer como insertar enlaces hacia otras paginas en nuestras paginas Web.
2. Conocer como insertar enlaces hacia documentos e imagenes.
3. Conocer como insertar enlaces para secciones en la misma pagina.
Insertar enlaces
Los enlaces en HTML se crean mediante la etiqueta <a> (su nombre viene del inglés "anchor", literalmente traducido como "ancla").
Ejemplo:
<h1> Enlace a Google </h1>
<a href="'>http://www.google.com"> Pagina principal de Google</a>
El atributo más importante de la etiqueta <a> es "href", que se utiliza para indicar la URL a la que apunta el enlace. Cuando el usuario pincha sobre un enlace, el navegador se dirige a la URL del recurso indicado mediante "href". Las URL de los enlaces pueden ser absolutas, relativas, internas y externas.
De la misma forma, los enlaces pueden apuntar directamente a documentos PDF, Word, etc.
Ejemplos:
<a href="http://www.ejemplo.com/informe.pdf">
Descargar informe completo [PDF]
</a>
<a href="http://www.ejemplo.com/informe.doc">
Descargar informe completo [DOC]
</a>
Insertar enlaces a secciones
El otro atributo básico de la etiqueta <a> es "name", que permite definir enlaces dentro de una misma página Web. Si una página es muy larga, puede ser útil mostrar enlaces de tipo "Saltar hasta la segunda sección", "Volver al principio de la página", etc.
Este tipo de enlaces son especiales, ya que la URL de la página siempre es la misma para todas las secciones y por tanto, debe añadirse otra parte a las URL para identificar cada sección.
Ejemplo:
<a name="inicio"></a>
<p>
Contenido del parrafo.
</p>
<a href="#inicio">Volver al inicio de la página</a>
Los enlaces directos a secciones también funcionan con el atributo "id" de cualquier elemento. El siguiente ejemplo es equivalente al ejemplo anterior:
<h1 id="inicio">Título de la página</h1>
<p>
Contenido del parrafo.
</p>
<a href="#inicio">Volver al inicio de la página</a>
El nombre de la sección que se indica después del símbolo # puede utilizar el valor de los atributos "id" de cualquier elemento. De hecho, se recomienda utilizar los atributos "id" de los elementos ya existentes en la página en vez de crear "enlaces vacíos" como : <a name="nombre_seccion"></a>.
Actividad
Crea una pagina Web con este codigo y comprueba que funcionan los enlaces absolutos y relativos.
<html>
<head>
<title> Uso de Enlaces Absolutos y Relativos </title>
</head>
<body>
<h1> Enlace a Google (enlace absoluto) </h1>
<a href="http://www.google.com"> Ir a Google </a>
<h1> Enlace a Yahoo (enlace absoluto) </h1>
<a href="http://www.yahoo.com.mx"> Ir a Yahoo </a>
<h1> Enlace a Hi5 (enlace absoluto) </h1>
<a href="http://www.hi5.com"> Ir a Hi5 </a>
<h1> Enlace a otra pagina (enlace relativo) </h1>
<a href="mi_segunda_pagina.html"> Ir a mi segunda pagina </a>
</body>
</html>
Nota: Crea una segunda pagina Web con el nombre de "mi_segunda_pagina.html", para comprobar que el cuarto enlace funcione correctamente.
No hay comentarios:
Publicar un comentario
Comente sus dudas, sugerencias o temas que desee conocer: