Come aggiungere contenuti multimediali e link in una pagina HTML

Come aggiungere contenuti multimediali e link in una pagina HTML

Nelle scorse guide abbiamo visto come creare una pagina HTML e come inserire una lista. In un file HTML possiamo aggiungere anche foto, video, e link a pagine interne al sito o che rimandano ad altri siti. In questa guida vedremo come si fa ad inserire un contenuto multimediale o dei link.

Come inserire un’immagine o un video

Poniamo il caso di avere questo esempio:

<!DOCTYPE html>
<html lang="it"> 
<head> 
  <title>Titolo del sito</title> 
</head> 
<body> 
  <h1>Sottotitolo1</h1> 
    <p>Paragrafo.</p> 
</body> 
</html>

Intanto per inserire un’immagine dobbiamo averla già nella stessa cartella o in una sottocartella della nostra pagina; un CMS, come WordPress, ha già la sua libreria: basta caricare lì le immagini e le avremo sempre a disposizione.

Se vogliamo inserire una foto sotto il paragrafo, scriveremo questo codice:

<img src="foto.jpg" alt="foto" width="200" height="300">

Vediamo adesso il significato dei vari attributi:

  • src: E’ il tipo di file dell’immagine. E’ bene caricare solo file jpg o png.
  • alt: E’ la descrizione dell’immagine. Risulta utile per chi non vede.
  • width e height: Sono la base e l’altezza della foto quando verrà visualizzata nel browser.

Per inserire un video ci sono diversi modi. Uno è:

<video src="pc.mp4" controls>Il tuo browser non supporta questo video</video>

Da notare in questo caso che stiamo richiamando un elemento: stiamo indicando anche un file e cosa mostrare nel caso il browser non sia in grado di fare vedere il video. L’attributo controls è importante per mostrare il player nel video.

Come inserire dei link all’interno della nostra pagina

Possiamo anche inserire dei link interni che ci portano ad una sezione del nostro stesso sito o link ad altri siti. Nel primo caso, se volessimo rimandare una persona all’articolo di questo sito che spiega come si scrive una pagina HTML, basterà scrivere:

<p> Vedi la guida su <a href="/come-si-scrive-una-pagina-html">come si scrive una pagina html</a></p>

Come possiamo vedere, non è necessario scrivere l’intero indirizzo dato che si trova nella stessa cartella. Anche quando si crea un sito bisogna usare questo metodo, in modo che se dovesse cambiare l’indirizzo url del sito (il dominio), non sarà necessario modificare la prima parte.

Se invece vogliamo rimandare un utente a un sito esterno, scriveremo qualcosa tipo

<p> Visita il sito <a title="HTML.it" href="https://www.html.it/" target="_blank">HTML.it</a> per saperne di più</p>
  • L’attribuito title fa in modo che se un utente passa sopra con il mouse al link, legga una descrizione di quel collegamento.
  • target=”_blank”: Fa in modo che quando l’utente clicchi al link, il sito viene aperto in un’altra scheda; questo è utile quando lo rimandiamo ad un sito esterno in modo che non esca dal nostro.

Riassumendo:

Come inserire immagini, video e link HTML. Lista dei tag:

  1. Inserire un immagine: <a src=”foto.jpg” alt=”descrizione” width=”px” height=”px”>

    Possiamo anche usare il formato PNG

  2. Inserire un video: <video src=”video.mp4″ controls>Il tuo browser non supporta questo video</video>

    L’attributo controls serve per abilitare il player del video.
    Il testo all’interno dei due tag viene visualizzato nel caso il browser non sia in grado di visualizzare il video

  3. Inserire un link: <a title=”sito.it” href=”https://nomesito.it”

    L’attributo title è per la descrizione del link.

Per approfondire, vedi la sezione Ipertesti e contenuti multimediali nella guida di HTML.it

/ 5
Grazie per aver votato!