Enllaços¶
URL¶
El que coneguem habitualment com a «adreça» d’internet s’anomena realment localitzador uniforme de recursos o URL (de l’anglès Uniform Resource Locator) és una cadena de caràcters que identifica de forma inequívoca cadascun dels recursos disponibles en internet. Aquestos recursos poden ser documents HTML, però també altres tipus de documents, imatges, vídeos, so, etcètera.
Un exemple de URL és el següent: http://upload.wikimedia.org/wikipedia/ca/1/1e/Wiki-ca.png
Anem a veure quines parts el composen:
http:// És el protocol que utilitzarà el navegador per accedir al recurs. Un protocol de internet és un sistema de regles que utilitzen dos computadors per compartir informació. Altres protocols possibles són ftp, SSH, BitTorrent, WebDAV, entre molts altres. Alguns navegadors moderns oculten aquesta part de la URL en la barra de navegació. En la actualitat el protocol http està sent substituït per https, que afegeix el xifrat de les dades enviades.
upload.wikimedia.org Podem dir que és el nom de l’ordinador que conté el recurs, anomenat servidor. Cada ordinador en internet s’identifica per una adreça IP semblant a 83.123.45.233, però hi ha un servei anomenat DNS que funciona com una agenda i relaciona aquestes adreces amb noms, que són més fàcils de recordar. Quan li donem a un navegador un nom, aquest li demana a un servidor DNS la adreça IP corresponent.
/wikipedia/ca/1/1e/ Es l’anomenada ruta, que indica en quina carpeta es troba el recurs i com arribar fins a ella. En aquest exemple, en el servidor, hi ha una carpeta anomenada wikipedia, dins de la qual hi ha altra anomenada ca, dins d’aquesta altra anomenada 1 i dins altra anomenada 1e. Dins d’aquesta carpeta és on es troba el recurs.
Wiki-ca.png És el nom del recurs. En aquest cas un fitxer que conté una imatge.
Les URL poden ser encara més complicades, i incloure caràcters com «=», «&», «?», «/» i «:» per la qual cosa aquestos caràcters estan prohibits en els noms de fitxer dels recursos.
Un exemple de URL simple és el següent: https://sagradocorazonmislata.hhdc.net/index.html. En aquesta URL en concret podem ometre el nom del fitxer index.html, ja que en cas de fer-ho, el servidor oferirà automàticament un fitxer amb eixe nom. Alguns navegadors oculten el protocol utilitzat en la URL i, de fet, si l’usuari no ho indica utilitzen el protocol HTTPS automàticament. Així que la adreça anterior és equivalent a escriure simplement sagradocorazonmislata.hhdc.net.
Enllaços relatius i absoluts¶
Quan creem un enllaç podem utilitzar una URL absoluta com la que hem vist abans amb protocol, nom del servidor, ruta i nom del recurs.
Altra alternativa és utilitzar una URL més breu, que indica com trobar el recurs des de el lloc on es troba el fitxer on creem l’enllaç. Anem a veure açò amb un exemple.
Tenim una carpeta anomenada «web» dins de la qual hi ha dues carpetes anomenades «imatges» i «html». Anem a crear enllaços des d’un fitxer que es trobe dins de la carpeta «html».
El cas més simple es enllaçar a altre fitxer que es trobe dins de la mateixa carpeta. El caràcter «.» significa «la carpeta actual», per tant la URL serà «./altre_fitxer.html».
De la mateixa manera que un punt «.» indica la carpeta actual, dos punts «..» significa «pujar un nivell» o «la carpeta que conté aquesta». Per exemple per enllaçar a un fitxer que es trobe dins de la carpeta «web» des de la carpeta «html» utilitzarem la URL «../altre_fitxer.html».
Podem entrar en altres carpetes com, per exemple a la carpeta «imatges» amb la URL «../imatges/altre_fitxer.png».
Enllaços en HTML¶
Podem crear enllaços en documents HTML amb l’etiqueta <a>. Aquesta etiqueta té un atribut anomenat href que indicara la URL del recurs al qual es vol enllaçar. Observa els exemples següents:
<a href="https://sagradocorazonmislata.hhdc.net/">Web del cole</a>
Aquest és un exemple d’un enllaç que utilitza un URL absolut. El text «Web del cole» es converteix en un enllaç cap a l’adreça https://sagradocorazonmislata.hhdc.net/, la qual cosa significa que si es prem sobre aquest fragment de text, el navegador mostrarà el recurs.
<a href="../imatges/flor.png">Una flor</a>
Aquest exemple és un enllaç que utilitza un URL relatiu, i enllaça a un fitxer que es troba en altra carpeta.
Els enllaços en HTML solen ser fragments de text o imatges. En el cas del text, el navegador mostrarà els enllaços subratllats i de color blau, o de color porpra si ja els hem visitat. Naturalment podem canviar açò definint altres colors i propietats amb un fitxer CSS.
Estil dels enllaços¶
Ja hem parlat dels pseudo-elements en CSS: apareixien a continuació del selector principal separats d’aquest per dos punts i permetien establir una condició per a que la regla siga aplicada.
En el cas dels enllaços, podem crear diferents regles utilitzant els següents pseudo-elements:
Passiu (link) quan l’usuari encara no l’ha activat ni l’ha visitat.
Visitat (visited) quan ja ha estat visitat per l’usuari.
Flotant (hover) quan el cursor passa per sobre de l’enllaç.
Focalitzat (focus) quan seleccionem l’enllaç mitjançant la tecla de tabulació.
Actiu (active) quan està sent activat, és a dir, mentre premem el botó del ratolí sobre ell.
Per exemple amb les següents regles
a {
text-decoration: none;
}
a:visited {
text-decoration: line-through;
}
aconseguirem que els enllaços apareguen ratllats únicament després de ser visitats.