Sintesi della lezione
ELEMENTI MULTIMEDIALI
IMG
Il tag <img>
definisce un'immagine in una pagina HTML.
- Il tag
<img>
ha due attributi obbligatori: src e alt.
- Le immagini non sono tecnicamente inserite in una pagina HTML, ma collegate attraverso l'URL, l'indirizzo univoco la identifica. Il tag <img> crea lo spazio di per l'immagine caricata.
<img src="smiley.gif" alt="Smiley face" height="42" width="42" />
<img src="https://unsplash.it/1280/720?random" alt="Immagine caricata da unsplash.it" />
VIDEO
Il tag <video>
consente di inserire un video in una pagina WEB, ad esempio un clip filmato o un video in streaming.
- Attualmente sono tre i formati video supportati dall'elemento
<video>
:
- MP4 (Internet Explorer, Chrome, Safari, Firefox su Windows),
- WebM (Chrome, Firefox, Opera)
- Ogg (Chrome, Firefox, Opera).
<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Il tuo browser non supporta il tag video.
</video>
AUDIO
Il tag <audio>
consente di inserire una risorsa audio in una pagina WEB, ad esempio una clip audioo un audio in streaming.
- Attualmente sono tre i formati audio supportati dall'elemento
<audio>
:
- MP3 (Internet Explorer, Chrome, Safari, Firefox su Windows),
- Wav(Chrome, Firefox, Opera. Safari) e
- Ogg (Chrome, Firefox, Opera).
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Il tuo browser non supporta il tag audio.
</audio>
CANVAS
Il tag HTML5 <canvas>
viene usato per disegnare la grafica, al volo, tramite scripting (di solito Javascript). L'elemento <canvas>
non ha capacità di disegno proprie (è solo un contenitore per la grafica). È necessario utilizzare uno script per disegnare effettivamente la grafica.
IFRAME
Il tag <iframe>
specifica un frame in linea.
Un frame viene utilizzato per incorporare un altro documento nel documento HTML corrente.
Risorse
Immagine ad alta definizione
Logo cassa di risparmio
Audio e video
Pagine create durante la lezione
tipografia.html
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<title>Tipografia</title>
</head>
<body>
<nav>
<ul>
<li><a href="#titoli">Titoli</a></li>
<li><a href="#paragrafi">Paragrafi</a></li>
</ul>
</nav>
<section id="titoli">
<h1>Titolo 1 </h1>
<h2>Titolo 2 </h2>
<h3>Titolo 3</h3>
<h4>Titolo 4</h4>
<h5>Titolo 5</h5>
<h6>Titolo 6</h6>
</section>
<section id="paragrafi">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam tenetur aliquam asperiores beatae, eos ex enim, nesciunt esse libero quo ullam ab dicta fugit sed. Dicta tempora quas possimus dolorum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id adipisci tempora, perferendis assumenda consectetur, soluta explicabo consequatur magni corrupti minima deserunt enim fugit necessitatibus vero temporibus ipsam repellat voluptatem tenetur.é</p>
</section>
<ul>
<li>Primo elemento</li>
<li>Secondo</li>
<li> Sottolista
<ul>
<li>Sottolista</li>
<li>Sotto sotto</li>
</ul>
</li>
<li>Quarto</li>
</ul>
<ol>
<li>Primo</li>
<li>Secondo</li>
</ol>
<div>Lorem <strong>ipsum dolor sit amet</strong>, consectetur adipisicing elit. Accusantium molestiae eius facilis temporibus similique. Incidunt impedit error in cumque. Saepe dicta obcaecati fugiat quasi, quod, provident inventore. Ea, reiciendis, veritatis.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <em>Maiores facilis </em>hic maxime vitae magni, nisi repellendus non animi nesciunt, perspiciatis, cupiditate eius! Reprehenderit explicabo, doloremque doloribus rerum, illum quis alias!</div>
<p style="text-align: right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis voluptates, reiciendis. Voluptatum dolores iure natus sed inventore omnis placeat autem eligendi eveniet, fugit, amet, tempore blanditiis assumenda esse quo quos!</p>
<p>code: <code>Questo è codice</code><br>
sample: <samp>Questo e un test</samp><br>
var: <var>Variabile</var><br>
keyboard:<kbd>Comninazione di tasti</kbd> </p>
<p>© 2018 Ifts Tectnici Multimediali per Cultura e per l'Arte</p>
<h1>Form</h1>
<form>
<label>Nome</label>
<input type="text" value="" placeholder="Inserisci il tuo nome" maxlength="10" required><br>
<label>Password</label>
<input type="password" maxlength="6"><br>
<label for="sesso">Seleziona</label><input type="checkbox" value="maschio" id="sesso"><br>
<label for="maschio">Maschio</label>
<input type="radio" id="maschio" name="scelta
sesso">
<label for="femmina">Femmina</label>
<input id="femmina" type="radio" name="sceltasesso">
</form>
<section id="immagini">
<img src="immagini/um7buv3a.jpg" alt="Immagine di prova">
<br>
<img src="immagini/C- logo-bandiera-01.svg" alt="Logo di prova" style="width:50%; height:auto">
</section>
<section id="video">
<video controls>
<source src="media/mov_bbb.mp4" type="video/mp4">
<source src="media/mov_bbb.ogg" type="video/ogg">
</video>
</section>
<section id="audio">
<audio controls>
<source src="media/horse.mp3" type="audio/mp3">
</audio>
</section>
<section id="frame">
<iframe width="640" height="360" src="https://www.youtube.com/embed/eU7V4GyEuXA" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</section>
</body>
</html>