Lezione 5 (IFTS 2018)

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.
<iframe src="https://www.google.com"></iframe>

Elenco completo dei tag e digli attributi HTML

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 &nbsp;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.&eacute;</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>&copy; 2018 Ifts Tectnici Multimediali per Cultura&nbsp;e&nbsp;per&nbsp;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>

 

Torna all'inizio