Type to search…

Enllaç

Un document web pot tenir enllaços a qualsevol recurs accessible mitjançant una URI

australia-ecde81.gitlab.ioweb/document-link
This page hasn't been translated yet — shown in its original language:Català

Introducció

Un document HTML és un Hyper document perquè pots afegir enllaços que et permeten vincular el document a qualsevol recurs que sigui accessible a Internet.

Potser avui en dia no et sorprèn, però als anys 80 del segle passat era una passada!

URL

Una URL (Uniform Resource Locator) permet localitzar un recurs a Internet de manera uniforme.

Està format per:

  • Un protocol, que pot ser http, https, file, etc.
  • L’adreça d’un servidor, que pot ser una IP o un nom de domini que és resolt amb DNS
  • Un path absolut dins el lloc web

Per exemple, https://xtec.dev/web/document/link/ és l’URL d’aquesta pàgina:
httpsÉs el protcol: http sobre TLS
xtec.devDomini que resol a la IP 172.66.47.6
/web/document/link/El path del document

Localitzar vol dir que l’URL té la informació per trobar el recurs: en el nostre exemple, el navegador ha de resoldre el nom xtec.dev amb una IP.

Tu pots fer el mateix.

Obre un terminal de Powershell i escriu:

ps
nslookup xtec.dev
Non-authoritative answer:
Name:    xtec.dev
Addresses:  2606:4700:310c::ac42:2f06
          2606:4700:310c::ac42:2cfa
          172.66.47.6
          172.66.44.250

Uniforme vol dir que un URL tant es pot fer servir per accedir a un recurs d’Internet (http://, https://) com a un fitxer del sistema de fitxers (file://), per posar un exemple.

Enllaç

Amb el tag <a> pots enllaçar qualsevol recurs: un document HTML, una imatge, una pel·lícula, etc.

<a href="https://www.google.es"> Google </a>

El tag <a> té l’atribut específic href on es posa l’URL del recurs: http://.., https://.., file://.., etc.

Dins del tag <a> es posa el nom del recurs o qualsevol altra cosa (per exemple, una imatge).

El que mostra el navegador és el que hi ha dins el tag <a>, no el valor de l’atribut href:

  • Quan fas clic a aquest enllaç, Google, el navegador et porta a https://www.google.es perquè és el que posa l’atribut href.

  • Però aquest enllaç, CaixaBank, encara que posi “Caixabank”, no et porta al lloc web de “la Caixa”.

Activitats

Capitals de Catalunya

Crea una pàgina amb un enllaç a Viquipèdia de les 4 capitals de provincia de Catalunya:

Show solution
html
<ul>
    <li><a href="https://ca.wikipedia.org/wiki/Barcelona">Barcelona</a></li>
    <li><a href="https://ca.wikipedia.org/wiki/Girona">Girona</a></li>
    <li><a href="https://ca.wikipedia.org/wiki/Lleida">Lleida</a></li>
    <li><a href="https://ca.wikipedia.org/wiki/Tarragona">Tarragona</a></li>
</ul>
Task

Crea un enllaç que posi “Web Oficial del FC Barcelona”, però que la URL sigui https://www.realmadrid.com/:

Show solution
html
<a href="https://www.realmadrid.com/">Web Oficial del FC Barcelona</a>

You're reading a preview.

Sign in to read the full article. Any account opens 4 free articles a month; students and teachers read their course pages without limit.

Sign in