Estás aquí: Inicio ‣ Módulo 4
Castellano | Català
Ya hemos visto que la potencia del lenguaje HTML consiste en el concepto de link. Siendo algo tan potente, nuevamente, veremos que se trata de algo muy fácil.
La etiqueta link por excelencia: <a> y sus atributos
Los recursos de <a>
Cómo funciona la famosa url
Tipos de url
Estados de un link
Links todavía más potentes
Resumen y ejercicios prácticos
La etiqueta más potente del lenguaje HTML es la etiqueta:
Como toda etiqueta HTML la etiqueta link tiene la parte que abre y la parte que cierra:
Acuérdate que las etiquetas en una página HTML son invisibles cuando las vemos en un navegador. Por esa reazón necesitaremos colocar un texto entre la etiqueta que abre y la que cierra, visible, al que haremos clic:
Esta <a> que abre con su </a> que cierra, es la etiqueta que usamos para crear todos los enlaces, también llamados links o hipervínculos.
Sin esta pequeña <a> no existiría Internet.
No. Verdadero. Los millones de páginas de la Red, con todo su contenido, sus referencias, imágenes, vídeos de youtube, etc. en solitario, sin enlaces entre ellas, sería como un país con muchas ciudades aisladas, sin caminos ni carreteras para ir de una a la otra.
Islas aisladas sin barcos ni aviones para ir de unas a otras. Todo lo contrario de una Red.
Un aplauso, entonces, por favor, para nuestra pequeña:
Casi siempre, en este mundo, el éxito reside en alguien muy pequeño a quien nadie daba valor, mientras otro, muchas veces el más listillo, se lleva el aplauso.
Esta etiqueta es la que hace posible Internet.
Esta etiqueta nos comunica con otra página o recurso. Enlaza la página en la que estamos con la página a la que queremos llegar.
La etiqueta <a> nos dirige a una dirección web (a la que llamamos URL) en la que está alojado el documento al que queremos llegar, que puede ser:
La etiqueta estrella de los vínculos, la super etiqueta:
se vale de muy pocos recursos para conseguir su potencia.
El atributo indispensable es el href y algunos pocos secundarios, entre los que el más importante es el target.
La etiqueta <a> cuando abre debe tener, como mínimo, el atributo:
ya que es el atributo con el que se especifica la dirección, llamada url, que nos apunta hacia el documento con el que queremos enlazar.
Su sintaxis simple es esta:
En breve veremos con más detalle como funcionan las url.
El comportamiento por defecto de los navegadores cuando clicamos en una <a> será substituir la página en la que estamos por la otra página, la nueva, a la que nos hemos dirigido. La forma de indicarlo es a través del atributo target y su sintaxis es la siguiente:
Self en inglés significa "el mismo", ya que nos dirige a la misma ventana del navegador en la que estábamos antes. Este es el comportamiento por defecto, por lo tanto si no indicamos ningún target todos los navegadores substituirán lo que estábamos viendo por el contenido de la página a la que hemos lincado.
Éste es el comportamiento habitual.
Pero algunas veces no te gustará este comportamiento.
Imagínate que estás en una página que te interesa especialmente y quieres leerla toda y encuentras un enlace a otro sitio web y quieres obtener una información adicional pero, al clicar, entras en la nueva página.
¡Oh, no! De repente, te das cuenta (no sin angustia) que has perdido la página en la que estabas.
Claro que, clicando en la flechita de retroceso, podrás volver atrás, pero no es muy cómodo. Y, además, haciendo así, dejarás de tener acceso a la página con la información adicional...
Para evitar estas angustias de navegación, existe el valor "_blank" para este atributo target.
Se escribe así:
Cuando cliques en un enlace con valor "_blank" el navegador abrirá una nueva ventana. Más cómodo.
La url es la dirección que aparece en nuestro navegador cuando entramos en cualquier página.
URL son las iniciales de esta expresión en inglés: Uniform Resource Locator, que significa algo así como: "Localizador Uniforme de Recursos".
Bueno, como siempre, a los creadores de tecnología, les gusta mucho usar estas expresiones complicadas :-)
Pero, no pasa nada. Se entiende igual.
La dirección exacta de una página web o de un recurso online al que accedemos al hacer clic sobre un hipervínculo.
Algo parecido a una dirección de correo, o a un número de móvil, o a un email, o a una ubicación de Google Maps. ESto es: la dirección exacta de una página web.
Una url tiene varias partes.
La url más simple tiene que tener, como mínimo, tres partes:
Veamos como funciona:
Muchas veces encontraremos este protocolo y esta extensión:
Pero existen otros. Por ejemplo, el protocolo de seguridad https:// y otras extensiones de dominio como .net, .es, .org, etc.
A esta estructura más simple de una url, muchas veces se le añade a continuación dos nuevos elementos:
Ejemplo de url de 5 elementos Un buen ejemplo es la url de esta página en la que estás. Si miras arriba, en la dirección de esta página, verás esto: http://crosimasso.net/html5/4-los-links.php La extensión más corriente es .html, pero recuerda que cuando trabaja nuestro chef, las páginas pueden tener la extensión .php o lo que es lo mismo: Pepe Hace Platos Si no ves la dirección arriba en tu navegador, es que hay algo raro en tu ordenador. CUIDADO QUE PUEDE EXPLOTAR :-)
Y todavía podemos tener dos elementos más: el subdominio (antes del dominio, en casos de webs muy grandes) y el ancla (cuando queramos conducir al usuario a una parte determinada de una página; esta ancla la usaremos mucho).
Ya veremos en ejemplos como se comportan. De momento, es solo saber que existen.
Si queremos que, al clicar en un texto o imagen, en lugar de dirigirnos a otra página se descargue un documento determinado, usaremos el atributo download en la etiqueta <a> que abre.
Funciona así:
Ésta es su sintaxis:
Cuando escribimos una url podemos hacerlo de dos formas:
Para llamar al archivo 4-los-links.php que se encuentra en la carpeta html5 de la carpeta actual.
Ejemplo:
Según el caso usaremos una u otra.
Los enlaces tienen 3 estados diferentes:
Es un enlace que no ha sido visitado todavía. Acostumbra a ser un texto subrayado. Puede estar dentro de un texto, ser un título, estar dentro de un menú, etc.
Los navegadores lo presentan con el feo aspecto de un texto de color azul subrayado. Es mejpr cambiarlo con unos toques de diseño, usando nuestro potente Con Salsa y Salero (para los amigos css).
En la Hoja de Estilos .css lo representaremos con la pseudoclase :link
Si nos interesa destacer en una web que un enlace ya ha sido visitado previamente podemos definir una cambio sutil en el color o el aspecto, para que el usuario tenga claro que ya entró en ese apartado.
Si no creamos una regla específica para este enlace, los navegadores nos lo representarán con el feo color lila y subrayado que viene de serie en HTML.
En la Hoja de Estilos .css lo representaremos con la pseudoclase :visited
Cuando pulsas sobre el enlace con el ratón y a la misma vez no dejas de pulsar en él sedice que este enlace está en estado activo. Podemos utilizar esta posibilidad para destacar el clic de forma visual.
En la Hoja de Estilos .css lo representaremos con la pseudoclase :active
Hay algunos links muy potentes que tienen la misma función de enlazar pero no página con página, sino que llama a algunos recursos web importantes y los añade a nuestra página.
El más importante es la etiqueta:
Con esta etiqueta nuestra página cargará las Hojas de estilo .css, y otros recursos, como las tipografías, o el icono Favicon (que aparece arriba, a lado de la url).
Veamos algunos ejemplos:
Reconocemos nuestro querido atributo href= que tiene la misma función que ya hemos visto, que es la de indicar la url del recurso que queremos lincar.
Normalmente la etiqueta <link> con sus atributos se coloca en la cabecera de la página para que actúe lo más rápido posible en el momento que la página se cargue, pero podría ser colocado en cualquier lugar.
Podemos mostrar un PDF dentro de una página HTML usando una etiqueta nueva llamada:
Esta etiqueta tiene tres parámetros:
Por defecto esta etiqueta coloca la barra de herramientas, desde la cual el usuario puede imprimir o descargar el archivo, entre otras cosas. Si no queremos mostrarla, la podemos esconder, de esta forma:
Estoy con muchas cosas y me falta tiempo para terminar este curso. Pido disculpas... En el primer video anuncié que iba a publicar un módulo cada semana :-) Optimista!!!. Éste es un problema que acostumbro a tener: calculo que todo será más rápido, pero después, en la práctica, no me gusta hacer nada con prisa, tipo más o menos, y el tiempo va pasando, impasiblemente implacable.
Perdón!
Espero terminar el video pronto.
Un saludo, apreciado lector.
Puedes hacer un comentario de este módulo. Estamos preparando el material siguiente. Tu opinión, si es sincera, podrá ayudarnos.
¡Seguimos!
Me gustaría que este curso tuviera 21 módulos, estructurados en 3 niveles:
Pero no consigo terminarlo :-) Tengo demasiado trabajo. Quizás un día lo consiga.
Gracias por soportarme :-)
También puedes comentar en:
Este artículo lo ha escrito Josep Massó i Carreras (de pequeño, en casa y en la escuela me llamaban Pep). Me dedico al diseño y desarrollo web. Trabajo para mejorar la presencia en internet de empresas, federaciones, fundaciones, profesionales, autónomos...
Hay tres ámbitos que me apasionan:
“Cuida tu presencia en Internet.”
Sé ético y generoso(lo que plantamos hoy es lo que, tarde o temprano, acabaremos recogiendo).
© 2019 Cros i Massó