Collegamenti e Contenuti Multimediali

in data

Collegamenti e Contenuti Multimediali

Ecco il Capitolo 4 del tutorial, dedicato a collegamenti e contenuti multimediali in HTML.

4. Collegamenti e Contenuti Multimediali

Una pagina web diventa interessante quando collega informazioni e integra immagini, video e altri media.
In HTML possiamo farlo con alcuni elementi fondamentali.

4.1 Collegamenti (<a>)

Il tag <a> serve per creare link a:

  • Altre pagine del tuo sito

  • Siti esterni

  • Sezioni specifiche della stessa pagina

  • File scaricabili

Sintassi di base:

<a href="https://www.example.com">Visita Example</a>

  • href → indica la destinazione del link

  • Il testo tra i tag è quello cliccabile

Esempi utili:

<!-- Link esterno -->
<a href="https://www.google.com" target="_blank">Vai su Google</a>

<!-- Link interno -->
<a href="pagina2.html">Vai alla pagina 2</a>

<!-- Link a una sezione -->
<a href="#contatti">Vai alla sezione Contatti</a>


target="_blank" apre il link in una nuova scheda.


4.2 Immagini (<img>)

Per inserire un’immagine usiamo il tag <img>.

<img src="immagine.jpg" alt="Descrizione dell'immagine" width="300">

  • src → percorso del file

  • alt → testo alternativo (importante per accessibilità e SEO)

  • width / height → dimensioni in pixel

Il testo alt appare se l’immagine non si carica o per chi usa screen reader.

4.3 Video (<video>)

HTML5 permette di incorporare video senza plugin esterni.

<video controls width="400">
    <source src="video.mp4" type="video/mp4">
    Il tuo browser non supporta il tag video.
</video>

  • controls → mostra i comandi di riproduzione

  • Puoi aggiungere più <source> per formati diversi

4.4 Audio (<audio>)

Simile al video:

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    Il tuo browser non supporta il tag audio.
</audio>

4.5 Incorporare contenuti esterni (<iframe>)

Con <iframe> puoi integrare altre pagine o contenuti come mappe e video YouTube.

Esempio con YouTube:

<iframe width="560" height="315" 
src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
title="Video YouTube" frameborder="0" 
allowfullscreen></iframe>

English version

Here is Chapter 4 of the tutorial, dedicated to links and multimedia in HTML.

4. Links and Multimedia

A web page becomes interesting when it links information and integrates images, videos, and other media.

In HTML, we can do this with a few basic elements.


4.1 Links (<a>)

The <a> tag is used to create links to:

  • Other pages on your site
  • External sites
  • Specific sections of the same page
  • Downloadable files

Basic syntax:

<a href="https://www.example.com">Visit Example</a>

  • href → indicates the link's destination
  • The text between the tags is the clickable text

Useful examples:

<!-- External link -->

<a href="https://www.google.com" target="_blank">Go to Google</a>

<!-- Internal link -->

<a href="pagina2.html">Go to page 2</a>

<!-- Link to a section -->

<a href="#contatti">Go to the Contact section</a>

target="_blank" opens the link in a new tab.


4.2 Images (<img>)

To insert an image, use the <img> tag.

<img src="image.jpg" alt="Image description" width="300">

  • src → file path
  • alt → alt text (important for accessibility and SEO)
  • width / height → dimensions in pixels

The alt text appears if the image fails to load or for screen reader users.


4.3 Videos (<video>)

HTML5 allows you to embed videos without external plugins.

<video controls width="400">

<source src="video.mp4" type="video/mp4">

Your browser does not support the video tag.

</video>

  • controls → show playback controls
  • You can add multiple <source>s for different formats

4.4 Audio (<audio>)

Similar to video:

<audio controls>

<source src="audio.mp3" type="audio/mpeg">

Your browser does not support the audio tag.

</audio>

4.5 Embed external content (<iframe>)

With <iframe>, you can embed other pages or content such as maps and YouTube videos.


Example with YouTube:

<iframe width="560" height="315"

src="https://www.youtube.com/embed/dQw4w9WgXcQ"

title="YouTube Video" frameborder="0"

allowfullscreen></iframe>

Puoi seguire anche il mio canale YouTube https://www.youtube.com/channel/UCoOgys_fRjBrHmx2psNALow/ con tanti video interessanti


I consigli che offriamo sono di natura generale. Non sono consigli legali o professionali. Quello che può funzionare per una persona potrebbe non essere adatto a un’altra, e dipende da molte variabili.
Per supportare e far crescere il canale in modo semplice, rapido e gratuito, potete fare acquisti su amazon usando il mio link di affiliazione.
Questo implica che io prenda una commissione ogni volta che qualcuno faccia un qualsiasi acquisto utilizzando il mio link di affiliazione https://amzn.to/4cgJ3Ls

Commenti

Posta un commento