Lezione 3 (IFTS 2019)

ELEMENTI SEMANTICI

Gli elementi semantici sono quelli che ci aiutano a dare una struttura logica ad un documento

• Normalmente sono elementi di tipo blocco
• Nella maggior parte dei casi i browser non prevendono alcuna formattazione di default e vengono resi sullo schermo come testo normale

HEADER

La specifica impone che questo elemento debba delimitare l’intestazione di una sezione del documento.

• Le intestazioni possono essere molteplici all’interno di un documento. Si pensi ad esempio blog: nell’home page ci sarà un’intestazione contenente il nome del blog, un menù di navigazione e qualche altra informazione. Sotto l’intestazione potrebbe esserci una sezione contenente gli articoli recenti, ognuna di queste dovrà avere anch’essa un’intestazione che potrebbe l’autore e la data di pubblicazione.
• Non è prevista lacuna formattazione di default

	<header class="main-header">
		<div class="logo">Logo</div>
		<nav>
			<!-- Menu del sito -->
		</nav>
	</header>

NAV

L’elemento <nav> specifica una porzione di documento destinato alla navigazione per esempio la lista di un menu.

	<nav>
		<ul class="navbar">
			<li><a href="#titoli">Titoli</a> </li>
			<li><a href="#paragrafo">Paragrafo</a> </li>
			<li><a href="#liste">Liste</a> </li>
		</ul>
	</nav>

SECTION

L'elemento <section> rappresenta una sezione generica di un documento o applicazione.

• Individua un raggruppamento tematico di contenuti, ed in genere contiene un titolo introduttivo ad esempio le sezioni di una homepage o i capitoli di un libro.
• Se la sezione racchiusa è una notizia l’elemento più appropriato per tale impiego è il tag <article>.

	<section>
		Testo o qualsiasi altro elemento 
	</section>

ARTICLE

L’elemento <article> dev’essere utilizzato quando s’inseriscono informazioni indipendenti dal resto del documento o della sezione in cui è racchiuso.

• Può trattarsi ad esempio di un articolo di giornale o un post in un blog o un qualsiasi altro elemento.

	<article>
		<header>
			<h1>Titolo</h1>
			<div class="autore>">Mario Rossi</div>
		</header>
		<p>....</p>
		<!-- Contenuto articolo -->
		<footer><time datetime="2017-03-01T14:00" pubdate>01/03/2017 14:00</time> </footer>
		<section class="commenti">
			<article>
				<!-- Autore commento 1, avatar, testo commento -->
			</article>
			<article>
				<!-- Autore commento 2, avatar, testo commento -->
			</article>
			<section class="aggiungi-commento">
				<form method="post">
					<label>Aggiungi commento:</label>
					<textarea rows="5" maxlength="500"></textarea>
					<button type="submit">Invia</button>
				</form>
			</section>
		</section>
	</article>

ASIDE

L’elemento <aside> viene utilizzato per definire una porzione di codice correlata al contenuto ma separata come per esempio una sidebar.

• Le informazioni che racchiude, se rimosse, non devono incidere negativamente sulla completezza dell’informazione contenuta nell’elemento a cui è associato.
• Può essere utilizzato ad esempio per racchiudere elementi <nav> aggiuntivi, banner pubblicitari o note.

FOOTER

L’elemento <footer> definisce una porzione di documento che rappresenta il piede della pagina o di una parte del documento.

• Non è prevista lacuna formattazione di default
• Analogamente alle intestazioni anche i piè di pagina possono essere molteplici all’interno di una pagina web.

<footer> &copy; 2017 Mia Azienda - Tutti i diritti riservati </footer>

FIGURE

Il tag <figure> specifica un contenuto indipendente dal testo, come illustrazioni, diagrammi, foto, esempi di codice, ecc

• Mentre il contenuto dell'elemento <figure> è in relazione al flusso principale, la sua posizione è indipendente dal flusso principale, e se rimosso non dovrebbe influenzare il flusso del documento.
• Di norma l’elemento <figure> contiene un elemento <figcaption> che arricchisce l'elemento contenuto in <figure> con una descrizione

	<figure>
		<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
		<figcaption>Una didascalia</figcaption> 
	</figure>

TIME

L’elemento <time> rappresenta una data.

• È normalmente utilizzato all'interno di un elemento <article>
• L'attributo datetime indica la data in forma "iso" (anno[-mese[-giorno]] [ora[:minuti[:secondi]]]) in modo che programmi esterni che consultano l'articolo possano determinarla in modo certo
• L'attributo pubdate indica, se presente, che la data si riferisce alla pubblicazione dell'articolo in cui <time> è inserito altrimenti si presumerà che la data sia la data di pubblicazione della pagina.

   <time datetime="2010-04-21 11:45" pubdate ="pubdate" > 
      21 Pubblicato il 21 febbraio 2017 alle ore 11:45 
   </time>

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

<iframe src="https://www.google.com"></iframe>