Articolo originale: The Best HTML Examples and HTML5 Examples
L'HTML fornisce la struttura dei siti web. In quest'articolo, vedremo alcuni esempi di come utilizzare la sintassi HTML per costruire siti web e alcuni esempi riguardanti le caratteristiche del nuovo HTML5.
L'attributo href negli elementi a
L'attributo href fa riferimento a una destinazione indicata da un link. L'elemento <a> è spacciato senza un attributo href. Delle volte, durante il tuo lavoro, potresti non volere un link live o non conoscere ancora la destinazione di un link. In questo caso, è utile impostare il valore dell'attributo href su "#" per creare un link morto. L'attributo href può essere usato per linkare file locali o file su internet.
Ad esempio:
<html>
<head>
<title>Esempio attributo href</title>
</head>
<body>
<h1>Esempio attributo href</h1>
<p>
<a href="https://www.freecodecamp.org/contribute/">The freeCodeCamp Contribution Page</a> shows you how and where you can contribute to freeCodeCamp's community and growth.
</p>
</body>
</html><a href> è supportato da tutti i browser.
Altri attributi:
hreflang : specifica la lingua della risorsa linkata. target : specifica il contesto in cui la risorsa linkata verrà aperta. title : definisce il titolo di un link, che appare all'utente come descrizione.
Esempi
<a href="#">Questo è un link morto</a>
<a href="https://www.freecodecamp.org">Questo è un link a freeCodeCamp</a>
<a href="https://html.com/attributes/a-href/">Altro sull'attributo a href</a>Ancoraggio all'interno della pagina
È anche possibile impostare un'ancora in una certa posizione della pagina. Per fare ciò, dovresti prima di tutto aggiungere un'etichetta nella posizione della pagina con un elemento con l'attributo "name" necessario, avente una parola chiave descrittiva, in questo modo:
<a name="top"></a>Una volta fatto ciò, aggiungi il link che porta all'ancora in qualsiasi punto della pagina desideri. Devi utilizzare l'attributo "href" con il simbolo # (cancelletto) e la parola chiave descrittiva dell'ancora, proprio così:
<a href="#top">Go to Top</a>Link a immagini
<a href="#"> può essere anche applicato a immagini o altri elementi HTML.
Esempio
<a href="#">
<img itemprop="image" style="height: 90px;" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
</a>L'attributo target
L'attributo target specifica dove aprire il documento linkato in un elemento di ancoraggio a.
Esempi:
Un attributo target con il valore di “_blank” apre il documento linkato in una nuova scheda o finestra.
<a href="https://www.freecodecamp.org/" target="_blank">freeCodeCamp</a>Un attributo target con il valore di “_self” apre il documento linkato nella stessa finestra o scheda in cui è stato cliccato (questa è l'impostazione predefinita e di solito non è necessario specificarla).
<a href="https://www.freecodecamp.org/" target="_self">freeCodeCamp</a><a href="https://www.freecodecamp.org/">freeCodeCamp</a>Un attributo target con il valore di “_parent” apre il documento linkato in nella finestra principale.
<a href="https://www.freecodecamp.org/" target="_parent">freeCodeCamp</a>Un attributo target con il valore di “_top” apre il documento linkato nel livello più alto.
<a href="https://www.freecodecamp.org/" target="_top">freeCodeCamp</a>Un attributo target con il valore di “framename” apre il documento linkato in un riquadro dal nome specifico.
<a href="https://www.freecodecamp.org/" target="framename">freeCodeCamp</a>L'attributo background nel body
Se vuoi aggiungere un'immagine di sfondo invece di un colore di sfondo, una soluzione è l'attributo background, che specifica un'immagine di sfondo per il documento HTML.
Sintassi:
<body background="URL">
Attributo:
background - URL dell'immagine di sfondo
Esempio:
<html>
<body background="https://assets.digitalocean.com/blog/static/hacktoberfest-is-back/hero.png">
</body>
</html>L'attributo background nel body è sconsigliato
L'attributo background nel body è sconsigliato in HTML5. Il modo corretto di agire sullo stile dell'elemento <body> è usare il CSS.
Esistono svariate proprietà CSS da utilizzare per lo sfondo di un elemento e possono essere sfruttate per impostare lo sfondo dell'intera pagina.
L'attributo bgcolor nel body
L'attributo bgcolor assegna un colore di sfondo a un documento HTML.
Sintassi:
<body bgcolor="color">
Il valore del colore può essere un nome (come purple) o un valore esadecimale (come #af0000).
Per aggiungere un colore di sfondo a una pagina web puoi usare <body bgcolor="######">, specificando il colore da visualizzare nel documento HTML.
Ad esempio:
<html>
<head>
<title>Esempio attributo bgcolor</title>
</head>
<body bgcolor="#afafaf">
<h1>Questa pagina ha un colore di sfondo.</h1>
</body>
</html>Puoi cambiare il colore sostituendo a ###### un valore esadecimale. Per i colori semplici puoi anche usare le parole chiave, come “red” o “black”.
Tutti i principali browser supportano l'attributo bgcolor.
Nota:
- L'HTML 5 non supporta
<body bgcolor>. Usa il CSS per questo scopo. Come? Tramite il seguente codice:<body style="background-color: color">. Ovviamente, puoi anche farlo in un documento a parte invece del metodo inline. - Non usare valori RGB in
<body bgcolor>perchérgb()è soltanto per il CSS, quindi, non funzionerà in HTML.
L'attributo align in un elemento div
<div align=""> viene utilizzato per allineare il testo di un elemento div a sinistra, destra, al centro, o per giustificarlo.
Ad esempio:
<html>
<head>
<title>Div Align Attribute</title>
</head>
<body>
<div align="left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.
</div>
<div align="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.
</div>
<div align="center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.
</div>
<div align="justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.
</div>
</body>
</html>
Importante!
Quest'attributo non è supportato in HTML5, quindi occorre usare il CSS.
L'attributo align può essere usato per allineare orizzontalmente il contenuto di un div. Nell'esempio qui sotto, il testo viene centrato all'interno dell'elemento div.
<div align="center">
Questo testo sarà centrato
</div>**Questo attributo non è supportato in HTML5 e occorre usare la proprietà CSS text-align
L'attributo color in un elemento font
Questo attributo viene usato per impostare il colore del testo racchiuso in un elemento <font>.
Importante:
Quest'attributo non è supportato in HTML5. Questo articolo di freeCodeCamp specifica quale metodo CSS può essere usato in questo caso.
Nota:
Un colore può essere specificato usando un codice esadecimale o rgb invece di usare il nome del colore.
Esempio:
Nome del colore
<html>
<body>
<font color="green">Font color example using color attribute</font>
</body>
</html>
Codice esadecimale
<html>
<body>
<font color="#00FF00">Font color example using color attribute</font>
</body>
</html>
Codice RGB
<html>
<body>
<font color="rgb(0,255,0)">Font color example using color attribute</font>
</body>
</html>
L'attributo size in un elemento font
Questo attributo specifica la dimensione del carattere sia come valore numerico che relativo. I valori numerici sono compresi tra 1 e 7 con 1 come carattere più piccolo e 3 come dimensione di default. Può essere definita usando un valore relativo, come +2 o -3, che la imposta relativamente al valore dell'attributo size dell'elemento <basefont>, o rispetto a 3, il valore predefinito, nel caso non esista.
Sintassi:
<font size="number">
Esempio:
<html>
<body>
<font size="6">Questo è testo!</font>
</body>
</html>Nota: l'attributo size per <font> non è supportato in HTML5, quindi devi utilizzare il CSS.
L'attributo align in un elemento img
L'attributo align di un'immagine, specifica dove quest'ultima dovrebbe essere allineata rispetto all'elemento che la contiene.
Valori dell'attributo:
right - allinea l'immagine a destra
left - allinea l'immagine a sinistra
top - allinea l'immagine in alto
bottom - allinea l'immagine in basso
middle - allinea l'immagine al centro
Ad esempio:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Img Align Attribute</title>
</head>
<body>
<p>
Questo è un esempio. <img src="image.png" alt="Image" align="middle" /> Altro testo qui
<img src="image.png" alt="Image" width="100" />
</p>
</body>
</html>
Possiamo anche allineare a destra se lo vogliamo:
<p>Questo è un altro esempio<img src="image.png" alt="Image" align="right" /></p>
Nota che l'attributo align non è supportato in HTML5, quindi devi fare uso del CSS. Nonostante ciò, viene ancora supportato dalla maggior parte dei browser.
L'attributo width in un elemento img
L'attributo width fa riferimento alla larghezza di un'immagine e il suo valore, compreso tra virgolette, è espresso in pixel.
Ad esempio, se hai già un link a un'immagine impostato con un attributo src, puoi aggiungere l'attributo width, in questo modo:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Img Width Attribute</title>
</head>
<body>
<img src="image.png" alt="Image" width="100" />
</body>
</html>
Nel blocco di codice qui sopra, la larghezza dell'immagine nell'elemento <img> è impostata a 100 pixel (width="100").
L'attributo src in un elemento img
L'attributo src si riferisce alla sorgente dell'immagine che vuoi visualizzare. Il tag img non mostrerà nessuna immagine se non possiede un attributo src. Devi impostare la sorgente con la posizione dell'immagine, e allora, potrai visualizzare qualsiasi immagine.
Ecco un'immagine del logo di freeCodeCamp all'indirizzo https://avatars0.githubusercontent.com/u/9892522?v=4&s=400
Puoi impostarla come immagine tramite l'attributo src.
<html>
<head>
<title>Img Src Attribute Example</title>
</head>
<body>
<img src="https://avatars0.githubusercontent.com/u/9892522?v=4&s=400" />
</body>
</html>
Il codice qui sopra viene visualizzato così:
L'attributo src è supportato da tutti i browser.
Puoi anche utilizzare un'immagine memorizzata localmente.
Ad esempio, <img src="images/freeCodeCamp.jpeg> funziona se aggiungi una cartella chiamata images che al suo interno contiene freeCodeCamp.jpeg, finché la cartella images si trova nella stessa posizione del file index.html.
../files/index.html
..files/images/freeCodeCamp.jpeg
Entità HTML
Cosa sono le entità HTML?
Alcuni caratteri sono riservati in HTML. Se usi i segni minore (<) o maggiore (>) all'interno del testo, il browser potrebbe confonderli con i tag. Le entità HTML sono caratteri che vengono usati per sostituire caratteri riservati o per caratteri che non appaiono sulla tastiera.
Come si utilizzano?
Un carattere entità ha quest'aspetto:
<!-- format &[nome_entità]; -->
<!-- esempio per il segno minore (<) -->
<O
<!-- &#[numero_entità]; -->
<!-- esempio per il segno minore (<) -->
<Questa qui sotto, non è affatto una lista esaustiva, ma contiene le entità principali di cui potresti avere bisogno.
Carattere Nome Entità Numero Entità Descrizione
  Spazio
! ! Punto esclamativo
” " Virgolette
# # Cancelletto
$ $ Simbolo valuta Dollaro americano
¢ ¢ ¢ Simbolo del Cent
€ € € Simbolo valuta Euro
£ £ £ Simbolo valuta Sterlina britannica
¥ ¥ ¥ Simbolo valuta Yen
% % Percentuale
& & & E commerciale
’ ' Apostrofo
( ( Parentesi sinistra
) ) Parentesi destra
* * Asterisco
+ + Più
, , Virgola
- - Trattino
. . Punto
/ / Barra obliqua
© © © Copyright
® ® ® Marchio registrato
” " " Virgolette doppie
> > > Segno maggiore di
< < < Segno minore di
• • • Punto elencoModuli HTML
Fondamentalmente, i moduli vengono usati per raccogliere dati inseriti da un utente, che poi vengono inviati a un server per essere ulteriormente processati. Possono essere utilizzati per diversi tipi di input utente, come nome, email e altro.
I moduli contengono degli elementi di controllo racchiusi tra i tag <form></form>, come gli input, che possono essere di diversi tipi:
textemailpasswordcheckboxradiosubmitrangesearchdatetimeweekcolordatalist
Esempio di codice:
<form>
<label for="username">Username:</label>
<input type="text" name="username" id="username" />
<label for="password">Password:</label>
<input type="password" name="password" id="password" />
<input type="radio" name="gender" value="male" />Male<br />
<input type="radio" name="gender" value="female" />Female<br />
<input type="radio" name="gender" value="other" />Other
<input list="Options" />
<datalist id="Options">
<option value="Option1"></option>
<option value="Option2"></option>
<option value="Option3"></option>
</datalist>
<input type="submit" value="Submit" />
<input type="color" />
<input type="checkbox" name="correct" value="correct" />Correct
</form>
Altri elementi che un modulo può contenere sono:
textarea- è un campo di testo su più righe, usato spesso per aggiungere del testo (ad esempio commenti). La dimensione dell'elemento textarea viene definita dal numero di righe e colonne.select- insieme ai tag<option></option>crea un menu di selezione a tendina.button- questo elemento può essere usato per creare un pulsante cliccabile.
Altre informazioni sui moduli HTML
I moduli HTML sono richiesti quando vuoi raccogliere dei dati dai visitatori di un sito. Ad esempio, durante la registrazione, potresti raccogliere informazioni come nome, indirizzo email, carta di credito, ecc.
Un modulo accetterà un input da un visitatore del sito e poi lo invierà a un'applicazione back-end come CGI, uno script ASP o PHP ecc. L'applicazione back-end svolgerà l'elaborazione dei dati richiesta in base alla logica di business al suo interno.
Ci sono varie forme di elementi disponibili come campi di testo, aree di testo, menu a tendina, pulsanti di opzione, caselle di spunta.
L'elemento HTML <form> viene usato per creare un modulo HTML e ha la seguente sintassi:
<form action="Script URL" method="GET|POST">form elements like input, textarea etc.</form>
Se method non viene definito, sarà GET di default.
form può anche avere un attributo target che specifica dove verrà aperto il link: in una finestra del browser, in un riquadro o nella finestra corrente.
L'attributo action definisce l'azione da svolgere una volta che il modulo viene inviato. Normalmente, quando l'utente clicca sul pulsante di invio, i dati del modulo vengono inviati a una pagina web localizzata a "Script URL". Se l'attributo action viene omesso, l'impostazione predefinita rimanda alla pagina corrente.
Elementi semantici HTML5
Gli elementi semantici descrivono chiaramente il loro significato. Elementi come <header>, <footer> e <article> vengono considerati semantici perché descrivono accuratamente lo scopo dell'elemento e il tipo di contenuto al loro interno.
Un po' di storia
L'HTML è stato originariamente creato come linguaggio di markup per descrivere documenti ai primordi di internet. Con lo sviluppo di internet e il suo utilizzo da parte di sempre più persone, ha avuto bisogno di cambiamenti. Mentre internet era originariamente pensato per la condivisione di documenti di carattere scientifico, adesso le persone lo usano anche per molti scopi diversi. Molto velocemente, le persone hanno iniziato a desiderare di migliorare l'aspetto del web, che inizialmente non è stato progettato per questo. Per questo motivo, i programmatori hanno iniziato a usare diversi trucchetti per agire sul layout delle pagine web in modi diversi. Ad esempio, usando <table></table> per posizionare elementi sulla pagina, invece che mostrare delle informazioni in una tabella. Con l'evoluzione del design del layout, i programmatori hanno iniziato a usare tag generici "non semantici" come <div>, attribuendo loro attributi class o id per descriverne lo scopo. Ad esempio, scrivendo <div class="header"> invece di <header>. Visto che l'HTML5 è relativamente nuovo, questo uso degli elementi non semantici è attualmente ancora molto comune.
Lista dei nuovi elementi semantici
Gli elementi semantici aggiunti in HTML5 sono:
<article><aside><details><figcaption><figure><footer><header><main><mark><nav><section><summary><time>
Elementi come <header>, <nav>, <section>, <article>, <aside> e <footer> agiscono più o meno come elementi <div>. Raggruppano in sezioni altri elementi all'interno della pagina. Però, mentre un <div> può contenere qualsiasi tipo di informazione, è semplice identificare il contenuto di un elemento semantico come <header>.
Un esempio di layout con elementi semantici da w3schools
Vantaggi degli elementi semantici
Analizziamo i vantaggi dell'uso degli elementi semantici osservando due blocchi di codice HTML. Il primo blocco contiene elementi HTML semantici:
<header></header>
<section>
<article>
<figure>
<img />
<figcaption></figcaption>
</figure>
</article>
</section>
<footer></footer>
Mentre il secondo utilizza elementi non semantici:
<div id="header"></div>
<div class="section">
<div class="article">
<div class="figure">
<img />
<div class="figcaption"></div>
</div>
</div>
</div>
<div id="footer"></div>
Il primo risulta molto più leggibile. Questa è la prima cosa che puoi notare guardando il blocco con gli elementi semantici. È un semplice esempio, ma come programmatore, potresti aver bisogno di leggere centinaia o migliaia di righe di codice e un codice più semplice da leggere e capire, semplifica notevolmente il lavoro.
Inoltre, è più accessibile. Non sei il solo a trovare gli elementi semantici più facili da comprendere, infatti, anche i motori di ricerca e le tecnologie assistive (come lettori di schermo per utenti ipovedenti) sono in grado di avere una migliore comprensione del contesto e del contenuto dei siti web, fornendo una migliore esperienza per gli utenti.
Nel complesso, gli elementi semantici portano a un codice più coerente. Un programmatore può realizzare un'intestazione con elementi non semantici con <div class="header">, <div id="header">, <div class="head"> o semplicemente con <div>. Ci sono moltissimi modi di creare un'intestazione e la scelta dipende fondamentalmente dalla preferenza personale del programmatore. Un elemento semantico standard, rende tutto più semplice.
Dall'ottobre 2014, l'HTML4 è stato aggiornato a HTML5 e adesso contiene alcuni nuovi elementi semantici. In molti sono confusi dal gran numero di elementi diversi che non sembrano mostrare cambiamenti consistenti.
<section> e <article>
"Qual è la differenza?", ti starai chiedendo. Entrambi questi elementi vengono usati per dividere del contenuto in sezioni e possono essere usati in modo intercambiabile, a seconda della situazione. L'HTML4 offriva soltanto un tipo di elemento contenitore, ovvero il <div>. Nonostante sia ancora utilizzato, l'HTML5 fornisce gli elementi <section> e <article> che possono essere usati per sostituire un <div>.
Gli elementi <section> e <article> sono concettualmente simili e intercambiabili. Per decidere quale dei due utilizzare, considera che:
- Un
<article>è pensato per essere distribuibile indipendentemente o riutilizzabile. - Un
<section>consiste in raggruppamento tematico di contenuto.
<section>
<p>Top Stories</p>
<section>
<p>News</p>
<article>Story 1</article>
<article>Story 2</article>
<article>Story 3</article>
</section>
<section>
<p>Sport</p>
<article>Story 1</article>
<article>Story 2</article>
<article>Story 3</article>
</section>
</section>
<header> e <hgroup>
L'elemento <header> è generalmente situato nella parte superiore di un documento, di una sezione o di un articolo e, di solito, contiene l'intestazione principale e alcuni strumenti di navigazione e ricerca.
<header>
<h1>Company A</h1>
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact us</a></li>
</ul>
<form target="/search">
<input name="q" type="search" />
<input type="submit" />
</form>
</header>
L'elemento <hgroup> dovrebbe essere usato se vuoi avere un'intestazione principale con una o più sotto-intestazioni.
<hgroup>
<h1>Titolo 1</h1>
<h2>Sottotitolo 1</h2>
<h2>Sottotitolo 2</h2>
</hgroup>
Ricorda che l'elemento <header> può avere qualsiasi contenuto, ma l'elemento <hgroup> può contenere soltanto altre intestazioni, cioè da <h1> a <h6>, <hgroup> incluso.
<aside>
L'elemento <aside> è pensato per del contenuto che non fa parte del flusso del testo in cui appare, ma vi è correlato in qualche modo. Pensa ad <aside> come a una barra laterale per il contenuto principale della pagina.
<aside>
<p>
Questa è una barra laterale, ad esempio, usata per definire un termine o per un breve riferimento storico.
</p>
</aside>
Prima dell'HTML5, i menu venivano creati con elementi <ul> e <li>. Adesso, insieme a questi, possiamo separare gli oggetti menu con un <nav>, per navigare tra le pagine. Puoi avere un qualsiasi numero di elementi <nav> all'interno di una pagina. Ad esempio, è comune avere una barra di navigazione globale nella parte superiore (in un <header>) e una barra laterale di navigazione locale (in un elemento <aside>).
<nav>
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact us</a></li>
</ul>
</nav>
<footer>
Se c'è un <header>, deve esserci anche un <footer>. Il <footer> si trova generalmente nella parte inferiore di un documento, una sezione o un articolo. Proprio come per <header>, di solito, il suo contenuto è costituito da meta-informazioni come dettagli sull'autore, informazioni legali e/o link a informazioni inerenti. È possibile anche aggiungere elementi <section> all'interno del <footer>.
<footer>©Company A</footer><small>
L'elemento <small> appare spesso all'interno degli elementi <footer> o <aside> contenenti informazioni legati al copyright o note legali e altre postille. Comunque, non è pensato per rendere il testo più piccolo. Descrive soltanto il suo contenuto, senza influenzarne il layout.
<footer><small>©Company A</small> Date</footer><time>
L'elemento <time> permette di inserire una data ISO 8601 non ambigua in una versione facilmente leggibile da una persona.
<time datetime="2017-10-31T11:21:00+02:00">Tuesday, 31 October 2017</time>Perché preoccuparsi di <time>? Mentre le persone possono leggere l'ora e risalire al valore corretto attraverso il contesto, i computer leggono le date in formato ISO 8601, risalendo alla data, all'ora e al fuso orario.
<figure> e <figcaption>
L'elemento <figure> viene usato per racchiudere immagini e <figcaption> per assegnar loro una didascalia.
<figure>
<img src="https://en.wikipedia.org/wiki/File:Shadow_of_Mordor_cover_art.jpg" alt="Shadow of Mordor" />
<figcaption>Cover art for Middle-earth: Shadow of Mordor</figcaption>
</figure>Audio in HTML5
Prima dell'HTML5, i file audio dovevano essere riprodotti in un browser usando un plugin come Adobe Flash.
Il prossimo blocco di codice, aggiunge un file audio denominato tutorial.ogg o tutorial.mp3.
Esempio 1
<audio controls>
<source src="tutorial.ogg" type="audio/ogg" />
<source src="tutorial.mp3" type="audio/mpeg" />
Il tuo browser non supporta elementi audio.
</audio>
Esempio 2
<audio src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" controls loop autoplay></audio>
L'attributo controls include controlli audio come play, pausa e volume. Se non usi quest'attributo, i controlli non verranno mostrati.
L'elemento <source> ti permette di indicare un file audio alternativo. Il browser utilizzerà il primo formato riconosciuto. Il testo contenuto tra i tag <audio> e </audio> può essere mostrato nei browser che non supportano l'elemento HTML5 <audio>.
L'attributo autoplay riprodurrà automaticamente il tuo file audio in background. Far scegliere agli utenti di riprodurre l'audio è considerato una pratica migliore.
L'attributo preload indica al browser cosa fare se il lettore non è impostato su autoplay.
Se menzionato, l'attributo loop riprodurrà l'audio in ciclo continuo.
Dato che questo è HTML5, alcuni browser non lo supportano. Puoi verificare quali su https://caniuse.com/#search=audio
Video in HTML5
Prima dell'HTML5, per riprodurre un video in una pagina web, era necessario usare un plugin come Adobe Flash Player. Con l'introduzione dell'HTML5, puoi inserirlo direttamente della pagina web stessa.
Per incorporare un file video in una pagina web, aggiungi questo blocco di codice cambiando l'attributo src del file video.
<video controls>
<source src="tutorial.ogg" type="video /ogg" />
<source src="tutorial.mp4" type="video /mpeg" />
Il tuo browser non supporta gli elementi video. Per favore, aggiornalo alla versione più recente.
</video>
L'attributo controls include i controlli video come play, pausa e volume.
Questa funzione è supportata da tutti browser moderni/aggiornati. Tuttavia, non tutti supportano lo stesso formato video. La mia raccomandazione per un ampio range di compatibilità è il formato MP4, dato che è quello più riconosciuto. Ci sono anche altri due formati (WebM and Ogg) supportati da Chrome, Firefox e Opera.
L'elemento <source> ti permette di indicare un file video alternativo. Il browser sceglierà il primo formato valido. In HTML5, i 3 formati supportati sono: MP4, WebM e Ogg.
Il testo tra i tag verrà mostrato nel caso in cui il browser non supporti il formato del video.
autoplay
autoplay può essere impostato su true (se aggiunto nel tag) o false (se non viene aggiunto). Se impostato su true, il video verrà riprodotto non appena ne avviene il caricamento. Molte persone trovano che l'autoplay per i video sia fastidioso, quindi usa questa opzione con moderazione. Nota anche che alcuni browser mobile, come Safari per iOS, ignorano questo attributo.
<video autoplay>
<source src="video.mp4" type="video/mp4" />
</video>
poster
L'attributo poster corrisponde all'immagine che viene mostrata sul video finché l'utente non vi clicca sopra per riprodurlo.
<video poster="poster.png">
<source src="video.mp4" type="video/mp4" />
</video>
controls
L'attributo controls può essere impostato su true (se aggiunto al tag) o false (se non presente nel tag) e gestisce i controlli come i pulsanti play/pausa o il volume.
<video controls>
<source src="video.mp4" type="video/mp4" />
</video>
Oltre a quelli menzionati, esistono molti altri attributi opzionali da poter aggiungere per personalizzare il lettore video nella pagina.
Archiviazione web in HTML5
L'archiviazione web permette ad applicazioni web di memorizzare fino a 5 MB di informazioni nel browser per origine (dominio e protocollo).
Tipi di archiviazione web
Esistono due oggetti per memorizzare dati sul client:
window.localStorage: archivia dati senza scadenza e li mantiene finché non vengono rimossi.
// Memorizza
localStorage.setItem("foo", "bar");
// Ottieni
localStorage.getItem("foo"); //restituisce "bar"window.sessionStorage: archivia dati per una sessione e vengono persi chiudendo il browser o la scheda del browser.
// Memorizza
sessionStorage.setItem("foo", "bar");
// Ottieni
sessionStorage.getItem("foo"); //restituisce "bar"Dato che l'implementazione attuale supporta soltanto una mappatura stringa-stringa, per altre strutture di dati avrai bisogno di effettuare una conversione in stringhe.
Per questo puoi usare JSON.stringify() e JSON.parse().
Per un dato JSON:
var jsonObject = { 'one': 1, 'two': 2, 'three': 3 };Convertiamo prima l'oggetto JSON in una stringa e lo salviamo nello storage locale:
localStorage.setItem('jsonObjectString', JSON.stringify(jsonObject));E per ottenere l'oggetto JSON dalla stringa archiviata:
var jsonObject = JSON.parse(localStorage.getItem('jsonObjectString'));Link mailto
Un link mailto è un tipo di hyperlink (<a href=""></a>) con parametri speciali che ti permettono di specificare destinatari aggiuntivi, una riga di oggetto e/o un corpo di testo.
La sintassi di base con un destinatario è:
<a href="mailto:friend@something.com">Testo</a>Aggiungere l'oggetto all'email:
Se vuoi aggiungere un oggetto specifico all'email, fai attenzione ad aggiungere %20 o + ovunque ci sia uno spazio nella riga dell'oggetto. Un modo semplice per assicurarti di avere una formattazione corretta è fare uso di un Decoder / Encoder URL.
Aggiungere il corpo del messaggio:
Analogamente, puoi aggiungere del testo specifico nel corpo dell'email: anche in questo caso gli spazi devono essere sostituiti da %20 o +. Dopo il parametro oggetto, ogni altro parametro aggiuntivo deve essere preceduto da &.
Ipotizza di voler inviare un'email a un amico per comunicargli i tuoi progressi su Free Code Camp:
Address: vuoto
Subject: Grandi notizie
Body: Sto diventando un programmatore
Il tuo link html:
<a href="mailto:?subject=Grandi%20notizie&body=Sto%20diventando%20un%20programmatore">Invia email!</a>Qui abbiamo lasciato vuoto mailto (mailto:?). Così facendo, si aprirà il client email dell'utente, che dovrà aggiungere l'indirizzo del destinatario.
Aggiungere più destinatari:
Allo stesso modo, puoi aggiungere parametri in Cc e Ccn. Separa ogni indirizzo con una virgola, e ricorda che i parametri devono essere preceduti da &.
<a href="mailto:firstfriend@something.com?subject=Grandi%20notizie&cc=secondfriend@something.com,thirdfriend@something.com&bcc=fourthfriend@something.com">Invia email!</a>