O que caracteriza á web como medio de comunicación é a navegación por medio de hipervínculos (links ou ligazóns). Esta conexión entre arquivos permite ao usuario elixir o sentido da navegación.
En HTML os enlaces marcanse coa etiqueta <a></a> e o atributo principal es href="" onde se escribe a ubicación do arquivo de destino que pode estar na mesma carpeta que o archivo que o está chamando, noutra carpeta do mismo sitio ou noutro sitio web.
Entre as etiquetas <a href=""></a> podense colocar cualquera elemento html que funcionará como botón, xeneralmente colocase un texto o unha imaxen. Se é un texto, o navegador por defecto mostrao en cor azul e subrayado.
Chámase ruta ó valor que se escribe dentro do atributo href="" e podese clasificar en dous tipos:
As rutas absolutas son as que definen a ubicación completa dun archivo na web e empiezan desde https://nombredelsitio.com/archivo.html (o arquivo de destino pode ser de calquera extensión). Por exemplo se queremos vincular o noso sitio con Facebook, usaríamos unha ruta absoluta e o código sería:
<a href="https://www.facebook.com/paxina">Estamos en Facebook</a>
As rutas relativas en cambio, definen a ubicación do archivo de destino en relación á ubicación do arquivo que o está chamando. Exemplo: se o arquivo index.html vincula con quen-son.html e están na mesma carpeta, o código sería asi:
<a href="quen-son.html">Quen Son</a>.
Existen diferentes tipos de enlaces que detallo a continuación:
Son os enlaces principais dun sitio. Se no arquivo index.html, queremos agregar un vínculo a contacto.html o código sería así:
<a href="contacto.html">Contáctanos</a>.
O texto que queda encerrado entre as etiquetas <a> é o que ve o usuario en cor azul e subrayado.
Son os enlaces entre diferentes sitios web. Se queremos vincular un sitio web con outro, temos que indicar a ruta absoluta do sitio escribindo a url completa que podemos probala antes no navegador. Neste caso, é común usar o atributo target="" que nos permite abrir o enlace nunha pestaña nova. Por exemplo, se quixera poñer un vínculo a Instagram e que éste abra nunha pestaña nova, sería así:
<a href="https://www.instagram.com/xurxocarreno/" target="_blank">Instagram</a>
As ancoras("anclas") son ligazóns a un punto determinado dentro dun html. Úsase en varios casos, por exemplo nunha páxina de preguntas frecuentes onde as respostas están desenvolvidas debaixo das preguntas, ou en Wikipedia, cando o texto é extenso o menú ten vínculos con áncoras. Tamén nos textos longos, á dereita da pantalla xeralmente colócase un botón para subir. Nos sitios dunha soa páxina onde os botóns en realidade fan scroll, esas son áncoras.
O punto de destino ten que estar marcado co atributo id="algo" e o enlace colocase un # (numeral) seguido do nome. Por exemplo:
<a href="#respuesta4">Pregunta 4</a>"salta" a este páragrafo: <p id="respuesta4">aquí está escrita a resposta</p>
É común armar unha galería de fotos con imaxes miniaturas que vinculan a imaxes ampliadas. Se combinamos este recurso con código javascript, logramos galerías de fotos moi atractivas. O código HTML é así:
<a href="imaxes/foto1-ampliada.jpg"><img src="imaxes/foto1-miniatura.jpg" alt="descripción da foto"></a>
O navegador móstralle ao usuario a foto miniatura e se cliquea nela, móstralle a foto ampliada.
En realidade, dentro do atributo href="" podemos colocar a ruta hacia cualquera tipo de arquivo. Se o navegador recoñece a extensión, abreo por exemplo: html, jpg, png, gif, svg, pdf, etc. Pero se non o recoñece ou é un arquivo comprimido (.rar, .zip), o navegador ofrecelle ó usuario descargalo. Exemplo:
<a href="fotos.rar">Descargá tódalas fotos</a>
Pódese vincular unha dirección de correo para que abra no programa de correo predeterminado. O código escríbese así:
Consúltanos por mail a <a href="mailto:docencia.oscarcarrete@gmail.com">Envianos un email"</a>
