Taula de continguts

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

Introducció

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

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

Enllaç

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

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

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

Dins del tag <a> es posa el nom del recurs o qualsevol altre 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

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

Solució

<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>

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

Solució

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

3.- Si l'enllaç és una pàgina HTML, el navegador "navega" a la pàgina que posa l'atribut href.

En altre cas, el que fa és descarregar el recurs.

Quins tipus de recurs vincula aquests enllaços:

Solució

Una imatge:

Imatge

El tag <img> s'utilitza per indicar al navegador que el recurs és una imatge que ha de mostrar dins el document.

Per exemple, podem incorporar un Quoca en el nostre document:

<img 
  src="https://xtec.dev/web/doc/link/quokka.jpg"
  alt="A quokka" 
  title="The quokka is an Australian marsupial that is similar in size to the domestic cat." 
/>

L'unic atribut obligatori és src que és la URL on està la imatge.

L'atribut title proporciona informació addicional sobre la imatge, i alguns navegador mostre el títol quan l'usuari situa el cursor sobre la imatge.

L'atribut alt dóna una descripció precisa del contingut de la imatge perquè pugui ser entès pel programari lector de pantalla (utilitzat per persones amb discapacitat visual).

Encara que no et pugui semblar important, per a Google i els altres buscadors si.

😯

Per tant, si vols fer SEO, ja saps que has de fer.

Figura

Si vols enmacar una imatge ho pots fer amb els tag <figure>.

A més de la imatge pots afegir un títol amb l'element <figcaption>.

<figure class="figure">
  <img 
    src="sea-otters-holding-hands.jpg"
    class="img-fluid" 
    alt="Fotografia de dues llúdrigues marines surant a l'aigua">
  <figcaption class="figure-caption">
    Les llúdrigues marines s'agafen de la mà quan dormen perquè no s'allunyin les unes de les altres.
  </figcaption>
</figure>

Observa que has d'afegir class="img-fluid" perquè la imatge s'adapti a l'espai disponible!

Pots tenir més d'una imatge dins de l'element <figure> sempre que totes les imatges comparteixin el mateix títol.

Video

L'element <video> incrusta un reproductor multimèdia que admet la reproducció de vídeo al document.

<div class="text-center">
  <video controls width="250">
    <source src="https://xtec.dev/web/doc/link/flower.webm" type="video/webm" />
    <source src="https://xtec.dev/web/doc/link/flower.mp4" type="video/mp4" />
  </video>
</div>

Més informació a The Video Embed element

Pots inserir un video de Youtube amb un iframe:

<div class="text-center">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/G7L4YzGAvMA?si=h-5MVwv7m_inDqWQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>

El codi del video el pots trobar abaix del video on posa Comparteix > Insereix:

Audio

L'element <audio> incrusta un reproductor d'audio en el document:

<div class="text-center m-3">
  <figure class="figure">
    <figcaption class="figure-caption">Wolf Howl</figcaption>
    <audio controls src="https://xtec.dev/web/doc/link/wolf-howl.mp3"></audio>
  </figure>
</div>

Més informació a The Embed Audio element

URL relativa

Activitats

1.- A https://pixabay.com/ ...

TODO

• Link