H4 Ipertesto e multimedia

Il linguaggio HTML
 Sommario
●
Ipertesti e link
✔ I link
✔ Link interni
●
Multimedia
✔ Immagini
✔ Audio
✔ Video
2
Ipertesti e link
 I link
●
I link sono collegamenti a risorse Web, che possono essere:
✔ altre pagine Web o documenti;
✔ immagini e altre risorse multimediali;
✔ riferimenti interni al documento.
●
A seconda della risorsa collegata il browser, al click dell’utente, si comporta
diversamente:
✔ carica la pagina Web o il documento, per consultarlo;
✔ scarica l’immagine o la risorsa multimediale;
✔ sposta il focus sulla parte della pagina nello stesso documento.
●
Si possono inserire ovunque nel documento.
●
Sono elementi di tipo inline.
4
 I link – <a>
●
In HTML i link sono rappresentati dal tag <a>
●
Mostra un testo cliccabile, racchiuso nel
contenuto del tag, e nasconde l’URL alla risorsa.
●
L’attributo href permette di indicare l’URL della
pagina Web o della risorsa:
<a href="url_della_risorsa">Testo del link</a>

5
 I link – <a>
1 <h1>Links</h1>
2 <a href="http://www.google.it">Google</a>
3 <a href="http://www.facebook.com">Facebook</a>
4 <br>
5 <a href="http://www.youtube.com">YouTube</a>
6 <a href="http://www.instagram.com">Instagram</a>

6
 Link interni – Àncore
●
È possibile creare dei link interni alla pagina. Bisogna creare un’àncora, ossia un
segnalibro.
●
Si crea con il tag a e l’attributo name, oppure aggiungendo un attributo id a un
qualunque tag che si vuol far diventare àncora:
<a name="introduzione">Introduzione</a>
<h1 id="titolo">Titolo pagina</h1>
● Quindi si può creare un link interno all’àncora, indicando come valore di href il
nome dell’àncora o l’id del tag preceduto dal carattere hashtag #
<a href="#introduzione">Vai all’introduzione</a>
<h1 href="#titolo">Vai al titolo</a>
●
Esempio su W3C TryIt.
7
 Alcuni attributi di <a>
● title 1 <h1>Links</h1>
2 <a
✔ Indica il testo descrittivo per il link, 3 href="http://www.google.it"
leggibile da parte di lettori di pagine 4 title="Fai una ricerca su Google"
(favorisce l’accessibilità per 5 target="_blank">Google</a>
diversamente abili). 6 <br>
7 <a href="http://www.facebook.com">Facebook</a>
✔ Il browser, mostra il testo in questo
attributo come tooltip, un piccolo testo
descrittivo sopra al puntatore del mouse.
● target
✔ Indica al browser dove aprire la risorsa
indicata dal link.
✔ Se è target="_blank", il browser apre il
link in una nuova finestra o tab.
8
Multimedia
 Immagini – <img>
●
In HTML è possibile inserire ovunque delle immagini, mediante il tag
img e indicando il file dell’immagine.
●
Gli attributi principali di img sono:
✔ src: indica il percorso del file dell’immagine;
✔ title: indica un testo che compare sull’immagine al passaggio del mouse;
✔ alt: indica un testo alternativo, che viene mostrato dal browser quando non
riesce a mostrare l’immagine per un qualche motivo (connessione lenta, file
non trovato, ecc.).
<img src="percorso_immagine" alt="Testo alternativo">
●
Esempio su W3C TryIt.
10
 Immagini – <img>
<img
src="https://ind_image.jpg"
title="Cascata"
alt="Foto di una cascata">
<br>
<img
src="image.jpg"
title="Cascata"
alt="Foto di una cascata">

11
 Audio – <audio>
●
Per inserire file audio MP3, WAV oppure OGG nelle pagine Web è
possibile utilizzare il tag <audio>.
●
Gli attributi principali di audio sono:
✔ autoplay: se presente, permette di riprodurre il file appena caricato;
✔ controls: se presente, mostra una barra per controllare la riproduzione del
file;
✔ loop: se presente, riproduce il file a ripetizione;
✔ volume: indica il volume di partenza (valore da 0.0 a 1.0).
●
All’interno del tag audio possono essere inseriti uno o più tag
source.
12
 Audio – <audio>
●
Ciascun tag source
contiene una versione del <audio autoplay controls loop volume="0.5">
file audio che il browser <source src="sound.mp3" type="audio/mpeg">
può riprodurre, riproduce la
prima disponibile. <source src="sound.wav" type="audio/wav">
<source src="sound.ogg" type="audio/ogg">
●
Gli attributi di source sono:
✔ src: indica il percorso del
<!--
file audio; Messaggio se il tag non è supportato
✔ type: indica il tipo di file -->
(mp3 audio/mpeg, wav Il tuo browser non supporta il tag audio
audio/wav, ogg audio/ogg).
</audio>
●
Esempio su W3C TryIt.

13
 Video – <video>
●
Per inserire file video MP4, WebM oppure OGG nelle pagine Web è possibile
utilizzare il tag <video>.
●
Gli attributi principali di video sono:
✔ poster: percorso dell’immagine di anteprima da visualizzare mentre il video è in
caricamento;
✔ width ed height: permettono di impostare la larghezza e l’altezza in pixel;
✔ autoplay: se presente, permette di riprodurre il file appena caricato;
✔ controls: se presente, mostra una barra per controllare la riproduzione del file;
✔ loop: se presente, riproduce il file a ripetizione;
✔ volume: indica il volume di partenza (valore da 0.0 a 1.0).
●
All’interno del tag video possono essere inseriti uno o più tag source.
14
 Video – <video>
●
Ciascun tag source
contiene una versione del <video poster="loading.jpg"autoplay controls
file video che il browser può loop volume="0.5">
riprodurre, riproduce la <source src="video.mp4" type="video/mp4">
prima disponibile.
<source src="video.webm" type="video/webm">
●
Gli attributi di source sono:
<source src="video.ogg" type="video/ogg">
✔ src: indica il percorso del file
audio; <!--
✔ type: indica il tipo di file Messaggio se il tag non è supportato
(mp4 video/mp4, wav -->
video/webm, ogg video/ogg).
Il tuo browser non supporta il tag video
●
Esempio su W3C TryIt.
</video>
15