Lezioni HTML

<h1>HTML <span>Tutorial</span></h1><h2>Cosa puoi fare con l'HTML</h2><h2>Cosa
tratta questo tutorial</h2>

<div class="tip-box">
<p><strong>Suggerimento:</strong> il nostro tutorial HTML ti aiuterà ad
apprendere i fondamenti dell'ultimo linguaggio HTML5, dagli argomenti di base a
quelli avanzati passo dopo passo. Se sei un principiante, inizia con la sezione
di base e procedi gradualmente imparando un po' ogni giorno.</p>
</div>
<p><strong>Suggerimento:</strong> ogni capitolo di questo tutorial contiene
molti esempi reali che puoi provare e testare utilizzando un editor online.
Questi esempi ti aiuteranno a comprendere meglio il concetto o l'argomento.
Contiene anche soluzioni intelligenti, suggerimenti utili e note importanti.</p>
</div>
<div class="note-box">
<p><strong>Nota:</strong> l'HTML come descritto in precedenza è un linguaggio di
markup non un linguaggio di programmazione, come Java, Ruby, PHP, ecc. Per
visualizzare le pagine HTML è necessario un browser web. I browser Web non
visualizzano i tag HTML, ma utilizzano i tag per interpretare il contenuto delle
pagine Web.</p>
</div>
<li>Puoi pubblicare documenti online con testo, immagini, elenchi, tabelle,
ecc.</li><li>Puoi accedere a risorse Web come immagini, video o altri documenti
HTML tramite collegamenti ipertestuali.</li><li> Puoi creare moduli per
raccogliere gli input dell'utente come nome, indirizzo e-mail, commenti,
ecc.</li><li>Puoi includere immagini, video, clip audio, filmati flash,
applicazioni e altri documenti HTML direttamente all'interno di un documento
HTML .</li><li>Puoi creare una versione offline del tuo sito web che funzioni
senza Internet.</li><li>Puoi memorizzare i dati nel browser web dell'utente e
accedervi in seguito.</li><li>Tu può trovare la posizione corrente del
visitatore del tuo sito web.</li>
<p class="summary">HTML è il principale linguaggio di markup per descrivere la
struttura delle pagine web.</p><p>HTML sta per HyperText Markup Language. L'HTML
è l'elemento costitutivo di base del World Wide Web.</p><p>L'ipertesto è un
testo visualizzato su un computer o altro dispositivo elettronico con
riferimenti ad altro testo a cui l'utente può accedere immediatamente,
solitamente con un clic del mouse o premendo un tasto. </p><p>Oltre al testo,
l'ipertesto può contenere tabelle, elenchi, moduli, immagini e altri elementi di
presentazione. È un formato flessibile e facile da usare per condividere
informazioni su Internet.</p><p>I linguaggi di markup utilizzano insiemi di tag
di markup per caratterizzare gli elementi di testo all'interno di un documento,
che forniscono istruzioni ai browser Web su come dovrebbe apparire il
documento.</p><p>L'HTML è stato originariamente sviluppato da Tim Berners-Lee
nel 1990. È anche conosciuto come il padre del web. Nel 1996, il World Wide Web
Consortium (W3C) divenne l'autorità per mantenere le specifiche HTML. HTML è
diventato anche uno standard internazionale (<span title="International
Organization for Standardization">ISO</span>) nel 2000. HTML5 è l'ultima
versione di HTML. L'HTML5 offre un approccio più rapido e solido allo sviluppo
web.</p><p>Ci sono molte altre cose che puoi fare con l'HTML.</p><p>L'elenco non
finisce qui, ci sono molte altre cose interessanti che puoi fare con l'HTML.
Imparerai a conoscerli tutti in dettaglio nei prossimi capitoli.</p><p>Questa
serie di tutorial HTML copre tutti i fondamenti dell'HTML, inclusa l'idea di
elementi e attributi, il modo di formattare il testo usando i tag HTML, i metodi
di aggiunta delle informazioni di stile al documento, tecnica di inserimento di
immagini e tabelle, processo di creazione di elenchi e moduli, nonché metodo di
inclusione di altri documenti HTML all'interno del documento corrente e così
via.</p><p>Una volta che sei familiarità con le basi, passerai al livello
successivo che spiega il concetto di doctype, i metodi per creare i layout delle
pagine web, l'importanza di aggiungere meta informazioni alle pagine web, il
modo di aggiungere script, le tecniche per mostrare i caratteri speciali,
l'anatomia di un URL e altro ancora.</p><p>Infine, esplorerai alcune
funzionalità avanzate introdotte in HTML5 come nuovi tipi di input, disegno di
grafica sulla pagina web, inclusi audio e video nel documento, memorizzazione di
dati sul client -side utilizzando l'archiviazione Web, la memorizzazione nella
cache dei file, l'esecuzione eseguire il lavoro in background con il web worker,
nonché ottenere le coordinate geografiche dell'utente, creare un'applicazione di
trascinamento della selezione e così via.</p>
<h1>HTML <span>Inizia</span></h1><h2>Introduzione</h2><h2>Creazione del tuo

primo documento HTML</h2><h2>Spiegazione del codice</h2><h2 >Tag ed elementi
HTML</h2>
<p><strong>Suggerimento:</strong> ti consigliamo di utilizzare Blocco note (su
Windows), TextEdit (su Mac) o qualche altro semplice editor di testo per
eseguire questa operazione; non usare Word o WordPad! Una volta compresi i
principi di base, puoi passare a strumenti più avanzati come Adobe
Dreamweaver.</p>
</div>
<p><strong>Suggerimento:</strong> i tag <code><html></code>,
<code><head></code> e <code><body></code> costituiscono lo scheletro
di base di ogni pagina web. I contenuti all'interno di <code><head></code>
e <code></head></code> sono invisibili agli utenti con un'eccezione: il
testo tra <code><title></code> e <code></title></code> tag che
appaiono come titolo in una scheda del browser.</p>
</div>
<p><strong>Nota:</strong> è importante specificare l'estensione
<code>.html</code> — alcuni editor di testo, come Blocco note, la salveranno
automaticamente come <code>.txt</ code> altrimenti.</p>
</div>
<p><strong>Nota:</strong> una dichiarazione DOCTYPE appare nella parte superiore
di una pagina web prima di tutti gli altri elementi; tuttavia la stessa
dichiarazione doctype non è un tag HTML. Ogni documento HTML richiede una
dichiarazione del tipo di documento per assicurare che le tue pagine vengano
visualizzate correttamente.</p>
</div>
<li>La prima riga <code><!DOCTYPE html></code> è la <a href="html-
doctypes.php">dichiarazione del tipo di documento</a>. Indica al browser Web che
questo documento è un documento HTML5. Non fa distinzione tra maiuscole e
minuscole.</li><li>L'elemento <code><head></code> è un contenitore per i
tag che forniscono informazioni sul documento, ad esempio <code><title><
Il tag /code> definisce il titolo del documento.</li><li>L'elemento
<code><body></code> contiene il contenuto effettivo del documento
(paragrafi, collegamenti, immagini, tabelle e così via) che viene visualizzato
nel browser Web e visualizzato all'utente.</li>
<pre class="syntax-highlighter line-numbers"><code class="language-markup"><!
DOCTYPE html>
<html lang="it">
<testa>
<title>Un semplice documento HTML</title>
</testa>
<corpo>
<p>Ciao mondo!<p>
</corpo>
</html></code></pre><pre class="syntax-highlighter line-numbers"><code
class="language-markup"><p>Questo è un paragrafo.</p>

<p>
Questo è <b>un altro</b> paragrafo.
</p></code></pre><p class="summary">Un file HTML è semplicemente un file
di testo salvato con un'estensione .html o .htm.</p><p>In questo tutorial
impareranno quanto è facile creare un documento HTML o una pagina web. Per
iniziare a scrivere codice HTML ti servono solo due cose: un semplice editor di
testo e un browser web.</p><p class="space">Bene, iniziamo con la creazione
della tua prima pagina HTML.</p><p class="break">Esaminiamo i seguenti passaggi.
Alla fine di questo tutorial, avrai creato un file HTML che visualizza il
messaggio "Ciao mondo" nel tuo browser web.</p><p>Apri l'editor di testo normale
del tuo computer e crea un nuovo file.</p> <p>Inizia con una finestra vuota e
digita il seguente codice:</p><p>Ora salva il file sul desktop come
"myfirstpage.html ".</p><p class="space">Per aprire il file in un browser.
Passare al file quindi fare doppio clic su di esso. Si aprirà nel browser Web
predefinito. In caso contrario, apri il browser e trascina il file su di
esso.</p><p>Potresti pensare a cosa fosse quel codice. Bene,
scopriamolo.</p><p>Nei prossimi capitoli imparerai a conoscere in dettaglio i
diversi elementi HTML. Per ora, concentrati solo sulla struttura di base del
documento HTML.</p><p>L'HTML è scritto sotto forma di elementi HTML costituiti
da tag di markup. Questi tag di markup sono la caratteristica fondamentale
dell'HTML. Ogni tag di markup è composto da una parola chiave, racchiusa tra
parentesi angolari, come <code><html></code>, <code><head></code>,
<code><body></code >, <code><title></code>, <code><p></code> e
così via.</p><p>I tag HTML normalmente sono disponibili in coppia come
<code><html&gt ;</code> e <code></html></code>. Il primo tag di una
coppia è spesso chiamato tag di apertura (o tag iniziale) e il secondo tag è
chiamato tag di chiusura (o tag finale).</p><p>Un tag di apertura e un tag di
chiusura sono identici, tranne una barra (<code>/</code>) dopo la parentesi
angolare di apertura del tag di chiusura, per indicare al browser che il comando
è stato completato.</p><p>Tra i tag di inizio e di fine puoi posizionare
contenuti appropriati. Ad esempio, un paragrafo, che è rappresentato
dall'elemento <code>p</code>, dovrebbe essere scritto come:</p><p>Imparerai i
vari <a href="html-elements.php" >Elementi HTML</a> nel prossimo capitolo.</p>
<h1>HTML <span>Elementi</span></h1><h2>Sintassi degli elementi HTML</h2><h2>Tag

HTML Vs Elementi</h2><h2>Insensibilità tra maiuscole e minuscole nei tag e negli
attributi HTML</h2 ><h2 id="empty-elements">Elementi HTML
vuoti</h2><h2>Nidificazione di elementi HTML</h2><h2>Scrittura di commenti in
HTML</h2><h2>Tipi di elementi HTML</h2>
<p><strong>Suggerimento:</strong> ti consigliamo di utilizzare lettere minuscole
per i tag e di attribuire nomi in HTML, poiché in questo modo puoi rendere il
tuo documento più conforme per futuri aggiornamenti.</p>
</div>
<p><strong>Suggerimento:</strong> l'inserimento di un elemento all'interno di un
altro si chiama annidamento. Un elemento nidificato, chiamato anche elemento
figlio, può essere anche un elemento genitore se altri elementi sono nidificati
al suo interno.</p>
</div>
<p><strong>Nota:</strong> tutti gli elementi non richiedono la presenza del tag
di chiusura o di chiusura. Questi sono indicati come <em>elementi vuoti</em>,
<em>elementi a chiusura automatica</em> o <em>elementi vuoti</em>.</p>
</div>
<p><strong>Nota:</strong> in HTML, un elemento di chiusura automatica è scritto
semplicemente come <code><a href="../html-reference/html-br-tag.php"><
br></a></code>. In XHTML, un elemento di chiusura automatica richiede uno
spazio e una barra finale, come <code><br /></code>.</p>
</div>
<p><strong>Nota:</strong> gli elementi a livello di blocco non devono essere
inseriti all'interno di elementi a livello di riga. Ad esempio, l'elemento
<code><p></code> non deve essere inserito all'interno dell'elemento
<code><b></code>.</p>
</div>
<pre class="syntax-highlighter line-numbers"><code class="language-
markup"><p>Questo è un paragrafo.</p>
<P>Anche questo è un paragrafo valido.</P></code></pre><pre
class="syntax-highlighter line-numbers"><code class="language-
markup"><p&gt ;Questo paragrafo contiene <br> un'interruzione di
riga.</p>
<img src="images/sky.jpg" alt="Cielo nuvoloso">
<input type="text" name="username"></code></pre><pre class="syntax-
highlighter line-numbers"><code class="language-markup"><p> Ecco alcuni
<b>grassetto</b> testo.</p>
<p>Ecco alcuni <em>enfatizzati</em> testo.</p>
<p>Ecco alcuni <mark>evidenziati</mark>
text.</p></code></pre><pre class="syntax-highlighter line-numbers"><code
class="language-markup"><p><strong>Questi tag sono nidificati
correttamente.</strong></p>
<p><strong>Questi tag non sono nidificati
correttamente.</p></strong></code></pre><pre class="syntax-
highlighter line-numbers"><code class= "language-markup">

<p>Questa è una normale porzione di testo.</p></code></pre><pre
class="syntax-highlighter line-numbers"><code class="language-markup">< !--
Nascondere questa immagine per il test
<img src="images/smiley.png" alt="Smiley">
--></code></pre><p class="summary">In questo tutorial imparerai i tag e gli
elementi HTML.</p><p>Un elemento HTML è un singolo componente di un documento
HTML . Rappresenta la semantica o il significato. Ad esempio, l'elemento
<code>title</code> rappresenta il titolo del documento.</p><p class="space">La
maggior parte degli elementi HTML sono scritti con un <em>tag iniziale</em> (o
tag di apertura) e un <em>tag di chiusura</em> (o tag di chiusura), con
contenuto intermedio. Gli elementi possono anche contenere attributi che ne
definiscono le proprietà aggiuntive. Ad esempio, un paragrafo, che è
rappresentato dall'elemento <code>p</code>, verrebbe scritto
come:</p><p>Impareremo gli attributi HTML negli <a href="html-
attributes .php">capitolo successivo</a>.</p><p>Tecnicamente, un elemento HTML è
la raccolta del tag iniziale, i suoi attributi, un tag finale e tutto il resto.
D'altra parte, un tag HTML (apertura o chiusura) viene utilizzato per
contrassegnare l'inizio o la fine di un elemento, come puoi vedere
nell'illustrazione sopra.</p><p>Tuttavia, nell'uso comune i termini elemento
HTML e tag HTML sono intercambiabili cioè un tag è un elemento è un tag. Per
semplicità di questo sito web, i termini "tag" ed "elemento" sono usati per
indicare la stessa cosa, in quanto definiranno qualcosa sulla tua pagina
web.</p><p>In HTML, i nomi di tag e attributi non sono con distinzione tra
maiuscole e minuscole (ma la maggior parte dei valori degli attributi fa
distinzione tra maiuscole e minuscole). Significa il tag <code><P></code>,
e il tag <code><p></code> definisce la stessa cosa in HTML che è un
paragrafo.</p><p>Ma in <a href="../xhtml-tutorial.php">XHTML</a> fanno
distinzione tra maiuscole e minuscole e il tag <code><P></code> è diverso
dal tag <code><p&gt ;</code>.</p><p>Gli elementi vuoti (chiamati anche
elementi a chiusura automatica o elementi void) non sono tag contenitore — ciò
significa che non puoi scrivere <code><hr><i>alcuni contenuti<
/i></hr></code> o <code><br><i>alcuni
contenuti</i></br></code>.</p><p>Un tipico esempio di un elemento vuoto, è
l'elemento <code><br></code>, che rappresenta un'interruzione di riga.
Alcuni altri elementi vuoti comuni sono <code><img></code>,
<code><input></code>, <code><link></code>, <code><meta><
/code>, <code><hr></code>, ecc.</p><p>La maggior parte degli elementi HTML
può contenere un numero qualsiasi di ulteriori elementi (tranne gli <a
href="#empty-elements">elementi vuoti </a>), che sono, a loro volta, costituiti
da tag, attributi e contenuto o altri elementi.</p><p>L'esempio seguente mostra
alcuni elementi nidificati all'interno del <code><p></ code>.</p><p>I tag
HTML devono essere nidificati nell'ordine corretto. Devono essere chiusi
nell'ordine inverso rispetto a come sono stati definiti, il che significa che
l'ultimo tag aperto deve essere chiuso per primo.</p><p>I commenti vengono
solitamente aggiunti allo scopo di rendere più facile la comprensione del codice
sorgente. Potrebbe aiutare altri sviluppatori (o te in futuro quando modifichi
il codice sorgente) a capire cosa stavi cercando di fare con l'HTML. I commenti
non vengono visualizzati nel browser.</p><p>Un commento HTML inizia con
<code></code>, come mostrato
nell'esempio seguente:</p><p>Puoi anche commentare parte del tuo codice HTML a
scopo di debug, come mostrato qui:</p><p>Gli elementi possono essere inseriti in
due gruppi distinti: <em>< a href="../css-tutorial/css-visual-
formatting.php#block-level">livello di blocco</a></em> e <em><a href="../css-
tutorial/ elementi css-visual-formatting.php#inline-level">livello
inline</a></em>. I primi costituiscono la struttura del documento, mentre i
secondi rivestono il contenuto di un blocco.</p><p>Inoltre, un elemento di
blocco occupa il 100% della larghezza disponibile ed è reso con un'interruzione
di riga prima e dopo. Invece, un elemento in linea occuperà solo lo spazio di
cui ha bisogno.</p><p>Gli elementi a livello di blocco più comunemente usati
sono <code><div></code>, <code><p&gt ;</code>, da
<code><h1></code> a <code><h6></code>, <code><form></code>,
<code><ol>< /code>, <code><ul></code>, <code><li></code> e
così via. Invece, gli elementi a livello di riga comunemente usati sono
<code><img></code>, <code><a></code>, <code><span></code>,
<code>&lt ;strong></code>, <code><b></code>, <code><em></code>,
<code><i></code>, <code><code&gt ;</code>, <code><input></code>,
<code><button></code>, ecc.</p><p>Scoprirai questi elementi in dettaglio
nei prossimi capitoli .</p>
<h1>HTML <span>Attributi</span></h1><h2>Cosa sono gli

attributi</h2><h2>Attributi generici</h2>
<p><strong>Suggerimento:</strong> è possibile utilizzare sia virgolette singole
che doppie per citare i valori degli attributi. Tuttavia, le virgolette doppie
sono le più comuni. In situazioni in cui il valore dell'attributo stesso
contiene virgolette doppie, è necessario racchiudere il valore tra virgolette
singole, ad esempio <code>value='John "Williams" Jr.'</code></p>
</div>
<p><strong>Suggerimento:</strong> poiché una <code>class</code> può essere
applicata a più elementi, tutte le regole di stile scritte in quella
<code>class</code> verranno applicate a tutti gli elementi che hanno quella
<code>class</code>.</p>
</div>
<p><strong>Suggerimento:</strong> il valore dell'attributo <code>title</code>
(ovvero il testo del titolo) viene visualizzato come suggerimento dai browser
Web quando l'utente posiziona il cursore del mouse sull'elemento.< /p>
</div>
<p><strong>Nota:</strong> i valori degli attributi generalmente non fanno
distinzione tra maiuscole e minuscole, ad eccezione di alcuni valori degli
attributi, come gli attributi <code>id</code> e <code>class</code>. Tuttavia, il
World Wide Web Consortium (W3C) raccomanda lettere minuscole per i valori degli
attributi nelle loro specifiche.</p>
</div>
<p><strong>Nota:</strong> il <code>id</code> di un elemento deve essere univoco
all'interno di un singolo documento. Due elementi nello stesso documento non
possono essere denominati con lo stesso <code>id</code> e ogni elemento può
avere un solo <code>id</code>.</p>
</div>

markup"><img src="images/smiley.png" width="30" height="30" alt="Smiley" >
<a href="https://www.google.com/" title="Motore di
ricerca">Google</a>
<abbr title="Hyper Text Markup Language">HTML</abbr>
<input type="text" value="John Doe"></code></pre><pre class="syntax-
highlighter line-numbers"><code class="language-markup"><input type="email"
richiesto>
<input type="submit" value="Invia" disabilitato>
<input type="casella di controllo" selezionata>
<input type="text" value="Read only text" readonly></code></pre><pre
class="syntax-highlighter line-numbers"><code class="language-markup">< input
type="text" id="firstName">
<div id="container">Alcuni contenuti</div>
<p id="infoText">Questo è un paragrafo.</p></code></pre><pre
class="syntax-highlighter line-numbers"><code class="language-markup" ><input
type="text" class="highlight">
<div class="box highlight">Alcuni contenuti</div>
<p class="highlight">Questo è un paragrafo.</p></code></pre><pre
class="syntax-highlighter line-numbers"><code class="language-markup" ><abbr
title="World Wide Web Consortium">W3C</abbr>
<a href="images/kites.jpg" title="Fai clic per visualizzare un'immagine più
grande">
<img src="images/kites-thumb.jpg" alt="kites">
</a></code></pre><pre class="syntax-highlighter line-numbers"><code
class="language-markup"><p style="color: blue;">Questo è un
paragrafo.</p>
<img src="images/sky.jpg" style="larghezza: 300px;" alt="Cielo nuvoloso">
<div style="border: 1px solid red;">Alcuni
contenuti</div></code></pre><p class="summary">In questo tutorial
imparerai come usare gli attributi per dare più significato ai tag
HTML.</p><p>Gli attributi definiscono caratteristiche o proprietà aggiuntive
dell'elemento come la larghezza e l'altezza di un'immagine. Gli attributi sono
sempre specificati nel tag iniziale (o tag di apertura) e di solito sono
costituiti da coppie nome/valore come <code>name="value"</code>. I valori degli
attributi devono essere sempre racchiusi tra virgolette.</p><p>Inoltre, alcuni
attributi sono richiesti per determinati elementi. Ad esempio, un tag
<code><img></code> deve contenere gli attributi <code>src</code> e
<code>alt</code>. Diamo un'occhiata ad alcuni esempi dell'utilizzo degli
attributi:</p><p>Nell'esempio precedente <code>src</code> all'interno del tag
<code><img></code> c'è un attributo e un'immagine percorso fornito è il
suo valore. Allo stesso modo <code>href</code> all'interno del tag
<code><a></code> è un attributo e il link fornito è il suo valore, e così
via.</p><p>Ci sono diversi attributi in HTML5 che non sono costituiti da coppie
nome/valore ma sono costituiti solo da nome. Tali attributi sono chiamati
attributi booleani. Esempi di alcuni attributi booleani comunemente usati sono
<code>checked</code>, <code>disabled</code>, <code>readonly</code>,
<code>required</code>, ecc.</p> <p>Scoprirai tutti questi elementi in dettaglio
nei prossimi capitoli.</p><p>Ci sono alcuni attributi, come <code>id</code>,
<code>title</code>, <code >class</code>, <code>style</code>, ecc. che puoi
utilizzare sulla maggior parte degli elementi HTML. La sezione seguente ne
descrive l'utilizzo.</p><p>L'attributo <code>id</code> viene utilizzato per
assegnare un nome univoco o un identificatore a un elemento all'interno di un
documento. Ciò semplifica la selezione dell'elemento utilizzando CSS o
JavaScript.</p><p>Come l'attributo <code>id</code>, anche l'attributo
<code>class</code> viene utilizzato per identificare gli elementi. Ma a
differenza di <code>id</code>, l'attributo <code>class</code> non deve essere
univoco nel documento. Ciò significa che puoi applicare la stessa classe a più
elementi in un documento, come mostrato nell'esempio seguente:</p><p>L'attributo
<code>title</code> to viene utilizzato per fornire un testo di avviso su un
elemento o il suo contenuto. Prova il seguente esempio per capire come funziona
effettivamente.</p><p>L'attributo <code>style</code> ti consente di specificare
regole di stile CSS come colore, carattere, bordo, ecc. direttamente all'interno
dell'elemento . Diamo un'occhiata a un esempio per vedere come
funziona:</p><p>imparerai di più sullo stile degli elementi HTML nel capitolo <a
href="html-styles.php">Stili HTML</a>.</p ><p>Gli attributi discussi in
precedenza sono anche chiamati attributi globali. Per ulteriori attributi
globali, consulta il <a href="/html-reference/html5-global-
attributes.php">riferimento agli attributi globali HTML5</a>.</p><p>Un elenco
completo di attributi per ciascuno L'elemento HTML è elencato all'interno del <a
href="/html-reference/html-tag-list.php">riferimento tag HTML5</a>.</p>
<h1>HTML <span>Titoli</span></h1><h2>Organizzazione dei contenuti con i

titoli</h2><h2>Importanza dei titoli</h2>
<p><strong>Suggerimento:</strong> puoi facilmente personalizzare l'aspetto dei
tag di intestazione HTML come la dimensione del carattere, il grassetto, il
carattere tipografico, ecc. utilizzando il CSS <a href="/css-reference/css-font
-property.php">font</a>proprietà.</p>
</div>
<p><strong>Suggerimento:</strong> utilizza il tag <code><h1></code> per
contrassegnare l'intestazione più importante che di solito si trova nella parte
superiore della pagina. Un documento HTML generalmente dovrebbe avere
esattamente un'intestazione <code><h1></code>, seguita dalle intestazioni
di livello inferiore come <code><h2></code>, <code><h3>< /code>,
<code><h4></code> e così via.</p>
</div>
<p><strong>Nota:</strong> ogni volta che posizioni un tag di intestazione su una
pagina web, i fogli di stile integrati nel browser web creano automaticamente
uno spazio vuoto (chiamato margine) prima e dopo ogni intestazione. Puoi
utilizzare la proprietà CSS <code><a href="../css-reference/css-margin-
property.php">margin</a></code> per sovrascrivere il foglio di stile predefinito
del browser.</p >
</div>
<li>I titoli HTML forniscono informazioni preziose evidenziando argomenti
importanti e la struttura del documento, quindi ottimizzali attentamente per
migliorare il coinvolgimento degli utenti.</li><li>Non utilizzare i titoli per
rendere il tuo testo GRANDE o in grassetto. Usali solo per evidenziare
l'intestazione del tuo documento e per mostrare la struttura del
documento.</li><li>Poiché i motori di ricerca, come Google, usano le
intestazioni per indicizzare la struttura e il contenuto delle pagine web, usali
molto saggiamente in la tua pagina web.</li><li>Utilizza le intestazioni
<code><h1></code> come intestazioni principali della tua pagina web,
seguite dalle intestazioni <code><h2></code>, quindi intestazioni
<code><h3></code> meno importanti e così via.</li>
markup"><h1>Intestazione livello 1</h1>
<h2>Intestazione livello 2</h2>
<h6>Intestazione livello 6</h6></code></pre><p class="summary">In
questo tutorial imparerai come creare intestazioni in HTML.</p><p>Le
intestazioni aiutano in definendo la gerarchia e la struttura del contenuto
della pagina web.</p><p>HTML offre sei livelli di tag di intestazione, da
<code><h1></code> a <code><h6></code> ; più basso è il numero del
livello di intestazione, maggiore è la sua importanza — pertanto il tag
<code><h1></code> definisce l'intestazione più importante, mentre il tag
<code><h6></code> definisce l'intestazione meno importante nel
documento.</p><p>Per impostazione predefinita, i browser visualizzano le
intestazioni con caratteri più grandi e in grassetto rispetto al testo normale.
Inoltre, le intestazioni <code><h1></code> sono visualizzate con caratteri
più grandi, mentre le intestazioni <code><h6></code> sono visualizzate con
caratteri più piccoli.</p><p>— L'output di l'esempio precedente avrà un aspetto
simile a questo:</p>
<h1>HTML <span>Paragrafi</span></h1><h2>Creazione di paragrafi</h2><h2>Chiusura

di un elemento di paragrafo</h2><h2>Creazione di interruzioni di
riga</h2><h2>Creazione Regole orizzontali</h2><h2>Gestione degli spazi
bianchi</h2><h2>Definizione del testo preformattato</h2>
<p><strong>Suggerimento:</strong> il testo all'interno dell'elemento
<code><pre></code> viene in genere riprodotto dai browser in un carattere
a spaziatura fissa o a larghezza fissa, come Courier, ma è possibile eseguire
l'override questo utilizzando la proprietà CSS <a href="/css-reference/css-font-
property.php"><code>font</code></a>.</p>
</div>
<p><strong>Nota:</strong> i fogli di stile incorporati nei browser creano
automaticamente uno spazio sopra e sotto il contenuto di un paragrafo (chiamato
<a href="/css-reference/css-margin-property.php" >margin</a>), ma puoi
sovrascriverlo utilizzando i CSS.</p>
</div>
<p><strong>Nota:</strong> ai fini della compatibilità con le versioni successive
e di buone pratiche di codifica, è consigliabile utilizzare sia i tag di
apertura che quelli di chiusura per i paragrafi.</p>
</div>
<p><strong>Nota:</strong> non utilizzare il paragrafo vuoto, ad esempio
<code><p></p></code> per aggiungere ulteriore spazio nelle tue
pagine web. Il browser può ignorare i paragrafi vuoti poiché è un tag logico.
Utilizza invece la proprietà CSS <code><a href="../css-reference/css-margin-
property.php">margin</a></code> per regolare lo spazio intorno agli
elementi.</p>
</div>

markup"><p>Questo è un paragrafo.</p>
<p>Questo è un altro paragrafo.</p></code></pre><pre class="syntax-
highlighter line-numbers"><code class="language-markup"><p>Questo è un
paragrafo.
<p>Questo è un altro paragrafo.</code></pre><pre class="syntax-highlighter
line-numbers"><code class="language-markup"><p>Questo è un paragrafo <
br> con interruzione di riga.</p>
<p>Questo è <br>un altro paragrafo <br> con interruzioni di
riga.</p></code></pre><pre class="syntax-highlighter line-numbers"><code
class="language-markup"><p>Questo è un paragrafo.&lt ;/p>
<hr>
<p>Questo è un altro paragrafo.</p></code></pre><pre class="syntax-
highlighter line-numbers"><code class="language-markup"><p>Questo il
paragrafo contiene più spazi nel codice sorgente.</p>
<p>
Questo paragrafo
contiene più schede e interruzioni di riga
nel codice sorgente.
</p></code></pre><pre class="syntax-highlighter line-numbers"><code
class="language-markup"><p>Questo paragrafo ha
più &nbsp ; spazi.</p>
<p>Questo paragrafo ha
più<br><br>righe<br><br><br>interruzioni.</
p></code></pre><pre class="syntax-highlighter line-numbers"><code
class="language-markup"><pre>
Brilla, brilla, stellina,
Come mi chiedo cosa tu sia!
Sopra il mondo così in alto,
Come un diamante nel cielo.
</pre></code></pre><p class="summary">In questo tutorial imparerai come
creare paragrafi in HTML.</p><p>L'elemento paragrafo viene utilizzato per
pubblicare testo sul pagine web.</p><p>I paragrafi sono definiti con il tag
<code><p></code>. Il tag paragrafo è molto semplice e in genere è il primo
tag di cui avrai bisogno per pubblicare il tuo testo sulle pagine web. Ecco un
esempio:</p><p>In HTML 4 e versioni precedenti, era sufficiente iniziare un
nuovo paragrafo utilizzando il tag di apertura. La maggior parte dei browser
visualizzerà correttamente l'HTML anche se dimentichi il tag di chiusura. Ad
esempio:</p><p>Il codice HTML nell'esempio precedente funzionerà nella maggior
parte dei browser Web, ma non fare affidamento su di esso. Dimenticare il tag di
fine può produrre risultati o errori imprevisti.</p><p>Il tag
<code><br></code> viene utilizzato per inserire un'interruzione di riga
nella pagina web.</p><p> Dato che <code><br></code> è un <a href="html-
elements.php#empty-elements">elemento vuoto</a>, non c'è bisogno del
corrispondente <code>< /br></code>.</p><p>Puoi utilizzare il tag
<code><hr></code> per creare righe o linee orizzontali per separare
visivamente le sezioni di contenuto in una pagina web. Come
<code><br></code>, anche il tag <code><hr></code> è un elemento
vuoto. Ecco un esempio:</p><p>Normalmente il browser visualizzerà gli spazi
multipli creati all'interno del codice HTML premendo il <em>tasto barra
spaziatrice</em> o il <em>tasto tabulatore</em> sul tastiera come un unico
spazio. Anche le interruzioni di riga multiple create all'interno del codice
HTML premendo il tasto Invio vengono visualizzate come un unico spazio.</p><p>I
seguenti paragrafi verranno visualizzati in un'unica riga senza spazi
aggiuntivi:</p><p> Inserisci <code> </code> per creare spazi extra
consecutivi, mentre inserisci il tag <code><br></code> per creare
interruzioni di riga nelle tue pagine web, come dimostrato nell'esempio
seguente:</ p><p>A volte, usare <code> </code>,
<code><br></code>, ecc. per gestire gli spazi non è molto conveniente. In
alternativa, puoi utilizzare il tag <code><pre></code> per visualizzare
spazi, tabulazioni, interruzioni di riga, ecc. esattamente come scritto nel file
HTML. È molto utile per presentare il testo in cui gli spazi e le interruzioni
di riga sono importanti come una poesia o un codice.</p><p>Il seguente esempio
visualizzerà il testo nel browser così com'è nel codice sorgente:</p>
<h1>Link <span>HTML</span></h1><h2>Creazione di collegamenti in

HTML</h2><h2>Sintassi dei collegamenti HTML</h2><h2>Impostazione degli obiettivi
per i collegamenti</h2>< h2>Creazione di ancoraggi di
segnalibri</h2><h2>Creazione di collegamenti per il download</h2>
<p><strong>Suggerimento:</strong> se la tua pagina web si trova all'interno di
un iframe, puoi utilizzare il <code>target="_top"</code> sui link per uscire
dall'iframe e mostrare il pagina di destinazione nella finestra del browser
completa.</p>
</div>
<p><strong>Suggerimento:</strong> puoi persino passare a una sezione di un'altra
pagina web specificando l'URL di quella pagina insieme all'ancora (ad es.
<code><em>#elementId</em></ code>) nell'attributo <code>href</code>, ad esempio,
<code><a href="mypage.html#topicA">Vai a TopicA</a></code>.</p >
</div>
<p><strong>Nota:</strong> quando fai clic su un collegamento che rimanda a un
file PDF o immagine, il file non viene scaricato direttamente sul tuo disco
rigido. Aprirà il file solo nel tuo browser web. Inoltre puoi salvarlo o
scaricarlo permanentemente sul tuo disco rigido.</p>
</div>
<li>Un <span style="color: blue;text-decoration: underline;">link non
visitato</span> è sottolineato e blu.</li><li>Un <span style="color: purple;text
-decoration: underline;">link visitato</span> è sottolineato e viola.</li><li>Un
<span style="color: red;text-decoration: underline;">link attivo</span> è
sottolineato e rosso.</li><li><code>_blank</code> — Apre il documento collegato
in una nuova finestra o scheda.</li><li><code>_parent</code> — Apre il documento
collegato documento nella finestra principale.</li><li><code>_self</code> — Apre
il documento collegato nella stessa finestra o scheda del documento di origine.
Questo è il valore predefinito, quindi non è necessario specificare
esplicitamente questo valore.</li><li><code>_top</code> — Apre il documento
collegato nella finestra completa del browser.</li>
<pre class="syntax-highlighter line-numbers"><code class="language-markup"><a
href="https://www.google.com/">Ricerca Google</a>
<a href="https://www.tutorialrepublic.com/">Tutorial Republic</a>
<a href="immagini/aquiloni.jpg">
<img src="aquiloni-pollice.jpg" alt="aquiloni">
class="language-markup"><a href="/about-us.php" target ="_top">Chi
siamo</a>
<a href="https://www.google.com/" target="_blank">Google</a>
<a href="images/sky.jpg" target="_parent">
<img src="sky-thumb.jpg" alt="Cielo nuvoloso">
class="language-markup"><a href="#sectionA">Vai alla sezione A</a>
<h2 id="sectionA">Sezione A</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing
elit...</p></code></pre><pre class="syntax-highlighter line-numbers"><code
class="language-markup "><a href="downloads/test.zip">Scarica il file
zip</a>
<a href="downloads/masters.pdf">Scarica il file PDF</a>
<a href="downloads/sample.jpg">Scarica file
immagine</a></code></pre><p class="summary">In questo tutorial imparerai
come creare collegamenti ad altre pagine in HTML.</p><p>Un collegamento o
collegamento ipertestuale è una connessione da una risorsa Web a un'altra. I
collegamenti consentono agli utenti di spostarsi senza problemi da una pagina
all'altra, su qualsiasi server in qualsiasi parte del mondo.</p><p>Un
collegamento ha due estremità, chiamate ancore. Il collegamento inizia
dall'ancora di origine e punta all'ancora di destinazione, che può essere
qualsiasi risorsa Web, ad esempio un'immagine, un clip audio o video, un file
PDF, un documento HTML o un elemento all'interno del documento stesso, e così
attivo.</p><p>Per impostazione predefinita, nella maggior parte dei browser i
collegamenti appariranno come segue:</p><p class="space">Tuttavia, puoi
sovrascriverli utilizzando i CSS. Ulteriori informazioni sullo <a href="../css-
tutorial/css-links.php">stile dei link</a>.</p><p>I link sono specificati in
HTML utilizzando il <code><a> </code> tag.</p><p>Un collegamento o un
collegamento ipertestuale può essere una parola, un gruppo di parole o
un'immagine.</p><p>Qualunque cosa tra l'apertura <code><a></code > e il
tag di chiusura <code></a></code> diventa la parte del collegamento che
l'utente vede e fa clic in un browser. Ecco alcuni esempi di
link:</p><p>L'attributo <code>href</code> specifica la destinazione del link. Il
suo valore può essere un URL assoluto o relativo.</p><p>Un URL assoluto è l'URL
che include ogni parte del formato dell'URL, come protocollo, nome host e
percorso del documento, ad esempio <code> https://www.google.com/</code>,
<code>https://www.example.com/form.php</code>, ecc. Mentre gli URL relativi sono
percorsi relativi alla pagina, ad es. <code>contact.html</code>,
<code>images/smiley.png</code> e così via. Un URL relativo non include mai il
prefisso <code>http://</code> o <code>https://</code>.</p><p>L'attributo
<code>target</code> indica al browser dove aprire il documento collegato.
Esistono quattro obiettivi definiti e ogni nome di destinazione inizia con un
carattere di sottolineatura (<code>_</code>):</p><p>Prova il seguente esempio
per capire come funziona sostanzialmente l'obiettivo del collegamento:</p
><p>Puoi anche creare segnalibri ancorati per consentire agli utenti di passare
a una sezione specifica di una pagina web. I segnalibri sono particolarmente
utili se hai una pagina web molto lunga.</p><p>La creazione di segnalibri è un
processo in due passaggi: prima aggiungi l'attributo <code>id</code>
sull'elemento in cui vuoi saltare, quindi usa il valore dell'attributo
<code>id</code> preceduto dal cancelletto (<code>#</code>) come valore
dell'attributo <code>href</code> del <code><a&gt ;</code>, come mostrato
nell'esempio seguente:</p><p>Puoi anche creare il collegamento per il download
del file esattamente nello stesso modo in cui inserisci i collegamenti di testo.
Basta puntare l'URL di destinazione al file che desideri sia disponibile per il
download.</p><p>Nell'esempio seguente abbiamo creato i collegamenti per il
download per i file ZIP, PDF e JPG.</p>
<h1>HTML <span>Formattazione del testo</span></h1><h2>Formattazione del testo
con HTML</h2><h2>Formattazione delle citazioni</h2><h2>Visualizzazione delle
abbreviazioni</h2><h2>Marcatura Indirizzi di contatto</h2>
<p><strong>Suggerimento:</strong> il tag <a href="/html-reference/html-cite-
tag.php"><code>cite</code></a> viene utilizzato per descrivere un riferimento a
un'opera creativa. Deve includere il titolo dell'opera o il nome dell'autore
(persone o organizzazione) o un riferimento URL.</p>
</div>
<p><strong>Nota:</strong> utilizza <a href="../html-reference/html-em-
tag.php"><code><em></code></a> e <a href="../html-reference/html-strong-
tag.php"><code><strong></code></a> quando il contenuto della tua pagina
richiede che determinate parole o frasi dovrebbe avere una forte enfasi o
importanza. Inoltre, in HTML5 i tag <code><b></code> e
<code><i></code> sono stati ridefiniti, prima non avevano significato
semantico.</p>
</div>

markup"><p>Questo <b>testo in grassetto</b>.</p>
<p>Questo <strong>testo molto importante</strong>.</p>
<p>Questo <i>testo in corsivo</i>.</p>
<p>Questo <em>testo evidenziato</em>.</p>
<p>Questo è <mark>testo evidenziato</mark>.</p>
<p>Questo è <code>codice computer</code>.</p>
<p>Questo <small>testo più piccolo</small>.</p>
<p>Questo è <sub>pedice</sub> e <sup>apice</sup>
testo.</p>
<p>Questo è <del>testo eliminato</del>.</p>
<p>Questo <ins>testo
inserito</ins>.</p></code></pre><pre class="syntax-highlighter line-
numbers"><code class="language-
markup"><p><strong>ATTENZIONE!</strong> Si prega di procedere
con cautela.</p>
<p>Il concerto si terrà a <b>Hyde Park</b> a
Londra.</p></code></pre><pre class="syntax-highlighter line-numbers"><code
class="language-markup"><p>I gatti sono <em>carini&lt ;/em>
animali.</p>
<p>La <i>Royal Cruise</i> ha navigato ieri
sera.</p></code></pre><pre class="syntax-highlighter line-numbers"><code
class="language-markup"><blockquote>
<p>Impara da ieri, vivi per oggi, spera per domani. L'importante è non
smettere di fare domande.</p>
<cite>— Albert Einstein</cite>
</blockquote></code></pre><pre class="syntax-highlighter line-
numbers"><code class="language-markup"><p>Secondo l'Organizzazione
Mondiale della Sanità (OMS): <q>La salute è uno stato di completo
benessere fisico, mentale e sociale.</q></p></code></pre><pre
class="syntax-highlighter line-numbers" ><code class="language-
markup"><p>Il <abbr title="World Wide Web
Consortium">W3C</abbr> è la principale organizzazione internazionale di
standardizzazione per il <abbr title="World Wide Web">WWW o
W3</abbr>. È stata fondata da Tim Berners-Lee.</p></code></pre><pre
class="syntax-highlighter line-numbers"><code class="language-
markup"><address>
Fondazione Mozilla<br>
331 E. Evelyn Avenue<br>
Mountain View, CA 94041, Stati Uniti
</address></code></pre><p class="summary">In questo tutorial imparerai
come formattare il testo nelle pagine web utilizzando i tag HTML.</p><p>HTML
fornisce diversi tag che puoi utilizzare per fare in modo che parte del testo
nelle tue pagine web appaia in modo diverso dal testo normale, ad esempio, puoi
utilizzare il tag <code><b></code> per rendere il testo in grassetto, tag
<code>&lt ;i></code> per rendere il testo in corsivo, tag
<code><mark></code> per evidenziare il testo, tag
<code><code></code> per visualizzare un frammento di codice del computer,
tag <code><ins></code> e <code><del></code> per contrassegnare
inserimenti ed eliminazioni editoriali e altro ancora.</p><p>Il seguente esempio
mostra la formattazione più comunemente utilizzata tag in azione. Ora, proviamo
questo per capire come funzionano fondamentalmente questi tag:</p><p>Per
impostazione predefinita, il tag <code><strong></code> viene generalmente
visualizzato nel browser come <code><b&gt ;</code>, mentre il tag
<code><em></code> viene reso come <code><i></code>. Tuttavia, c'è
una differenza nel significato di questi tag.</p><p>Entrambi i tag
<code><strong></code> e <code><b></code> rendono il testo racchiuso
in un carattere tipografico in grassetto per impostazione predefinita, ma il tag
<code><strong></code> indica che i suoi contenuti hanno una forte
importanza, mentre il tag <code><b></code> viene utilizzato semplicemente
per attirare l'attenzione del lettore senza trasmettere alcuna importanza
speciale.</p><p>Allo stesso modo, entrambi i tag <code><em></code> e
<code><i></code> rendono il testo racchiuso in corsivo per impostazione
predefinita, ma il tag <code><em></code> indica che i suoi contenuti hanno
un'enfasi sottolineata rispetto al testo circostante, mentre il tag
<code><i></code> viene utilizzato per contrassegnare il testo che viene
messo in risalto dal testo normale per motivi di leggibilità, come un termine
tecnico, una frase idiomatica di un'altra lingua, un pensiero, ecc.</p><p>Puoi
formattare facilmente i blocchi di virgolette da altre fonti con il codice HTML
<code>&lt ;blockquote></code> tag.</p><p>Blockqu Le note sono generalmente
visualizzate con margini sinistro e destro rientrati, insieme a un piccolo
spazio extra aggiunto sopra e sotto. Facciamo un esempio per vedere come
funziona:</p><p>Per brevi citazioni incorporate, puoi utilizzare il tag HTML
<code><q></code>. La maggior parte dei browser visualizza le virgolette in
linea racchiudendo il testo tra virgolette. Ecco un
esempio:</p><p>Un'abbreviazione è una forma abbreviata di una parola, frase o
nome.</p><p>Puoi utilizzare il tag <code><abbr></code> per indicare
un'abbreviazione. L'attributo <code>title</code> viene utilizzato all'interno di
questo tag per fornire l'espansione completa dell'abbreviazione, che viene
visualizzata dai browser come tooltip quando il cursore del mouse passa sopra
l'elemento. Facciamo un esempio:</p><p>le pagine web spesso includono indirizzi
stradali o postali. L'HTML fornisce un tag speciale <code><address></code>
per rappresentare le informazioni di contatto (fisiche e/o digitali) per una
persona, un popolo o un'organizzazione.</p><p>Questo tag dovrebbe idealmente
essere utilizzato per visualizzare il contatto informazioni relative al
documento stesso, come l'autore dell'articolo. La maggior parte dei browser
visualizza un blocco di indirizzi in corsivo. Ecco un esempio:</p><p>Consulta la
sezione di riferimento HTML per un elenco completo dei <a href="/html-
reference/html5-tags.php#formatting-tags">tag di formattazione HTML</a >.</p>
<h1>Stili <span>HTML</span></h1><h2>Stili di elementi HTML</h2><h2>Aggiunta di

stili a elementi HTML</h2><h2 id="inline-styles">Stili in linea </h2><h2
id="embedded-style-sheet">Fogli di stile incorporati</h2><h2 id="external-style-
sheet">Fogli di stile esterni</h2><h2>Collegamento di fogli di stile esterni<
/h2><h2>Importazione di fogli di stile esterni</h2>
<p><strong>Nota:</strong> gli stili in linea hanno la priorità più alta e i
fogli di stile esterni hanno la priorità più bassa. Significa che se specifichi
stili per i tuoi paragrafi sia nei fogli di stile <em>incorporati</em> sia in
quelli <em>esterni</em>, le regole di stile in conflitto nel foglio di stile
incorporato sovrascriveranno il foglio di stile esterno.</p >
</div>
<p><strong>Nota:</strong> è diventato impossibile applicare stili a <a
href="../css-tutorial/css-pseudo-elements.php">pseudo-elementi</a> e <a href=
"../css-tutorial/css-pseudo-classes.php">pseudo-classi</a> con stili
incorporati. Dovresti, quindi, evitare l'uso degli attributi <code>style</code>
nel tuo markup. L'utilizzo di un <a href="#external-style-sheet">foglio di stile
esterno</a> è il modo migliore per aggiungere informazioni di stile a un
documento HTML.</p>
</div>
<p><strong>Nota:</strong> devono verificarsi tutte le regole <code><a
href="../css-reference/css-import-rule.php">@import</a></code> all'inizio del
foglio di stile. Qualsiasi regola di stile definita nel foglio di stile stesso
sovrascrive la regola in conflitto nei fogli di stile importati. La regola
<code>@import</code> può causare problemi di prestazioni, in genere dovresti
evitare di importare fogli di stile.</p>
</div>
<li><strong>Stili incorporati</strong>: utilizzo dell'attributo
<code>style</code> nel tag iniziale HTML.</li><li><strong>Stile
incorporato</strong>: utilizzo dello < un elemento href="../html-reference/html-
style-tag.php"><code><style></code></a> nella sezione head del
documento.</li><li ><strong>Foglio di stile esterno</strong> — Utilizzo del <a
href="../html-reference/html-link-tag.php"><code><link></code></a>
elemento, che punta a un file CSS esterno.</li>
markup"><h1 style="color:red; font-size:30px;">Questa è
un'intestazione</h1>
<p style="color:green; font-size:18px;">Questo è un paragrafo.</p>
<div style="color:green; font-size:18px;">Questo è del
testo.</div></code></pre><pre class="syntax-highlighter line-numbers">
<code class="language-markup"><head>
<stile>
corpo { colore di sfondo: gialloverde; }
h1 { colore: blu; }
p { colore: rosso; }
</stile>
</head></code></pre><pre class="syntax-highlighter line-numbers"><code
class="language-markup"><head>
<link rel="stylesheet" href="css/style.css">
class="language-markup"><style>
@import url("css/style.css");
p {
colore blu;
dimensione carattere: 16px;
}
</style></code></pre><pre class="syntax-highlighter line-numbers"><code
class="language-css">@import url("css/layout.css");
@import url("css/color.css");
corpo {
colore blu;
}</code></pre><p class="summary">In questo tutorial imparerai come applicare le
regole di stile agli elementi HTML.</p><p>L'HTML è piuttosto limitato quando si
tratta della presentazione di una pagina web. È stato originariamente progettato
come un modo semplice per presentare le informazioni. <a href="/css-
tutorial/">CSS (Cascading Style Sheets)</a> è stato introdotto nel dicembre 1996
dal <a href="https://en.wikipedia.org/wiki/World_Wide_Web_Consortium" rel=
"nofollow" target="_blank">World Wide Web Consortium (W3C)</a> per fornire un
modo migliore per dare uno stile agli elementi HTML.</p><p class="space">Con i
CSS, diventa molto facile specifica cose come, dimensione e carattere
tipografico per i caratteri, colori per il testo e gli sfondi, allineamento del
testo e delle immagini, quantità di spazio tra gli elementi, bordo e contorni
per gli elementi e molte altre proprietà di stile.</p ><p>Le informazioni sullo
stile possono essere allegate come documento separato o incorporate nel
documento HTML stesso. Questi sono i tre metodi per implementare le informazioni
di stile in un documento HTML.</p><p>In questo tutorial tratteremo tutti questi
diversi tipi di foglio di stile uno per uno.</p><p>Gli stili in linea vengono
utilizzati per applicare le regole di stile univoche a un elemento, inserendo le
regole CSS direttamente nel tag iniziale. Può essere collegato a un elemento
utilizzando l'attributo <code>style</code>.</p><p>L'attributo style include una
serie di proprietà CSS e coppie di valori. Ogni coppia <code>property:
value</code> è separata da un punto e virgola (<code>;</code>), proprio come
scriveresti in un foglio di stile incorporato o esterno. Ma deve essere tutto in
una riga, cioè nessuna interruzione di riga dopo il punto e
virgola.</p><p>L'esempio seguente mostra come impostare <a href="../css-
reference/css-color-property. php"><code>colore</code></a> e <a href="../css-
reference/css-font-size-property.php"><code>font-size</code>< /a> del
testo:</p><p>L'uso degli stili in linea è generalmente considerato una cattiva
pratica. Poiché le regole di stile sono incorporate direttamente all'interno del
tag html, la presentazione si confonde con il contenuto del documento, il che
rende molto difficile l'aggiornamento o la manutenzione di un sito
web.</p><p>Per conoscere le varie proprietà CSS in dettagli, consulta la sezione
<a href="/css-tutorial/">Tutorial CSS</a>.</p><p>I fogli di stile incorporati o
interni influiscono solo sul documento in cui sono incorporati.</p> <p>I fogli
di stile incorporati sono definiti nella sezione <a href="../html-tutorial/html-
head.php"><code><head></code></a> di un documento HTML utilizzando il tag
<code><style></code>. Puoi definire qualsiasi numero di elementi
<code><style></code> all'interno della sezione
<code><head></code>.</p><p>Il seguente esempio mostra come le regole di
stile sono incorporate all'interno una pagina web.</p><p>Un foglio di stile
esterno è l'ideale quando lo stile viene applicato a molte pagine.</p><p>Un
foglio di stile esterno contiene tutte le regole di stile in un documento
separato che puoi collegare da qualsiasi documento HTML sul tuo sito. I fogli di
stile esterni sono i più flessibili perché con un foglio di stile esterno puoi
cambiare l'aspetto di un intero sito web aggiornando un solo file.</p><p
class="space">Puoi allegare fogli di stile esterni in due modi —
<em>collegamento</em> e <em>importazione</em>:</p><p>un foglio di stile esterno
può essere collegato a un documento HTML utilizzando il <a href="../html-
reference /html-link-tag.php"><code><link></code></a> tag.</p><p>Il tag
<code><link></code> va all'interno del <a href="../html-reference/html-
head-tag.php"><code><head></code></a> sezione, come mostrato qui:</p><p>Il
La regola <code>@import</code> è un altro modo per caricare un foglio di stile
esterno. L'istruzione <code>@import</code> indica al browser di caricare un
foglio di stile esterno e di usarne gli stili.</p><p>Puoi usarlo in due modi. Il
modo più semplice è usarlo all'interno dell'elemento <a href="../html-
reference/html-style-tag.php"><code><style></code></a> nel tuo <code
><intestazione></code>. Tieni presente che altre regole CSS possono ancora
essere incluse nell'elemento <code><style></code>.</p><p>Allo stesso modo,
puoi utilizzare la regola <code>@import</code> per importare un foglio di stile
all'interno di un altro foglio di stile.</p>
<h1>Immagini <span>HTML</span></h1><h2>Inserimento di immagini nelle pagine

Web</h2><h2>Impostazione della larghezza e dell'altezza di
un'immagine</h2><h2>Utilizzo dell'immagine HTML5 Element</h2><h2>Lavorare con le
mappe immagine</h2>
<p><strong>Suggerimento:</strong> l'attributo <code>alt</code> richiesto
fornisce una descrizione di testo alternativa per un'immagine se un utente per
qualche motivo non è in grado di visualizzarla a causa della connessione lenta,
l'immagine non è disponibile all'URL specificato o se l'utente utilizza uno
screen reader o un browser non grafico.</p>
</div>
<p><strong>Suggerimento:</strong> sono disponibili molti strumenti online per la
creazione di mappe immagine. Alcuni editor avanzati come Adobe Dreamweaver
forniscono anche una serie di strumenti per creare facilmente mappe
immagine.</p>
</div>
<p><strong>Nota:</strong> come <code><a href="../html-reference/html-br-
tag.php"><br></a></code> , anche l'elemento <code><img></code> è un
<a href="html-elements.php#empty-elements">elemento vuoto</a> e non ha un tag di
chiusura. Tuttavia, in XHTML si chiude da solo terminando con
"<code>/></code>".</p>
</div>
<p><strong>Nota:</strong> è una buona pratica specificare entrambi gli attributi
<code>width</code> e <code>height</code> per un'immagine, in modo che il browser
possa allocare quella parte di spazio per l'immagine prima che venga scaricata.
In caso contrario, il caricamento delle immagini potrebbe causare distorsioni o
sfarfallio nel layout del tuo sito web.</p>
</div>
<p><strong>Nota:</strong> il browser valuterà ogni elemento figlio
<code><source></code> e sceglierà la corrispondenza migliore tra di loro;
se non vengono trovate corrispondenze, viene utilizzato l'URL dell'attributo
<code>src</code> dell'elemento <code><img></code>. Inoltre, il tag
<code><img></code> deve essere specificato come ultimo figlio
dell'elemento <code><picture></code>.</p>
</div>
<p><strong>Nota:</strong> la mappa immagine non deve essere utilizzata per la
navigazione del sito web. Non sono compatibili con i motori di ricerca. Un uso
valido di una mappa immagine è con una mappa geografica.</p>
</div>

markup"><img src="kites.jpg" alt="Flying Kites">
<img src="cielo.jpg" alt="Cielo nuvoloso">
<img src="balloons.jpg" alt="Balloons"></code></pre><pre class="syntax-
highlighter line-numbers"><code class="language-markup">< img src="kites.jpg"
alt="Flying Kites" width="300" height="300">
<img src="cielo.jpg" alt="Cielo nuvoloso" width="250" height="150">
<img src="balloons.jpg" alt="Balloons" width="200"
height="200"></code></pre><pre class="syntax-highlighter line-numbers"><code
class="language-markup"><img src="kites.jpg" alt="Flying Kites" style="width:
300px; height: 300px;">
<img src="cielo.jpg" alt="Cielo nuvoloso" style="larghezza: 250px; altezza:
150px;">
<img src="balloons.jpg" alt="Balloons" style="width: 200px; height:
200px;"></code></pre><pre class="syntax-highlighter line-numbers"> <code
class="language-markup"><immagine>
<source media="(larghezza minima: 1000px)" srcset="logo-large.png">
<source media="(larghezza massima: 500px)" srcset="logo-small.png">
<img src="logo-default.png" alt="Il mio logo">
</immagine></code></pre><pre class="syntax-highlighter line-numbers"><code
class="language-markup"><img src="objects.png" usemap="# oggetti"
alt="Oggetti">
<nome mappa="oggetti">
<area shape="cerchio" coords="137,231,71" href="orologio.html"
alt="Orologio">
<area shape="poly" coords="363,146,273,302,452,300" href="sign.html"
alt="Sign">
<area shape="rect" coords="520,160,641,302" href="libro.html" alt="Libro">
</map></code></pre><p class="summary">In questo tutorial imparerai come
includere immagini in un documento HTML.</p><p>Le immagini migliorano l'aspetto
visivo del web pagine rendendole più interessanti e colorate.</p><p>Il tag
<code><img></code> viene utilizzato per inserire immagini nei documenti
HTML. È un elemento vuoto e contiene solo attributi. La sintassi del tag
<code><img></code> può essere data con:</p><p>Il seguente esempio
inserisce tre immagini nella pagina web:</p><p>Ogni immagine deve contenere
almeno due attributi: l'attributo <code>src</code> e un attributo
<code>alt</code>.</p><p>L'attributo <code>src</code> indica al browser dove
trova l'immagine. Il suo valore è l'URL del file immagine.</p><p>Considerando
che l'attributo <code>alt</code> fornisce un testo alternativo per l'immagine,
se non è disponibile o non può essere visualizzato per qualche motivo. Il suo
valore dovrebbe essere un sostituto significativo dell'immagine.</p><p>Gli
attributi <code>width</code> e <code>height</code> vengono utilizzati per
specificare la larghezza e l'altezza di un'immagine.< /p><p>I valori di questi
attributi sono interpretati in pixel per impostazione predefinita.</p><p>Puoi
anche utilizzare l'attributo <code>style</code> per specificare la larghezza e
l'altezza delle immagini. Impedisce ai fogli di stile di modificare
accidentalmente le dimensioni dell'immagine, poiché lo stile in linea ha la
massima priorità.</p><p>A volte, ridimensionare un'immagine verso l'alto o verso
il basso per adattarla a dispositivi (o dimensioni dello schermo) diversi non
funziona come previsto. Inoltre, la riduzione della dimensione dell'immagine
utilizzando l'attributo o la proprietà <code>width</code> e <code>height</code>
non riduce la dimensione del file originale. Per risolvere questi problemi,
HTML5 ha introdotto il tag <code><picture></code> che consente di definire
più versioni di un'immagine per indirizzare diversi tipi di
dispositivi.</p><p>Il tag <code>< picture></code> contiene zero o più
elementi <code><source></code>, ognuno dei quali fa riferimento a una
diversa sorgente dell'immagine, e un elemento <code><img></code> alla
fine. Inoltre, ogni elemento <code><source></code> ha l'attributo
<code>media</code> che specifica una condizione multimediale (simile alla query
multimediale) utilizzata dal browser per determinare quando una particolare
fonte dovrebbe essere utilizzato. Proviamo un esempio:</p><p>Una mappa immagine
ti consente di definire punti di attivazione su un'immagine che si comporta
proprio come un <a href="html-links.php">collegamento ipertestuale</a>.</p
><p>L'idea di base alla base della creazione di una mappa immagine è quella di
fornire un modo semplice per collegare varie parti di un'immagine senza
dividerla in file immagine separati. Ad esempio, una mappa del mondo potrebbe
avere un collegamento ipertestuale a ciascun paese per ulteriori informazioni su
quel paese.</p><p>Proviamo un semplice esempio per capire come funziona
effettivamente:</p><p>Il <codice L'attributo >name</code> del tag
<code><map></code> è usato per fare riferimento alla mappa dal tag
<code><img></code> usando il suo <code>usemap</code > attributo. Il tag
<code><area></code> viene utilizzato all'interno dell'elemento
<code><map></code> per definire le aree cliccabili su un'immagine. Puoi
definire qualsiasi numero di aree cliccabili all'interno di un'immagine.</p>
<h1>HTML <span>Tabelle</span></h1><h2>Creazione di tabelle in

HTML</h2><h2>Estrazione di più righe e colonne</h2><h2>Aggiunta di didascalie
alle tabelle</h2> <h2>Definizione di un'intestazione, corpo e piè di pagina
della tabella</h2>
<p><strong>Suggerimento:</strong> non utilizzare tabelle per creare layout di
pagine web. I layout delle tabelle sono più lenti nel rendering e molto
difficili da mantenere. Dovrebbe essere utilizzato solo per visualizzare dati
tabulari.</p>
</div>
<p><strong>Nota:</strong> la maggior parte degli elementi <a href="/html-
reference/html-table-tag.php"><code><table></code></a> attributi come
<code>border</code>, <code>cellpadding</code>, <code>cellspacing</code>,
<code>width</code>, <code>align</code>, ecc. per lo stile degli aspetti delle
tabelle nelle versioni precedenti è stato eliminato in HTML5, quindi evita di
utilizzarli. Usa invece i CSS per <a href="/css-tutorial/css-
tables.php">impostare lo stile delle tabelle HTML</a>.</p>
</div>
<p><strong>Nota:</strong> in HTML5, l'elemento <code><tfoot></code> può
essere posizionato prima o dopo <code><tbody></code> e <code
><tr></code>, ma devono comparire dopo ogni elemento
<code><caption></code>, <code><colgroup></code> e
<code><thead></ codice> elementi.</p>
</div>
markup"><table>
<tr>
<th>No.</th>
<th>Nome</th>
<th>Età</th>
</tr>
<tr>
<td>1</td>
<td>Peter Parker</td>
<td>16</td>
</tr>
<tr>
<td>2</td>
<td>Clark Kent</td>
<td>34</td>
</tr>
</table></code></pre><pre class="syntax-highlighter line-numbers"><code
class="language-css">table, th, td {
bordo: 1px nero pieno;
}
th, td {
imbottitura: 10px;
}</code></pre><pre class="syntax-highlighter line-numbers"><code
class="language-css">tabella {
border-collapse: crollo;
}
th {
text-align: sinistra;
class="language-markup"><table>
<tr>
<th>Nome</th>
<th colspan="2">Telefono</th>
</tr>
<tr>
<td>John Carter</td>
<td>5550192</td>
<td>5550152</td>
</tr>
<tr>
<th>Nome:</th>
<td>John Carter</td>
</tr>
<tr>
<th rowspan="2">Telefono:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
<caption>Informazioni sugli utenti</caption>
<tr>
<th>No.</th>
<th>Nome</th>
<th>Età</th>
</tr>
<tr>
<td>1</td>
<td>Peter Parker</td>
<td>16</td>
</tr>
<tr>
<td>2</td>
<td>Clark Kent</td>
<td>34</td>
</tr>
<testa>
<tr>
<th>Articoli</th>
<th>Spese</th>
</tr>
</thead>
<corpo>
<tr>
<td>Stazionario</td>
<td>2.000</td>
</tr>
<tr>
<td>Mobili</td>
<td>10.000</td>
</tr>
</corpo>
<tpiede>
<tr>
<th>Totale</th>
<td>12.000</td>
</tr>
</tpiede>
</table></code></pre><p class="summary">In questo tutorial imparerai come
visualizzare dati tabulari utilizzando tabelle HTML.</p><p>La tabella HTML ti
consente di organizzare i dati in righe e colonne. Sono comunemente usati per
visualizzare dati tabulari come elenchi di prodotti, dettagli del cliente,
rapporti finanziari e così via.</p><p>Puoi creare una tabella usando l'elemento
<code><table></code>. All'interno dell'elemento
<code><table></code>, puoi utilizzare gli elementi <code><tr></code>
per creare righe e per creare colonne all'interno di una riga puoi utilizzare
gli elementi <code>&lt ;td></code> elementi. Puoi anche definire una cella
come intestazione per un gruppo di celle della tabella utilizzando l'elemento
<code><th></code>.</p><p>Il seguente esempio mostra la struttura più
elementare di una tabella.< /p><p>Le tabelle non hanno bordi per impostazione
predefinita. Puoi utilizzare la proprietà CSS <a href="/css-reference/css-
border-property.php"><code>border</code></a> per aggiungere bordi alle tabelle.
Inoltre, per impostazione predefinita, le celle della tabella sono
sufficientemente grandi per adattarsi al contenuto. Per aggiungere più spazio
attorno al contenuto nelle celle della tabella puoi utilizzare la proprietà CSS
<a href="/css-reference/css-padding-property.php"><code>padding</code></a>.<
/p><p>Le seguenti regole di stile aggiungono un bordo di 1 pixel alla tabella e
10 pixel di spaziatura interna alle sue celle.</p><p>Per impostazione
predefinita, i bordi intorno alla tabella e alle relative celle sono separati da
ciascuno Altro. Ma puoi comprimerli in uno solo usando la proprietà <a
href="/css-reference/css-border-collapse-property.php"><code>border-collapse</
code></a> sul <code ><table></code>.</p><p>Inoltre, il testo all'interno
degli elementi <code><th></code> viene visualizzato in grassetto,
allineato orizzontalmente al centro della cella per impostazione predefinita.
Per modificare l'allineamento predefinito puoi utilizzare la proprietà CSS <a
href="/css-reference/css-text-align-property.php"><code>text-align</code></
a>.</p ><p>Le seguenti regole di stile comprimono i bordi della tabella e
allineano il testo dell'intestazione della tabella a sinistra.</p><p>Consulta il
tutorial su <a href="/css-tutorial/css-tables.php" >Tabelle CSS</a> per
conoscere in dettaglio lo stile delle tabelle HTML.</p><p>Lo spanning ti
consente di estendere le righe e le colonne della tabella su più righe e
colonne.</p><p>Normalmente, una tabella cell non può passare nello spazio sotto
o sopra un'altra cella della tabella. Tuttavia, puoi utilizzare gli attributi
<code>rowspan</code> o <code>colspan</code> per estendere più righe o colonne in
una tabella.</p><p>Proviamo il seguente esempio per capire come
<code>colspan</code> fondamentalmente funziona:</p><p>Allo stesso modo, puoi
utilizzare l'attributo <code>rowspan</code> per creare una cella che si estende
su più di una riga. Proviamo un esempio per capire come funziona sostanzialmente
lo spanning delle righe:</p><p>Puoi specificare una didascalia (o titolo) per le
tue tabelle utilizzando l'elemento <code><caption></code>.</p
><p>L'elemento <code><caption></code> deve essere posizionato direttamente
dopo il tag di apertura <code><table></code>. Per impostazione
predefinita, la didascalia viene visualizzata nella parte superiore della
tabella, ma puoi modificarne la posizione utilizzando il CSS <a href="/css-
reference/css-caption-side-property.php"><code>caption-side</ code></a>
proprietà.</p><p>L'esempio seguente mostra come utilizzare questo elemento in
una tabella.</p><p>HTML fornisce una serie di tag <a href="/html-reference
/html-thead-tag.php"><code><thead></code></a>, <a
href="/html-reference/html-tbody-tag.php"><code>< tbody></code></a> e <a
href="/html-reference/html-tfoot-tag.php"><code><tfoot></code></a> che ti
aiuta a crea una tabella più strutturata, definendo rispettivamente le regioni
di intestazione, corpo e piè di pagina.</p><p>L'esempio seguente mostra l'uso di
questi elementi.</p>
<h1>Elenchi <span>HTML</span></h1><h2>Lavorare con elenchi HTML</h2><h2

id="unordered-lists">Elenchi non ordinati HTML</h2><h2 id="ordered -
lists">Elenchi ordinati HTML</h2><h2>Elenchi descrittivi HTML</h2>
<p><strong>Suggerimento:</strong> puoi anche utilizzare l'attributo
<code>type</code> per modificare il tipo di numerazione, ad esempio
<code>type="I"</code>. Tuttavia, dovresti evitare questo attributo, usa invece
la proprietà CSS <code>list-style-type</code>.</p>
</div>
<p><strong>Nota:</strong> all'interno di un elemento dell'elenco puoi inserire
testo, immagini, collegamenti, interruzioni di riga, ecc. Puoi anche inserire un
intero elenco all'interno di un elemento dell'elenco per creare l'elenco
nidificato.</p >
</div>
<li><strong>Elenco non ordinato</strong>: utilizzato per creare un elenco di
elementi correlati, senza un ordine particolare.</li><li><strong>Elenco
ordinato</strong>: utilizzato per creare un elenco di articoli correlati, in un
ordine specifico.</li><li><strong>Elenco descrizioni</strong> — Utilizzato per
creare un elenco di termini e le relative descrizioni.</li><li>Torta al
cioccolato</li>< li>Torta della Foresta Nera</li><li>Torta
all'ananas</li><li>Allaccia la cintura di sicurezza</li><li>Avvia il motore
dell'auto</li><li>Guardati intorno e vai</li> <li>Mescolare gli
ingredienti</li><li>Cuocere in forno per un'ora</li><li>Lasciare riposare per
dieci minuti</li>
markup"><ul>
<li>Torta al cioccolato</li>
<li>Torta Foresta Nera</li>
<li>Torta all'ananas</li>
</ul></code></pre><pre class="syntax-highlighter line-numbers"><code
class="language-css">ul {
tipo-stile-lista: quadrato;
class="language-markup"><ol>
<li>Allaccia la cintura di sicurezza</li>
<li>Avvia il motore dell'auto</li>
<li>Guardati intorno e vai</li>
</ol></code></pre><pre class="syntax-highlighter line-numbers"><code
class="language-markup"><ol start="10">
<li>Mescolare gli ingredienti</li>
<li>Cuocere in forno per un'ora</li>
<li>Lasciare riposare per dieci minuti</li>
</ol></code></pre><pre class="syntax-highlighter line-numbers"><code
class="language-css">ol {
list-style-type: upper-roman;
class="language-markup"><dl>
<dt>Pane</dt>
<dd>Un cibo cotto a base di farina.</dd>
<dt>Caffè</dt>
<dd>Bevanda a base di chicchi di caffè tostati.</dd>
</dl>
</code></pre><p class="summary">In questo tutorial imparerai come creare diversi
tipi di elenchi in HTML.</p><p>Gli elenchi HTML vengono utilizzati per
presentare elenchi di informazioni in modo corretto modo formale e semantico.
Esistono tre diversi tipi di elenco in HTML e ognuno ha uno scopo e un
significato specifici.</p><p class="space">Nelle sezioni seguenti tratteremo
tutti e tre i tipi di elenco uno per uno:</p><p class="space"> p><p>Un elenco
non ordinato creato utilizzando l'elemento <code><ul></code> e ogni
elemento dell'elenco inizia con l'elemento <code><li></code>.</p><p >Gli
elementi dell'elenco negli elenchi non ordinati sono contrassegnati da punti
elenco. Ecco un esempio:</p><p class="break">— L'output dell'esempio precedente
sarà simile a questo:</p><p>Puoi anche modificare il tipo di punto elenco
nell'elenco non ordinato utilizzando il CSS <a href="/css-reference/css-list-
style-type-property.php"><code>list-style-type</code></a> proprietà. La seguente
regola di stile cambia il tipo di punto elenco dal <em>disco</em> predefinito al
<em>quadrato</em>:</p><p>Consulta il tutorial su <a href="/css -tutorial/css-
lists.php">Elenchi CSS</a> per conoscere in dettaglio lo stile degli elenchi
HTML.</p><p>Un elenco ordinato creato utilizzando l'elemento
<code><ol></code> e ogni elemento dell'elenco inizia con l'elemento
<code><li></code>. Gli elenchi ordinati vengono utilizzati quando l'ordine
degli elementi dell'elenco è importante.</p><p>Gli elementi dell'elenco in un
elenco ordinato sono contrassegnati da numeri. Ecco un esempio:</p><p>— L'output
dell'esempio precedente avrà un aspetto simile al seguente:</p><p>La numerazione
degli elementi in un elenco ordinato in genere inizia con 1. Tuttavia, se lo
desideri modificare la possibilità di utilizzare l'attributo <code>start</code>,
come mostrato nell'esempio seguente:</p><p>— L'output dell'esempio precedente
sarà simile a questo:</p><p> Come l'elenco non ordinato, puoi anche utilizzare
la proprietà CSS <a href="/css-reference/css-list-style-type-
property.php"><code>list-style-type</code></a> per modificare il tipo di
numerazione in un elenco ordinato. La seguente regola di stile modifica il tipo
di indicatore in numeri romani.</p><p>Un elenco di descrizioni è un elenco di
elementi con una descrizione o definizione di ciascun elemento.</p><p>L'elenco
di descrizioni viene creato utilizzando < code><dl></code>. L'elemento
<code><dl></code> viene utilizzato insieme all'elemento
<code><dt></code> che specifica un termine e all'elemento
<code><dd></code> che specificano la definizione del termine.</p><p>I
browser di solito visualizzano gli elenchi delle definizioni inserendo i termini
e le definizioni in righe separate, dove le definizioni del termine sono
leggermente rientrate. Ecco un esempio:</p><p>— L'output dell'esempio precedente
sarà simile a questo:</p>
<h1>Moduli <span>HTML</span></h1><h2>Che cos'è il modulo HTML</h2><h2>Elemento

di input</h2><h2>Campi di testo</h2><h2>Campo password </h2><h2>Pulsanti di
opzione</h2><h2>Caselle di controllo</h2><h2>Casella di selezione
file</h2><h2>Area di testo</h2><h2>Caselle di selezione</h2><h2 >Pulsanti Invia
e Reimposta</h2><h2>Raggruppamento controlli modulo</h2><h2
class="break">Attributi modulo utilizzati di frequente</h2>
<p><strong>Suggerimento:</strong> esistono molti altri tipi di input. Consulta
il capitolo sui <a href="html5-new-input-types.php">Nuovi tipi di input
HTML5</a> per ulteriori informazioni sui nuovi tipi di input introdotti.</p>
</div>
<p><strong>Suggerimento:</strong> tutti i dati inviati tramite il metodo
<code>get</code> sono visibili nella barra degli indirizzi del browser.
Tuttavia, i dati inviati tramite <code>post</code> non sono visibili all'utente.
Consulta il tutorial su <a href="/php-tutorial/php-get-and-post.php">GET vs.
POST</a> per conoscere in dettaglio la differenza tra questi due metodi HTTP.</
p>
</div>
<p><strong>Nota:</strong> il tag <code><a href="../html-reference/html-label-
tag.php"><label></a></code> è usato per definire le etichette per gli
elementi <code><input></code>. Se desideri che il tuo utente inserisca più
righe, dovresti invece utilizzare un <code><a href="../html-reference/html-
textarea-tag.php"><textarea></a></code> .</p>
</div>
<p><strong>Nota:</strong> se desideri che un pulsante di opzione o una casella
di controllo siano selezionati per impostazione predefinita, puoi aggiungere
l'attributo <code>checked</code> all'elemento di input, come <code>< input
type="casella di controllo" selezionata></code>.</p>
</div>
<p><strong>Nota:</strong> puoi anche creare pulsanti utilizzando il <code><a
href="../html-reference/html-button-tag.php"><pulsante></a ></code>
elemento. I pulsanti creati con l'elemento <code><button></code>
funzionano proprio come i pulsanti creati con l'elemento input, ma offrono
possibilità di rendering più ricche consentendo l'incorporamento di altri
elementi HTML.</p>
</div>
<p><strong>Nota:</strong> l'attributo <code>name</code> rappresenta il nome del
modulo all'interno della raccolta di moduli. Il suo valore deve essere univoco
tra i moduli in un documento e non deve essere una stringa vuota.</p>
</div>

markup"><form>
<label>Nome utente: <input type="text"></label>
<etichetta>Password: <input type="password"></etichetta>
<input type="invia" value="Invia">
</form></code></pre><pre class="syntax-highlighter line-numbers"><code
class="language-markup"><form>
<label for="username">Nome utente:</label>
<input type="text" name="username" id="username">
<label for="user-pwd">Password:</label>
<input type="password" name="user-password" id="user-pwd">
<input type="radio" name="genere" id="maschio">
<label for="maschio">Uomo</label>
<input type="radio" name="sesso" id="femmina">
<label for="femmina">Femmina</label>
<input type="casella di controllo" name="sport" id="calcio">
<label for="calcio">Calcio</label>
<input type="checkbox" name="sport" id="cricket">
<label for="grillo">Grillo</label>
<input type="casella di controllo" name="sport" id="baseball">
<etichetta per="baseball">Baseball</etichetta>
<label for="file-select">Carica:</label>
<input type="file" name="upload" id="file-select">
<etichetta per="indirizzo">Indirizzo:</etichetta>
<textarea rows="3" cols="30" name="address" id="address"></textarea>
<label for="city">Città:</label>
<select name="città" id="città">
<option value="sydney">Sydney</option>
<option value="melbourne">Melbourne</option>
<option value="cromwell">Cromwell</option>
</seleziona>
class="language-markup"><form action="action.php" method="post ">
<label for="first-name">Nome:</label>
<input type="testo" name="nome" id="nome">
<input type="invia" value="Invia">
<input type="reset" value="Reset">
<insieme di campi>
<legend>Dati di contatto</legend>
<label>Indirizzo email: <input type="email"
name="email"></label>
<label>Numero di telefono: <input type="text"
name="phone"></label>
</set di campi>
</form></code></pre><p class="summary">In questo tutorial imparerai come
creare un modulo in HTML per raccogliere gli input dell'utente.</p><p>I moduli
HTML sono obbligatori per raccogliere diversi tipi di input dell'utente, come
dettagli di contatto come nome, indirizzo e-mail, numeri di telefono o dettagli
come informazioni sulla carta di credito, ecc.</p><p>I moduli contengono
elementi speciali chiamati controlli come inputbox, checkbox, radio- pulsanti,
pulsanti di invio, ecc. Gli utenti generalmente completano un modulo
modificandone i controlli, ad esempio inserendo testo, selezionando elementi,
ecc. e inviando questo modulo a un server web per un'ulteriore
elaborazione.</p><p>Il <a href=" ../html-reference/html-form-
tag.php"><code><form></code></a> tag viene utilizzato per creare un modulo
HTML. Ecco un semplice esempio di modulo di accesso:</p><p class="space">La
sezione seguente descrive i diversi tipi di controlli che puoi utilizzare nel
tuo modulo.</p><p>Questo è il più comunemente utilizzato elemento all'interno
dei moduli HTML.</p><p>Consente di specificare vari tipi di campi di input
dell'utente, a seconda dell'attributo <code>type</code>. Un elemento di input
può essere di tipo <em>campo testo</em>, <em>campo password</em>, <em>casella di
controllo</em>, <em>pulsante di opzione</em>, <em>invia pulsante</em>,
<em>pulsante di ripristino</em>, <em>casella di selezione file</em>, nonché
diversi <a href="html5-new-input-types.php">nuovi tipi di input </a> introdotto
in HTML5.</p><p class="space">I tipi di input utilizzati più di frequente sono
descritti di seguito.</p><p>I campi di testo sono aree di una riga che
consentono all'utente di inserire testo .</p><p>I controlli di immissione del
testo a riga singola vengono creati utilizzando un elemento
<code><input></code>, il cui attributo <code>type</code> ha un valore di
<code>text< /codice>. Ecco un esempio di un input di testo a riga singola
utilizzato per prendere il nome utente:</p><p class="break">— L'output
dell'esempio precedente sarà simile a questo:</p><p>I campi password sono simile
ai campi di testo. L'unica differenza è; i caratteri in un campo password sono
mascherati, cioè sono mostrati come asterischi o punti. Questo per impedire a
qualcun altro di leggere la password sullo schermo. Questo è anche un controllo
di input di testo a riga singola creato utilizzando un elemento
<code><input></code> il cui attributo <code>type</code> ha un valore di
<code>password</code>.</ p><p>Ecco un esempio di immissione di una password a
riga singola utilizzata per prendere la password dell'utente:</p><p
class="break">— L'output dell'esempio precedente sarà simile a questo:</p> <p>I
pulsanti di opzione vengono utilizzati per consentire all'utente di selezionare
esattamente un'opzione da un insieme predefinito di opzioni. Viene creato
utilizzando un elemento <code><input></code> il cui attributo
<code>type</code> ha un valore di <code>radio</code>.</p><p>Ecco un esempio di
pulsanti di opzione che possono essere utilizzati per raccogliere le
informazioni sul genere dell'utente:</p><p class="break">— L'output dell'esempio
precedente sarà simile a questo:</p><p>Le caselle di controllo consentono
all'utente di selezionare una o più opzioni da un insieme predefinito di
opzioni. Viene creato utilizzando un elemento <code><input></code> il cui
attributo <code>type</code> ha un valore di <code>checkbox</code>.</p><p>Ecco un
esempio di caselle di controllo che possono essere utilizzate per raccogliere
informazioni sugli hobby dell'utente:</p><p class="break">— L'output
dell'esempio precedente sarà simile a questo:</p><p>I campi del file consentono
a all'utente di cercare un file locale e inviarlo come allegato con i dati del
modulo. I browser Web come Google Chrome e Firefox visualizzano un campo di
immissione di selezione file con un pulsante Sfoglia che consente all'utente di
navigare nel disco rigido locale e selezionare un file.</p><p>Anche questo viene
creato utilizzando un <code>&lt ;input></code>, il cui valore dell'attributo
<code>type</code> è impostato su <code>file</code>.</p><p class="break">—
L'output di quanto sopra esempio avrà un aspetto simile a questo:</p><p>Textarea
è un controllo di immissione di testo su più righe che consente a un utente di
inserire più di una riga di testo. I controlli di immissione del testo su più
righe vengono creati utilizzando un elemento
<code><textarea></code>.</p><p class="break">— L'output dell'esempio
precedente avrà un aspetto simile al seguente:</p><p class="break"> p><p>Una
casella di selezione è un elenco a discesa di opzioni che consente all'utente di
selezionare una o più opzioni da un elenco a discesa di opzioni. La casella di
selezione viene creata utilizzando l'elemento <code><select></code> e
l'elemento <code><option></code>.</p><p>L'elemento
<code><option></code > gli elementi all'interno dell'elemento
<code><select></code> definiscono ciascun elemento dell'elenco.</p><p
class="break">— L'output dell'esempio precedente sarà simile a questo:</p> <p>Un
pulsante di invio viene utilizzato per inviare i dati del modulo a un server
web. Quando si fa clic sul pulsante di invio, i dati del modulo vengono inviati
al file specificato nell'attributo <code>action</code> del modulo per elaborare
i dati inviati.</p><p>Un pulsante di ripristino ripristina tutti i controlli del
modulo ai valori predefiniti . Prova il seguente esempio digitando il tuo nome
nel campo di testo e fai clic sul pulsante di invio per vederlo in
azione.</p><p>Digita il tuo nome nel campo di testo in alto e fai clic sul
pulsante di invio per vederlo in azione.</p><p>Raggruppi anche i controlli e le
etichette logicamente correlati all'interno di un modulo Web utilizzando
l'elemento <code><legend></code>. Raggruppare i controlli del modulo in
categorie rende più facile per gli utenti individuare un controllo che rende il
modulo più user-friendly. Proviamo il seguente esempio per vedere come
funziona:</p><p>La seguente tabella elenca gli attributi dell'elemento del
modulo utilizzati più di frequente:</p><p>Ci sono molti altri attributi, per
conoscerli consulta il <a href="/html-reference/html-form-
tag.php"><code><form></code></a> riferimento al tag.</p>
<h1>HTML <span>iFrame</span></h1><h2>Che cos'è l'iframe</h2><h2>Impostazione

della larghezza e dell'altezza di un iFrame</h2><h2>Rimozione del bordo del
frame predefinito</h2> <h2>Utilizzo di un iFrame come destinazione del
collegamento</h2>
<p><strong>Nota:</strong> i valori degli attributi <code>width</code> e
<code>height</code> sono specificati in pixel per impostazione predefinita, ma
puoi anche impostare questi valori in percentuale, ad esempio come 50%, 100% e
così via. La larghezza predefinita di un iframe è 300 pixel, mentre l'altezza
predefinita è 150 pixel.</p>
</div>
<pre class="syntax-highlighter line-numbers single-line"><code class="language-
markup"><iframe src="hello.html"></iframe></code></pre ><pre
class="syntax-highlighter line-numbers single-line"><code class="language-
markup"><iframe src="hello.html" width="400" height="200"><
;/iframe></code></pre><pre class="syntax-highlighter line-numbers single-
line"><code class="language-markup"><iframe src="hello.html" style= "width:
400px; height: 200px;"></iframe></code></pre><pre class="syntax-
highlighter line-numbers single-line"><code class="language-markup" ><iframe
src="hello.html" style="border: none;"></iframe></code></pre><pre
class="syntax-highlighter line-numbers single-line"> <code class="language-
markup"><iframe src="hello.html" style="border: 2px solid
blue;"></iframe></code></pre><pre class=" syntax-highlighter line-
numbers"><code class="language-markup"><iframe src="demo-page.html"
name="myFrame"></iframe>
<p><a href="https://www.tutorialrepublic.com" target="myFrame">Apri
TutorialRepublic.com</a></p></code></pre><p class="summary">In
questo tutorial imparerai come utilizzare un iframe per visualizzare una pagina
web all'interno di un'altra pagina web.</p><p>Un iframe o un frame in linea
viene utilizzato per visualizzare oggetti esterni incluse altre pagine web
all'interno una pagina web. Un iframe si comporta praticamente come un mini
browser web all'interno di un browser web. Inoltre, il contenuto all'interno di
un iframe esiste in modo completamente indipendente dagli elementi
circostanti.</p><p>La sintassi di base per l'aggiunta di un iframe a una pagina
web può essere fornita con:</p><p>L'URL specificato nel L'attributo
<code>src</code> punta alla posizione di un oggetto esterno o di una pagina
web.</p><p>Il seguente esempio mostra il file "hello.html" all'interno di un
iframe nel documento corrente.</p> <p>Gli attributi <code>height</code> e
<code>width</code> vengono utilizzati per specificare l'altezza e la larghezza
dell'iframe.</p><p>Puoi anche utilizzare i CSS per impostare la larghezza e
l'altezza di un iframe, come mostrato qui:</p><p>Consulta il tutorial sugli <a
href="html-styles.php">stili HTML</a> per apprendere i metodi di applicazione
dei CSS agli elementi HTML .</p><p>Per impostazione predefinita, l'iframe è
circondato da un bordo. Tuttavia, se desideri modificare o rimuovere i bordi
dell'iframe, il modo migliore è utilizzare il CSS <a href="/css-reference/css-
border-property.php"><code>border</code></ a>.</p><p>L'esempio seguente eseguirà
semplicemente il rendering dell'iframe senza bordi.</p><p>Allo stesso modo, puoi
utilizzare la proprietà <code>border</code> per aggiungere i bordi di la tua
scelta a un iframe. L'esempio seguente visualizzerà l'iframe con un bordo blu di
2 pixel.</p><p>Un iframe può anche essere utilizzato come destinazione per i <a
href="html-links.php">collegamenti ipertestuali</a>.< /p><p>Un iframe può essere
denominato utilizzando l'attributo <code>name</code>. Ciò implica che quando si
fa clic su un collegamento con un attributo <code>target</code> con quel nome
come valore, la risorsa collegata si aprirà in quell'iframe.</p><p>Proviamo un
esempio per capire come funziona fondamentalmente funziona:</p>
<h1>HTML <span>Doctypes</span></h1><h2>Comprensione del Doctype HTML5</h2>

<p><strong>Suggerimento:</strong> è necessario aggiungere una dichiarazione
doctype durante la creazione di un documento HTML. Inoltre, usa il <a
href="http://validator.w3.org/" rel="nofollow" target="_blank">W3C's
Validator</a> per controllare il codice HTML per errori di markup o di sintassi
prima della pubblicazione online. </p>
</div>
<p><strong>Nota:</strong> la dichiarazione doctype fa riferimento a una
definizione del tipo di documento (DTD). È un'istruzione per il browser Web
sulla versione del linguaggio di markup in cui è scritta la pagina. Il World
Wide Web Consortium (W3C) fornisce DTD per tutte le versioni HTML.</p>
</div>

DOCTYPE html>
<html lang="it">
<testa>
<meta charset="utf-8">
<title></title>
</testa>
<corpo>

</corpo>
</html></code></pre><p class="summary">In questo tutorial imparerai cos'è
la dichiarazione del tipo di documento in HTML.</p><p>Una dichiarazione del tipo
di documento, o DOCTYPE in breve, è un'istruzione per il browser web sulla
versione del linguaggio di markup in cui è scritta una pagina web.</p><p>Una
dichiarazione DOCTYPE appare nella parte superiore di una pagina web prima di
tutti gli altri elementi. Secondo le specifiche o gli standard HTML, ogni
documento HTML richiede una dichiarazione del tipo di documento valida per
assicurare che le tue pagine web vengano visualizzate nel modo in cui devono
essere visualizzate.</p><p>La dichiarazione doctype è solitamente la prima cosa
definito in un documento HTML (anche prima del tag di apertura <a href="/html-
reference/html-html-tag.php"><code><html></code></a>); tuttavia la
dichiarazione doctype stessa non è un tag HTML.</p><p>Il DOCTYPE per HTML5 è
molto breve, conciso e non fa distinzione tra maiuscole e minuscole.</p><p>I
Doctype per le versioni precedenti di HTML erano più lunghi perché il Il
linguaggio HTML era basato su SGML e quindi richiedeva un riferimento a un DTD,
ma ora sono <a href="../definitions.php#obsolete">obsolete</a>.</p><p>Con HTML5
questo non è più così e la dichiarazione doctype è necessaria solo per abilitare
la modalità standard per i documenti scritti utilizzando la sintassi
HTML.</p><p>Puoi utilizzare il seguente markup come modello per creare un nuovo
documento HTML5.</p><p> p>
<h1>Layout <span>HTML</span></h1><h2>Creazione di layout di siti

web</h2><h2>Layout basato su tabella HTML</h2><h2>Layout basato su div
HTML</h2><h2 >Utilizzo degli elementi strutturali HTML5</h2>
<p><strong>Suggerimento:</strong> è possibile creare layout di pagina Web
migliori utilizzando gli elementi DIV e i CSS. Puoi cambiare il layout di tutte
le pagine del tuo sito web modificando un solo file CSS. Per conoscere i CSS in
dettaglio, consulta la nostra sezione <a href="/css-tutorial/">Tutorial
CSS</a>.</p>
</div>
<pre class="syntax-highlighter line-numbers scroll xxlarge"><code

class="language-markup"><!DOCTYPE html>
<html lang="it">
<testa>
<title>Layout tabella HTML</title>
</testa>
<body style="margin:0px;">
<table style="width:100%; border-collapse:collapse; font:14px Arial,sans-
serif;">
<tr>
<td colspan="2" style="padding:10px 20px; background-color:#acb3b9;">
<h1 style="font-size:24px;">Tutorial Republic</h1>
</td>
</tr>
<tr style="altezza:170px;">
<td style="width:20%; padding:20px; background-color:#d4d7dc; vertical-align:
top;">
<ul style="list-style:none; padding:0px; line-height:24px;">
<li><a href="#" style="color:#333;">Casa</a></li>
<li><a href="#" style="color:#333;">Informazioni
su</a></li>
<li><a href="#" style="color:#333;">Contatto</a></li>
</ul>
</td>
<td style="padding:20px; background-color:#f2f2f2; vertical-align:top;">
<h2>Benvenuto nel nostro sito</h2>
<p>Qui imparerai come creare siti web...</p>
</td>
</tr>
<tr>
<td colspan="2" style="padding:5px; background-color:#acb3b9; text-
align:center;">
<p>copyright © tutorialrepublic.com</p>
</td>
</tr>
</tabella>
</corpo>
</html></code></pre><pre class="syntax-highlighter line-numbers scroll
xxlarge"><code class="language-markup"><!DOCTYPE html>
<html lang="it">
<testa>
<title>Layout div HTML</title>
<stile>
corpo {
font: 14px Arial, sans serif;
margine: 0px;
}
.intestazione {
imbottitura: 10px 20px;
sfondo: #acb3b9;
}
.header h1 {
}
.contenitore {
larghezza: 100%;
sfondo: #f2f2f2;
}
.nav, .sezione {
galleggiante: sinistro;
imbottitura: 20px;
altezza minima: 170px;
dimensionamento della scatola: border-box;
}
.nav {
larghezza: 20%;
sfondo: #d4d7dc;
}
.sezione {
larghezza: 80%;
}
.navul {
stile elenco: nessuno;
altezza della riga: 24px;
imbottitura: 0px;
}
.nav ul li a {
colore: #333;
}
.clearfix:dopo {
contenuto: ".";
blocco di visualizzazione;
altezza: 0;
chiaro: entrambi;
visibilità: nascosta;
}
.piè di pagina {
sfondo: #acb3b9;
text-align: centro;
imbottitura: 5px;
}
</stile>
</testa>
<corpo>
<div class="contenitore">
<div class="header">
<h1>Tutorial Repubblica</h1>
</div>
<div class="wrapper clearfix">
<div class="nav">
<ul>
<li><a href="#">Casa</a></li>
<li><a href="#">Informazioni</a></li>
<li><a href="#">Contatto</a></li>
</ul>
</div>
<div class="sezione">
</div>
</div>
<div class="footer">
</div>
</div>
</corpo>
</html></code></pre><pre class="syntax-highlighter line-numbers scroll
xxlarge"><code class="language-markup"><!DOCTYPE html>
<html lang="it">
<testa>
<title>Layout pagina Web HTML5</title>
<stile>
corpo {
font: 14px Arial, sans serif;
margine: 0px;
}
intestazione {
imbottitura: 10px 20px;
sfondo: #acb3b9;
}
intestazione h1 {
}
.contenitore {
larghezza: 100%;
sfondo: #f2f2f2;
}
nav, sezione {
galleggiante: sinistro;
imbottitura: 20px;
altezza minima: 170px;
dimensionamento della scatola: border-box;
}
sezione {
larghezza: 80%;
}
nav {
larghezza: 20%;
sfondo: #d4d7dc;
}
navul {
stile elenco: nessuno;
altezza della riga: 24px;
imbottitura: 0px;
}
nav ul li a {
colore: #333;
}
.clearfix:dopo {
contenuto: ".";
blocco di visualizzazione;
altezza: 0;
chiaro: entrambi;
visibilità: nascosta;
}
piè di pagina {
sfondo: #acb3b9;
text-align: centro;
imbottitura: 5px;
}
</stile>
</testa>
<corpo>
<div class="contenitore">
<intestazione>
<h1>Tutorial Repubblica</h1>
</intestazione>
<div class="wrapper clearfix">
<nav>
<ul>
<li><a href="#">Casa</a></li>
<li><a href="#">Informazioni</a></li>
<li><a href="#">Contatto</a></li>
</ul>
</nav>
<sezione>
</sezione>
</div>
<piè di pagina>
</piè di pagina>
</div>
</corpo>
</html></code></pre><p class="summary">In questo tutorial imparerai i
diversi metodi per creare un layout di una pagina web.</p><p>Creare un layout di
un sito web è l'attività di posizionamento dei vari elementi che compongono una
pagina web in modo ben strutturato e danno un aspetto accattivante al sito
web.</p><p class="space">Hai visto che la maggior parte dei siti web su Internet
di solito visualizzano i loro contenuti in più righe e colonne, formattate come
una rivista o un giornale per fornire agli utenti un migliore ambiente di
lettura e scrittura. Ciò può essere facilmente ottenuto utilizzando i tag HTML,
come <a
href="../html-reference/html-table-tag.php"><code><table></code></a>, <a
href="../html-reference/html-div-tag.php"><code><div></code></a>, <a
href="../html-reference/html5 -header-tag.php"><code><header></code></a>,
<a href="../html-reference/html5-footer-tag.php"><code>< piè di
pagina></code></a>, <a href="../html-reference/html5-section-
tag.php"><code><sezione></code></a>, ecc. e aggiungendovi alcuni <a
href="html-styles.php">stili CSS</a>.</p><p>Table fornisce il modo più semplice
per creare layout in HTML. Generalmente, ciò comporta il processo di inserimento
di contenuti come testo, immagini e così via in righe e colonne.</p><p>Il
seguente layout viene creato utilizzando una tabella HTML con 3 righe e 2
colonne: la prima e l'ultima riga si estende su entrambe le colonne utilizzando
l'attributo <code>colspan</code> della tabella:</p><p class="break">— Il codice
HTML sopra produrrà il seguente output:</p><p><strong >Avviso:</strong> il
metodo utilizzato per creare il layout nell'esempio precedente non è sbagliato,
ma non è consigliato. Evita <a href="html-tables.php">tabelle</a> e <a
href="html-styles.php#inline-styles">stili in linea</a> per la creazione di
layout. Layout creati utilizzando tabelle spesso renderizzate molto lentamente.
Le tabelle devono essere utilizzate solo per visualizzare dati
tabulari.</p><p>Utilizzando <a href="../html-reference/html-div-
tag.php"><code><div></code ></a> elementi è il metodo più comune per
creare layout in HTML. L'elemento <code><div></code> (sta per divisione)
viene utilizzato per contrassegnare un blocco di contenuto o un insieme di altri
elementi all'interno di un documento HTML. Può contenere ulteriori altri
elementi div se necessario. </p><p>Il seguente esempio utilizza gli elementi div
per creare un layout a più colonne. Produrrà lo stesso risultato dell'esempio
precedente che utilizza l'elemento table:</p><p class="break">— Il codice HTML
sopra produrrà lo stesso output dell'esempio precedente:</p><p> Abbiamo creato
questo layout utilizzando le tecniche <a href="/css-tutorial/css-
alignment.php#floating-elements">CSS float</a>, poiché la maggior parte dei
browser Web lo supporta. In alternativa, puoi anche utilizzare la flexbox CSS3
per creare layout moderni e più flessibili. Guarda il tutorial sui <a
href="/css-tutorial/css3-flexible-box-layouts.php">Layout flessibili dei box
CSS3</a> per conoscere in dettaglio il flexbox.</p><p>HTML5 ha introdotto i
nuovi elementi strutturali come <a href="../html-reference/html5-header-
tag.php"><code><header></code></a>, <a href=".. /html-reference/html5-
footer-tag.php"><code><footer></code></a>, <a
href="../html-reference/html5-nav-tag.php" ><code><nav></code></a>, <a
href="../html-reference/html5-section-tag.php"><code><section></code><
/a>, ecc. per definire le diverse parti di una pagina web in modo più
semantico.</p><p>Puoi considerare questi elementi come sostituti delle classi
comunemente usate come <code>.header</code >, <code>.footer</code>,
<code>.nav</code>, <code>.section</code>, ecc. L'esempio seguente utilizza i
nuovi elementi strutturali HTML5 per creare lo stesso layout che abbiamo hanno
creato negli esempi precedenti.</p><p class="break">— Anche il codice HTML sopra
produrrà lo stesso output del previ Esempio:</p><p>La seguente tabella fornisce
una breve panoramica dei nuovi elementi strutturali HTML5.</p><p>Controlla il
riferimento su <a href="../html-reference/html5- tags.php">tag HTML5</a> per
conoscere i nuovi tag introdotti.</p>
<h1>HTML <span>Head</span></h1><h2>L'elemento HTML head</h2><h2>L'elemento HTML

title</h2><h2>L'elemento HTML base</h2>< h2>L'elemento HTML
link</h2><h2>L'elemento HTML style</h2><h2>L'elemento HTML
meta</h2><h2>L'elemento HTML script</h2>
<p><strong>Suggerimento:</strong> un buon titolo dovrebbe essere breve e
specifico per il contenuto del documento, perché i web crawler del motore di
ricerca prestano particolare attenzione alle parole utilizzate nel titolo. Il
titolo dovrebbe idealmente essere lungo meno di 65 caratteri. Consulta le <a
href="../faq/what-is-the-maximum-length-of-title-and-meta-description-
tag.php">linee guida per i titoli</a>.</p>
</div>
<p><strong>Nota:</strong> l'elemento <code><head></code> di un documento
HTML può contenere un numero qualsiasi di elementi <code><link></code>.
L'elemento <code><link></code> ha attributi, ma nessun contenuto.</p>
</div>
<p><strong>Nota:</strong> è necessario utilizzare un foglio di stile incorporato
quando un singolo documento ha uno stile univoco. Se lo stesso foglio di stile
viene utilizzato in più documenti, sarebbe più appropriato un foglio di stile
esterno. Guarda il tutorial sugli <a href="html-styles.php">stili HTML</a> per
saperne di più.</p>
</div>
<li>Per visualizzare un titolo nella barra del titolo del browser e nella barra
delle applicazioni.</li><li>Per fornire un titolo per la pagina quando viene
aggiunta ai preferiti o nei segnalibri.</li><li>Per visualizzare un titolo per
la pagina nei risultati dei motori di ricerca.</li>
DOCTYPE html>
<html lang="it">
<testa>
<title>Un semplice documento HTML</title>
</testa>
<corpo>
<p>Ciao mondo!</p>
</corpo>
<html lang="it">
<testa>
<title>Definizione di un URL di base</title>
<base href="https://www.tutorialrepublic.com/">
</testa>
<corpo>
<p><a href="html-tutorial/html-head.php">HTML
Head</a>.</p>
</corpo>
<title>Collegare i fogli di stile</title>
<link rel="stylesheet" href="style.css">
<title>Incorporamento di fogli di stile</title>
<stile>
corpo { colore di sfondo: gialloverde; }
h1 { colore: rosso; }
p { colore: verde; }
</stile>
<title>Specificare i metadati</title>
<meta name="author" content="John Smith">
<title>Aggiunta di JavaScript</title>
<copione>
document.write("<h1>Ciao mondo!</h1>")
</copione>
</head></code></pre><p class="summary">In questo tutorial imparerai
l'importanza degli elementi head.</p><p>Il <code><head>< L'elemento /code>
è principalmente il contenitore per tutti gli elementi head, che forniscono
informazioni aggiuntive sul documento (metadati) o riferimenti ad altre risorse
necessarie affinché il documento venga visualizzato o si comporti correttamente
in un browser web.</p> <p>Gli elementi head descrivono collettivamente le
proprietà del documento come il titolo, forniscono meta informazioni come il set
di caratteri, indicano al browser dove trovare i fogli di stile o gli script che
consentono di estendere il documento HTML in modo altamente attivo e interattivo
.</p><p class="space">Gli elementi HTML che possono essere utilizzati
all'interno del <a href="../html-reference/html-head-tag.php"><code><head>
</code></a> sono: <a href="../html-reference/html-title-
tag.php"><code><title></code></a>, <a href="../html-reference/html-base-
tag.php"><code><base></code></a>, <a href=". ./html-reference/html-link-
tag.php"><code><link></code></a>, <a href="../html-reference/html-style-
tag.php "><code><style></code></a>, <a href="../html-reference/html-meta-
tag.php"><code><meta></code> </a>, <a href="../html-reference/html-script-
tag.php"><code><script></code></a> e <a href=".. /html-reference/html-
noscript-tag.php"elemento <code><noscript></code></a>.</p><p>L'elemento
<code><title></code> definisce il titolo del documento.</p><p>L'elemento
title è richiesto in tutti i documenti HTML/XHTML per produrre un documento
valido. In un documento è consentito un solo elemento title e deve essere
posizionato all'interno dell'elemento <code><head></code>. L'elemento
title contiene testo semplice ed entità; non può contenere altri tag di
markup.</p><p>Il titolo del documento può essere utilizzato per scopi diversi.
Ad esempio:</p><p>L'esempio seguente mostra come inserire un titolo in un
documento HTML.</p><p>L'elemento HTML <code><base></code> viene utilizzato
per definire una base URL per tutti i collegamenti relativi contenuti nel
documento, ad esempio è possibile impostare l'URL di base una volta nella parte
superiore della pagina, quindi tutti i collegamenti relativi successivi
utilizzeranno quell'URL come punto di partenza. Ecco un esempio:</p><p>Il
collegamento ipertestuale nell'esempio precedente si risolverà effettivamente in
<code>https://www.tutorialrepublic.com/html-tutorial/html-head.php</code>
indipendentemente dal URL della pagina corrente. Questo perché l'URL relativo
specificato nel collegamento: <code>html-tutorial/html-head.php</code> viene
aggiunto alla fine dell'URL di base: <code>https://www.tutorialrepublic.com/
</code>.</p><p><strong>Avviso:</strong> l'elemento HTML
<code><base></code> deve comparire prima di qualsiasi elemento che fa
riferimento a una risorsa esterna. L'HTML consente un solo elemento di base per
ogni documento. </p><p>L'elemento <code><link></code> definisce la
relazione tra il documento corrente e documenti o risorse esterni. Un uso comune
dell'elemento link è il collegamento a fogli di stile esterni.</p><p>Consulta la
sezione <a href="/css-tutorial/">Tutorial CSS</a> per informazioni sui fogli di
stile in detail.</p><p>L'elemento <code><style></code> viene utilizzato
per definire le informazioni di stile incorporate per un documento HTML. Le
regole di stile all'interno dell'elemento <code><style></code> specificano
come gli elementi HTML vengono visualizzati in un browser.</p><p>L'elemento
<code><meta></code> fornisce i metadati relativi al documento HTML. I
metadati sono un insieme di dati che descrivono e forniscono informazioni su
altri dati. Ecco un esempio:</p><p>L'elemento meta verrà spiegato più
dettagliatamente nel <a href="html-meta.php">capitolo successivo</a>.</p><p>Il <
code><script></code> viene utilizzato per definire script lato client,
come JavaScript nei documenti HTML.</p><p>Il seguente esempio visualizzerà un
messaggio di benvenuto nel browser:</p> <p>Gli elementi script e noscript
verranno spiegati in dettaglio nel <a href="html-scripts.php">capitolo
successivo</a>.</p>
<h1>HTML <span>Meta</span></h1><h2>Definizione dei

metadati</h2><h2>Dichiarazione della codifica dei caratteri in
HTML</h2><h2>Definizione dell'autore di un documento</h2> <h2>Parole chiave e
descrizione per i motori di ricerca</h2><h2>Configurazione del viewport per
dispositivi mobili</h2>
<p><strong>Suggerimento:</strong> i motori di ricerca utilizzano spesso la meta
descrizione di una pagina per creare una breve sinossi della pagina quando viene
visualizzata nei risultati di ricerca. Consulta le <a href="../faq/what-is-the-
maximum-length-of-title-and-meta-description-tag.php">linee guida per la meta
descrizione</a>.</p>
</div>
<p><strong>Suggerimento:</strong> utilizza sempre il tag viewport
<code><meta></code> nelle tue pagine web. Renderà il tuo sito web facile
da usare e più accessibile su dispositivi mobili come telefoni cellulari e
tablet.</p>
</div>
<p><strong>Nota:</strong> <a href="https://en.wikipedia.org/wiki/UTF-8"
rel="nofollow" target="_blank">UTF-8</a > è una codifica dei caratteri molto
versatile e consigliata da scegliere. Tuttavia, se non viene specificato, viene
utilizzata la codifica predefinita della piattaforma.</p>
</div>
<p><strong>Nota:</strong> l'attributo <code>name</code> del meta tag definisce
il nome di una porzione di metadati a livello di documento, mentre l'attributo
<code>content</code> fornisce il valore corrispondente. Il valore dell'attributo
<code>content</code> può contenere testo ed entità, ma non può contenere tag
HTML.</p>
</div>

DOCTYPE html>
<html lang="it">
<testa>
<title>Dichiarazione della codifica dei caratteri</title>
</testa>
<corpo>
<h1>Ciao mondo!</h1>
</corpo>
<title>Definizione dell'autore del documento</title>
<meta name="author" content="Alexander Howick">
<title>Definizione di parole chiave e descrizione</title>
<meta name="parole chiave" content="HTML, CSS, javaScript">
<meta name="description" content="Tutorial e riferimenti di facile
comprensione su HTML, CSS, javaScript e altro...">
<title>Configurazione della finestra</title>
<meta name="viewport" content="width=larghezza-dispositivo, scala-
iniziale=1">
</head></code></pre><p class="summary">In questo tutorial imparerai come
utilizzare i meta tag per fornire metadati su una pagina web.</p><p>Il <code >I
tag<meta></code> vengono in genere utilizzati per fornire metadati
strutturati come le <em>parole chiave</em>, la <em>descrizione</em>, il <em>nome
dell'autore</em>, < em>codifica dei caratteri</em> e altri metadati. All'interno
della <a href="html-head.php">sezione head</a> di un documento HTML o XHTML può
essere inserito un numero qualsiasi di meta tag.</p><p class="break">I metadati
non verranno visualizzati sulla pagina web, ma saranno analizzabili dalla
macchina e potranno essere utilizzati dai browser, motori di ricerca come Google
o altri servizi web.</p><p>La sezione seguente descrive l'uso dei meta tag per
vari scopi. </p><p>Meta tag generalmente utilizzato per dichiarare la codifica
dei caratteri all'interno di un documento HTML.</p><p>Per impostare la codifica
dei caratteri all'interno di un documento CSS, il <a href="../css-reference/css
-charset-rule.php"><code>@charset</code></a> viene utilizzato
at-rule.</p><p>Puoi anche utilizzare il meta tag per definire chiaramente chi è
l'autore o il creatore della pagina web.</p><p>L'autore può essere un individuo,
l'azienda nel suo insieme o una terza parte.</p><p>Alcuni motori di ricerca
utilizzano metadati, in particolare parole chiave e descrizioni per indicizzare
le pagine web; tuttavia questo potrebbe non essere necessariamente vero. Le
parole chiave che danno maggior peso alle parole chiave e alla descrizione di un
documento forniscono una breve sinossi della pagina. Ecco un esempio:</p><p>Puoi
utilizzare il meta tag viewport per visualizzare correttamente le pagine web sui
dispositivi mobili.</p><p>Senza un meta tag viewport, i browser per dispositivi
mobili visualizzano le pagine web su un normale desktop larghezze dello schermo,
quindi ridimensionalo per adattarlo allo schermo del dispositivo mobile. Di
conseguenza, è necessario avvicinare e ingrandire la pagina web per visualizzare
correttamente la pagina web sui dispositivi mobili, il che è molto
scomodo.</p><p>La seguente dimostrazione mostra due pagine web: una <em>con meta
tag viewport< /em> e altri <em>senza meta tag viewport</em> impostati. Apri
questi link sui dispositivi mobili per vedere come funziona.</p><p>Il meta tag
del viewport ti consente di impostare le migliori dimensioni del viewport e i
limiti di ridimensionamento per la visualizzazione delle pagine web sui
dispositivi mobili. Una tipica definizione di meta tag viewport avrà il seguente
aspetto:</p><p>La coppia chiave-valore <code>width=device-width</code>
all'interno dell'attributo <code>content</code> imposta la larghezza di il
viewport alla stessa larghezza dello schermo del dispositivo, mentre
<code>initial-scale=1</code> imposta la scala iniziale o il livello di zoom al
100% quando la pagina viene caricata per la prima volta dal browser.</p>
<h1>HTML <span>Script</span></h1><h2>Lavorare con lo script lato

client</h2><h2>Aggiunta di JavaScript alle pagine HTML</h2><h2>Incorporamento di
JavaScript</h2> <h2>Richiamo di un file JavaScript esterno</h2><h2>L'elemento
HTML noscript</h2>
<p><strong>Suggerimento:</strong> idealmente, gli elementi dello script
dovrebbero essere posizionati nella parte inferiore della pagina, prima del tag
body di chiusura, ad esempio <code></body></code>, perché quando il
browser incontra un script mette in pausa il rendering del resto della pagina
finché non analizza lo script che potrebbe avere un impatto significativo sulle
prestazioni del tuo sito.</p>
</div>
<p><strong>Suggerimento:</strong> i file JavaScript sono normali file di testo
con estensione <code>.js</code>, ad esempio "hello.js". Inoltre, il file
JavaScript esterno contiene solo istruzioni JavaScript; non contiene l'elemento
<code><script>...</script></code> come JavaScript incorporato.</p>
</div>
<p><strong>Nota:</strong> quando viene specificato l'attributo <code>src</code>,
l'elemento <code><script></code> deve essere vuoto. Ciò significa
semplicemente che non puoi utilizzare lo stesso elemento
<code><script></code> sia per incorporare il codice JavaScript sia per
collegarti a un file JavaScript esterno in un documento HTML.</p>
</div>
<p><strong>Nota:</strong> il contenuto all'interno dell'elemento
<code>noscript</code> verrà visualizzato solo se il browser dell'utente non
supporta lo scripting o lo scripting è disabilitato nel browser.</p >
</div>

DOCTYPE html>
<html lang="it">
<testa>
<title>Incorporamento di JavaScript</title>
</testa>
<corpo>
<div id="greet"></div>
<copione>
document.getElementById("greet").innerHTML = "Ciao mondo!";
</copione>
</corpo>
<html lang="it">
<testa>
<title>Collegamento di JavaScript esterno</title>
</testa>
<corpo>
<script src="ciao.js"></script>
</corpo>
<html lang="it">
<testa>
<title>Noscript Demo</title>
</testa>
<corpo>
<copione>
document.getElementById("greet").innerHTML = "Ciao mondo!";
</copione>
<noscript>
<p>Spiacenti! Questo sito Web richiede un browser abilitato per
JavaScript.</p>
</noscript>
</corpo>
</html></code></pre><p class="summary">In questo tutorial imparerai come
includere JavaScript in un documento HTML.</p><p>Lo scripting lato client si
riferisce al tipo di programmi per computer che vengono eseguiti dal browser Web
dell'utente. JavaScript (JS) è il linguaggio di scripting lato client più
diffuso sul Web.</p><p>L'elemento <code><script></code> viene utilizzato
per incorporare o fare riferimento a JavaScript all'interno di un documento HTML
da aggiungere interattività alle pagine Web e fornire un'esperienza utente
significativamente migliore.</p><p class="space">Alcuni degli usi più comuni di
JavaScript sono la convalida dei moduli, la generazione di messaggi di avviso,
la creazione di gallerie di immagini, la visualizzazione di contenuti nascosti,
la manipolazione del DOM e molti altri.</p><p>JavaScript può essere incorporato
direttamente all'interno della pagina HTML oppure inserito in un file di script
esterno e referenziato all'interno della pagina HTML. Entrambi i metodi
utilizzano l'elemento <code><script></code>. </p><p>Per incorporare
JavaScript in un file HTML, basta aggiungere il codice come contenuto di un
elemento <code><script></code>.</p><p>Il codice JavaScript nell'esempio
seguente scrivi una stringa di testo in una pagina web.</p><p>Puoi anche
inserire il tuo codice JavaScript in un file separato (con un'estensione
<code>.js</code>) e chiamare quel file nel tuo codice HTML documento attraverso
l'attributo <code>src</code> del tag <code><script></code>.</p><p>Questo è
utile se vuoi che lo stesso script sia disponibile per più documenti. Ti evita
di ripetere la stessa attività più e più volte e rende il tuo sito web molto più
facile da mantenere.</p><p>Il seguente esempio mostra come collegare un file JS
esterno in HTML.</p><p>Il < code><noscript></code> viene utilizzato per
fornire un contenuto alternativo per gli utenti che hanno disabilitato
JavaScript nel proprio browser o hanno un browser che non supporta lo scripting
lato client.</p><p>Questo L'elemento può contenere qualsiasi elemento HTML, a
parte <code><script></code>, che può essere incluso nel <a href="../html-
reference/html-body-tag.php"><code ><body></code></a> di una normale
pagina HTML. Diamo un'occhiata a un esempio:</p>
<h1>HTML <span>Entità</span></h1><h2>Che cos'è l'entità HTML?</h2><h2>Entità

carattere HTML utilizzate di frequente</h2>
<p><strong>Suggerimento:</strong> lo spazio unificatore
(<code> </code>) viene utilizzato per creare uno spazio vuoto tra due
elementi che non possono essere separati da un'interruzione di riga. Sono anche
utilizzati per visualizzare più spazi poiché i browser Web visualizzano solo uno
spazio se vengono creati più spazi utilizzando la barra spaziatrice.</p>
</div>
<p><strong>Nota:</strong> i nomi delle entità HTML fanno distinzione tra
maiuscole e minuscole! Consulta il riferimento <a href="../html-reference/html-
character-entities.php">entità carattere HTML</a> per un elenco completo delle
entità carattere di caratteri speciali e simboli.</p>
</div>
<p class="summary">In questo tutorial imparerai come utilizzare le entità HTML

per visualizzare caratteri e simboli speciali.</p><p>Alcuni caratteri sono
riservati in HTML, ad esempio non puoi utilizzare il minore di (<code
><</code>) o segni di maggiore di (<code>></code>) o parentesi angolari
all'interno del testo, perché il browser potrebbe scambiarli per markup, mentre
alcuni caratteri non sono presenti sulla tastiera come copyright symbol ©.</p><p
class="space">Per visualizzare questi caratteri speciali, devono essere
sostituiti con le entità carattere. I riferimenti a entità carattere, o entità
in breve, ti consentono di utilizzare i caratteri che non possono essere
espressi nella codifica dei caratteri del documento o che non possono essere
inseriti da una tastiera.</p><p>Puoi utilizzare riferimenti a caratteri
numerici, invece di entità nomi. Un vantaggio chiave dell'utilizzo di
riferimenti a caratteri numerici è che hanno un supporto browser più forte e
possono essere utilizzati per specificare qualsiasi <a
href="http://www.unicode.org/charts/" rel="nofollow" target=" _blank">Carattere
Unicode</a>, mentre le entità sono limitate a un sottoinsieme di this.</p>
<h1>HTML <span>URL</span></h1><h2>Cos'è l'URL?</h2><h2>La sintassi dell'URL</h2>

<p><strong>Nota:</strong> i componenti dello schema e dell'host di un URL non
fanno distinzione tra maiuscole e minuscole, ma il percorso e la stringa di
query fanno distinzione tra maiuscole e minuscole. Di solito l'intero URL è
specificato in minuscolo.</p>
</div>
<li><strong>Nome schema</strong>: lo schema identifica il protocollo da
utilizzare per accedere alla risorsa su Internet. I nomi degli schemi seguiti
dai tre caratteri <code>://</code> (due punti e due barre). I protocolli più
comunemente usati sono <code>http://</code>, <code>https://</code>,
<code>ftp://</code> e <code>mailto:// </code>.</li><li class="alt"><strong>Nome
host</strong> — Il nome host identifica l'host in cui si trova la risorsa. Un
nome host è un nome di dominio assegnato a un computer host. Di solito è una
combinazione del nome locale dell'host con il nome del dominio principale. Ad
esempio, <code>www.tutorialrepublic.com</code> è composto dal nome della
macchina dell'host <code>www</code> e dal nome del dominio
<code>tutorialrepublic.com</code>.</li><li> <strong>Numero di porta</strong>: i
server spesso forniscono più di un tipo di servizio, quindi devi anche
comunicare al server quale servizio viene richiesto. Queste richieste vengono
effettuate in base al numero di porta. I numeri di porta noti per un servizio
vengono normalmente omessi dall'URL. Ad esempio, il servizio web HTTP viene
eseguito per impostazione predefinita sulla porta 80, HTTPS viene eseguito per
impostazione predefinita sulla porta 443.</li><li
class="alt"><strong>Percorso</strong> — Il percorso identifica la risorsa
specifica all'interno del host a cui l'utente desidera accedere. Ad esempio,
<code>/html/html-url.php</code>, <code>/news/technology/</code>,
ecc.</li><li><strong>Stringa di query</strong> — La stringa di query contiene i
dati da passare agli script lato server, in esecuzione sul server web. Ad
esempio, i parametri per una ricerca. La stringa di query preceduta da un punto
interrogativo (<code>?</code>), di solito è una stringa di coppie di nome e
valore separate da una e commerciale (<code>&</code>), ad esempio, <code>?
first_name=John&last_name=Corner</code>, <code>q=mobile+phone</code> e così
via.</li><li class="alt"><strong>Identificatore di frammento</strong> —
L'identificatore di frammento, se presente, specifica una posizione all'interno
della pagina. Il browser può scorrere per visualizzare quella parte della
pagina. L'identificatore di frammento introdotto da un cancelletto
(<code>#</code>) è l'ultima parte facoltativa di un URL per un documento.</li>
<p class="summary">In questo tutorial imparerai in dettaglio le diverse parti di
un URL.</p><p>URL sta per <b>U</b>niform <b>R</b >esource <b>L</b>ocator è
l'indirizzo globale di documenti e altre risorse sul World Wide Web. Il suo
scopo principale è identificare la posizione di un documento e di altre risorse
disponibili su Internet e specificare il meccanismo per accedervi tramite un
browser web.</p><p>Ad esempio, se guardi la barra degli indirizzi del tuo
browser che vedrai:</p><p>— Questo è l'URL della pagina web che stai
visualizzando in questo momento.</p><p>La sintassi generale degli URL è la
seguente:</p><p> Un URL ha una struttura lineare e normalmente è costituito da
alcuni dei seguenti elementi:</p>
<h1>HTML <span>Codifica URL</span></h1><h2>Cos'è la codifica

URL</h2><h2>Caratteri riservati</h2><h2>Caratteri non riservati</h2><h2 id=
"url-encoder">Convertitore di codifica URL</h2>
<li>All'inizio i dati vengono codificati secondo la codifica dei caratteri UTF-
8.</li><li>Quindi solo i byte che non corrispondono ai caratteri nel set non
riservato dovrebbero essere codificati in percentuale come %HH, dove HH è il
valore esadecimale del byte.</li>
<p class="summary">In questo tutorial imparerai come codificare l'URL per
trasmettere dati in modo sicuro su Internet.</p><p>Secondo <a
href="https://tools.ietf.org/ html/rfc3986" rel="nofollow" target="_blank">RFC
3986</a>, i caratteri in un URL sono limitati solo a un set definito di
caratteri US-ASCII riservati e non riservati. Qualsiasi altro carattere non è
consentito in un URL. Ma l'URL spesso contiene caratteri al di fuori del set di
caratteri US-ASCII, quindi devono essere convertiti in un formato US-ASCII
valido per l'interoperabilità mondiale. La codifica URL, nota anche come
codifica percentuale, è un processo di codifica delle informazioni sugli URL in
modo che possano essere trasmesse in modo sicuro su Internet.</p><p>Per mappare
l'ampia gamma di caratteri utilizzati in tutto il mondo, due- viene utilizzato
il processo step:</p><p>Ad esempio, la stringa: <b>François</b> verrebbe
codificata come: <b>Fran%C3%A7ois</b></p><p> Ç, ç (c-cediglia) è una lettera
dell'alfabeto latino.</p><p>Alcuni caratteri sono riservati o limitati dall'uso
in un URL perché possono (o meno) essere definiti come delimitatori dalla
sintassi generica in un particolare <a href="html-url.php">schema URL</a>. Ad
esempio, i caratteri barra <code>/</code> vengono utilizzati per separare parti
diverse di un URL.</p><p class="break">Se i dati di un componente URL contengono
caratteri che potrebbero entrare in conflitto con un URL riservato set di
caratteri, definito come delimitatore nello schema dell'URL, il carattere in
conflitto deve essere codificato in percentuale prima che venga formato l'URL. I
caratteri riservati in un URL sono:</p><p class="break">I caratteri consentiti
in un URL ma che non hanno uno scopo riservato sono chiamati non riservati.
Questi includono lettere maiuscole e minuscole, cifre decimali, trattino, punto,
trattino basso e tilde. La seguente tabella elenca tutti i caratteri non
riservati in un URL:</p><p>Il seguente convertitore codifica e decodifica i
caratteri secondo <a href="https://tools.ietf.org/html/rfc3986" rel= "nofollow"
target="_blank">RFC 3986</a>.</p><p>Inserisci un carattere e fai clic sul
pulsante codifica o decodifica per vedere l'output.</p>
<h1>Convalida <span>HTML</span></h1><h2>Perché convalidare il codice

HTML</h2><h2>Convalida di una pagina Web</h2>
<p><strong>Nota:</strong> la convalida è importante. Garantirà che le tue pagine
web vengano interpretate allo stesso modo (nel modo desiderato) dai vari browser
web, motori di ricerca, ecc.</p>
</div>
<li>Aiuta a creare pagine web compatibili con più browser e piattaforme.
Probabilmente sarà anche compatibile con la versione futura dei browser web e
degli standard web.</li><li>Le pagine web conformi agli standard aumentano la
visibilità degli spider e dei crawler dei motori di ricerca, di conseguenza le
tue pagine web appariranno più probabilmente nella ricerca
risultati.</li><li>Ridurrà gli errori imprevisti e renderà le tue pagine web più
accessibili al visitatore.</li>
<p class="summary">In questo tutorial imparerai come convalidare il tuo codice
HTML per assicurarti che il tuo codice HTML segua gli attuali standard web e sia
privo di errori.</p><p>Come principiante lo è molto comune che commetterai
errori nello scrivere il tuo codice HTML. Un codice errato o non standard può
causare risultati imprevisti nel modo in cui la tua pagina viene visualizzata o
funziona nei browser.</p><p>Per evitare ciò, puoi testare o convalidare il tuo
codice HTML rispetto alle linee guida e agli standard formali stabiliti dal Wide
Web Consortium (W3C) per le pagine Web HTML/XHTML.</p><p class="space">Il World
Wide Web Consortium fornisce un semplice strumento online (<a
href="https://validator.w3.org/" rel ="nofollow"
target="_blank">https://validator.w3.org/</a>) che controllano automaticamente
il tuo codice HTML e segnalano eventuali problemi/errori che il tuo codice
potrebbe avere, come tag di chiusura mancanti o virgolette intorno agli
attributi.</p><p>La convalida di una pagina web è un processo per garantire che
sia conforme alle norme o agli standard definiti dal World Wide Web Consortium
(W3C), che è l'autorità per mantenere gli standard HTML.</p ><p>Ci sono diversi
motivi specifici per convalidare una pagina web, alcuni di questi
sono:</p><p>Segui il link indicato di seguito per convalidare il tuo documento
HTML/XHTML. Rileverà automaticamente se stai utilizzando HTML o XHTML e quale
doctype stai utilizzando.</p>
<h1>HTML5 <span>Nuovi tipi di input</span></h1><h2>Nuovi tipi di input in

HTML5</h2><h2 id="color-input">Colore del tipo di input</h2><h2 id ="date-
input">Tipo di input Data</h2><h2 id="datetime-local-input">Tipo di input
Datetime-local</h2><h2 id="email-input">Tipo di input Email</ h2><h2 id="month-
input">Mese tipo input</h2><h2 id="number-input">Numero tipo input</h2><h2
id="range-input">Intervallo tipo input< /h2><h2 id="search-input">Input Type
Search</h2><h2 id="tel-input">Input Type Tel</h2><h2 id="time-input">Input Type
Time </h2><h2 id="url-input">URL tipo di input</h2><h2 id="week-input">Tipo di
input settimana</h2>
<p><strong>Suggerimento:</strong> puoi definire lo stile del campo di immissione
dell'e-mail per diversi stati di convalida, quando viene inserito un valore
utilizzando <code>:valid</code>, <code>:invalid</code> o <code>:required</code>
<a href="/css-tutorial/css-pseudo-classes.php">pseudo-classi</a>.</p>
</div>
<p><strong>Nota:</strong> l'input del colore (ad es. <code>type="color"</code>)
è supportato in tutti i principali browser Web moderni come Firefox, Chrome,
Opera, Safari (12.1+ ), Bordo (14+). Non supportato da Microsoft Internet
Explorer e versioni precedenti dei browser Apple Safari.</p>
</div>
<p><strong>Nota:</strong> l'inserimento della data (ovvero
<code>type="date"</code>) è supportato dai browser Chrome, Firefox, Opera e
Edge. Non supportato dai browser Internet Explorer e Safari.</p>
</div>
<p><strong>Nota:</strong> la convalida per l'inserimento dell'email (ad es.
<code>type="email"</code>) è supportata da tutti i principali browser come
Firefox, Chrome, Safari, Opera, Internet Explorer 10 e versioni successive.</p>
</div>
<p><strong>Nota:</strong> l'inserimento del numero (ad es.
<code>type="number"</code>) è supportato da tutti i principali browser web come
Firefox, Chrome, Safari, Opera, Internet Explorer 10 e al di sopra. Internet
Explorer tuttavia ha riconosciuto il numero ma non fornisce pulsanti di
selezione di incremento e decremento.</p>
</div>
<p><strong>Nota:</strong> l'input dell'intervallo (ovvero
<code>type="range"</code>) è supportato da tutti i principali browser web come
Firefox, Chrome, Safari, Opera, Internet Explorer 10 e superiori.</p>
</div>
<p><strong>Nota:</strong> l'input di ricerca (ovvero <code>type="search"</code>)
è supportato da tutti i principali browser web come Firefox, Chrome, Safari,
Opera, Internet Explorer 10 e superiori.</p>
</div>
<p><strong>Nota:</strong> la convalida per l'input tel (ad es.
<code>type="tel"</code>) non è attualmente supportata da nessun browser perché
il formato dei numeri di telefono varia molto da un paese all'altro, ma è ancora
utile. I browser per dispositivi mobili visualizzano una tastiera numerica per
il campo di immissione tel per l'inserimento dei numeri di telefono.</p>
</div>
<p><strong>Nota:</strong> la convalida per l'inserimento dell'URL (ad es.
<code>type="url"</code>) è supportata da tutti i principali browser come
Firefox, Chrome, Safari, Opera, Internet Explorer 10 e versioni successive.</p>
</div>
<li><a href="#color-input">colore</a></li><li><a
href="#date-input">data</a></li><li>< a href="#datetime-local-input">datetime-
local</a></li><li><a href="#email-input">e-mail</a></li><li>< un href="#month-
input">mese</a></li><li><a href="#number-input">numero</a></li><li><a href="
#range-input">intervallo</a></li><li><a
href="#search-input">ricerca</a></li><li><a href="#tel-input
">tel</a></li><li><a href="#time-input">ora</a></li><li><a href="#url-
input">url< /a></li><li><a href="#week-input">settimana</a></li>
markup"><form>
<label for="mycolor">Seleziona colore:</label>
<input type="color" value="#00ff00" id="mycolor">
<label for="mydate">Seleziona data:</label>
<input type="date" value="2019-04-15" id="mydate">
<label for="mydatetime">Scegli data e ora:</label>
<input type="datetime-local" id="mydatetime">
<label for="myemail">Inserisci l'indirizzo email:</label>
<input type="email" id="myemail" richiesto>
<label for="mymonth">Seleziona mese:</label>
<input type="mese" id="miomese">
<label for="mynumber">Inserisci un numero:</label>
<input type="number" min="1" max="10" step="0.5" id="mynumber">
<label for="mynumber">Seleziona un numero:</label>
<input type="range" min="1" max="10" step="0.5" id="mynumber">
<label for="mysearch">Cerca nel sito web:</label>
<input type="search" id="mysearch">
<label for="myphone">Numero di telefono:</label>
<input type="tel" id="myphone" placeholder="xx-xxxx-xxxx" richiesto>
<label for="mytime">Seleziona ora:</label>
<input type="time" id="mytime">
<label for="myurl">Inserisci l'URL del sito web:</label>
<input type="url" id="myurl" richiesto>
<label for="myweek">Seleziona settimana:</label>
<input type="week" id="myweek">
</form></code></pre><p class="summary">In questo tutorial imparerai i
nuovi tipi di input che sono stati introdotti in HTML5.</p><p>HTML5 introduce
diverse novità <a href="/html-reference/html-input-
tag.php"><code><input></code></a> tipi come email, data, ora, colore,
intervallo e così via. per migliorare l'esperienza dell'utente e per rendere i
moduli più interattivi. Tuttavia, se un browser non riesce a riconoscere questi
nuovi tipi di input, li tratterà come una normale casella di testo.</p><p
class="break">In questa sezione daremo una breve occhiata a ognuno di i seguenti
nuovi tipi di input:</p><p>C'era anche un tipo di input <code>datetime</code>
per inserire una data e un'ora, ma ora è obsoleto.</p><p>Il <code Il tipo di
input >color</code> consente all'utente di selezionare un colore da un selettore
di colori e restituisce il valore del colore in formato esadecimale
(<code>#rrggbb</code>). Se non specifichi un valore, il valore predefinito è
<code>#000000</code>, che è nero.</p><p>Proviamo il seguente esempio per capire
come funziona sostanzialmente:</p> <p>Il tipo di input <code>data</code>
consente all'utente di selezionare una data da un calendario a discesa.</p><p>Il
valore della data include l'anno, il mese e il giorno, ma non il time.</p><p>Il
tipo di input <code>datetime-local</code> consente all'utente di selezionare sia
la data che l'ora locali, inclusi l'anno, il mese e il giorno, nonché l'ora in
ore e minuti .</p><p>Proviamo il seguente esempio per capire come funziona
sostanzialmente:</p><p><strong>Avviso:</strong> l'input <code>type="datetime-
local"< /code> non è supportato dai browser Firefox, Safari e Internet Explorer.
Attualmente supportato dai browser Chrome, Edge e Opera.</p><p>Il tipo di input
<code>email</code> consente all'utente di inserire l'indirizzo e-mail. È molto
simile a un tipo di input di testo standard, ma se viene utilizzato in
combinazione con l'attributo <code>required</code>, il browser potrebbe cercare
i modelli per garantire che venga inserito un indirizzo e-mail correttamente
formattato .</p><p>Proviamo questo esempio inserendo qualsiasi indirizzo e-mail
per vedere come funziona effettivamente:</p><p>Il tipo di input
<code>mese</code> consente all'utente di selezionare un mese e un anno da un
calendario a discesa.</p><p>Il valore è una stringa nel formato "AAAA-MM", dove
AAAA è l'anno a quattro cifre e MM è il numero del mese. Proviamo un esempio per
vedere come funziona sostanzialmente:</p><p><strong>Avviso:</strong> l'input
<code>type="month"</code> non è supportato da Firefox, Safari e Browser Internet
Explorer. Attualmente supportato nei browser Chrome, Edge e Opera.</p><p>Il tipo
di input <code>numero</code> può essere utilizzato per inserire un valore
numerico. Puoi anche limitare l'utente a inserire solo valori accettabili
utilizzando gli attributi aggiuntivi <code>min</code>, <code>max</code> e
<code>step</code>.</p><p> L'esempio seguente ti consentirà di inserire un valore
numerico compreso tra 1 e 10.</p><p>Il tipo di input <code>range</code> può
essere utilizzato per inserire un valore numerico all'interno di un intervallo
specificato. Funziona in modo molto simile all'inserimento di
<code>number</code>, ma offre un controllo più semplice per l'inserimento di un
numero.</p><p>Proviamo il seguente esempio per capire come funziona
sostanzialmente: </p> <p>Il tipo di input <code>search</code> può essere
utilizzato per creare campi di input di ricerca.</p><p>Un campo di ricerca si
comporta in genere come un normale campo di testo, ma in alcuni browser come
Chrome e Safari come non appena si inizia a digitare nella casella di ricerca,
sul lato destro del campo viene visualizzata una piccola croce che consente di
cancellare rapidamente il campo di ricerca. Proviamo un esempio per vedere come
funziona:</p><p>Il tipo di input <code>tel</code> può essere utilizzato per
inserire un numero di telefono.</p><p>I browser non supportano convalida
dell'input tel in modo nativo. Tuttavia, puoi utilizzare l'attributo
<code>placeholder</code> per aiutare gli utenti a inserire il formato corretto
per un numero di telefono o specificare un <a
href="/javascript-tutorial/javascript-regular-expressions.php"> espressione
regolare</a> per convalidare l'input dell'utente utilizzando l'attributo
<code>pattern</code>. Diamo un'occhiata a un esempio:</p><p>Il tipo di input
<code>time</code> può essere utilizzato per inserire un orario (ore e
minuti).</p><p>Il browser può utilizzare 12- o Formato di 24 ore per
l'inserimento dell'ora, basato sull'impostazione dell'ora del sistema
locale.</p><p><strong>Avviso:</strong> l'inserimento <code>type="time"</code>
non è supportato da Internet Browser Explorer e Safari. Attualmente supportato
dai browser Chrome, Firefox, Edge e Opera.</p><p>Il tipo di input
<code>url</code> può essere utilizzato per inserire URL o indirizzi
web.</p><p>Puoi usa l'attributo <code>multiple</code> per inserire più di un
URL. Inoltre, se viene specificato l'attributo <code>required</code>, il browser
eseguirà automaticamente la convalida per garantire che nella casella di input
venga immesso solo il testo che corrisponde al formato standard per gli URL.
Vediamo come funziona:</p><p>Il tipo di input <code>settimana</code> consente
all'utente di selezionare una settimana e un anno da un calendario a
discesa.</p><p>Proviamo il seguente esempio per capire come
funziona:</p><p><strong>Avviso:</strong> l'input <code>type="week"</code> non è
supportato dai browser Firefox, Safari e Internet Explorer . Attualmente
supportato dai browser Chrome, Edge e Opera.</p>
<h1>HTML5 <span>Canvas</span></h1><h2>Cos'è Canvas?</h2><h2>Capire le coordinate

di Canvas</h2><h2>Disegnare percorsi e forme su Canvas</h2> <h2>Disegnare una
linea</h2><h2>Disegnare un arco</h2><h2>Disegnare un
rettangolo</h2><h2>Disegnare un cerchio</h2><h2>Applicare stili e colori al
tratto< /h2><h2>Riempimento dei colori all'interno delle forme della
tela</h2><h2>Riempimento dei colori sfumati all'interno delle forme della
tela</h2><h2>Disegno del testo sulla tela</h2>
<p><strong>Suggerimento:</strong> posiziona il puntatore del mouse all'interno
dell'area della tela mostrata sopra e otterrai le sue coordinate correnti
relative alla tela. L'elemento <code><canvas></code> è supportato in tutti
i principali browser Web come Chrome, Firefox, Safari, Opera, IE 9 e versioni
successive.</p>
</div>
<p><strong>Suggerimento:</strong> durante lo styling delle forme sulla tela, si
consiglia di utilizzare il metodo <code>fill()</code> prima del metodo
<code>stroke()</code> in per rendere correttamente il tratto.</p>
</div>
<p><strong>Suggerimento:</strong> durante lo styling del testo sulla tela, si
consiglia di utilizzare il metodo <code>fillText()</code> prima del metodo
<code>strokeText()</code> in per rendere correttamente il tratto.</p>
</div>

DOCTYPE html>
<html lang="it">
<testa>
<title>Disegno su tela</title>
<copione>
window.onload = funzione() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// disegna cose qui
};
</copione>
</testa>
<corpo>
<canvas id="myCanvas" width="300" height="200"></canvas>
</corpo>
class="language-markup"><script>
contesto.moveTo(50, 150);
contesto.lineTo(250, 50);
contesto.stroke();
};
</script></code></pre><pre class="syntax-highlighter line-numbers"><code
context.arc(150, 150, 80, 1.2 * Math.PI, 1.8 * Math.PI, false);
contesto.stroke();
};
contesto.rect(50, 50, 200, 100);
contesto.stroke();
};
context.arc(150, 100, 70, 0, 2 * Math.PI, false);
contesto.stroke();
};
context.lineWidth = 5;
context.strokeStyle = "arancione";
contesto.moveTo(50, 150);
contesto.lineTo(250, 50);
contesto.stroke();
};
context.lineCap = "rotondo";
context.arc(150, 150, 80, 1.2 * Math.PI, 1.8 * Math.PI, false);
contesto.stroke();
};
contesto.rect(50, 50, 200, 100);
contesto.fillStyle = "#FB8B89";
contesto.fill();
context.strokeStyle = "nero";
contesto.stroke();
};
contesto.fillStyle = "#FB8B89";
contesto.fill();
context.strokeStyle = "nero";
contesto.stroke();
};
contesto.rect(50, 50, 200, 100);
var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height);
grd.addColorStop(0, '#8ED6FF');
grd.addColorStop(1, '#004CB3');
contesto.fillStyle = grd;
contesto.fill();
contesto.stroke();
};
var grd = context.createRadialGradient(150, 100, 10, 160, 110, 100);
grd.addColorStop(0, '#8ED6FF');
grd.addColorStop(1, '#004CB3');
contesto.fillStyle = grd;
contesto.fill();
contesto.stroke();
};
context.font = "bold 32px Arial";
context.fillText("Ciao mondo!", 50, 100);
};
context.textAlign = "centro";
context.textBaseline = "centrale";
context.fillStyle = "arancione";
context.fillText("Ciao mondo!", 150, 100);
};
context.textAlign = "centro";
context.textBaseline = "centrale";
context.strokeText("Ciao mondo!", 150, 100);
};
</script></code></pre><p class="summary">In questo tutorial imparerai a
disegnare grafica su una pagina web utilizzando l'elemento HTML5
canvas.</p><p>L'HTML5 L'elemento canvas può essere utilizzato per disegnare
grafica sulla pagina Web tramite JavaScript. La tela è stata originariamente
introdotta da Apple per i widget della dashboard di Mac OS e per potenziare la
grafica nel browser Web Safari. Successivamente è stato adottato da Firefox,
Google Chrome e Opera. Ora il canvas fa parte della nuova specifica HTML5 per le
tecnologie web di prossima generazione.</p><p class="space">Per impostazione
predefinita, l'elemento <code><canvas></code> ha 300 px di larghezza e 150
px di altezza senza alcun confine e contenuto. Tuttavia, la larghezza e
l'altezza personalizzate possono essere definite utilizzando il CSS <a
href="/css-reference/css-height-property.php"><code>height</code></a> e <a
href="/ css-reference/css-width-property.php"><code>width</code></a> mentre il
bordo può essere applicato utilizzando la <a href="/css-reference/css-border-
property CSS .php"><code>border</code></a> proprietà.</p><p>La tela è un'area
rettangolare bidimensionale. Le coordinate dell'angolo in alto a sinistra
dell'area di disegno sono (0, 0), noto come origine, e le coordinate dell'angolo
in basso a destra sono (<em>larghezza dell'area di disegno</em>, <em>altezza
dell'area di disegno< /em>). Ecco una semplice dimostrazione del sistema di
coordinate predefinito del canvas.</p><p>In questa sezione daremo un'occhiata
più da vicino a come disegnare percorsi e forme di base utilizzando il nuovo
elemento canvas HTML5 e JavaScript.</p ><p>Ecco il modello di base per disegnare
percorsi e forme sulla tela HTML5 2D.</p><p class="space">Tutte le linee tranne
quelle da 7 a 11 sono piuttosto semplici. La funzione anonima allegata
all'evento <code>window.onload</code> verrà eseguita al caricamento della
pagina. Una volta caricata la pagina, possiamo accedere all'elemento canvas con
il metodo <code>document.getElementById()</code>. Successivamente abbiamo
definito un contesto canvas 2D passando 2d nel metodo <code>getContext()</code>
dell'oggetto canvas.</p><p>Il percorso più semplice che puoi disegnare su canvas
è una linea retta. I metodi più essenziali usati per questo scopo sono
<code>moveTo()</code>, <code>lineTo()</code> e <code>stroke()</code>.</p><p> Il
metodo <code>moveTo()</code> definisce la posizione del cursore di disegno sulla
tela, mentre il metodo <code>lineTo()</code> definisce le coordinate del punto
finale della linea, e infine il metodo < code>stroke()</code> viene utilizzato
per rendere visibile la linea. Proviamo un esempio:</p><p>Puoi creare archi
usando il metodo <code>arc()</code>. La sintassi di questo metodo è la
seguente:</p><p>Il codice JavaScript nell'esempio seguente disegnerà un arco
sull'area di disegno.</p><p>Puoi creare forme rettangolari e quadrate
utilizzando il <code> metodo rect()</code>. Questo metodo richiede quattro
parametri x, y posizione del rettangolo e la sua larghezza e altezza.</p><p>La
sintassi di base del metodo <code>rect()</code> può essere data con:</p> <p>Il
seguente codice JavaScript disegnerà una forma rettangolare centrata sull'area
di disegno.</p><p>Non esiste un metodo specifico per creare un cerchio come il
metodo <code>rect()</code> del rettangolo. Tuttavia, puoi creare un arco
completamente chiuso come un cerchio usando il metodo
<code>arc()</code>.</p><p>La sintassi per disegnare un cerchio completo usando
<code>arc()</code> code> può essere fornito con:</p><p>Il seguente esempio
disegnerà un cerchio completo centrato sulla tela.</p><p>Il colore predefinito
del tratto è nero e il suo spessore è di un pixel. Tuttavia, puoi impostare il
colore e la larghezza del tratto utilizzando rispettivamente le proprietà
<code>strokeStyle</code> e <code>lineWidth</code>.</p><p>Il seguente esempio
disegnerà una linea di colore arancione con una larghezza di 5 pixel.</p><p>Puoi
anche impostare lo stile del capo per le linee usando la proprietà
<code>lineCap</code>. Sono disponibili tre stili per i cappucci delle linee:
testa a testa, tondo e quadrato. Ecco un esempio:</p><p>Puoi anche riempire il
colore all'interno delle forme della tela usando il metodo
<code>fillStyle()</code>.</p><p>Il seguente esempio ti mostrerà come riempire un
colore a tinta unita all'interno di una forma rettangolare.</p><p>Allo stesso
modo, puoi utilizzare il metodo <code>fillStyle()</code> per riempire il colore
a tinta unita anche all'interno di un cerchio.</p><p>Puoi riempi anche il colore
sfumato all'interno delle forme della tela. Un gradiente è solo una transizione
visiva uniforme da un colore all'altro. Sono disponibili due tipi di gradiente:
<em>lineare</em> e <em>radiale</em>.</p><p>La sintassi di base per creare un
gradiente lineare può essere fornita con:</p> <p>L'esempio seguente utilizza il
metodo <code>createLinearGradient()</code> per riempire un colore sfumato
lineare all'interno di un rettangolo. Proviamolo per capire come funziona
sostanzialmente:</p><p>Allo stesso modo, puoi riempire le forme della tela con
gradiente radiale usando il metodo <code>createRadialGradient()</code>. La
sintassi di base per la creazione di un gradiente radiale può essere fornita
con:</p><p>L'esempio seguente utilizza il metodo
<code>createRadialGradient()</code> per riempire un colore del gradiente radiale
all'interno di un cerchio. Proviamolo per capire come funziona
effettivamente:</p><p>Puoi anche disegnare del testo sulla tela. Questi testi
possono contenere qualsiasi carattere Unicode. L'esempio seguente disegnerà un
semplice messaggio di saluto "Hello World!" su un'area di disegno.</p><p>Puoi
inoltre impostare il colore e l'allineamento del testo sull'area di disegno, in
questo modo:</p><p>Puoi anche applicare il tratto al testo utilizzando
<code>strokeText( )</code>. Questo metodo colorerà il perimetro del testo invece
di riempirlo. Tuttavia, se desideri impostare sia il riempimento che il tratto
sul testo dell'area di disegno, puoi utilizzare insieme i metodi
<code>fillText()</code> e <code>strokeText()</code>.</p>
<h1>HTML5 <span>SVG</span></h1><h2>Che cos'è SVG?</h2><h2>Incorporamento di SVG

in pagine HTML</h2><h2>Disegnare percorsi e forme con SVG</h1> h2><h2>Disegnare
una linea</h2><h2>Disegnare un rettangolo</h2><h2>Disegnare un
cerchio</h2><h2>Disegnare testo con SVG</h2><h2>Differenze tra SVG e Tela</h2>
<p><strong>Suggerimento:</strong> le immagini vettoriali sono composte da un
insieme fisso di forme definite dalla matematica, mentre le immagini bitmap o
raster sono composte da un insieme fisso di punti chiamati pixel.</p>
</div>
<p><strong>Nota:</strong> tutti i principali browser Web moderni come Chrome,
Firefox, Safari e Opera, nonché Internet Explorer 9 e versioni successive
supportano il rendering SVG in linea.</p>
</div>
<li>Le immagini SVG possono essere ricercate, indicizzate, inserite in script e
compresse.</li><li>Le immagini SVG possono essere create e modificate
utilizzando JavaScript in tempo reale.</li><li>Le immagini SVG possono essere
stampate con qualità a qualsiasi risoluzione.</li><li>I contenuti SVG possono
essere animati utilizzando gli elementi di animazione incorporati.</li><li>Le
immagini SVG possono contenere <a href="html-links.php">collegamenti
ipertestuali< /a> ad altri documenti.</li>
DOCTYPE html>
<html lang="it">
<testa>
<title>Incorporamento di SVG in HTML</title>
</testa>
<corpo>
<svg width="300" height="200">
<text x="10" y="20" style="font-size:14px;">
Il tuo browser supporta SVG.
</testo>
Spiacenti, il tuo browser non supporta SVG.
</svg>
</corpo>
class="language-markup"><svg width="300" height="200"&gt ;
<line x1="50" y1="50" x2="250" y2="150" style="stroke:red; stroke-
width:3;" />
</svg></code></pre><pre class="syntax-highlighter line-numbers"><code
<rect x="50" y="50" width="200" height="100" style="fill:orange; tratto:nero;
tratto-larghezza:3;" />
<circle cx="150" cy="100" r="70" style="riempimento:lime; tratto:nero;
larghezza del tratto:3;" />
<text x="20" y="30" style="fill:purple; font-size:22px;">
Benvenuti sul nostro sito web!
</testo>
<text x="20" y="30" dx="0" dy="20" style="fill:navy; font-size:14px;">
Qui troverai molte informazioni utili.
</testo>
<text x="30" y="15" style="fill:purple; font-size:22px;
transform:rotate(30deg);">
<tspan style="fill:purple; font-size:22px;">
Benvenuti sul nostro sito web!
</tspan>
<tspan dx="-230" dy="20" style="fill:navy; font-size:14px;">
Qui troverai molte informazioni utili.
</tspan>
</testo>
</svg></code></pre><p class="summary">In questo tutorial imparerai come
utilizzare l'elemento svg HTML5 per disegnare grafica vettoriale su una pagina
web.</p><p>Il Scalable Vector Graphics (SVG) è un formato di immagine basato su
XML utilizzato per definire grafica vettoriale bidimensionale per il Web. A
differenza di un'immagine raster (ad es. <code>.jpg</code>, <code>.gif</code>,
<code>.png</code>, ecc.), un'immagine vettoriale può essere ingrandita o ridotta
a qualsiasi senza perdere la qualità dell'immagine.</p><p>Un'immagine SVG viene
disegnata utilizzando una serie di istruzioni che seguono lo schema XML, il che
significa che le immagini SVG possono essere create e modificate con qualsiasi
editor di testo, come Blocco note. Ci sono molti altri vantaggi nell'usare SVG
rispetto ad altri formati di immagine come JPEG, GIF, PNG, ecc.</p><p>Puoi
incorporare la grafica SVG direttamente nel tuo documento usando
<code><svg> HTML5</code > elemento.</p><p>Diamo un'occhiata al seguente
esempio per capire come funziona sostanzialmente:</p><p></p><p class="space">La
sezione seguente ti spiegherà come disegnare percorsi e forme vettoriali di base
sulle pagine Web utilizzando l'elemento HTML5 <code><svg></code>
recentemente introdotto.</p><p>Il percorso più semplice che puoi disegnare con
SVG è un retta. L'esempio seguente ti mostrerà come creare una linea retta
utilizzando l'elemento SVG <code><line></code>:</p><p>Gli attributi
<code>x1</code>, <code>x2 </code>, <code>y1</code> e <code>y2</code>
dell'elemento <code><line></code> disegnano una linea da <code>(x1,y1)</
code> a <code>(x2,y2)</code>.</p><p>Puoi creare semplici forme rettangolari e
quadrate utilizzando l'elemento SVG <code><rect></code>. L'esempio
seguente ti mostrerà come creare e modellare una forma rettangolare con
SVG:</p><p>Gli attributi <code>x</code> e <code>y</code> di <code><rect&gt
L'elemento ;</code> definisce le coordinate dell'angolo in alto a sinistra del
rettangolo. Gli attributi <code>width</code> e <code>height</code> specificano
la larghezza e l'altezza della forma.</p><p>Puoi anche creare le forme del
cerchio usando l'SVG <code>< cerchio></code> elemento. L'esempio seguente
ti mostrerà come creare e modellare una forma circolare con SVG:</p><p>Gli
attributi <code>cx</code> e <code>cy</code> del <code>< circle></code>
definisce le coordinate del centro del cerchio e l'attributo <code>r</code>
specifica il raggio del cerchio. Tuttavia, se gli attributi <code>cx</code> e
<code>cy</code> vengono omessi o non specificati, il centro del cerchio viene
impostato su <code>(0,0)</code>.< /p><p>Puoi anche disegnare testo sulle pagine
web con SVG. Il testo in SVG è reso come un elemento grafico in modo da poter
applicare tutte le trasformazioni grafiche ad esso, ma si comporta ancora come
testo, il che significa che può essere selezionato e copiato come testo
dall'utente. Facciamo un esempio per vedere come funziona:</p><p>Gli attributi
<code>x</code> e <code>y</code> dell'elemento <code><text></code>
definisce la posizione dell'angolo in alto a sinistra in termini assoluti,
mentre gli attributi <code>dx</code> e <code>dy</code> specificano la posizione
relativa.</p><p>Puoi anche utilizzare < code><tspan></code> per
riformattare o riposizionare l'intervallo di testo contenuto all'interno di un
elemento <code><text></code>. Il testo contenuto in tspan separati, ma
all'interno dello stesso elemento di testo, può essere selezionato tutto in una
volta, facendo clic e trascinando per selezionare il testo. Tuttavia, il testo
in elementi di testo separati non può essere selezionato contemporaneamente.
Diamo un'occhiata a un esempio:</p><p>L'HTML5 ha introdotto i due nuovi elementi
grafici <code><canvas></code> e <code><svg></code> per la creazione
di grafica ricca sul web, ma sono fondamentalmente diversi.</p><p>La seguente
tabella riassume alcune delle differenze fondamentali tra questi due elementi,
che ti aiuteranno a capire come utilizzare questi elementi in modo efficace e
appropriato.</p>
<h1>HTML5 <span>Audio</span></h1><h2>Incorporamento dell'audio nel documento

HTML</h2><h2>Utilizzo dell'elemento audio HTML5</h2><h2>Collegamento di file
audio</h2> <h2>Uso dell'elemento oggetto</h2><h2>Uso dell'elemento embed</h2>

markup"><audio controls="controls" src="media/birds.mp3">
Il tuo browser non supporta l'elemento audio HTML5.
</audio></code></pre><pre class="syntax-highlighter line-numbers"><code
class="language-markup"><audio controls="controls">
<source src="media/birds.mp3" type="audio/mpeg">
<source src="media/birds.ogg" type="audio/ogg">
Il tuo browser non supporta l'elemento audio HTML5.
</audio></code></pre><pre class="syntax-highlighter line-numbers"><code
class="language-markup"><a href="media/sea.mp3"> Traccia 1</a>
<a href="media/wind.mp3">Traccia 2</a></code></pre><pre
class="syntax-highlighter line-numbers"><code class="language-markup"
><object data="media/sea.mp3"></object>
<object data="media/sea.ogg"></object></code></pre><pre
class="syntax-highlighter line-numbers"><code class="language-markup">
<incorpora src="media/wind.mp3">
<embed src="media/wind.ogg"></code></pre><p class="summary">In questo
tutorial imparerai come incorporare l'audio in un documento HTML.</p><
p>Inserire l'audio in una pagina web non era facile prima, perché i browser web
non avevano uno standard uniforme per definire i file multimediali incorporati
come l'audio.</p><p class="space">In questo capitolo dimostreremo alcuni dei
molti modi per incorporare l'audio nella tua pagina web, dall'uso di un semplice
collegamento all'uso dell'ultimo elemento HTML5
<code><audio></code>.</p><p>Il nuovo HTML5 < code><audio></code>
fornisce un modo standard per incorporare l'audio nelle pagine web. Tuttavia,
l'elemento audio è relativamente nuovo ma funziona nella maggior parte dei
browser Web moderni.</p><p>L'esempio seguente inserisce semplicemente un audio
nel documento HTML5, utilizzando il set di controlli predefinito del browser,
con una sorgente definita dall'attributo <code>src</code>.</p><p>Un audio,
utilizzando il set di controlli predefinito del browser, con fonti
alternative.</p><p>La traccia "ogg" nell'esempio precedente funziona in Firefox,
Opera e Chrome, mentre la stessa traccia nel formato "mp3" viene aggiunta per
far funzionare l'audio in Internet Explorer e Safari.</p><p>Puoi creare
collegamenti ai tuoi file audio e riprodurli spuntandoli.</p><p>Proviamo il
seguente esempio per capire come funziona sostanzialmente:</p><p>L'elemento
<code><object></code> viene utilizzato per incorporare diversi tipi di
file multimediali in un documento HTML. Inizialmente, questo elemento veniva
utilizzato per inserire controlli ActiveX, ma secondo le specifiche, un oggetto
può essere qualsiasi oggetto multimediale come audio, video, file PDF,
animazioni Flash o persino immagini.</p><p>Il seguente codice di esempio
incorpora un semplice file audio in una pagina
web.</p><p><strong>Avviso:</strong> Il <code><a href="../html-reference/html-
object-tag.php" L'elemento ><object></a></code> non è ampiamente
supportato e dipende molto dal tipo di oggetto che viene incorporato. Altri
metodi come l'elemento <code><audio></code> HTML5 o lettori audio HTML5 di
terze parti potrebbero essere una scelta migliore in molti
casi.</p><p>L'elemento <code><embed></code > viene utilizzato per
incorporare contenuti multimediali in un documento HTML.</p><p>Il seguente
frammento di codice incorpora file audio in una pagina
web.</p><p><strong>Avviso:</strong> Tuttavia l'elemento L'elemento
<code><embed></code> è molto ben supportato nei browser attuali e definito
come standard in HTML5, ma l'audio potrebbe non essere riprodotto a causa della
mancanza di supporto del browser per quel formato di file o dell'indisponibilità
dei plug-in.</p >
<h1>HTML5 <span>Video</span></h1><h2>Incorporamento di video in un documento

HTML</h2><h2>Utilizzo dell'elemento video HTML5</h2><h2>Utilizzo dell'elemento
oggetto</h2 ><h2>Utilizzo dell'elemento embed</h2><h2>Incorporamento dei video
di YouTube</h2>

markup"><video controls="controls" src="media/shuttle.mp4">
Il tuo browser non supporta l'elemento Video HTML5.
</video></code></pre><pre class="syntax-highlighter line-numbers"><code
class="language-markup"><video controls="controls">
<source src="media/shuttle.mp4" type="video/mp4">
<source src="media/shuttle.ogv" type="video/ogg">
Il tuo browser non supporta l'elemento Video HTML5.
</video></code></pre><pre class="syntax-highlighter line-numbers single-
line"><code class="language-markup"><object data="media/blur.swf "
width="400px" height="200px"></object></code></pre><pre class="syntax-
highlighter line-numbers single-line"><code class="language-markup "><embed
src="media/blur.swf" width="400px" height="200px"></code></pre><pre
class="syntax-highlighter line-numbers"><code class ="language-markup"><!
DOCTYPE html>
<html lang="it">
<testa>
<title>Video di YouTube</title>
</testa>
<corpo>
<iframe width="560" height="315" src="//www.youtube.com/embed/YE7VzlLtp-4"
frameborder="0" allowfullscreen></iframe>
</corpo>
incorporare video in un documento HTML.</p><p>L'inserimento di video in una
pagina web è stato non relativamente facile, perché i browser web non avevano
uno standard uniforme per la definizione di file multimediali incorporati come i
video.</p><p class="space">In questo capitolo mostreremo alcuni dei tanti modi
per aggiungere video sul web pagine, dall'ultimo elemento HTML5
<code><video></code> ai famosi video di YouTube.</p><p>Il nuovo elemento
HTML5 <code><video></code> fornisce uno standard modo per incorporare
video nelle pagine web. Tuttavia, l'elemento video è relativamente nuovo, ma
funziona nella maggior parte dei browser Web moderni.</p><p>L'esempio seguente
inserisce semplicemente un video nel documento HTML, utilizzando il set di
controlli predefinito del browser, con una sorgente definito dall'attributo
<code>src</code>.</p><p>Un video, utilizzando il set di controlli predefinito
del browser, con fonti alternative.</p><p>Il <code><object> L'elemento
</code> viene utilizzato per incorporare diversi tipi di file multimediali in un
documento HTML. Inizialmente, questo elemento veniva utilizzato per inserire
controlli ActiveX, ma secondo le specifiche, un oggetto può essere qualsiasi
oggetto multimediale come video, audio, file PDF, animazioni Flash o persino
immagini.</p><p>Il seguente frammento di codice incorpora un video Flash in una
pagina web.</p><p>Questo video verrà riprodotto solo dai browser o dalle
applicazioni che supportano Flash.</p><p><strong>Avviso:</strong> il <codice><a
L'elemento
href="../html-reference/html-object-tag.php"><object></a></code> non è
ampiamente supportato e dipende molto dal tipo di oggetto che viene incorporato.
Altri metodi potrebbero essere una scelta migliore in molti casi. I dispositivi
iPad e iPhone non possono visualizzare video Flash.</p><p>L'elemento
<code><embed></code> viene utilizzato per incorporare contenuti
multimediali in un documento HTML.</p><p>Il seguente codice fragment incorpora
un video Flash in una pagina web.</p><p><strong>Avviso:</strong> Tuttavia,
l'elemento <code><embed></code> è molto ben supportato nei browser web
attuali e è anche definito come standard in HTML5, ma il tuo video potrebbe non
essere riprodotto a causa della mancanza di supporto del browser per Flash o
dell'indisponibilità dei plug-in.</p><p>Questo è il modo più semplice e popolare
per incorporare i file video nelle pagine web . Basta caricare il video su
YouTube e inserire il codice HTML per visualizzare quel video nella tua pagina
web.</p><p>Ecco un esempio dal vivo seguito dalla spiegazione dell'intero
processo:</p><p class="break"> Vai alla pagina di caricamento del video su
YouTube e segui le istruzioni per caricare il tuo video.</p><p
class="break">Quando apri il video caricato su YouTube, vedrai qualcosa di
simile alla figura seguente nella parte inferiore del video. Sfoglia e apri il
tuo video caricato su YouTube. Ora cerca il pulsante di condivisione che si
trova appena sotto il video, come mostrato nella figura.</p><p
class="break">Quando fai clic sul pulsante di condivisione, si aprirà un
pannello di condivisione che mostra altri pulsanti. Ora fai clic sul pulsante
Incorpora, genererà il codice HTML per incorporare direttamente il video nelle
pagine web. Basta copiare e incollare quel codice nel documento HTML in cui si
desidera visualizzare il video e il gioco è fatto. Per impostazione predefinita,
il video è incorporato all'interno di un iframe.</p><p>Puoi personalizzare
ulteriormente questo codice di incorporamento, ad esempio modificando le
dimensioni del video, selezionando l'opzione di personalizzazione indicata
appena sotto la casella di inserimento del codice di incorporamento.</p><p>
L'esempio seguente incorpora semplicemente un video da YouTube. Proviamolo:</p>
<h1>HTML5 <span>Web Storage</span></h1><h2>Cos'è il Web

Storage?</h2><h2>L'oggetto localStorage</h2><h2>L'oggetto sessionStorage</h2>
<p><strong>Suggerimento:</strong> la funzione di archiviazione web di HTML5 è
supportata in tutti i principali browser Web moderni come Firefox, Chrome,
Opera, Safari e Internet Explorer 8 e versioni successive.</p>
</div>
<p><strong>Nota:</strong> i dati di archiviazione web (sia
<code>localStorage</code> che <code>sessionStorage</code>) non saranno
disponibili tra browser diversi, ad esempio i dati archiviati in Il browser
Firefox non sarà disponibile in Google Chrome, Safari, Internet Explorer o altri
browser.</p>
</div>
<li><strong>Archiviazione locale</strong>: l'archiviazione locale utilizza
l'oggetto <code>localStorage</code> per archiviare i dati dell'intero sito web
su <em>base permanente</em>. Ciò significa che i dati locali archiviati saranno
disponibili il giorno successivo, la settimana successiva o l'anno successivo a
meno che tu non li rimuova.</li><li><strong>Archiviazione della
sessione</strong>: l'archiviazione della sessione utilizza il <
code>sessionStorage</code> per archiviare i dati su <em>base temporanea</em>,
per una singola finestra o scheda del browser. I dati scompaiono al termine
della sessione, ovvero quando l'utente chiude la finestra o la scheda del
browser.</li><li><strong>localStorage.setItem(key, value)</strong> memorizza il
valore associato a una chiave.</li
><li><strong>localStorage.getItem(key)</strong> recupera il valore associato
alla chiave.</li>
markup"><script>
// Controlla se l'oggetto localStorage esiste
if(localStorage) {
// Immagazzina dati
localStorage.setItem("first_name", "Peter");
// Recupera i dati
alert("Ciao, " + localStorage.getItem("nome_nome"));
} altro {
alert("Spiacenti, il tuo browser non supporta l'archiviazione locale.");
}
// Controlla se l'oggetto sessionStorage esiste
if(sessionStorage) {
// Immagazzina dati
sessionStorage.setItem("cognome", "Parker");
// Recupera i dati
alert("Ciao, " + localStorage.getItem("first_name") + " " +
sessionStorage.getItem("last_name"));
} altro {
alert("Spiacenti, il tuo browser non supporta la memorizzazione delle
sessioni.");
}
</script></code></pre><p class="summary">In questo tutorial imparerai come
utilizzare la funzione di archiviazione Web HTML5 per archiviare i dati sul
browser dell'utente.</p><p>Gli HTML5 La funzione di web storage consente di
memorizzare alcune informazioni localmente sul computer dell'utente, in modo
simile ai cookie, ma è più veloce e molto migliore dei cookie. Tuttavia,
l'archiviazione web non è più sicura dei cookie. Consulta il tutorial sui <a
href="/php-tutorial/php-cookies.php">cookie PHP</a> per saperne di più sui
cookie.</p><p>Le informazioni memorizzate nella memoria web non sono non vengono
inviati al server web a differenza dei cookie in cui i dati vengono inviati al
server con ogni richiesta. Inoltre, laddove i cookie consentono di memorizzare
una piccola quantità di dati (quasi 4 KB), l'archiviazione web consente di
archiviare fino a 5 MB di dati.</p><p>Esistono due tipi di archiviazione web,
che differiscono per portata e lifetime:</p><p>Come affermato in precedenza,
l'oggetto localStorage memorizza i dati senza data di scadenza. Ogni pezzo di
dati è memorizzato in una coppia chiave/valore. La chiave identifica il nome
dell'informazione (come 'first_name') e il valore è il valore associato a quella
chiave (diciamo 'Peter'). Ecco un esempio:</p><p>Il codice JavaScript sopra
riportato ha il seguente significato:</p><p>Puoi anche rimuovere un particolare
elemento dalla memoria, se esiste, passando il nome della chiave al <code
>removeItem()</code>, come
<code>localStorage.removeItem("first_name")</code>.</p><p>Tuttavia, se vuoi
rimuovere l'intera memoria usa il <code>clear ()</code>, come
<code>localStorage.clear()</code>. Il metodo <code>clear()</code> non accetta
argomenti e semplicemente cancella tutte le coppie chiave/valore da localStorage
in una sola volta, quindi rifletti attentamente prima di usarlo.</p><p>Il
<code>sessionStorage< L'oggetto /code> funziona allo stesso modo di
<code>localStorage</code>, tranne per il fatto che memorizza i dati solo per una
sessione, ovvero i dati rimangono finché l'utente non chiude quella finestra o
scheda.</p><p>Andiamo prova il seguente esempio per capire come funziona
sostanzialmente:</p>
<h1>HTML5 <span>Application Cache</span></h1><h2>Che cos'è Application

Cache?</h2><h2>Memorizzazione nella cache dei file con un
manifest</h2><h2>Spiegazione del codice</h2 ><h2>Passaggio 2: utilizzo del file
manifest della cache</h2>
<p><strong>Suggerimento:</strong> la funzione di cache dell'applicazione di
HTML5 è supportata in tutti i principali browser Web moderni come Firefox,
Chrome, Opera, Safari e Internet Explorer 10 e versioni successive.</p>
</div>
<p><strong>Nota:</strong> se esiste una cache dell'applicazione, il browser
carica il documento e le risorse associate direttamente dalla cache, senza
accedere alla rete. Dopo che il browser controlla se il file manifest è stato
aggiornato sul server e, se è stato aggiornato, il browser scarica la nuova
versione del manifest e le risorse in esso elencate.</p>
</div>
<p><strong>Nota:</strong> sui server web Apache, il tipo MIME per i file
manifest (<code>.appcache</code>) può essere impostato aggiungendo <code>AddType
text/cache-manifest .appcache</code> in un file <code>.htaccess</code>
all'interno della directory principale dell'applicazione o nella stessa
directory dell'applicazione.</p>
</div>
<li><strong>Navigazione offline</strong>: gli utenti possono utilizzare
l'applicazione anche quando sono offline o in caso di interruzioni impreviste
della connessione di rete.</li><li><strong>Migliora le prestazioni</strong> — Le
risorse memorizzate nella cache vengono caricate direttamente dal computer
dell'utente anziché dal server remoto, quindi le pagine web si caricano più
velocemente e hanno prestazioni migliori.</li><li><strong>Riduci la richiesta
HTTP e il carico del server</strong> — Il browser dovrà solo scarica le risorse
aggiornate/modificate dal server remoto che riducono al minimo le richieste HTTP
e risparmiano preziosa larghezza di banda oltre a ridurre il carico sul server
web.</li><li>File elencati sotto <code>CACHE:</code> (o immediatamente dopo la
riga <code>CACHE MANIFEST</code>) vengono esplicitamente memorizzati nella cache
dopo essere stati scaricati per la prima volta.</li><li>I file elencati in
<code>NETWORK:</code > le intestazioni di sezione sono risorse autorizzate che
non vengono mai memorizzate nella cache e non sono disponibili offline.
Significa che gli utenti possono accedere alla pagina <code>login.php</code>
solo quando sono online.</li><li>La sezione <code>FALLBACK:</code> specifica le
pagine di fallback che il browser dovrebbe utilizzare nel caso non è possibile
stabilire la connessione al server. Ogni voce in questa sezione elenca due URI:
il primo è la risorsa primaria, il secondo è il fallback. Ad esempio, nel nostro
caso la pagina <code>offline.html</code> verrà visualizzata se l'utente è
offline. Inoltre, entrambi gli URI devono provenire dalla stessa origine del
file manifest.</li><li>Le righe che iniziano con un cancelletto (<code>#</code>)
sono righe di commento.</li>
<pre class="syntax-highlighter line-numbers"><code class="language-markup">CACHE
MANIFEST
# v1.0 : 10-08-2014
CACHE:
# pagine
indice.html
# stili e amp; script

css/tema.css
js/jquery.min.js
js/predefinito.js
# immagini
/favicon.ico
immagini/logo.png
RETE:
login.php
RICADERCI:
/ /offline.html</code></pre><pre class="syntax-highlighter line-numbers"><code
<html lang="it" manifest="esempio.appcache">
<testa>
<title>Uso della cache dell'applicazione</title>
</testa>
<corpo>

</corpo>
creare applicazioni offline con la funzione di memorizzazione nella cache
HTML5.</p><p>In genere la maggior parte delle applicazioni basate sul Web
funzionerà solo se sei online. Ma HTML5 introduce un meccanismo di cache
dell'applicazione che consente al browser di salvare automaticamente il file
HTML e tutte le altre risorse necessarie per visualizzarlo correttamente sulla
macchina locale, in modo che il browser possa ancora accedere alla pagina Web e
alle sue risorse senza una connessione Internet .</p><p>Ecco alcuni vantaggi
dell'utilizzo della funzione di cache dell'applicazione HTML5:</p><p>Per
memorizzare nella cache i file per l'utilizzo offline, è necessario completare i
seguenti passaggi:</p><p> Un manifest è un file di testo speciale che indica ai
browser quali file archiviare, quali file non archiviare e quali file sostituire
con qualcos'altro. Il file manifest inizia sempre con le parole <code>CACHE
MANIFEST</code> (in maiuscolo). Ecco un esempio di un semplice file
manifest:</p><p>Potresti pensare a cosa fosse quel codice. OK, entriamo subito
nel merito. Un file manifest può avere tre sezioni distinte: CACHE, NETWORK e
FALLBACK.</p><p><strong>Avviso:</strong> non specificare il file manifest stesso
nel file manifest della cache, altrimenti sarà quasi impossibile informare il
browser che è disponibile un nuovo manifest.</p><p>Dopo la creazione, carica il
file manifest della cache sul server web — assicurati che il server web sia
configurato per servire i file manifest con il tipo MIME <code> text/cache-
manifest</code>.</p><p>Ora per rendere effettivo il tuo cache manifest, devi
abilitarlo nelle tue pagine web, aggiungendo l'attributo manifest alla radice <a
href="/html -reference/html-html-tag.php"><code><html></code></a>
elemento, come mostrato di seguito:</p>
<h1>HTML5 <span>Web Worker</span></h1><h2>Che cos'è Web Worker?</h2><h2>Creare

un file Web Worker</h2><h2>Lavorare in background con Web Worker</h2><h2>Termina
un Web Worker</h2>
<p><strong>Suggerimento:</strong> la funzione Web Worker di HTML5 è supportata
in tutti i principali browser Web moderni come Firefox, Chrome, Opera, Safari e
Internet Explorer 10 e versioni successive.</p>
</div>
<p><strong>Suggerimento:</strong> il metodo <code>postMessage()</code>
dell'oggetto worker viene utilizzato per inviare un messaggio (come i numeri
nell'esempio sopra) alla pagina web dal web worker file.</p>
</div>
<p><strong>Suggerimento:</strong> utilizza i web worker per eseguire solo
attività JavaScript pesanti che non interrompono gli script dell'interfaccia
utente (ovvero script che rispondono ai clic o ad altre interazioni
dell'utente). Non è consigliabile utilizzare i web worker per attività
brevi.</p>
</div>
<p><strong>Nota:</strong> i web worker non hanno accesso al DOM. Ciò significa
che non puoi accedere ad alcun elemento DOM nel codice JavaScript che intendi
eseguire utilizzando i web worker.</p>
</div>
<p><strong>Nota:</strong> il codice eseguito da un worker è sempre memorizzato
in un file JavaScript separato. Questo per impedire allo sviluppatore web di
scrivere il codice del web worker che tenta di utilizzare variabili globali o
accedere direttamente agli elementi sulla pagina web.</p>
</div>
<li>L'istruzione <strong>var worker = new Worker("worker.js");</strong> crea un
nuovo oggetto web worker, che viene utilizzato per comunicare con il web
worker.</li><li>Quando il lavoratore pubblica un messaggio, attiva il gestore di
eventi <strong>onmessage</strong> (<i>riga n. 14</i>) che consente al codice di
ricevere messaggi dal lavoratore web.</li><li >L'elemento
<strong>event.data</strong> contiene il messaggio inviato dal web worker.</li>
javascript">var i = 0;
funzione conteggioNumeri() {
if(i < 100000) {
io = io + 1;
postMessage(i);
}
// Attendi qualche istante prima di eseguire nuovamente questo script

setTimeout("countNumbers()", 500);
}
countNumbers();</code></pre><pre class="syntax-highlighter line-numbers"><code
<html lang="it">
<testa>
<title>Uso di Web Worker</title>
<copione>
if(window.Worker) {
// Crea un nuovo web worker
var lavoratore = new lavoratore("lavoratore.js");
// Attiva il gestore dell'evento onMessage

lavoratore.sulmessaggio = funzione(evento) {
document.getElementById("result").innerHTML = event.data;
};
} altro {
alert("Spiacente, il tuo browser non supporta il web worker.");
}
</copione>
</testa>
<corpo>
<div id="risultato">

</div>
</corpo>
<html lang="it">
<testa>
<title>Avvia/Arresta Web Worker</title>
<copione>
// Imposta la variabile globale
var lavoratore;
funzione startWorker() {
// Inizializza web worker
lavoratore = nuovo lavoratore("lavoratore.js");
// Esegui la funzione di aggiornamento, quando riceviamo un messaggio da worker

lavoratore.onmessage = aggiornamento;
// Dì al lavoratore di iniziare
lavoratore.postMessage("inizio");
}
funzione aggiornamento(evento) {
// Aggiorna la pagina con il messaggio corrente del lavoratore
document.getElementById("result").innerHTML = event.data;
}
funzione stopWorker() {
// Ferma il lavoratore
lavoratore.terminate();
}
</copione>
</testa>
<corpo>
<h1>Demo Web Worker</h1>
<pulsante onclick="startWorker();" type="button">Avvia web
worker</button>
<button type="button" onclick="stopWorker();">Arresta web
worker</button>

</div>
</corpo>
utilizzare il web worker HTML5 per eseguire il codice JavaScript in
background.</p><p>Se lo desideri provare a svolgere un'attività intensiva con
JavaScript che richiede tempo e calcoli pesanti, il browser bloccherà la pagina
Web e impedirà all'utente di fare qualsiasi cosa fino al completamento del
lavoro. Succede perché il codice JavaScript viene sempre eseguito in primo
piano.</p><p>HTML5 introduce una nuova tecnologia chiamata <em>web worker</em>
specificamente progettata per eseguire il lavoro in background indipendentemente
da altri script dell'interfaccia utente, senza influenzando le prestazioni della
pagina. A differenza delle normali operazioni JavaScript, i web worker non
interrompono l'utente e la pagina web rimane reattiva perché eseguono le
attività in background.</p><p>L'uso più semplice dei web worker è per eseguire
un'attività che richiede tempo . Quindi qui creeremo una semplice attività
JavaScript che conta da zero a 100.000.</p><p>Creiamo un file JavaScript esterno
chiamato "worker.js" e digitiamo il seguente codice.</p><p> Ora che abbiamo
creato il nostro file web worker. In questa sezione avvieremo il web worker da
un documento HTML che esegue il codice all'interno del file denominato
"worker.js" in background e visualizza progressivamente il risultato sulla
pagina web. Vediamo come funziona:</p><p>Il codice JavaScript nell'esempio
precedente ha il seguente significato:</p><p>Finora hai imparato come creare
worker e iniziare a ricevere messaggi. Tuttavia, puoi anche terminare un worker
in esecuzione nel mezzo dell'esecuzione.</p><p>Il seguente esempio ti mostrerà
come avviare e arrestare worker da una pagina web facendo clic sui pulsanti
HTML. Utilizza lo stesso file JavaScript "worker.js" che abbiamo usato
nell'esempio precedente per contare i numeri da zero a 100000. Proviamolo:</p>
<h1>HTML5 <span>Eventi inviati dal server</span></h1><h2>Che cos'è l'evento

inviato dal server?</h2><h2>Invio di messaggi con uno script del
server</h2><h2>Elaborazione Messaggi in una pagina Web</h2>
<p><strong>Suggerimento:</strong> la funzione degli eventi inviati dal server di
HTML5 è supportata in tutti i principali browser Web moderni come Firefox,
Chrome, Safari e Opera, ad eccezione di Internet Explorer.</p>
</div>
<p><strong>Nota:</strong> gli eventi inviati dal server (SSE) sono
unidirezionali, il che significa che i dati vengono consegnati in una direzione
dal server al client. Un client in genere è un browser web.</p>
</div>
<pre class="syntax-highlighter line-numbers"><code class="language-php"><?php

header("Content-Type: text/event-stream");
header("Cache-Control: no-cache");
// Ottieni l'ora corrente sul server

$currentTime = data("h:i:s", time());
// Invialo in un messaggio
echo "dati: " . $currentTime . "\n\n";
sciacquone();
?></code></pre><pre class="syntax-highlighter line-numbers"><code
<html lang="it">
<testa>
<title>Uso degli eventi inviati dal server</title>
<copione>
var source = new EventSource("server_time.php");
source.onmessage = function(evento) {
document.getElementById("result").innerHTML += "Nuova ora ricevuta dal server
web: " + event.data + "<br>";
};
};
</copione>
</testa>
<corpo>

</div>
</corpo>
utilizzare la funzione degli eventi inviati dal server HTML5 per creare una
connessione unidirezionale e persistente tra una pagina web e il server
.</p><p>L'evento inviato dal server HTML5 è un nuovo modo per le pagine web di
comunicare con il server web. È anche possibile con l'oggetto XMLHttpRequest che
consente al tuo codice JavaScript di effettuare una richiesta al server Web, ma
è uno scambio uno a uno, ovvero una volta che il server Web fornisce la sua
risposta, la comunicazione è terminata. L'oggetto XMLHttpRequest è il fulcro di
tutte le operazioni <a
href="/javascript-tutorial/javascript-ajax.php">Ajax</a>.</p><p>Tuttavia, ci
sono alcune situazioni in cui le pagine web richiedono un tempo più lungo
connessione a termine al server web. Un esempio tipico sono le quotazioni di
borsa sui siti web finanziari in cui il prezzo viene aggiornato automaticamente.
Un altro esempio è un news ticker in esecuzione su vari siti Web di
media.</p><p>Puoi creare cose del genere con gli eventi inviati dal server
HTML5. Consente a una pagina Web di mantenere una connessione aperta a un server
Web in modo che il server Web possa inviare automaticamente una nuova risposta
in qualsiasi momento, non è necessario riconnettersi ed eseguire lo stesso
script del server da zero più e più volte.</ p><p>Creiamo un file PHP chiamato
"server_time.php" e digitiamo il seguente script al suo interno. Riporterà
semplicemente l'ora corrente dell'orologio integrato del server Web a intervalli
regolari. Recupereremo questo tempo e aggiorneremo la pagina web di conseguenza
più avanti in questo tutorial.</p><p>Le prime due righe dello <a href="/php-
tutorial/">script PHP</a> impostano due importanti intestazioni. Innanzitutto,
imposta il tipo MIME su <code>text/event-stream</code>, che è richiesto dallo
standard degli eventi lato server. La seconda riga indica al server Web di
disattivare la memorizzazione nella cache, altrimenti l'output del tuo script
potrebbe essere memorizzato nella cache.</p><p>Ogni messaggio inviato tramite
gli eventi inviati dal server HTML5 deve iniziare con il testo <code>data:</code
> seguito dal testo effettivo del messaggio e dalla sequenza di caratteri della
nuova riga (<code>\n\n</code>).</p><p>E infine, abbiamo utilizzato il PHP
<code>flush()</ code> per assicurarsi che i dati vengano inviati immediatamente,
anziché essere memorizzati nel buffer fino al completamento del codice
PHP.</p><p>L'oggetto <code>EventSource</code> viene utilizzato per ricevere i
messaggi di evento inviati dal server .</p><p>Ora creiamo un documento HTML
denominato "demo_sse.html" e posizioniamolo nella stessa directory del progetto
in cui si trova il file "server_time.php". Questo documento HTML riceve
semplicemente l'ora corrente riportata dal server web e la mostra
all'utente.</p>
<h1>HTML5 <span>Geolocalizzazione</span></h1><h2>Che cos'è la geolocalizzazione?

</h2><h2>Trovare le coordinate di un visitatore</h2><h2>Gestione di errori e
rifiuti</h2> <h2>Visualizzazione della posizione su Google
Map</h2><h2>Monitoraggio del movimento del visitatore</h2>
<p><strong>Nota:</strong> i browser Web non condivideranno la posizione del
visitatore con una pagina Web a meno che il visitatore non dia il permesso
esplicito. Lo standard di geolocalizzazione rende una regola ufficiale ottenere
l'autorizzazione dell'utente per ogni sito Web che richiede dati sulla
posizione.</p>
</div>

DOCTYPE html>
<html lang="it">
<testa>
<title>Ottieni posizione attuale</title>
<copione>
funzione mostraPosizione() {
if(navigatore.geolocalizzazione) {
navigator.geolocation.getCurrentPosition(funzione(posizione) {
var positionInfo = "La tua posizione attuale è (" + "Latitudine: " +
position.coords.latitude + ", " + "Longitudine: " + position.coords.longitude +
")";
document.getElementById("result").innerHTML = positionInfo;
});
} altro {
alert("Spiacenti, il tuo browser non supporta la geolocalizzazione HTML5.");
}
}
</copione>
</testa>
<corpo>

</div>
<button type="button" onclick="showPosition();">Mostra
posizione</button>
</corpo>
<html lang="it">
<testa>
<title>Gestione degli errori di geolocalizzazione</title>
<copione>
var risultato;
// Memorizza l'elemento in cui la pagina visualizza il risultato
risultato = document.getElementById("risultato");
// Se la geolocalizzazione è disponibile, prova a ottenere la posizione del

visitatore
navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
result.innerHTML = "Ottenimento delle informazioni sulla posizione...";
} altro {
}
};
// Definisce la funzione di callback per il tentativo riuscito

function successCallback(posizione) {
result.innerHTML = "La tua posizione attuale è (" + "Latitudine: " +
")";
}
// Definisce la funzione di richiamata per il tentativo fallito

funzione erroreRichiamata(errore) {
if(codice.errore == 1) {
result.innerHTML = "Hai deciso di non condividere la tua posizione, ma va bene.
Non te lo chiederemo più.";
} else if(errore.codice == 2) {
result.innerHTML = "La rete è inattiva o il servizio di posizionamento non può
essere raggiunto.";
result.innerHTML = "Il tentativo è scaduto prima che potesse ottenere i dati
sulla posizione.";
} altro {
result.innerHTML = "Geolocalizzazione non riuscita a causa di un errore
sconosciuto.";
}
}
</copione>
</testa>
<corpo>
</div>
<button type="button" onclick="showPosition();">Mostra
posizione</button>
</corpo>
<html lang="it">
<testa>
<title>Uso di Google Maps</title>
<copione>
navigator.geolocation.getCurrentPosition(showMap);
}
funzione mostraMappa(posizione) {
// Ottieni i dati sulla posizione
var latlong = posizione.coords.latitudine + "," + posizione.coords.longitudine;
// Imposta l'URL della sorgente della mappa di Google

var mapLink = "https://maps.googleapis.com/maps/api/staticmap?
center="+latlong+"&zoom=16&size=400x300&output=embed";
// Crea e inserisci la mappa di Google

document.getElementById("embedMap").innerHTML = "<img alt='Map Holder'
src='"+ mapLink +"'>";
}
</copione>
</testa>
<corpo>
<button type="button" onclick="showPosition();">Mostra la mia posizione su
Google Map</button>
<div id="embedMap">

</div>
</corpo>
<html lang="it">
<testa>
<title>Uso di Google Maps</title>
<script
src="https://maps.google.com/maps/api/js?sensor=false"></script>
<copione>
navigator.geolocation.getCurrentPosition(showMap, showError);
} altro {
}
}
// Definisce la funzione di callback per il tentativo riuscito

funzione mostraMappa(posizione) {
// Ottieni i dati sulla posizione
lat = posizione.coords.latitudine;
long = posizione.coords.longitudine;
var latlong = new google.maps.LatLng(lat, long);
var mieOpzioni = {
centro: latilungo,
ingrandimento: 16,
mapTypeControl: vero,
opzionidicontrollodinavigazione: {
style:google.maps.NavigationControlStyle.SMALL
}
}
var map = new google.maps.Map(document.getElementById("embedMap"), myOptions);

var marker = new google.maps.Marker({ position:latlong, map:map, title:"Sei
qui!" });
}
// Definisce la funzione di richiamata per il tentativo fallito

function mostraErrore(errore) {
if(codice.errore == 1) {
result.innerHTML = "Hai deciso di non condividere la tua posizione, ma va bene.
Non te lo chiederemo più.";
result.innerHTML = "La rete è inattiva o il servizio di posizionamento non può
essere raggiunto.";
result.innerHTML = "Il tentativo è scaduto prima che potesse ottenere i dati
sulla posizione.";
} altro {
result.innerHTML = "Geolocalizzazione non riuscita a causa di un errore
sconosciuto.";
}
}
</copione>
</testa>
<corpo>
<button type="button" onclick="showPosition();">Mostra la mia posizione su
Google Map</button>
<div id="embedMap" style="larghezza: 400px; altezza: 300px;">

</div>
</corpo>
<html lang="it">
<testa>
<title>Posizione di osservazione</title>
<copione>
var watchID;
watchID = navigator.geolocation.watchPosition(successCallback);
} altro {
}
}
function successCallback(posizione) {
toggleWatchBtn.innerHTML = "Smetti di guardare";
// Controlla che la posizione sia stata modificata o meno prima di fare

qualsiasi cosa
if(prevLat != posizione.coords.latitudine || prevLong !=
posizione.coords.longitudine){
// Imposta la posizione precedente

var prevLat = posizione.coords.latitudine;
var prevLong = posizione.coords.longitudine;
// Ottieni la posizione corrente

var positionInfo = "La tua posizione attuale è (" + "Latitudine: " +
")";
document.getElementById("result").innerHTML = positionInfo;
funzione startWatch() {
var risultato = document.getElementById("risultato");
var toggleWatchBtn = document.getElementById("toggleWatchBtn");
toggleWatchBtn.onclick = funzione() {
if(watchID) {
toggleWatchBtn.innerHTML = "Inizia a guardare";
navigator.geolocation.clearWatch(watchID);
watchID = falso;
} altro {
toggleWatchBtn.innerHTML = "Acquisizione geolocalizzazione in corso...";
mostraPosizione();
}
}
}
// Inizializza l'intero sistema (sopra)

window.onload = startWatch;
</copione>
</testa>
<corpo>
<button type="button" id="toggleWatchBtn">Inizia a guardare</button>
</div>
</corpo>
utilizzare la funzione di geolocalizzazione HTML5 per rilevare la posizione
dell'utente.</p><p>La funzione di geolocalizzazione HTML5 ti consente di
scoprire le coordinate geografiche (latitudine e longitudine) della posizione
corrente del visitatore del tuo sito web.</p><p class="space">Questa funzione è
utile per fornire una migliore esperienza di navigazione al visitatore del sito.
Ad esempio, puoi restituire i risultati di ricerca fisicamente vicini alla
posizione dell'utente.</p><p>Ottenere le informazioni sulla posizione del
visitatore del sito utilizzando l'API di geolocalizzazione HTML5 è abbastanza
semplice. Utilizza i tre metodi contenuti nell'oggetto
<code>navigator.geolocation</code> — <code>getCurrentPosition()</code>,
<code>watchPosition()</code> e <code>clearWatch() </code>.</p><p>Quello che
segue è un semplice esempio di geolocalizzazione che mostra la tua posizione
attuale. Ma prima devi accettare che il browser comunichi al server web la tua
posizione.</p><p>Potrebbe verificarsi una situazione in cui un utente non
desidera condividere i suoi dati sulla posizione con te. Per far fronte a tali
situazioni, puoi fornire due funzioni quando chiami la funzione
<code>getCurrentLocation()</code>.</p><p>La prima funzione viene chiamata se il
tuo tentativo di geolocalizzazione ha successo, mentre la seconda è chiamato se
il tuo tentativo di geolocalizzazione fallisce. Diamo un'occhiata a un
esempio:</p><p>Puoi fare cose molto interessanti con i dati di
geolocalizzazione, come mostrare la posizione dell'utente sulla mappa di Google.
L'esempio seguente mostrerà la tua posizione attuale sulla mappa di Google in
base ai dati di latitudine e longitudine recuperati tramite la funzione di
geolocalizzazione HTML5.</p><p>L'esempio precedente mostrerà semplicemente la
posizione sulla mappa di Google utilizzando un'immagine statica. Tuttavia, puoi
anche creare mappe Google interattive con trascinamento, zoom avanti/indietro e
altre funzionalità che hai incontrato nella tua vita reale. Diamo un'occhiata al
seguente esempio:</p><p>Controlla il seguente URL per ulteriori informazioni
sull'API Javascript di Google Maps: <a
href="https://developers.google.com/maps/documentation /javascript/reference"
rel="nofollow"
target="_blank">https://developers.google.com/maps/documentation/javascript/
reference</a>.</p><p>Tutti gli esempi che quelli usati finora si sono affidati
al metodo <code>getCurrentPosition()</code>. Tuttavia, l'oggetto di
geolocalizzazione ha un altro metodo <code>watchPosition()</code> che ti
consente di tracciare il movimento del visitatore restituendo la posizione
aggiornata man mano che la posizione cambia.</p><p>Il <code>watchPosition()
</code> ha gli stessi parametri di input di <code>getCurrentPosition()</code>.
Tuttavia, <code>watchPosition()</code> può attivare la funzione di successo più
volte, quando ottiene la posizione per la prima volta e di nuovo ogni volta che
rileva una nuova posizione. Vediamo come funziona:</p>
<h1>HTML5 <span>Trascina e rilascia</span></h1><h2>Trascina e rilascia un

elemento</h2><h2>Trascina e rilascia eventi</h2>
<p><strong>Suggerimento:</strong> puoi rendere trascinabile un elemento
impostando l'attributo trascinabile su true, come <code>draggable="true"</code>.
Tuttavia, nella maggior parte dei browser Web, le selezioni di testo, le
immagini e gli elementi di ancoraggio con un attributo <code>href</code> possono
essere trascinati per impostazione predefinita.</p>
</div>
<p><strong>Nota:</strong> la funzione di trascinamento della selezione di HTML5
è supportata in tutti i principali browser moderni come Firefox, Chrome, Opera,
Safari e Internet Explorer 9 e versioni successive.</p>
</div>

DOCTYPE html>
<html lang="it">
<testa>
<title>Utilizzo del trascinamento della selezione</title>
<copione>
funzione dragStart(e) {
// Imposta l'operazione consentita per un'origine di trascinamento
e.dataTransfer.effectAllowed = "sposta";
// Imposta il valore e il tipo dei dati trascinati

e.dataTransfer.setData("Testo", e.target.getAttribute("id"));
}
funzione trascinaOver(e) {
// Impedisce la gestione predefinita dei dati da parte del browser
e.preventDefault();
e.stopPropagation();
}
funzione drop(e) {
// Annulla questo evento per tutti gli altri
e.stopPropagation();
e.preventDefault();
// Recupera i dati trascinati per tipo

var data = e.dataTransfer.getData("Testo");
// Aggiunge l'immagine alla casella di riepilogo

e.target.appendChild(document.getElementById(data));
}
</copione>
<stile>
#dropBox {
larghezza: 300px;
altezza: 300px;
bordo: 5px grigio tratteggiato;
sfondo: giallo chiaro;
text-align: centro;
margine: 20px 0;
colore arancione;
}
#dropBox img {
margine: 25px;
}
</stile>
</testa>
<corpo>
<h2>Demo trascina e rilascia</h2>
<p>Trascina e rilascia l'immagine nella casella di riepilogo:</p>
<div id="dropBox" ondragover="dragOver(evento);" ondrop="drop(evento);">

</div>
<img src="../images/kites.jpg" id="dragA" draggable="true"
ondragstart="dragStart(event);" width="250" height="250" alt="Aquiloni
volanti">
</corpo>
utilizzare la funzionalità di trascinamento della selezione di HTML5.</p><p>La
funzionalità di trascinamento della selezione di HTML5 consente all'utente di
trascinare e rilasciare un elemento in un'altra posizione. La posizione di
rilascio potrebbe essere un'applicazione diversa. Durante il trascinamento di un
elemento, una rappresentazione traslucida dell'elemento segue il puntatore del
mouse.</p><p>Proviamo il seguente esempio per capire come funziona
sostanzialmente:</p><p>Un numero di eventi viene attivato durante le varie fasi
dell'operazione di trascinamento della selezione. Ma gli eventi del mouse come
mousemove non vengono attivati durante un'operazione di trascinamento.</p><p>La
seguente tabella fornisce una breve panoramica di tutti gli eventi di
trascinamento.</p>
<h1>HTML5 <span>Esempi</span></h1><h2>HTML di base</h2><h2>Testo
HTML</h2><h2>Link HTML</h2><h2>Immagini HTML</ h2><h2>Tabelle
HTML</h2><h2>Elenchi HTML</h2><h2>Moduli HTML</h2><h2>Stili HTML</h2><h2>iFrame
HTML</h2><h2> Script HTML</h2><h2 id="html5-inputs">Nuovi tipi di input
HTML5</h2><h2>Canvas HTML5</h2><h2>SVG HTML5</h2><h2>Audio HTML5</h2 ><h2>HTML5
Video</h2><h2>HTML5 Web Storage</h2><h2>HTML5 Web Worker</h2><h2>HTML5
Geolocalizzazione</h2>
<li><a href="codelab.php?topic=html&file=simple-document" target="_blank">Un
semplice documento HTML</a></li><li><a href="codelab. php?
topic=html&file=headings" target="_blank">Specifica i titoli per il
contenuto</a></li><li><a href="codelab.php?topic=html&file=paragraphs"
target ="_blank">Inserimento di paragrafi di contenuto testuale</a></li><li><a
href="codelab.php?topic=html&file=hyperlinks" target="_blank">Creazione di
collegamenti ad altri documenti HTML o risorse Web</a></li><li><a
href="codelab.php?topic=html&file=images" target="_blank">Inserimento di
immagini nel documento HTML</a></li ><li><a href="codelab.php?
topic=html&file=headings" target="_blank">Intestazioni - da h1 a
h6</a></li><li><a href="codelab. php?topic=html&file=insert-line-breaks"
target="_blank">Interruzioni di paragrafo e riga</a></li><li><a
href="codelab.php?topic=html&file= text-formatting"
target="_blank">Formattazione del testo</a></li><li><a href="codelab.php?
topic=html&file=pre-tag" target="_blank">Testo preformattato (pr eserve
interruzioni di riga e spazi)</a></li><li><a href="codelab.php?
topic=html&file=subscript-and-superscript" target="_blank">Testo pedice e
apice</ a></li><li><a href="codelab.php?topic=html&file=quotations"
target="_blank">Citazioni lunghe e brevi</a></li><li><a href ="codelab.php?
topic=html&file=abbreviations" target="_blank">Abbreviazioni e
acronimi</a></li><li><a href="codelab.php?topic=html&file=deleted -and-
inserted" target="_blank">Contrassegno del testo eliminato e
inserito</a></li><li><a href="codelab.php?topic=html&file=bdo-tag"
target="_blank ">Impostazione della direzione del testo di un
elemento</a></li><li><a href="codelab.php?topic=html&file=address-tag"
target="_blank">Inserisci informazioni di contatto</a ></li><li><a
href="codelab.php?topic=html&file=html-comments" target="_blank">Inserimento
di commenti</a></li><li><a href= "codelab.php?topic=html&file=hr-tag"
target="_blank">Inserimento di linee orizzontali</a></li><li><a
href="codelab.php?topic=html&file= output-tag" target=" _blank">Tag di
output del computer</a></li><li><a href="codelab.php?topic=html&file=a-tag"
target="_blank">Crea collegamento ipertestuale</a></ li><li><a
href="codelab.php?topic=html&file=linking-images" target="_blank">Usare
l'immagine come collegamento</a></li><li><a href= "codelab.php?
topic=html&file=target-blank" target="_blank">Apri link in una nuova
finestra del browser</a></li><li><a href="codelab.php?topic= html&file=jump-
link" target="_blank">Naviga all'interno della pagina - Jump link</a></li><li><a
href="codelab.php?topic=html&file=target-top" target="_blank">Sposta
all'esterno di un iframe</a></li><li><a href="codelab.php?
topic=html&file=mail-to" target="_blank">Creazione di un mailto link - Un
link che invia un'e-mail</a></li><li><a href="codelab.php?
topic=html&file=specify-dimensions-for-images" target="_blank"> Impostazione
della larghezza e dell'altezza delle immagini</a></li><li><a href="codelab.php?
topic=html&file=images-alignment" target="_blank">Allineamento delle
immagini</a>< /li><li><a href="codelab.php?topic=html&file=linking- images"
target="_blank">Crea un collegamento ipertestuale di un'immagine</a></li><li><a
href="codelab.php?topic=html&file=image-map" target="_blank"> Creazione di
una mappa immagine - Un'immagine con regioni cliccabili</a></li><li><a
href="codelab.php?topic=html&file=table" target="_blank">Creazione di una
semplice tabella - La forma più semplice di una tabella</a></li><li><a
href="codelab.php?topic=html&file=table-dimension"
target="_blank">Impostazione della dimensione di una tabella< /a></li><li><a
href="codelab.php?topic=html&file=caption-tag" target="_blank">Specifica la
didascalia della tabella</a></li><li> <a href="codelab.php?
topic=html&file=tables-border" target="_blank">Tabelle con bordi - Aggiunta
dei bordi predefiniti della tabella</a></li><li><a href=" codelab.php?
topic=html&file=table-cellpadding" target="_blank">Imposta il riempimento
delle celle della tabella - L'attributo cellpadding</a></li><li><a
href="codelab.php? topic=html&file=table-cellspacing"
target="_blank">Imposta la distanza tra le celle della tabella - L'attributo
cellspacing</a></li><li> <a href="codelab.php?topic=html&file=table-rowspan-
and-colspan" target="_blank">Celle di tabella che si estendono su più di una
riga/colonna - L'attributo rowspan/colspan</a>< /li><li><a href="codelab.php?
topic=html&file=table-column-groups" target="_blank">Gruppi di colonne - Gli
elementi col e colgroup</a></li>< li><a href="codelab.php?
topic=html&file=unordered-list" target="_blank">Creazione di un elenco non
ordinato</a></li><li><a href="codelab.php ?topic=html&file=ordered-list"
target="_blank">Creazione di un elenco ordinato</a></li><li><a
href="codelab.php?topic=html&file=definition-list "
target="_blank">Creazione di un elenco di definizioni</a></li><li><a
href="codelab.php?topic=html&file=nested-list-01" target="_blank">Creazione
un elenco nidificato - Livello singolo</a></li><li><a href="codelab.php?
topic=html&file=nested-list-02" target="_blank">Creazione di un elenco
nidificato - Multiplo level</a></li><li><a href="codelab.php?
topic=html&file=text-field" target="_blank">Creazione di campi di immissione
testo</a></li>< li><a href="codelab.php?topic=html&file=password-field"
target="_blank">Creazione di campi di immissione password</a></li><li><a
href="#html5-inputs">Creazione Nuovi campi di input HTML5</a></li><li><a
href="codelab.php?topic=html&file=checkboxes-and-radio"
target="_blank">Caselle di controllo e pulsanti di opzione</a> </li><li><a
href="codelab.php?topic=html&file=select-box-01" target="_blank">Caselle di
selezione: un elenco a discesa</a></li> <li><a href="codelab.php?
topic=html&file=select-box-02" target="_blank">Seleziona la casella con un
valore preselezionato</a></li><li>< a href="codelab.php?
topic=html&file=optgroup-tag" target="_blank">Raggruppamento di opzioni
all'interno di una casella di selezione</a></li><li><a href="codelab.php ?
topic=html&file=select-box-03" target="_blank">Abilita la selezione multipla
all'interno di una casella di selezione</a></li><li><a href="codelab.php?
topic=html& file=textarea-01" target="_blank">Textarea - Un campo di input
di testo su più righe</a></li><li><a href="codelab.php?
topic=html&file=simple-button " target="_blank">Creazione pulsante
ns</a></li><li><a href="codelab.php?topic=html&file=file-select"
target="_blank">Campo selezione file</a></li><li ><a href="codelab.php?
topic=html&file=fieldset-tag" target="_blank">Raggruppamento di campi modulo
simili</a></li><li><a href="codelab.php? topic=html&file=submit-and-reset-
button" target="_blank">Invia o reimposta un modulo - L'uso del pulsante Invia e
reimposta</a></li><li><a href="codelab .php?topic=html&file=inline-styles"
target="_blank">Stili di elementi HTML utilizzando gli stili inline -
L'attributo style</a></li><li><a href="codelab.php?topic
=html&file=embedded-style-sheet" target="_blank">Stili di elementi HTML
utilizzando gli stili incorporati - L'elemento di stile</a></li><li><a
href="codelab.php?topic=html&amp ;file=linking-external-style-sheet"
target="_blank">Link a un foglio di stile esterno - L'elemento
link</a></li><li><a href="/css-tutorial/" target ="_blank">Ulteriori
informazioni sullo stile degli elementi HTML</a></li><li><a href="codelab.php?
topic=html&file=specify-dimensions-for-an-iframe" target="_blank">Utilizzo
di un iframe per incorporare una pagina web all'interno di un altro documento
HTML</a></li><li><a href="codelab.php?topic=html&file=iframe-without-border"
target="_blank">Rimozione del frameborder predefinito da un
iframe</a></li><li><a href="codelab.php?topic=html&file=open-links-in-an-
iframe" target ="_blank">Apertura di pagine Web collegate all'interno di un
iframe</a></li><li><a href="codelab.php?topic=html&file=embedded-javascript"
target="_blank">Inserisci JavaScript all'interno delle pagine HTML per
aggiungere interattività - L'elemento script</a></li><li><a href="codelab.php?
topic=html&file=external-javascript" target="_blank">Includi JavaScript
esterno file all'interno delle pagine HTML</a></li><li><a href="codelab.php?
topic=html&file=noscript-element" target="_blank">Fornisci contenuto
alternativo se lo script non è supportato o disabilitato - L'elemento
noscript</a></li><li><a href="codelab.php?topic=html5&file=color-input-type"
target="_blank">Creazione del tipo di input colore HTML5< /a></li><li><a
href="codelab.p hp?topic=html5&file=date-input-type"
target="_blank">Creazione del tipo di input della data HTML5</a></li><li><a
href="codelab.php?topic=html5&file =datetime-input-type"
target="_blank">Creazione del tipo di input datetime HTML5</a></li><li><a
href="codelab.php?topic=html5&file=datetime-local-input- type"
target="_blank">Creazione del tipo di input HTML5 datetime-local</a></li><li><a
href="codelab.php?topic=html5&file=email-input-type" target="
_blank">Creazione di un tipo di input email HTML5</a></li><li><a
href="codelab.php?topic=html5&file=month-input-type"
target="_blank">Creazione di un input mese HTML5 type</a></li><li><a
href="codelab.php?topic=html5&file=number-input-type"
target="_blank">Creazione del tipo di input numerico HTML5</a></ li><li><a
href="codelab.php?topic=html5&file=range-input-type"
target="_blank">Creazione del tipo di input dell'intervallo HTML5</a></li><li><a
href="codelab.php?topic=html5&file=search-input-type"
target="_blank">Creazione del tipo di input di ricerca HTML5</a></li><li><a
href="codelab.php? argomento=html5 &file=tel-input-type"
target="_blank">Creazione del tipo di input tel HTML5</a></li><li><a
href="codelab.php?topic=html5&file=time-input -type"
target="_blank">Creazione del tipo di input dell'ora HTML5</a></li><li><a
href="codelab.php?topic=html5&file=url-input-type" target="_blank
">Creazione del tipo di input dell'URL HTML5</a></li><li><a href="codelab.php?
topic=html5&file=week-input-type" target="_blank">Creazione del tipo di
input della settimana HTML5 </a></li><li><a href="codelab.php?
topic=html5&file=embed-canvas-into-html-pages"
target="_blank">Incorporamento di canvas in documenti HTML</a ></li><li><a
href="codelab.php?topic=html5&file=draw-a-line-onto-the-canvas"
target="_blank">Tracciare una linea sulla tela</a ></li><li><a
href="codelab.php?topic=html5&file=draw-an-arc-onto-the-canvas"
target="_blank">Disegnare un arco sulla tela</a ></li><li><a href="codelab.php?
topic=html5&file=disegna-un-rettangolo-sulla-tela"
target="_blank">Disegnare un rettangolo sulla tela</a></li><li><a
href="codelab.php?topic=html5&file=draw-a-circle-onto-the-canvas"
target="_blank">Disegnare un cerchio sulla tela</a></li><li><a
href="codelab.php?topic=html5&file=set-stroke-color-and-width-on- canvas"
target="_blank">Impostazione del colore e della larghezza del tratto sulla
tela</a></li><li><a href="codelab.php?topic=html5&file=set-stroke-cap-style-
on-canvas" target="_blank">Impostazione dello stile del cappuccio per il tratto
sulla tela</a></li><li><a href="codelab.php?topic=html5&file=fill-color-
inside -a-rectangle-on-canvas" target="_blank">Colore di riempimento all'interno
di una forma rettangolare su tela</a></li><li><a href="codelab.php?
topic=html5&file=fill -color-inside-a-circle-on-canvas"
target="_blank">Colore di riempimento all'interno di una forma circolare su
tela</a></li><li><a href="codelab.php?topic=html5&amp ;file=fill-linear-
gradient-inside-canvas-shapes" target="_blank">Riempimento del gradiente lineare
all'interno delle forme della tela</a></li><li><a href="codelab.php?topic
=html5&file=fill-radial-gradient-inside-canvas-shapes"
target="_blank">Riempimento del gradiente radiale all'interno delle forme del
canvas</a></li><li><a href="codelab.php?topic =html5&file=embed-svg-into-
html-pages" target="_blank">Incorporamento di SVG in documenti
HTML</a></li><li><a href="codelab.php?topic=html5& file=create-a-line-with-
svg" target="_blank">Creazione di una linea utilizzando SVG</a></li><li><a
href="codelab.php?topic=html5&file=create -a-rectangle-with-svg"
target="_blank">Creazione di un rettangolo utilizzando SVG</a></li><li><a
href="codelab.php?topic=html5&file=create-a- circle-with-svg"
target="_blank">Creazione di un cerchio utilizzando SVG</a></li><li><a
href="codelab.php?topic=html5&file=render-text-with-svg "
target="_blank">Rendering del testo nelle pagine Web utilizzando
SVG</a></li><li><a href="codelab.php?topic=html5&file=rotate-and-render-
text-with- svg" target="_blank">Applica la trasformazione durante il rendering
del testo sulle pagine Web utilizzando SVG</a></li><li><a href="codelab.php?
topic=html5&file=audio-element" target= " _blank">Incorporamento dell'audio
nei documenti HTML</a></li><li><a href="codelab.php?
topic=html5&file=elemento-audio-con-fonti-alternative" target="_blank">
Definizione di fonti alternative per l'elemento audio</a></li><li><a
href="codelab.php?topic=html5&file=audio-links" target="_blank">Collegamento
dei file audio</a> </li><li><a href="codelab.php?topic=html5&file=insert-
audio-using-object-element" target="_blank">Inserimento di audio in documenti
HTML utilizzando l'elemento oggetto</a ></li><li><a href="codelab.php?
topic=html5&file=insert-audio-using-embed-element"
target="_blank">Inserimento di audio in documenti HTML utilizzando l'elemento
embed</li><li><a href="codelab.php?topic=html5&file=insert-audio-using-
embed-element" target="_blank"> a></li><li><a href="codelab.php?
topic=html5&file=video-element" target="_blank">Incorporamento di video in
documenti HTML</a></li><li> <a href="codelab.php?topic=html5&file=video-
element-with-alternative-sources" target="_blank">Definizione di fonti
alternative per l'elemento video</a></li><li><a href="codelab.php?
topic=html5&file=insert-video-using-object-element" tar
get="_blank">Inserimento di video in documenti HTML utilizzando l'elemento
oggetto</a></li><li><a href="codelab.php?topic=html5&file=insert-video-
using-embed-element " target="_blank">Inserimento di video in documenti HTML
utilizzando l'elemento embed</a></li><li><a href="codelab.php?
topic=html5&file=embed-youtube-video" target= "_blank">Incorporamento del
video di YouTube nei documenti HTML</a></li><li><a href="codelab.php?
topic=html5&file=local-storage" target="_blank">Memorizzazione dei dati con
Archiviazione locale HTML5</a></li><li><a href="codelab.php?
topic=html5&file=session-storage" target="_blank">Archiviazione dei dati con
l'archiviazione della sessione HTML5</a>< /li><li><a href="codelab.php?
topic=html5&file=using-web-worker-file" target="_blank">L'esecuzione di
JavaScript funziona in background con HTML5 web worker</a>< /li><li><a
href="codelab.php?topic=html5&file=stop-web-worker" target="_blank">Termina
di un web worker in esecuzione</a></li><li>< a href="codelab.php?
topic=html5&file=geolocation" target="_blank">Ottenere informazioni sui
visitatori ordinate con geolocalizzazione HTML5</a></li><li><a
href="codelab.php?topic=html5&file=handing-geolocation-errors-and-
rejections" target="_blank">Errori di consegna e rifiuti mentre lavori con la
geolocalizzazione HTML5</a></li><li><a href="codelab.php?
topic=html5&file=show-geolocation-on-google-map-image"
target="_blank">Visualizzazione posizione sulla mappa di Google in formato
immagine</a></li><li><a href="codelab.php?topic=html5&file=show-location-on-
google-map" target="_blank">Visualizzazione posizione sulla mappa interattiva di
Google</a></li><li><a href="codelab.php?topic=html5&file=get-current-
geolocation-data" target="_blank">Ottenere la posizione corrente di un
visitatore utilizzando la geolocalizzazione HTML5</a></li>
<p class="summary">Questa sezione contiene un sacco di esempi che dimostrano i
vari elementi HTML e le sue caratteristiche in azione reale.</p>
<h1><span>Domande frequenti</span></h1><h2>HTML / CSS</h2><h2>JavaScript /

jQuery</h2><h2>BOOTSTRAP / SASS</h2><h2> PHP / MySQL</h2><h2>Ubuntu / Linux</h2>
<li><a href="faq/how-to-write-comments-in-html.php" target="_blank">Come
scrivere commenti in HTML</a></li><li><a href ="faq/how-to-write-comments-in-
css.php" target="_blank">Come scrivere commenti in CSS</a></li><li><a
href="faq/how- to-remove-dotted-line-around-links-using-css.php"
target="_blank">Come rimuovere la linea tratteggiata attorno ai collegamenti
utilizzando i CSS</a></li><li><a href=" faq/how-to-align-text-vertically-center-
in-a-div-using-css.php" target="_blank">Come allineare verticalmente il testo al
centro in un elemento DIV usando i CSS</a></ li><li><a href="faq/how-to-set-a-
div-height-to-100-percent-using-css.php" target="_blank">Come impostare
l'altezza di un DIV al 100% utilizzando i CSS</a></li><li><a href="faq/how-to-
align-a-div-horizontally-center-using-css.php" target="_blank">Come per
allineare un DIV orizzontalmente al centro usando i CSS</a></li><li><a
href="faq/css-background-opacity-without-effecting-the-child-elements.php"
target="_blank"> Come modificare la trasparenza dello sfondo senza influire
sugli elementi figli</a></li><li>< a href="faq/how-to-define-style-sheet-only-
for-internet-explorer.php" target="_blank">Come definire il foglio di stile solo
per Internet Explorer</a></li>< li><a href="faq/show-hide-dropdown-menu-on-
mouse-hover-using-css.php" target="_blank">Come mostrare Nascondi menu a discesa
al passaggio del mouse utilizzando i CSS</a> </li><li><a href="faq/how-to-
remove-white-space-under-an-image-using-css.php" target="_blank">Come rimuovere
lo spazio bianco sotto un'immagine utilizzando i CSS</a></li><li><a
href="faq/qual è-la-lunghezza-massima-del-titolo-e-meta-descrizione-tag.php"
target="_blank"> Qual è la lunghezza massima del tag title e meta description in
HTML</a></li><li><a href="faq/how-to-highlight-alternate-table-row-using-
css.php" target ="_blank">Come evidenziare una riga di tabella alternativa
usando i CSS</a></li><li><a href="faq/how-to-fix-css-collapsing-parent-having-
floating-children.php " target="_blank">Come risolvere il problema del genitore
che crolla CSS</a></li><li><a href="faq/how-to-create-custom-cursor-using-
css.php" target= "_blank">Come creare cursore personalizzato utilizzando
CSS</a></li><li><a href="faq/how-to-apply-the-shadow-effect-on-elements-using-
css.php" target="_blank"> Come applicare l'effetto ombra sugli elementi usando i
CSS</a></li><li><a href="faq/how-to-apply-shadow-effect-on-text-using-css.php"
target=" _blank">Come applicare l'effetto ombra al testo usando i
CSS</a></li><li><a href="faq/how-to-disable-spell-checking-in-html-forms.php"
target= "_blank">Come disabilitare il controllo ortografico nei moduli
HTML</a></li><li><a href="faq/how-to-create-drop-caps-effect-using-css.php"
target= "_blank">Come creare un effetto capolettera usando i CSS</a></li><li><a
href="faq/how-to-center-align-absolutely-positioned-div-using-css.php"
target="_blank">Come centrare l'allineamento assoluto del DIV posizionato
orizzontalmente utilizzando i CSS</a></li><li><a href="faq/apply-border-on-
mouse-hover-without-affecting-the- layout-in-css.php" target="_blank">Come
aggiungere un bordo a un elemento al passaggio del mouse senza influire sul
layout in CSS</a></li><li><a href="faq/how- applicare-opacità-css-in-internet-
explor er.php" target="_blank">Come applicare l'opacità CSS nei browser IE7 e
IE8</a></li><li><a href="faq/how-to-create-3d-flipping-effect- on-mouse-hover-
using-css.php" target="_blank">Come creare un effetto capovolgimento 3D al
passaggio del mouse utilizzando i CSS</a></li><li><a href="faq/how-to -animate-
text-color-on-mouse-hover-using-css.php" target="_blank">Come animare il colore
del testo al passaggio del mouse utilizzando i CSS</a></li><li><a href=
"faq/how-to-animate-background-color-on-mouse-hover-using-css.php"
target="_blank">Come animare il colore di sfondo di un elemento al passaggio del
mouse utilizzando i CSS</a>< /li><li><a href="faq/come-trasformare-la-
dimensione-dell-immagine-sul-mouse-hover-senza-influenzare-il-layout-in-css.php"
target="_blank">Come per trasformare la dimensione dell'immagine al passaggio
del mouse senza influire sul layout in CSS</a></li><li><a href="faq/how-to-make-
a-div-element-editable-in-html.php " target="_blank">Come rendere modificabile
un elemento DIV in HTML</a></li><li><a href="faq/how-to-disable-resizable-
property-of-textarea-using- css.php" target="_blank">Come t o disabilitare la
proprietà ridimensionabile di textarea usando CSS</a></li><li><a href="faq/how-
to-expand-select-box-to-its-default-width-on-focus-using- css.php"
target="_blank">Come espandere la casella di selezione alla sua larghezza
predefinita al focus usando i CSS</a></li><li><a href="faq/how-to-change-the-
default -text-selection-color-in-the-browser-using-css.php" target="_blank">Come
modificare il colore di selezione del testo predefinito nei browser utilizzando
i CSS</a></li><li>< a href="faq/how-to-remove-the-space-between-inline-block-
elements-in-css.php" target="_blank">Come rimuovere lo spazio tra gli elementi
inline-block nei CSS</ a></li><li><a href="faq/how-to-disable-text-selection-
highlighting-in-the-browser-using-css.php" target="_blank">Come disabilitare il
testo evidenziazione della selezione nei browser utilizzando i
CSS</a></li><li><a href="faq/how-to-change-input-field-placeholder-text-color-
using-css.php" target=" _blank">Come modificare il colore del testo del
segnaposto del campo di input o dell'area di testo utilizzando i
CSS</a></li><li><a href="faq/how-to-truncate-long-string- with-ellipsis-using-
css.php" target="_blank">Come troncare una stringa lunga con i puntini di
sospensione usando i CSS</a></li><li><a href="faq/how-to-create-triangle -or-
caret-icons-using-css.php" target="_blank">Come creare icone triangolari o caret
usando i CSS</a></li><li><a href="faq/how-to- remove-outline-around-text-input-
boxes-in-chrome-using-css.php" target="_blank">Come rimuovere il contorno
attorno alle caselle di input del testo in Chrome utilizzando i CSS</a></li><li
><a href="faq/how-to-apply-multiple-background-images-to-an-element-using-
css.php" target="_blank">Come applicare più immagini di sfondo a un elemento
utilizzando i CSS< /a></li><li><a href="faq/how-to-create-fixed-header-or-
footer-using-css.php" target="_blank">Come creare un'intestazione o un piè di
pagina fissi utilizzando i CSS</a></li><li><a href="faq/how-to-create-two-divs-
with-same-height-side-by-side-in-css.php" target= "_blank">Come creare due
elementi DIV con la stessa altezza affiancati in CSS</a></li><li><a
href="faq/how-to-set-table-cellpadding-and-cellspacing- using-css.php"
target="_b lank">Come impostare il cellpadding e il cellspacing della tabella
nei CSS</a></li><li><a href="faq/how-to-remove-cellspacing-form-tables-using-
css.php" target= "_blank">Come rimuovere la spaziatura delle celle dalle tabelle
utilizzando i CSS</a></li><li><a href="faq/how-to-place-border-inside-of-div-
element-using-css. php" target="_blank">Come posizionare il bordo all'interno di
un elemento DIV utilizzando i CSS</a></li><li><a href="faq/how-to-change-image-
on-hover-with -css.php" target="_blank">Come cambiare l'immagine al passaggio
del mouse con i CSS</a></li><li><a href="faq/how-to-position-text-over-an-image
-using-css.php" target="_blank">Come posizionare il testo su un'immagine usando
i CSS</a></li><li><a href="faq/how-to-create-an-html- button-that-acts-like-a-
link.php" target="_blank">Come creare un pulsante HTML che funzioni come un
collegamento</a></li><li><a href="faq/how -to-create-a-vertical-line-in-
html.php" target="_blank">Come creare una linea verticale in HTML</a></li><li><a
href="faq/how -per-cambiare-il-cursore-in-un-puntatore-a-mano-su-hover-using-
css.php" target="_blank">Come modificare trasforma il cursore in un puntatore a
mano al passaggio del mouse usando i CSS</a></li><li><a href="faq/how-to-make-a-
div-not-larger-than-its-contents-using -css.php" target="_blank">Come rendere un
DIV non più grande del suo contenuto usando i CSS</a></li><li><a href="faq/how-
to-auto-resize-an -image-to-fit-into-a-div-container-using-css.php"
target="_blank">Come ridimensionare automaticamente un'immagine per adattarla a
un contenitore DIV utilizzando i CSS</a></li>< li><a href="faq/how-to-change-
the-color-of-an-hr-element-using-css.php" target="_blank">Come cambiare il
colore di un elemento HR usando i CSS </a></li><li><a href="faq/how-to-create-
an-unordered-list-without-any-any-bullets-in-html.php" target="_blank">Come fare
creare un elenco non ordinato senza punti elenco in HTML</a></li><li><a
href="faq/how-to-overlay-one-div-over-another-div-using-css.php" target
="_blank">Come sovrapporre un div su un altro DIV usando i CSS</a></li><li><a
href="faq/how-to-stretch-and-scale-an-image-in-the -background-with-css.php"
target="_blank">Come allungare e ridimensionare un'immagine nel file sfondo con
CSS</a></li><li><a href="faq/how-to-disable-a-link-using-only-css.php"
target="_blank">Come disabilitare un collegamento utilizzando solo
CSS</a></li><li><a href="faq/how-to-vertically-align-an-image-inside-a-div-
using-css.php" target="_blank" >Come allineare verticalmente un'immagine
all'interno di un DIV usando i CSS</a></li><li><a href="faq/how-to-align-
content-of-a-div-to-the-bottom- using-css.php" target="_blank">Come allineare il
contenuto di un DIV in basso utilizzando i CSS</a></li><li><a href="faq/how-to-
make-a- placeholder-for-a-select-box-in-html.php" target="_blank">Come creare un
segnaposto per una casella di selezione in HTML</a></li><li><a href="faq /how-
to-hide-the-scrollbar-on-an-html-page.php" target="_blank">Come nascondere la
barra di scorrimento su una pagina HTML</a></li><li><a href ="faq/how-to-make-a-
div-vertically-scrollable-using-css.php" target="_blank">Come rendere un DIV
scorrevole verticalmente usando i CSS</a></li><li> <a href="faq/how-to-right-
align-flex-item-using-css.php" target="_blank">Come allineare a destra un
elemento flessibile utilizzando i CSS< /a></li><li><a href="faq/how-to-center-a-
div-horizontally-and-vertically-using-flexbox-in-css.php" target="_blank">Come
per centrare un DIV orizzontalmente e verticalmente usando flexbox in
CSS</a></li><li><a href="faq/how-to-remove-border-from-iframe-in-html.php"
target=" _blank">Come rimuovere il bordo dall'iframe in HTML</a></li><li><a
href="faq/how-to-reset-or-remove-css-style-for-a-particular-element .php"
target="_blank">Come reimpostare o rimuovere lo stile CSS per un particolare
elemento</a></li><li><a href="faq/how-to-set-fixed-width-for- td-regardless-of-
its-content.php" target="_blank">Come impostare una larghezza fissa per td
indipendentemente dal suo contenuto</a></li><li><a href="faq/how-to -remove-
underline-from-link-in-html.php" target="_blank">Come rimuovere la
sottolineatura dal collegamento in HTML</a></li><li><a href="faq/how-to -make-
body-to-have-100-percent-of-the-browser-height.php" target="_blank">Come fare in
modo che il corpo abbia il 100% del
altezza del browser</a></li><li><a href="faq/how-to-set-space-between-flex-
items-using-css.php" target="_blank">Come impostare lo spazio tra elementi
flessibili utilizzando i CSS</a></li><li><a href="faq/how-to-apply-transition-
on-css-display-property.php" target="_blank">Come applicare transizione sulla
proprietà display CSS</a></li><li><a href="faq/how-to-scale-font-size-based-on-
the-viewport-width-using-css.php" target ="_blank">Come ridimensionare la
dimensione del carattere in base alla larghezza del viewport utilizzando i
CSS</a></li><li><a href="faq/how-to-transition-height-from-0-to-auto -using-
css.php" target="_blank">Come passare l'altezza da 0 ad auto utilizzando i
CSS</a></li><li><a href="faq/how-to-vertically-align-text -next-to-an-image-
using-css.php" target="_blank">Come allineare verticalmente il testo accanto a
un'immagine usando i CSS</a></li><li><a href="faq/ how-to-vertically-center-a-
div-element-using-css.php" target="_blank">Come centrare verticalmente un
elemento DIV usando i CSS</a></li><li><a href= "faq/come-applicare-un-filtro-
css-all'immagine-di-sfondo-di-un-elemento. php" target="_blank">Come applicare
un filtro CSS all'immagine di sfondo di un elemento</a></li><li><a
href="faq/how-to-combine-background-image-and -css3-gradient-on-the-same-
element.php" target="_blank">Come combinare l'immagine di sfondo e il gradiente
CSS3 sullo stesso elemento</a></li><li><a href="faq /how-to-create-a-full-
screen-iframe-with-100-percent-height.php" target="_blank">Come creare un iframe
a schermo intero con altezza del 100%</a></li> <li><a href="faq/how-to-make-a-
div-to-fill-the-height-of-the-remaining-screen-space.php" target="_blank">Come
creare un DIV per riempire l'altezza dello spazio rimanente sullo
schermo</a></li><li><a href="faq/how-to-write-comments-in-javascript.php"
target="_blank">Come scrivere commenti in JavaScript</a></li><li><a
href="faq/show-hide-divs-based-on-radio-button-selection-in-jquery.php"
target="_blank"> Come mostrare e nascondere gli elementi DIV in base alla
selezione dei pulsanti di opzione in jQuery</a></li><li><a href="faq/show-hide-
divs-based-on-checkbox-selection-in- jquery.php" targ et="_blank">Come mostrare
e nascondere gli elementi DIV in base al clic delle caselle di controllo in
jQuery</a></li><li><a href="faq/show-hide-divs-based-on-dropdown -selection-in-
jquery.php" target="_blank">Come mostrare e nascondere gli elementi DIV in base
alla selezione a discesa in jQuery</a></li><li><a href="faq/how-to- define-a-
function-in-jquery.php" target="_blank">Come definire una funzione in
jQuery</a></li><li><a href="faq/how-to-define-a -function-in-javascript.php"
target="_blank">Come definire una funzione in JavaScript</a></li><li><a
href="faq/call-a-function-after-some- time-in-jquery.php" target="_blank">Come
chiamare una funzione dopo aver atteso un po' di tempo in jQuery</a></li><li><a
href="faq/how-to-add- css-properties-to-an-element-dynamically-using-jquery.php"
target="_blank">Come aggiungere dinamicamente proprietà CSS a un elemento
utilizzando jQuery</a></li><li><a href= "faq/how-to-add-attribute-to-an-html-
element-in-jquery.php" target="_blank">Come aggiungere attributi a un elemento
HTML in jQuery</a></li>< li><a href="faq/come- to-remove-attribute-from-an-html-
element-in-jquery.php" target="_blank">Come rimuovere l'attributo da un elemento
HTML in jQuery</a></li><li><a href ="faq/how-to-add-element-to-dom-in-
jquery.php" target="_blank">Come aggiungere elementi al DOM in
jQuery</a></li><li><a href ="faq/how-to-remove-elements-from-dom-in-jquery.php"
target="_blank">Come rimuovere elementi dal DOM in jQuery</a></li><li><a href
="faq/how-to-remove-white-spaces-from-a-string-in-jquery.php"
target="_blank">Come rimuovere gli spazi bianchi da una stringa utilizzando
jQuery</a></li> <li><a href="faq/how-to-find-number-of-characters-in-a-string-
using-jquery.php" target="_blank">Come trovare il numero di caratteri in una
stringa utilizzando jQuery</a></li><li><a href="faq/how-to-remove-clickable-
behavior-from-a-disabled-link-using-jquery.php" target="_blank">Come per
rimuovere il comportamento cliccabile da un collegamento disattivato utilizzando
jQuery</a></li><li><a href="faq/how-to-create-custom-radio-buttons-using-css-
and-jquery.php " target="_blank">Come creare una radio personalizzata pulsanti
utilizzando CSS e jQuery</a></li><li><a href="faq/how-to-create-custom-
checkboxes-using-css-and-jquery.php" target="_blank">Come per creare caselle di
controllo personalizzate utilizzando CSS e jQuery</a></li><li><a href="faq/how-
to-create-custom-select-boxes-using-css-and-jquery.php" target= "_blank">Come
creare caselle di selezione personalizzate utilizzando CSS e
jQuery</a></li><li><a href="faq/how-to-check-a-checkbox-is-checked-or-not-
using-jquery.php" target="_blank">Come verificare che una casella di controllo
sia selezionata o meno utilizzando jQuery</a></li><li><a href="faq/how-to-
create-a-string -by-joining-the-elements-of-an-array-in-javascript.php"
target="_blank">Come creare una stringa unendo gli elementi di un array in
JavaScript</a></li>< li><a href="faq/how-to-get-the-value-of-selected-radio-
button-using-jquery.php" target="_blank">Come ottenere il valore del pulsante di
opzione selezionato utilizzando jQuery< /a></li><li><a href="faq/come-ottenere-
i-valori-delle-caselle-di-controllo-selezionate-in-un-gruppo-usando-jquery.php"
target="_blank" >Come ottenere i valori del controllo selezionato box in un
gruppo usando jQuery</a></li><li><a href="faq/how-to-bind-click-event-to-
dynamically-added-elements-in-jquery.php" target= "_blank">Come associare
l'evento clic agli elementi HTML aggiunti dinamicamente in jQuery</a></li><li><a
href="faq/how-to-set-the-width-of-a-div- element-using-jquery.php"
target="_blank">Come impostare dinamicamente la larghezza di un elemento DIV
usando jQuery</a></li><li><a href="faq/how-to-set- the-height-of-a-div-element-
using-jquery.php" target="_blank">Come impostare dinamicamente l'altezza di un
elemento DIV utilizzando jQuery</a></li><li><a href ="faq/how-to-remove-wrapper-
element-but-keep-the-text-content-intact-using-jquery.php" target="_blank">Come
rimuovere l'elemento wrapper ma mantenere intatto il contenuto del testo
utilizzando jQuery</a></li><li><a href="faq/how-to-animate-div-height-based-on-
content-using-jquery.php" target="_blank">Come animare un'altezza DIV basata sul
contenuto utilizzando jQuery</a></li><li><a href="faq/how-to-highlight-
alternate-table-row-using-jquery.php" target="_blank" > Come in alto leggera
riga di tabella alternativa usando jQuery</a></li><li><a href="faq/how-to-get-
the-current-page-url-using-jquery.php" target="_blank"> Come ottenere l'URL
della pagina corrente utilizzando jQuery</a></li><li><a href="faq/how-to-
calculate-number-of-words-in-a-string-using-jquery.php " target="_blank">Come
calcolare il numero di parole in una stringa utilizzando jQuery</a></li><li><a
href="faq/how-to-find-substring-between-the-two -words-using-jquery.php"
target="_blank">Come trovare la sottostringa tra le due parole usando
jQuery</a></li><li><a href="faq/how-to-get-the -value-of-selected-option-in-a-
select-box-using-jquery.php" target="_blank">Come ottenere il valore
dell'opzione selezionata in una casella di selezione utilizzando jQuery</a></li
><li><a href="faq/how-to-get-the-text-inside-an-element-using-jquery.php"
target="_blank">Come ottenere il testo all'interno di un elemento utilizzando
jQuery< /a></li><li><a href="faq/how-to-check-an-element-is-visible-or-not-
using-jquery.php" target="_blank">Come controllare un elemento è visibile o meno
utilizzando jQuery</a></li><li ><a href="faq/populate-state-dropdown-based-on-
selection-in-country-dropdown-using-jquery.php" target="_blank">Come popolare il
menu a discesa dello stato in base alla selezione nel menu a discesa del paese
utilizzando jQuery</a></li><li><a href="faq/come-ottenere-la-posizione-di-un-
elemento-relativo-al-documento-usando-jquery.php" target ="_blank">Come ottenere
la posizione di un elemento rispetto al documento usando jQuery</a></li><li><a
href="faq/how-to-get-the-position-of-an -element-relative-to-the-parent-using-
jquery.php" target="_blank">Come ottenere la posizione di un elemento rispetto
al genitore usando jQuery</a></li><li><a href="faq/how-to-find-mouse-position-
relative-to-the-document-using-jquery.php" target="_blank">Come trovare la
posizione del mouse rispetto al documento utilizzando jQuery</a> </li><li><a
href="faq/how-to-find-mouse-position-relative-to-an-element-using-jquery.php"
target="_blank">Come trovare la posizione relativa del mouse a un elemento
usando jQuery</a></li><li><a href="faq/how-to-get-substring-from-a-string-using-
jquery.php" target="_blank">Come ottenere una sottostringa da una stringa
utilizzando jQuery</a></li><li><a href="faq/show-read-more-link-if-the-text -
exceeds-a-certain-length-using-jquery.php" target="_blank">Come mostrare il link
leggi di più se il testo supera una certa lunghezza usando jQuery</a></li><li><a
href ="faq/how-to-get-current-image-size-in-javascript.php" target="_blank">Come
ottenere la dimensione attuale dell'immagine in JavaScript</a></li><li><a href
="faq/how-to-get-original-image-size-in-javascript.php" target="_blank">Come
ottenere la dimensione originale dell'immagine in JavaScript</a></li><li><a href
="faq/how-to-increase-and-decrease-image-size-using-javascript.php"
target="_blank">Come aumentare e diminuire le dimensioni dell'immagine
utilizzando JavaScript</a></li><li> <a href="faq/how-to-create-jquery-slide-up-
and-down-toggle-effect.php" target="_blank">Come creare l'effetto di scorrimento
su e giù jQuery</a>< /li><li><a href="faq/how-to-create-jquery-slide-left-and-
right-toggle-effect.php" target="_blank">Come creare jQuery slide left and right
toggl e effetto</a></li><li><a href="faq/how-to-animate-div-height-on-mouse-
hover-using-jquery.php" target="_blank">Come animare l'altezza del DIV al
passaggio del mouse utilizzando jQuery</a></li><li><a href="faq/how-to-animate-
div-width-on-mouse-hover-using-jquery.php" target= "_blank">Come animare la
larghezza DIV al passaggio del mouse utilizzando jQuery</a></li><li><a
href="faq/how-to-play-and-stop-css-animation-using-jquery. php"
target="_blank">Come riprodurre e interrompere l'animazione CSS utilizzando
jQuery</a></li><li><a href="faq/how-to-disable-or-enable-a-form-element -using-
jquery.php" target="_blank">Come disabilitare o abilitare un elemento del modulo
utilizzando jQuery</a></li><li><a href="faq/how-to-disable-all-input -controls-
inside-a-form-using-jquery.php" target="_blank">Come disabilitare tutti i
controlli di input all'interno di un form utilizzando jQuery</a></li><li><a
href="faq/ how-to-check-or-uncheck-radio-button-dynamically-using-jquery.php"
target="_blank">Come controllare o
deseleziona il pulsante di opzione in modo dinamico utilizzando
jQuery</a></li><li><a href="faq/how-to-check-or-uncheck-a-checkbox-dynamically-
using-jquery.php" target="_blank ">Come selezionare o deselezionare una casella
di controllo in modo dinamico utilizzando jQuery</a></li><li><a href="faq/how-
to-remove-first-character-from-a-string-in-jquery. php" target="_blank">Come
rimuovere il primo carattere da una stringa in jQuery</a></li><li><a
href="faq/how-to-stop-firing-event-until-an- effect-is-finished-in-jquery.php"
target="_blank">Come interrompere l'attivazione di un evento finché un effetto
non è terminato in jQuery</a></li><li><a href="faq/how- to-check-if-an-element-
exists-in-jquery.php" target="_blank">Come verificare se un elemento esiste in
jQuery</a></li><li><a href="faq /sposta-un-elemento-a-sinistra-destra-su-e-giù-
usando-i-tasti-freccia-in-jquery.php" target="_blank">Come spostare un elemento
a sinistra, destra, su e giù utilizzando i tasti freccia in
jQuery</a></li><li><a href="faq/how-to-animate-opacity-of-an-element-on-mouse-
hover-using-jquery.php" target ="_blank">Come animare l'opacità o f un elemento
al passaggio del mouse utilizzando jQuery</a></li><li><a href="faq/hide-
dropdown-menu-on-click-outside-of-the-element-in-jquery.php"
target="_blank">Come nascondere il menu a discesa al clic al di fuori
dell'elemento in jQuery</a></li><li><a href="faq/how-to-toggle-text-inside-an-
element -on-click-using-jquery.php" target="_blank">Come attivare/disattivare il
testo all'interno di un elemento al clic utilizzando jQuery</a></li><li><a
href="faq/how-to- customize-file-input-type-using-css-and-jquery.php"
target="_blank">Come personalizzare la casella del tipo di input del file
utilizzando CSS e jQuery</a></li><li><a href= "faq/how-to-fire-event-on-file-
select-in-jquery.php" target="_blank">Come attivare l'evento sulla selezione del
file in jQuery</a></li><li>< a href="faq/how-to-get-selected-file-name-from-
input-type-file-using-jquery.php" target="_blank">Come ottenere il nome file
selezionato dal file di tipo input utilizzando jQuery </a></li><li><a
href="faq/auto-update-div-content-while-typing-in-textarea-using-jquery.php"
target="_blank">Come aggiornare DIV contenuto automaticamente mentre ty ping
nella textarea usando jQuery</a></li><li><a href="faq/how-to-insert-html-
content-into-an-iframe-using-jquery.php" target="_blank" >Come inserire
contenuto HTML in un iFrame utilizzando jQuery</a></li><li><a href="faq/how-to-
call-a-function-repeatedly-after-fixed-time-interval-in -jquery.php"
target="_blank">Come chiamare ripetutamente una funzione dopo un determinato
intervallo di tempo in jQuery</a></li><li><a href="faq/how-to-redirect-to-
another -web-page-using-jquery.php" target="_blank">Come reindirizzare a
un'altra pagina web utilizzando jQuery</a></li><li><a href="faq/how-to-check-
if-an-element-is-hidden-using-jquery.php" target="_blank">Come controllare se un
elemento è nascosto usando jQuery</a></li><li><a href="faq/ how-to-select-all-
visible-or-hidden-elements-in-a-page-using-jquery.php" target="_blank">Come
selezionare tutti gli elementi visibili o nascosti in una pagina utilizzando
jQuery</a ></li><li><a href="faq/how-to-add-remove-table-rows-dynamically-using-
jquery.php" target="_blank">Come aggiungere o rimuovere righe all'interno di una
tabella dinamicamente usi ng jQuery</a></li><li><a href="faq/how-to-move-an-
element-into-another-element-using-jquery.php" target="_blank">Come sposta un
elemento in un altro elemento usando jQuery</a></li><li><a href="faq/how-to-
change-href-attribute-of-a-hyperlink-using-jquery.php" target= "_blank">Come
modificare l'attributo href di un collegamento ipertestuale utilizzando
jQuery</a></li><li><a href="faq/how-to-refresh-a-page-with-jquery.php" target=
"_blank">Come aggiornare una pagina con jQuery</a></li><li><a href="faq/how-to-
select-an-element-with-multiple-classes-with-jquery.php " target="_blank">Come
selezionare un elemento con più classi con jQuery</a></li><li><a href="faq/how-
to-loop-through-an-array-in-javascript .php" target="_blank">Come scorrere un
array in JavaScript</a></li><li><a href="faq/how-to-replace-character-inside-a-
string-in -javascript.php" target="_blank">Come sostituire il carattere
all'interno di una stringa in JavaScript</a></li><li><a href="faq/how-to-
explode-a-string-in- javascript.php" target="_blank">Come esplodere o sp acceso
una stringa in JavaScript</a></li><li><a href="faq/how-to-assign-block-of-html-
code-to-a-javascript-variable.php" target=" _blank">Come assegnare un blocco di
codice HTML a una variabile JavaScript</a></li><li><a href="faq/how-to-display-
all-items-in-array-using-loop- in-jquery.php" target="_blank">Come visualizzare
tutti gli elementi o i valori in un array utilizzando il loop in
jQuery</a></li><li><a href="faq/how-to-get- number-of-elements-in-a-div-using-
jquery.php" target="_blank">Come ottenere il numero di elementi in un DIV usando
jQuery</a></li><li><a href= "faq/how-to-replace-all-occurrences-of-a-string-in-
javascript.php" target="_blank">Come sostituire tutte le occorrenze di una
stringa in JavaScript</a></li>< li><a href="faq/how-to-check-whether-a-value-is-
numeric-or-not-in-jquery.php" target="_blank">Come verificare se un valore è
numerico o non in jQuery</a></li><li><a href="faq/how-to-replace-multiple-
spaces-with-single-space-in-javascript.php" target="_blank">Come per sostituire
più spazi con un singolo spazio in JavaScript< /a></li><li><a href="faq/how-to-
detect-click-inside-iframe-using-javascript.php" target="_blank">Come rilevare i
clic all'interno di iframe utilizzando JavaScript< /a></li><li><a href="faq/how-
to-determine-if-variable-is-undefined-or-null-in-javascript.php"
target="_blank">Come determinare se la variabile è indefinita o nulla in
JavaScript</a></li><li><a href="faq/how-to-get-element-by-class-name-in-
javascript.php" target="_blank ">Come ottenere l'elemento per nome di classe in
JavaScript</a></li><li><a href="faq/how-to-detect-enter-key-press-on-keyboard-
using-jquery.php " target="_blank">Come rilevare la pressione del tasto Invio
sulla tastiera utilizzando jQuery</a></li><li><a href="faq/how-to-detect-the-
enter-key-press-in -a-text-input-field-using-jquery.php" target="_blank">Come
rilevare la pressione del tasto Invio in un campo di immissione testo
utilizzando jQuery</a></li><li><a href= "faq/how-to-change-the-background-color-
of-a-web-page-using-javascript.php" target="_blank">Come cambiare il colore di
sfondo di una pagina web utilizzando JavaScript</a </li><li><a href= "faq/how-
to-check-if-a-variable-exists-or-defined-in-javascript.php" target="_blank">Come
verificare se una variabile esiste o è definita in JavaScript</a></ li><li><a
href="faq/how-to-get-the-value-of-a-textarea-in-jquery.php" target="_blank">Come
ottenere il valore di una textarea in jQuery </a></li><li><a href="faq/how-to-
make-the-first-letter-of-a-string-uppercase-in-javascript.php" target="_blank">
Come rendere maiuscola la prima lettera di una stringa in
JavaScript</a></li><li><a href="faq/how-to-create-multiline-strings-in-
javascript.php" target="_blank ">Come creare stringhe multilinea in
JavaScript</a></li><li><a href="faq/come-controllare-se-una-stringa-contiene-
una-sottostringa-in-javascript.php " target="_blank">Come verificare se una
stringa contiene una sottostringa in JavaScript</a></li><li><a href="faq/how-to-
encode-url-in-javascript.php" target="_blank">Come codificare l'URL in
JavaScript</a></li><li><a href="faq/how-to-remove-duplicate-values-from-a-
javascript-array.php" target="_blank">Come rimuovere dupli cate valori da un
array JavaScript</a></li><li><a href="faq/how-to-remove-a-property-from-a-
javascript-object.php" target="_blank"> Come rimuovere una proprietà da un
oggetto JavaScript</a></li><li><a href="faq/how-to-check-if-a-value-exists-in-
an-array-in-javascript .php" target="_blank">Come verificare se un valore esiste
in un array in JavaScript</a></li><li><a href="faq/how-to-get-day-month-and -
year-from-a-date-object-in-javascript.php" target="_blank">Come ottenere giorno,
mese e anno da un oggetto data in JavaScript</a></li><li><a href="faq/how-to-
remove-a-specific-item-from-an-array-in-javascript.php" target="_blank">Come
rimuovere un elemento specifico da un array in JavaScript</a> </li><li><a
href="faq/how-to-change-the-class-of-an-element-using-javascript.php"
target="_blank">Come modificare la classe di un elemento utilizzando
JavaScript</a></li><li><a href="faq/how-to-convert-comma-separated-string-into-
an-array-in-javascript.php" target="_blank"> Come convertire una stringa
separata da virgola in un array in JavaScript</a></li><li><a href="faq/how-to-
get-the-class-name-of-an-object-in-javascript.php" target="_blank">Come per
ottenere il nome della classe di un oggetto in JavaScript</a></li><li><a
href="faq/how-to-check-for-an-empty-string-in-javascript.php" target=
"_blank">Come controllare una stringa vuota in JavaScript</a></li><li><a
href="faq/how-to-sort-an-array-of-integers-correctly-in-javascript .php"
target="_blank">Come ordinare correttamente un array di numeri interi in
JavaScript</a></li><li><a href="faq/how-to-return-multiple-values-from-a -
function-in-javascript.php" target="_blank">Come restituire più valori da una
funzione in JavaScript</a></li><li><a href="faq/how-to-get-the -current-url-
with-javascript.php" target="_blank">Come ottenere l'URL corrente con
JavaScript</a></li><li><a href="faq/how-to-include-a -javascript-file-in-
another-javascript-file.php" target="_blank">Come includere un file JavaScript
in un altro file JavaScript</a></li><li><a href="faq/how -per-rilevare-la-
risoluzione-dello-schermo-con-javascript. php" target="_blank">Come rilevare la
risoluzione dello schermo con JavaScript</a></li><li><a href="faq/how-to-parse-
json-in-javascript.php" target=" _blank">Come analizzare JSON in
JavaScript</a></li><li><a href="faq/how-to-split-a-string-into-an-array-of-
characters-in-javascript .php" target="_blank">Come suddividere una stringa in
un array di caratteri in JavaScript</a></li><li><a href="faq/how-to-dynamically-
access-object-property -using-variable-in-javascript.php" target="_blank">Come
accedere dinamicamente alla proprietà dell'oggetto utilizzando la variabile in
JavaScript</a></li><li><a href="faq/how-to-append -values-to-an-array-in-
javascript.php" target="_blank">Come aggiungere valori a un array in
JavaScript</a></li><li><a href="faq/how- to-generate-a-timestamp-in-
javascript.php" target="_blank">Come generare un timestamp in
JavaScript</a></li><li><a href="faq/how-to-convert -js-object-to-json-
string.php" target="_blank">Come
convertire un oggetto JavaScript in una stringa JSON</a></li><li><a
href="faq/how-to-add-new-elements-at-the-beginning-of-an-array-in-
javascript .php" target="_blank">Come aggiungere nuovi elementi all'inizio di un
array in JavaScript</a></li><li><a href="faq/how-to-get-the-value- of-text-
input-field-using-javascript.php" target="_blank">Come ottenere il valore del
campo di input del testo utilizzando JavaScript</a></li><li><a
href="faq/automatically -adjust-iframe-height-according-to-its-contents-using-
javascript.php" target="_blank">Come regolare automaticamente l'altezza
dell'iFrame in base ai suoi contenuti utilizzando JavaScript</a></li><li> <a
href="faq/how-to-call-multiple-javascript-functions-in-a-single-onclick-
event.php" target="_blank">Come chiamare più funzioni JavaScript in un singolo
evento onclick </ a></li><li><a href="faq/how-to-store-javascript-objects-in-
html5-localstorage.php" target="_blank">Come archiviare oggetti JavaScript in
HTML5 localStorage </ a></li><li><a href="faq/come-ottenere-una-porzione-di-
percorso-url-in-javascri pt.php" target="_blank">Come ottenere parte del
percorso dell'URL in JavaScript</a></li><li><a href="faq/how-to-add-a-class-to-a
-given-element-in-javascript.php" target="_blank">Come aggiungere una classe a
un dato elemento in JavaScript</a></li><li><a href="faq/how-to- find-the-max-
and-min-values-of-an-array-in-javascript.php" target="_blank">Come trovare i
valori massimo e minimo di un array in JavaScript</a></li ><li><a href="faq/how-
to-check-if-an-object-property-is-undefined-in-javascript.php"
target="_blank">Come verificare se una proprietà di un oggetto non è definita in
JavaScript</a></li><li><a href="faq/how-to-capture-browser-window-resize-event-
in-javascript.php" target="_blank">Come acquisire il browser evento di
ridimensionamento della finestra in JavaScript</a></li><li><a href="faq/how-to-
reset-a-form-using-jquery.php" target="_blank">Come reimpostare un modulo
utilizzando jQuery</a></li><li><a href="faq/how-to-detect-a-click-outside-of-an-
element-with-jquery.php" target="_blank"> Come rilevare un clic al di fuori di
un elemento con jQuery</a></li><li>< a href="faq/how-to-detect-change-in-a-text-
input-box-in-jquery.php" target="_blank">Come rilevare il cambiamento in una
casella di input di testo in jQuery</a ></li><li><a href="faq/how-to-foreach-
over-an-array-in-javascript.php" target="_blank">Come eseguire il foreach su un
array in JavaScript</a ></li><li><a href="faq/how-to-check-if-an-input-field-is-
empty-using-jquery.php" target="_blank">Come verificare se un il campo di input
è vuoto utilizzando jQuery</a></li><li><a href="faq/how-to-get-the-children-of-
the-this-selector-in-jquery.php" target= "_blank">Come ottenere i figli di
questo selettore in jQuery</a></li><li><a href="faq/how-to-check-if-the-mouse-
is-over-an -element-in-jquery.php" target="_blank">Come controllare se il mouse
è sopra un elemento in jQuery</a></li><li><a href="faq/how-to-scroll -to-the-
top-of-the-page-using-jquery.php" target="_blank">Come scorrere fino all'inizio
della pagina utilizzando jQuery</a></li><li><a href ="faq/how-to-insert-an-item-
into-an-array-at-a-specific-index-in-javascript.php" target="_blank">Come
inserire un elemento in un array in un indice specifico in
JavaScript</a></li><li><a href="faq/how-to-get-the-id-of-the-element-that-fired-
an-event-in-jquery.php" target="_blank">Come ottenere l'id dell'elemento che ha
generato un evento in jQuery</a></li><li><a href="faq/how- to-find-the-sum-of-
an-array-of-numbers-in-javascript.php" target="_blank">Come trovare la somma di
un array di numeri in JavaScript</a></li> <li><a href="faq/how-to-check-if-an-
array-includes-an-object-in-javascript.php" target="_blank">Come verificare se
un array include un oggetto in JavaScript</a></li><li><a href="faq/how-to-
submit-a-form-using-jquery.php" target="_blank">Come inviare un modulo
utilizzando jQuery</ a></li><li><a href="faq/how-to-create-a-div-element-in-
jquery.php" target="_blank">Come creare un elemento DIV in jQuery</
a></li><li><a href="faq/how-to-convert-a-js-object-to-an-array-using-jquery.php"
target="_blank">Come convertire un oggetto JS su un array utilizzando
jQuery</a></li><li><a href="faq/come-cambiare-la-sorgente-immagine-u sing-
jquery.php" target="_blank">Come modificare l'origine dell'immagine utilizzando
jQuery</a></li><li><a href="faq/how-to-select-an-element-by- name-in-jquery.php"
target="_blank">Come selezionare un elemento per nome in jQuery</a></li><li><a
href="faq/how-to-find-an-element -based-on-a-data-attribute-value-in-jquery.php"
target="_blank">Come trovare un elemento basato su un valore di attributo dati
in jQuery</a></li><li> <a href="faq/how-to-set-css-background-image-property-
using-jquery.php" target="_blank">Come impostare la proprietà CSS background-
image utilizzando jQuery</a></li ><li><a href="faq/how-to-detect-a-mobile-
device-in-jquery.php" target="_blank">Come rilevare un dispositivo mobile in
jQuery</a></li ><li><a href="faq/how-to-get-the-data-id-attribute-of-an-element-
using-jquery.php" target="_blank">Come ottenere il data-id attributo di un
elemento utilizzando jQuery</a></li><li><a href="faq/how-to-check-if-object-is-
an-array-in-javascript.php" target="_blank ">Come verificare se l'oggetto è un
array in JavaScript</a></li><li><a href="faq/ how-to-remove-an-event-handler-in-
jquery.php" target="_blank">Come rimuovere un gestore di eventi in
jQuery</a></li><li><a href="faq/ how-to-get-the-id-of-an-element-using-
jquery.php" target="_blank">Come ottenere l'id di un elemento usando
jQuery</a></li><li>< a href="faq/how-to-add-options-to-a-select-box-from-a-js-
object-using-jquery.php" target="_blank">Come aggiungere opzioni a una casella
di selezione da un oggetto JS utilizzando jQuery</a></li><li><a href="faq/how-
to-replace-innerhtml-of-a-div-using-jquery.php" target="_blank"> Come sostituire
innerHTML di un div usando jQuery</a></li><li><a href="faq/how-to-add-li-in-an-
existing-ul-using-jquery.php" target ="_blank">Come aggiungere LI in un UL
esistente utilizzando jQuery</a></li><li><a href="faq/how-to-get-the-value-in-
an-input-text -box-using-jquery.php" target="_blank">Come ottenere il valore in
una casella di testo di input utilizzando jQuery</a></li><li><a href="faq/how-
to-change -css-display-property-to-none-or-block-using-jquery.php"
target="_blank">Come modificare la proprietà di visualizzazione CSS su none o
bloccare utilizzando jQuery</a></li><li><a href="faq/how-to-set-the-value-of-
input-text-box-using-jquery.php" target="_blank ">Come impostare il valore della
casella di testo di input utilizzando jQuery</a></li><li><a href="faq/how-to-
change-the-text-of-a-button-using-jquery .php" target="_blank">Come modificare
il testo di un pulsante utilizzando jQuery</a></li><li><a href="faq/how-to-loop-
through-elements-with-the -same-class-in-jquery.php" target="_blank">Come
scorrere gli elementi con la stessa classe in jQuery</a></li><li><a
href="faq/how-to- allow-only-numeric-value-in-html-text-input-using-jquery.php"
target="_blank">Come consentire solo valori numerici nell'input di testo HTML
utilizzando jQuery</a></li><li ><a href="faq/how-to-check-for-a-hash-in-a-url-
using-javascript.php" target="_blank">Come verificare la presenza di un hash in
un URL utilizzando JavaScript< /a></li><li><a href="faq/how-to-convert-a-float-
number-to-a-whole-number-in-javascript.php" target="_blank">Come convertire un
numero float in un numero intero in JavaScript</a></li><li><a href="faq/how-to -
fix-dollar-is-not-defined-error-in-jquery.php" target="_blank">Come correggere
l'errore $ non è definito in jQuery</a></li><li><a href= "faq/how-to-get-class-
list-of-an-element-with-jquery.php" target="_blank">Come ottenere l'elenco delle
classi di un elemento con jQuery</a></li>< li><a href="faq/jquery-document-
ready-equivalent-in-javascript.php" target="_blank">Cos'è l'equivalente di
jQuery $(document).ready() in JavaScript</a></li ><li><a href="faq/how-to-set-
or-unset-a-cookie-with-jquery.php" target="_blank">Come impostare o disattivare
un cookie con jQuery</a> </li><li><a href="faq/how-to-show-loading-spinner-in-
jquery.php" target="_blank">Come mostrare lo spinner di caricamento in
jQuery</a></li ><li><a href="faq/how-to-preview-an-image-before-it-is-uploaded-
using-jquery.php" target="_blank">Come visualizzare l'anteprima di un'immagine
prima che venga caricata usando jQuery</a></li><li><a href="faq/how-to-get-
class-name-using-jquery.php" target="_blank">Come ottenere il nome della classe
usando jQuery< /a></li><li><a href="faq/come-dormire-prima-di-continuare-in-
javascri pt.php" target="_blank">Come dormire prima di continuare in
JavaScript</a></li><li><a href="faq/how-to-set-value-of-textarea-in-jquery .php"
target="_blank">Come impostare il valore di textarea in jQuery</a></li><li><a
href="faq/how-to-convert-utc-date-time-to-local -date-time-in-javascript.php"
target="_blank">Come convertire la data e l'ora UTC in data e ora locale in
JavaScript</a></li><li><a href="faq/how-to -load-local-json-file-using-
jquery.php" target="_blank">Come caricare un file JSON locale utilizzando
jQuery</a></li><li><a href="faq/how-to -trigger-a-click-on-a-link-using-
jquery.php" target="_blank">Come attivare un clic su un collegamento utilizzando
jQuery</a></li><li><a href= "faq/how-to-get-the-class-of-the-clicked-element-in-
jquery.php" target="_blank">Come ottenere la classe dell'elemento cliccato in
jQuery</a></ li><li><a href="faq/how-to-ajax-submit-a-form-in-jquery.php"
target="_blank">Come inviare un modulo AJAX in jQuery</a></ li><li><a
href="faq/how-to-count-number-of-rows-in-a-table-using-jquery.php"
target="_blank">H come contare il numero di righe in una tabella utilizzando
jQuery</a></li><li><a href="faq/how-to-merge-two-arrays-in-javascript.php"
target="_blank" >Come unire due array in JavaScript</a></li><li><a
href="faq/how-to-check-if-a-value-is-an-object-in-javascript.php"
target="_blank">Come verificare se un valore è un oggetto in
JavaScript</a></li><li><a href="faq/how-to-loop-through-a-javascript-object.php
" target="_blank">Come scorrere un oggetto JavaScript</a></li><li><a
href="faq/how-to-display-a-javascript-object.php" target="_blank" ">Come
visualizzare un oggetto JavaScript</a></li><li><a href="faq/how-to-add-a-key-
value-pair-to-an-object-in-javascript. php" target="_blank">Come aggiungere una
coppia chiave-valore a un oggetto in JavaScript</a></li><li><a href="faq/how-to-
test-for-an-empty- object-in-javascript.php" target="_blank">Come testare un
oggetto vuoto in JavaScript</a></li><li><a href="faq/how-to-check-if-a -chiave-
esiste-in-un-oggetto-javascript.php"
target="_blank">Come verificare se esiste una chiave in un oggetto
JavaScript</a></li><li><a href="faq/how-to-sort-an-array-of-objects-by -
property-values-in-javascript.php" target="_blank">Come ordinare un array di
oggetti in base ai valori delle proprietà in JavaScript</a></li><li><a
href="faq/how-to -merge-the-properties-of-two-javascript-objects.php"
target="_blank">Come unire le proprietà di due oggetti JavaScript</a></li><li><a
href="faq/ how-to-get-the-length-of-a-javascript-object.php"
target="_blank">Come ottenere la lunghezza di un oggetto
JavaScript</a></li><li><a href= "faq/how-to-check-if-an-element-contains-a-
class-in-javascript.php" target="_blank">Come verificare se un elemento contiene
una classe in JavaScript</a></ li><li><a href="faq/how-to-create-a-two-
dimensional-array-in-javascript.php" target="_blank">Come creare un array
bidimensionale in JavaScript</a ></li><li><a href="faq/how-to-empty-an-array-in-
javascript.php" target="_blank">Come svuotare un array in JavaScript</a></
li><li><a href="faq/come-ottenere- query-string-parameters-values-in-
javascript.php" target="_blank">Come ottenere i valori dei parametri della
stringa di query in JavaScript</a></li><li><a href="faq/how-to -remove-empty-
elements-from-an-array-in-javascript.php" target="_blank">Come rimuovere
elementi vuoti da un array in JavaScript</a></li><li><a href= "faq/how-to-stop-
setinterval-call-in-javascript.php" target="_blank">Come interrompere la
chiamata setInterval in JavaScript</a></li><li><a href="faq/ trigger-a-button-
click-on-enter-key-press-in-a-text-box-in-javascript.php" target="_blank">Come
attivare un pulsante clic sulla pressione del tasto Invio in una casella di
testo in JavaScript</a></li><li><a href="faq/how-to-get-the-last-item-in-an-
array-in-javascript.php" target="_blank"> Come ottenere l'ultimo elemento in un
array in JavaScript</a></li><li><a href="faq/how-to-get-the-current-date-in-
javascript.php" target=" _blank">Come ottenere la data corrente in
JavaScript</a></li><li><a href="faq/how-to-convert-a-string-to-boolean-in-
javascript.php" target ="_blank">Come convertire un file str ing to boolean in
JavaScript</a></li><li><a href="faq/how-to-format-a-javascript-date.php"
target="_blank">Come formattare una data JavaScript< /a></li><li><a
href="faq/how-to-parse-a-string-to-a-date-object-in-javascript.php"
target="_blank">Come analizzare una stringa a un oggetto data in
JavaScript</a></li><li><a href="faq/how-to-find-an-object-by-property-value-in-
an-array-of- javascript-objects.php" target="_blank">Come trovare un oggetto in
base al valore della proprietà in un array di oggetti JavaScript</a></li><li><a
href="faq/how-to-get- month-name-from-a-date-in-javascript.php"
target="_blank">Come ottenere il nome del mese da una data in
JavaScript</a></li><li><a href="faq/ how-to-convert-decimal-values-to-
hexadecimal-in-javascript.php" target="_blank">Come convertire i valori decimali
in esadecimali in JavaScript</a></li><li><a href= "faq/how-to-check-if-a-
variable-is-a-string-in-javascript.php" target="_blank">Come verificare se una
variabile è una stringa in JavaScript</a></ li><li><a href="faq/how-to-set-
default-parameter-val ue-for-a-javascript-function.php" target="_blank">Come
impostare il valore predefinito del parametro per una funzione
JavaScript</a></li><li><a href="faq/how-to- add-days-to-current-date-in-
javascript.php" target="_blank">Come aggiungere giorni alla data corrente in
JavaScript</a></li><li><a href="faq/how -to-compare-two-dates-in-javascript.php"
target="_blank">Come confrontare due date in JavaScript</a></li><li><a
href="faq/how-to- convert-a-unix-timestamp-to-time-in-javascript.php"
target="_blank">Come convertire un timestamp unix in ora in
JavaScript</a></li><li><a href=" faq/how-to-copy-array-by-value-in-
javascript.php" target="_blank">Come copiare array per valore in
JavaScript</a></li><li><a href=" faq/how-to-remove-text-from-a-string-in-
javascript.php" target="_blank">Come rimuovere testo da una stringa in
JavaScript</a></li><li><a href="faq/how-to-check-if-an-array-exists-and-not-
empty-in-javascript.php" target="_blank">Come verificare se un array esiste e
non è vuoto in JavaScript< /a></li><li><a href="faq/come-ottenere-a-r andom-
item-from-a-javascript-array.php" target="_blank">Come ottenere un elemento
casuale da un array JavaScript</a></li><li><a href="faq/how- to-format-
javascript-date-as-yyyy-mm-dd.php" target="_blank">Come formattare la data
JavaScript come aaaa mm gg</a></li><li><a href="faq /how-to-remove-an-item-from-
a-javascript-array-by-value.php" target="_blank">Come rimuovere un elemento da
un array JavaScript in base al valore</a></li> <li><a href="faq/how-to-generate-
a-random-number-between-two-numbers-in-javascript.php" target="_blank">Come
generare un numero casuale tra due numeri in JavaScript</a></li><li><a
href="faq/how-to-pretty-print-json-using-javascript.php" target="_blank">Come
stampare in modo grazioso JSON utilizzando JavaScript</ a></li><li><a
href="faq/how-to-open-bootstrap-dropdown-menu-on-hover-rather-than-click.php"
target="_blank">Come aprire Bootstrap menu a discesa al passaggio del mouse
anziché al clic</a></li><li><a href="faq/how-to-add-bootstrap-tooltip-to-an-
icon.php" target="_blank">Come per aggiungere il suggerimento Bootstrap a
un'icona </a></li><li><a href="faq/how-to-add-icons-to-input-submit-button-in-
bootstrap.php" target="_blank">Come aggiungere icone per inserire il pulsante di
invio in Bootstrap</a></li><li><a href="faq/how-to-align-bootstrap-modal-
vertically-center.php" target="_blank">Come allineare Bootstrap modal
verticalmente al centro</a></li><li><a href="faq/how-to-embed-youtube-video-
inside-bootstrap-modal.php" target="_blank">Come incorporare video di YouTube
all'interno di Bootstrap modal</a></li><li><a href="faq/how-to-change-the-
default-width-of-bootstrap-modal-box.php" target="_blank">Come per modificare la
larghezza predefinita della casella modale di Bootstrap</a></li><li><a
href="faq/how-to-insert-close-button-in-bootstrap-popover.php" target="_blank"
>Come inserire il pulsante di chiusura nel popover di Bootstrap</a></li><li><a
href="faq/how-to-make-bootstrap-popover-appear-disappear-on-hover-invece-of-
click .php" target="_blank">Come far apparire/scomparire il popover di Bootstrap
al passaggio del mouse anziché al clic</a></li><li><a href="faq/how-to-insert-
image-inside- bootstrap-popover.p hp" target="_blank">Come inserire un'immagine
all'interno del popover di Bootstrap</a></li><li><a href="faq/how-to-disable-
tabs-in-bootstrap.php" target=" _blank">Come disabilitare le schede in
Bootstrap</a></li><li><a href="faq/how-to-keep-the-current-tab-active-on-page-
reload-in-bootstrap .php" target="_blank">Come mantenere attiva la scheda
corrente al ricaricamento della pagina in Bootstrap</a></li><li><a
href="faq/how-to-launch-bootstrap-modal-on -page-load.php" target="_blank">Come
avviare Bootstrap modal al caricamento della pagina</a></li><li><a
href="faq/how-to-prevent-bootstrap-modal-from -closing-when-clicking-
outside.php" target="_blank">Come impedire la chiusura di Bootstrap modal quando
si fa clic all'esterno</a></li><li><a href="faq/how-to-remove -slide-down-
effect-from-bootstrap-modal.php" target="_blank">Come rimuovere l'effetto slide
down da Bootstrap modal</a></li><li><a href="faq/how- to-set-focus-on-input-
field-or-textarea-inside-a-bootstrap-modal.php" target="_blank">Come impostare
lo stato attivo sul campo di input o sull'area di testo all'interno di un modal
Bootstrap su ac tivazione</a></li><li><a href="faq/how-to-change-bootstrap-
default-input-focus-glow-style.php" target="_blank">Come modificare le
impostazioni predefinite di Bootstrap input focus glow style</a></li><li><a
href="faq/autoplay-youtube-video-inside-bootstrap-modal.php"
target="_blank">Riproduci automaticamente il video di YouTube all'interno di
Bootstrap modal</ a></li><li><a href="faq/how-to-align-responsive-image-in-
center-in-bootstrap.php" target="_blank">Come allineare l'immagine reattiva al
centro Bootstrap</a></li><li><a href="faq/how-to-align-text-in-bootstrap.php"
target="_blank">Come allineare il testo in Bootstrap</a>< /li><li><a
href="faq/how-to-center-a-column-in-bootstrap.php" target="_blank">Come centrare
una colonna in Bootstrap</a></li> <li><a href="faq/how-to-close-a-bootstrap-
modal-window-using-jquery.php" target="_blank">Come chiudere una finestra modale
Bootstrap utilizzando jQuery</a>< /li><li><a href="faq/how-to-get-centered-
content-in-bootstrap.php" target="_blank">Come ottenere contenuti centrati in
Bootstrap</a></li> <li><a href="faq/how-to-get-right-a ligned-buttons-in-
bootstrap.php" target="_blank">Come ottenere pulsanti allineati a destra in
Bootstrap</a></li><li><a href="faq/how-to-left-and- right-align-text-within-a-
div-in-bootstrap.php" target="_blank">Come allineare a sinistra e a destra il
testo all'interno di un DIV in Bootstrap</a></li><li><a href ="faq/how-to-
center-buttons-in-bootstrap.php" target="_blank">Come centrare i pulsanti in
Bootstrap</a></li><li><a href="faq/how- to-open-a-bootstrap-modal-window-using-
jquery.php" target="_blank">Come aprire una finestra modale di Bootstrap
utilizzando jQuery</a></li><li><a href="faq /how-to-vertical-align-a-div-in-
bootstrap.php" target="_blank">Come allineare verticalmente un DIV in
Bootstrap</a></li><li><a href="faq /how-to-write-comments-in-php.php"
target="_blank">Come scrivere commenti in PHP</a></li><li><a href="faq/how-to-
remove -white-space-from-a-string-in-php.php" target="_blank">Come rimuovere lo
spazio bianco da una stringa in PHP</a></li><li><a href="faq /come-trovare-il-
numero-di-caratteri-in-una-stringa-in-php.php" target="_blank">Come trovare nd
numero di caratteri in una stringa in PHP</a></li><li><a href="faq/how-to-find-
number-of-words-in-a-string-in-php.php " target="_blank">Come trovare il numero
di parole in una stringa in PHP</a></li><li><a href="faq/how-to-remove-special-
characters-from-a- string-in-php.php" target="_blank">Come rimuovere caratteri
speciali da una stringa in PHP</a></li><li><a href="faq/how-to-replace-a- word-
inside-a-string-in-php.php" target="_blank">Come sostituire una parola
all'interno di una stringa in PHP</a></li><li><a href="faq/how- to-prepend-a-
string-in-php.php" target="_blank">Come anteporre una stringa in
PHP</a></li><li><a href="faq/how-to-append -a-string-in-php.php"
target="_blank">Come aggiungere una stringa in PHP</a></li><li><a href="faq/how-
to-extract-substring- from-a-string-in-php.php" target="_blank">Come estrarre
una sottostringa da una stringa in PHP</a></li><li><a href="faq/how-to-compare -
two-strings-in-php.php" target="_blank">Come
per confrontare due stringhe in PHP</a></li><li><a href="faq/how-to-get-current-
page-url-in-php.php" target="_blank">Come ottieni l'URL della pagina corrente in
PHP</a></li><li><a href="faq/how-to-create-a-string-by-joining-the-values-of-an-
array-in- php.php" target="_blank">Come creare una stringa unendo i valori di un
array in PHP</a></li><li><a href="faq/how-to-split-a- string-into-an-array-in-
php.php" target="_blank">Come suddividere una stringa in un array in
PHP</a></li><li><a href="faq/how- to-combine-two-strings-in-php.php"
target="_blank">Come combinare due stringhe in PHP</a></li><li><a href="faq/how-
to-convert -a-string-to-lowercase-in-php.php" target="_blank">Come convertire
una stringa in minuscolo in PHP</a></li><li><a href="faq/how- to-convert-a-
string-to-uppercase-in-php.php" target="_blank">Come convertire una stringa in
maiuscolo in PHP</a></li><li><a href="faq /how-to-convert-the-first-letter-of-a-
string-to-uppercase-in-php.php" target="_blank">Come convertire la prima lettera
di una stringa in maiuscolo in PHP</a></li><li><a href="faq/how-to-convert-
special-html-entities-back-to-characters-in-php.php" target="_blank"> Come
riconvertire entità HTML speciali in caratteri in PHP</a></li><li><a
href="faq/how-to-remove-white-space-from-the-beginning-of-a-string -in-php.php"
target="_blank">Come rimuovere lo spazio bianco dall'inizio di una stringa in
PHP</a></li><li><a href="faq/how-to-remove- white-space-from-the-end-of-a-
string-in-php.php" target="_blank">Come rimuovere lo spazio bianco dalla fine di
una stringa in PHP</a></li>< li><a href="faq/how-to-create-a-new-line-in-
php.php" target="_blank">Come creare una nuova riga in PHP</a></li>< li><a
href="faq/how-to-find-string-length-in-php.php" target="_blank">Come trovare la
lunghezza delle stringhe in PHP</a></li><li>< a href="faq/how-to-check-whether-
a-variable-is-set-or-not-in-php.php" target="_blank">Come verificare se una
variabile è impostata o meno in PHP </a></li><li><a href="faq/how-to-check-
whether-a-variable-is-empty-in-php.php" target="_blank">Come verificare se poi
una variabile è vuota in PHP</a></li><li><a href="faq/how-to-check-whether-a-
variable-is-null-in-php.php" target=" _blank">Come verificare se una variabile è
nulla in PHP</a></li><li><a href="faq/how-to-reverse-a-string-in-php.php"
target=" _blank">Come invertire una stringa in PHP</a></li><li><a
href="faq/come-sostituire-la-parte-di-una-stringa-con-un-altra-stringa- in-
php.php" target="_blank">Come sostituire la parte di una stringa con un'altra
stringa in PHP</a></li><li><a href="faq/counts-how-many-times -a-substring-
occurs-in-a-string-in-php.php" target="_blank">Come contare quante volte una
sottostringa si verifica in una stringa in PHP</a></li><li> <a href="faq/how-to-
count-all-elements-in-an-array-in-php.php" target="_blank">Come contare tutti
gli elementi in un array in PHP</a>< /li><li><a href="faq/how-to-print-or-echo-
all-the-values-of-an-array-in-php.php" target="_blank">Come stampare o echo
tutti i valori di un array in PHP</a></li><li><a href="faq/how-to-display-array-
structure-and-values-in-php.php" targe t="_blank">Come visualizzare la struttura
e i valori dell'array in PHP</a></li><li><a href="faq/how-to-reverse-the-order-
of-an-array-in -php.php" target="_blank">Come invertire l'ordine di un array in
PHP</a></li><li><a href="faq/how-to-check-if-a-value -exists-in-an-array-in-
php.php" target="_blank">Come verificare se un valore esiste in un array in
PHP</a></li><li><a href="faq /how-to-check-if-a-key-exists-in-an-array-in-
php.php" target="_blank">Come verificare se esiste una chiave in un array in
PHP</a>< /li><li><a href="faq/how-to-remove-the-last-element-from-an-array-in-
php.php" target="_blank">Come rimuovere l'ultimo elemento da un array in
PHP</a></li><li><a href="faq/come-rimuovere-il-primo-elemento-da-un-array-in-
php.php" target="_blank ">Come rimuovere il primo elemento da un array in
PHP</a></li><li><a href="faq/how-to-add-elements-to-the-beginning-of-an-array -
in-php.php" target="_blank">Come aggiungere elementi all'inizio di un array in
PHP</a></li><li><a href="faq/how-to-add-elements -fino alla fine di -an-array-
in-php.php" target="_blank">Come aggiungere elementi alla fine di un array in
PHP</a></li><li><a href="faq/how-to -merge-two-or-more-arrays-into-one-array-in-
php.php" target="_blank">Come unire due o più array in un unico array in
PHP</a></li>< li><a href="faq/how-to-sort-an-array-values-alphabetically-in-
php.php" target="_blank">Come ordinare i valori di un array in ordine alfabetico
in PHP</a></ li><li><a href="faq/how-to-remove-duplicate-values-from-an-array-
in-php.php" target="_blank">Come rimuovere i valori duplicati da un array in PHP
</a></li><li><a href="faq/how-to-randomize-the-order-of-an-array-in-php.php"
target="_blank">Come randomizzare il ordine di un array in PHP</a></li><li><a
href="faq/how-to-compare-two-array-values-in-php.php" target="_blank">Come
confronta due valori di array in PHP</a></li><li><a href="faq/how-to-calculate-
the-sum-of-values-in-an-array-in-php.php" target="_blank">Come calcolare la
somma dei valori in un array in PHP</a></li><li><a href="faq/how-to-remove-
empty-v alues-from-an-array-in-php.php" target="_blank">Come rimuovere i valori
vuoti da un array in PHP</a></li><li><a href="faq/how- to-populate-dropdown-
list-with-array-values-in-php.php" target="_blank">Come popolare l'elenco a
discesa con i valori dell'array in PHP</a></li><li><a href ="faq/how-to-get-all-
the-keys-of-an-associative-array-in-php.php" target="_blank">Come ottenere tutte
le chiavi di un array associativo in PHP</ a></li><li><a href="faq/how-to-get-
all-the-values-from-an-associative-array-in-php.php" target="_blank">Come
ottenere tutti i valori da un array associativo in PHP</a></li><li><a
href="faq/how-to-sort-an-associative-array-by-key-in-php.php"
target="_blank">Come ordinare un array associativo per chiave in
PHP</a></li><li><a href="faq/how-to-sort-an-associative-array-by-value- in-
php.php" target="_blank">Come ordinare un array associativo per valore in
PHP</a></li><li><a href="faq/how-to-get-single-value- from-an-array-in-php.php"
target="_blank">Come ottenere un singolo valore da un array in PHP</a></li>
<li><a href="faq/foreach-loop-through-multidimensional-array-in-php.php"
target="_blank">Come eseguire il looping di array multidimensionali in
PHP</a></li><li ><a href="faq/how-to-delete-an-element-from-an-array-in-php.php"
target="_blank">Come eliminare un elemento da un array in PHP</a> </li><li><a
href="faq/how-to-check-if-a-string-contains-a-specific-word-in-php.php"
target="_blank">Come controllare se una stringa contiene una parola specifica in
PHP</a></li><li><a href="faq/how-to-get-the-current-date-and-time-in-php.php"
target= "_blank">Come ottenere la data e l'ora correnti in PHP</a></li><li><a
href="faq/how-to-make-a-redirect-in-php.php" target= "_blank">Come creare un
reindirizzamento in PHP</a></li><li><a href="faq/how-to-strip-all-spaces-out-of-
a-string-in-php .php" target="_blank">Come eliminare tutti gli spazi da una
stringa in PHP</a></li><li><a href="faq/how-to-get-the-current-year- using-
php.php" target="_blank">Come ottenere l'anno in corso utilizzando
PHP</a></li><li><a href="faq/how-to-convert-a-date-from- aaaa-mm-g d-to-gg-mm-
aaaa-format-in-php.php" target="_blank">Come convertire una data dal formato
aaaa-mm-gg al formato gg-mm-aaaa in PHP</a></ li><li><a href="faq/how-to-
convert-a-string-to-a-number-in-php.php" target="_blank">Come convertire una
stringa in un numero in PHP </a></li><li><a href="faq/how-to-get-the-first-
element-of-an-array-in-php.php" target="_blank">Come ottieni il primo elemento
di un array in PHP</a></li><li><a href="faq/how-to-convert-a-date-to-timestamp-
in-php.php" target=" _blank">Come convertire una data in timestamp in
PHP</a></li><li><a href="faq/how-to-add-elements-to-an-empty-array-in-php. php"
target="_blank">Come aggiungere elementi a un array vuoto in PHP</a></li><li><a
href="faq/how-to-convert-an-integer-to-a- string-in-php.php"
target="_blank">Come convertire un numero intero in una stringa in
PHP</a></li><li><a href="faq/how-to-delete-php- array-element-by-value-not-
key.php" target="_blank">Come eliminare l'elemento dell'array PHP per valore e
non per chiave</a></li><li><a href="faq/how- inserire-sia-chiave-che-valore-in-
un -array-in-php.php" target="_blank">Come inserire sia la chiave che il valore
in un array in PHP</a></li><li><a href="faq/how-to-refresh -a-page-periodically-
using-php.php" target="_blank">Come aggiornare periodicamente una pagina
utilizzando PHP</a></li><li><a href="faq/how-to-remove -the-last-character-from-
a-string-in-php.php" target="_blank">Come rimuovere l'ultimo carattere da una
stringa in PHP</a></li><li><a href ="faq/how-to-return-json-from-a-php-
script.php" target="_blank">Come restituire JSON da uno script
PHP</a></li><li><a href ="faq/how-to-get-php-errors-to-display.php"
target="_blank">Come visualizzare gli errori PHP</a></li><li><a href="faq /how-
to-shut-down-or-reboot-ubuntu-from-terminal.php" target="_blank">Come spegnere o
riavviare Ubuntu dal terminale</a></li><li><a href ="faq/how-to-restart-apache-
server-on-ubuntu.php" target="_blank">Come riavviare il server Apache su
Ubuntu</a></li><li><a href="faq /how-to-start-stop-mysql-server-on-ubuntu.php"
target="_blank">Come iniziare a fermare il server MySQL su Ubun
tu</a></li><li><a href="faq/how-to-change-current-working-directory-in-ubuntu-
terminal.php" target="_blank">Come cambiare la directory di lavoro corrente
directory nel terminale Ubuntu</a></li><li><a href="faq/how-to-rename-a-
directory-via-command-line-in-ubuntu.php" target="_blank"> Come rinominare una
directory tramite riga di comando in Ubuntu</a></li><li><a href="faq/how-to-
copy-the-contents-of-a-folder-to-another-folder- from-terminal-in-ubuntu.php"
target="_blank">Come copiare il contenuto di una cartella in un'altra cartella
dal terminale in Ubuntu</a></li><li><a href="faq/how -to-install-updates-via-
command-line-on-ubuntu.php" target="_blank">Come installare gli aggiornamenti
tramite riga di comando su Ubuntu</a></li><li><a href=" faq/how-to-delete-a-non-
empty-directory-from-terminal-in-ubuntu.php" target="_blank">Come eliminare una
directory non vuota dal terminale in Ubuntu</a></li ><li><a href="faq/come-
ottenere-un-elenco-di-tutti-i-pacchetti-installati-su-ubuntu.php"
target="_blank">Come ottenere un elenco di tutti i pacchetti installati su
Ubuntu</a></li><li><a href="faq/how-to-completely-remove-a-package-or-
application -in-ubuntu.php" target="_blank">Come rimuovere completamente un
pacchetto o un'applicazione in Ubuntu</a></li><li><a href="faq/how-to-unzip-a-
zip -file-from-the-terminal-in-ubuntu.php" target="_blank">Come decomprimere un
file zip dal terminale in Ubuntu</a></li><li><a href="faq/ how-to-save-terminal-
output-of-a-command-to-a-file-in-ubuntu.php" target="_blank">Come salvare
l'output del terminale di un comando in un file in Ubuntu</a ></li><li><a
href="faq/how-to-search-for-available-packages-from-the-command-line-in-
ubuntu.php" target="_blank">Come cercare per i pacchetti disponibili dalla riga
di comando in Ubuntu</a></li><li><a href="faq/how-to-find-and-replace-text-
within-a-file-using-command-line -in-ubuntu.php" target="_blank">Come trovare e
sostituire il testo all'interno di un file utilizzando la riga di comando in
Ubuntu</a></li><li><a href="faq/how-to-get -la-dimensione-di-una-directory-dal-
com mand-line-in-ubuntu.php" target="_blank">Come ottenere la dimensione di una
directory dalla riga di comando in Ubuntu</a></li><li><a href="faq/how- to-open-
a-text-file-in-terminal-in-ubuntu.php" target="_blank">Come aprire un file di
testo nel terminale in Ubuntu</a></li><li><a href ="faq/how-to-remove-all-files-
from-a-directory-using-command-line-in-ubuntu.php" target="_blank">Come
rimuovere tutti i file da una directory utilizzando la riga di comando in
Ubuntu</a></li><li><a href="faq/how-to-find-the-amount-of-free-disk-space-in-
ubuntu.php" target="_blank">Come per trovare la quantità di spazio libero su
disco in Ubuntu</a></li><li><a href="faq/how-to-create-an-empty-file-from-
command-line-in-ubuntu. php" target="_blank">Come creare un file vuoto dalla
riga di comando in Ubuntu</a></li><li><a href="faq/how-to-check-the-current-
version-of -ubuntu-from-the-command-line.php" target="_blank">Come verificare la
versione corrente di Ubuntu dalla riga di comando</a></li><li><a href="faq/how -
per-aggiungere-più-righe-a-un-file-dal-terminale-in-ubu ntu.php"
target="_blank">Come aggiungere più righe a un file dal terminale in
Ubuntu</a></li><li><a href="faq/how-to-zip-all-files- in-a-directory-using-
command-line-in-ubuntu.php" target="_blank">Come comprimere tutti i file in una
directory utilizzando la riga di comando in Ubuntu</a></li><li><a href="faq/how-
to-extract-a-tar-gz-file-using-command-line-in-ubuntu.php" target="_blank">Come
estrarre un file .tar.gz utilizzando la riga di comando in Ubuntu</a></li><li><a
href="faq/how-to-make-ls-command-to-show-file-sizes-in-megabytes-in-ubuntu.php"
target=" _blank">Come fare in modo che il comando ls mostri le dimensioni dei
file in megabyte in Ubuntu</a></li><li><a href="faq/how-to-find-a-file-by-name-
using- command-line-in-ubuntu.php" target="_blank">Come trovare un file per nome
utilizzando la riga di comando in Ubuntu</a></li>
<p class="summary">L'idea alla base della creazione di questa sezione è fornire
soluzioni rapide e funzionanti per le attività e i problemi comuni relativi al
web design e allo sviluppo.</p><p class="subhead">Questa sezione contiene una
raccolta di domande frequenti relative a HTML e CSS</p><p class="subhead">Questa
sezione contiene una raccolta di domande frequenti relative a JavaScript e
jQuery</p><p class="subhead">Questo La sezione contiene una raccolta di domande
frequenti relative al framework Bootstrap</p><p class="subhead">Questa sezione
contiene una raccolta di domande frequenti relative al database PHP e
MySQL</p><p class="subhead" >Questa sezione contiene una raccolta di domande
frequenti relative al sistema operativo Ubuntu o Linux</p>
<h1><span>Tag/Elementi</span>HTML5</h1><h2 class="order-info"><strong>Tag
HTML5</strong><span class="rounded toggle">Ordina per categoria< /span></h2><h2
id="structural-tags">Tag strutturali</h2><h2 id="metadata-tags">Tag
metadati</h2><h2 id="form-tags">Modulo Tag</h2><h2 id="formatting-
tags">Formattazione tag</h2><h2 id="list-tags">Elenco tag</h2><h2 id="table-
tags">Tabella tag< /h2><h2 id="scripting-tags">Tag di scripting</h2><h2
id="embedded-content-tags">Tag di contenuti incorporati</h2>
<p class="summary">La sezione seguente contiene un elenco di elementi HTML5

insieme a una breve descrizione.</p><p>La sezione seguente contiene un elenco
completo di tag standard appartenenti alle ultime specifiche HTML5 e XHTML 1.1.
Tutti i tag sono elencati in ordine alfabetico.</p><p>La sezione seguente
contiene un elenco completo dei tag standard appartenenti alle ultime specifiche
HTML5 e XHTML 1.1. Tutti i tag sono raggruppati in categorie.</p>
<h1>Attributi <span>globali</span> HTML5</h1><h2 id="global-
attributes">Attributi globali in HTML5</h2>
<p class="summary">Gli attributi globali HTML5 possono essere applicati a tutti

gli elementi.</p><p>Oltre agli attributi specifici dell'elemento, l'HTML5
definisce alcuni attributi comuni a tutti gli elementi. Questi attributi possono
essere specificati su tutti gli elementi, con alcune eccezioni in cui non è
rilevante, come gli elementi trovati all'interno di <a href="html-head-
tag.php"><code><head></code>< /a> sezione del documento, ad esempio <a
href="html-base-tag.php"><code><base></code></a>, <a href="html-script-
tag. php"><code><script></code></a>, <a href="html-title-
tag.php"><code><title></code></a> ecc. </p>
<h1>Attributi <span>evento</span> HTML5</h1><h2 id="global-attributes">Attributi

evento in HTML5</h2><h2>Eventi finestra</h2><h2>Eventi modulo< /h2><h2>Eventi
mouse</h2><h2>Eventi tastiera</h2><h2>Eventi appunti</h2><h2>Eventi media</h2>
<p><strong>Nota:</strong> Gli attributi dell'evento sopra descritti, tuttavia,
si applicano a tutti gli elementi HTML, sebbene non siano utili per tutti gli
elementi. Ad esempio, solo gli elementi multimediali riceveranno un evento
volumechange attivato dal browser.</p>
</div>
<p class="summary">Gli attributi dell'evento HTML5 sono globali e possono essere

applicati alla maggior parte degli elementi.</p><p class="break">I seguenti
attributi dell'evento possono essere applicati alla maggior parte degli elementi
per l'esecuzione di JavaScript quando si verificano determinati eventi, con
alcune eccezioni in cui non è rilevante come gli elementi trovati all'interno
del <a href="html-head-tag.php"><code><head></code></ a> sezione, ad es.
<a href="html-title-tag.php"><code><title></code></a>, <a href="html-base-
tag.php">< codice><base></code></a>, <a href="html-link-
tag.php"><code><link></code></a> ecc.</p> <p>Eventi relativi all'oggetto
<code>window</code> (si applica al tag <a href="html-body-
tag.php"><code><body></code></a> ):</p><p>Eventi che si verificano a causa
dell'interazione dell'utente con i controlli del modulo HTML.</p><p>Eventi che
si verificano a causa dell'interazione dell'utente con un dispositivo di
puntamento come un mouse:</p ><p>Eventi che si verificano dall'interazione
dell'utente con la tastiera:</p><p>Eventi relativi alla modifica o f negli
appunti, ovvero copia, taglia e incolla:</p><p>Eventi che si verificano durante
la gestione di elementi multimediali incorporati all'interno dei documenti HTML,
come <a href="html5-audio-tag.php"> Elementi <code><audio></code></a> e <a
href="html5-video-tag.php"><code><video></code></a>:</p >
<h1>HTML <code>Lingua</code> Codici</h1><h2>Descrizione</h2>
<p class="summary">Un codice lingua viene utilizzato per indicare la lingua del
contenuto.</p><p>La seguente tabella elenca i codici lingua ISO 639 di due
lettere (in ordine alfabetico per lingua) che possono essere utilizzati con gli
attributi <code>lang</code> e <code>xml:lang</code> per indicare la lingua
contenuta all'interno dell'elemento nel documento HTML e XHTML. I codici lingua
non fanno distinzione tra maiuscole e minuscole.</p>
<h1>Entità di <span>carattere</span> HTML</h1><h2>Entità

essenziali</h2><h2>Simboli di valuta</h2><h2>Copyright, marchio e simbolo
registrato</h2>< h2>Punteggiatura generale</h2><h2>Frecce</h2><h2>Simboli
matematici</h2><h2>Lettere greche</h2><h2>Varie</h2>
<p class="summary">Le seguenti sezioni presentano gli elenchi completi dei

riferimenti alle entità carattere.</p><p>La seguente tabella elenca le entità
essenziali in HTML.</p><p>La seguente tabella elenca le entità per i simboli di
valuta.</p><p>La seguente tabella elenca le entità per copyright, marchio
commerciale e simbolo registrato.</p><p>La seguente tabella elenca le entità per
la punteggiatura generale.</p><p >La seguente tabella elenca le entità per le
frecce.</p><p>La seguente tabella elenca le entità per i simboli
matematici.</p><p>La seguente tabella elenca le entità per le lettere
greche.</p><p >La seguente tabella elenca le altre entità utili supportate da
HTML.</p>
<h1>Codici <span>di stato</span> HTTP</h1><h2>Codice di stato HTTP</h2><h2>1xx

Informativo</h2><h2>2xx Riuscito</h2><h2>3xx Reindirizzamento </h2><h2>Errore
client 4xx</h2><h2>Errore server 5xx</h2>
<li><strong>200</strong> - il server ha restituito correttamente la
pagina</li><li><strong>404</strong> - la pagina richiesta non
esiste</li><li><strong >503</strong> - il server è temporaneamente non
disponibile</li>
<p class="summary">I codici di stato HTTP sono codici di risposta standard
restituiti dal server web in risposta alla richiesta fattagli.</p><p>Il codice
di stato fornisce informazioni sullo stato della richiesta. Aiuta anche a
identificare la causa del problema quando una pagina web o un'altra risorsa non
viene caricata correttamente.</p><p>Alcuni codici di stato comuni sono:</p><p
class="space">La seguente sezione elenca i codici di stato HTTP che potrebbero
essere restituiti insieme a una descrizione.</p>
<h1>HTML <span>Selettore colore</span></h1><h2>Tinte e sfumature</h2>

<p><strong>Nota:</strong> l'aggiunta di bianco al colore aumenta la luminosità,
mentre l'aggiunta di nero riduce la luminosità, il che si traduce in un colore
più scuro. Fai clic sulle barre dei colori sul lato destro per generare
ulteriori tinte e sfumature per quel colore.</p>
</div>
<p class="summary">Crea sfumature più scure/più chiare di qualsiasi

colore.</p><p>Le tinte sono versioni più chiare del colore ottenute mescolando
un colore con il bianco, mentre le sfumature sono versioni più scure del colore
che sono realizzati mescolando un colore con il nero. Ad esempio, il rosa è una
sfumatura di rosso, mentre il marrone è una sfumatura di rosso.</p>
<h1><span>Riferimenti HTML5</span> e <span>CSS3</span></h1><h2>Tag HTML5 /

XHTML</h2><h2>Proprietà CSS3</h2><h2>Altri riferimenti </h2>
<p class="summary">La sezione seguente contiene riferimenti agli ultimi HTML5,

CSS3 e altro ancora...</p><p class="subhead">La sezione seguente contiene un
elenco completo dei tag standard appartenenti a HTML5 e Specifiche XHTML 1.0.
Tutti i tag sono ordinati alfabeticamente.</p><p class="subhead">La sezione
seguente contiene un elenco completo delle proprietà visive appartenenti alle
specifiche CSS3. Tutte le proprietà sono ordinate alfabeticamente.</p><p
class="subhead">Questa sezione contiene riferimenti a colori, simboli ed entità
carattere, web safe
caratteri, codici lingua per l'internazionalizzazione di HTML, messaggi HTTP
ecc.</p><p>Elenco di nomi di colori o parole chiave supportati da tutti i
browser »</p><p>Elenco di codici di entità carattere per visualizzare caratteri
speciali su un Web page »</p><p>Elenco dei caratteri comunemente disponibili
supportati da tutti i browser »</p><p>Elenco dei codici di risposta standard
restituiti dal server web »</p><p>Elenco delle at-rule CSS comunemente
supportato da tutti i browser »</p><p>Elenco delle proprietà CSS per definire la
presentazione sonora di un documento »</p><p>Elenco dei codici lingua per
definire la lingua di una pagina web »</p>< p>Strumento online interattivo per
creare sfumature e tinte di qualsiasi colore »</p>

Lezioni HTML

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Lezioni HTML

Caricato da

Copyright:

Formati disponibili

<h1>HTML <span>Tutorial</span></h1><h2>Cosa puoi fare con l'HTML</h2><h2>Cosa

tratta questo tutorial</h2>

<h1>HTML <span>Inizia</span></h1><h2>Introduzione</h2><h2>Creazione del tuo

<h1>HTML <span>Elementi</span></h1><h2>Sintassi degli elementi HTML</h2><h2>Tag

<h1>HTML <span>Attributi</span></h1><h2>Cosa sono gli

<pre class="syntax-highlighter line-numbers"><code class="language-

<h1>HTML <span>Titoli</span></h1><h2>Organizzazione dei contenuti con i

<h1>HTML <span>Paragrafi</span></h1><h2>Creazione di paragrafi</h2><h2>Chiusura

<pre class="syntax-highlighter line-numbers"><code class="language-

<h1>Link <span>HTML</span></h1><h2>Creazione di collegamenti in

<pre class="syntax-highlighter line-numbers"><code class="language-

<h1>Stili <span>HTML</span></h1><h2>Stili di elementi HTML</h2><h2>Aggiunta di

<h1>Immagini <span>HTML</span></h1><h2>Inserimento di immagini nelle pagine

<pre class="syntax-highlighter line-numbers"><code class="language-

<h1>HTML <span>Tabelle</span></h1><h2>Creazione di tabelle in

<h1>Elenchi <span>HTML</span></h1><h2>Lavorare con elenchi HTML</h2><h2

<h1>Moduli <span>HTML</span></h1><h2>Che cos'è il modulo HTML</h2><h2>Elemento

<pre class="syntax-highlighter line-numbers"><code class="language-

<h1>HTML <span>iFrame</span></h1><h2>Che cos'è l'iframe</h2><h2>Impostazione

<h1>HTML <span>Doctypes</span></h1><h2>Comprensione del Doctype HTML5</h2>

<pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;!

<h1>Layout <span>HTML</span></h1><h2>Creazione di layout di siti

<pre class="syntax-highlighter line-numbers scroll xxlarge"><code

<h1>HTML <span>Head</span></h1><h2>L'elemento HTML head</h2><h2>L'elemento HTML

<h1>HTML <span>Meta</span></h1><h2>Definizione dei

<pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;!

<h1>HTML <span>Script</span></h1><h2>Lavorare con lo script lato

<pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;!

<h1>HTML <span>Entità</span></h1><h2>Che cos'è l'entità HTML?</h2><h2>Entità

<p class="summary">In questo tutorial imparerai come utilizzare le entità HTML

<h1>HTML <span>URL</span></h1><h2>Cos'è l'URL?</h2><h2>La sintassi dell'URL</h2>

<h1>HTML <span>Codifica URL</span></h1><h2>Cos'è la codifica

<h1>Convalida <span>HTML</span></h1><h2>Perché convalidare il codice

<h1>HTML5 <span>Nuovi tipi di input</span></h1><h2>Nuovi tipi di input in

<h1>HTML5 <span>Canvas</span></h1><h2>Cos'è Canvas?</h2><h2>Capire le coordinate

<pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;!

<h1>HTML5 <span>SVG</span></h1><h2>Che cos'è SVG?</h2><h2>Incorporamento di SVG

<h1>HTML5 <span>Audio</span></h1><h2>Incorporamento dell'audio nel documento

<pre class="syntax-highlighter line-numbers"><code class="language-

<h1>HTML5 <span>Video</span></h1><h2>Incorporamento di video in un documento

<pre class="syntax-highlighter line-numbers"><code class="language-

<h1>HTML5 <span>Web Storage</span></h1><h2>Cos'è il Web

<h1>HTML5 <span>Application Cache</span></h1><h2>Che cos'è Application

# stili e amp; script

<h1>HTML5 <span>Web Worker</span></h1><h2>Che cos'è Web Worker?</h2><h2>Creare

// Attendi qualche istante prima di eseguire nuovamente questo script

// Attiva il gestore dell'evento onMessage

// Esegui la funzione di aggiornamento, quando riceviamo un messaggio da worker

<h1>HTML5 <span>Eventi inviati dal server</span></h1><h2>Che cos'è l'evento

<pre class="syntax-highlighter line-numbers"><code class="language-php">&lt;?php

// Ottieni l'ora corrente sul server

<h1>HTML5 <span>Geolocalizzazione</span></h1><h2>Che cos'è la geolocalizzazione?

<pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;!

// Se la geolocalizzazione è disponibile, prova a ottenere la posizione del

// Definisce la funzione di callback per il tentativo riuscito

// Definisce la funzione di richiamata per il tentativo fallito

// Imposta l'URL della sorgente della mappa di Google

// Crea e inserisci la mappa di Google

// Definisce la funzione di callback per il tentativo riuscito

var map = new google.maps.Map(document.getElementById("embedMap"), myOptions);

// Definisce la funzione di richiamata per il tentativo fallito

// Controlla che la posizione sia stata modificata o meno prima di fare

// Imposta la posizione precedente

<pre class="syntax-highlighter line-numbers"><code class="language-markup"><!

<pre class="syntax-highlighter line-numbers"><code class="language-markup"><!

<pre class="syntax-highlighter line-numbers"><code class="language-markup"><!

<pre class="syntax-highlighter line-numbers"><code class="language-markup"><!

<pre class="syntax-highlighter line-numbers"><code class="language-php"><?php

<pre class="syntax-highlighter line-numbers"><code class="language-markup"><!

<pre class="syntax-highlighter line-numbers"><code class="language-markup"><!