Home
  1. Informatica
  2. Creare siti web
  3. Come inserire link, immagini e video nelle pagine HTML

Come inserire link, immagini e video nelle pagine HTML

Le pagine web non sono solo testo. Aggiungiamo immagini e video responsive al sito internet

In questa lezione dedicata agli elementi base nella progettazione delle pagine web, aggiungiamo link al testo, immagini e video.

   Livello: Iniziale 
 

Foto: Pixabay.com

Link, immagini e video donano colore alle pagine web. Immagini delle pagine di solo testo? Agli inizi era così. Pagine di puro HTML, con pochi tag e utili a formattare solo il testo. Ben presto arrivò CSS a donare un po' di colore accompagnato dalle immagini inserite nelle pagine. L'immagine ha il compito di "rendere visibile" quello che il testo descrive. Il passo successivo è stato aggiungere i video alle pagine web. Un salto qualitativo reso possibile dal progresso tecnologico delle infrastrutture di telecomunicazione. Immagini vedere un video di Youtube in qualità HD 1080p con una connessione 56Kbps analogica su protocollo V.90? Drammatico!

In questa lezione scoprirai come inserire un link nel testo della pagina web, come inserire una immagine responsive e come aggiungere un video alla pagina.

Come si inseriscono i link

Il tag che si usa è <a></a>. Una scrittura semplice del testo da 'linkare' è la seguente:

<a href="pagina-esterna.html">Questo è il testo 'linkato'.</a>

L'attributo href specifica l'url al quale rimandiamo l'utente. Un link può contenere anche alcune informazioni testuali aggiuntive, mostrate da alcuni browser e utili ai non vedenti che utilizzano speciali software per la lettura. Sono vari gli attributi del tag <a> disponibili. Un altro esempio:

<a href="nome-pagina.html" target="_blank">Leggi questo articolo esterno.</a>

L'attributo target consente di aprire il link in modi diversi: in una nuova scheda, come nell'esempio, nella stessa pagina, in un frame genitore e così via. Essenzialmente l'attributo target si usa con il valore _blank, gli altri hanno una rara applicazione: _self; _parent; _top; framename.

<a href="documento-da-stampare.pdf" target="_blank" title="Scarica e compila il documento" rel="nofollow">Questo il documento necessario.</a>

L'attributo title aggiunge testo descrittivo al link. L'attributo rel serve a stabilire una relazione tra la pagina in cui ci troviamo e quella nel link. Scrivere nofollow serve al motore di ricerca Google: gli indica di non indicizzare il file .pdf. Perché? Files .pdf, .doc, .odf, .zip, .mp3, ecc., è sempre meglio non farli indicizzare se non proprio necessario. Tranne nei casi in cui lo scopo principale del sito è di fornire servizi attraverso lo scaricamento di documenti preformati, musica, ecc. Rendere visibili ai motori di ricerca questi files, li rende scaricabili direttamente all'utente finale senza "atterrare" sul nostro sito internet. Il motore di ricerca gli presenta direttamente l'URL del file. Questo consuma la banda del server e non conduce l'utente sul sito.

Immagini responsive

Ecco come s'inserisce sintatticamente un'immagine all'interno d'una pagina HTML:

<img alt="Testo descrittivo" src="immagine-articolo.jpg" height="320px" width="120px"

Così s'include un'immagine nelle pagine web. alt è l'attributo che aggiunge testo descrittivo all'immagine: non aggiungerlo è un errore. src richiama la fotografia dalla sua posizione nel server, mentre height imposta l'altezza e width la larghezza espressi in pixel.

Per accentrare un'immagine, posizionarla a destra o a sinistra del testo, puoi aggiungere l'attributo class, con riferimento a un selettore definito nel foglio di stile:

.imglft {padding:5px 10px;float:left}
.imgrgt {padding:5px 10px;float:right}
.imgctr {display:block;margin:15px auto}

I selettori contengono un insieme di regole: imglft pone l'immagine a sinistra del testo, imgrgt a destra e imgctr al centro del testo.

Come possiamo rendere responsive un'immagine molto grande? Mettiamo di dover inserire una foto di 640 pixel di larghezza, 480 pixel di altezza. L'utente che approda alla pagina da un computer desktop o notebook, non ha problemi a visualizzare l'intera foto. Uno smartphone e un tablet di pochi pollici sì.

Le soluzioni proposte sono due. La prima riguarda la trasformazione in percentuale delle dimensioni in pixel dell'immagine, rispetto alla pagina. Mettiamo che lo spazio disponibile in larghezza è di 700 pixel. Con una semplice proporzione calcoliamo, in percentuale, quanto deve essere larga l'immagine rispetto alle dimensioni del content: 700px : 100% = 640px : X, quindi il risultato è 91.42% in larghezza. Come scriverlo:

<img src="immagine-640x480.jpg" alt="immagine grande!" width="91.42%" height="480px">

E se volessi stabilire una immagine responsive anche in altezza, renderla completamente adattabile alle dimensioni del dispositivo sulle due dimensioni? Questo il codice CSS che suggerisco:

img.scalable {margin-bottom:10px;height:auto !important;width:auto !important;max-width:100%}

Ed ecco come implementare il selettore CSS nel tag <img>:

<img src="immagine-responsive.jpg" alt="Prima immagine responsive" class="scalable">

Video responsive

Aggiungere un video alle pagine del sito internet è semplice. Differenti le possibilità di implementazione. Iniziamo dal tag HTML <video>:

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

L'esempio riportato è della W3 Schools, La istituzione nel campo dell'HTML. In questo caso sono stati aggiunti due video. Uno in formato .mp4 e l'altro in formato .ogg, per la più ampia compatibilità con i browser. Il tag <video> supporta anche file video in formato WebM. Bisogna rispettare il codec audio previsto per ogni tipo di file video. Non entro nello specifico, non è il mio campo.

Soffermiamoci sugli attributi ammessi. Possiamo stabilire le dimensioni del video, come avviene per l'immagine, il tipo di video nell'attributo type. L'attributo controls mostra i controlli del video: play, pausa, stop, volume. Con autoplay, non presente nell'esempio, indichiamo al browser di far partire in automatico la riproduzione del video. Con loop impostiamo la riproduzione infinita, mentre con muted impostiamo il muto all'audio come predefinito. L'attributo poster permette di aggiungere una foto al video mentre viene caricato o prima che sia cliccato il bottone play. L'attributo preload indica al browser se deve caricare oppure no il video durante il caricamento di pagina: auto, metadata, none sono i valori possibili: consigliato, none.

Utilizzare questo metodo implica il caricamento del video su un server, del quale disponiamo il link diretto.

La seconda soluzione sgrava il nostro server del peso di dover caricare i video e riguarda i contenuti caricati sul nostro canale Youtube o Vimeo. Scegli uno dei due "social network" dedicati ai filmati e iscriviti per includere i tuoi video. Oppure mettiamo che hai visto un video su una delle due piattaforme e vuoi implementarlo nella pagina web. Ecco come fare.

Youtube

Scelto il video da implementare, sotto di esso trovi la voce "Condividi". Appare una seconda barra menu. Scegli "Codice da incorporare". Seleziona il codice che appare nel campo, sarà come questo:

<iframe width="560" height="315" src="https://www.youtube.com/embed/95fvO4nwCRo?rel=0" frameborder="0" allowfullscreen></iframe>

Prova a implementare il video nella tua pagina web e fai un test. Se vuoi renderlo responsive in larghezza, sostituisci la misura in pixel del width con il formato percentuale visto per le immagini.

Vimeo

Implementare un video di Vimeo è altrettanto semplice. Quando sei davanti al video, clicca su "Share". Si apre la schermata come proposta sotto. Alla voce "Embed" trovi un campo di testo. Copia il contenuto e inseriscilo nella pagina.

<iframe src="https://player.vimeo.com/video/35174347" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p><a href="https://vimeo.com/35174347">Casa Vedoble</a> from <a href="https://vimeo.com/estudiopalma">Estudio Palma</a> on <a href="https://vimeo.com">Vimeo</a>.</p>

Anche un video Vimeo può diventare responsive, modificando l'attributo width. Rispetto al codice di Youtube presenta alcuni attributi in più.

 

Leggi Pure

⟩⟩ TransferWise Opinioni: La mia Esperienza | Recensione Reale    ⟩⟩ Ledger Nano S Promo Code e Promozioni    ⟩⟩ Promozioni e Nuovi Listing su CEX.io Exchange    ⟩⟩ Come conseguire la Certificazione G Suite    ⟩⟩ OneDrive for Business: Come Funziona, Caratteristiche, Costi