HTML5 Links e Multimedia
Lezione 03 In questa lezione vedremo come trattare links e multimedia in HTML5. Un file contenente codice HTML è un documento web. Unire più documenti o pagine, può rappresentare la caratteristica strutturale di un sito web.
Questo è ciò che link o collegamenti ipertestuali fanno: uniscono le pagine di un sito web o le collegano ad altri siti web. In questo modo si costituisce la Rete. Un link ci porta ad una pagina web con un semplice click, risparmiandoci la digitazione nel browser dell’indirizzo della pagina stessa.
Il tag link è facile da ricordare: <a>. Tra il tag di apertura e di chiusura va l’ipertesto che vogliamo rendere visibile sulla pagina web.
<!doctype html> <html> <body> <a>Link da inserire!</a> </body> </html>
Il browser mostrerà come collegamento, qualsiasi cosa inserita tra il tag di apertura e di chiusura. Tuttavia, per far funzionare il collegamento, dobbiamo aggiungere un indirizzo di destinazione. Per questo, useremo l’attributo href . Ora abbiamo solo bisogno di fornire un indirizzo di destinazione, noto anche come Uniform Resource Locator, o URL in breve.
<!doctype html> <html> <body> <a href="https://www.ambrix.net">Link al sito web</a> </body> </html>
Appare ora la manina? Ok, accertato che il link funziona, vediamo ora come inserire un’immagine all’interno della pagina web che stiamo costruendo. Per aggiungere una qualsiasi immagine utilizzeremo il tag img . Proprio come <br>, <img> è un empty tag, il che vuol dire che non ha un tag di chiusura. Dobbiamo usare un attributo per puntare a un’immagine: la parola src , che sta per sorgente (source).
<!doctype html>
<html>
<body>
<img src="https://www.ambrix.net/wp-content/uploads/2019/04/HTML5-smalllogo.jpg">
</body>
</html>
Abbiamo visualizzato l’immagine contenuta in una sottocartella del sito web ambrix.net. Attraverso il link completo possiamo raggiungere una qualsiasi immagine pubblicata in rete e che abbia un url. Inoltre possiamo dimensionare l’immagine a nostro piacimento, al fine di ottimizzarne la visualizzazione. Faremo ciò attraverso l’utilizzo degli attributi width e height .
<!doctype html> <html> <body> <img src="/html5-small.png" width="100" height="70"> </body> </html>
Nell’esempio attribuiamo all’immagine di prima una larghezza di 100 pixel ed una altezza di 70 pixel.
C’è un altro tag molto utile che possiamo usare per visualizzare una pagina web all’interno di un’altra pagina web. Per questa operazione, possiamo usare il tag iframe .
<!doctype html> <html> <body> <h1>Un video da YouTube</h1> <iframe src="https://www.youtube.com/embed/61RCnqkNHoA"></iframe> </body> </html>
Un video da YouTube
Abbiamo concluso la parte riguardante links e multimedia in HTML5. Puoi continuare con la lezione successiva.
