diff options
Diffstat (limited to 'files/it/web/html')
59 files changed, 10724 insertions, 0 deletions
diff --git a/files/it/web/html/attributi/index.html b/files/it/web/html/attributi/index.html new file mode 100644 index 0000000000..7bb21c96a2 --- /dev/null +++ b/files/it/web/html/attributi/index.html @@ -0,0 +1,590 @@ +--- +title: Attributi +slug: Web/HTML/Attributi +translation_of: Web/HTML/Attributes +--- +<p>Gli elementi in HTML hanno <strong>attributi</strong>; questi sono valori addizionali che configurano l'elemento o modificano in vari modi il suo comportamento.</p> +<h2 id="Lista_degli_attributi">Lista degli attributi</h2> +<table class="standard-table"> + <thead> + <tr> + <th>Nome dell'attributo</th> + <th>Elementi supportati</th> + <th>Descrizione</th> + </tr> + </thead> + <tbody> + <tr> + <td>accept</td> + <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> + <td>Lista di tipi che il server accetta, normalmente un file di tipo type.</td> + </tr> + <tr> + <td>accept-charset</td> + <td>{{ HTMLElement("form") }}</td> + <td>Lista delle codifiche di caratteri supportate.</td> + </tr> + <tr> + <td>accesskey</td> + <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Attributo globale</a></td> + <td>Definisce una scorciatoia da tastiera per attivare o aggiungere il focus all'elemento.</td> + </tr> + <tr> + <td>action</td> + <td>{{ HTMLElement("form") }}</td> + <td>L' URI di un programma che processa le informazioni inviate per mezzo di un modulo.</td> + </tr> + <tr> + <td>align</td> + <td>{{ HTMLElement("applet") }}, {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("hr") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("td") }}, {{ HTMLElement("tfoot") }} , {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tr") }}</td> + <td>Specifica l'allineamento orizzontale dell'elemento.</td> + </tr> + <tr> + <td>alt</td> + <td> + <p>{{ HTMLElement("applet") }}, {{ HTMLElement("area") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}</p> + </td> + <td>Testo alternativo in caso un immagine non possa essere visualizzata.</td> + </tr> + <tr> + <td>async</td> + <td>{{ HTMLElement("script") }}</td> + <td>Indica che lo script deve essere eseguito in modalità asincrona.</td> + </tr> + <tr> + <td>autocomplete</td> + <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> + <td>Indica che i controlli in questo modulo possono, di defaut, avere il loro valore completato automaticamente dal browser.</td> + </tr> + <tr> + <td>autofocus</td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>L'elemento riceve il focus automaticamente dopo il caricamento della pagina.</td> + </tr> + <tr> + <td>autoplay</td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> + <td>L'audio o il video devo partire appena possibile.</td> + </tr> + <tr> + <td>bgcolor</td> + <td>{{ HTMLElement("body") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}, {{ HTMLElement("tr") }}</td> + <td> + <p>Colore di sottofondo dell'elemento.</p> + <p>Nota: Questo è un attibuto ereditato. Utilizzare la proprietà {{ Cssxref("background-color") }} in sostituzione.</p> + </td> + </tr> + </tbody> + <tbody> + <tr> + <td>border</td> + <td>{{ HTMLElement("img") }}, {{ HTMLElement("object") }}, {{ HTMLElement("table") }}</td> + <td> + <p>La larghezza del bordo.</p> + <p>Nota: Questo è un attributo ereditato. Utilizzare la proprietà CSS {{ Cssxref("border") }} in sostituzione.</p> + </td> + </tr> + <tr> + <td>buffered</td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> + <td>Contiene l'intervallo di tempo del media già bufferizzato.</td> + </tr> + <tr> + <td>challenge</td> + <td>{{ HTMLElement("keygen") }}</td> + <td>Una stringa che viene presentata con la chiave pubblica.</td> + </tr> + <tr> + <td>charset</td> + <td>{{ HTMLElement("meta") }}, {{ HTMLElement("script") }}</td> + <td>Dichiara la codifica di caratteri della pagina o dello script.</td> + </tr> + <tr> + <td>checked</td> + <td>{{ HTMLElement("command") }}, {{ HTMLElement("input") }}</td> + <td>Indica che l'elemento deve essere conrollato al caricamento della pagina.</td> + </tr> + <tr> + <td>cite</td> + <td>{{ HTMLElement("blockquote") }}, {{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("q") }}</td> + <td>Contiene un URI che punta alla sorgente di quanto citato o modificato.</td> + </tr> + <tr> + <td>class</td> + <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Attributo globale</a></td> + <td>Usato spesso con i CSS per modellare elementi con proprietà comuni.</td> + </tr> + <tr> + <td>code</td> + <td>{{ HTMLElement("applet") }}</td> + <td>Specifica l'URL del file class della applet che deve essere caricato ed eseguito.</td> + </tr> + <tr> + <td>codebase</td> + <td>{{ HTMLElement("applet") }}</td> + <td>Questo attibuto fornisce l'URL assoluto o relativo della directory dove il file .class dell'applet referenziata dall'attributo code è memorizzato.</td> + </tr> + <tr> + <td>color</td> + <td>{{ HTMLElement("basefont") }}, {{ HTMLElement("font") }}, {{ HTMLElement("hr") }}</td> + <td> + <p>Questo attributo imposta il colore del testo utilizzando un nome colore o specificando il suo valore in formato esadecimale #RRGGBB.</p> + <p>Note: Questo è un attributo ereditato. Utilizzare la proprietà CSS {{ Cssxref("color") }} in sostituzione.</p> + </td> + </tr> + <tr> + <td>cols</td> + <td>{{ HTMLElement("textarea") }}</td> + <td>Definisce il numero delle colonne in un'area di testo.</td> + </tr> + <tr> + <td>colspan</td> + <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td> + <td>L'attributo colspan definisce il numero delle colonne nelle quali una cella dovrebbe espandersi.</td> + </tr> + <tr> + <td>content</td> + <td>{{ HTMLElement("meta") }}</td> + <td>Un valore associato con <code>http-equiv</code> o <code>name</code> a seconda del contesto.</td> + </tr> + <tr> + <td>contenteditable</td> + <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Attributo globale</a></td> + <td>Indica che il contenuto dell'elemento è editabile.</td> + </tr> + <tr> + <td>contextmenu</td> + <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Attributo globale</a></td> + <td>Definisce l'ID di un elemento {{ HTMLElement("menu") }} che servirà come menù contestuale dell'elemento.</td> + </tr> + <tr> + <td>controls</td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> + <td>Indica che il browser deve visualizzare i controlli di playack per l'utente.</td> + </tr> + <tr> + <td>coords</td> + <td>{{ HTMLElement("area") }}</td> + <td>Una serie di valori che specificano le coordinate di un area selezionabile all'interno di una regione.</td> + </tr> + <tr> + <td>data</td> + <td>{{ HTMLElement("object") }}</td> + <td>Specifica l'URL della risorsa.</td> + </tr> + <tr> + <td>datetime</td> + <td>{{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("time") }}</td> + <td>Indica data e ora associate con l'elemento.</td> + </tr> + <tr> + <td>default</td> + <td>{{ HTMLElement("track") }}</td> + <td>Indica che la traccia deve essere abilitata a meno che le preferenze dell'utente indichino diversamente.</td> + </tr> + <tr> + <td>defer</td> + <td>{{ HTMLElement("script") }}</td> + <td>Indicano che lo script deve essere eseguito dopo che la pagina è stata analizzata.</td> + </tr> + <tr> + <td>dir</td> + <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Attributo globale</a></td> + <td>Definisce la direzione del testo. I valori permessi sono ltr (Left-To-Right: da sinistra a destra) or rtl (Right-To-Left: da destra a sinistra)</td> + </tr> + <tr> + <td>dirname</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td> </td> + </tr> + <tr> + <td>disabled</td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("command") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>Indica che l'utente non può interagire con l'elemento.</td> + </tr> + <tr> + <td>download</td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td> + <td>Indica che il collegamento ipertestuale è da utilizzare per scaricare una risorsa.</td> + </tr> + <tr> + <td>draggable</td> + <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Attributo globale</a></td> + <td>Definisce l'elemeno come trascinabile.</td> + </tr> + <tr> + <td>dropzone</td> + <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Attributo globale</a></td> + <td>Indica che l'elemento consente l'eliminazione dei contenuti da esso.</td> + </tr> + <tr> + <td>enctype</td> + <td>{{ HTMLElement("form") }}</td> + <td>Definisce il tipo di contenuto dei dati del form quando il <code>method</code> è POST.</td> + </tr> + <tr> + <td>for</td> + <td>{{ HTMLElement("label") }}, {{ HTMLElement("output") }}</td> + <td>Descrive elementi che appartengono a questo.</td> + </tr> + <tr> + <td>form</td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>Indicano il form al quale l'elemento si riferisce.</td> + </tr> + <tr> + <td>headers</td> + <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td> + <td>L'ID che gli elementi <code><th></code> applicano a quest'ultimi.</td> + </tr> + <tr> + <td>height</td> + <td>{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}</td> + <td>Note: In qualche caso, come per {{ HTMLElement("div") }}, questo attributo è ereditato, e quindi deve essere usata la proprietà CSS {{ Cssxref("height") }} in sostituzione. In altri casi, come per {{ HTMLElement("canvas") }}, l'altezza deve essere specificata con questo attributo.</td> + </tr> + </tbody> + <tbody> + <tr> + <td>hidden</td> + <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td> + <td>Indica la rilevanza di un elemento.</td> + </tr> + <tr> + <td>high</td> + <td>{{ HTMLElement("meter") }}</td> + <td>Indica il limite inferiore del range superiore</td> + </tr> + <tr> + <td>href</td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("link") }}</td> + <td> L'URL di una risorsa collegata.</td> + </tr> + <tr> + <td>hreflang</td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td> + <td>Specifica la lingua della risorsa collegata.</td> + </tr> + <tr> + <td>http-equiv</td> + <td>{{ HTMLElement("meta") }}</td> + <td> </td> + </tr> + <tr> + <td>icon</td> + <td>{{ HTMLElement("command") }}</td> + <td>Spefifica una figura che rappresenta il comando.</td> + </tr> + <tr> + <td>id</td> + <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Attributo globale</a></td> + <td>Spesso utilizzato con CSS per applicare uno stile ad uno specifico elemento. Il valore di questo attributo deve essere unico.</td> + </tr> + <tr> + <td>ismap</td> + <td>{{ HTMLElement("img") }}</td> + <td>Indica che l'immagine è una parte della mappa immagine lato server.</td> + </tr> + <tr> + <td>itemprop</td> + <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Attributo globale</a></td> + <td> </td> + </tr> + <tr> + <td>keytype</td> + <td>{{ HTMLElement("keygen") }}</td> + <td>Specifica il tipo della chiave da generata.</td> + </tr> + <tr> + <td>kind</td> + <td>{{ HTMLElement("track") }}</td> + <td>Specifica il tipo della traccia di testo.</td> + </tr> + <tr> + <td>label</td> + <td>{{ HTMLElement("track") }}</td> + <td>Specifica un titolo leggibile dall'utente della traccia di testo.</td> + </tr> + <tr> + <td>lang</td> + <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Attributo globale</a></td> + <td>Definisce la lingua usata nell'elemento.</td> + </tr> + <tr> + <td>language</td> + <td>{{ HTMLElement("script") }}</td> + <td>Definisce la lingua dello script usato nell'elemento.</td> + </tr> + <tr> + <td>list</td> + <td>{{ HTMLElement("input") }}</td> + <td>Identifica una lista di opzioni predefinite da suggerire all'utente.</td> + </tr> + <tr> + <td>loop</td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("bgsound") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("video") }}</td> + <td>Indica che il media deve essere riprodotto dall'inizio quando terminato.</td> + </tr> + <tr> + <td>low</td> + <td>{{ HTMLElement("meter") }}</td> + <td>Indica il valore limite superiore del campo inferiore.</td> + </tr> + <tr> + <td>manifest</td> + <td>{{ HTMLElement("html") }}</td> + <td><span id="result_box" lang="it"><span class="hps">Specifica l'URL del</span> <span class="hps">manifesto</span> <span class="hps">della cache</span> <span class="hps">del documento</span><span>.</span></span></td> + </tr> + <tr> + <td>max</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td> + <td>Indica il valore massimo consentito.</td> + </tr> + <tr> + <td>maxlength</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>Definisce il numero massimo di caratteri consentiti nell'elemento.</td> + </tr> + <tr> + <td>media</td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}</td> + <td>Specifica un suggerimento del media per il quale è stata disegnata la risorsa.</td> + </tr> + <tr> + <td>method</td> + <td>{{ HTMLElement("form") }}</td> + <td>Definisce il metodo HTTP da usare alla sottomissione del form. Può essere GET (default) o POST.</td> + </tr> + <tr> + <td>min</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}</td> + <td>Indica il valore minimo consentito.</td> + </tr> + <tr> + <td>multiple</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> + <td>Indica che possono essere inseriti valori multipi come input ad un tipo <code>email</code> o <code>file</code>.</td> + </tr> + <tr> + <td>name</td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("map") }}, {{ HTMLElement("meta") }}, {{ HTMLElement("param") }}</td> + <td>Nome dell'elemento. E' ad esempio utilizzato dal server per identificare i campi nel form suttomesso.</td> + </tr> + <tr> + <td>novalidate</td> + <td>{{ HTMLElement("form") }}</td> + <td>Questo attributo indica che il form non deve essere validato alla sottomissione.</td> + </tr> + <tr> + <td>open</td> + <td>{{ HTMLElement("details") }}</td> + <td><span id="result_box" lang="it"><span class="hps">Indica se</span> <span class="hps alt-edited">i dettagli</span> <span class="hps alt-edited">verranno visualizzati</span> <span class="hps alt-edited">al caricamento della pagina</span><span>.</span></span></td> + </tr> + <tr> + <td>optimum</td> + <td>{{ HTMLElement("meter") }}</td> + <td>Indica il valore numerico ottimale.</td> + </tr> + <tr> + <td>pattern</td> + <td>{{ HTMLElement("input") }}</td> + <td>Definisce un'espressione regolare con la quale validare il valore dell'elemento.</td> + </tr> + <tr> + <td>ping</td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td> + <td> </td> + </tr> + <tr> + <td>placeholder</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>Fornisce un suggerimento all'utente circa cosa può essere inserito nel campo.</td> + </tr> + <tr> + <td>poster</td> + <td>{{ HTMLElement("video") }}</td> + <td><span id="result_box" lang="it"><span class="hps">Un URL</span> <span class="hps">che indica</span> <span class="hps">un fotogramma</span> <span class="hps alt-edited">da mostrare</span> <span class="hps alt-edited">finché l'utente</span> <span class="hps alt-edited">esegue o</span> <span class="hps">cerca.</span></span></td> + </tr> + <tr> + <td>preload</td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> + <td>Indica se l'intera risorsa, parte di essa o niente deve essere precaricata.</td> + </tr> + <tr> + <td>pubdate</td> + <td>{{ HTMLElement("time") }}</td> + <td>Indica che queste data e ora sono dati dell'elemento progenitore più vicino {{ HTMLElement("article") }}.</td> + </tr> + <tr> + <td>radiogroup</td> + <td>{{ HTMLElement("command") }}</td> + <td> </td> + </tr> + <tr> + <td>readonly</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>Indica se l'elemento è editabile.</td> + </tr> + <tr> + <td>rel</td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td> + <td>Specifica la relazione dell'oggetto obbiettivo con l'oggetto di collegamento.</td> + </tr> + <tr> + <td>required</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td><span id="result_box" lang="it"><span class="hps">Indica se questo elemento</span> <span class="hps alt-edited">deve</span> <span class="hps alt-edited">essere compilato</span> <span class="hps">o meno.</span></span></td> + </tr> + <tr> + <td>reversed</td> + <td>{{ HTMLElement("ol") }}</td> + <td><span id="result_box" lang="it"><span class="hps">Indica se</span> <span class="hps">l'elenco</span> <span class="hps">deve essere visualizzato</span> <span class="hps">in ordine</span> <span class="hps">decrescente</span> <span class="hps">anzichè </span><span class="hps">ascendente</span><span>.</span></span></td> + </tr> + <tr> + <td>rows</td> + <td>{{ HTMLElement("textarea") }}</td> + <td>Definisce il numero di righe in area di testo.</td> + </tr> + <tr> + <td>rowspan</td> + <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td> + <td>Definisce il numero di righe sopra le quali si estende la cella della tabella.</td> + </tr> + <tr> + <td>sandbox</td> + <td>{{ HTMLElement("iframe") }}</td> + <td> </td> + </tr> + <tr> + <td>spellcheck</td> + <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Attributo globale</a></td> + <td><span id="result_box" lang="it"><span class="hps">Indica se</span> <span class="hps">il controllo ortografico</span> <span class="hps alt-edited">è consentito</span> <span class="hps">per l'elemento</span><span>.</span></span></td> + </tr> + <tr> + <td>scope</td> + <td>{{ HTMLElement("th") }}</td> + <td> </td> + </tr> + <tr> + <td>scoped</td> + <td>{{ HTMLElement("style") }}</td> + <td> </td> + </tr> + <tr> + <td>seamless</td> + <td>{{ HTMLElement("iframe") }}</td> + <td> </td> + </tr> + <tr> + <td>selected</td> + <td>{{ HTMLElement("option") }}</td> + <td>Definisce un valore che sarà selezionato al caricamento della pagina.</td> + </tr> + <tr> + <td>shape</td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td> + <td> </td> + </tr> + <tr> + <td>size</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> + <td>Definisce la larghezza dell'elemento (in pixel). Se l'attributo <code>type </code>dell'elemento è <code>text</code> o <code>password</code> rappresenta il numero di caratteri.</td> + </tr> + <tr> + <td>sizes</td> + <td>{{ HTMLElement("link") }}</td> + <td> </td> + </tr> + <tr> + <td>span</td> + <td>{{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}</td> + <td> </td> + </tr> + <tr> + <td>src</td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("track") }}, {{ HTMLElement("video") }}</td> + <td>L'URL del contenuto incorporabile.</td> + </tr> + <tr> + <td>srcdoc</td> + <td>{{ HTMLElement("iframe") }}</td> + <td> </td> + </tr> + <tr> + <td>srclang</td> + <td>{{ HTMLElement("track") }}</td> + <td> </td> + </tr> + <tr> + <td>start</td> + <td>{{ HTMLElement("ol") }}</td> + <td>Definisce il primo numero se diverso da 1.</td> + </tr> + <tr> + <td>step</td> + <td>{{ HTMLElement("input") }}</td> + <td> </td> + </tr> + <tr> + <td>style</td> + <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Attributo globale</a></td> + <td>Definisce gli stili CSS che sovrasteranno gli stili precedentemente impostati.</td> + </tr> + <tr> + <td>summary</td> + <td>{{ HTMLElement("table") }}</td> + <td> </td> + </tr> + <tr> + <td>tabindex</td> + <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Attributo globale</a></td> + <td>Sovrascrive l'ordinamento della tabella impostato di default dal browser e segue quello specificato al posto suo.</td> + </tr> + <tr> + <td>target</td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("form") }}</td> + <td> </td> + </tr> + <tr> + <td>title</td> + <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Attributo globale</a></td> + <td>Testo da visualizzare in un suggerimento quando si passa sopra all'elemento.</td> + </tr> + <tr> + <td>type</td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("command") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("object") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}, {{ HTMLElement("menu") }}</td> + <td>Definisce il tipo dell'elemento.</td> + </tr> + <tr> + <td>usemap</td> + <td>{{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}</td> + <td> </td> + </tr> + <tr> + <td>value</td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("li") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("param") }}</td> + <td>Definisce un valore di default che verrà visualizzato nell'elemento al caricamento della pagina.</td> + </tr> + <tr> + <td>width</td> + <td>{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}</td> + <td>Nota: In qualche caso, come per {{ HTMLElement("div") }}, questo è un attributo ereditato, quindi deve essere utilizzata la proprietà CSS {{ Cssxref("width") }} in sostituzione. In altri casi, come per {{ HTMLElement("canvas") }}, la larghezza deve essere specificata con questo attributo.</td> + </tr> + <tr> + <td>wrap</td> + <td>{{ HTMLElement("textarea") }}</td> + <td>Indica se il testo deve essere circondato.</td> + </tr> + </tbody> +</table> +<h2 id="Attributi_di_contenuto_contro_attributi_IDL">Attributi di contenuto contro attributi IDL</h2> +<p>In HTML, molti attributi hanno due facce: l'<strong>attributo di contenuto</strong> e l'<strong>attributo IDL</strong>.</p> +<p>L'attributo del contenuto è quello che viene impostato nel contenuto (il codice HTML) e può essere impostato o ricavato tramite {{domxref("element.setAttribute()")}} o {{domxref("element.getAttribute()")}}. L'attributo di contenuto è sempre una stringa, anche quando il valore aspettato dovrebbe essere un intero. Ad esempio, per impostare il <code>maxlength</code> di un elemento {{HTMLElement("input")}} a 42 usando l'attributo di contenuto, occorre chiamare <code>setAttribute("maxlength", "42")</code> su quell'elemento.</p> +<p>L'attributo IDL è conosciuto anche come proprietà JavaScript. Questi attributi possono essere letti o impostati utilizzando proprietà JavaScript come <code class="moz-txt-verticalline">element.foo</code>. L'attributo IDL utilizzerà sempre (ma potrebbe trasformare) l'attributo di contenuto sottostante per ritornare un valore quando viene richiesto e salverà qualcosa nell'attributo di contenuto quando viene impostato. In altre parole, l'attributo IDL riflette, essenzialmente, l'attributo di contenuto.</p> +<p>Il più delle volte, l'attributo IDL ritornerà i loro valori così come sono realmente utilizzati. Ad esempio, il <code>type</code> di default per gli elementi {{HTMLElement("input")}} è "text", se viene impostato come <code>input.type="foobar"</code>, l'elemento <code><input></code> sarà di tipo testo (nell'apparenza e nel comportamento) ma il valore dell'attributo di contenuto "type" sarà "foobar". Tuttavia, l'attributo IDL <code>type</code> ritornerà la stringa "text".</p> +<p>Gli attributi IDL non sono sempre stringhe; ad esempio, <code>input.maxlength</code> è un numero (un long segnato). Quando viene utilizzato l'attributo IDL, viene letto o impostato il valore del tipo desiderato, quindi <code>input.maxlength</code> ritornerà sempre un numero e quando si imposta <code>input.maxlength</code> ,esso vuole un numero. Se viene passato un altro tipo, sarà automaticamente convertito in numero così come specificato dalle regole Javascript standard per la conversione di tipo.</p> +<p>L'attributo IDL può <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes">riflettere altri tipi</a> come long senza segno, URL, valori booleani, etc. Sfortunatamente, non ci sono regole chiare e il modo con il quale si comportano gli attributi IDL in congiunzione con il loro contenuto corrispondente dipenda dall'attributo stesso. Il più delle volte, seguirà <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes">le norme stabilite nelle specifiche</a>, ma a volte no. Le specifiche HTML tentano di renderlo il più possibile facile per gli sviluppatori, ma per varie ragioni (soprattutto storiche), alcuni attributi si comportano stranamente (<code>select.size</code>, ad esempio) e occorre leggere le specifiche per comprendere esattamente il loro comportamento.</p> +<h2 id="Vedi_anche">Vedi anche</h2> +<ul> + <li><a href="/en-US/docs/HTML/Element" title="/en-US/docs/HTML/Element">Elementi HTML</a></li> +</ul> +<p>{{ languages( { "fr": "fr/HTML/Attributs", "en": "en/HTML/Attributes", "ja": "ja/HTML/Attributes" } ) }}</p> diff --git a/files/it/web/html/canvas/drawing_graphics_with_canvas/index.html b/files/it/web/html/canvas/drawing_graphics_with_canvas/index.html new file mode 100644 index 0000000000..217e9191d7 --- /dev/null +++ b/files/it/web/html/canvas/drawing_graphics_with_canvas/index.html @@ -0,0 +1,161 @@ +--- +title: Drawing graphics with canvas +slug: Web/HTML/Canvas/Drawing_graphics_with_canvas +translation_of: Web/API/Canvas_API/Tutorial +--- +<div class="note"> + <p>Most of this content (but not the documentation on drawWindow) has been rolled into the more expansive <a href="/en-US/docs/HTML/Canvas/Tutorial" title="HTML/Canvas/tutorial">Canvas tutorial</a>, this page should probably be redirected there as it's now redundant but some information may still be relevant.</p> +</div> +<h2 id="Introduction" name="Introduction">Introduction</h2> +<p>With <a href="/en-US/docs/Mozilla/Firefox/Releases/1.5" title="Firefox_1.5_for_developers">Firefox 1.5</a>, Firefox includes a new HTML element for programmable graphics. <code><canvas></code> is based on the <a href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas">WHATWG canvas specification</a>, which itself is based on Apple's <code><canvas></code> implemented in Safari. It can be used for rendering graphs, UI elements, and other custom graphics on the client.</p> +<p><code><canvas></code> creates a fixed size drawing surface that exposes one or more <em>rendering contexts</em>. We'll focus on the 2D rendering context. For 3D graphics, you should use the <a href="/en-US/docs/WebGL" title="https://developer.mozilla.org/en/WebGL">WebGL rendering context</a>.</p> +<h2 id="The_2D_Rendering_Context" name="The_2D_Rendering_Context">The 2D Rendering Context</h2> +<h3 id="A_Simple_Example" name="A_Simple_Example">A Simple Example</h3> +<p>To start off, here's a simple example that draws two intersecting rectangles, one of which has alpha transparency:</p> +<pre class="brush: js">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + ctx.fillStyle = "rgb(200,0,0)"; + ctx.fillRect (10, 10, 55, 50); + + ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; + ctx.fillRect (30, 30, 55, 50); +} +</pre> +<div class="hidden"> + <pre class="brush: html"><canvas id="canvas" width="120" height="120"></canvas></pre> + <pre class="brush: js">draw();</pre> +</div> +<p>{{EmbedLiveSample('A_Simple_Example','150','150','/@api/deki/files/602/=Canvas_ex1.png')}}</p> +<p>The <code>draw</code> function gets the <code>canvas</code> element, then obtains the <code>2d</code> context. The <code>ctx</code> object can then be used to actually render to the canvas. The example simply fills two rectangles, by setting fillStyle to two different colors using CSS color specifications and calling <code>fillRect</code>. The second fillStyle uses <code>rgba()</code> to specify an alpha value along with the color.</p> +<p>The <code>fillRect</code>, <code>strokeRect</code>, and <code>clearRect</code> calls render a filled, outlined, or clear rectangle. To render more complex shapes, paths are used.</p> +<h3 id="Using_Paths" name="Using_Paths">Using Paths</h3> +<p>The <code>beginPath</code> function starts a new path, and <code>moveTo</code>, <code>lineTo</code>, <code>arcTo</code>, <code>arc</code>, and similar methods are used to add segments to the path. The path can be closed using <code>closePath</code>. Once a path is created, you can use <code>fill</code> or <code>stroke</code> to render the path to the canvas.</p> +<pre class="brush: js">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + ctx.fillStyle = "red"; + + ctx.beginPath(); + ctx.moveTo(30, 30); + ctx.lineTo(150, 150); + // was: ctx.quadraticCurveTo(60, 70, 70, 150); which is wrong. + ctx.bezierCurveTo(60, 70, 60, 70, 70, 150); // <- this is right formula for the image on the right -> + ctx.lineTo(30, 30); + ctx.fill(); +} +</pre> +<div class="hidden"> + <pre class="brush: html"><canvas id="canvas" width="160" height="160"></canvas></pre> + <pre class="brush: js">draw();</pre> +</div> +<p>{{EmbedLiveSample('Using_Paths','190','190','/@api/deki/files/603/=Canvas_ex2.png')}}</p> +<p>Calling <code>fill()</code> or <code>stroke()</code> causes the current path to be used. To be filled or stroked again, the path must be recreated.</p> +<h3 id="Graphics_State" name="Graphics_State">Graphics State</h3> +<p>Attributes of the context such as <code>fillStyle</code>, <code>strokeStyle</code>, <code>lineWidth</code>, and <code>lineJoin</code> are part of the current <em>graphics state</em>. The context provides two methods, <code>save()</code> and <code>restore()</code>, that can be used to move the current state to and from the state stack.</p> +<h3 id="A_More_Complicated_Example" name="A_More_Complicated_Example">A More Complicated Example</h3> +<p>Here's a little more complicated example, that uses paths, state, and also introduces the current transformation matrix. The context methods <code>translate()</code>, <code>scale()</code>, and <code>rotate()</code> all transform the current matrix. All rendered points are first transformed by this matrix.</p> +<pre class="brush: js">function drawBowtie(ctx, fillStyle) { + + ctx.fillStyle = "rgba(200,200,200,0.3)"; + ctx.fillRect(-30, -30, 60, 60); + + ctx.fillStyle = fillStyle; + ctx.globalAlpha = 1.0; + ctx.beginPath(); + ctx.moveTo(25, 25); + ctx.lineTo(-25, -25); + ctx.lineTo(25, -25); + ctx.lineTo(-25, 25); + ctx.closePath(); + ctx.fill(); +} + +function dot(ctx) { + ctx.save(); + ctx.fillStyle = "black"; + ctx.fillRect(-2, -2, 4, 4); + ctx.restore(); +} + +function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + // note that all other translates are relative to this one + ctx.translate(45, 45); + + ctx.save(); + //ctx.translate(0, 0); // unnecessary + drawBowtie(ctx, "red"); + dot(ctx); + ctx.restore(); + + ctx.save(); + ctx.translate(85, 0); + ctx.rotate(45 * Math.PI / 180); + drawBowtie(ctx, "green"); + dot(ctx); + ctx.restore(); + + ctx.save(); + ctx.translate(0, 85); + ctx.rotate(135 * Math.PI / 180); + drawBowtie(ctx, "blue"); + dot(ctx); + ctx.restore(); + + ctx.save(); + ctx.translate(85, 85); + ctx.rotate(90 * Math.PI / 180); + drawBowtie(ctx, "yellow"); + dot(ctx); + ctx.restore(); +} +</pre> +<div class="hidden"> + <pre class="brush: html"><canvas id="canvas" width="185" height="185"></canvas></pre> + <pre class="brush: js">draw();</pre> +</div> +<p>{{EmbedLiveSample('A_More_Complicated_Example','215','215','/@api/deki/files/604/=Canvas_ex3.png')}}</p> +<p>This defines two methods, <code>drawBowtie</code> and <code>dot</code>, that are called 4 times. Before each call, <code>translate()</code> and <code>rotate()</code> are used to set up the current transformation matrix, which in turn positions the dot and the bowtie. <code>dot</code> renders a small black square centered at <code>(0, 0)</code>. That dot is moved around by the transformation matrix. <code>drawBowtie</code> renders a simple bowtie path using the passed-in fill style.</p> +<p>As matrix operations are cumulative, <code>save()</code> and <code>restore()</code> are used around each set of calls to restore the original canvas state. One thing to watch out for is that rotation always occurs around the current origin; thus a <code>translate() rotate() translate()</code> sequence will yield different results than a <code>translate() translate() rotate()</code> series of calls.</p> +<h2 id="Compatibility_With_Apple_.3Ccanvas.3E" name="Compatibility_With_Apple_.3Ccanvas.3E">Compatibility With Apple <canvas></h2> +<p>For the most part, <code><canvas></code> is compatible with Apple's and other implementations. There are, however, a few issues to be aware of, described here.</p> +<h3 id="Required_.3C.2Fcanvas.3E_tag" name="Required_.3C.2Fcanvas.3E_tag">Required <code></canvas></code> tag</h3> +<p>In the Apple Safari implementation, <code><canvas></code> is an element implemented in much the same way <code><img></code> is; it does not have an end tag. However, for <code><canvas></code> to have widespread use on the web, some facility for fallback content must be provided. Therefore, Mozilla's implementation has a <em>required</em> end tag.</p> +<p>If fallback content is not needed, a simple <code><canvas id="foo" ...></canvas></code> will be fully compatible with both Safari and Mozilla -- Safari will simply ignore the end tag.</p> +<p>If fallback content is desired, some CSS tricks must be employed to mask the fallback content from Safari (which should render just the canvas), and also to mask the CSS tricks themselves from IE (which should render the fallback content).</p> +<pre>canvas { + font-size: 0.00001px !ie; +}</pre> +<h2 id="Additional_Features" name="Additional_Features">Additional Features</h2> +<h3 id="Rendering_Web_Content_Into_A_Canvas" name="Rendering_Web_Content_Into_A_Canvas">Rendering Web Content Into A Canvas</h3> +<div class="note"> + This feature is only available for code running with Chrome privileges. It is not allowed in normal HTML pages. <a href="http://mxr.mozilla.org/mozilla/source/content/canvas/src/nsCanvasRenderingContext2D.cpp#2352" title="http://mxr.mozilla.org/mozilla/source/content/canvas/src/nsCanvasRenderingContext2D.cpp#2352">Read why</a>.</div> +<p>Mozilla's <code>canvas</code> is extended with the <a href="/en-US/docs/DOM/CanvasRenderingContext2D#drawWindow()" title="DOM/CanvasRenderingContext2D#drawWindow()"><code>drawWindow()</code></a> method. This method draws a snapshot of the contents of a DOM <code>window</code> into the canvas. For example,</p> +<pre class="brush: js">ctx.drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)"); +</pre> +<p>would draw the contents of the current window, in the rectangle (0,0,100,200) in pixels relative to the top-left of the viewport, on a white background, into the canvas. By specifying "rgba(255,255,255,0)" as the color, the contents would be drawn with a transparent background (which would be slower).</p> +<p>It is usually a bad idea to use any background other than pure white "rgb(255,255,255)" or transparent, as this is what all browsers do, and many websites expect that transparent parts of their interface will be drawn on white background.</p> +<p>With this method, it is possible to fill a hidden IFRAME with arbitrary content (e.g., CSS-styled HTML text, or SVG) and draw it into a canvas. It will be scaled, rotated and so on according to the current transformation.</p> +<p>Ted Mielczarek's <a href="http://ted.mielczarek.org/code/mozilla/tabpreview/">tab preview</a> extension uses this technique in chrome to provide thumbnails of web pages, and the source is available for reference.</p> +<div class="note"> + <strong>Note:</strong> Using <code>canvas.drawWindow()</code> while handling a document's <code>onload</code> event doesn't work. In Firefox 3.5 or later, you can do this in a handler for the <a href="/en-US/docs/Gecko-Specific_DOM_Events#MozAfterPaint" title="Gecko-Specific DOM Events#MozAfterPaint"><code>MozAfterPaint</code></a> event to successfully draw HTML content into a canvas on page load.</div> +<h2 id="See_also" name="See_also">See also</h2> +<ul> + <li><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas">Canvas topic page</a></li> + <li><a href="/en-US/docs/Canvas_tutorial" title="Canvas_tutorial">Canvas tutorial</a></li> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas">WHATWG specification</a></li> + <li><a href="http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html" title="http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html">Apple Canvas Documentation</a></li> + <li><a href="http://weblogs.mozillazine.org/roc/archives/2005/05/rendering_web_p.html">Rendering Web Page Thumbnails</a></li> + <li>Some <a href="/en-US/docs/tag/canvas_examples">examples</a>: + <ul> + <li><a href="http://azarask.in/projects/algorithm-ink">Algorithm Ink</a></li> + <li><a href="http://www.tapper-ware.net/canvas3d/">OBJ format 3D Renderer</a></li> + <li><a href="/en-US/docs/A_Basic_RayCaster" title="A_Basic_RayCaster">A Basic RayCaster</a></li> + <li><a href="http://awordlike.textdriven.com/">The Lightweight Visual Thesaurus</a></li> + <li><a href="http://caimansys.com/painter/">Canvas Painter</a></li> + </ul> + </li> + <li><a href="/en-US/docs/tag/canvas">And more...</a></li> +</ul> diff --git a/files/it/web/html/canvas/index.html b/files/it/web/html/canvas/index.html new file mode 100644 index 0000000000..dcded63973 --- /dev/null +++ b/files/it/web/html/canvas/index.html @@ -0,0 +1,73 @@ +--- +title: Canvas +slug: Web/HTML/Canvas +translation_of: Web/API/Canvas_API +--- +<p>Aggiunto con <a href="https://developer.mozilla.org/en-US/docs/HTML/HTML5" title="/en-US/docs/HTML/HTML5">HTML5</a>, <strong>HTML {{ HTMLElement("canvas") }}</strong> è un elemento che può essere usato per disegnare elementi grafici tramite script (di solito <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a>). Per esempio, può essere usato per disegnare grafici, creare composizioni fotografiche, creare animazioni e perfino realizzare elvaborazioni video in tempo reale.</p> + +<p>Le applicazioni Mozilla supportano <code><canvas></code> a partire da Gecko 1.8 (cioè <a href="/en-US/docs/Firefox_1.5_for_developers" title="en-US/docs/Firefox_1.5_for_developers">Firefox 1.5</a>). L'elemento è stato originariamente introdotto da Apple per OS X <a class="external" href="http://www.apple.com/macosx/features/dashboard/">Dashboard</a> e Safari. Internet Explorer supporta <code><canvas></code> dalla versione 9; per versioni precedenti di IE, una pagina può aggiungere il supporto per <code><canvas></code> includendo lo script del progetto <a class="external" href="http://excanvas.sourceforge.net/">Explorer Canvas</a> di Google. Anche Google Chrome e Opera 9 supportano <code><canvas></code>.</p> + +<p>L'elemento <code><canvas></code> è utilizzato anche da <a href="/en-US/docs/WebGL" title="en-US/docs/WebGL">WebGL</a> per la grafica 3D con accellerazione hardware nelle pagine web.</p> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentation" name="Documentation">Documentazione</h2> + + <dl> + <dt><a class="external" href="https://html.spec.whatwg.org/multipage/canvas.html" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element">Specifiche</a></dt> + <dd>L'elemento <code><canvas></code> è parte delle specifiche 1.0 della WhatWG per le applicazioni Web, anche conosciute come HTML5.</dd> + <dt><a href="/en-US/docs/Canvas_tutorial" title="en-US/docs/Canvas_tutorial">Esecitazione sui canvas</a></dt> + <dd>Un'esercitazione completa che copre sia l'utilizzo base che le caratteristiche avanzate di <code><canvas></code>.</dd> + <dt><a href="/en-US/docs/Code_snippets/Canvas" title="en-US/docs/Code_snippets/Canvas">Frammenti di codice: Canvas</a></dt> + <dd>Qualche frammento di codice per gli sviluppatori di estensioni che coinvolge <code><canvas></code>.</dd> + <dt><a href="/en-US/docs/tag/Canvas_examples" title="/en-US/docs/tag/Canvas_examples">Esempi di canvas</a></dt> + <dd>Alcune dimostraioni sui <code><canvas></code>.</dd> + <dt><a href="/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas" title="en-US/docs/HTML/Canvas/Drawing DOM objects into a canvas">Disegnare oggetti DOM in un canvas</a></dt> + <dd>Come disegnare contenuto DOM, come elementi HTML, in un canvas.</dd> + <dt><a href="/en-US/docs/A_Basic_RayCaster" title="A Basic RayCaster">Un semplice raycaster</a></dt> + <dd>Una demo di animazione ray-tracing utilizzando il canvas.</dd> + <dt><a href="/en-US/docs/Gecko_DOM_Reference#Canvas_interfaces" title="/en-US/docs/Gecko_DOM_Reference#Canvas_interfaces">Interfacce dei Canvas nel DOM</a></dt> + <dd>Interfacce dei Canvas nel DOM implementate in Gecko.</dd> + </dl> + + <p><span class="alllinks"><a href="/en-US/docs/tag/HTML:Canvas" title="/en-US/docs/tag/HTML:Canvas">Vedi tutto...</a></span></p> + </td> + <td> + <h2 class="Community" id="Comunità">Comunità</h2> + + <p>Guarda i forum di Mozilla...{{DiscussionList("dev-tech-html","mozilla.dev.tech.html")}}<br> + <a class="external" href="http://groups.yahoo.com/group/canvas-developers/">Canvas-Developers Yahoo Group</a></p> + + <h2 class="Resources" id="Resources" name="Resources">Risorse</h2> + + <ul> + <li><a class="external" href="http://projects.joshy.org/presentations/HTML/CanvasDeepDive/presentation.html" title="http://projects.joshy.org/presentations/HTML/CanvasDeepDive/presentation.html">Approfondimento HTML5 Canvas</a></li> + <li><a class="external" href="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html" title="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html">Cheat Sheet per Canvas</a> (<a href="http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.png" title="HTML5_Canvas_Cheat_Sheet.png (1388×1027)">PNG</a> / <a href="http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf" title="http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf">PDF</a>)</li> + </ul> + + <h2 class="Libraries" id="Libraries" name="Libraries">Librerie</h2> + + <ul> + <li><a class="external" href="http://libcanvas.github.com/" title="http://libcanvas.github.com/">libCanvas</a> è un potente e leggero framework per canvas</li> + <li><a class="external" href="http://processingjs.org" title="http://processingjs.org/">Processing.js</a> implementzione del linguaggio di visualizzazione Processing</li> + <li><a class="external" href="http://easeljs.com/" title="http://easeljs.com/">EaselJS</a> è una libreria con un'API simile a Flash</li> + <li><a class="external" href="http://www.liquidx.net/plotkit/" title="http://www.liquidx.net/plotkit/">PlotKit</a> è una libreria per la creazione di grafici e diagrammi</li> + <li><a class="link-https" href="https://github.com/jeremyckahn/rekapi" title="https://github.com/jeremyckahn/rekapi">Rekapi</a> è un'API per le animazioni Canvas basata sui keyframe</li> + <li><a class="external" href="http://senchalabs.github.com/philogl/" title="http://senchalabs.github.com/philogl/">PhiloGL</a> è un framework WebGL per la visualizzazione di dati, programmazione creativa e lo sviluppo di giochi.</li> + <li><a class="external" href="http://thejit.org/" title="http://thejit.org/">JavaScript InfoVis Toolkit</a> crea visualizzazioni di dati interattive per il Web con Canvas 2D</li> + <li><a href="http://www.frame-engine.com" title="http://www.frame-engine.com">Frame-Engine</a> è un framework per lo sviluppo di applicazioni e giochi</li> + </ul> + + <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">ARGOMENTI CORRELATI</h2> + + <ul> + <li><a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a>, <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a>, <a href="/en-US/docs/CSS" title="en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/AJAX" title="en-US/docs/AJAX">AJAX</a>, <a href="/en-US/docs/DOM" title="en-US/docs/DOM">DOM</a>, <a href="/en-US/docs/SVG" title="en-US/docs/SVG">SVG</a>, <a href="/en-US/docs/WebGL" title="en-US/docs/WebGL">WebGL</a></li> + </ul> + </td> + </tr> + </tbody> +</table> + +<div>{{ HTML5ArticleTOC() }}</div> diff --git a/files/it/web/html/element/a/index.html b/files/it/web/html/element/a/index.html new file mode 100644 index 0000000000..c47883b767 --- /dev/null +++ b/files/it/web/html/element/a/index.html @@ -0,0 +1,457 @@ +--- +title: <a> +slug: Web/HTML/Element/a +tags: + - Ancora + - Collegamento + - Elemento + - HTML + - Link + - Web +translation_of: Web/HTML/Element/a +--- +<h2 id="Sommario">Sommario</h2> + +<p>L' <em>elemento</em> <em>HTML <code><a></code> </em>(o l' elemento Ancora HTML) definisce un collegamento ipertestuale, il nome dell' obbiettivo di destinazione per un collegamento ipertestuale, o entrambi.</p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Aree tematiche</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contenuti del flusso</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">contenuto delle espressioni</a>, contenuto interattivo, contenuto tangibile.</li> + <li><dfn>Contenuto consentito</dfn> <a href="/en-US/docs/HTML/Content_categories#Transparent_content_model" title="HTML/Content_categories#Transparent_content_model">Trasparente</a>, contenente sia <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">contenuti del flusso</a> sia <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">contenuto delle espressioni</a>.</li> + <li><dfn>Omissione Tag</dfn>Nessuno, sia il tag di apertura, sia quello di chiusura sono obbligatori.</li> + <li><dfn>Elementi padre consentiti</dfn> qualsiasi elemento che accetta <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">contenuto delle espressioni</a>, o qualsiasi elemento che accetta <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">contenuto del flusso</a>.</li> + <li><dfn>Interfaccia DOM</dfn> {{domxref("HTMLAnchorElement")}}</li> +</ul> + +<h2 id="Attributi">Attributi</h2> + +<p><span style="line-height: 21px;">Questo elemento include gli </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">attributi globali</a><span style="line-height: 21px;">.</span></p> + +<dl> + <dt>{{htmlattrdef("charset")}} {{obsoleteGeneric("inline","HTML5")}}</dt> + <dd>Questi attributi definiscono la codifica dei caratteri della risorsa linkata. Il valore è una lista di caratteri delimitata da spazi- e/o virgole - fissa come definito in <a class="external" href="http://tools.ietf.org/html/rfc2045" title="http://tools.ietf.org/html/rfc2045">RFC 2045</a>. Il valore di default è ISO-8859-1.</dd> + <dd> + <div class="note"> + <p><strong>Nota: </strong>Questo attributo è obsoleto in HTML5 e <strong>non dovrebbe essere usato</strong>. Per ottenere un effetto simile, usare l'header HTTP <code>Content-Type</code> sulla risorsa linkata.</p> + </div> + </dd> + <dt>{{htmlattrdef("coords")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt> + <dd>Per l' uso con le forme degli oggetti, questo attibuto usa una lista di numeri separata da virgole per definire le coordinate dell'oggetto nella pagina. Il valore di questo attributo dipende dal valore dell'attributo {{htmlattrxref("shape", "a")}}.</dd> + <dd> + <table class="standard-table"> + <thead> + <tr> + <th scope="col"> + <p>Valore dell'attributo {{htmlattrxref("shape", "a")}}</p> + </th> + <th scope="col">Formato delle coordinate</th> + <th scope="col">Significato</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>circle</code></td> + <td> + <p><code>x,y,z</code> </p> + </td> + <td> + <ul> + <li><code>x</code> e <code>y</code> indicano le coordinate (in pixel) del centro della circonferenza;</li> + <li><code>z</code> indica la lunghezza del raggio.</li> + </ul> + </td> + </tr> + <tr> + <td><code>rect</code></td> + <td><code>x,y,w,h</code></td> + <td> + <ul> + <li><code>x</code> e <code>y</code> indicano le coordinate dell'angolo superiore sinistro del rettangolo;</li> + <li><code>w</code> e<code> h</code> indicano rispettivamente la larghezza e l'altezza del rettangolo.</li> + </ul> + </td> + </tr> + <tr> + <td><code>polygon</code></td> + <td><code>x1,y1,x2,y2,...</code></td> + <td> + <ul> + <li>Ogni coppia di coordinate <code>x,y</code> definisce un punto del poligono; due punti consecutivi (o l'ultimo e il primo) vengono uniti da una linea.</li> + </ul> + </td> + </tr> + </tbody> + </table> + </dd> + <dt>{{htmlattrdef("datafld")}} {{Non-standard_inline}}</dt> + <dd><span id="result_box" lang="it"><span class="hps">Questo attributo specifica il</span> <span class="hps">nome della colonna</span> <span class="hps">di tale oggetto</span> <span class="hps">origine dati che</span> <span class="hps">fornisce i</span> <span class="hps">dati associati.</span></span></dd> + <dd> + <div class="note"> + <p><strong>Nota:</strong></p> + + <ul> + <li>Questo attributo è non-standard and <strong>non dovrebbe essere usato</strong>. Per ottenere un effetto simile, utilizzare un meccanismo come <code><a href="/en-US/docs/nsIXMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> per popolare dinamicamente la pagina.</li> + <li>Questo attributo è implementato solo in Internet Explorer 4, 5, 6 e 7. (<a class="external" href="http://msdn.microsoft.com/en-us/library/ms533703%28VS.85%29.aspx">Microsoft's Data Binding: dataFld Property (MSDN)</a>)</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("datasrc")}} {{Non-standard_inline}}</dt> + <dd><span id="result_box" lang="it"><span class="hps">Questo attributo indica</span> <span class="hps">l'ID</span> <span class="hps">oggetto origine dei dati</span> <span class="hps">che fornisce</span> <span class="hps">i dati e che</span> <span class="hps">è legato</span> <span class="hps">a questo elemento</span><span>.</span></span></dd> + <dd> + <div class="note"> + <p><strong>Nota:</strong></p> + + <ul> + <li>Questo attributo è non-standard and <strong>non dovrebbe essere usato</strong>. Per ottenere un effetto simile, utilizzare un meccanismo come <code><a href="/en-US/docs/nsIXMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> per popolare dinamicamente la pagina.</li> + <li>Questo attributo è implementato solo in Internet Explorer 4, 5, 6 e 7. (<a class="external" href="http://msdn.microsoft.com/en-us/library/ms533709(VS.85).aspx" title="http://msdn.microsoft.com/en-us/library/ms533709(VS.85).aspx">Microsoft's Data Binding: dataSrc Property (MSDN)</a>)</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("download")}} {{HTMLVersionInline(5)}}</dt> + <dd>Questo attributo, se presente, indica che l' autore intende che il collegamento ipertestuale debba essere usato per scaricare una risorsa. Se l' attributo ha un valore, il browser dovrebbe interpretarlo come il nome del file da salvare in un file system locale. Non ci sono restrizioni sui valori consentiti, ma dovresti considerare che la maggior parte dei file system hanno delle limitazioni per quanto riguarda quale punteggiatura è supportata nei nomi del file, ed i browser sono predisposti ad aggiustare il nome del file di conseguenza.</dd> + <dd> + <div class="note"> + <p><strong>Nota:</strong></p> + + <ul> + <li>Può essere usato con URL <code><a href="it/docs/Web/API/URL.createObjectURL">blob:</a></code> e <code>data:</code>, così da poter scaricare contenuti generati usando JavaScript (ad esempio un'immagine creata in un applicazione di disegno).</li> + <li>Se è presente l'header HTTP <code>Content-Disposition</code> e propone un diverso nome per il file, l'header ha la priorità su questo attributo.</li> + <li>Se l'header HTTP <code>Content-Disposition</code> ha valore <code>inline</code>, in Firefox l'header ha la precedenza, mentre in Chrome l'attributo <code>download</code>.</li> + <li>In <a href="/en-US/docs/Firefox_20_for_developers" title="/en-US/docs/Firefox_20_for_developers">Firefox 20</a> questo attributo è rispettato solo per link a risorse provenienti dalla stessa origine.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("href")}}</dt> + <dd><span id="result_box" lang="it"><span class="hps">Questo è</span> <span class="hps">l'unico attributo</span> <span class="hps">richiesto per</span> <span class="hps">ancore</span> <span class="hps">che definiscono</span><span class="hps"> un collegamento</span> <span class="hps">ipertestuale</span><span>.</span></span> Esso indica il link obbiettivo, sia esso un URL o un frammento di URL. Un frammento di URL è un nome (un {{htmlattrxref("id")}}) preceduto da un cancelletto (#), che specifica la posizione dell'obbiettivo nel documento corrente. Gli URL non sono limitati ai documenti web basati sul protocollo HTTP: possono essere usati con altri protocolli supportati dal browser, come <code>file</code>, <code>ftp</code>, e <code>mailto</code>.</dd> + <dd> + <div class="note"> + <p><strong>Nota:</strong> Puoi usare il frammento apposito "top" per creare un collegamento per tornare in cima alla pagina; ad esempio <code><a href="#top">Torna all'inizio</a></code>. Questo comportamento <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#scroll-to-fragid">è specificato in HTML5</a>.</p> + </div> + </dd> + <dt>{{htmlattrdef("hreflang")}}</dt> + <dd>Questo attributo indica la lingua della risorsa linkata. È puramente informativo. I valori permessi sono determinati dallo standard <a class="external" href="http://www.ietf.org/rfc/bcp/bcp47.txt" title="http://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a> per l'HTML5 e dallo standard <a class="external" href="http://www.ietf.org/rfc/rfc1766.txt" title="http://www.ietf.org/rfc/rfc1766.txt">RFC1766</a> per l'HTML4. Usa questo attributo solo se è presente anche l' attributo {{htmlattrxref("href", "a")}}.</dd> + <dt>{{htmlattrdef("media")}} {{HTMLVersionInline(5)}}</dt> + <dd>Questo attributo specifica in quali dispositivi utilizzare il link. Il suo valore deve essere una <a href="/en-US/docs/CSS/Media_queries" title="CSS/Media queries">media query</a>. Questo attributo è utile principalmente quando vi è un collegamento ad un foglio di stile esterno che consente allo user agent di scegliere il più adatto per il dispositivo in uso.</dd> + <dd> + <div class="note"> + <p><strong>Nota:</strong></p> + + <ul> + <li>In HTML 4 sono accettate solo descrizioni letterali (separate da uno spazio) del supporto, vale a dire <a href="/en-US/docs/CSS/@media" title="https://developer.mozilla.org/en-US/docs/CSS/@media">media types and groups</a>: <code>print</code>, <code>screen</code>, <code>aural</code>, <code>braille</code>, ... HTML 5 estende questo ad ogni tipo di <a href="/en-US/docs/CSS/Media_queries" title="CSS/Media queries">media query</a>, ossia un'estensione dei valori consentiti in HTML 4.</li> + <li><span id="result_box" lang="it"><span class="hps">I browser</span> <span class="hps">che non supportano</span> le <a href="/it/docs/CSS/Media_queries">Media Queries CSS3</a> potrebbero <span class="hps">non</span> <span class="hps">riconoscere il collegamento</span> <span class="hps">adeguato;</span> <span class="hps">non dimenticare di</span> <span class="hps">impostare collegamenti</span> <span class="hps">alternativi, usando</span> <span class="hps">l'insieme</span> <span class="hps">ristretto di</span> <span class="hps">media queries</span> <span class="hps">definite</span> <span class="hps">in HTML 4</span><span>.</span></span></li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("methods")}} {{Non-standard_inline}}</dt> + <dd><span id="result_box" lang="it"><span class="hps">Il</span> <span class="hps">valore di questo attributo</span> <span class="hps">fornisce</span> <span class="hps">informazioni sulle</span> <span class="hps">funzioni</span> <span class="hps">che possono</span> <span class="hps">essere</span> <span class="hps">eseguite su</span> <span class="hps">un oggetto</span><span>.</span> <span class="hps">I</span> <span class="hps">valori generalmente</span> <span class="hps">sono dati</span> <span class="hps">dal protocollo</span> <span class="hps">HTTP</span> <span class="hps">quando viene</span> <span class="hps">utilizzato</span><span>,</span> <span class="hps">ma potrebbe</span> <span class="atn hps">(</span><span>per</span> <span class="hps">ragioni simili a quelle</span> <span class="hps">per</span> <span class="hps">l'attributo</span> <span class="hps">title</span><span>)</span> <span class="hps">essere utile includere</span> <span class="hps">informazioni</span> <span class="hps">consultive </span><span class="hps">in anticipo</span> <span class="hps">nel collegamento</span><span>.</span> <span class="hps">Ad esempio</span><span>, il browser</span> <span class="hps">potrebbe scegliere</span> <span class="hps">un rendering</span> <span class="hps">diverso di</span> <span class="hps">un collegamento</span> <span class="hps">in funzione</span> <span class="hps">dei</span> <span class="hps">metodi specificati</span><span>, qualcosa che</span> <span class="hps">è</span> ricercabile <span class="hps">potrebbe avere</span> <span class="hps">un'icona diversa</span><span>,</span> <span class="hps">o</span> <span class="hps">un link esterno</span> <span class="hps">potrebbe essere intrerpretato </span><span class="hps">con l'indicazione</span> <span class="hps">di lasciare il</span> <span class="hps">sito corrente</span><span>.</span> <span class="hps">Questo attributo</span> <span class="hps">non è ben compreso</span> o <span class="hps">supportato neanche</span> <span class="hps">dal browser</span> che lo ha definito<span>,</span> <span class="hps">Internet Explorer 4</span><span>.</span> </span> <a class="external" href="http://msdn.microsoft.com/en-us/library/ms534168(VS.85).aspx">Methods Property (MSDN)</a></dd> + <dt>{{htmlattrdef("name")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt> + <dd>Questo attributo è richiesto in un ancora che definisce una destinazione all'interno di una pagina. Il valore per il <strong>name</strong> è simile al valore per l' attributo <strong>id</strong> e deve essere un identificatore alfanumerico e univoco nel documento. Secondo la specifica specifiche HTML 4.01, l' <strong>id</strong> e il <strong>name</strong> possono entrambi essere applicati all'elemento <a>, finchè hanno lo stesso valore.</dd> + <dd> + <div class="note"> + <p><strong>Nota:</strong> Questo attributo è obsoleto in HTML5, usare l'<a href="/en-US/docs/HTML/Global_attributes#attr-id" title="HTML/Global attributes#id"> attributo globale <strong>id</strong></a>.</p> + </div> + </dd> + <dt>{{htmlattrdef("ping")}} {{HTMLVersionInline(5)}}</dt> + <dd>Se questo attributo è presente, viene mandata una notifica all'URL specificato quando l'utente segue il link.</dd> + <dt>{{htmlattrdef("rel")}}</dt> + <dd>Questo attributo specifica la relazione tra l'oggetto di destinazione e il collegamento stesso. Il suo valore è una lista di <a href="/it/docs/Web/HTML/Link_types">tipi di link</a> separati da spazi. La relazione predefinita è <code>void</code>, ossia nessuna.</dd> + <dd>Usare questo attributo solo se è presente anche l'attributo {{htmlattrxref("href", "a")}}.</dd> + <dt>{{htmlattrdef("rev")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt> + <dd>Questo attributo specifica un collegamento inverso, la relazione inversa dell' attributo <strong>rel</strong>. È utile per indicare l'origine un oggetto, ad esempio il suo autore.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("shape")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt> + <dd>Questo attributo è utilizzato per definire una regione selezionabile per un collegamento ipertestuale associata con una figura per creare una mappa immagine. I valori per l' attributo sono <code>circle </code>(cerchio), <code>default </code>(l'intera area a disposizione) <code>polygon </code>(poligono) e <code>rect </code>(rettangolo). Le coordinate della mappa sono definite dall'attributo {{htmlattrxref("coords", "a")}}.</dd> + <dt>{{htmlattrdef("target")}}</dt> + <dd>Questo attributo specifica dove deve essere visualizzata la risorsa linkata. In HTML4, questo è il nome, o una parola chiave, per una cornice (frame). In HTML5, è il nome, o parola chiave, di un contesto di navigazione (<em>browsing context</em>) (per esempio un'ettichetta, una finestra o un frame in linea). Le seguenti parole chiave hanno uno speciale significato: + <ul> + <li><code>_self</code>: Carica il documento nello stesso frame. Questo è il valore predefinito.</li> + <li><code>_blank</code>: Carica il documento in una nuova finestra.</li> + <li><code>_parent</code>: Carica il documento nel frameset genitore del frame corrente. Se non c'è il genitore, questa opzione si comporta allo stesso modo di <code>_self</code>.</li> + <li><code>_top</code>: Carica il documento dentro la finestra originale completa (la scheda del browser), cancellando gli altri frame. Se non c'è il genitore, questa opzione si comporta allo stesso modo di <code style="font-style: normal;">_self</code>.</li> + </ul> + Usare questo attributo solo se è presente anche l'attributo {{htmlattrxref("href", "a")}}.</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>Questo attributo specifica il tipo della risorsa linkata, sotto forma di tipo MIME. Solitamente è fornito solo come informazione secondaria, ma in futuro i browser potrebbero aggiungere un'icona che identifichi i tipi di file (ad esempio un piccolo altoparlante quando il tipo è <code>audio/wav</code>). Per una lista completa dei tipi MIME supportati, vedere <a class="linkification-ext external" href="http://www.w3.org/TR/html4/references.html#ref-MIMETYPES" title="Linkification: http://www.w3.org/TR/html4/references.html#ref-MIMETYPES">http://www.w3.org/TR/html4/references.html#ref-MIMETYPES</a>. + <div> </div> + + <div>Usare questo attributo solo se è presente anche l'attributo {{htmlattrxref("href", "a")}}.</div> + </dd> + <dt>{{htmlattrdef("urn")}} {{Non-standard_inline}}</dt> + <dd>Questo attributo presumibilmente supportato da Microsoft riferisce un nome uniforme di risorsa (uniform resource name (URN)) con il collegamento. Mentre era basato su lavori standard anni addietro, il significato di URN non è più ben definito, quindi questo attributo è insignificante. <a class="external" href="http://msdn.microsoft.com/en-us/library/ms534710(VS.85).aspx">urn Property (MSDN)</a></dd> +</dl> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Collegamento_ad_un_file_esterno">Collegamento ad un file esterno</h3> + +<pre class="brush: xml"><a href="<a class="linkification-ext" href="http://www.mozilla.com/" title="Linkification: http://www.mozilla.com/">http://www.mozilla.com/</a>">Link esterno</a> +</pre> + +<h4 id="Risultato">Risultato</h4> + +<p><a class="external" href="http://www.mozilla.com/">Link esterno</a></p> + +<h3 id="Creare_un'immagine_cliccabile">Creare un'immagine cliccabile</h3> + +<p>Questo link aprirà la pagina <code>https://developer.mozilla.org/</code> in una nuova finestra, per via dell'attributo {{htmlattrxref("target", "a", "target=\"_blank\"")}}.</p> + +<pre class="brush: html"><a href="https://developer.mozilla.org/" target="_blank"> + <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png" alt="MDN"> +</a> +</pre> + +<h4 id="Risultato_2">Risultato</h4> + +<p><a href="https://developer.mozilla.org/"><img alt="MDN" src="https://mdn.mozillademos.org/files/6851/mdn_logo.png"> </a></p> + +<h3 id="Creare_un_link_ad_un'email">Creare un link ad un'email</h3> + +<p>Spesso si creano collegamenti o pulsanti che aprono il programma di email dell'utente. Per questo si usano i link <code>mailto</code>.</p> + +<p>Per altri dettagli riguardanti lo schema URL <code>mailto</code>, come ad esempio includere l'oggetto, del testo o altro contenuto, vedere i <a href="/it/docs/Web/Guide/HTML/Email_links">link Email</a> o lo standard <a href="http://tools.ietf.org/html/6068">RFC 6068</a>.</p> + +<pre class="brush: html"><a href="mailto:nowhere@mozilla.org">Invia un'email a nowhere</a></pre> + +<h4 id="Risultato_3">Risultato</h4> + +<p><a href="mailto:nowhere@mozilla.org">Invia un'email a nowhere</a></p> + +<h3 id="Usare_l'attributo_download_per_scaricare_un_<canvas>_come_PNG.">Usare l'attributo <code>download</code> per scaricare un <code><canvas></code> come PNG.</h3> + +<p>Se si vuole permettere all'utente di scaricare un elemento {{HTMLElement("canvas")}} sotto forma di immagine, si può creare un link con l'attributo {{htmlattrxref("download", "a")}} e il contenuto del <canvas> come URL del file:</p> + +<pre class="brush: html"><!-- HTML --> +<canvas id="my-canvas"></canvas> +<a id="download-image" download="disegno.png">Scarica l'immagine</a> +</pre> + +<pre class="brush: js">// JavaScript +var link = document.querySelector("#download-image"); +var canvas = document.querySelector("#my-canvas"); +link.addEventListener("click"; function () { + link.href = canvas.toDataURL(); +}, false); +</pre> + +<h2 id="Specifications" name="Specifications">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-a-element', '<a>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'the-a-element.html#the-a-element', '<a>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.2', '<a>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_dei_Browser">Compatibilità dei Browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>href="#top"</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("10.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>{{htmlattrxref("download","a")}}</td> + <td>14</td> + <td>{{CompatGeckoDesktop("20.0")}}</td> + <td>{{CompatNo}}</td> + <td>15</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>{{htmlattrxref("ping", "a")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td><a href="http://kb.mozillazine.org/Browser.send_pings">Disabilitato di default</a></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>href="#top"</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("10.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>{{htmlattrxref("download","a")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("20.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><span style="font-size: 12px; line-height: 18px;">{{htmlattrxref("ping", "a")}}</span></td> + <td> </td> + <td><a href="http://kb.mozillazine.org/Browser.send_pings" style="font-size: 12px; line-height: 18px;">Disabilitato di default</a></td> + <td> </td> + <td> </td> + <td> </td> + </tr> + </tbody> +</table> +</div> + +<h2 id="sect1"> </h2> + +<h3 id="Nota_riguardo_a_Gecko">Nota riguardo a Gecko</h3> + +<ul> + <li>A partire da Gecko 41 (Firefox 41.0, Thunderbird 41.0, SeaMonkey 2.38), un elemento {{HTMLElement("a")}} senza l'attributo {{htmlattrxref("href", "a")}} non è classificato come contenuto interattivo. Cliccando su di esso dentro un {{HTMLElement("label")}} viene attivato il contenuto etichettato (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1167816">bug 1167816</a>).</li> +</ul> + +<h3 id="Click_e_focus">Click e focus</h3> + +<p>Un link ottiene il focus quando vi si clicca sopra in vari browser (come comportamento predefinito).</p> + +<h4 id="Cliccando_su_un_HTMLElement(a)_gli_si_assegna_il_focus">Cliccando su un {{HTMLElement("a")}} gli si assegna il focus?</h4> + +<table class="standard-table"> + <thead> + <tr> + <th scope="row">Browser Desktop</th> + <th scope="col">Windows 8.1</th> + <th scope="col">OS X 10.9</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Firefox 30.0</th> + <td style="background-color: rgb(124, 252, 0);">Sì</td> + <td style="background-color: rgb(124, 252, 0);">Sì</td> + </tr> + <tr> + <th scope="row">Chrome ≥39 (<a href="https://code.google.com/p/chromium/issues/detail?id=388666">Chromium bug 388666</a>)</th> + <td style="background-color: rgb(124, 252, 0);">Sì</td> + <td style="background-color: rgb(124, 252, 0);">Sì</td> + </tr> + <tr> + <th scope="row">Safari 7.0.5</th> + <td style="background-color: rgb(211, 211, 211);">N.a.</td> + <td style="background-color: yellow;">Solo quando ha l'attributo {{htmlattrxref("tabindex")}}</td> + </tr> + <tr> + <th scope="row">Internet Explorer 11</th> + <td style="background-color: rgb(124, 252, 0);">Sì</td> + <td style="background-color: rgb(211, 211, 211);">N.a.</td> + </tr> + <tr> + <th scope="row">Opera 12</th> + <td style="background-color: rgb(124, 252, 0);">Sì</td> + <td style="background-color: rgb(124, 252, 0);">Sì</td> + </tr> + </tbody> +</table> + +<h4 id="Toccando_un_HTMLElement(a)_gli_si_assegna_il_focus">Toccando un {{HTMLElement("a")}} gli si assegna il focus?</h4> + +<table class="standard-table"> + <thead> + <tr> + <th scope="row">Browser Mobili</th> + <th scope="col">iOS 7.1.2</th> + <th scope="col">Android 4.4.4</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Safari Mobile</th> + <td style="background-color: yellow;">Solo quando ha l'attributo {{htmlattrxref("tabindex")}}</td> + <td style="background-color: rgb(211, 211, 211);">N.a.</td> + </tr> + <tr> + <th scope="row">Chrome 35</th> + <td>???</td> + <td style="background-color: yellow;">Solo quando ha l'attributo {{htmlattrxref("tabindex")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Note">Note</h2> + +<p>Le seguenti sono chiavi di associazione riservate per due dei maggiori browser e non devono essere usate come valori di accesso: a, c, e, f, g, h, v, freccia sinistra e freccia destra.</p> + +<p>L' HTML 3.2 definisce solo gli attributi <strong>name</strong>, <strong>href</strong>, <strong>rel</strong>, <strong>rev</strong>, e <strong>title</strong>.</p> + +<p>L' attributo <strong>target</strong> non è definito nei browser che non supportano i frame, come Netscape 1. Inoltre, target non è consentito se si utilizza la variante rigorosa (strict) dell'<a href="/it/docs/XHTML" title="XHTML">XHTML</a>, ma è limitata al frameset o alla forma "di transizione" (transitional).</p> + +<h3 id="Raccomandazioni_JavaScript">Raccomandazioni JavaScript</h3> + +<p>Succede spesso che un tag {{HTMLElement("a")}} sia usato con l'evento <code>onclick</code>. Per evitare che la pagina venga ricaricata, l'attributo {{htmlattrxref("href", "a")}} viene spesso impostato a <code>"#"</code> o a <code>"javascript:void(0)"</code>. Entrambi questi valori possono portare ad errori inaspettati quando si copiano e aprono link in una nuova scheda e/o finestra. Bisogna essere consapevoli di questo per ragioni di usabilità, e quando gli utenti usano il tag di ancoraggio, bisogna cercare di prevenire i comportamenti di default.</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>Altri elementi di espressione <a href="/it/docs/HTML/Text_level_semantics_conveying_elements" title="HTML/Text level semantics conveying elements">text-level semantics</a>: {{HTMLElement("abbr")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/it/web/html/element/abbr/index.html b/files/it/web/html/element/abbr/index.html new file mode 100644 index 0000000000..5ab07d12b7 --- /dev/null +++ b/files/it/web/html/element/abbr/index.html @@ -0,0 +1,142 @@ +--- +title: <abbr> +slug: Web/HTML/Element/abbr +translation_of: Web/HTML/Element/abbr +--- +<h2 id="Sommario">Sommario</h2> + +<p>L' <em>elemento</em> <em>HTML <code><abbr></code> </em>(o elemento HTML di abbreviazione) rappresenta un' abbreviazione e opzionalmente fornisce una descrizione completa. Se presente, l' attributo <strong>title</strong> deve contenere la descrizione completa e nient' altro.</p> + +<div class="note"> +<p><strong>Note d' uso: </strong>Quando presente, il numero grammaticale del testo presente nell' attributo <strong>title</strong> deve corrispondere a quello contentuto nell' elemento <code><abbr></code>. Questo è il caso di lingue con più di due numeri grammaticali (ad esempio, l' arabo non ha solo singolare e plurale, ma anche duale).</p> +</div> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Aree tematiche</a></dfn> <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contenuti del flusso</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">contenuto delle espressioni</a>, contenuto tangibile.</li> + <li><dfn>Contenuto consentito</dfn><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Contenuto delle espressioni</a>.</li> + <li><dfn>Omissione Tag</dfn> Nessuno, sia il tag di apertura, sia quello di chiusura sono obbligatori.</li> + <li><dfn>Elementi padre consentiti</dfn> qualsiasi elemento che accetta <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">contenuto delle espressioni</a>.</li> + <li><dfn>Interfaccia DOM</dfn> {{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 3.6) inclusive, Firefox implemented the {{domxref("HTMLSpanElement")}} interface for this element.</li> +</ul> + +<h2 id="Attributi">Attributi</h2> + +<p><span style="line-height: 21px;">Questo elemento include solo gli </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">attributi globali</a><span style="line-height: 21px;">.</span></p> + +<p>Si usa l' attributo <strong>title</strong> per definire la descrizione completa dell' abbreviazione. Molti user agent lo presentano come un suggerimento.</p> + +<h2 id="Stile_di_default">Stile di default</h2> + +<p>Lo scopo di questo elemento è puramente per convenienza dell'autore e tutti i browser lo visualizzano in linea (<code><a href="/en-US/docs/CSS/display" title="CSS/display">display</a>: inline</code>) di default, sebbene lo stile di defaul vari da un browser all' altro:</p> + +<ul> + <li>Alcuni browser, come IE, applicano uno stile uguale all' elemento {{HTMLElement("span")}}.</li> + <li>Opera, Firefox e altri aggiungono una sottolieneatura punteggiata al contenuto dell'elemento.</li> + <li>Pochi browser non aggiungono solo una sottolineatura punteggiata, ma lo mettono anche in "maiuscoletto"; per evitare questo stile, è sufficiente aggiungere l'istruzione <code><a href="/en-US/docs/CSS/font-variant" title="CSS/font-variant">font-variant</a>: none</code> nel CSS, il che prevenirà questo comportamento.</li> +</ul> + +<p>Viene quindi fortemente raccomandato agli autori di siti web di on affidarsi allo stile di default. Ricorda che questo elemento non viene supportato da IE in tutte le versioni precedenti a IE7. Per queste versioni di IE che non permettono l'uso di stili per elementi sconosciuti, lo script seguente si rende necessario per ovviare a questo problema:</p> + +<pre class="brush:html"><!--[if lte IE 6]> + <script> + document.createElement("abbr"); + </script> +<![endif]--></pre> + +<h2 id="Esempio">Esempio</h2> + +<pre class="brush: html"><p>Tony Blair is the prime minister of the <abbr title="United Kingdom">UK</abbr></p> +</pre> + +<h3 id="Result" name="Result">Risultato</h3> + +<p><img alt="Image:Abbr.gif" src="/@api/deki/files/17/=Abbr.gif"></p> + +<p>Tony Blair is the prime minister of the <abbr title="United Kingdom">UK</abbr></p> + +<h2 id="Specifications" name="Specifications">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-abbr-element', '<abbr>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'the-abbr-element.html#the-abbr-element', '<abbr>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '<abbr>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibità_dei_Browser">Compatibità dei Browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>2.0</td> + <td>{{CompatGeckoDesktop(1.0)}}</td> + <td>7.0</td> + <td>1.3</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>Altri elementi riguardanti <a href="/it/docs/HTML/Text_level_semantics_conveying_elements" title="HTML/Text level semantics conveying elements">la semantica del testo</a>: {{HTMLElement("a")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li> +</ul> + +{{HTMLRef}} diff --git a/files/it/web/html/element/acronym/index.html b/files/it/web/html/element/acronym/index.html new file mode 100644 index 0000000000..57180f14e3 --- /dev/null +++ b/files/it/web/html/element/acronym/index.html @@ -0,0 +1,118 @@ +--- +title: <acronym> +slug: Web/HTML/Element/acronym +translation_of: Web/HTML/Element/acronym +--- +<div>{{obsolete_header}}</div> + +<h2 id="Summary" name="Summary">Sommario</h2> + +<p>L'elemento HTML <code><strong><acronym></strong></code> permette all'autore di indicare che una sequenza di caratteri è un acronimo o un'abbreviazione.</p> + +<div class="note"> +<p><strong>Nota: </strong>Questo elemento è stato rimosso in HTML5. Gli sviluppatori dovrebbero usare l'elemento {{HTMLElement("abbr")}}.</p> +</div> + +<h2 id="Attributes" name="Attributes">Attributi</h2> + +<p>Questo elemento supporta solo gli <a href="/it/docs/HTML/global_attributes">attributi globali</a>, comuni a tutti gli elementi.</p> + +<h2 id="DOM_Interface" name="DOM_Interface">Interfaccia DOM</h2> + +<p>Questo elemento implementa l'interfaccia {{domxref("HTMLElement")}}.</p> + +<div class="note"><strong>Nota: </strong>Fino a Geko 1.9.2, Firefox implementava l'interfaccia {{domxref("HTMLSpanElement")}}.</div> + +<h2 id="Example" name="Example">Esempio</h2> + +<pre class="brush:html"><p>Il <acronym title="World Wide Web">WWW</acronym> è solo uno dei componenti di Internet.</p> +</pre> + +<h2 id="Default_styling" name="Default_styling">Aspetto predefinito</h2> + +<p>Dato che questo tag serve solo per la comodità dell'autore, il suo aspetto di default cambia in ogni browser:</p> + +<ul> + <li>In alcuni browser, come Internet Explorer, questo elemento appare esattamente come uno {{HTMLElement("span")}}.</li> + <li>Opera, Firefox e alcuni altri browser aggiungono una linea di puntini sotto il contenuto dell'elemento.</li> + <li>Alcuni browser non solo aggiungono una lina di puntini, ma ne mostrano anche il contenuto in maiuscolo. Per evitare questo comportamento, si può usare la proprietà CSS {{cssxref("font-variant")}}<strong><code>: none</code></strong>.</li> +</ul> + +<p>Qundi è particolarmente consigliato agli sviluppatori di non affidarsi allo stile predefinito.</p> + +<h2 id="Specifications" name="Specifications">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#edef-ACRONYM', '<acronym>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilità con i browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Vedi anche</h2> + +<ul> + <li>L'elemento HTML {{HTMLElement("abbr")}}.</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/it/web/html/element/address/index.html b/files/it/web/html/element/address/index.html new file mode 100644 index 0000000000..efc68172a4 --- /dev/null +++ b/files/it/web/html/element/address/index.html @@ -0,0 +1,120 @@ +--- +title: <address> +slug: Web/HTML/Element/address +translation_of: Web/HTML/Element/address +--- +<h2 id="Sommario">Sommario</h2> +<p>L'<em>elemento</em> <em>HTML <code><address></code> (indirizzo)</em> può essere usato dagli autori per fornire informazioni di contatto per il più vicino {{HTMLElement("article")}} oppure per il progenitore {{HTMLElement("body")}}; in quest'ultimo caso, viene applicato all'intero documento.</p> +<div class="note"> + <p><strong>Note d'uso:</strong></p> + <ul> + <li>Per rappresentare un indirizzo arbitrario, che non sia relativo alle informazioni di contatto, si usa l'elemento {{HTMLElement("p")}} anzichè l'elemento <span style="font-family: Courier New;"><address></span>.</li> + <li>Questo elemento non deve contenere ulteriori informazioni oltre a quelle di contatto, come la data di pubblicazione (che appartiene all'elemento {{HTMLElement("time")}}).</li> + <li>Tipicamente un elemento <span style="font-family: Courier New;"><address></span> può essere eventualmente posto dentro l'elemento {{HTMLElement("footer")}} della sezione corrente.</li> + </ul> +</div> +<ul class="htmlelt"> + <li><dfn><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Aree tematiche</a></dfn> <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contenuti del flusso</a>, contenuto tangibile.</li> + <li><dfn>Contenuto consentito</dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contenuti del flusso</a>, ma senza elementi <span style="font-family: Courier New;"><address> </span>nidificati, no contenuti di intestazione ({{HTMLElement("hgroup")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}), no contenuti di sezione ({{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}), e no negli elementi {{HTMLElement("header")}} o {{HTMLElement("footer")}}.</li> + <li><dfn>Omissione Tag</dfn>Nessuno, sia il tag di apertura, sia quello di chiusura sono obbligatori.</li> + <li><dfn>Elementi padre consentiti</dfn> Qualsiasi elemento che accetta <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">contenuti del flusso</a>.</li> + <li><dfn>Interfaccia DOM</dfn> {{domxref("HTMLElement")}} Prima di Gecko 2.0 (Firefox 4), Gecko implementava questo elemento usanto l'interfaccia {{domxref("HTMLSpanElement")}}</li> +</ul> +<h2 id="Attributi">Attributi</h2> +<p><span style="line-height: 21px;">Questo elemento include solo </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">attributi globali</a><span style="line-height: 21px;">.</span></p> +<h2 id="Esempio">Esempio</h2> +<pre class="brush: html"> <address> + You can contact author at <a href="http://www.somedomain.com/contact">www.somedomain.com</a>.<br> + If you see any bugs, please <a href="mailto:webmaster@somedomain.com">contact webmaster</a>.<br> + You may also want to visit us:<br> + Mozilla Foundation<br> + 1981 Landings Drive<br> + Building K<br> + Mountain View, CA 94043-0801<br> + USA + </address> +</pre> +<p>Il codice HTML sopra visualizzerà:</p> +<p><img alt="Image:HTML-address.png" src="/@api/deki/files/238/=HTML-address.png"></p> +<p>Sebbene l'elemento indirizzo visualizzi il testo con gli stessi stili di default degli elementi {{HTMLElement("i")}} o {{HTMLElement("em")}}, esso risulta più appropriato da utilizzare quando si tratta di informazioni di contatto per come convoglia informazioni semantiche addizionali.</p> +<h2 id="Specifications" name="Specifications">Specifiche</h2> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-address-element', '<address>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'the-address-element.html#the-address-element', '<address>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.6', '<address>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> +<h2 id="Compatilità_dei_Browser">Compatilità dei Browser</h2> +<p>{{CompatibilityTable}}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>1.0</td> + <td>5.12</td> + <td>1.0</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mini</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.7")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> + </table> +</div> +<h2 id="Vedi_anche">Vedi anche</h2> +<ul> + <li>Altri elementi relativi alle sezioni: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("footer")}}, {{HTMLElement("section")}}, {{HTMLElement("header")}};</li> + <li class="last"><a class="deki-ns current" href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sections and outlines of an HTML5 document</a>.</li> +</ul> +<p>{{HTMLRef}}</p> diff --git a/files/it/web/html/element/applet/index.html b/files/it/web/html/element/applet/index.html new file mode 100644 index 0000000000..aa16b21fa8 --- /dev/null +++ b/files/it/web/html/element/applet/index.html @@ -0,0 +1,120 @@ +--- +title: <applet> +slug: Web/HTML/Element/applet +translation_of: Web/HTML/Element/applet +--- +<div>{{obsolete_header}}</div> + +<h2 id="Sommario">Sommario</h2> + +<p>L'elemento HTML <code><strong><applet></strong></code> serve a includere un'applet Java.</p> + +<div class="note"> +<p><strong>Nota: </strong>Questo elemento è stato rimosso in HTML5. Gli sviluppatori dovrebbero usare l'elemento più generico {{HTMLElement("object")}}.</p> +</div> + +<h2 id="Attributes" name="Attributes">Attributi</h2> + +<dl> + <dt>{{htmlattrdef("align")}}</dt> + <dd>Questo attributo specifica la posizione dell'applet nella pagina relativamente al contenuto intorno ad essa. La specifica HTML 4.01 definisce i valori <code>bottom</code>, <code>left</code>, <code>middle</code>, <code>right</code> e <code>top</code>; Microsoft e Netscape supportano anche i valori <code>absbottom</code>, <code>absmiddle</code>, <code>baseline</code>, <code>center</code> e <code>texttop</code>.</dd> + <dt>{{htmlattrdef("alt")}}</dt> + <dd>Questo attributo definisce un testo da mostrare nei browser che non supportano Java. Ricordare che anche il contenuto dell'elemento <strong><code><applet></code></strong> potrebbe essere mostrato come testo alternativo.</dd> + <dt>{{htmlattrdef("archive")}}</dt> + <dd>Questo attributo è un riferimento a una versione compressa dell'applet, che potrebbe aiutare a ridurre il tempo necessario al download.</dd> + <dt>{{htmlattrdef("code")}}</dt> + <dd>Questo attributo specifica l'URL del file principale dell'applet da eseguire. I file delle Applet devono avere l'estensione <code>.class</code>. L'URL specificato può essere relativo all'attributo <code>codebase</code>.</dd> + <dt>{{htmlattrdef("codebase")}}</dt> + <dd>Questo attributo l'URL (assoluto o relativo) della cartella che contiene i file <code>.class</code> specificati nell'attributo <code>code</code>.</dd> + <dt>{{htmlattrdef("datafld")}}</dt> + <dd>Questo attributo, supportato a partire dalla versione 4 di Internet Explorer, specifica il nome della colonna dell'oggetto di origine che fornisce i dati associati. Questo attributo potrebbe essere usato per specificare i vari elementi {{HTMLElement("param")}} passati all'applet Java.</dd> + <dt>{{htmlattrdef("datasrc")}}</dt> + <dd>Come <code>datafld</code>, questo attributo è usato per associare i dati in Internet Explorer 4. Indica l'id dell'oggetto di origine che fornisce i dati associati agli elementi {{HTMLElement("param")}} associati all'applet.</dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd>Questo attributo specifica l'altezza dell'applet, in pixel.</dd> + <dt>{{htmlattrdef("hspace")}}</dt> + <dd>Questo attributo specifica quanto spazio, in pixel, lasciare ai lati dell'applet.</dd> + <dt>{{htmlattrdef("mayscript")}}</dt> + <dd>In Netscape, questo attributo permette l'accesso all'applet da parte degli scipt inclusi nella pagina.</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>Questo attributo assegna un nome all'applet, cos' che possa essere identificata da altri script.</dd> + <dt>{{htmlattrdef("object")}}</dt> + <dd>Questo attributo specifica l'URL della rappresentazione serializzata dell'applet.</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>Questo attributo, definito a partire dalla versione 4 di Internet Explorer, specifica l'URL di un file associato all'applet. Il suo significato e il suo utilizzo è poco chiaro e non è parte di nessuno standard HTML.</dd> + <dt>{{htmlattrdef("vspace")}}</dt> + <dd> + <div>Questo attributo specifica quanto spazio, in pixel, lasciare sopra e sotto l'applet.</div> + </dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>Questo attributo specifica la larghezza dell'applet, in pixel.</dd> +</dl> + +<h2 id="Esempio">Esempio</h2> + +<pre class="brush: html"><applet code="gioco.class" align="left" archive="gioco.zip" height="250" width="350"> + <param name="difficoltà" value="facile"> + <b>Per usare questo gioco è necessario Java.</b> +</applet> +</pre> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mini</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Note">Note</h2> + +<ul> + <li>La specifica del W3C scoraggia l'uso del tag <code><strong><applet></strong></code> in favore dell'elemento {{HTMLElement("object")}}.</li> + <li>Questo elemento è deprecato nella versione strict dell'HTML 4.01 e obsoleto in HTML 5.</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/it/web/html/element/area/index.html b/files/it/web/html/element/area/index.html new file mode 100644 index 0000000000..04e90cebd6 --- /dev/null +++ b/files/it/web/html/element/area/index.html @@ -0,0 +1,191 @@ +--- +title: <area> +slug: Web/HTML/Element/area +translation_of: Web/HTML/Element/area +--- +<h2 id="Sommario">Sommario</h2> + +<p>L'elemento HTML<em> </em><code><area></code><em> </em>definisce una regione accessibile su di un immagine, e opzionalmente viene associata con un collegamento ipertestuale. Questo elemento è usato solo con l'elemento {{HTMLElement("map")}}.</p> + +<ul class="htmlelt"> + <li><dfn><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Aree tematiche</a></dfn> <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contenuti di flusso</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">contenuto delle espressioni</a>.</li> + <li><dfn>Contenuto consentito</dfn> Vuoto; è un elemento nullo.</li> + <li><dfn>Omissione Tag</dfn> Nessuna, sia il tag di apertura, sia quello di chiusura sono obbligatori.</li> + <li><dfn>Elementi padre consentiti</dfn> Qualsiasi elemento che accetta <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">contenuto delle espressioni</a>. L'elemento <code><area></code> deve avere un antenato {{HTMLElement("map")}}, ma che non necessita essere un genitore diretto.</li> + <li><dfn>Interfaccia DOM</dfn> {{domxref("HTMLAreaElement")}}</li> +</ul> + +<h2 id="Attributi">Attributi</h2> + +<p><span style="line-height: 21px;">Questo elemento include gli </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">attributi globali</a><span style="line-height: 21px;">.</span></p> + +<dl> + <dt>{{htmlattrdef("accesskey")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}</dt> + <dd>Specifica un acceleratore per la navigazione da tastiera per l'elemento. Premendo ALT, o una chiave simile, e contemporaneamente uno specifico carattere, si seleziona il comportamento correlato con quella specifica sequenza digitata. Chi disegna la pagina deve evitare sequenze riservate al browser. Questo attributo è globale a partire dalle specifiche HTML5.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("alt")}}</dt> + <dd>Una stringa di testo alternativa da visualizzare sui browser che non mostrano le immagini. Il testo dovrebbe essere tale da garantire all'utente lo stesso tipo di scelte che avrebbe visualizzando l'immagine senza il testo alternativo. In HTML4, questo attributo è necessario, ma potrebbe essere anche una stringa vuota (""). In HTML5, questo attributo è richiesto solo se presente l'attributo<strong> href</strong>.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("coords")}}</dt> + <dd>Una serie di valori che specificano le coordinate di una regione selezionabile. Il numero ed il significato dei valori dipendono dal valore specificato per l'attributo <strong>shape</strong>. Per un <code>rect</code> o forma rettangolare, il valore di <strong>coords</strong> consiste in due coppie x,y: sinistra, su, destra e giù. Per un <code>circle</code> o forma circolare, i valori sono <code>x,y,r</code> dove <code>x,y</code> è la coppia di coordinate che specifica il centro del cerchio e <code>r</code> è il valore del raggio. Per un <code>poly</code> o forma poligonale, il valore è un insieme di coppie x,y per ogni punto nel poligono: <code>x1,y1,x2,y2,x3,y3,</code> ecc... In HTML4, i valori sono il numero di pixels o una percentuale, se il numero è seguito dal relativo simbolo (%); in HTML5, i valori sono il numero dei pixel CSS.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("href")}}</dt> + <dd>L'obiettivo del collegamento ipertestuale dell'area. Il suo valore è un URL valido. In HTML4, sia questo che l'attibuto <strong>nohref</strong> devono essere presenti nell'elemento. In HTML5, questo attributo può essere omesso; se così fosse, l'elemento area non rappresenta un collegamento ipertestuale.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("hreflang")}} {{HTMLVersionInline("5")}}</dt> + <dd>Indica la lingua della risorsa linkata. I valori consentiti sono determinati dal <a class="external" href="http://www.ietf.org/rfc/bcp/bcp47.txt" title="http://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a>. Questo attributo si può utilizzare se contestualmente presente l'attributo <strong>href</strong>.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("name")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}</dt> + <dd>Definisce un nome per l'area selezionabile così da poterci eseguire uno script da parte dei vecchi browser.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("media")}} {{HTMLVersionInline("5")}}</dt> + <dd>Un suggerimento in merito al mezzo di comunicazione per il quale la risorsa è stata disegnata, ad esempio <code>print </code>(stampa) o <code>screen</code>. (schermo). Se omesso, di default viene settato su <code>all </code>(tutti). Utilizzare questo attributo solo se contestualmente presente <strong>href</strong>.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("nohref")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}</dt> + <dd>Indica che non esiste un collegamento ipertestuale in associazione all'area. <span id="result_box" lang="it"><span class="hps">O questo</span> <span class="hps">attributo o</span> <span class="hps">l'attributo</span> <strong><span class="hps">href</span></strong> <span class="hps">deve essere presente</span> <span class="hps">nell'elemento</span><span>.</span></span> + <div class="note"> + <p><strong>Note d'uso: </strong>Questo attributo è obsoleto in HTML5, in quanto è sufficiente omettere l'attributo <strong>href</strong>.</p> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("rel")}} {{HTMLVersionInline("5")}}</dt> + <dd>Per le ancore che contengono l' attributo <strong>href</strong>, questo attributo specifica la relazione tra l' oggetto di destinazione e l' oggetto del collegamento. Il valore è una lista di valori di relazione separata da spazi. I valori e la loro semantica saranno registrati da qualche autorità che potrebbe avere senso per l' autore del documento. La relazione di default, se nessun altra è stata impostata, è void (vuoto/nullo). Usare questo attributo solo se presente l' attributo <strong>href</strong>.</dd> + <dt>{{htmlattrdef("shape")}}</dt> + <dd>La forma della regione selezionabile associata. Le specifiche per l'HTML 5 e l'HTML 4 definiscono i valori <code>rect</code>, che definisce una regione rettangolare; <code>circle</code>, che definisce una regione circolare; <code>poly</code>, che definisce un generico poligono; e <code>default</code>, che indica l'intera regione al di là della forma definita. Molti browser, in particolare Internet Explorer 4 e superiori, supportano <code>circ</code>, <code>polygon</code>, e <code>rectangle</code> come valori validi per <strong>shape</strong>; questi valori sono {{Non-standard_inline}}.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("tabindex")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}</dt> + <dd>Un valore numerico che specifica la posizione nella tabulazione ordinata definita nel browser. Questo è un attributo globale in HTML5.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("target")}}</dt> + <dd>Questo attributo specifica dove deve essere visualizzata la risorsa linkata. In HTML4, questo è il nome, o una parola chiave, per una cornice (frame). In HTML5, è il nome, o parola chiave, di un contesto di navigazione (<em>browsing context</em> )(per esempio, ettichetta, finestra o frame in linea). Le seguenti parole chiave hanno uno speciale significato: + <ul> + <li><code>_self</code>: Carica la risposta nella medesima cornice HTML4 (o contesto di navigazione HTML5) come quella attuale. Questo valore è impostato di default se l' attributo non è specificato.</li> + <li><code>_blank</code>: Carica la risposta in una nuova finestra senza nome nella finestra HTML4 o un nuovo contesto di navigazione HTML5.</li> + <li><code>_parent</code>: Carica la risposta nel frameset genitore del frame corrente in HTML4 oppure il contesto di navigazione genitore del corrente in HTML5. Se non ci fosse il genitore, questa opzione si comporta allo stesso modo di <code>_self</code>.</li> + <li><code>_top</code>: In HTML4: Carica la risposta dentro la finestra originale completa, cancellando gli altri frame. In HTML5: Carica la risposta nel primo livello del contesto di navigazione (cioè, il contesto di navigazione che è un antenato di quello corrente, e non ha padre). Se non ha padre, il comportamento di questa opzione coincide con <code>_self</code>.</li> + </ul> + Usa questo attributo solo se presente l' attributo <strong>href</strong>.</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd><span id="result_box" lang="it"><span class="hps">Questo attributo specifica il</span> <span class="hps">tipo di supporto</span><span>, sotto forma di</span> <span class="hps">un tipo MIME</span> <span class="hps">per la</span> <span class="hps">destinazione del collegamento</span></span>. <span id="result_box" lang="it"><span class="hps">In generale</span><span>,</span> <span class="hps">questo è fornito</span> <span class="hps">esclusivamente come</span> <span class="alt-edited hps">informazione</span> <span class="alt-edited hps">consultiva</span></span>; tuttavia, in futuro un browser potrebbe aggiungere una picco icona per i tipi multimediali. Per esempio, un browser potrebbe aggiungere una piccola icona con un microfono queando il tipo è settato come audio/wav. Per una lista completa dei tipi MIME riconosciuti, consulta <a class="external linkification-ext" href="http://www.w3.org/TR/html4/references.html#ref-MIMETYPES" title="Linkification: http://www.w3.org/TR/html4/references.html#ref-MIMETYPES">http://www.w3.org/TR/html4/references.html#ref-MIMETYPES</a>. Usa questo attributo solo se presente l' attributo <strong>href</strong>.</dd> +</dl> + +<h2 id="Esempio">Esempio</h2> + +<pre class="brush: html"><map name="primary"> + <area shape="circle" coords="200,250,25" href="another.htm" /> + <area shape="default" nohref /> +</map> +</pre> + +<h2 id="Specifications" name="Specifications">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-map-element.html#the-area-element', '<area>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'the-area-element.html#the-area-element', '<area>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.6.1', '<area>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_dei_Browser">Compatibilità dei Browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mini</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Note">Note</h2> + +<ul> + <li>Nelle specifiche HTML 3.2, 4.0, e 5, il tag di chiusura <code></area></code> è proibito.</li> + <li>Le specifiche XHTML 1.0 richiedono una barra finale: <code><area /></code>.</li> + <li>Gli attributi <strong>id</strong>, <strong>class</strong>, e <strong>style</strong> hanno il medesimo significato attribuito nelle specifiche HTML 4, ma vengono definiti solo da Netscape e Microsoft.</li> + <li>I browser Netscape di livello 1 non interpretano l'attributo <strong>target</strong> quando riferito ad un frame.</li> + <li>HTML 3.2 definisce solo <strong>alt</strong>, <strong>coords</strong>, <strong>href</strong>, <strong>nohref</strong>, e <strong>shape</strong>.</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/it/web/html/element/article/index.html b/files/it/web/html/element/article/index.html new file mode 100644 index 0000000000..cdf8b222dc --- /dev/null +++ b/files/it/web/html/element/article/index.html @@ -0,0 +1,119 @@ +--- +title: <article> +slug: Web/HTML/Element/article +translation_of: Web/HTML/Element/article +--- +<p>L'<em>elemento HTML <code><article></code></em> rappresenta una composizione autocontenuta in un documento, una pagina, un'applicazione, o un sito, intesa per essere distribuita indipendentemente o riutilizzata, per esempio, nell'aggregazione. Esempi sono un articolo su un forum, un articolo di rivista o di giornale, un articolo su un blog, un commento inserito da un utente, un widget o un gadget interattivi, o qualsiasi altro contenuto indipendente. Ogni <em><code><article></code></em> dovrebbe essere identificato, generalmente, includendo un'intestazione (elementi <code><a href="http://www.w3.org/html/wg/drafts/html/master/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h1</a></code>-<code><a href="http://www.w3.org/html/wg/drafts/html/master/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h6</a></code>) come figlia dell'elemento <em><code><article></code></em>.</p> + +<div class="note"> +<p><strong>Note d'uso:</strong></p> + +<ul> + <li>Quando un elemento <code><article></code> è annidato, l'elemento più interno rappresenta un articolo collegato all'elemento più esterno. Per esempio, i commenti di un articolo su un blog possono essere elementi <code><article></code> annidati nell'elemento <code><article></code> che rappresenta il post sul blog.</li> + <li>Le informazioni sull'autore di un elemento <code><article></code> possono essere fornite attraverso l'elemento {{HTMLElement("address")}}, ma non si applicano agli elementi<code><article></code> annidati.</li> + <li>La data e l'ora di pubblicazione di un elemento <code><article></code> possono essere descritte usando l'attributo {{htmlattrxref("pubdate", "time")}} di un elemento {{HTMLElement("time")}}.</li> +</ul> +</div> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categorie di contenuti</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">flow content</a>, sectioning content, palpable content.</li> + <li><dfn>Contenuti consentiti</dfn><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">flow content</a>.</li> + <li><dfn>Omissione del tag</dfn> {{no_tag_omission}}</li> + <li><dfn>Elementi genitore permessi</dfn>Qualsiasi elemento che accetti <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="https://developer.mozilla.org/en/HTML/Content_categories#Flow_content">contenuto di flusso</a>. Notare che un elemento <code><article></code> non deve essere un discendente di un elemento {{HTMLElement("address")}}.</li> + <li><dfn>Interfaccia DOM</dfn> {{domxref("HTMLElement")}}</li> +</ul> + +<h2 id="Attributi">Attributi</h2> + +<p><span style="line-height: 21px;">Questo elemento include solamente gli </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">attributi globali</a><span style="line-height: 21px;">.</span></p> + +<h2 id="Esempio">Esempio</h2> + +<pre class="brush: html"><article> + <h4>Un articolo veramente fantastico</h4> + <p>Un sacco di testo fantastico.</p> +</article> +</pre> + +<h2 id="Specifications" name="Specifications">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-article-element', '<article>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-article-element', '<article>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>5</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>9.0</td> + <td>11.10</td> + <td>4.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>2.2</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>9.0</td> + <td>11.0</td> + <td>5.0 (iOS 4.2)</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>Altri elementi correlati alle sezioni: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}</li> + <li class="last"><a href="https://developer.mozilla.org/en-US/docs/Sections_and_Outlines_of_an_HTML5_document">Sezioni e indici nei documenti HTML5</a>.</li> +</ul> + +<p>{{ HTMLRef }}</p> diff --git a/files/it/web/html/element/aside/index.html b/files/it/web/html/element/aside/index.html new file mode 100644 index 0000000000..0aa21273e5 --- /dev/null +++ b/files/it/web/html/element/aside/index.html @@ -0,0 +1,134 @@ +--- +title: <aside> +slug: Web/HTML/Element/aside +tags: + - Elemento + - HTML + - HTML5 + - Reference + - Référence(2) + - Web +translation_of: Web/HTML/Element/aside +--- +<h2 id="Sommario">Sommario</h2> + +<p>L'<em>elemento HTML <aside></em> rappresenta una sezione della pagina il cui contenuto è connesso solo marginalmente al resto della pagina, e che dovrebbe essere considerato separato dal resto del contenuto. Queste sezioni sono spesso usate come sidebar. Spesso contengono delle definizioni, come un glossario, ma potrebbero esserci anche altri tipi di informazioni: pubblicità, la biografia dell'autore, applicazioni, informazioni sul profilo o link correlati al contenuto.</p> + +<div class="note"> +<p><em>Note d'uso:</em></p> + +<ul> + <li>Si sconsiglia di usare l'elemnto <code><aside></code> element per contenere del testo tra parentesi, in quanto è considerato parte del flusso principale.</li> +</ul> +</div> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categorie di contenuti</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contenuti di flusso</a>, <a href="/en-US/docs/HTML/Content_categories#Sectioning_content">contenuti di sezionamento</a>, contenuto palpabili.</li> + <li><dfn>Contenuti permessi</dfn><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contenuti di flusso</a>.</li> + <li><dfn>Omissione del tag</dfn> No, sono neccessari sia il tag di apertura che di chiusura.</li> + <li><dfn>Elementi genitore permessi</dfn> Qualsiasi elemento che accetti <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">cntenuti di flusso</a>. Notare che un elemento <aside> non può essere discendente di un elemento {{HTMLElement("address")}}.</li> + <li><dfn>Interfaccia DOM</dfn> {{domxref("HTMLElement")}}</li> +</ul> + +<h2 id="Attributi">Attributi</h2> + +<p><span style="line-height: 21px;">Questo elemento include solo gli </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">attributi globali</a><span style="line-height: 21px;">.</span></p> + +<h2 id="Esempi">Esempi</h2> + +<pre class="brush: html"><article> + <p> + Il film della Disney <em>La Sirenetta</em> è stato + proiettato per la prima volta nel 1989. + </p> + <aside> + Il film incassò 87 milioni di dollari durante la distribuzione iniziale. + </aside> + <p> + Altre informazioni sul film ... + </p> +</article> +</pre> + +<h2 id="Specifications" name="Specifications">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-aside-element', '<aside>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-aside-element', '<aside>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatiblità_con_i_browser">Compatiblità con i browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>5</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>9.0</td> + <td>11.10</td> + <td>4.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>2.2</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>9.0</td> + <td>11.0</td> + <td>5.0 (iOS 4.2)</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>Altri elementi correlati alle sezioni: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li> + <li><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sezioni e indici nei documenti HTML5</a>.</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/it/web/html/element/audio/index.html b/files/it/web/html/element/audio/index.html new file mode 100644 index 0000000000..6db5d9f699 --- /dev/null +++ b/files/it/web/html/element/audio/index.html @@ -0,0 +1,341 @@ +--- +title: <audio> +slug: Web/HTML/Element/audio +translation_of: Web/HTML/Element/audio +--- +<h2 id="Sommario">Sommario</h2> + +<p>L'elemento HTML <strong><code><audio></code></strong> viene usato per incorporare contenuti sonori nei documenti. Può contenere diverse origini dell'audio, rappresentate usando l'attributo {{htmlattrxref("src", "audio")}} o l'elemento {{HTMLElement("source")}}; il browser sceglierà il più adatto.</p> + +<p>Si può anche aggiungere del contenuto per i browser che non supportano l'elemento <code><audio></code>.</p> + +<p>Si possono usare direttamente le <a href="/it/docs/Web/API/Web_Audio_API">Web Audio API</a> per generare e manipolare l'audio tramite il codice JavaScript.</p> + +<ul class="htmlelt"> + <li><dfn><a href="/it/docs/Web/HTML/Content_categories">Categorie del contenuto</a></dfn> <a href="/it/docs/Web/HTML/Content_categories#Flow_content">Contenuto di flusso</a>, contenuto delle espressioni, contenuto incluso. Se ha l'attributo {{htmlattrxref("controls", "audio")}}: contenuto interattivo e contenuto tangibile.</li> + <li><dfn>Contenuto permesso</dfn>Se l'elemento ha l'attributo {{htmlattrxref("src", "audio")}}: zero o più elementi {{HTMLElement("track")}}, seguiti da contenuto trasparente che non contenga elementi {{HTMLElement("audio")}} e {{HTMLElement("video")}}.</li> + <li>Altrimenti: zero o più elementi {{HTMLElement("source")}}, seguiti da zero o più elementi {{HTMLElement("track")}}, seguiti da contenuto trasparente che non contenga elementi {{HTMLElement("audio")}} e {{HTMLElement("video")}}.</li> + <li><dfn>Omissione dei tag</dfn> {{no_tag_omission}}</li> + <li><dfn>Elementi genitore permessi</dfn> Qualsiasi elemento che accetti contenuto incluso.</li> + <li><dfn>Interfaccia DOM</dfn> {{domxref("HTMLAudioElement")}}</li> +</ul> + +<h2 id="Attributi">Attributi</h2> + +<p>Questo elemento supporta gli <a href="/it/docs/Web/HTML/Global_attributes">attributi globali</a>.</p> + +<ul> + <li><strong><code>none</code></strong>: indica che probabilmente l'audio non verrà ascoltato dall'utente o che il selver vuole minimizzare il traffico; in altre parole l'audio non dovrebbe essere precaricato;</li> + <li><strong><code>metadata</code></strong>: indica che probabilmente l'audio non verrà ascoltato, ma potrebbero essere utili i metadati relativi ad esso;</li> + <li><strong><code>auto</code></strong>: lascia al browser la scelta se caricare o no l'audio.</li> +</ul> + +<dl> + <dt>{{htmlattrdef("autoplay")}}</dt> + <dd>Un attributo Boleano; se specificato (anche se con valore <code>false</code>!), l'audio partirà automaticamente il prima possiblie senza fermarsi per caricare i dati.</dd> + <dt>{{htmlattrdef("autobuffer")}} {{obsolete_inline("2.0")}}</dt> + <dd>Un attributo Boleano; se specificato, l'audio verrà subito scaricato, anche se non viene impostato l'attributo {{htmlattrxref("autoplay", "audio")}}, e continuerà finché la cache ad esso destinata non è piena o non ha finito di scaricarsi. Quindi questo attributo dovrebbe essere usato solo se ci si aspetta che l'utente faccia partire l'audio in un secondo momento.</dd> + <dd>Questo attributo è stato rimosso in Gecko 2.0 {{geckoRelease("2.0")}}, a favore dell'attributo {{htmlattrxref("preload", "audio")}}.</dd> + <dt>{{htmlattrdef("buffered")}}</dt> + <dd>Un attributo che si può leggere per sapere quali parti dell'audio sono state scaricate. Questo attributo contiene un oggetto {{domxref("TimeRanges")}}.</dd> + <dt>{{htmlattrdef("controls")}}</dt> + <dd>Un attributo Boleano; se specificato, il browser offrirà dei controlli per l'audio, inclusi il volume e i pulsanti pausae play.</dd> + <dt>{{htmlattrdef("loop")}}</dt> + <dd>Un attributo Boolano; se specificato, l'audio ripartirà automaticamente dall'inizio appena terminato.</dd> + <dt>{{htmlattrdef("mozCurrentSampleOffset")}} {{gecko_minversion_inline("2.0")}} {{non-standard_inline}}</dt> + <dd>The offset, specified as the number of samples since the beginning of the audio stream, at which the audio is currently playing.</dd> + <dt>{{htmlattrdef("muted")}}</dt> + <dd>Un attributo Boleano che indica se l'audio deve essere inizialmente muto.</dd> + <dt>{{htmlattrdef("played")}}</dt> + <dd>Un oggetto {{domxref("TimeRanges")}} che indica quali parti dell'audio sono state riprodotte.</dd> + <dt>{{htmlattrdef("preload")}}</dt> + <dd>Lo scopo di questo attributo è suggerire al browser se caricare subito o no la traccia audio. Può assumere uno dei seguenti valori:</dd> + <dd> + <p>Se non impostato, il valore predefinito è scelto dal browser, ma la specifica suggerisce <code>metadata</code>.</p> + + <div class="note"><strong>Note:</strong> + + <ul> + <li>L'attributo <code>autoplay</code> ha la precedenza rispetto a questo: se l'audio deve partire subito, il browser deve ovviamente scaricarlo. Comunque è permesso impostare entrambi gli attributi <code>autoplay</code> e <code>preload</code>.</li> + <li>La specifica non obbliga i browser a seguire il valore di questo attributo; è da considerare solo come un suggerimento.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>L'URL dell'audio da includere. È opzionale: si può sostituire con gli elementi {{HTMLElement("source")}} figli dell'elemento <strong><code><audio></code></strong><code>.</code> + <div> </div> + + <div> + <div class="note"><strong>Nota:</strong> L'URL indicato è soggetto al <a href="/it/docs/HTTP_access_control">controllo di origine HTTP</a>.</div> + </div> + </dd> + <dt>{{htmlattrdef("volume")}}</dt> + <dd>Il volume della traccia audio, compreso tra 0.0 (silenzioso) e 1.0 (massimo).</dd> +</dl> + +<p>Gli intervalli di tempo sono specificati come numeri decimali indicanti il numero di secondi da saltare.</p> + +<div class="note"><strong>Nota:</strong> La definizione dei valori degli intervalli di tempo non è ancora completa nella specifica HTML5 e potrebbe cambiare.</div> + +<h2 id="Eventi">Eventi</h2> + +<p>Un elemento <strong><code><audio></code></strong> diversi <a href="/it/docs/Web/Guide/Events/Media_events">eventi</a>.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Uso_di_base">Uso di base</h3> + +<pre class="brush: html"><!-- Un semplice audio --> +<audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" autoplay> + Il tuo browser non supporta l'elemento <code>audio</code>. +</audio> + +<!-- Audio con sottotitoli --> +<audio src="foo.ogg"> + <track kind="captions" src="foo.en.vtt" srclang="en" label="English"> + <track kind="captions" src="foo.it.vtt" srclang="it" label="Italiano"> +</audio> +</pre> + +<h3 id="Audio_con_elementi_<source>">Audio con elementi <code><source></code></h3> + +<pre class="brush: html"><audio controls="controls"> + Il tuo browser non supporta l'elemento <code>audio</code>. + <source src="foo.wav" type="audio/wav"> +</audio> +</pre> + +<h2 id="Specifications" name="Specifications">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-video-element.html#the-audio-element', '<audio>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-audio-element', '<audio>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>3.0</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9.0</td> + <td>10.5</td> + <td>3.1</td> + </tr> + <tr> + <td>attributo <code>autoplay</code></td> + <td>3.0</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9.0</td> + <td>10.5</td> + <td>3.1</td> + </tr> + <tr> + <td><span style="font-size: 12px; line-height: 18px;">attributo </span><code>buffered</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><span style="font-size: 12px; line-height: 18px;">attributo </span><code>controls</code></td> + <td>3.0</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9.0</td> + <td>10.5</td> + <td>3.1</td> + </tr> + <tr> + <td><span style="font-size: 12px; line-height: 18px;">attributo </span><code>loop</code></td> + <td>3.0</td> + <td>{{CompatGeckoDesktop("11.0")}}</td> + <td>9.0</td> + <td>10.5</td> + <td>3.1</td> + </tr> + <tr> + <td><span style="font-size: 12px; line-height: 18px;">attributo </span><code>muted</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("11.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><span style="font-size: 12px; line-height: 18px;">proprietà </span><code>played</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("15.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><span style="font-size: 12px; line-height: 18px;">attributo </span><code>preload</code></td> + <td>3.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>9.0</td> + <td>Supported under the older name <code>autobuffer</code></td> + <td>3.1</td> + </tr> + <tr> + <td><span style="font-size: 12px; line-height: 18px;">attributo </span><code>src</code></td> + <td>3.0</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9.0</td> + <td>10.5</td> + <td>3.1</td> + </tr> + <tr> + <td><span style="font-size: 12px; line-height: 18px;">attributo </span><code>volume</code></td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><span style="font-size: 12px; line-height: 18px;">attributo </span><code>autoplay</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><span style="font-size: 12px; line-height: 18px;">attributo </span><code>buffered</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><span style="font-size: 12px; line-height: 18px;">attributo </span><code>controls</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><span style="font-size: 12px; line-height: 18px;">attributo </span><code>loop</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("11.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><span style="font-size: 12px; line-height: 18px;">attributo </span><code>muted</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("11.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><span style="font-size: 12px; line-height: 18px;">proprietà </span><code>played</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("15.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><span style="font-size: 12px; line-height: 18px;">attributo </span><code>preload</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><span style="font-size: 12px; line-height: 18px;">attributo </span><code>src</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><span style="font-size: 12px; line-height: 18px;">attributo </span><code>volume</code></td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + </tbody> +</table> +</div> + +<div class="note"><strong>Nota:</strong> Geko riproduce gli audio solo se il server li serve usando il corretto tipo MIME.</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li><a href="/it/docs/Media_formats_supported_by_the_audio_and_video_elements">Formati supportati dagli elementi <code><audio></code> e <code><video></code></a></li> + <li><a href="/it/docs/Web_Audio_API">Web Audio API</a></li> + <li>{{domxref("HTMLAudioElement")}}</li> + <li><a href="/it/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement"><code>nsIDOMHTMLMediaElement</code></a></li> + <li>{{htmlelement("source")}}</li> + <li>{{htmlelement("video")}}</li> + <li><a href="/it/docs/Using_HTML5_audio_and_video">Using audio and video</a></li> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#audio">L'elemento <code>audio</code></a> (specifica HTML5)</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/it/web/html/element/b/index.html b/files/it/web/html/element/b/index.html new file mode 100644 index 0000000000..4b766aac7e --- /dev/null +++ b/files/it/web/html/element/b/index.html @@ -0,0 +1,134 @@ +--- +title: <b> +slug: Web/HTML/Element/b +translation_of: Web/HTML/Element/b +--- +<h2 id="Sommario">Sommario</h2> + +<p>L'elemento HTML <code><strong><b></strong></code> rappresenta del testo stilisticamente diverso da quello normale, ma che ha la stessa importanza. Di solito è usato per evidenziare le parole chiave in un sommario, il nome dei prodotti nelle recensioni, o per evidenziare la frase più importante di un paragrafo o di un articolo.</p> + +<div class="note"> +<p><strong>Note:</strong></p> + +<ul> + <li>Non confondere l'elemento <code><strong><b></strong></code> con gli elementi {{HTMLElement("strong")}}, {{HTMLElement("em")}} o {{HTMLElement("mark")}}. L'elemento {{HTMLElement("strong")}} rappresenta del testo di una certa importanza, {{HTMLElement("em")}} attribuisce un po' di enfasi al testo e l'elemento {{HTMLElement("mark")}} evidenzia del testo rilevante.</li> + <li>Non evidenziare i titoli usando l'elemento <code><b></code>. Per questo scopo, usare i tag {{HTMLElement("h1")}}-{{HTMLElement("h6)")}}.</li> + <li>È una buona pratica usare l'attributo <code>class</code> con gli elementi <code><b></code>, così da attribuirgli maggior significato semantico (per esempio <code><b class="lead"></code> per la prima frase di un paragrafo). Ciò semplifica la modifca dello stile del testo senza dover cambiare il codice HTML.</li> + <li>Inizialmente l'unico scopo dell'elemento <code><b></code> era rendere il testo in grassetto. Siccome, a partire da HTML4, è deprecato inserire informazioni di stile nel codice HTML, il significato di questo elemento è cambiato.</li> + <li>Se l'elemento non ha nessun valore semantico, può essere meglio rendere il testo in grassetto usando la proprietà css <a href="/it/docs/CSS/font-weight">font-weight</a>.</li> +</ul> +</div> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categoria</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contenuto di flusso</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">contenuto di testo</a>, contenuto palpabile.</li> + <li><dfn>Contenuto permesso</dfn> <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Contenuto di testo</a>.</li> + <li><dfn>Omissione del tag</dfn> {{no_tag_omission}}</li> + <li><dfn>Elementi genitore permessi</dfn>Qualsiasi elemento che accetti <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">contenuto di testo</a></li> + <li><dfn>Interfaccia DOM</dfn> {{domxref("HTMLElement")}}. Fino a Gecko 1.9.2, Firefox implementava l'interfaccia {{domxref("HTMLSpanElement")}}.</li> +</ul> + +<h2 id="Attributi">Attributi</h2> + +<p>Questo elemento accetta solo gli <a href="/it/docs/HTML/Global_attributes">attributi globali</a>.</p> + +<h2 id="Esempio">Esempio</h2> + +<pre class="brush: html"><p> + Questo articolo descrive diversi elementi a <b>livello di testo</b>. Spiega il loro utilizzo in un documento <b>HTML</b>. +</p> +Le parole chiave sono mostrate con lo stile predefinito dell'elemento <code>b</code>, probabilmente in grassetto. +</pre> + +<h3 id="Risultato">Risultato</h3> + +<p>Questo articolo descrive diversi elementi a <strong>livello di testo</strong>. Spiega il loro utilizzo in un documento <strong>HTML</strong>.</p> + +<p>Le parole chiave sono mostrate con lo stile predefinito dell'elemento <code>b</code>, probabilmente in grassetto.</p> + +<h2 id="Specifications" name="Specifications">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-b-element', '<b>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-b-element', '<b>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '<b>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>Altri elementi riguardanti la <a href="/it/docs/HTML/Text_level_semantics_conveying_elements">semantica del testo</a>: {{HTMLElement("a")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("abbr")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li> + <li><a class="external" href="http://www.w3.org/International/questions/qa-b-and-i-tags">Using <b> and <i> elements (W3C)</a></li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/it/web/html/element/base/index.html b/files/it/web/html/element/base/index.html new file mode 100644 index 0000000000..6b7bb01ba8 --- /dev/null +++ b/files/it/web/html/element/base/index.html @@ -0,0 +1,137 @@ +--- +title: <base> +slug: Web/HTML/Element/base +translation_of: Web/HTML/Element/base +--- +<h2 id="Sommario">Sommario</h2> + +<p>L'elemento HTML <code><base></code> specifica l'URL di base al quale sono relativi tutti gli URL contenuti nel documento. Può esserci solo un tag <code><base></code> per pagina.</p> + +<p>L'URL di base di un documento può essere ottenuto dagli script usando {{domxref('document.baseURI')}}.</p> + +<div class="note"><strong>Nota:</strong> Se viene specificato più di un elemento <code><base></code>, vengono considerati solo il primo attributo <code>href</code> e il primo <code>target</code>, tutti gli altri vengono ignorati.</div> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categoria</a></dfn> Contenuto di metadati.</li> + <li><dfn>Contenuto permesso</dfn> Nessuno, è un {{Glossary("empty element", "elemento vuoto")}}.</li> + <li><dfn>Omissione del tag</dfn> Non ci deve essere il tag di chiusura.</li> + <li><dfn>Elementi genitore permessi</dfn> Qualsiasi elemento {{HTMLElement("head")}} che non contenga altri elementi {{HTMLElement("base")}}.</li> + <li><dfn>Interfaccia DOM</dfn> {{domxref("HTMLBaseElement")}}</li> +</ul> + +<h2 id="Attributi">Attributi</h2> + +<p>Questo elemento include gli <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">attributi globali</a><span style="line-height: 21px;">.</span></p> + +<dl> + <dt>{{htmlattrdef("href")}}</dt> + <dd>L'URL di base da usare nel documento per risolvere gli indirizzi URL relativi. Se questo attributo viene specificato, questo elemento deve precedere ogni elemento il cui valore è un URL relativo.</dd> + <dt>{{htmlattrdef("target")}}</dt> + <dd>Questo attributo specifica dove deve essere visualizzata la risorsa linkata. In HTML4, questo è il nome, o una parola chiave, per una cornice (frame). In HTML5, è il nome, o parola chiave, di un contesto di navigazione (<em>browsing context</em>) (per esempio un'ettichetta, una finestra o un frame in linea). Le seguenti parole chiave hanno uno speciale significato: + <ul> + <li><code>_self</code>: Carica il documento nello stesso frame. Questo è il valore predefinito.</li> + <li><code>_blank</code>: Carica il documento in una nuova finestra.</li> + <li><code>_parent</code>: Carica il documento nel frameset genitore del frame corrente. Se non c'è il genitore, questa opzione si comporta allo stesso modo di <code>_self</code>.</li> + <li><code>_top</code>: Carica il documento dentro la finestra originale completa (la scheda del browser), cancellando gli altri frame. Se non c'è il genitore, questa opzione si comporta allo stesso modo di <code style="font-style: normal;">_self</code>.</li> + </ul> + </dd> +</dl> + +<h2 id="Esempio">Esempio</h2> + +<pre class="brush: html"><base target="_blank" href="http://www.example.com/public/"> +<a href="/index.html">Home</a> +</pre> + +<p>In questo esempio, quando l'utente clicca su link "Home", verrà aperta la pagina <code>http://www.example.com/public/index.html</code> in una nuova scheda.</p> + +<h2 id="Specifications" name="Specifications">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-base-element', '<base>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata#the-base-element', '<base>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.4', '<base>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<p>Notare che HTML 2.0 e 3.2 definiscono solo l'attributo <code>href</code>.</p> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Note">Note</h2> + +<ul> + <li>Il supporto per gli URL relativi è stato aggiunto in Gecko 2.0 (Firefox 4.0).</li> + <li>Nelle versione precedenti a Internet Explorer 7, il tag <code><base></code> poteva essere posizionato ovunque nel documento e veniva considerato il più vicino.</li> + <li>In Internet Explorer 8, è stato rimosso il supporto agli URL relativi.</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/it/web/html/element/basefont/index.html b/files/it/web/html/element/basefont/index.html new file mode 100644 index 0000000000..d6a0af0995 --- /dev/null +++ b/files/it/web/html/element/basefont/index.html @@ -0,0 +1,103 @@ +--- +title: <basefont> +slug: Web/HTML/Element/basefont +translation_of: Web/HTML/Element/basefont +--- +<div>{{obsolete_header}}</div> + +<h2 id="Sommario">Sommario</h2> + +<p>L'elemento HTML <code><basefont></code> definisce lo stile predefinito del testo di un documento. Questo stile può essere modificato usando gli elementi {{HTMLElement("font")}}.</p> + +<div class="note"> +<p><strong><em>Note:</em></strong></p> + +<ul> + <li><strong>Non usare questo elemento!</strong> Anche se definito (più o meno) in HTML 3.2, non è supportato nella maggior parte dei browser. Inoltre non è mai stato implementato nello stesso modo: usarlo ha sempre portato a risultati inaspettati.</li> + <li>L'elemento <code><basefont></code> è deprecato da quando sono deprecati tutti gli altri elementi riguardanti lo stile (quindi a partire da HTML 4). In HTML 5 è stato rimosso completamente. È quindi consigliato definire lo stile usando solo il <a href="/it/docs/CSS">CSS</a> (nello specifico le proprietà CSS Fonts)</li> +</ul> +</div> + +<h2 id="Attributi">Attributi</h2> + +<p>Questo elemento supporta gli <a href="/it/docs/HTML/Global_attributes">attributi globali</a>.</p> + +<dl> + <dt>{{htmlattrdef("color")}}</dt> + <dd>Questo attributo imposta il colore del testo usando il nome di un colore o un colore specificato usando il formato <code>#RRGGBB</code>.</dd> + <dt>{{htmlattrdef("face")}}</dt> + <dd>Questo attributo contiene una lista di nomi di font. Il testo del documento viene mostrato usando il primo colore della lista, se disponibile, altimenti il secondo, e così via. Se nessuno dei font indicati è disponibile, viene usato il font predefinito del browser.</dd> + <dt>{{htmlattrdef("size")}}</dt> + <dd>Questo attributo specifica la dimensione, come valore numerico o relativo, del testo. I valori numerici possono variare da 1 (il più piccolo) a 7 (il più grande); il valore predefinito è 3.</dd> +</dl> + +<h2 id="Interfaccia_DOM">Interfaccia DOM</h2> + +<p>Questo elemento implementa l'interfaccia {{domxref("HTMLBaseFontElement")}}.</p> + +<h2 id="Esempio">Esempio</h2> + +<pre><basefont color="#FF0000" face="Helvetica" size="+2" /> +</pre> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Note">Note</h2> + +<ul> + <li>HTML 3.2 supporta solo l'attributo <code>size</code>.</li> + <li>Questo elemento non è permesso dalle specifiche HTML strict e XHTML.</li> + <li>Nonostante sia parte degli standard <em>transitional</em>, alcuni browser focalizzati sugli standard come Mozilla e Opera non supportano questo elemento.</li> + <li>Questo elemento può essere imitato utilizzando le proprietà css applicate all'elemento {{HTMLElement("body")}}.</li> + <li>XHTML 1.0 richiede una barra al fondo di questo elemento: <code><basefont /></code>.</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/it/web/html/element/bdi/index.html b/files/it/web/html/element/bdi/index.html new file mode 100644 index 0000000000..340a68665c --- /dev/null +++ b/files/it/web/html/element/bdi/index.html @@ -0,0 +1,116 @@ +--- +title: <bdi> +slug: Web/HTML/Element/bdi +translation_of: Web/HTML/Element/bdi +--- +<h2 id="Sommario">Sommario</h2> + +<p>L'elemento HTML <code><bdi></code> (o elemento <em>Bi-Directional Isolation</em>) isola del testo che potrebbe essere formattato in una direzione differente da quello che lo circonda.</p> + +<p>Questo elemento è utile quando si incorpora del testo del quale non si conosce la direzione, ad esempio da un database.</p> + +<p>Anche se lo stesso effetto visuale può essere uttenuto usando la regola CSS {{cssxref("unicode-bidi")}}<code>: isolate</code> applicata a un elemento {{HTMLElement("span")}} o ad un altro elemento relativo alla formattazione del testo, solo l'elemento <code><bdi></code> ha significato semantico. Inoltre, i browser possono ignorare il CSS: il testo verrebbe visualizzato correttamente solo utilizzando questo tag.</p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categoria</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contenuto di flusso</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">contenuto testuale</a>, contenuto palpabile.</li> + <li><dfn>Contenuto permesso</dfn><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Flow_content">Contenuto testuale</a>.</li> + <li><dfn>Omissione del tag</dfn> {{no_tag_omission}}</li> + <li><dfn>Elementi genitore permessi</dfn> Qualsiasi elemento che accetta <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Flow_content">contenuto testuale</a>.</li> + <li><dfn>Interfaccia DOM</dfn> {{domxref("HTMLElement")}}</li> +</ul> + +<h2 id="Attributi">Attributi</h2> + +<p>Questo elemento supporta gli <a href="/it/docs/HTML/Global_attributes">attributi globali</a>, con una piccola differenza: l'attributo <code>dir</code> non viene ereditato. Se non impostato, il suo valore predefinito è <code>auto</code>, che permette al browser di decidere la direzione del testo basandosi sul contenuto dell'elemento.</p> + +<h2 id="Esempio">Esempio</h2> + +<pre class="brush: html"><p dir="ltr">Questa parola arabica <bdi>PAROLA_ARABICA</bdi> è automaticamente mostrata da destra verso sinistra.</p> +</pre> + +<h3 id="Risultato">Risultato</h3> + +<p>Questa parola arabica ACIBARA_ALORAP è automaticamente mostrata da destra a sinistra.</p> + +<h2 id="Specifications" name="Specifications">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-bdi-element', '<bdi>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'the-bdi-element.html#the-bdi-element', '<bdi>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>16</td> + <td>{{CompatGeckoDesktop("10.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("10.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 dir="ltr" id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>L'elemento {{HTMLElement("bdo")}};</li> + <li>Le proprietà CSS {{cssxref("direction")}} e {{cssxref("unicode-bidi")}}.</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/it/web/html/element/bdo/index.html b/files/it/web/html/element/bdo/index.html new file mode 100644 index 0000000000..336d229c58 --- /dev/null +++ b/files/it/web/html/element/bdo/index.html @@ -0,0 +1,128 @@ +--- +title: <bdo> +slug: Web/HTML/Element/bdo +translation_of: Web/HTML/Element/bdo +--- +<h2 id="Sommario">Sommario</h2> + +<p>L'elemento HTML <code><bdo></code> (o <em>bidirectional override</em>) viene usato per sovrascrivere la direzione corrente del testo. Viene ignorata la direzione dei caratteri in favore di quella specificata dallo sviluppatore.</p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categoria</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contenuto di flusso</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">contenuto testuale</a>, contenuto palpabile.</li> + <li><dfn>Contenuto permesso</dfn> <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Contenuto testuale</a>.</li> + <li><dfn>Omissione dei tag</dfn> {{no_tag_omission}}</li> + <li><dfn>Elementi genitore permessi</dfn>Qualsiasi elemento che accetta <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">contenuto testuale</a>.</li> + <li><dfn>Interfaccia DOM</dfn> {{domxref("HTMLElement")}}. Fino a Gexko 1.9.2, Firefox implementava l'interfaccia {{domxref("HTMLSpanElement")}}.</li> +</ul> + +<h2 id="Attributi">Attributi</h2> + +<p>Questo elemento include gli <a href="/it/docs/HTML/Global_attributes">attributi globali</a>.</p> + +<ul> + <li><code>ltr</code>: da sinistra a destra;</li> + <li><code>rtl</code>: da destra a sinistra;</li> + <li><code>auto:</code> il browser decide la direzione del testo in base al contenuto dell'elemento.</li> +</ul> + +<dl> + <dt>{{htmlattrdef("dir")}}</dt> + <dd>La direzione del testo in questo elemento. Può assumere uno dei seguenti valori:</dd> +</dl> + +<h2 id="Esempio">Esempio</h2> + +<pre class="brush: html"><!-- Cambia la direzione del testo --> +<p>Questo testo va da sinistra verso destra.</p> +<p><bdo dir="rtl">Questo testo va da destra verso sinistra.</bdo></p></pre> + +<h3 id="Result">Result</h3> + +<p>Questo testo va da sinistra verso destra.</p> + +<p><bdo>Questo testo va da destra verso sinistra.</bdo></p> + +<h2 id="Specifications" name="Specifications">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-bdo-element', '<bdo>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'the-bdo-element.html#the-bdo-element', '<bdo>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'dirlang.html#h-8.2.4', '<bdo>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Note">Note</h2> + +<p>L'HTML 4 non specifica nessun evento per questo elemento; sono stati aggiunti nell'XHTML. Probabilmente questa è stata solo una svista.</p> + +<p>{{HTMLRef}}</p> diff --git a/files/it/web/html/element/bgsound/index.html b/files/it/web/html/element/bgsound/index.html new file mode 100644 index 0000000000..d5a979a0f0 --- /dev/null +++ b/files/it/web/html/element/bgsound/index.html @@ -0,0 +1,101 @@ +--- +title: <bgsound> +slug: Web/HTML/Element/bgsound +translation_of: Web/HTML/Element/bgsound +--- +<div>{{non-standard_header}}</div> + +<h2 id="Sommario">Sommario</h2> + +<p>L'elemento HTML <code><bgsound> </code>(o <em>Background Sound</em>) è un elemento introdotto da Internet Explorer che riproduce un audio in sottofondo.</p> + +<div class="note"> +<p><strong>Non usarlo!<em> </em></strong>Per incorporare un audio in una pagina web, bosognerebbe usare l'elemento {{HTMLElement("audio")}}.</p> +</div> + +<h2 id="Attributi">Attributi</h2> + +<dl> + <dt>{{htmlattrdef("balance")}}</dt> + <dd>Questo attributo definisce come il volume deve essere diviso tra le casse. Il suo valore può variare da -10,000 (solo la cassa sinistra) a +10,000 (solo la cassa destra).</dd> + <dt>{{htmlattrdef("loop")}}</dt> + <dd>Questo attributo indica il numero di volte che l'audio deve essere riprodotto. Il suo valore può essere un numero intero o <code>infinite</code>.</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>Questo attributo specifica l'URL dell'audio da riprodurre, che deve essere di tipo <code>.wav</code>, <code>.au</code> o <code>.mid</code>.</dd> + <dt>{{htmlattrdef("volume")}}</dt> + <dd>Questo attributo specifica il volume dell'audio. il suo valore può variare tra -10,000 e 0.</dd> +</dl> + +<h2 id="Esempio">Esempio</h2> + +<pre class="brush:html"><bgsound src="sound1.mid"> + +<bgsound src="sound2.au" loop="infinite"> +</pre> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}} [1]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Fino a Firefox 22, anche se questo elemento non era supportato, veniva associato all'interfaccia {{domxref("HTMLSpanElement")}}. Questo bug è stato risolto e adesso viene utilizzata l'interfaccia {{domxref("HTMLUnknownElement")}}, come richiesto dalla specifica.</p> + +<h2 id="Note">Note</h2> + +<ul> + <li>In alcune versioni di Netscape, si può ottenere lo stesso effetto usando il tag {{HTMLElement("embed")}}.</li> + <li>Non essendo parte di nessuno standard, anche scrivendo questo elemento in un modo simile all'XHTML (<code><bgsound /></code>) il codice non sarà valido.</li> +</ul> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>L'elemento {{HTMLElement("audio")}}, che è lo standard per incorporare l'audio in un documento.</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/it/web/html/element/big/index.html b/files/it/web/html/element/big/index.html new file mode 100644 index 0000000000..65f4db341c --- /dev/null +++ b/files/it/web/html/element/big/index.html @@ -0,0 +1,99 @@ +--- +title: <big> +slug: Web/HTML/Element/big +translation_of: Web/HTML/Element/big +--- +<div>{{obsolete_header}}</div> + +<h2 id="Sommario">Sommario</h2> + +<p>L'elementho HTML <code><big></code> ingrandisce il testo di un livello (ad esempio, da piccolo a medio, o da grande a molto grande), fino alla dimensione massima permessa dal browser.</p> + +<div class="note"> +<p><strong>Nota: </strong>Siccome questo elemento è solo stilistico, è stato rimosso in <a href="/it/docs/Web/Guide/HTML/HTML5">HTML5</a> e non dovrebbe essere usato. Gli sviluppatori dovrebbero utilizzare la proprietà CSS {{cssxref("font-size")}}.</p> +</div> + +<h2 id="Attributi">Attributi</h2> + +<p>Questo elemento supporta solo gli <a href="/it/docs/HTML/global_attributes">attributi globali</a>, comuni a tutti gli elementi.</p> + +<h2 id="Esempio">Esempio</h2> + +<pre class="brush:xml"><p> + Questa è la prima frase. <big>Questa è scritta più grande.</big> +</p></pre> + +<p id="Example_2_(CSS_alternative)">Lo stesso effetto può essere ottenuto usando il CSS:</p> + +<pre class="brush:xml"><p> + Questa è la prima frase. <span style="font-size:1.2em">Questa è scritta più grande.</span> +</p></pre> + +<h3 id="Risultato">Risultato</h3> + +<p>Questa è la prima frase. <span style="font-size: 1.2em;">Questa è scritta più grande.</span></p> + +<h2 id="Interfaccia_DOM">Interfaccia DOM</h2> + +<p>Questo elemento implementa l'interfaccia {{domxref("HTMLElement")}}.</p> + +<div class="note"><strong>Nota: </strong>Fino a Gecko 1.9.2, Firefox implementava l'interfaccia {{domxref("HTMLSpanElement")}}.</div> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{HTMLElement("small")}}, {{HTMLElement("font")}}, {{HTMLElement("style")}}</li> + <li>La specifica HTML 4.01: <a class="external" href="http://www.w3.org/TR/html4/present/graphics.html#h-15.2">Font Styles</a></li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/it/web/html/element/blink/index.html b/files/it/web/html/element/blink/index.html new file mode 100644 index 0000000000..4f243a2e65 --- /dev/null +++ b/files/it/web/html/element/blink/index.html @@ -0,0 +1,112 @@ +--- +title: <blink> +slug: Web/HTML/Element/blink +translation_of: Web/HTML/Element/blink +--- +<div>{{Deprecated_header}} {{Non-standard_header}}</div> + +<h2 id="Sommario">Sommario</h2> + +<p>L'elemento HTML <code><blink></code> rende il testo lampeggiante.</p> + +<div class="warning"> +<p class="note"><strong>Attenzione:</strong> Non useare questo elemento, siccome non è standard ed è <strong>deprecato</strong>. Il testo lampeggiante è contro ogni standard di accessibilità, e la specifica CSS permette ai browser di utilizzare la proprietà <code>blink</code>.</p> +</div> + +<h2 id="Interfaccia_DOM">Interfaccia DOM</h2> + +<p>Siccome questo elemento non è supportato, deve implementare l'interfaccia {{domxref("HTMLUnknownElement")}}.</p> + +<h2 id="Esempio">Esempio</h2> + +<pre class="brush:html"><blink>Why would somebody use this?</blink> +</pre> + +<h3 id="Risultato">Risultato</h3> + +<p><img alt="Image:HTMLBlinkElement.gif" src="/@api/deki/files/247/=HTMLBlinkElement.gif"></p> + +<h2 id="Specifiche">Specifiche</h2> + +<p>Questo elemento non è standard e non fa parte di nessuna specifica. Se non ci credi, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/obsolete.html#non-conforming-features">cercalo tu stesso nella specifica HTML</a>.</p> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>{{CompatNo}}</td> + <td> + <p>Fino alla versione {{CompatGeckoDesktop("22.0")}}:<br> + {{CompatNo}}</p> + + <p>Supportato dalla versione {{CompatGeckoDesktop("23.0")}}</p> + </td> + <td>{{CompatNo}}</td> + <td> + <p>Fono alla versione 12.1:<br> + {{CompatNo}}</p> + + <p>Supportato dalla versione 12.0</p> + </td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>{{CompatNo}}</td> + <td> + <p style="font-size: 12px; line-height: 18px;">Fino alla versione {{CompatGeckoDesktop("22.0")}}:<br> + {{CompatNo}}</p> + + <p style="font-size: 12px; line-height: 18px;">Supportato dalla versione {{CompatGeckoDesktop("23.0")}}</p> + </td> + <td>{{CompatNo}}</td> + <td> + <p style="font-size: 12px; line-height: 18px;">Fono alla versione 12.1:<br> + {{CompatNo}}</p> + + <p style="font-size: 12px; line-height: 18px;">Supportato dalla versione 12.0</p> + </td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li><a href="http://www.montulli.org/theoriginofthe%3Cblink%3Etag">Storia della creazione dell'elemento <code><blink></code></a>.</li> + <li>La proprietà CSS {{cssxref("text-decoration")}}, che accetta il valore <code>blink</code> (anche se i browser possono ignorarlo).</li> + <li>L'elemento {{htmlelement("marquee")}}, un altro elemento simile e non standard.</li> + <li>Le <a href="/it/docs/Web/Guide/CSS/Using_CSS_animations" title="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">animazioni CSS</a>: il metodo standard di ottenere questo effetto.</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/it/web/html/element/blockquote/index.html b/files/it/web/html/element/blockquote/index.html new file mode 100644 index 0000000000..b5600b0747 --- /dev/null +++ b/files/it/web/html/element/blockquote/index.html @@ -0,0 +1,130 @@ +--- +title: <blockquote> +slug: Web/HTML/Element/blockquote +translation_of: Web/HTML/Element/blockquote +--- +<h2 id="Sommario">Sommario</h2> + +<p>L'elemento HTML <code><strong><blockquote></strong></code> (o <em>Block Quotation</em>) indica che il testo contenuto è una citazione. Solitamente è visualizzato con un'indentazione maggiore del resto del testo. Si può fornire l'URL dal quale è stato citato il testo usando l'attributo {{htmlattrxref("blockquote", "cite")}}, o usando l'elemento {{HTMLElement("cite")}}.</p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categoria</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contenuto di flusso</a>, sezioni, contenuto palpabile.</li> + <li><dfn>Contenuto permesso</dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Phrasing_content">Contenuto di flusso</a>.</li> + <li><dfn>Omissione dei tag</dfn> {{no_tag_omission}}</li> + <li><dfn>Elementi genitore permessi</dfn> Qualsiasi elemento che accetti <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Phrasing_content">contenuto di flusso</a>.</li> + <li><dfn>Interfaccia DOM</dfn> {{domxref("HTMLQuoteElement")}}</li> +</ul> + +<h2 id="Attributi">Attributi</h2> + +<p><span style="line-height: 21px;">Questo elemento include gli <a href="/it/docs/HTML/Global_attributes">attributi globali</a>.</span></p> + +<dl> + <dt>{{htmlattrdef("cite")}}</dt> + <dd>L'URL del documento dal quale è stato informato il testo o un messaggio riguardante le informazioni citate.</dd> +</dl> + +<h2 id="Esempio">Esempio</h2> + +<pre class="brush: html"><blockquote cite="http://developer.mozilla.org"> + <p>Questa è una citazione presa da MDN.</p> +</blockquote> +</pre> + +<h3 id="Risultato">Risultato</h3> + +<blockquote cite="http://developer.mozilla.org"> +<p>Questa è una citazione presa da MDN.</p> +</blockquote> + +<h2 id="Specifications" name="Specifications">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-blockquote-element', '<blockquote>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-blockquote-element', '<blockquote>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.2', '<blockquote>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Nota">Nota</h2> + +<p>Per cambiare l'indentazione dell'elemento <code><blockquote></code>, si può usare la proprietà CSS {{cssxref("margin")}}.</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>L'elemento {{HTMLElement("q")}}, per citazioni inline.</li> + <li>L'elemento {{HTMLElement("cite")}}, per citare del codice.</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/it/web/html/element/body/index.html b/files/it/web/html/element/body/index.html new file mode 100644 index 0000000000..4af9d7287c --- /dev/null +++ b/files/it/web/html/element/body/index.html @@ -0,0 +1,211 @@ +--- +title: <body> +slug: Web/HTML/Element/body +translation_of: Web/HTML/Element/body +--- +<h2 id="Sommario">Sommario</h2> + +<p>L'<strong>elemento HTML <code><body></code></strong> rappresenta il contenuto di un documento HTML. Può essere presente solo un elemento <code><body></code> in un documento.</p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/Web/HTML/Content_categories">Categorie di contenuto</a></dfn> <a href="/en-US/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document#Sectioning_roots">Sezioni principali</a>.</li> + <li><dfn>Contenuti permessi</dfn> <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Contenuti di flusso</a>.</li> + <li><dfn>Omissione del tag</dfn>Il tag iniziale può essere omesso se la prima cosa all'interno di esso non è uno spazio, un commento, un elemento {{HTMLElement("script")}} o un elemento {{HTMLElement("style")}}. Il tag finale può essere omesso se l'elemento <code><body></code> ha dei contenuti o ha il tag iniziale che non sia immediatamente seguito da un commento.</li> + <li><dfn>Elementi genitore permessi</dfn>Deve essere il secondo elemento figlio di un elemento {{HTMLElement("html")}}.</li> + <li><dfn>Interfaccia DOM</dfn> {{domxref("HTMLBodyElement")}} + <ul> + <li>L'elemento <code><body></code> espone l'interfaccia {{domxref("HTMLBodyElement")}}.</li> + <li>Puoi accedere all'elemento <code><body></code> di una pagina attraverso {{domxref("document.body")}}.</li> + </ul> + </li> +</ul> + +<h2 id="Attributi">Attributi</h2> + +<p>Questo elemento include gli <a href="/en-US/docs/Web/HTML/Global_attributes">attributi globali</a>.</p> + +<dl> + <dt>{{htmlattrdef("alink")}} {{obsolete_inline}}</dt> + <dd>Il colore del testo dei link quando vengono selezionati. <em>Questo metodo non è conforme, usa la proprietà CSS {{cssxref("color")}} insieme alla pseudo-classe {{cssxref(":active")}} sugli elementi <code><a></code>.</em></dd> + <dt>{{htmlattrdef("background")}} {{obsolete_inline}}</dt> + <dd>L'URI di un'immagine da usare come sfondo. <em>Questo metodo non è conforme, usa la proprietà CSS {{cssxref("background")}} sull'elemento <code><body></code>.</em> + <div class="note"><strong>Nota:</strong> A partire da Gecko 7.0 {{geckoRelease("7.0")}}, <code>background</code> non è più trattato come URI, ma come una semplice stringa.</div> + </dd> + <dt>{{htmlattrdef("bgcolor")}} {{obsolete_inline}}</dt> + <dd>Il colore di sfondo del documento. <em>Questo metodo non è conforme, usa la proprietà CSS {{cssxref("background-color")}} sull'elemento <code><body></code>.</em></dd> + <dt>{{htmlattrdef("bottommargin")}} {{obsolete_inline}}</dt> + <dd>Il margine inferiore del corpo del documento. <em>Questo metodo non è conforme, usa la proprietà CSS {{cssxref("margin-bottom")}} sull'elemento <code><body></code>.</em></dd> + <dt>{{htmlattrdef("leftmargin")}} {{obsolete_inline}}</dt> + <dd>Il margine sinistro del corpo del documento. <em>Questo metodo non è conforme, usa la proprietà CSS {{cssxref("margin-left")}} sull'elemento <code><body></code>.</em></dd> + <dt>{{htmlattrdef("link")}} {{obsolete_inline}}</dt> + <dd>Il colore del testo dei link non ancora visitati. <em>Questo metodo non è conforme, usa la proprietà CSS {{cssxref("color")}} insieme alla pseudo-classe {{cssxref(":link")}} sugli elementi <code><a></code>.</em></dd> + <dt>{{htmlattrdef("onafterprint")}} {{HTMLVersionInline(5)}}</dt> + <dd>Una funzione da richiamare dopo che l'utente abbia stampato il documento.</dd> + <dt>{{htmlattrdef("onbeforeprint")}} {{HTMLVersionInline(5)}}</dt> + <dd>Una funzione da chiamare subito prima che il documento venga stampato.</dd> + <dt>{{htmlattrdef("onbeforeunload")}} {{HTMLVersionInline(5)}}</dt> + <dd>Una funzione da chiamare quando il documento sta per essere chiuso.</dd> + <dt>{{htmlattrdef("onblur")}} {{HTMLVersionInline(5)}}</dt> + <dd>Una funzione da chiamare quando il documento perde il focus.</dd> + <dt>{{htmlattrdef("onerror")}} {{HTMLVersionInline(5)}}</dt> + <dd>Una funzione da chiamare quando il documento non riesce a caricarsi correttamente.</dd> + <dt>{{htmlattrdef("onfocus")}} {{HTMLVersionInline(5)}}</dt> + <dd>Una funzione da chiamare quando il documento riceve il focus.</dd> + <dt>{{htmlattrdef("onhashchange")}} {{HTMLVersionInline(5)}}</dt> + <dd>Function to call when the fragment identifier part (starting with the hash (<code>'#'</code>) character) of the document's current address has changed.</dd> + <dt>{{htmlattrdef("onlanguagechange")}} {{experimental_inline}}</dt> + <dd>Una funzione da chiamare quando la lingua preferita cambia.</dd> + <dt>{{htmlattrdef("onload")}} {{HTMLVersionInline(5)}}</dt> + <dd>Una funzione da chiamare quando termina il caricamento della pagina.</dd> + <dt>{{htmlattrdef("onmessage")}} {{HTMLVersionInline(5)}}</dt> + <dd>Una funzione da chiamare quando il documento riceve un messaggio.</dd> + <dt>{{htmlattrdef("onoffline")}} {{HTMLVersionInline(5)}}</dt> + <dd>Una funzione da chiamare quando il browser si disconnette da internet.</dd> + <dt>{{htmlattrdef("ononline")}} {{HTMLVersionInline(5)}}</dt> + <dd>Una funzione da chiamare quando il browser si riconnette a internet.</dd> + <dt>{{htmlattrdef("onpopstate")}} {{HTMLVersionInline(5)}}</dt> + <dd>Una funzione da chiamare quando l'utente si sposta nella cronologia.</dd> + <dt>{{htmlattrdef("onredo")}} {{HTMLVersionInline(5)}}</dt> + <dd>Una funzione da chiamare quando l'utente si sposta in avanti nella cronologia.</dd> + <dt>{{htmlattrdef("onresize")}} {{HTMLVersionInline(5)}}</dt> + <dd>Una funzione da chiamare quando la pagina viene ridimensionata.</dd> + <dt>{{htmlattrdef("onstorage")}} {{HTMLVersionInline(5)}}</dt> + <dd>Una funzione da chiamare quando lo spazio di archiviazione a disposizione cambia.</dd> + <dt>{{htmlattrdef("onundo")}} {{HTMLVersionInline(5)}}</dt> + <dd>Una funzione da chiamare quando l'utente si sposta in dietro nella cronologia.</dd> + <dt>{{htmlattrdef("onunload")}} {{HTMLVersionInline(5)}}</dt> + <dd>Una funzione da chiamare quando il documento viene chiuso.</dd> + <dt>{{htmlattrdef("rightmargin")}} {{obsolete_inline}}</dt> + <dd>Il margine destro del corpo del documento. <em>Questo metodo non è conforme, usa la proprietà CSS {{cssxref("margin-right")}} sull'elemento <code><body></code>.</em></dd> + <dt>{{htmlattrdef("text")}} {{obsolete_inline}}</dt> + <dd>Il colore del testo. <em>Questo metodo non è conforme, usa la proprietà CSS {{cssxref("color")}} sull'elemento <code><body></code>.</em></dd> + <dt>{{htmlattrdef("topmargin")}} {{obsolete_inline}}</dt> + <dd> + <div>Il margine superiore del corpo del documento. <em>Questo metodo non è conforme, usa la proprietà CSS {{cssxref("margin-top")}} sull'elemento <code><body></code>.</em></div> + </dd> + <dt>{{htmlattrdef("vlink")}} {{obsolete_inline}}</dt> + <dd>Il colore del testo dei link già visitati. <em>Questo metodo non è conforme, usa la proprietà CSS {{cssxref("color")}} insieme alla pseudo-classe {{cssxref(":visited")}} sugli elementi <code><a></code>.</em></dd> +</dl> + +<h2 id="Specifications" name="Specifications">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-body-element', '<body>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Cambiata la lista delle funzionalità non conformi.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-body-element', '<body>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Dichiarate obsolete gli attributi deprecati.<br> + Definito il comportamento degli attributi non conformi e mai standardizzati <strong><code>margintop</code></strong>, <strong><code>marginleft</code></strong>, <strong><code>marginright</code></strong> e <strong><code>marginbottom.</code></strong></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.1', '<body>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Dichiarati deprecati gli attributi <strong><code>alink</code></strong>, <strong><code>background</code></strong>, <code><strong>bgcolor</strong></code>, <code><strong>link</strong></code>, <code><strong>text</strong></code> e <code><strong>vlink</strong></code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilità con i browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>onlanguagechange</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("32")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>bottommargin</code>, <code>leftmargin</code>, <code>rightmargin</code>, <code>topmargin</code> {{obsolete_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("35")}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th><span style="font-family: 'Open Sans Light',sans-serif; font-size: 16px; line-height: 16px;">Funzionalità</span></th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td><span style="font-size: 12px; line-height: 18px;">Supporto di base</span></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>onlanguagechange</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("32")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>bottommargin</code>, <code>leftmargin</code>, <code>rightmargin</code>, <code>topmargin</code> {{obsolete_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("35")}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Prima era supportato solo in modalità Quirk Mode.</p> + +<h2 id="See_also" name="See_also">Vedi anche</h2> + +<ul> + <li>{{HTMLElement("html")}}</li> + <li>{{HTMLElement("head")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/it/web/html/element/br/index.html b/files/it/web/html/element/br/index.html new file mode 100644 index 0000000000..6a7ee04414 --- /dev/null +++ b/files/it/web/html/element/br/index.html @@ -0,0 +1,135 @@ +--- +title: <br> +slug: Web/HTML/Element/br +translation_of: Web/HTML/Element/br +--- +<h2 id="Summary" name="Summary">Sommario</h2> + +<p>L'elemento HTML <code><strong><br></strong></code> (o <em>Line Break</em>) crea un "a capo" nel testo. È utile quando è importante la divisione tra le linee, ad esempio in una poesia.</p> + +<p>Non usare l'elemento <code><br></code> per aumentare lo spazio tra due linee di testo, ma le proprietà CSS {{cssxref("margin")}} o {{cssxref("line-height")}} applicate all'elemento {{HTMLElement("p")}}.</p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categoria</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contenuto di flusso</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">contenuto testuale</a>.</li> + <li><dfn>Contenuto permesso</dfn> Nessuno, è un {{Glossary("elemento vuoto")}}.</li> + <li><dfn>Omissione dei tag</dfn>Deve esserci il tag di apertura ma non ci può essere il tag di chiusura. Nei documenti XHTML, questo elemento va scritto come <code><br /></code>.</li> + <li><dfn>Elementi genitore permessi</dfn>Qualsiasi elemento che accetta <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">contenuto testuale</a>.</li> + <li><dfn>Interfaccia DOM</dfn> {{domxref("HTMLBRElement")}}</li> +</ul> + +<h2 id="Attributes" name="Attributes">Attributi</h2> + +<p>Questo elemento include gli <a href="/it/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">attributi globali</a>.</p> + +<dl> + <dt>{{htmlattrdef("clear")}} {{deprecatedGeneric('inline','HTML4.01')}} {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>Con questo attributo si può ignorare l'allineamento della linea precedente. Può assumee i valorei <code>left</code>, <code>right</code> e <code>all</code>. + <div class="note"> + <p><strong>Nota: </strong>Questo attributo è obsoleto in <a href="/it/docs/HTML/HTML5">HTML5</a> e <strong>non dovrebbe essere usato</strong>: gli sviluppatori dovrebbero usare la proprietà CSS {{cssxref("clear")}}.</p> + </div> + </dd> +</dl> + +<h2 id="Example" name="Example">Esempio</h2> + +<pre class="brush: html">Mozilla Foundation<br> +1981 Landings Drive<br> +Building K<br> +Mountain View, CA 94043-0801<br> +USA +</pre> + +<h3 id="Risultato">Risultato</h3> + +<p>Mozilla Foundation<br> + 1981 Landings Drive<br> + Building K<br> + Mountain View, CA 94043-0801<br> + USA</p> + +<h2 id="Specifications" name="Specifications">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-br-element', '<br>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-br-element', '<br>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.2.1', '<br>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilità con i browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Vedi anche</h2> + +<ul> + <li>L'elemento {{HTMLElement("p")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/it/web/html/element/canvas/index.html b/files/it/web/html/element/canvas/index.html new file mode 100644 index 0000000000..e362c25e3f --- /dev/null +++ b/files/it/web/html/element/canvas/index.html @@ -0,0 +1,178 @@ +--- +title: <canvas> +slug: Web/HTML/Element/canvas +tags: + - Canvas + - Disegno + - Elemento + - HTML + - HTML5 + - Riferimento + - Web +translation_of: Web/HTML/Element/canvas +--- +<p>L'elemento HTML <strong><code><canvas></code></strong> viene usato per disegnare tramite <a href="/it/docs/Web/JavaScript">JavaScript</a>. Per esempio, può essere usato per disegnare, modificare foto o creare animazioni. Si può (e si dovrebbe) fornire un contenuto alternativo all'interno del tag <code><canvas></code>: questo contenuto verrà visualizzato sia nei browser che non supportano questo elemento, sia nei browser con JavaScript disabilitato.</p> + +<p>Per altri articoli sull'utilizzo di questo elemento, vedi la <a href="/it/docs/Web/API/Canvas_API">pagina riguardo i canvas</a>.</p> + +<ul class="htmlelt"> + <li><dfn><a href="/it/docs/HTML/Content_categories">Categorie del contenuto</a></dfn> <a href="/it/docs/HTML/Content_categories#Flow_content">Contenuto di flusso</a>, <a href="/it/docs/HTML/Content_categories#Phrasing_content">contenuto testuale</a>, <a href="https://developer.mozilla.org/it/docs/HTML/Content_categories#Embedded_content">contenuto incluso</a>, contenuto tangibile.</li> + <li><dfn>Contenuto permesso</dfn>Elementi trasparenti senza <a href="/it/docs/HTML/Content_categories#Interactive_content">contenuto interattivo</a> diverso dall'elemento {{HTMLElement("a")}}. Elementi {{HTMLElement("input")}} il cui attributo {{htmlattrxref("type", "input")}} è <code>checkbox</code>, <code>radio</code>, o<code>button</code>.</li> + <li><dfn>Omissione del tag</dfn> {{no_tag_omission}}</li> + <li><dfn>Elementi genitori permessi</dfn>Qualsiasi elemento che accetti <a href="/it/docs/HTML/Content_categories#Phrasing_content">contenuto testuale</a></li> + <li><dfn>Interfaccia DOM</dfn> {{domxref("HTMLCanvasElement")}}</li> +</ul> + +<h2 id="Attributi">Attributi</h2> + +<p>Questo elemento accetta anche gli <a href="https://developer.mozilla.org/it/docs/HTML/Global_attributes">attributi globali</a>.</p> + +<dl> + <dt>{{htmlattrdef("height")}}</dt> + <dd>L'altezza dell'elemento in pixels. Il valore predefinito è 150.</dd> + <dt>{{htmlattrdef("moz-opaque")}} {{non-standard_inline}}</dt> + <dd>Permette al browser di sapere se questo elemento userà la trasparenza. Se non, il browser può ottimizzare le performace durante il disegno.</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>La larghezza dell'elemento in pixels. Il valore predefinito è 300.</dd> +</dl> + +<h2 id="Descrizione">Descrizione</h2> + +<h3 id="Richiede_il_tag_di_chiusura_<canvas>">Richiede il tag di chiusura <code></canvas></code></h3> + +<p>A differenza dell'elemento {{HTMLElement("img")}}, l'elemento {{HTMLElement("canvas")}} <strong>richiede</strong> il tag di chiusura (<code><canvas>).</code></p> + +<h3 id="Dimensioni_del'area_da_disegno">Dimensioni del'area da disegno</h3> + +<p>Le dimensioni del'elemento possono essere cambiate usando i fogli di stile. L'immagine viene ridimensionata durante il rendering per rientrare nella dimensione corretta. Se le dimensioni sembrano distorte, prova a specificare gli attributi <code>width</code> e <code>height</code> utilizzando gli attributi anziché il CSS.</p> + +<h2 id="Esempi">Esempi</h2> + +<pre class="brush: html"><canvas id="canvas" width="300" height="300"> + Mi dispiace, ma il tuo browser non supporta l'elemento &lt;canvas&gt;. +</canvas> +</pre> + +<p>Se il tuo disegno non ha trasparenza, usa l'attributo <code>moz-opaque</code>. Questa informazione può essere utilizzata per ottimizzare il rendering.</p> + +<div class="warning"> +<p>Questo attributo non è standard e funziona solo nei motori di rendering basati su Mozilla.</p> +</div> + +<pre class="brush: html"><canvas id="mycanvas" moz-opaque></canvas></pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-canvas-element.html#the-canvas-element', '<canvas>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'the-canvas-element.html#the-canvas-element', '<canvas>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Definizione iniziale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.8")}}<sup>[1]</sup><br> + {{CompatGeckoDesktop("6.0")}}<sup>[2]</sup><br> + {{CompatGeckoDesktop("12.0")}}<sup>[3]</sup></td> + <td>9.0</td> + <td>9.0<sup>[4]</sup></td> + <td>2.0<sup>[5]</sup></td> + </tr> + <tr> + <td><code>moz-opaque</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>{{CompatGeckoDesktop("1.8")}}<sup>[1]</sup><br> + {{CompatGeckoDesktop("6.0")}}<sup>[2]</sup><br> + {{CompatGeckoDesktop("12.0")}}<sup>[3]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>1.0</td> + </tr> + <tr> + <td><code>moz-opaque</code></td> + <td>{{CompatGeckoMobile("1.9.1")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Prima di Gecko 5.0 {{geckoRelease("5.0")}} le dimensioni di questo elemento erano specificate utilizzando anche numeri negativi.</p> + +<p>[2] Prima di Gecko 6.0 {{geckoRelease("6.0")}}, un elemento {{HTMLElement("canvas")}} con altezza o larghezza pari a zero veniva mostrato con le dimensioni predefinite.</p> + +<p>[3] Prima di Gecko 12.0 {{geckoRelease("12.0")}}, se JavaScript è disabilitato, viene mostrato l'elemento {{HTMLElement("canvas")}} anziché il contenuto alternativo.</p> + +<p>[4] Guarda il <a href="http://www.opera.com/docs/changelogs/windows/900/">changelog di Opera 9.0</a>.</p> + +<p>[5] Anche se alcune vecchie versioni di Safari (fino alla 2.0) non richiedono il tag di chiusura, la specifica indica che è richiesto; quindi andrebbe usato per garantire la compatibilità con altri browser. Inoltre queste versioni di Safari mostrano sia il disegno che il contenuto alternativo, a meno che non si usi qualche trucco CSS per nasconderlo. Fortunatamente adesso gli utenti che usano queste versioni del browser sono molto rari.</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li><a href="/it/docs/Web/API/Canvas_API">MDN canvas portal</a></li> + <li><a href="/it/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a></li> + <li><a href="https://simon.html5.org/dump/html5-canvas-cheat-sheet.html">Canvas cheat sheet</a></li> + <li><a href="/it/demos/tag/tech:canvas">Canvas-related demos</a></li> + <li><a href="https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/HTML-canvas-guide/Introduction/Introduction.html">Canvas introduction by Apple</a></li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/it/web/html/element/caption/index.html b/files/it/web/html/element/caption/index.html new file mode 100644 index 0000000000..6720653745 --- /dev/null +++ b/files/it/web/html/element/caption/index.html @@ -0,0 +1,134 @@ +--- +title: <caption> +slug: Web/HTML/Element/caption +translation_of: Web/HTML/Element/caption +--- +<h2 id="Sommario">Sommario</h2> + +<p>L'elemento HTML <code><strong><caption></strong></code> rappresenta il titolo di una tabella.</p> + +<div class="note"><strong>Nota</strong>: Quando l'elemento {{HTMLElement("table")}} genitore di un elemento {{HTMLElement("caption")}} è l'unico discendente di un elemento {{HTMLElement("figure")}}, usare l'elemento {{HTMLElement("figcaption")}} al posto di questo.</div> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categorie di contenuto</a></dfn> Nessuna.</li> + <li><dfn>Contenuto permesso</dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contenuto di flusso</a>.</li> + <li><dfn>Omissione del tag</dfn> {{no_tag_omission}}</li> + <li><dfn>Elementi genitore permessi</dfn> Un elemento {{HTMLElement("table")}}, del quale deve essere il primo figlio.</li> + <li><dfn>Interfaccia DOM</dfn> {{domxref("HTMLTableCaptionElement")}}</li> +</ul> + +<h2 id="Attributi">Attributi</h2> + +<p>Questo elemento accetta gli <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">attributi globali</a>.</p> + +<dl> + <dt>{{htmlattrdef("align")}} {{deprecatedGeneric('inline','HTML4.01')}} {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>Questo attributo indica l'allineamento di questo elemento rispetto alla tabella. Può assumere i seguenti valori: + <ul> + <li><code>left</code>, mostrato sulla sinistra della tabella</li> + <li><code>top</code>, mostrato prima della tabella</li> + <li><code>right</code>, mostrato sulla destra della tabella</li> + <li><code>bottom</code>, mostrato sotto la tabella</li> + </ul> + + <div class="note"><strong>Nota: </strong>Non usare</div> + + <div class="note">Do not use this attribute, as it has been deprecated: the {{HTMLElement("caption")}} element should be styled using <a href="/en-US/docs/CSS" title="CSS">CSS</a>. To give a similar effect to the <code>align</code> attribute, use the the <a href="/en-US/docs/CSS" title="CSS">CSS</a> properties {{cssxref("caption-side")}} and {{cssxref("text-align")}}.</div> + </dd> +</dl> + +<h2 id="Esempi">Esempi</h2> + +<p>Vedere la pagina {{HTMLElement("table")}} per esempi su {{HTMLElement("caption")}}</p> + +<h2 id="Specifications" name="Specifications">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'tabular-data.html#the-caption-element', '<caption>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-caption-element', '<caption>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/tables.html#h-11.2.2', '<caption>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_dei_browser">Compatibilità dei browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Guarda_anche">Guarda anche</h2> + +<ul> + <li>Altri elementi collegati alle tabelle: {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}};</li> + <li>Proprietà CSS che sono particolarmente indicate per personalizzare l'elemento {{HTMLElement("caption")}} : + <ul> + <li>{{cssxref("text-align")}}, {{cssxref("caption-side")}}.</li> + </ul> + </li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/it/web/html/element/center/index.html b/files/it/web/html/element/center/index.html new file mode 100644 index 0000000000..ca5a3d70c8 --- /dev/null +++ b/files/it/web/html/element/center/index.html @@ -0,0 +1,51 @@ +--- +title: <center> +slug: Web/HTML/Element/center +translation_of: Web/HTML/Element/center +--- +<div>{{deprecated_header()}}</div> + +<h2 id="Sommario">Sommario</h2> + +<p>L'elemento HTML <strong><code><center></code></strong> è un elemento che può contenere paragrafi o altri elementi, che siano blocchi o inline. Il contenuto di questo elemento viene centrato orizzontalmente rispetto al suo contenitore (solitamente l'elemento {{HTMLElement("body")}}).</p> + +<p>Questo tag è deprecato a partire da HTML 4 (e XHTML 1) in favore della proprietà <a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a> {{Cssxref("text-align")}}, che può essere applicata ad un elemento {{HTMLElement("div")}} o ai singoli elementi {{HTMLElement("p")}}. Per centrare i blocchi usa altre proprietà CSS come{{Cssxref("margin-left")}} e {{Cssxref("margin-right")}}, e impostale ad <code>auto</code> (o importa {{Cssxref("margin")}} a <code>0 auto</code></p> + +<h2 id="Interfaccia_DOM">Interfaccia DOM</h2> + +<p>Questo elemento implementa l'interfaccia {{domxref("HTMLElement")}}.</p> + +<div class="note"> +<p><strong>Nota:</strong> fino a Gecko 1.9.2 incluso, FIrefox implementa l'interfaccia {{domxref("HTMLSpanElement")}}.</p> +</div> + +<h2 id="Example_1" name="Example_1">Esempio 1</h2> + +<pre class="brush: html notranslate"><center>Questo testo verrà centrato +<p>E anche questo paragrafo.</p></center> +</pre> + +<h2 id="Example_2" name="Example_2">Esempio 2 (usando i CSS)</h2> + +<pre class="brush: html notranslate"><div style="text-align:center">Questo testo verrà centrato. +<p>E anche questo paragrafo.</p></div> +</pre> + +<h2 id="Example_3" name="Example_3">Esempio 3 (usando i CSS)</h2> + +<pre class="brush: html notranslate"><p style="text-align:center">Questa linea verrà centrata.<br> +E anche questa.</p> +</pre> + +<h2 id="Notes" name="Notes">Nota</h2> + +<p>Applicando {{Cssxref("text-align")}}<code>: center</code> a un elemento {{HTMLElement("div")}} o {{HTMLElement("p")}} si centra <em>il contenuto</em> di questi elementi, non gli elementi stessi.</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{Cssxref("text-align")}}</li> + <li>{{Cssxref("display")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/it/web/html/element/div/index.html b/files/it/web/html/element/div/index.html new file mode 100644 index 0000000000..991fe0575c --- /dev/null +++ b/files/it/web/html/element/div/index.html @@ -0,0 +1,137 @@ +--- +title: '<div>: The Content Division element' +slug: Web/HTML/Element/div +tags: + - Divisione di Contenuto + - 'HTML: Contenuti di flusso' + - Layout + - Web + - div +translation_of: Web/HTML/Element/div +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">L'elemento <strong>HTML Content Division</strong> (<strong><code><div></code></strong>) è un contenitore generico per contenuti di flusso. Non ha alcun effetto sui contenuti fin quando non viene stilizzato attraverso CSS. In quanto contenitore "puro"</span>, l'elemento <code><div></code> di suo non rappresenta nulla. E' utilizzato piuttosto per raggruppare contenuti in modo da essere facilmente stilizzato attraverso gli attributi {{htmlattrxref("class")}} o {{htmlattrxref("id")}}, o per contrassegnare una sezione di un documento scritta in una lingua diversa (utilizzando l'attributo {{htmlattrxref("lang")}}), e così via.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Categorie di contenuti</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Contenuti di flusso</a>, contenuti palpabili.</td> + </tr> + <tr> + <th scope="row">Contenuti permessi</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Contenuti di flusso</a>.<br> + O (nella specifica HTML del <a href="/en-US/docs/Glossary/WHATWG">WHATWG</a>): Se il genitore è un elemento {{HTMLElement("dl")}}:uno o più elementi {{HTMLElement("dt")}} seguiti da un o più elementi {{HTMLElement("dd")}}, opzionalmente mischiati ad elementi {{HTMLElement("script")}} e {{HTMLElement("template")}}.</td> + </tr> + <tr> + <th scope="row">Omissione del tag</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Genitori permessi</th> + <td>Qualsiasi elemento che accetti <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">contenuti di flusso</a>.<br> + O (nella specifica HTML <a href="/en-US/docs/Glossary/WHATWG">WHATWG</a>): l'elemento {{HTMLElement("dl")}}.</td> + </tr> + <tr> + <th scope="row">Ruoli ARIA permessi</th> + <td>Qualsiasi</td> + </tr> + <tr> + <th scope="row">Interfaccia DOM</th> + <td>{{domxref("HTMLDivElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributi">Attributi</h2> + +<p>Questo elemento include gli <a href="/en-US/docs/Web/HTML/Global_attributes">attributi globali</a>.</p> + +<p>L'attributo<code>align</code> è obsoleto; non utilizzarlo. Piuttosto, bisognerebbe utilizzare le proprietà o tecniche CSS quali <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a> o <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">CSS Flexbox</a> per allineare e posizionare gli elementi <code><div></code> all'interno della pagina.</p> + +<h2 id="Note_sull'utilizzo">Note sull'utilizzo</h2> + +<ul> + <li>L'elemento <code><div></code> dovrebbe essere utilizzato esclusivamente quando altri elementi semantici, (quali as {{HTMLElement("article")}} o {{HTMLElement("nav")}}) non sono più appropriati.</li> +</ul> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Un_semplice_esempio">Un semplice esempio</h3> + +<pre class="brush: html"><div> + <p>Qualsiasi contenuto, come + &lt;p&gt;, &lt;table&gt;. Decidi tu!</p> +</div> </pre> + +<p>Il risultato apparirà così:</p> + +<p>{{EmbedLiveSample("Un_semplice_esempio", 650, 60)}}</p> + +<h3 id="Un_esempio_stilizzato">Un esempio stilizzato</h3> + +<p>Questo esempio crea un box dotato d'ombra, applicando uno stile al <code><div></code> usando CSS. Notare l'utilizzo dell'attributo {{htmlattrxref("class")}} sul<code><div></code> per applicare lo stile chiamato <code>"shadowbox"</code> sull'elemento.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div class="shadowbox"> + <p>Qui troviamo una nota molto interessante + in un box dotato di un'amorevole ombra.</p> +</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.shadowbox { + width: 15em; + border: 1px solid #333; + box-shadow: 8px 8px 5px #444; + padding: 8px 12px; + background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc); +}</pre> + +<h4 id="Risultato">Risultato</h4> + +<p>{{EmbedLiveSample("Un_esempio_stilizzato", 650, 120)}}</p> + +<h2 id="Specificazioni">Specificazioni</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specificatioe</th> + <th scope="col">Status</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-div-element', '<div>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Nessun cambiamento dall'ultimo snapshot</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-div-element', '<div>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Attributo di stile <strong>align </strong>reso obsoleto</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.4', '<div>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_dei_browser">Compatibilità dei browser</h2> + +<div class="hidden">La tabella di compatibilità in questa pagina è generata da una struttura di dati. Se vuoi contribuire a questi dati per piacere controlla la pagina<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e inviaci una richiesta di pull.</div> + +<p>{{Compat("html.elements.div")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>Elementi di sezione semantici: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}</li> + <li>{{HTMLElement("span")}} per la stilizzazione di contenuti di enunciazione.</li> +</ul> diff --git a/files/it/web/html/element/figura/index.html b/files/it/web/html/element/figura/index.html new file mode 100644 index 0000000000..6a1f4b019f --- /dev/null +++ b/files/it/web/html/element/figura/index.html @@ -0,0 +1,170 @@ +--- +title: <figure> +slug: Web/HTML/Element/figura +tags: + - Element + - Image + - Information + - Presentation + - Reference +translation_of: Web/HTML/Element/figure +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">L'elemento <strong>HTML <code><figure></code> </strong>rappresenta un contenuto indipendente che può avere una descrizione tramite l'elemento ({{HTMLElement("figcaption")}}).</span> L'immagine, la descrizione e il suo contenuto hanno riferimenti indipendenti.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/figure.html","tabbed-shorter")}}</div> + +<div class="hidden">I sorgenti degli esempi di seguito sono pubblicati su un repository GitHub. Nel caso volessi contribuire, puoi clonare il seguente progetto <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e inviarci una pull request.</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="https://developer.mozilla.org/it/docs/Web/Guide/HTML/Categorie_di_contenuto">Categorie di contenuti</a></th> + <td><a href="https://developer.mozilla.org/it/docs/Web/Guide/HTML/Categorie_di_contenuto#Contenuto_di_flusso">Contenuti di flusso</a>, <a href="https://developer.mozilla.org/it/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">sezioni e struttura</a></td> + </tr> + <tr> + <th scope="row">Contenuti permessi</th> + <td>L'elemento {{HTMLElement("figcaption")}}, seguito da <a href="https://developer.mozilla.org/it/docs/Web/Guide/HTML/Categorie_di_contenuto#Contenuto_di_flusso">contenuti di flusso</a>; o contenuti di flusso seguiti dall'elemento {{HTMLElement("figcaption")}}; o contenuti di flusso.</td> + </tr> + <tr> + <th scope="row">Omissione del tag</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Genitori permessi</th> + <td> + <p>Qualsiasi elemento che accetti <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Contenuti di flusso</a>.</p> + </td> + </tr> + <tr> + <th scope="row">Ruoli ARIA permessi</th> + <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">Interfaccia DOM</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributi">Attributi</h2> + +<p>Questo elemento include gli <a href="https://developer.mozilla.org/it/docs/Web/HTML/Global_attributes">attributi globali</a>.</p> + +<h2 id="Note_sullutilizzo">Note sull'utilizzo</h2> + +<ul> + <li>Solitamente l'elemento <code><figure></code> è un'immagine, un'illustrazione, un diagramma, un frammento di codice, etc., relativo al flusso principale di un documento, ma che può essere posizionato in un'altra parte del documento o all'appendice senza impatti sul flusso principale.</li> + <li>Può essere associata una descrizione all'elemento <code><figure></code> inserendo l'elemento {{HTMLElement("figcaption")}} al suo interno (sia come primo che come ultimo figlio). Il primo elemento <code><figcaption></code> trovato sarà utilizzato come descrizione.</li> +</ul> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Immagini">Immagini</h3> + +<pre class="brush: html"><!-- Solo un'immagine --> +<figure> + <img + src="https://developer.mozilla.org/static/img/favicon144.png" + alt="Il bellissimo logo MDN."> +</figure> + +<!-- Un'immagine con descrizione --> +<figure> + <img + src="https://developer.mozilla.org/static/img/favicon144.png" + alt="Il bellissimo logo MDN."> + <figcaption>MDN Logo</figcaption> +</figure> +</pre> + +<div>{{EmbedLiveSample("Immagini", "100%", 375)}}</div> + +<h3 id="Frammenti_di_codice">Frammenti di codice</h3> + +<pre class="brush: html"><figure> + <figcaption>Ottieni dettagli sul browser utilizzando <code>navigator</code>.</figcaption> + <pre> +function NavigatorExample() { + var txt; + txt = "Browser CodeName: " + navigator.appCodeName + "; "; + txt+= "Browser Name: " + navigator.appName + "; "; + txt+= "Browser Version: " + navigator.appVersion + "; "; + txt+= "Cookies Enabled: " + navigator.cookieEnabled + "; "; + txt+= "Platform: " + navigator.platform + "; "; + txt+= "User-agent header: " + navigator.userAgent + "; "; + console.log("NavigatorExample", txt); +} + </pre> +</figure></pre> + +<div>{{EmbedLiveSample("Frammenti_di_codice", "100%", 250)}}</div> + +<h3 id="Citazioni">Citazioni</h3> + +<pre class="brush: html"><figure> + <figcaption><cite>Edsger Dijkstra:</cite></figcaption> + <blockquote>If debugging is the process of removing software bugs, + then programming must be the process of putting them in.</blockquote> +</figure> +</pre> + +<div>{{EmbedLiveSample("Citazioni")}}</div> + +<h3 id="Poemi">Poemi</h3> + +<pre class="brush: html"><figure> + <p style="white-space:pre"> +Bid me discourse, I will enchant thine ear, + Or like a fairy trip upon the green, +Or, like a nymph, with long dishevell'd hair, + Dance on the sands, and yet no footing seen: +Love is a spirit all compact of fire, + Not gross to sink, but light, and will aspire.</p> + <figcaption><cite>Venus and Adonis</cite>, + by William Shakespeare</figcaption> +</figure></pre> + +<div>{{EmbedLiveSample("Poemi", "100%", 250)}}</div> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-figure-element', '<figure>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.2', 'grouping-content.html#the-figure-element', '<figure>')}}</td> + <td>{{Spec2('HTML5.2')}}</td> + <td>Nessun cambiamento da HTML 5.0.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-figure-element', '<figure>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_dei_browser">Compatibilità dei browser</h2> + +<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("html.elements.figure")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>L'elemento {{HTMLElement("figcaption")}}.</li> +</ul> diff --git a/files/it/web/html/element/footer/index.html b/files/it/web/html/element/footer/index.html new file mode 100644 index 0000000000..ba6605bdeb --- /dev/null +++ b/files/it/web/html/element/footer/index.html @@ -0,0 +1,119 @@ +--- +title: <footer> +slug: Web/HTML/Element/footer +translation_of: Web/HTML/Element/footer +--- +<h2 id="Sommario">Sommario</h2> + +<p>L'<strong>elemento HTML <code><footer></code></strong> rappresenta il footer della sua <a href="/en-US/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document#Defining_Sections_in_HTML5">sezione</a> più vicina. Un footer solitamente contiene informazioni sull'autore della sezione, il copyright o link a documenti correlati.</p> + +<div class="note"> +<p><strong>Note d'uso</strong>:</p> + +<ul> + <li>Racchiudere le informazioni sull'autore in un elemento {{HTMLElement("address")}}, che può essere posizionato nell'elemento <code><footer></code></li> + <li>L'elemento <code><footer></code> non rappresenta una sezione del contenuto e quindi non introduce una nuova sezione nell'<a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">indice</a>.</li> +</ul> +</div> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categorie di contenuto</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contenuti di flusso</a>, contenuti palpabili.</li> + <li><dfn>Contenuti permessi</dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contenuti di flusso</a>, esclusi <code><footer></code> e {{HTMLElement("header")}}.</li> + <li><dfn>Omissione del tag</dfn> {{no_tag_omission}}</li> + <li><dfn>Elementi genitore permessi</dfn> Qualsiasi elemento che accett <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">contenuti di flusso</a>. Notare che un elemento <code><footer></code> non può essere discendente di un elemento {{HTMLElement("address")}}, {{HTMLElement("header")}} o di un altro <code><footer></code>.</li> + <li><dfn>Interfaccia DOM</dfn> {{domxref("HTMLElement")}}</li> +</ul> + +<h2 id="Attributi">Attributi</h2> + +<p>Questo elemento include solo gli <a href="/en-US/docs/HTML/Global_attributes">attributi globali</a>.</p> + +<h2 id="Esempi">Esempi</h2> + +<pre class="brush: html"><footer> + Il copyright o delle informazioni su di un articolo +</footer> +</pre> + +<h2 id="Specifications" name="Specifications">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-footer-element', '<footer>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-footer-element', '<footer>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>5</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>9.0</td> + <td>11.10</td> + <td>4.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th><span style="font-family: 'Open Sans Light',sans-serif; font-size: 16px; line-height: 16px;">Funzionalità</span></th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td><span style="font-size: 12px; line-height: 18px;">Supporto di base</span></td> + <td>2.2</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>9.0</td> + <td>11.0</td> + <td>5.0 (iOS 4.2)</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>Altri elementi correlati alle sezioni: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("section")}}, {{HTMLElement("address")}};</li> + <li class="last"><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sezioni e indici nei documenti HTML5</a>.</li> +</ul> + +<p class="last">{{HTMLRef}}</p> diff --git a/files/it/web/html/element/head/index.html b/files/it/web/html/element/head/index.html new file mode 100644 index 0000000000..d59465ed2b --- /dev/null +++ b/files/it/web/html/element/head/index.html @@ -0,0 +1,85 @@ +--- +title: <head> +slug: Web/HTML/Element/head +tags: + - HTML + - 'HTML:Metadata content' +translation_of: Web/HTML/Element/head +--- +<h2 id="Sommario">Sommario</h2> + +<p>L'<strong>elemento HTML <code><head></code></strong> contiene informazioni generali (metadati) sul documento, inclusi il titolo e link a o definizioni di script e fogli di style.</p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categorie di contenuti</a></dfn> Nessuna.</li> + <li><dfn>Contenuti permessi</dfn>Se l'elemento è un {{HTMLElement("iframe")}} {{htmlattrxref("srcdoc", "iframe")}}, o se il titolo è disponibilie tramite un protocollo di livello superiore, zero o più elementi contenenti metadati.<br> + Altrimenti, uno o più elementi contenenti metadati dei quali esattamente uno è un elemento {{HTMLElement("title")}}.</li> + <li><dfn>Omissione del tag</dfn>Il tag iniziale può essere omesso se la prima cosa nell'elemento <code><head></code> è un altro elemento.<br> + Il tag finale può essere omesso se la prima cosa che segue l'elemento <code><head></code> non è uno spazio o un commento.</li> + <li><dfn>Elementi genitore permessi</dfn>Deve esse il primo figlio di un elemento {{HTMLElement("html")}}.</li> + <li><dfn>Interfaccia DOM</dfn> {{domxref("HTMLHeadElement")}}</li> +</ul> + +<h2 id="Attributi">Attributi</h2> + +<p><span style="line-height: 21px;">Questo elemento include gli </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">attributi globali</a><span style="line-height: 21px;">.</span></p> + +<dl> + <dt>{{htmlattrdef("profile")}} {{obsolete_inline}}</dt> + <dd>Gli URI di uno o più profili di metadata, separati da uno spazio.</dd> +</dl> + +<h2 id="Esempio">Esempio</h2> + +<pre class="brush: html"><html> + <head> + <title>Titolo del documento</title> + </head> +</html> +</pre> + +<h2 id="Note">Note</h2> + +<p>La maggior parte dei browser costruisce automaticamente un elemento <code><head></code> se non è presente. <a class="external" href="http://www.stevesouders.com/blog/2010/05/12/autohead-my-first-browserscope-user-test/" title="http://www.stevesouders.com/blog/2010/05/12/autohead-my-first-browserscope-user-test/">Comunque, alcuni non lo fanno</a>.<br> + Questi browser non creano automaticamente un elemento <code><head></code>: Android <=1.6, iPhone <=3.1.3, Nokia 90, Opera <=9.27 e Safari <=3.2.1.</p> + +<h2 id="Specifications" name="Specifications">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-head-element', '<head>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-head-element', '<head>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> <code>profile</code> obsoleto</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.4.1', '<head>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilità con i browser</h2> + +<p>{{Compat("html.elements.head")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>Elementi che possono essere usati nell'elemento <span style="font-family: Courier New;"><head></span>: {{HTMLElement("title")}}, {{HTMLElement("base")}}, {{HTMLElement("link")}}, {{HTMLElement("style")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("noscript")}}, {{HTMLElement("command")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/it/web/html/element/header/index.html b/files/it/web/html/element/header/index.html new file mode 100644 index 0000000000..94e158f275 --- /dev/null +++ b/files/it/web/html/element/header/index.html @@ -0,0 +1,120 @@ +--- +title: <header> +slug: Web/HTML/Element/header +translation_of: Web/HTML/Element/header +--- +<h2 id="Sommario">Sommario</h2> + +<p>L'<strong>elemento HTML </strong><code><strong><header></strong></code> rappresenta un introduzione. Può contenere alcuni elementi di intestazione ({{HTMLElement("h1")}}-{{HTMLElement("h6")}}), ma anche altri elementi come un logo, l'intestazione di una sezione, un form di ricerca, e così via.</p> + +<div class="note"> +<p>Note d'uso<strong>:</strong></p> + +<ul> + <li>L'elemento <code><header></code> non rappresenta una sezione del contenuto e quindi non introduce una nuova sezione nell'<a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">indice</a>.</li> +</ul> +</div> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categorie di contenuti</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contenuti di flusso</a>, contenuti palpabili.</li> + <li><dfn>Contenuti permessi</dfn><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contenuti di flusso</a>, esclusi <code><header></code> e {{HTMLElement("footer")}}.</li> + <li><dfn>Omissione del tag</dfn> {{no_tag_omission}}</li> + <li><dfn>Elementi genitore permessi</dfn> Qualsiasi elemento che accetti <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">contenuti di flusso</a>. Notare che un elemento <code><header></code> non può essere discendente di un elemento {{HTMLElement("address")}}, {{HTMLElement("footer")}} o di un altro {{HTMLElement("header")}}.</li> + <li><dfn>Interfaccia DOM</dfn> {{domxref("HTMLElement")}}</li> +</ul> + +<h2 id="Attributi">Attributi</h2> + +<p><span style="line-height: 21px;">Questo elemento include solo gli </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">attributi globali</a><span style="line-height: 21px;">.</span></p> + +<h2 id="Esempi">Esempi</h2> + +<pre class="brush: html"><header> + <img src="logo.png"> + Nome dell'azienda +</header> +</pre> + +<h2 id="Specifications" name="Specifications">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-header-element', '<header>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-header-element', '<header>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>5</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>9.0</td> + <td>11.10</td> + <td>4.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th><span style="font-family: 'Open Sans Light',sans-serif; font-size: 16px; line-height: 16px;">Funzionalità</span></th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td><span style="font-size: 12px; line-height: 18px;">Supporto di base</span></td> + <td>2.2</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>9.0</td> + <td>11.0</td> + <td>5.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>Una descrizione più dettagliata: <a class="external" href="http://html5doctor.com/the-header-element/" title="The header element | HTML5 Doctor">The header element | HTML5 Doctor</a></li> + <li>Altri elementi correlati alle sezioni: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("footer")}}, {{HTMLElement("section")}}, {{HTMLElement("address")}};</li> + <li class="last"><a class="deki-ns current" href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sezioni e indici nei documenti HTML5</a>.</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/it/web/html/element/hgroup/index.html b/files/it/web/html/element/hgroup/index.html new file mode 100644 index 0000000000..026b4090dd --- /dev/null +++ b/files/it/web/html/element/hgroup/index.html @@ -0,0 +1,99 @@ +--- +title: <hgroup> +slug: Web/HTML/Element/hgroup +translation_of: Web/HTML/Element/hgroup +--- +<div>{{seeCompatTable}}</div> + +<div> </div> + +<div class="note"> +<p><strong>Note d'uso</strong>: Questo elemento è stato rimosso dalla specifica HTML5 del W3C, ma è ancora presente nella versione del WHATWG. È implementato nella maggior parte dei browser, quindi è improbabile che venga definitivamente eliminato.</p> +</div> + +<h2 id="Sommario">Sommario</h2> + +<p>L'<strong>elemento HTML <code><hgroup></code></strong> rappresenta l'intestazione di una sezione. Definisce un titolo che diventa parte dell'<a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">indice del documento</a> come l'intestazione della sezione (implicita o esplicita) alla quale appartiene.</p> + +<p>Per l'algoritmo di indicizzazione, il suo contenuto è contenuto del primo elemento d'intestazione che contiene avente il valore più alto (qindi il primo <span style="line-height: 1.5;">{{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}} o {{HTMLElement("h6")}} tra i suoi discendenti) e il suo valore è lo stesso dell'elemento di intestazione trovato.</span></p> + +<p>Quindi solo l'elemento principale di questo gruppo di intestazioni diventa parte dell'indice del documento.</p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categorie di contenuti</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contenuti di flusso</a>, contenuti di intestazione, contenuti palpabili.</li> + <li><dfn>Contenuti permessi</dfn> Uno o più {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, e/o {{HTMLElement("h6")}}.</li> + <li><dfn>Omissione del tag</dfn> {{no_tag_omission}}</li> + <li><dfn>Elementi genitore permessi</dfn> Qualsiasi elemento che accetti <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">contenuti di flusso</a>.</li> + <li><dfn>DOM interface</dfn> {{domxref("HTMLElement")}}</li> +</ul> + +<h2 id="Attributi">Attributi</h2> + +<p><span style="line-height: 21px;">Questo elemento include solo gli </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">attributi globali</a>.</p> + +<h2 id="Esempi">Esempi</h2> + +<pre class="brush: html"><hgroup> + <h1>Titolo principale</h1> + <h2>Titolo secondario</h2> +</hgroup> +</pre> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Support di base</td> + <td>5</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>9.0</td> + <td>11.10</td> + <td>4.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th><span style="font-family: 'Open Sans Light', sans-serif; font-size: 16px; line-height: 16px;">Funzionalità</span></th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td><span style="font-size: 12px; line-height: 18px;">Support di base</span></td> + <td>2.2</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>9.0</td> + <td>11.0</td> + <td>5.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>Altri elementi correlati alle sezioni: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li> + <li><a class="deki-ns current" href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sezioni e indici nei documenti HTML5</a>.</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/it/web/html/element/html/index.html b/files/it/web/html/element/html/index.html new file mode 100644 index 0000000000..7ec576f1e3 --- /dev/null +++ b/files/it/web/html/element/html/index.html @@ -0,0 +1,87 @@ +--- +title: <html> +slug: Web/HTML/Element/html +translation_of: Web/HTML/Element/html +--- +<h2 id="Sommario">Sommario</h2> + +<p>L'<strong>elemento HTML <span style="font-family: Courier New;"><html></span> </strong>(o <em>elemento radice HTML</em>) rappresenta la radice di un documento HTML. Tutti gli altri elementi devono esserne discendenti.</p> + +<ul class="htmlelt"> + <li><dfn><a href="/docs/HTML/Content_categories" title="HTML/Content_categories">Categorie di contenuti</a></dfn> Nessuna.</li> + <li><dfn>Contenuto permesso</dfn> Un elemento {{HTMLElement("head")}}, seguito da un elemento {{HTMLElement("body")}}.</li> + <li><dfn>Omissione del tag</dfn> Il tag di apertura può essere omesso se la prima cosa all'interno dell'elemento <code><html></code> non è un commento.<br> + Il tag di chiusura può essere omesso se l'elemento <code><html></code> non è immediatamente seguito da un commento e contiene un elemento {{HTMLElement("body")}} che non sia vuoto o il cui tag di apertura sia presente.</li> + <li><dfn>Elementi genitore permessi</dfn>Come l'elemento radice di un documento, o in qualsiasi caso un frammento di un sottodocumento sia permesso in un documento composto.</li> + <li><dfn>Interfaccia DOM</dfn> {{domxref("HTMLhtmlElement")}}</li> +</ul> + +<h2 id="Attributi">Attributi</h2> + +<p>Questo elemento include gli <a href="/docs/HTML/Global_attributes" title="HTML/Global attributes">attributi globali</a>.</p> + +<dl> + <dt>{{htmlattrdef("manifest")}} {{obsolete_inline}}</dt> + <dd>Specifica l'URI di un manifesto di risorse che indica le risorse da inserire nella cache locale. Vedi <a href="/docs/HTML/Using_the_application_cache" title="/en-US/docs/HTML/Using_the_application_cache">Usare la cache delle applicazioni</a> per ulteriori dettagli.</dd> + <dt>{{htmlattrdef("version")}} {{obsolete_inline}}</dt> + <dd>Specifica la versione del HTML Document Type Definition che governa il documento corrente. Questo attributo non è necessario, perchè è ridondante con l'informazione di versione nella dichiarazione del tipo di documento.</dd> + <dt>{{htmlattrdef("xmlns")}} </dt> + <dd>Specifica il Namespace XML di un documento. il valore di default è <code>"http://www.w3.org/1999/xhtml"</code>. E' richiesto nei documenti analizzati con un parser XML, e opzionale nei documenti text/html.</dd> +</dl> + +<p> </p> + +<h2 id="Esempio">Esempio</h2> + +<p>Il DOCTYPE utilizzato nell'esempio seguente indica HTML5.</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head>...</head> + <body>...</body> +</html> + +</pre> + +<h2 id="Specifications" name="Specifications">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifiche</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-html-element', '<html>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'semantics.html#the-html-element', '<html>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Aggiunto il supporto per l'attributo <code>manifest</code> (deprecato successivamente).<br> + L'attributo <code>version</code> è obsoleto</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.3', '<html>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Deprecato l'attributo <code>version</code></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilità con i browser</h2> + +<p>{{Compat("html.elements.html")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>Elemento radice MathML: {{MathMLElement("math")}}</li> + <li>Elemento radice SVG: {{SVGElement("svg")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/it/web/html/element/i/index.html b/files/it/web/html/element/i/index.html new file mode 100644 index 0000000000..3d19bf5fe5 --- /dev/null +++ b/files/it/web/html/element/i/index.html @@ -0,0 +1,115 @@ +--- +title: <i> +slug: Web/HTML/Element/i +translation_of: Web/HTML/Element/i +--- +<p>L' <strong>elemento HTML <code><i></code> </strong>rappresenta un testo distinto dal testo normale per qualche ragione, come nel caso di termini tecnici, stranieri, ecc. E' tipicamente visualizzato in corsivo.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/i.html", "tabbed-shorter")}}</div> + + + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Categorie di contenuti</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Contenuto di flusso</a> , <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">contenuto di</a><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">frasi</a> , contenuto palpabile.</td> + </tr> + <tr> + <th scope="row">Contenuto consentito</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}} - Nessuna, sia il tag di apertura che quello di chiusura sono obbligatori.</td> + </tr> + <tr> + <th scope="row">Parents accettati</th> + <td>Qualsiasi elemento che accetta <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">contenuti di frasi</a> .</td> + </tr> + <tr> + <th scope="row">ARIA roles accettati</th> + <td>Qualunque</td> + </tr> + <tr> + <th scope="row">Interfaccia DOM</th> + <td> + <p><code><a href="/it/docs/Web/API/HTMLElement">HTMLElement</a> </code>Fino a Gecko 1.9.2 (Firefox 4) incluso. Firefox implementa l'<code><a href="/it/docs/Web/API/HTMLSpanElement">HTMLSpanElement</a>, </code>l<code>'</code>interfaccia per questo elemento.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Attributi">Attributi</h2> + +<p>Questo elemento include soltanto <a href="/en-US/docs/Web/HTML/Global_attributes">attributi globali</a>.</p> + +<h2 id="Note_di_utilizzo">Note di utilizzo</h2> + +<ul> + <li>Utilizzare l' <code><i></code>elemento per il testo che viene separato dalla prosa normale per motivi di leggibilità. Questa sarebbe una gamma di testo con un significato semantico diverso rispetto al testo circostante.</li> + <li>Nelle versioni precedenti della specifica HTML, l' <code><i> </code>elemento era semplicemente un elemento di presentazione utilizzato per visualizzare il testo in corsivo, proprio come l' <code><b> </code>elemento utilizzato per visualizzare il testo in grassetto. Questo non è più vero, poiché questi tag ora definiscono la semantica piuttosto che l'aspetto tipografico. In genere un browser visualizza ancora il contenuto dell'elemento <i> in tipo corsivo, ma per definizione non è più necessario.</li> + <li>In genere questo elemento è visualizzato in tipo corsivo. Tuttavia, non dovrebbe essere usato semplicemente per applicare lo stile corsivo; utilizzare la <code><a href="/it/docs/Web/CSS/font-style">font-style</a> </code>proprietà CSS per questo scopo.</li> + <li>Assicurati che il testo in questione non sia effettivamente più appropriato per un altro elemento. + <ul> + <li>Utilizzare <code><a href="/it/docs/Web/HTML/Element/em"><em></a> </code>per indicare l'enfasi sullo stress.</li> + <li>Utilizzare <code><a href="/it/docs/Web/HTML/Element/strong"><strong></a> </code>per indicare una maggiore importanza.</li> + <li>Utilizzare <code><a href="/it/docs/Web/HTML/Element/mark"><mark></a> </code>per indicare la pertinenza.</li> + <li>Utilizzare <code><a href="/it/docs/Web/HTML/Element/cite"><cite></a> </code>per contrassegnare il nome di un'opera, ad esempio un libro, una riproduzione o una canzone.</li> + <li>Utilizzare <code><a href="/it/docs/Web/HTML/Element/dfn"><dfn></a> </code>per contrassegnare l'istanza di definizione di un termine.</li> + </ul> + </li> + <li>È consigliabile utilizzare l' attributo <strong>class</strong> per identificare il motivo dell'utilizzo dell'elemento, in modo che se la presentazione debba essere modificata in un secondo momento, può essere eseguita in modo selettivo con i fogli di stile.</li> +</ul> + +<h2 id="Esempio">Esempio</h2> + +<p>Questo esempio mostra l'uso dell'elemento <code><i></code> per contrassegnare il testo di un'altra lingua.</p> + +<pre class="brush: html"><p>La frase latina <i class="latin">Veni, vidi, vici</i> è spesso menzionata in musica, arte e letteratura.</p> +</pre> + +<h3 id="Risultato">Risultato</h3> + +<p>La frase latina <em>Veni, vidi, vici</em> è spesso menzionata in musica, arte e letteratura.</p> + +<h2 id="Specificazioni">Specificazioni</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specificazioni</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-i-element', '<i>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-i-element', '<i>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '<b>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_Browser">Compatibilità Browser</h2> + + + +<p>{{Compat("html.elements.i")}}</p> + +<h2 id="Vedi_anche">Vedi anche </h2> + +<ul> + <li><a href="/it/docs/Web/HTML/Element/em"><code><em></code></a></li> +</ul> diff --git a/files/it/web/html/element/iframe/index.html b/files/it/web/html/element/iframe/index.html new file mode 100644 index 0000000000..6484cd5b19 --- /dev/null +++ b/files/it/web/html/element/iframe/index.html @@ -0,0 +1,471 @@ +--- +title: <iframe> +slug: Web/HTML/Element/iframe +translation_of: Web/HTML/Element/iframe +--- +<div>{{HTMLRef}}</div> + +<p>Il <strong><dfn>HTML Inline Frame Element</dfn> <code><iframe></code></strong> rappresenta una pagina HTML contenuta dentro un'altra pagina. Un <strong><iframe></strong> puó essere utilizzato all'interno di un normale documento HTML. Ciascun <strong><iframe> </strong>ha una sua cronologia. La pagina HTML che contiene l'iframe si chiama <strong>parent </strong>(genitore).</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, embedded content, interactive content, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td>Special, see prose</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts embedded content.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("img")}}</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLIFrameElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributi">Attributi</h2> + +<p>L'elemento <strong><iframe> </strong>possiede i seguenti attributi.</p> + +<dl> + <dt>{{htmlattrdef("align")}} {{deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dd>L'allineamento dell'iframe rispetto al contesto circostante.</dd> + <dt></dt> + <dt>{{htmlattrdef("allowfullscreen")}}</dt> + <dd>Se questo attributo è settato a <code>true</code> l'iframe puó essere collocato a schermo intero chiamando il metodo {{domxref("Element.requestFullscreen()")}}. Se non é settato l'iframe non puó collocari a schermo intero.</dd> + <dt>{{htmlattrdef("frameborder")}} {{HTMLVersionInline(4)}} only</dt> + <dd>Il valore 1 (default) dice al browser di disegnare un bordo tra l'iframe ed ogni altro iframe. Il valore - dice al browser di non disegnare un bordo tra l'iframe ed ogni altro iframe.</dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd>Indica l'altezza dell'iframe {{HTMLVersionInline(5)}} in CSS pixels.</dd> + <dt>{{htmlattrdef("longdesc")}} {{HTMLVersionInline(4)}} only</dt> + <dd>Non é supportato in HTML5. É un URI di una descrizione del frame.</dd> + <dt>{{htmlattrdef("marginheight")}} {{HTMLVersionInline(4)}} only</dt> + <dd>Non é supportato in HTML5. É il margine superiore ed inferiore in pixel.</dd> + <dt>{{htmlattrdef("marginwidth")}} {{HTMLVersionInline(4)}} only</dt> + <dd>Non é supportato in HTML5. É il margine destro e sinistro in pixel.</dd> + <dt>{{htmlattrdef("mozallowfullscreen")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>Usa <code><strong>allowfullscreen</strong></code> invece. Per Gecko 9.0 o superiori. Se questo attributo è settato a <code>true</code> l'iframe puó essere collocato a schermo intero chiamando il metodo {{domxref("Element.requestFullscreen()")}}. Se non é settato l'iframe non puó collocari a schermo intero.</dd> + <dt>{{htmlattrdef("webkitallowfullscreen")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>Usa <code><strong>allowfullscreen</strong></code> invece. Per Chrome 17 o superiori. Se questo attributo è settato a <code>true</code> l'iframe puó essere collocato a schermo intero chiamando il metodo {{domxref("Element.requestFullscreen()")}}. Se non é settato l'iframe non puó collocari a schermo intero.</dd> + <dt>{{htmlattrdef("mozapp")}} {{non-standard_inline}}</dt> + <dd>Per iframe ospitati da <a href="/en-US/docs/Apps" title="OpenWebApps">open web app</a>, questo attributo specifica l'URL all' <a href="/en-US/docs/Apps/Manifest">app manifest</a>. Questo attributo assicura che l'iframe é visualizzato con i giusti permessi.</dd> + <dt>{{htmlattrdef("mozbrowser")}} {{non-standard_inline}}</dt> + <dd>Indica che l'iframe deve apparire come una pagina top-level. Questo significa che {{domxref("window.top")}}, {{domxref("window.parent")}}, {{domxref("window.frameElement")}}, etc. non rifletteranno la gerarchia dei frame.</dd> + <dt id="name-attribute">{{htmlattrdef("name")}}</dt> + <dd>Il nome dell' iframe.</dd> + <dt id="attr-referrer">{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt> + <dd>A string indicating which referrer to use when fetching the resource: + <ul> + <li><code>"no-referrer"</code> meaning that the <code>Referer:</code> header will not be sent.</li> + <li>"<code>no-referrer-when-downgrade</code>" meaning that no <code>Referer:</code> header will be sent when navigating to an origin without TLS (HTTPS). This is a user agent’s default behavior, if no policy is otherwise specified.</li> + <li><code>"origin"</code> meaning that the referrer will be the origin of the page, that is roughly the scheme, the host and the port.</li> + <li>"origin-when-cross-origin" meaning that navigations to other origins will be limited to the scheme, the host and the port, while navigations on the same origin will include the referrer's path.</li> + <li><code>"unsafe-url"</code> meaning that the referrer will include the origin and the path (but not the fragment, password, or username). This case is unsafe because it can leak origins and paths from TLS-protected resources to insecure origins.</li> + </ul> + </dd> + <dt>{{htmlattrdef("remote")}} {{non-standard_inline}}</dt> + <dd>Load the frame's page in a separate content process.</dd> + <dt>{{htmlattrdef("scrolling")}} {{HTMLVersionInline(4)}} only</dt> + <dd>Indica se l'iframe deve fornire una scroll bar. I valori sono:</dd> + <dd> + <ul> + <li><code>auto</code>: solo quando necessario.</li> + <li><code>yes</code>: fornisci sempre una scroll bar.</li> + <li><code>no</code>: Non fornire mai una scroll bar.</li> + </ul> + </dd> + <dt>{{htmlattrdef("sandbox")}} {{HTMLVersionInline(5)}} only</dt> + <dd>If specified as an empty string, this attribute enables extra restrictions on the content that can appear in the inline frame. The value of the attribute can either be an empty string (all the restrictions are applied), or a space-separated list of tokens that lift particular restrictions. Valid tokens are: + <ul> + <li><code>allow-forms</code>: Allows the embedded browsing context to submit forms. If this keyword is not used, this operation is not allowed.</li> + <li><code>allow-modals</code>: Allows the embedded browsing context to open modal windows.</li> + <li><code>allow-orientation-lock</code>: Allows the embedded browsing context to disable the ability to lock the screen orientation.</li> + <li><code>allow-pointer-lock</code>: Allows the embedded browsing context to use the <a href="/en-US/docs/WebAPI/Pointer_Lock">Pointer Lock API</a>.</li> + <li><code>allow-popups</code>: Allows popups (like from <code>window.open</code>, <code>target="_blank"</code>, <code>showModalDialog</code>). If this keyword is not used, that functionality will silently fail.</li> + <li><code>allow-popups-to-escape-sandbox</code>: Allows a sandboxed document to open new windows without forcing the sandboxing flags upon them. This will allow, for example, a third-party advertisement to be safely sandboxed without forcing the same restrictions upon a landing page.</li> + <li><code>allow-presentation</code>: Allows embedders to have control over whether an iframe can start a presentation session.</li> + <li><code>allow-same-origin</code>: Allows the content to be treated as being from its normal origin. If this keyword is not used, the embedded content is treated as being from a unique origin.</li> + <li><code>allow-scripts</code>: Allows the embedded browsing context to run scripts (but not create pop-up windows). If this keyword is not used, this operation is not allowed.</li> + <li><code>allow-top-navigation</code>: Allows the embedded browsing context to navigate (load) content to the top-level browsing context. If this keyword is not used, this operation is not allowed.</li> + </ul> + + <div class="note"> + <p><strong>Note:</strong></p> + + <ul> + <li>When the embedded document has the same origin as the main page, it is strongly discouraged to use both <code>allow-scripts</code> and <code>allow-same-origin</code> at the same time, as that allows the embedded document to programmatically remove the <code>sandbox</code> attribute. Although it is accepted, this case is no more secure than not using the <code>sandbox</code> attribute.</li> + <li>Sandboxing in general is only of minimal help if the attacker can arrange for the potentially hostile content to be displayed in the user's browser outside a sandboxed <code>iframe</code>. It is recommended that such content should be served from a <em>separate dedicated domain</em>, to limit the potential damage.</li> + <li>The <code>sandbox</code> attribute is not supported in Internet Explorer 9 and earlier versions.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>L'URL della pagina da visualizzare all'interno dell'iframe.The URL of the page to embed. Usa <a href="/en-US/docs/Web/Security/Same-origin_policy#Inherited_origins">'about:blank'</a> per pagine vuote affinchè esse siano conformi a Same-Origin Policy.</dd> + <dt>{{htmlattrdef("srcdoc")}} {{HTMLVersionInline(5)}} only</dt> + <dd>The content of the page that the embedded context is to contain. This attribute is expected to generally be used together with the <code>sandbox</code> attribute. If a browser supports the <code>srcdoc</code> attribute, it will override the content specified in the <code>src</code> attribute (if present). If a browser does NOT support the <code>srcdoc</code> attribute, it will show the file specified in the <code>src</code> attribute instead (if present). Note that if the content of the attribute contains a script tag then a closing script tag is required for the script to run, even if nothing else comes after the script.</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>Indica la larghezza del frame {{HTMLVersionInline(5)}} in CSS pixels, o {{HTMLVersionInline(4.01)}} in pixels o in percentuale.</dd> +</dl> + +<h2 id="Scripting">Scripting</h2> + +<p>Dal DOM gli script possono accedere all'oggetto {{domxref("window")}} dell'iframe attraverso la proprietà <code>contentDocument</code>. Non é supportato dalle versioni di Internet Explorer inferiori alla IE8.</p> + +<p>Dall'iframe, uno script puó accedere alla window del parent attravero {{domxref("Window.parent")}}.</p> + +<p>Per via della <a href="/en-US/docs/Same_origin_policy_for_JavaScript" title="Same origin policy for JavaScript">same-origin policy</a>, gli script non posono accedere alle proprieta' degli altri oggetti window. Comunicazioni cross-domain possono sempre avvenire con {{domxref("Window.postMessage()")}}.</p> + +<h2 id="Esempi">Esempi</h2> + +<p>Di seguito alcuni esempi che dimostrano l'utilizzo dell'elemento <code><iframe></code>.</p> + +<h3 id="Example1" name="Example1">Un semplice <code><iframe></code></h3> + +<p>Se l'utente clicca su un bottone, il suo titolo dell'iframe viene letto e visualizzato su un alert.</p> + +<h4 id="HTML">HTML</h4> + +<div id="htmlOutputWrapper"> +<pre class="brush: html"><iframe src="https://mdn-samples.mozilla.org/snippets/html/iframe-simple-contents.html" width="400" height="300"> + <p>Your browser does not support iframes.</p> +</iframe></pre> +</div> + +<h4 id="Risultato">Risultato</h4> + +<p>{{ EmbedLiveSample('Example1', '', '', '', 'Web/HTML/Element/iframe') }}</p> + +<h3 id="Example2" name="Example2">Aprire un link contenuto in un <code><iframe></code> in un altro tab</h3> + +<p>In questo esempio, una mappa Google viene visualizzata in un iframe.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><base target="_blank"> +<iframe id="Example2" + title="Example2" + width="400" + height="300" + frameborder="0" + scrolling="no" + marginheight="0" + marginwidth="0" + src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=es-419&amp;geocode=&amp;q=buenos+aires&amp;sll=37.0625,-95.677068&amp;sspn=38.638819,80.859375&amp;t=h&amp;ie=UTF8&amp;hq=&amp;hnear=Buenos+Aires,+Argentina&amp;z=11&amp;ll=-34.603723,-58.381593&amp;output=embed"> +</iframe> + +<br> +<small> + <a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=es-419&amp;geocode=&amp;q=buenos+aires&amp;sll=37.0625,-95.677068&amp;sspn=38.638819,80.859375&amp;t=h&amp;ie=UTF8&amp;hq=&amp;hnear=Buenos+Aires,+Argentina&amp;z=11&amp;ll=-34.603723,-58.381593" style="color:#0000FF;text-align:left"> See bigger map </a> +</small></pre> + +<h4 id="Risultato_2">Risultato</h4> + +<p>{{ EmbedLiveSample('Example2', '', '', '', 'Web/HTML/Element/iframe') }}</p> + +<h4 id="Risultato_3">Risultato</h4> + +<p><a href="https://jsfiddle.net/pablofiumara/mCfAe/">Live example</a></p> + +<h2 id="Note">Note</h2> + +<div class="note"> +<p>Starting in {{Gecko("6.0")}}, rendering of inline frames correctly respects the borders of their containing element when they're rounded using {{cssxref("border-radius")}}.</p> +</div> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrerpolicy attribute')}}</td> + <td>{{Spec2('Referrer Policy')}}</td> + <td>Added the <code>referrerpolicy</code> attribute.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-iframe-element', '<iframe>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-iframe-element', '<iframe>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/frames.html#h-16.5', '<iframe>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('Screen Orientation')}}</td> + <td>{{Spec2('Screen Orientation')}}</td> + <td>Adds <code>allow-orientation-lock</code> to the <code>sandbox</code> attribute.</td> + </tr> + <tr> + <td>{{SpecName('Presentation','#sandboxing-and-the-allow-presentation-keyword','allow-presentation')}}</td> + <td>{{Spec2('Presentation')}}</td> + <td>Adds <code>allow-presentation</code> to the <code>sandbox</code> attribute</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilitá_dei_Browser">Compatibilitá dei Browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(1.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}[1]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}[2]</td> + </tr> + <tr> + <td><code>sandbox</code></td> + <td>{{CompatChrome(4.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("17.0")}}</td> + <td>10</td> + <td>15</td> + <td>5</td> + </tr> + <tr> + <td><code>srcdoc</code></td> + <td>{{CompatChrome(20.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("25.0")}}</td> + <td>{{CompatNo}}</td> + <td>15</td> + <td>6</td> + </tr> + <tr> + <td><code>allowfullscreen</code></td> + <td>{{CompatChrome(17.0)}} {{property_prefix("webkit")}}<br> + {{CompatChrome(27.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("9.0")}} {{property_prefix("moz")}}<br> + {{CompatGeckoDesktop("18.0")}}</td> + <td> + <p>11 {{property_prefix("ms")}}</p> + </td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}}<br> + 7</td> + </tr> + <tr> + <td><code>sandbox="allow-popups"</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("28.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>sandbox="allow-popups-to-escape-sandbox"</code></td> + <td>{{CompatChrome(46.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("49.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>32</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>sandbox="allow-modals"</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("49.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>referrerpolicy</code></td> + <td>{{CompatChrome(51.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("50.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>sandbox="allow-presentation"</code></td> + <td>{{CompatChrome(53.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td> + <p>{{CompatOpera(40)}}</p> + </td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td> + <p>{{CompatVersionUnknown}}</p> + </td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}[1]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td> + <p>{{CompatVersionUnknown}}</p> + </td> + </tr> + <tr> + <td><code>sandbox</code></td> + <td>2.2</td> + <td> + <p>{{CompatVersionUnknown}}</p> + </td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("17.0")}}</td> + <td>10</td> + <td>{{CompatNo}}</td> + <td>4.2</td> + <td> + <p>{{CompatVersionUnknown}}</p> + </td> + </tr> + <tr> + <td><code>srcdoc</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("25.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>allowfullscreen</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("9.0")}} {{property_prefix("moz")}}<br> + {{CompatGeckoMobile("18.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}}<br> + 7</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>sandbox="allow-popups"</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("27.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>sandbox="allow-popups-to-escape-sandbox"</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(46)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("49.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>32</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(46.0)}}</td> + </tr> + <tr> + <td><code>sandbox="allow-modals"</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("49.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>referrerpolicy</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(51.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("50.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(51.0)}}</td> + </tr> + <tr> + <td><code>sandbox="allow-presentation"</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td> + <p>{{CompatOperaMobile(40)}}</p> + </td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(53.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] La proprieta' CSS {{cssxref("resize")}} non ha alcun effetto per via del {{bug("680823")}}.</p> + +<p>[2] Safari has a well-known <a href="https://www.quirksmode.org/bugreports/archives/2005/02/hidden_iframes.html">bug</a> that prevents iframes from loading if the iframe element was hidden when added to the page. iframeElement.src = iframeElement.src should cause it to load the iframe.</p> diff --git a/files/it/web/html/element/img/index.html b/files/it/web/html/element/img/index.html new file mode 100644 index 0000000000..f9d0d4370d --- /dev/null +++ b/files/it/web/html/element/img/index.html @@ -0,0 +1,422 @@ +--- +title: '<img>: The Image Embed element' +slug: Web/HTML/Element/img +translation_of: Web/HTML/Element/img +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">L'<strong>elemento</strong> <strong>HTML <code><img></code></strong> inserisce un'immagine nel documento.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/img.html", "tabbed-standard")}}</div> + +<div class="hidden">I sorgenti di questo esempio interattivo sono presenti in un repository GitHub. Se vuoi contribuire al progetto degli esempi interattivi, clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a>e inviaci una pull request.</div> + +<p>L'esempio qui sopra mostra l'uso dell'elemento <code><img></code>:</p> + +<ul> + <li>L'attributo <code>src</code> è <strong>obbligatorio</strong> e contiene il percorso dell'immagine che si desidera inserire.</li> + <li>L'attributo <code>alt</code> contiene una descrizione testuale dell'immagine, che non è obbligatoria, ma è <strong>incredibilmente utile</strong> per l'accessibilità — gli screen reader leggono questa descrizione ai loro utenti, per indicare cosa contiene l'immagine. Il testo dell'Alt viene anche mostrato in pagina se per qualche motivo l'immagine non può essere caricata: per esempio, errori di rete, blocco dei contenuti, o link errato.</li> +</ul> + +<p>There are many other attributes to achieve various purposes:</p> + +<ul> + <li><a href="/en-US/docs/Web/HTTP/Headers/Referrer-Policy">Referrer</a>/{{glossary("CORS")}} control for security and privacy: see {{htmlattrxref("crossorigin", "img")}} and {{htmlattrxref("referrerpolicy", "img")}}.</li> + <li>Use both {{htmlattrxref("width", "img")}} and {{htmlattrxref("height", "img")}} to set the intrinsic size of the image, allowing it to take up space before it loads, to mitigate content layout shifts.</li> + <li>Responsive image hints with {{htmlattrxref("sizes", "img")}} and {{htmlattrxref("srcset", "img")}} (see also the {{htmlelement("picture")}} element and our <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a> tutorial).</li> +</ul> + +<h2 id="Supported_image_formats">Supported image formats</h2> + +<p>The HTML standard doesn't list what image formats to support, so each {{glossary("user agent")}} supports different formats. A complete <a href="/en-US/docs/Web/Media/Formats/Image_types">guide to image formats supported by web browsers</a> is available. Below is a list of the image formats that are most commonly used on the web, as well as some older formats that should no longer be used, despite existing content possibly still using them.</p> + +<p>{{page("/en-US/docs/Web/Media/Formats/Image_types", "table-of-image-file-types")}}</p> + +<h2 id="Image_loading_errors">Image loading errors</h2> + +<p>If an error occurs while loading or rendering an image, and an {{htmlattrxref("onerror")}} event handler has been set on the {{event("error")}} event, that event handler will get called. This can happen in a number of situations, including:</p> + +<ul> + <li>The <code>src</code> attribute is empty (<code>""</code>) or <code>null</code>.</li> + <li>The <code>src</code> {{glossary("URL")}} is the same as the URL of the page the user is currently on.</li> + <li>The image is corrupted in some way that prevents it from being loaded.</li> + <li>The image's metadata is corrupted in such a way that it's impossible to retrieve its dimensions, and no dimensions were specified in the <code><img></code> element's attributes.</li> + <li>The image is in a format not supported by the {{Glossary("user agent")}}.</li> +</ul> + +<h2 id="Attributes">Attributes</h2> + +<p>This element includes the <a href="/en-US/docs/HTML/Global_attributes">global attributes</a>.</p> + +<dl> + <dt>{{htmlattrdef("alt")}}</dt> + <dd>Defines an alternative text description of the image. + <div class="note"> + <p><strong>Note:</strong> Browsers do not always display images. There are a number of situations in which a browser might not display images, such as:</p> + + <ul> + <li>Non-visual browsers (such as those used by people with visual impairments)</li> + <li>The user chooses not to display images (saving bandwidth, privacy reasons)</li> + <li>The image is invalid or an <a href="#Supported_image_formats">unsupported type</a></li> + </ul> + + <p>In these cases, the browser may replace the image with the text in the element's <code>alt</code> attribute. For these reasons and others, provide a useful value for <code>alt</code> whenever possible.</p> + </div> + + <p>Omitting <code>alt</code> altogether indicates that the image is a key part of the content and no textual equivalent is available. Setting this attribute to an empty string (<code>alt=""</code>) indicates that this image is <em>not</em> a key part of the content (it’s decoration or a tracking pixel), and that non-visual browsers may omit it from {{glossary("Rendering engine", "rendering")}}. Visual browsers will also hide the broken image icon if the <code>alt</code> is empty and the image failed to display.</p> + + <p>This attribute is also used when copying and pasting the image to text, or saving a linked image to a bookmark.</p> + </dd> + <dt>{{htmlattrdef("crossorigin")}}</dt> + <dd> + <p>Indicates if the fetching of the image must be done using a {{glossary("CORS")}} request. Image data from a <a href="/en-US/docs/CORS_Enabled_Image">CORS-enabled image</a> returned from a CORS request can be reused in the {{HTMLElement("canvas")}} element without being marked "<a href="/en-US/docs/Web/HTML/CORS_enabled_image#What_is_a_tainted_canvas">tainted</a>".</p> + + <p>If the <code>crossorigin</code> attribute is <em>not</em> specified, then a non-CORS request is sent (without the {{httpheader("Origin")}} request header), and the browser marks the image as tainted and restricts access to its image data, preventing its usage in {{HTMLElement("canvas")}} elements.</p> + + <p>If the <code>crossorigin</code> attribute <em>is</em> specified, then a CORS request is sent (with the {{httpheader("Origin")}} request header); but if the server does not opt into allowing cross-origin access to the image data by the origin site (by not sending any {{httpheader("Access-Control-Allow-Origin")}} response header, or by not including the site's origin in any {{httpheader("Access-Control-Allow-Origin")}} response header it does send), then the browser marks the image as tainted and restricts access to its image data, preventing its usage in {{HTMLElement("canvas")}} elements.</p> + </dd> + <dd></dd> + <dd> + <p>Allowed values:</p> + + <dl> + <dt><code>anonymous</code></dt> + <dd>A CORS request is sent with credentials omitted (that is, no {{glossary("cookie", "cookies")}}, <a class="external" href="https://tools.ietf.org/html/rfc5280">X.509 certificates</a>, or {{httpheader("Authorization")}} request header).</dd> + <dt><code>use-credentials</code></dt> + <dd>The CORS request is sent with any credentials included (that is, cookies, X.509 certificates, and the <code>Authorization</code> request header). If the server does not opt into sharing credentials with the origin site (by sending back the <code>Access-Control-Allow-Credentials: true</code> response header), then the browser marks the image as tainted and restricts access to its image data.</dd> + </dl> + + <p>If the attribute has an invalid value, browsers handle it as if the <code>anonymous</code> value was used. See <a href="/en-US/docs/HTML/CORS_settings_attributes">CORS settings attributes</a> for additional information.</p> + </dd> + <dt>{{htmlattrdef("decoding")}}</dt> + <dd> + <p>Provides an image decoding hint to the browser. Allowed values:</p> + </dd> + <dd> + <dl> + <dt><code>sync</code></dt> + <dd>Decode the image synchronously, for atomic presentation with other content.</dd> + <dt><code>async</code></dt> + <dd>Decode the image asynchronously, to reduce delay in presenting other content.</dd> + <dt><code>auto</code></dt> + <dd>Default: no preference for the decoding mode. The browser decides what is best for the user.</dd> + </dl> + </dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd>The intrinsic height of the image, in pixels. Must be an integer without a unit.</dd> + <dt>{{htmlattrdef("intrinsicsize")}} {{deprecated_inline}}</dt> + <dd>This attribute tells the browser to ignore the actual {{glossary("intrinsic size")}} of the image and pretend it’s the size specified in the attribute. Specifically, the image would raster at these dimensions and <code>naturalWidth</code>/<code>naturalHeight</code> on images would return the values specified in this attribute. <a class="external" href="https://github.com/ojanvafai/intrinsicsize-attribute">Explainer</a>, <a class="external" href="https://googlechrome.github.io/samples/intrinsic-size/index.html">examples</a></dd> + <dt>{{htmlattrdef("ismap")}}</dt> + <dd>This Boolean attribute indicates that the image is part of a <a href="https://en.wikipedia.org/wiki/Image_map#Server-side">server-side map</a>. If so, the coordinates where the user clicked on the image are sent to the server. + <div class="note"> + <p><strong>Note:</strong> This attribute is allowed only if the <code><img></code> element is a descendant of an {{htmlelement("a")}} element with a valid {{htmlattrxref("href","a")}} attribute. This gives users without pointing devices a fallback destination.</p> + </div> + </dd> + <dt>{{htmlattrdef("loading")}}</dt> + <dd>Indicates how the browser should load the image: + <ul> + <li><code>eager</code>: Loads the image immediately, regardless of whether or not the image is currently within the visible viewport (this is the default value).</li> + <li><code>lazy</code>: Defers loading the image until it reaches a calculated distance from the viewport, as defined by the browser. The intent is to avoid the network and storage bandwidth needed to handle the image until it's reasonably certain that it will be needed. This generally improves the performance of the content in most typical use cases. + <div class="note"><strong>Note:</strong> Loading is only deferred when JavaScript is enabled. This is an anti-tracking measure, because if a user agent supported lazy loading when scripting is disabled, it would still be possible for a site to track a user's approximate scroll position throughout a session, by strategically placing images in a page's markup such that a server can track how many images are requested and when.</div> + </li> + </ul> + </dd> + <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt> + <dd>A string indicating which referrer to use when fetching the resource: + <ul> + <li><code>no-referrer</code>: The {{httpheader("Referer")}} header will not be sent.</li> + <li><code>no-referrer-when-downgrade</code>: No <code>Referer</code> header is sent when navigating to an origin without {{glossary("HTTPS")}}. This is the default if no policy is otherwise specified.</li> + <li><code>origin</code>: The <code>Referer</code> header will include the page's origin ({{glossary("scheme")}}, {{glossary("host")}}, and {{glossary("port")}}).</li> + <li><code>origin-when-cross-origin</code>: Navigating to other origins will limit the included referral data to the scheme, host, and port, while navigating from the same origin will include the full path and query string.</li> + <li><code>unsafe-url</code>: The <code>Referer</code> header will always include the origin, path and query string, but not the fragment, password, or username. <strong>This is unsafe</strong> because it can leak information from TLS-protected resources to insecure origins.</li> + </ul> + </dd> + <dt>{{htmlattrdef("sizes")}}</dt> + <dd>One or more strings separated by commas, indicating a set of source sizes. Each source size consists of: + <ol> + <li>A <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Syntax">media condition</a>. This must be omitted for the last item in the list.</li> + <li>A source size value.</li> + </ol> + + <p>Media Conditions describe properties of the <em>viewport</em>, not of the <em>image</em>. For example, <code>(max-height: 500px) 1000px</code> proposes to use a source of 1000px width, if the <em>viewport </em>is not higher than 500px.</p> + + <p>Source size values specify the intended display size of the image. {{glossary("User agent", "User agents")}} use the current source size to select one of the sources supplied by the <code>srcset</code> attribute, when those sources are described using width (<code>w</code>) descriptors. The selected source size affects the {{glossary("intrinsic size")}} of the image (the image’s display size if no {{glossary("CSS")}} styling is applied). If the <code>srcset</code> attribute is absent, or contains no values with a width descriptor, then the <code>sizes</code> attribute has no effect.</p> + </dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>The image {{glossary("URL")}}. Mandatory for the <code><img></code> element. On {{glossary("Browser", "browsers")}} supporting <code>srcset</code>, <code>src</code> is treated like a candidate image with a pixel density descriptor <code>1x</code>, unless an image with this pixel density descriptor is already defined in <code>srcset</code>, or unless <code>srcset</code> contains <code>w</code> descriptors.</dd> + <dt>{{htmlattrdef("srcset")}}</dt> + <dd>One or more strings separated by commas, indicating possible image sources for the {{glossary("user agent")}} to use. Each string is composed of: + <ol> + <li>A {{glossary("URL")}} to an image</li> + <li>Optionally, whitespace followed by one of: + <ul> + <li>A width descriptor (a positive integer directly followed by <code>w</code>). The width descriptor is divided by the source size given in the <code>sizes</code> attribute to calculate the effective pixel density.</li> + <li>A pixel density descriptor (a positive floating point number directly followed by <code>x</code>).</li> + </ul> + </li> + </ol> + + <p>If no descriptor is specified, the source is assigned the default descriptor of <code>1x</code>.</p> + + <p>It is incorrect to mix width descriptors and pixel density descriptors in the same <code>srcset</code> attribute. Duplicate descriptors (for instance, two sources in the same <code>srcset</code> which are both described with <code>2x</code>) are also invalid.</p> + + <p>The user agent selects any of the available sources at its discretion. This provides them with significant leeway to tailor their selection based on things like user preferences or {{glossary("bandwidth")}} conditions. See our <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a> tutorial for an example.</p> + </dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>The intrinsic width of the image in pixels. Must be an integer without a unit.</dd> + <dt>{{htmlattrdef("usemap")}}</dt> + <dd>The partial {{glossary("URL")}} (starting with <code>#</code>) of an <a href="/en-US/docs/HTML/Element/map">image map</a> associated with the element. + <div class="note"> + <p><strong>Note: </strong>You cannot use this attribute if the <code><img></code> element is inside an {{htmlelement("a")}} or {{HTMLElement("button")}} element.</p> + </div> + </dd> +</dl> + +<h3 id="Deprecated_attributes">Deprecated attributes</h3> + +<dl> + <dt>{{htmlattrdef("align")}} {{Obsolete_Inline}}</dt> + <dd>Aligns the image with its surrounding context. Use the {{cssxref('float')}} and/or {{cssxref('vertical-align')}} {{glossary("CSS")}} properties instead of this attribute. Allowed values:</dd> + <dd> + <dl> + <dt><code>top</code></dt> + <dd>Equivalent to <code style="white-space: nowrap;">vertical-align: top</code> or <code style="white-space: nowrap;">vertical-align: text-top</code></dd> + <dt><code>middle</code></dt> + <dd>Equivalent to <code style="white-space: nowrap;">vertical-align: -moz-middle-with-baseline</code></dd> + <dt><code>bottom</code></dt> + <dd>The default, equivalent to <code style="white-space: nowrap;">vertical-align: unset</code> or <code style="white-space: nowrap;">vertical-align: initial</code></dd> + <dt><code>left</code></dt> + <dd>Equivalent to <code style="white-space: nowrap;">float: left</code></dd> + <dt><code>right</code></dt> + <dd>Equivalent to <code style="white-space: nowrap;">float: right</code></dd> + </dl> + </dd> + <dt>{{htmlattrdef("border")}} {{Obsolete_Inline}}</dt> + <dd>The width of a border around the image. Use the {{cssxref('border')}} {{glossary("CSS")}} property instead.</dd> + <dt>{{htmlattrdef("hspace")}} {{Obsolete_Inline}}</dt> + <dd>The number of pixels of white space on the left and right of the image. Use the {{cssxref('margin')}} CSS property instead.</dd> + <dt>{{htmlattrdef("longdesc")}} {{Obsolete_Inline}}</dt> + <dd>A link to a more detailed description of the image. Possible values are a {{glossary("URL")}} or an element {{htmlattrxref("id")}}. + <div class="note"> + <p><strong>Note:</strong> This attribute is mentioned in the latest {{glossary("W3C")}} version, <a class="external" href="https://www.w3.org/TR/html52/obsolete.html#element-attrdef-img-longdesc">HTML 5.2</a>, but has been removed from the {{glossary("WHATWG")}}’s <a class="external" href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element">HTML Living Standard</a>. It has an uncertain future; authors should use a {{glossary("WAI")}}-{{glossary("ARIA")}} alternative such as <a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-describedby"><code>aria-describedby</code></a> or <a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-details"><code>aria-details</code></a>.</p> + </div> + </dd> + <dt>{{htmlattrdef("name")}} {{Obsolete_Inline}}</dt> + <dd>A name for the element. Use the {{htmlattrxref("id")}} attribute instead.</dd> + <dt>{{htmlattrdef("vspace")}} {{Obsolete_Inline}}</dt> + <dd>The number of pixels of white space above and below the image. Use the {{cssxref('margin')}} CSS property instead.</dd> +</dl> + +<h2 id="Styling_with_CSS">Styling with CSS</h2> + +<p><code><img></code> is a <a href="/en-US/docs/Web/CSS/Replaced_element">replaced element</a>; it has a {{cssxref("display")}} value of <code>inline</code> by default, but its default dimensions are defined by the embedded image's intrinsic values, like it were <code>inline-block</code>. You can set properties like {{cssxref("border")}}/{{cssxref("border-radius")}}, {{cssxref("padding")}}/{{cssxref("margin")}}, {{cssxref("width")}}, {{cssxref("height")}}, etc. on an image.</p> + +<p><code><img></code> has no baseline, so when images are used in an inline formatting context with {{cssxref("vertical-align")}}<code>: baseline</code>, the bottom of the image will be placed on the text baseline.</p> + +<p>You can use the {{cssxref("object-position")}} property to position the image within the element's box, and the {{cssxref("object-fit")}} property to adjust the sizing of the image within the box (for example, whether the image should fit the box or fill it even if clipping is required).</p> + +<p>Depending on its type, an image may have an intrinsic width and height. For some image types, however, intrinsic dimensions are unnecessary. {{glossary("SVG")}} images, for instance, have no intrinsic dimensions if their root {{SVGElement("svg")}} element doesn't have a <code>width</code> or <code>height</code> set on it.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Alternative_text">Alternative text</h3> + +<p>The following example embeds an image into the page and includes alternative text for accessibility.</p> + +<pre class="brush: html notranslate"><img src="https://developer.mozilla.org/static/img/favicon144.png" + alt="MDN logo"> +</pre> + +<p>{{ EmbedLiveSample('Alternative_text', '100%', '160') }}</p> + +<h3 id="Image_link">Image link</h3> + +<p>This example builds upon the previous one, showing how to turn the image into a link. To do so, nest the <code><img></code> tag inside the {{HTMLElement("a")}}. You should made the alternative text describe the resource the link is pointing to, as if you were using a text link instead.</p> + +<pre class="brush: html notranslate"><a href="https://developer.mozilla.org"> + <img src="https://developer.mozilla.org/static/img/favicon144.png" + alt="Visit the MDN site"> +</a></pre> + +<p>{{ EmbedLiveSample('Image_link', '100%', '160') }}</p> + +<h3 id="Using_the_srcset_attribute">Using the srcset attribute</h3> + +<p>In this example we include a <code>srcset</code> attribute with a reference to a high-resolution version of the logo; this will be loaded instead of the <code>src</code> image on high-resolution devices. The image referenced in the <code>src</code> attribute is counted as a <code>1x</code> candidate in {{glossary("User agent", "user agents")}} that support <code>srcset</code>.</p> + +<pre class="brush: html notranslate"> <img src="https://developer.mozilla.org/static/img/favicon72.png" + alt="MDN logo" + srcset="https://developer.mozilla.org/static/img/favicon144.png 2x"></pre> + +<p>{{EmbedLiveSample("Using_the_srcset_attribute", "100%", "160")}}</p> + +<h3 id="Using_the_srcset_and_sizes_attributes">Using the srcset and sizes attributes</h3> + +<p>The <code>src</code> attribute is ignored in {{glossary("User agent", "user agents")}} that support <code>srcset</code> when <code>w</code> descriptors are included. When the <code>(max-width: 600px)</code> media condition matches, the 200 pixel-wide image will load (it is the one that matches <code>200px</code> most closely), otherwise the other image will load.</p> + +<pre class="brush: html notranslate"> <img src="/files/16864/clock-demo-200px.png" + alt="Clock" + srcset="/files/16864/clock-demo-200px.png 200w, + /files/16797/clock-demo-400px.png 400w" + sizes="(max-width: 600px) 200px, 50vw"></pre> + +<p>{{EmbedLiveSample("Using_the_srcset_and_sizes_attributes", "100%", 350)}}</p> + +<div class="blockIndicator note"> +<p>To see the resizing in action, <a href="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/img$samples/Using_the_srcset_and_sizes_attributes">view the example on a separate page</a>, so you can actually resize the content area.</p> +</div> + +<h2 id="Security_and_privacy_concerns">Security and privacy concerns</h2> + +<p>Although <code><img></code> elements have innocent uses, they can have undesirable consequences for user security and privacy. See <a href="/en-US/docs/Web/Security/Referer_header:_privacy_and_security_concerns">Referer header: privacy and security concerns</a> for more information and mitigations.</p> + +<h2 id="Accessibility_concerns">Accessibility concerns</h2> + +<h3 id="Authoring_meaningful_alternate_descriptions">Authoring meaningful alternate descriptions</h3> + +<p>An <code>alt</code> attribute's value should clearly and concisely describe the image's content. It should not describe the presence of the image itself or the file name of the image. If the <code>alt</code> attribute is purposefully left off because the image has no textual equivalent, consider alternate methods to present what the image is trying to communicate.</p> + +<h4 id="Dont">Don't</h4> + +<pre class="brush: html example-bad notranslate"><img alt="image" src="penguin.jpg"> +</pre> + +<h4 id="Do">Do</h4> + +<pre class="brush: html example-good notranslate"><img alt="A Rockhopper Penguin standing on a beach." src="penguin.jpg"> +</pre> + +<p>When an <code>alt</code> attribute is not present on an image, some screen readers may announce the image's file name instead. This can be a confusing experience if the file name isn't representative of the image's contents.</p> + +<ul> + <li><a class="external" href="https://www.w3.org/WAI/tutorials/images/decision-tree/">An alt Decision Tree • Images • WAI Web Accessibility Tutorials</a></li> + <li><a class="external" href="https://axesslab.com/alt-texts/">Alt-texts: The Ultimate Guide — Axess Lab</a></li> + <li><a class="external" href="https://www.deque.com/blog/great-alt-text-introduction/">How to Design Great Alt Text: An Introduction | Deque</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_—_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li> + <li><a class="external" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h3 id="The_title_attribute">The title attribute</h3> + +<p>The {{htmlattrxref("title")}} attribute is not an acceptable substitute for the <code>alt</code> attribute. Additionally, avoid duplicating the <code>alt</code> attribute's value in a <code>title</code> attribute declared on the same image. Doing so may cause some screen readers to announce the description twice, creating a confusing experience.</p> + +<p>The <code>title</code> attribute should also not be used as supplemental captioning information to accompany an image's <code>alt</code> description. If an image needs a caption, use the <code><a href="/en-US/docs/Web/HTML/Element/figure">figure</a></code> and <code><a href="/en-US/docs/Web/HTML/Element/figcaption">figcaption</a></code> elements.</p> + +<p>The value of the <code>title</code> attribute is usually presented to the user as a tooltip, which appears shortly after the cursor stops moving over the image. While this <em>can</em> provide additional information to the user, you should not assume that the user will ever see it: the user may only have keyboard or touchscreen. If you have information that's particularly important or valuable for the user, present it inline using one of the methods mentioned above instead of using <code>title</code>.</p> + +<ul> + <li><a class="external" href="https://developer.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/">Using the HTML title attribute – updated | The Paciello Group</a></li> +</ul> + +<h2 id="Technical_summary">Technical summary</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/Guide/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">phrasing content</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Embedded_content">embedded content</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Palpable_content">palpable content</a>. If the element has a <code>usemap</code> attribute, it also is a part of the interactive content category.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td>None, it is an {{Glossary("empty element")}}.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>Must have a start tag and must not have an end tag.</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts embedded content.</td> + </tr> + <tr> + <th scope="row">Implicit ARIA role</th> + <td> + <ul> + <li>with non-empty <code>alt</code> attribute or no <code>alt</code> attribute: <code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Role_Img">img</a></code></li> + <li>with empty <code>alt</code> attribute: <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">no corresponding role</a></li> + </ul> + </td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td> + <ul> + <li>with non-empty <code>alt</code> attribute: + <ul> + <li><code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/button_role">button</a></code></li> + <li><code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/checkbox_role">checkbox</a></code></li> + <li>{{ARIARole("link")}}</li> + <li>{{ARIARole("menuitem")}}</li> + <li>{{ARIARole("menuitemcheckbox")}}</li> + <li>{{ARIARole("menuitemradio")}}</li> + <li>{{ARIARole("option")}}</li> + <li>{{ARIARole("progressbar")}}</li> + <li>{{ARIARole("scrollbar")}}</li> + <li>{{ARIARole("separator")}}</li> + <li>{{ARIARole("slider")}}</li> + <li><code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Switch_role">switch</a></code></li> + <li><code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role">tab</a></code></li> + <li>{{ARIARole("treeitem")}}</li> + </ul> + </li> + <li>with empty <code>alt</code> attribute, {{ARIARole("none")}} or {{ARIARole("presentation")}}</li> + <li>with no <code>alt</code> attribute, no <code>role</code> permitted</li> + </ul> + </td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLImageElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td> + <td>{{Spec2('Referrer Policy')}}</td> + <td>Added the <code>referrerpolicy</code> attribute.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-img-element', '<img>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'semantics-embedded-content.html#the-img-element', '<img>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.2', '<img>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.img")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></li> + <li><a href="/en-US/docs/Web/Media/Formats/Image_types">Image file type and format guide</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li> + <li>{{HTMLElement("picture")}}, {{HTMLElement("object")}} and {{HTMLElement("embed")}} elements</li> + <li>Other image-related CSS properties: {{cssxref("object-fit")}}, {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, and {{cssxref("image-resolution")}}.</li> +</ul> diff --git a/files/it/web/html/element/index.html b/files/it/web/html/element/index.html new file mode 100644 index 0000000000..d603870350 --- /dev/null +++ b/files/it/web/html/element/index.html @@ -0,0 +1,235 @@ +--- +title: Elementi HTML +slug: Web/HTML/Element +translation_of: Web/HTML/Element +--- +<p>Questo riferimento HTML elenca tutti gli <strong>elementi HTML</strong>, definiti in HTML5 o in una precedente versione. Quando inclusi tra parentesi angolari, essi formano il <em>tag</em> <em>HTML</em>: <code><nomeelemento>.</code> Gli elementi sono entità che specificano come il documento HTML deve essere cosruito, e che tipo di contenuto deve essere posisionato e in quale parte del documento <a href="/en-US/docs/HTML" title="/en-US/docs/HTML">HTML</a>.</p> + +<p>Questa pagina elenca tutti i tag standard HTML5, ma anche i più vecchi, siano obsoleti e deprecati, così come i non-standard che i borwser potrebbero supportare. Gli elementi che sono stati introdotti con l'<a href="/en-US/docs/HTML/HTML5" title="/en-US/docs/HTML/HTML5">HTML5</a> sono spesso contrassegnati come nuovi elementi HTML5, nonostante gli altri elementi standard siano anch' essi validi in HTML5.</p> + +<p>In un documento HTML, un elemento viene definito da un <em>tag di apertura</em>. Se l' elemento inlcude atri contenuti, esso termina con un <em>tag di chiusura</em>, dove il nome dell' elemento viene preceduto da una barra: <code></nomeelemento></code>. Alcuni elementi non necessitano di essere chiusi, come ad esempio gli elementi immagine. Quest' ultimi sono conosciuti come <em>vuoti</em>. Il documento HTML contiene un albero di questi elementi. Ognuno è nominato per rappresentare cosa fa. Ad esempio, l' elemento <code><title></code> rappresenta il titolo del documento. Di seguito è presente una lista in ordine alfabetico degli elementi HTML.</p> + +<div class="index"><span id="A">A</span> + +<ul> + <li>{{ HTMLElement("a") }}</li> + <li>{{ HTMLElement("abbr") }}</li> + <li><s class="obsoleteElement">{{ HTMLElement("acronym") }}</s></li> + <li>{{ HTMLElement("address") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("applet") }}</s></li> + <li>{{ HTMLElement("area") }}</li> + <li class="html5">{{ HTMLElement("article") }}{{HTMLVersionInline("5")}}</li> + <li class="html5">{{ HTMLElement("aside") }}{{HTMLVersionInline("5")}}</li> + <li class="html5">{{ HTMLElement("audio") }}{{HTMLVersionInline("5")}}</li> +</ul> +<span id="B">B</span> + +<ul> + <li>{{ HTMLElement("b") }}</li> + <li>{{ HTMLElement("base") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("basefont") }}</s></li> + <li class="html5">{{ HTMLElement("bdi") }}{{HTMLVersionInline("5")}}</li> + <li>{{ HTMLElement("bdo") }}</li> + <li><s class="nonStdElement">{{ HTMLElement("bgsound") }}</s></li> + <li><s class="obsoleteElement">{{ HTMLElement("big") }}</s></li> + <li><s class="nonStdElement">{{ HTMLElement("blink") }}</s></li> + <li>{{ HTMLElement("blockquote") }}</li> + <li>{{ HTMLElement("body") }}</li> + <li>{{ HTMLElement("br") }}</li> + <li>{{ HTMLElement("button") }}</li> +</ul> +<span id="C">C</span> + +<ul> + <li class="html5">{{ HTMLElement("canvas") }}</li> + <li>{{ HTMLElement("caption") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("center") }}</s></li> + <li>{{ HTMLElement("cite") }}</li> + <li>{{ HTMLElement("code") }}</li> + <li>{{ HTMLElement("col") }}</li> + <li>{{ HTMLElement("colgroup") }}</li> + <li class="html5">{{ HTMLElement("command") }}</li> +</ul> +<span id="D">D</span> + +<ul> + <li class="html5">{{ HTMLElement("data") }}</li> + <li class="html5">{{ HTMLElement("datalist") }}</li> + <li>{{ HTMLElement("dd") }}</li> + <li>{{ HTMLElement("del") }}</li> + <li class="html5">{{ HTMLElement("details") }}</li> + <li>{{ HTMLElement("dfn") }}</li> + <li>{{ HTMLElement("dialog") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("dir") }}</s></li> + <li>{{ HTMLElement("div") }}</li> + <li>{{ HTMLElement("dl") }}</li> + <li>{{ HTMLElement("dt") }}</li> +</ul> +<span id="E">E</span> + +<ul> + <li>{{ HTMLElement("em") }}</li> + <li class="html5">{{ HTMLElement("embed") }}</li> +</ul> +<span id="F">F</span> + +<ul> + <li>{{ HTMLElement("fieldset") }}</li> + <li>{{ HTMLElement("figcaption") }}</li> + <li class="html5">{{ HTMLElement("figure") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("font") }}</s></li> + <li class="html5">{{ HTMLElement("footer") }}</li> + <li>{{ HTMLElement("form") }}</li> + <li><s class="obsoleteElement">{{ HTMLElement("frame") }}</s></li> + <li><s class="obsoleteElement">{{ HTMLElement("frameset") }}</s></li> +</ul> +<span id="G">G H</span> + +<ul> + <li>{{ HTMLElement("h1") }}</li> + <li>{{ HTMLElement("h2") }}</li> + <li>{{ HTMLElement("h3") }}</li> + <li>{{ HTMLElement("h4") }}</li> + <li>{{ HTMLElement("h5") }}</li> + <li>{{ HTMLElement("h6") }}</li> + <li>{{ HTMLElement("head") }}</li> + <li class="html5">{{ HTMLElement("header") }}</li> + <li class="html5"><s class="obsoleteElement">{{ HTMLElement("hgroup") }}</s></li> + <li>{{ HTMLElement("hr") }}</li> + <li>{{ HTMLElement("html") }}</li> +</ul> +<span id="I">I</span> + +<ul> + <li>{{ HTMLElement("i") }}</li> + <li>{{ HTMLElement("iframe") }}</li> + <li>{{ HTMLElement("img") }}</li> + <li>{{ HTMLElement("input") }}</li> + <li>{{ HTMLElement("ins") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("isindex") }}</s></li> +</ul> +<span id="J">J K</span> + +<ul> + <li>{{ HTMLElement("kbd") }}</li> + <li class="html5"><s class="deprecatedElement obsoleteElement">{{ HTMLElement("keygen") }}</s></li> +</ul> +<span id="L">L</span> + +<ul> + <li>{{ HTMLElement("label") }}</li> + <li>{{ HTMLElement("legend") }}</li> + <li>{{ HTMLElement("li") }}</li> + <li>{{ HTMLElement("link") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("listing") }}</s></li> +</ul> +<span id="M">M</span> + +<ul> + <li class="html5">{{HTMLElement("main")}}</li> + <li>{{ HTMLElement("map") }}</li> + <li class="html5">{{ HTMLElement("mark") }}</li> + <li><s class="nonStdElement">{{ HTMLElement("marquee") }}</s></li> + <li class="html5">{{ HTMLElement("menu") }}</li> + <li>{{ HTMLElement("meta") }}</li> + <li class="html5">{{ HTMLElement("meter") }}</li> +</ul> +<span id="N">N</span> + +<ul> + <li class="html5">{{ HTMLElement("nav") }}</li> + <li><s class="nonStdElement">{{ HTMLElement("nobr") }}</s></li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("noframes") }}</s></li> + <li>{{ HTMLElement("noscript") }}</li> +</ul> +<span id="O">O</span> + +<ul> + <li>{{ HTMLElement("object") }}</li> + <li>{{ HTMLElement("ol") }}</li> + <li>{{ HTMLElement("optgroup") }}</li> + <li>{{ HTMLElement("option") }}</li> + <li class="html5">{{ HTMLElement("output") }}</li> +</ul> +<span id="P">P</span> + +<ul> + <li>{{ HTMLElement("p") }}</li> + <li>{{ HTMLElement("param") }}</li> + <li>{{ HTMLElement("picture") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("plaintext") }}</s></li> + <li>{{ HTMLElement("pre") }}</li> + <li class="html5">{{ HTMLElement("progress") }}</li> +</ul> +<span id="Q">Q</span> + +<ul> + <li>{{ HTMLElement("q") }}</li> +</ul> +<span id="R">R</span> + +<ul> + <li class="html5">{{ HTMLElement("rp") }}</li> + <li class="html5">{{ HTMLElement("rt") }}</li> + <li class="html5">{{ HTMLElement("rtc") }}</li> + <li class="html5">{{ HTMLElement("ruby") }}</li> +</ul> +<span id="S">S</span> + +<ul> + <li>{{ HTMLElement("s") }}</li> + <li>{{ HTMLElement("samp") }}</li> + <li>{{ HTMLElement("script") }}</li> + <li class="html5">{{ HTMLElement("section") }}</li> + <li>{{ HTMLElement("select") }}</li> + <li>{{ HTMLElement("small") }}</li> + <li class="html5">{{ HTMLElement("source") }}</li> + <li><s class="nonStdElement">{{ HTMLElement("spacer") }}</s></li> + <li>{{ HTMLElement("span") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("strike") }}</s></li> + <li>{{ HTMLElement("strong") }}</li> + <li>{{ HTMLElement("style") }}</li> + <li>{{ HTMLElement("sub") }}</li> + <li class="html5">{{ HTMLElement("summary") }}</li> + <li>{{ HTMLElement("sup") }}</li> +</ul> +<span id="T">T</span> + +<ul> + <li>{{ HTMLElement("table") }}</li> + <li>{{ HTMLElement("tbody") }}</li> + <li>{{ HTMLElement("td") }}</li> + <li>{{ HTMLElement("template") }}</li> + <li>{{ HTMLElement("textarea") }}</li> + <li>{{ HTMLElement("tfoot") }}</li> + <li>{{ HTMLElement("th") }}</li> + <li>{{ HTMLElement("thead") }}</li> + <li class="html5">{{ HTMLElement("time") }}</li> + <li>{{ HTMLElement("title") }}</li> + <li>{{ HTMLElement("tr") }}</li> + <li class="html5">{{ HTMLElement("track") }}</li> + <li><s class="obsoleteElement">{{ HTMLElement("tt") }}</s></li> +</ul> +<span id="U">U</span> + +<ul> + <li>{{ HTMLElement("u") }}</li> + <li>{{ HTMLElement("ul") }}</li> +</ul> +<span id="V">V</span> + +<ul> + <li>{{ HTMLElement("var") }}</li> + <li class="html5">{{ HTMLElement("video") }}</li> +</ul> +<span id="W">W</span> + +<ul> + <li class="html5">{{ HTMLElement("wbr") }}</li> +</ul> +<span id="X">X Y Z </span> + +<ul> + <li><span id="X"><s class="deprecatedElement obsoleteElement">{{ HTMLElement("xmp") }}</s></span></li> +</ul> +</div> diff --git a/files/it/web/html/element/input/file/index.html b/files/it/web/html/element/input/file/index.html new file mode 100644 index 0000000000..1c67ba6c45 --- /dev/null +++ b/files/it/web/html/element/input/file/index.html @@ -0,0 +1,520 @@ +--- +title: <input type="file"> +slug: Web/HTML/Element/input/file +translation_of: Web/HTML/Element/input/file +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">Gli elementi {{HTMLElement("input")}} con <strong><code>type="file"</code></strong> danno all'utente la possibilità di scegliere uno o più file dalla memoria del proprio dispositivo. Una volta scelti, i file possono essere caricati su un server usando l'<a href="/it/docs/Learn/HTML/Forms">invio del modulo</a>, oppure manipolati usando del codice JavaScript e l'<a href="/it/docs/Web/API/File/Using_files_from_web_applications">API File</a></span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-file.html", "tabbed-shorter")}}</div> + +<div class="hidden">Il codice sorgente di questo esempio interattivo è salvato in un repository GitHub. Se volessi contribuire al progetto di esempi interattivi, clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> ed inviaci una "pull request".</div> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>Una {{domxref("DOMString")}} che rappresenta il percorso del file selezionato.</td> + </tr> + <tr> + <td><strong>Eventi</strong></td> + <td>{{domxref("HTMLElement/change_event", "change")}} e {{domxref("HTMLElement/input_event", "input")}}</td> + </tr> + <tr> + <td><strong>Attributi comuni supportati</strong></td> + <td>{{htmlattrxref("required", "input")}}</td> + </tr> + <tr> + <td><strong>Attributi aggiuntivi</strong></td> + <td>{{htmlattrxref("accept", "input/file")}}, {{htmlattrxref("capture", "input/file")}}, {{htmlattrxref("files", "input/file")}}, {{htmlattrxref("multiple", "input/file")}}</td> + </tr> + <tr> + <td><strong>Attributi IDL</strong></td> + <td><code>files</code> e <code>value</code></td> + </tr> + <tr> + <td><strong>Interfaccia DOM</strong></td> + <td> + <p>{{domxref("HTMLInputElement")}}</p> + </td> + </tr> + <tr> + <td><strong>Proprietà</strong></td> + <td> + <p><a href="/it/docs/Web/API/HTMLInputElement#Properties_file">Proprietà che si applicano soload elementi di tipo file</a></p> + </td> + </tr> + <tr> + <td><strong>Metodi</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Value">Value</h2> + +<p>L'attributo <code>value</code> di un <code>file</code> contiene una {{domxref("DOMString")}} che rappresenta il percorso del file selezionato. Se l'utente seleziona più di un file, l'attributo <code>value</code> rappresenta il primo file nella lista di quelli selezionati. Gli altri file possono essere identificati usando la proprietà <code>HTMLInputElement.files</code>.</p> + +<div class="note"><strong>Note:</strong> + +<ol> + <li>Se vengono selezionati più file, la stringa rappresenta il primo. JavaScript può accedere agli atri file <a href="/it/docs/Using_files_from_web_applications#Getting_information_about_selected_files">attraverso la proprietà <code>files</code> dell'elemento <code>input</code></a></li> + <li>Se non è stato ancora selezionato nessun file, la stringa è <code>""</code> (vuota)</li> + <li>Alla stringa viene aggiunto il prefisso <code>C:\fakepath\</code>, per impedire a software malevolo di intuire la struttura del filesystem dell'utente.</li> +</ol> +</div> + +<h2 id="Attributi_aggiuntivi">Attributi aggiuntivi</h2> + +<p>In aggiunta agli attributi comuni a tutti gli elementi {{HTMLElement("input")}}, gli <code>input</code> di tipo <code>file</code> supportano anche i seguenti: </p> + + + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Attributo</th> + <th scope="col">Descrizone</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("accept")}}</code></td> + <td>Uno o più {{anch("Identificatori univoci del tipo di file", "Identificatori univoci del tipo di file")}} che descrivono i tipi di file ammessi</td> + </tr> + <tr> + <td><code>{{anch("capture")}}</code></td> + <td>La sorgente da utilizzare per catturare immagini o dati video</td> + </tr> + <tr> + <td><code>{{anch("files")}}</code></td> + <td>Una {{domxref("FileList")}} che elenca i file scelti</td> + </tr> + <tr> + <td><code>{{anch("multiple")}}</code></td> + <td>Un valore booleano che, se presente, indica che l'utente può selezionare più di un file</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefaccept">{{htmlattrdef("accept")}}</h3> + +<p>Il valore dell'attributo <code><a href="/it/docs/Web/HTML/Attributes/accept">accept</a></code> è una stringa che definisce i tipi di file che l'<code>input</code> accetta.<br> + La stringa è un lista di <strong>{{anch("Identificatori univoci del tipo di file", "Identificatori univoci del tipo di file")}}</strong> separati da virgola. Poiché un determinato tipo di file può essere identificato in più di un modo, è utile fornire un set completo di identificatori di tipo quando sono necessari file di un determinato formato.</p> + +<p>Per esempio, ci sono diversi modi in cui un file di Microsoft Word può essere identificato, quindi un sito che accetta file di Word dovrebbe utilizzare un <code>input</code> come questo:</p> + +<pre class="brush: html"><input type="file" id="docpicker" + accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"></pre> + +<h3 id="htmlattrdefcapture">{{htmlattrdef("capture")}}</h3> + +<p>Il valore dell'attributo <code><a href="/it/docs/Web/HTML/Attributes/capture">capture</a></code> è una stringa che specifica quale camera utilizzare per catturare immagini o dati video, se l'attributo <code><a href="/it/docs/Web/HTML/Attributes/accept">accept</a></code> indica che l'input possa essere di uno di questi due tipi. Il valore <code>user</code> indica che devono essere usati il microfono e/o la camera frontali (lato utente). Il valore <code>environment</code> specifica che devono essere usati il microfono e/o la camera posteriori (lato ambiente). Se l'attributo manca, lo {{Glossary("user agent")}} è libero di scegliere quale tra i due utilizzare secodo le proprie specifiche. Se lo strumento di cattura indicato non è presente, lo {{Glossary("user agent")}} può far ricadere la scelta sulla propria modalità predefinita.</p> + +<div class="note"><strong>Note:</strong> <code>capture</code> originariamente era un attributo booleano che, se presente, richiedeva l'utilizzo di un dispositivo di acquisizione multimediale invece del caricamento di un file.</div> + +<h3 id="htmlattrdeffiles">{{htmlattrdef("files")}}</h3> + +<p>Un oggetto {{domxref("FileList")}} che elenca tutti i file selezionati. Questa lista contiene al massimo un elemento, salvo che non sia stato specificato l'attributo {{htmlattrxref("multiple", "input/file")}}.</p> + +<h3 id="htmlattrdefmultiple">{{htmlattrdef("multiple")}}</h3> + +<p>Quando l'attributo booleano <a href="/en-US/docs/Web/HTML/Attributes/multiple"><code>multiple</code></a> è specificato, il controllo consente di caricare più di un file.</p> + +<h2 id="Attributi_non_standard">Attributi non standard</h2> + +<p>Oltre agli atributi elencati sopra, su alcuni browser sono disponibili anche i seguenti attributi. In generale è consigliabile evitarne l'utilizzo laddove possibile, per consentire una completa funzionalità anche sui browser che non li implementano.</p> + +<table class="standard-table" style=""> + <thead> + <tr> + <th scope="col">Attribute</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("webkitdirectory")}}</code></td> + <td> + <p>Un valore booleano che indica se consentire o meno di poter selezionare una o più cartelle (se è presente anche l'attributo <code>{{anch("multiple")}}</code>)</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefwebkitdirectory_non-standard_inline">{{htmlattrdef("webkitdirectory")}} {{non-standard_inline}}</h3> + +<div id="webkitdirectory-include"> +<p>L'attributo booleano <code>webkitdirectory</code> indica, se presente, che possono essere selezionate solo cartelle nell'interfaccia di selezione dell'utente. Si veda {{domxref("HTMLInputElement.webkitdirectory")}} per ulteriori esempi.</p> + +<div class="note"> +<p><strong>Note:</strong> Anche se originariamente implementato solo per i browser basati su WebKit, l'attributo <code>webkitdirectory</code> è utilizzabile anche su Microsoft Edge e Firefox 50 o superiori. Comunque, anche se ha un supporto relativemente ampio, non è uno standard e dovrebbe essere evitato laddove non strettamente necessario.</p> +</div> +</div> + +<h2 id="Identificatori_univoci_del_tipo_di_file">Identificatori univoci del tipo di file</h2> + +<p>Un <strong>identificatore univoco del tipo di file</strong> è una stringa che descrive un tipo di file che può essere selezionato dall'utente in una elemento {{HTMLElement("input")}} di tipo <code>file</code>. Ogni identificatore univoco del tipo di file può avere una delle seguenti forme:</p> + +<ul> + <li>Una estensione di nomi file valida, che inizia con un carattere di punto ("."). E.g.: <code>.jpg</code>, <code>.pdf</code> o <code>.doc</code>.</li> + <li>Una stringa identificativa di un MIME-type, senza estensione.</li> + <li>La stringa <code>audio/*</code> ad indicare "qualunque file audio".</li> + <li>La stringa <code>video/*</code> ad indicare "qualunque file video".</li> + <li>La stringa <code>image/*</code> ad indicare "qualunque file immagine".</li> +</ul> + +<p>L'attributo <code>accept</code> assume come valore una stringa contenente uno o più di questi identificatori univoci del tipo di file, separati da virgole. Per esempio, </p> + +<p>The <code>accept</code> attribute takes as its value a string containing one or more of these unique file type specifiers, separated by commas. Per esempio, un selettore di file che necessiti di contenuto che possa essere rappresentato come un'immagine, inclusi sia i formati immagine standard che file PDF, potrebbe apparire così:</p> + +<pre class="brush: html"><input type="file" accept="image/*,.pdf"></pre> + +<h2 id="Utilizzo_degli_input_di_tipo_file">Utilizzo degli input di tipo file</h2> + +<h3 id="Un_esempio_base">Un esempio base</h3> + +<pre class="brush: html"><form method="post" enctype="multipart/form-data"> + <div> + <label for="file">Scegli un file da caricare</label> + <input type="file" id="file" name="file" multiple> + </div> + <div> + <button>Invia</button> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css">div { + margin-bottom: 10px; +}</pre> +</div> + +<p>Produce l'output seguente:</p> + +<p>{{EmbedLiveSample('Un_esempio_base', 650, 60)}}</p> + +<div class="note"> +<p><strong>Note</strong>: Puoi trovare questo esempio, in lingua inglese, anche su GitHub — qui puoi trovarne i sorgenti <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/simple-file.html">i sorgenti</a>, ed anche una <a href="https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html">una dimostrazione di funzionamento</a>.</p> +</div> + +<p>Indipendentemente dal sistema operativo o dal dispositivo dell'utente, il file input fornisce un bottone che apre una finestra di selezione che consente all'utente di scegliere un file.</p> + +<p>Includendo l'attributo {{htmlattrxref("multiple", "input/file")}}, come mostrato di seguito, specifica che possono essere selezionati più file in un'unica istanza. L'utente può selezionare più file in un qualunque modo consentito dalla propria piattaforma (ad esempio tenendo premuto il tasto <kbd>Shift</kbd> o <kbd>Ctrl</kbd>, e quindi cliccando). Se si desidera che l'utente scelga un solo file per <code><input></code> è sufficiente omettere l'attributo <code>multiple</code>.</p> + +<h3 id="Ottenere_informazioni_sui_file_selezionati">Ottenere informazioni sui file selezionati</h3> + +<p>I file selezionati sono restituiti dalla proprietà dell'elemento <code>HTMLInputElement.files</code>, che è un oggetto {{domxref("FileList")}} contenente una lista di oggetti {{domxref("File")}}. La <code>FileList</code> si comporta come un'array, quindi si può controllarne la proprietà <code>length</code> per conoscere il numero di file selezionati.</p> + +<p>Ogni oggetto <code>File</code> contiene le seguenti informazioni:</p> + +<dl> + <dt><code>name</code></dt> + <dd>Il nome del file</dd> + <dt><code>lastModified</code></dt> + <dd>Un numero che indica la data e l'ora dell'ultima modifica, espressa in millisecondi dalla "UNIX epoch" (1° Gennaio 1970 a mezzanotte).</dd> + <dt><code>lastModifiedDate</code> {{deprecated_inline}}</dt> + <dd>Un oggetto {{jsxref("Date")}} che rappresenta la data e l'ora dell'ultuima modifica. <em>La proprietà è deprecata e non dovrebbe essere utilizzata. Al suo posto utilizzare la proprietà <code>lastModified</code>.</em></dd> + <dt><code>size</code></dt> + <dd>La dimensione del file in byte.</dd> + <dt><code>type</code></dt> + <dd>Il <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME-type</a> del file.</dd> + <dt><code>webkitRelativePath</code> {{non-standard_inline}}</dt> + <dd>Una stringa che rappresenta il perorso del file relativo alla cartella selezionata in un appostito selettore di cartelle (i.g. un selettore di file in cui l'attributo {{htmlattrxref("webkitdirectory", "input/file")}} è stato impostato). <em>Non è una proprietà standard e va utilizzata con attenzione</em></dd> +</dl> + +<div class="note"> +<p><strong>Note</strong>: È possibile leggere e scrivere il valore di <code>HTMLInputElement.files</code> in tutti i browser più recenti; in Firefox è stato in all modern browsers; su Firefox questa caratteristica è stata aggiunta di recente, nella versione 57 (si veda {{bug(1384030)}}).</p> +</div> + +<h3 id="Limitare_i_tipi_di_file_accettati">Limitare i tipi di file accettati</h3> + +<p>Spesso si ha la necessità che l'utente non si libero di selezionare arbitrariamente qualunque tipologia di file; quanto piuttosto consentire che possa selezionare file di un tipo specifico. Per esempio, se un file input consente agli utenti di caricare un'immagine di profilo, molto probabilmente occorrerà consentire solo il aricamento di formati immagine compatibili con il web, come {{Glossary("JPEG")}} o {{Glossary("PNG")}}.</p> + +<p>I tipi di file accettati possono essere specificati con l'attributo {{htmlattrxref("accept","input/file")}}, che prende una lista di estensioni consentite o MIME-type, separate da virgola. Ecco alcuni esempi:</p> + +<ul> + <li><code>accept="image/png"</code> o <code>accept=".png"</code> — Accetta file PNG.</li> + <li><code>accept="image/png, image/jpeg"</code> o <code>accept=".png, .jpg, .jpeg"</code> — Accetta file PNG o JPEG.</li> + <li><code>accept="image/*"</code> — Accetta qualunque file con MIME-type <code>image/*</code>. (Molti dispositivi mobili consentono all'utente di scattare una foto quando viene specificato questo formato)</li> + <li><code>accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"</code> — accetta qualunque file che sembri un documento di MS Word.</li> +</ul> + +<p>Osserviamo un esempio più completo:</p> + +<pre class="brush: html"><form method="post" enctype="multipart/form-data"> + <div> + <label for="profile_pic">Scegli un file da caricare</label> + <input type="file" id="profile_pic" name="profile_pic" + accept=".jpg, .jpeg, .png"> + </div> + <div> + <button>Invia</button> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css">div { + margin-bottom: 10px; +}</pre> +</div> + +<p>Questo produce un output simile a quello dell'esempio precedente:{{EmbedLiveSample('Limitare_i_tipi_di_file_accettati', 650, 60)}}</p> + +<div class="note"> +<p><strong>Note</strong>: L'esempio si trova, nella versione inglese, anche su GitHub — qui puoi trovarne <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-with-accept.html">i sorgenti</a> ed anche una <a href="https://mdn.github.io/learning-area/html/forms/file-examples/file-with-accept.html">dimostrazione di funzionamento</a>.</p> +</div> + +<p>Potrebbe sembrare simile, ma se si prova a selezionare un file, si vedrà che il selettore consente di scegliere solo i tipi di file specificati nell'attributo <code>accept</code> (il comportamento preciso differisce in base al browser ed al filesystem)</p> + +<p><img alt="Screenshot of a macOS file picker dialog. Files other than JPEG are grayed-out and unselectable." src="https://mdn.mozillademos.org/files/15183/file-chooser.png" style="margin: 0 auto;"></p> + +<p>L'attributo accept non valida i tipi dei file selezionati; semplicemente fornisce un suggerimento per il browser per guidare l'utente alla scelta di file del tipo giusto. In molti casi è ancora possibile per l'utente abilitare o disabilitare un'opzione nel selettore di file che rende possibile sovrascrivere questa limitazione e quindi selezionare i file che vuole, scegliendone uno di un tipo non corretto.</p> + +<p>A causa di ciò è buona norma accertarsi che l'attributo accept sia corredato da una corretta validazione lato server.</p> + +<h3 id="Note">Note</h3> + +<ol> + <li> + <p>Non è possibile impostare il valore di un selettore di file da uno script — una operazione del genere non sortisce alcun effetto:</p> + + <pre class="brush: js">const input = document.querySelector("input[type=file]"); +input.value = "foo"; +</pre> + </li> + <li> + <p>Quando un file viene selezionato usando un <code><input type="file"></code>, il percorso reale del file originale non viene mostrato nell'attributo <code>value</code> per ovvie ragioni di sicurezza. Il nome del file invece viene mostrato, con aggiunti il percorso fittizio <code>C:\fakepath\</code> in cima. </p> + </li> + <li> + <p>When a file is chosen using an <code><input type="file"></code>, the real path to the source file is not shown in the input's <code>value</code> attribute for obvious security reasons. Instead, the filename is shown, with <code>C:\fakepath\</code> appended to the beginning of it. Ci sono alcune ragioni storiche per questa stranezza, ma è supportata da tutti i browser moderni ed in effetti è definita nelle specifiche.</p> + </li> +</ol> + +<h2 id="Esempi">Esempi</h2> + +<p>In questo esempio mostreremo un selettore di file leggermente più sofisticato, che sfrutta le informazioni sui file disponibili nella proprietà <code>HTMLInputElement.files</code>, oltre a mostrare qualche trucchetto.</p> + +<div class="note"> +<p><strong>Note</strong>: Puoi trovare il sorgente completo della versione inglese di questo esempio si GitHub — <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-example.html">file-example.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/file-examples/file-example.html">click qui per provarne il comportamento dal vivo</a>). Non ne spiegheremo il CSS, essendo il JavaScript l'obiettivo principale.</p> +</div> + +<p>Per prima cosa osserviamo l'HTML:</p> + +<pre class="brush: html"><form method="post" enctype="multipart/form-data"> + <div> + <label for="image_uploads">Seleziona le immagini da caricare (PNG, JPG)</label> + <input type="file" id="image_uploads" name="image_uploads" accept=".jpg, .jpeg, .png" multiple> + </div> + <div class="preview"> + <p>Nessun file attualmente selezionato</p> + </div> + <div> + <button>Invia</button> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css">html { + font-family: sans-serif; +} + +form { + width: 580px; + background: #ccc; + margin: 0 auto; + padding: 20px; + border: 1px solid black; +} + +form ol { + padding-left: 0; +} + +form li, div > p { + background: #eee; + display: flex; + justify-content: space-between; + margin-bottom: 10px; + list-style-type: none; + border: 1px solid black; +} + +form img { + height: 64px; + order: 1; +} + +form p { + line-height: 32px; + padding-left: 10px; +} + +form label, form button { + background-color: #7F9CCB; + padding: 5px 10px; + border-radius: 5px; + border: 1px ridge black; + font-size: 0.8rem; + height: auto; +} + +form label:hover, form button:hover { + background-color: #2D5BA3; + color: white; +} + +form label:active, form button:active { + background-color: #0D3F8F; + color: white; +}</pre> +</div> + +<p>Questo, ancora una volta, è simile all'esempio precedente - nulla di speciale di cui aggiungere commenti.</p> + +<p>Proseguiamo con il JavaScript.</p> + +<p>Nelle prime righe dello script ricaviamo i riferimenti all'input stesso della form, e l'elemento {{htmlelement("div")}} di classe <code>.preview</code>. In seguito nascondiamo l'elemento {{htmlelement("input")}} — facciamo questa operazione perchè i file input di solito non hanno un bell'aspetto ed hanno uno stile piuttosto inconsistente tra un browser e l'altro. Si potrà quindi attivare l'elemento <code>input</code> cliccando sulla sua {{htmlelement("label")}}, così che sia più comodo nascondele l'input e dare uno stile alla <code>label</code> simile ad un bottone, così che l'utente sappia che si tratti di un elemento interattivo ed interagisca con questo per caricare i file.</p> + +<pre class="brush: js">const input = document.querySelector('input'); +const preview = document.querySelector('.preview'); + +input.style.opacity = 0;</pre> + +<div class="note"> +<p><strong>Note:</strong> La {{cssxref("opacity")}} viene utilizzata per nascondere il file input al posto di {{cssxref("visibility", "visibility: hidden")}} o {{cssxref("display", "display: none")}}, perchè le tecnologie assistive interpretano gli ultimi due stili come un'indicazione che non si tratti di elementi interattivi.</p> +</div> + +<p>A questo punto aggiungiamo un "event listener" all'input, che intercetti il cambio di elementi selezionati (in questo caso qundo i file vengono selezionati). L'event listener invoca la nostra funzione <code>updateImageDisplay()</code>.</p> + +<pre class="brush: js">input.addEventListener('change', updateImageDisplay);</pre> + +<p>Quando viene invocata la funzione <code>updateImageDisplay()</code>:</p> + +<ul> + <li>Usiamo un loop {{jsxref("Statements/while", "while")}} per svuotare il <code><div></code> del contenuto precedente.</li> + <li>Prendiamo l'oggetto {{domxref("FileList")}} che contiene le informazioni di tutti i file selezionati e lo salviamo in una variabile che chiamiamo <code>curFiles</code>.</li> + <li>Controlliamo che non sia selezionato alcun file, verificando che <code>curFiles.length</code> sia ugule a 0, nel qual caso stampiamo un messaggio nel <code><div></code> ad indicare che non ci sono file selezionati.</li> + <li>Se ci sono file selezionati, cicliamo su ciascuno, stampandone le informazioni nel <code><div></code> di anteprima. Da notare:</li> + <li>Usiamo la funzione <code>validFileType()</code> per controllare che il file sia del tipo corretto (e.g. che il tipo di immagine sia tra quelli specificati nell'attributo <code>accept</code>).</li> + <li>Se così fosse: + <ul> + <li>Stampiamo il nome e la dimensione del file in una lista nel preedente <code><div></code>. La funzione <code>returnFileSize()</code> restituisce una versione formattata della dimensione in bytes/KB/MB (di default il browser riporta una dimensione assoluta in bytes)</li> + <li>Generiamo una anteprima in miniatira dell'immagine chiamando {{domxref("URL.createObjectURL", "URL.createObjectURL(curFiles[i])")}}. Quindi inseriamo l'immagine anche nella lista di oggetti creando un nuovo tag {{htmlelement("img")}} ed impostando la sua {{htmlattrxref("src", "img")}} con la miniatura generata.</li> + </ul> + </li> + <li>Se il tipo di file non è valido mostriamo un messaggio nella lista di oggetti per indicare all'utente che deve selezionarne uno di un tipo differente.</li> +</ul> + +<pre class="brush: js">function updateImageDisplay() { + while(preview.firstChild) { + preview.removeChild(preview.firstChild); + } + + const curFiles = input.files; + if(curFiles.length === 0) { + const para = document.createElement('p'); + para.textContent = 'Nessun file selezionato per il caricamento'; + preview.appendChild(para); + } else { + const list = document.createElement('ol'); + preview.appendChild(list); + + for(const file of curFiles) { + const listItem = document.createElement('li'); + const para = document.createElement('p'); + if(validFileType(file)) { + para.textContent = `File ${file.name}, dimensione ${returnFileSize(file.size)}.`; + const image = document.createElement('img'); + image.src = URL.createObjectURL(file); + + listItem.appendChild(image); + listItem.appendChild(para); + } else { + para.textContent = `File ${file.name}: tipo di file non valido. Aggiorna la tua selezione.`; + listItem.appendChild(para); + } + + list.appendChild(listItem); + } + } +}</pre> + +<p>La funzione personlizzata <code>validFileType()</code> prende un oggetto {{domxref("File")}} come parametro, quindi usa {{jsxref("Array.prototype.includes()")}} per verificare che ci sia almeno una corrispondenza con la proprietà <code>type</code> del file. Se viene trovata una corrispodenza la funzione restituisce il valore <code>true</code>, altrimenti <code>false</code>.</p> + +<pre class="brush: js">// https://developer.mozilla.org/it/docs/Web/Media/Formats/Image_types +const fileTypes = [ + "image/apng", + "image/bmp", + "image/gif", + "image/jpeg", + "image/pjpeg", + "image/png", + "image/svg+xml", + "image/tiff", + "image/webp", + "image/x-icon" +]; + +function validFileType(file) { + return fileTypes.includes(file.type); +}</pre> + +<p>La funzione <code>returnFileSize()</code> prende un numero (di byte, preso dalla proprietà <code>size</code>), e lo trasforma in una stringa correttamente formattata in bytes/KB/MB.</p> + +<pre class="brush: js">function returnFileSize(number) { + if(number < 1024) { + return number + 'bytes'; + } else if(number >= 1024 && number < 1048576) { + return (number/1024).toFixed(1) + 'KB'; + } else if(number >= 1048576) { + return (number/1048576).toFixed(1) + 'MB'; + } +}</pre> + +<p>L'esempio è simile al seguente, proviamo:</p> + +<p>{{EmbedLiveSample('Esempi', '100%', 200)}}</p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'input.html#file-upload-state-(type=file)', '<input type="file">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Definzione iniziale</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#file-upload-state-typefile', '<input type="file">')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Definizione iniziale</td> + </tr> + <tr> + <td>{{SpecName('HTML Media Capture', '#the-capture-attribute','capture attribute')}}</td> + <td>{{Spec2('HTML Media Capture')}}</td> + <td>Attributo <code>capture</code> iniziale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_browser">Compatibilità browser</h2> + + + +<p>{{Compat("html.elements.input.input-file")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/File/Using_files_from_web_applications">Using files from web applications</a> — contiene numerosi altri esempi utili correlati all'<code><input type="file"></code> e alle <a href="/en-US/docs/Web/API/File">File API</a>.</li> + <li><a href="/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_controls">Compatibility of CSS properties</a></li> +</ul> diff --git a/files/it/web/html/element/input/index.html b/files/it/web/html/element/input/index.html new file mode 100644 index 0000000000..0bc23cfd54 --- /dev/null +++ b/files/it/web/html/element/input/index.html @@ -0,0 +1,576 @@ +--- +title: '<input>: The Input (Form Input) element' +slug: Web/HTML/Element/input +tags: + - Data entry + - Element + - Forms + - HTML + - HTML forms + - HTML input tag + - Input + - MakeBrowserAgnostic + - NeedsBrowserCompatibility + - NeedsMobileBrowserCompatibility + - NeedsTranslation + - Reference + - TopicStub + - Web +translation_of: Web/HTML/Element/input +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">The <strong>HTML <code><input></code> element</strong> is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and {{Glossary("user agent")}}.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-shorter")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<h2 id="Form_<input>_types">Form <code><input></code> types</h2> + +<p>How an <code><input></code> works varies considerably depending on the value of its <code>type</code> attribute, hence the different types are covered in their own separate reference pages. If this attribute is not specified, the default type adopted is <code>text</code>.</p> + +<p>The available types are as follows:</p> + +<ul> + <li><code>{{HTMLElement("input/button", "button")}}</code>: A push button with no default behavior.</li> + <li><code>{{HTMLElement("input/checkbox", "checkbox")}}</code>: A check box allowing single values to be selected/deselected.</li> + <li><code>{{HTMLElement("input/color", "color")}}</code>: {{HTMLVersionInline("5")}} A control for specifying a color. A color picker's UI has no required features other than accepting simple colors as text (<a href="https://www.w3.org/TR/html5/forms.html#color-state-(type=color)">more info</a>).</li> + <li><code>{{HTMLElement("input/date", "date")}}</code>: {{HTMLVersionInline("5")}} A control for entering a date (year, month, and day, with no time).</li> + <li><code>{{HTMLElement("input/datetime-local", "datetime-local")}}</code>: {{HTMLVersionInline("5")}} A control for entering a date and time, with no time zone.</li> + <li><code>{{HTMLElement("input/email", "email")}}</code>: {{HTMLVersionInline("5")}} A field for editing an e-mail address.</li> + <li><code>{{HTMLElement("input/file", "file")}}</code>: A control that lets the user select a file. Use the <strong>accept</strong> attribute to define the types of files that the control can select.</li> + <li><code>{{HTMLElement("input/hidden", "hidden")}}</code>: A control that is not displayed but whose value is submitted to the server.</li> + <li><code>{{HTMLElement("input/image", "image")}}</code>: A graphical submit button. You must use the <strong>src</strong> attribute to define the source of the image and the <strong>alt</strong> attribute to define alternative text. You can use the <strong>height</strong> and <strong>width</strong> attributes to define the size of the image in pixels.</li> + <li><code>{{HTMLElement("input/month", "month")}}</code>: {{HTMLVersionInline("5")}} A control for entering a month and year, with no time zone.</li> + <li><code>{{HTMLElement("input/number", "number")}}</code>: {{HTMLVersionInline("5")}} A control for entering a number.</li> + <li><code>{{HTMLElement("input/password", "password")}}</code>: A single-line text field whose value is obscured. Use the <strong>maxlength</strong> and <strong>minlength</strong> attributes to specify the maximum length of the value that can be entered. + <div class="note"><strong>Note</strong>: Any forms involving sensitive information like passwords (e.g. login forms) should be served over HTTPS; Firefox now implements multiple mechanisms to warn against insecure login forms — see <a href="/en-US/docs/Web/Security/Insecure_passwords">Insecure passwords</a>. Other browsers are also implementing similar mechanisms.</div> + </li> + <li><code>{{HTMLElement("input/radio", "radio")}}</code>: A radio button, allowing a single value to be selected out of multiple choices.</li> + <li><code>{{HTMLElement("input/range", "range")}}</code>: {{HTMLVersionInline("5")}} A control for entering a number whose exact value is not important.</li> + <li><code>{{HTMLElement("input/reset", "reset")}}</code>: A button that resets the contents of the form to default values.</li> + <li><code>{{HTMLElement("input/search", "search")}}</code>: {{HTMLVersionInline("5")}} A single-line text field for entering search strings. Line-breaks are automatically removed from the input value.</li> + <li><code>{{HTMLElement("input/submit", "submit")}}</code>: A button that submits the form.</li> + <li><code>{{HTMLElement("input/tel", "tel")}}</code>: {{HTMLVersionInline("5")}} A control for entering a telephone number.</li> + <li><code>{{HTMLElement("input/text", "text")}}</code>: A single-line text field. Line-breaks are automatically removed from the input value.</li> + <li><code>{{HTMLElement("input/time", "time")}}</code>: {{HTMLVersionInline("5")}} A control for entering a time value with no time zone.</li> + <li><code>{{HTMLElement("input/url", "url")}}</code>: {{HTMLVersionInline("5")}} A field for entering a URL.</li> + <li><code>{{HTMLElement("input/week", "week")}}</code>: {{HTMLVersionInline("5")}} A control for entering a date consisting of a week-year number and a week number with no time zone.</li> +</ul> + +<p>Some input types are now obsolete:</p> + +<ul> + <li><code>{{HTMLElement("input/datetime", "datetime")}}</code>: {{HTMLVersionInline("5")}} {{deprecated_inline}} {{obsolete_inline}} A control for entering a date and time (hour, minute, second, and fraction of a second) based on UTC time zone. <strong>This feature has been <a href="https://github.com/whatwg/html/issues/336">removed from WHATWG HTML.</a></strong></li> +</ul> + +<h2 id="Attributes">Attributes</h2> + +<p>The <code><input></code> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes. Since every <code><input></code> element, regardless of type, is based on the {{domxref("HTMLInputElement")}} interface, they technically all share the exact same set of attributes. However, in reality, many attributes only function on specific input types, and some input types support very few of these attributes. In addition, some input types handle certain attributes in special ways.</p> + +<p>Here, you'll find information about the individual attributes which are common to all <code><input></code> element types, as well as a few non-standard attributes that may be worth knowing about.</p> + +<h3 id="Attributes_common_to_all_input_types">Attributes common to all input types</h3> + +<p>This section lists the attributes which are used by all form <code><input></code> types. Attributes that are unique to particular input types—or attributes which are common to all input types but have special behaviors when used on a given input type—are instead documented on those types' pages.</p> + +<div class="note"> +<p><strong>Note</strong>: This includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global HTML attributes</a>.</p> +</div> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Attribute</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("autocomplete")}}</code></td> + <td>A string indicating the type of autocomplete functionality, if any, to allow on the input</td> + </tr> + <tr> + <td><code>{{anch("autofocus")}}</code></td> + <td>A Boolean which, if present, makes the input take focus when the form is presented</td> + </tr> + <tr> + <td><code>{{anch("disabled")}}</code></td> + <td>A Boolean attribute which is present if the input should be disabled</td> + </tr> + <tr> + <td><code>{{anch("form")}}</code></td> + <td>The {{domxref("Element.id", "id")}} of the {{HTMLElement("form")}} of which the input is a member; if absent, the input is a member of the nearest containing form, or is not a member of a form at all</td> + </tr> + <tr> + <td><code>{{anch("list")}}</code></td> + <td>The <code>id</code> of a {{HTMLElement("datalist")}} element that provides a list of suggested values for the input</td> + </tr> + <tr> + <td><code>{{anch("name")}}</code></td> + <td>The input's name, to identify the input in the data submitted with the form's data</td> + </tr> + <tr> + <td><code>{{anch("readonly")}}</code></td> + <td>A Boolean attribute which, if true, indicates that the input cannot be edited</td> + </tr> + <tr> + <td><code>{{anch("required")}}</code></td> + <td>A Boolean which, if true, indicates that the input must have a value before the form can be submitted</td> + </tr> + <tr> + <td><code>{{anch("tabindex")}}</code></td> + <td>A numeric value providing guidance to the {{Glossary("user agent")}} as to the order in which controls receive focus when the user presses the <kbd>Tab</kbd> key</td> + </tr> + <tr> + <td><code>{{anch("type")}}</code></td> + <td>A string indicating which {{anch("Form <input> types", "input type")}} the <code><input></code> element represents</td> + </tr> + <tr> + <td><code>{{anch("value")}}</code></td> + <td>The input's current value</td> + </tr> + </tbody> +</table> + +<h4 id="htmlattrdefautocomplete">{{htmlattrdef("autocomplete")}}</h4> + +<p>A string that describes what if any type of autocomplete functionality the input should provide. A typical implementation of autocomplete simply recalls previous values entered in the same input field, but more complex forms of autocomplete can exist. For instance, a browser could integrate with a device's contacts list to autocomplete email addresses in an email input field. See {{SectionOnPage("/en-US/docs/Web/HTML/Attributes/autocomplete", "Values")}} for permitted values.</p> + +<p>This attribute has no effect on input types that do not return numeric or text data, such as <code>checkbox</code> or <code>image</code>.</p> + +<p>See <a href="/en-US/docs/Web/HTML/Attributes/autocomplete">The HTML autocomplete attribute</a> for additional information.</p> + +<h4 id="htmlattrdefautofocus">{{htmlattrdef("autofocus")}}</h4> + +<p>A Boolean attribute which, if present, indicates that the input should automatically have focus when the page has finished loading (or when the {{HTMLElement("dialog")}} containing the element has been displayed).</p> + +<div class="note"> +<p><strong>Note:</strong> An element with the <code>autofocus</code> attribute may gain focus before the {{domxref("DOMContentLoaded")}} event is fired.</p> +</div> + +<p>No more than one element in the document may have the <code>autofocus</code> attribute, and <code>autofocus</code> cannot be used on inputs of type <code>hidden</code>, because hidden inputs can't be focused.</p> + +<div class="warning"> +<p><strong>Warning:</strong> Automatically focusing a form control can confuse visually-impaired people using screen-reading technology. When <code>autofocus</code> is assigned, screen-readers "teleport" their user to the form control without warning them beforehand.</p> +</div> + +<h4 id="htmlattrdefdisabled">{{htmlattrdef("disabled")}}</h4> + +<p>A Boolean attribute which, if present, indicates that the user should not be able to interact with the input. Disabled inputs are typically rendered with a dimmer color or using some other form of indication that the field is not available for use.</p> + +<p>Specifically, disabled inputs do not receive the {{event("click")}} event, and disabled inputs are not submitted with the form.</p> + +<div class="note"> +<p><strong>Note:</strong> Although not required by the specification, Firefox will by default <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic disabled state</a> of an <code><input></code> across page loads. Use the {{htmlattrxref("autocomplete","input")}} attribute to control this feature.</p> +</div> + +<h4 id="htmlattrdefform">{{htmlattrdef("form")}}</h4> + +<p>A string specifying the {{HTMLElement("form")}} element with which the input is associated (that is, its <strong>form owner</strong>). This string's value, if present, must match the {{htmlattrxref("id")}} of a <code><form></code> element in the same document. If this attribute isn't specified, the <code><input></code> element is associated with the nearest containing form, if any.</p> + +<p>The <code>form</code> attribute lets you place an input anywhere in the document but have it included with a form elsewhere in the document.</p> + +<div class="note"> +<p><strong>Note:</strong> An input can only be associated with one form.</p> +</div> + +<h4 id="htmlattrdeflist">{{htmlattrdef("list")}}</h4> + +<p>The {{domxref("Element.id", "id")}} of a {{HTMLElement("datalist")}} element located in the same document which provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the {{htmlattrxref("type", "input")}} are not included in the suggested options.</p> + +<p>The <code>list</code> attribute is not supported by the <code>hidden</code>, <code>password</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, or any of the button types.</p> + +<h4 id="htmlattrdefname">{{htmlattrdef("name")}}</h4> + +<p>A string specifying a name for the input control. This name is submitted along with the control's value when the form data is submitted, as well as with the owning {{HTMLElement("form")}} element's {{domxref("HTMLFormElement.elements", "elements")}} object.</p> + +<p>When an input element is given a <code>name</code>, that name becomes a property of the owning form element's {{domxref("HTMLFormElement.elements")}} property. That means if you have an input whose <code>name</code> is set to <code>guest</code> and another whose <code>name</code> is <code>hat-size</code>, the following code can be used:</p> + +<pre class="brush: js">let form = document.querySelector("form"); +let guestName = form.elements.guest; +let hatSize = form.elements["hat-size"]; +</pre> + +<p>When this code has run, <code>guestName</code> will be the {{domxref("HTMLInputElement")}} for the <code>guest</code> field, and <code>hatSize</code> the object for the <code>hat-size</code> field.</p> + +<div class="warning"> +<p><strong>Warning:</strong> You should avoid giving form elements a <code>name</code> that corresponds to a built-in property of the form, since you would then override the predefined property or method with this reference to the corresponding input.</p> +</div> + +<p>The name <code>_charset_</code> has a special meaning. If used as the name of an <code><input></code> element of type <code><a href="/en-US/docs/Web/HTML/Element/input/hidden">hidden</a></code>, the input's <code>value</code> is automatically set by the {{Glossary("user agent")}} to the character encoding being used to submit the form.</p> + +<p>If no <code>name</code> is specified, or <code>name</code> is empty, the input's value is not submitted with the form.</p> + +<div class="note"> +<p><strong>Note:</strong> For historical reasons, the name <code>isindex</code> is not allowed. If you really want to know why, see <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-name">Naming form controls: the <code>name</code> attribute</a> in the HTML specification.</p> +</div> + +<h4 id="htmlattrdefreadonly">{{htmlattrdef("readonly")}}</h4> + +<p>A Boolean attribute which, if present, indicates that the user should not be able to edit the value of the input.</p> + +<p>The difference between <code>disabled</code> and <code>readonly</code> is that read-only controls can still function, whereas disabled controls generally do not function as controls until they are enabled.</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> The <code>required</code> attribute is not permitted on inputs with the <code>readonly</code> attribute specified.</p> +</div> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> Only text controls can be made read-only, since for other controls (such as checkboxes and buttons) there is no useful distinction between being read-only and being disabled, so the <code>readonly</code> attribute does not apply.</p> +</div> + +<h4 id="htmlattrdefrequired">{{htmlattrdef("required")}}</h4> + +<p><code>required</code> is a Boolean attribute which, if present, indicates that the user must specify a value for the input before the owning form can be submitted. The <code>required</code> attribute is supported by all input types <em>except the following</em>:</p> + +<div class="threecolumns"> +<ul> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/color">color</a></code></li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/hidden">hidden</a></code></li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/range">range</a></code></li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/submit">submit</a></code></li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/image">image</a></code></li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/reset">reset</a></code></li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/button">button</a></code></li> +</ul> +</div> + +<p>When an input has the <code>required</code> attribute, the {{cssxref(":required")}} pseudo-class also applies to it. Conversely, inputs without the <code>required</code> attribute (except the elements that don't support it) have the {{cssxref(":optional")}} pseudo-class applied.</p> + +<div class="note"> +<p><strong>Note:</strong> Because a read-only field cannot have a value, <code>required</code> does not have any effect on inputs with the {{htmlattrxref("readonly", "input/text")}} attribute also specified.</p> +</div> + +<h4 id="htmlattrdeftabindex">{{htmlattrdef("tabindex")}}</h4> + +<p>An optional numeric value that defines both whether or not the input should be focusable through use of the <kbd>Tab</kbd> key as well as whether or not the element participates in sequential focus navigation. This value also establishes the order in which the element is reached using the <kbd>Tab</kbd> key.</p> + +<p>The values of <code>tabindex</code> have special meanings depending on sign:</p> + +<ul> + <li>A negative value of <code>tabindex</code> indicates that the element should be focusable by the user, but not using sequential keyboard navigation. It's recommended to always use a value of -1 as using other values can be complicated.</li> + <li>A <code>tabindex</code> of 0 means that the element should be focusable and should be reachable by sequential keyboard navigation, but that the tab order is left up to the {{Glossary("user agent")}}, which should apply the user's platform conventions. This is usually the best value to use when you want an element to be focusable and to participate in keyboard navigation rather than trying to manage the tab order yourself.</li> + <li>A positive value of <code>tabindex</code> indicates the tabbing order of the element. Each time the user presses the <kbd>Tab</kbd> key, the element with the next sequentially higher <code>tabindex</code> is focused. Most platforms provide a reverse-tab feature, typically using the combination of <kbd>Shift</kbd> + <kbd>Tab</kbd>, which reverses the tabbing order.</li> +</ul> + +<p>If <code>tabindex</code> is omitted or is not a valid integer, the user agent follows platform conventions to determine what to do.</p> + +<h4 id="htmlattrdeftype">{{htmlattrdef("type")}}</h4> + +<p>A string specifying the type of control to render. For example, to create a checkbox, a value of <code>checkbox</code> is used. If omitted (or an unknown value is specified), the input type <code>text</code> is used, creating a plaintext input field.</p> + +<p>Permitted values are listed in {{anch("Form <input> types")}}.</p> + +<h4 id="htmlattrdefvalue">{{htmlattrdef("value")}}</h4> + +<p>The input control's value. When specified in the HTML, this is the initial value, and from then on it can be altered or retrieved at any time using JavaScript to access the respective {{domxref("HTMLInputElement")}} object's <code>value</code> property. The <code>value</code> attribute is always optional.</p> + +<div class="note"> +<p><strong>Note:</strong> Unlike other input controls, checkboxes and radio buttons are only included in the submitted data if the checkbox or radio button is currently <code>checked</code>. If it is, then the <code>value</code> attribute is reported as the input's value.</p> + +<p>For example, if a checkbox whose <code>name</code> is <code>status</code> has a <code>value</code> of <code>active</code>, and the checkbox is checked, the form data submitted will include <code>status=active</code>. If the checkbox isn't active, it isn't listed in the form data at all. The default <code>value</code> for checkboxes and radio buttons is <code>on</code>.</p> +</div> + +<h2 id="Methods">Methods</h2> + +<p>The following methods are provided by the {{domxref("HTMLInputElement")}} interface which represents <code><input></code> elements in the DOM. Also available are those methods specified by the parent interfaces, {{domxref("HTMLElement")}}, {{domxref("Element")}}, {{domxref("Node")}}, and {{domxref("EventTarget")}}.</p> + +<dl> + <dt>{{domxref("HTMLInputElement.checkValidity", "checkValidity()")}}</dt> + <dd>Immediately runs the validity check on the element, triggering the document to fire the {{domxref("HTMLInputElement.invalid_event", "invalid")}} event at the element if the value isn't valid.</dd> + <dt>{{domxref("HTMLInputElement.reportValidity", "reportValidity()")}}</dt> + <dd>Returns <code>true</code> if the element's value passes validity checks; otherwise, returns <code>false</code>.</dd> + <dt>{{domxref("HTMLInputElement.select", "select()")}}</dt> + <dd>Selects the entire content of the <code><input></code> element, if the element's content is selectable. For elements with no selectable text content (such as a visual color picker or calendar date input), this method does nothing.</dd> + <dt>{{domxref("HTMLInputElement.setCustomValidity", "setCustomValidity()")}}</dt> + <dd>Sets a custom message to display if the input element's value isn't valid.</dd> + <dt>{{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}</dt> + <dd>Sets the contents of the specified range of characters in the input element to a given string. A <code>selectMode</code> parameter is available to allow controlling how the existing content is affected.</dd> + <dt>{{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}</dt> + <dd>Selects the specified range of characters within a textual input element. Does nothing for inputs which aren't presented as text input fields.</dd> + <dt>{{domxref("HTMLInputElement.stepDown", "stepDown()")}}</dt> + <dd>Decrements the value of a numeric input by one, by default, or by the specified number of units.</dd> + <dt>{{domxref("HTMLInputElement.stepUp", "stepUp()")}}</dt> + <dd>Increments the value of a numeric input by one or by the specified number of units.</dd> +</dl> + +<h2 id="Styling_input_elements">Styling input elements</h2> + +<p>You can style <code><input></code> elements using various color-related attributes in particular. One unusual one that is specific to text entry-related elements is the CSS {{cssxref("caret-color")}} property, which lets you set the color used to draw the text input caret:</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><label for="textInput">Note the red caret:</label> +<input id="textInput" class="custom" size="32"> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">input.custom { + caret-color: red; + font: 16px "Helvetica", "Arial", "sans-serif" +} +</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample('Styling_input_elements', 500, 80)}}</p> + +<p>For more information about adding color to elements in HTML, see <a href="/en-US/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a>.</p> + +<h2 id="Labels_and_placeholders">Labels and placeholders</h2> + +<div class="note"> +<p><strong>TL;DR:</strong> To save you time, here's the key point: don't use the {{htmlattrxref("placeholder", "input")}} attribute if you can avoid it. If you need to label an <code><input></code> element, use the {{HTMLElement("label")}} element.</p> +</div> + +<p>There are three seemingly similar ways to associate assistive text with an <code><input></code>. However, they are actually quite different, and only one of them is always a good choice. Here we will look at each of them and learn best practices for providing the user with guidance when entering data into a form.</p> + +<h3 id="The_<label>_element">The <label> element</h3> + +<p>The {{HTMLElement("label")}} element is the only way to provide explanatory information about a form field that is <em>always</em> appropriate (aside from any layout concerns you have). It's never a bad idea to use a <code><label></code> to explain what should be entered into an <code><input></code> or {{HTMLElement("textarea")}}.</p> + +<h3 id="The_placeholder_attribute">The placeholder attribute</h3> + +<p>The {{htmlattrxref("placeholder", "input")}} attribute lets you specify a text that appears within the <code><input></code> element's content area itself when empty. It's intended to be used to show an example input, rather than an explanation or prompt, but tends to be badly misused.</p> + +<p>Here are two inputs that take a password, each with a placeholder:</p> + +<p><img alt="Example of correct and incorrect placeholder usage" src="https://mdn.mozillademos.org/files/16094/placeholder-badgood.png" style="border-style: solid; border-width: 1px; height: 66px; width: 230px;"></p> + +<p>The first one uses a placeholder string <code>MyGr8P@sswrd</code>, demonstrating what a password might look like. And no, that's not <em>really</em> a great password.</p> + +<p>The second one uses a prompt string, <code>Enter your password</code> as a placeholder. The first, and most obvious, problem with doing this is that as soon as the user types their first character, they no longer have a prompt explaining what that field is for.</p> + +<p>That's why, instead, you should use the {{HTMLElement("label")}} element. The placeholder should never be required in order to understand your forms. While some people are able to remember what a given empty box is meant for after its only identifying text vanishes, others cannot.</p> + +<p>If the user can't understand your form if the placeholders are missing (say, in a browser that doesn't support <code>placeholder</code>, or in the case above where the user starts typing then gets confused), you're not using placeholders properly.</p> + +<p>In addition, browsers with automatic page translation features may skip over attributes when translating. That means the <code>placeholder</code> may not get translated, resulting in important information not being translated.</p> + +<p>If you feel like you need to use a placeholder, it's possible to use both a placeholder and a label:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16110/label-and-placeholder.png" style="border-style: solid; border-width: 1px; height: 48px; width: 234px;"></p> + +<h3 id="Unadorned_text_adjacent_to_the_<input>_element">Unadorned text adjacent to the <input> element</h3> + +<p>You can also just have plain text adjacent to the <code><input></code> element, like this:</p> + +<pre class="brush: html"><p>Enter your name: <input id="name" type="text" size="30"></p></pre> + +<p>Please don't do this. This doesn't create a relationship between the prompt and the <code><input></code> element, which is important for reasons we'll get into in the next section.</p> + +<h3 id="Why_you_should_use_labels">Why you should use labels</h3> + +<p>In addition to the information provided above, there are a number of other reasons why <code><label></code> is the best way to explain <code><input></code>s:</p> + +<ul> + <li>The semantic pairing of <code><input></code> and <code><label></code> elements is useful for assistive technologies such as screen readers. By pairing them using the <code><label></code>'s {{htmlattrxref("for", "label")}} attribute, you bond the label to the input in a way that lets screen readers describe inputs to users more precisely.</li> + <li>By pairing a <code><label></code> with an <code><input></code>, clicking on either one will focus the <code><input></code>. If you use plaintext to "label" your input, this won't happen. Having the prompt part of the activation area for the input is helpful for people with motor control conditions.</li> + <li>As web developers, it's important that we never assume that people will know all the things that we know. The diversity of people using the web—and by extension your web site—practically guarantees that some of your site's visitors will have some variation in thought processes and/or circumstances that leads them to interpret your forms very differently from you without clear and properly-presented labels.</li> +</ul> + +<h2 id="Examples">Examples</h2> + +<p>You can find multiple examples of <code><input></code> element usage on the pages covering each individual type — see {{anch("Form <input> types")}}, and also see the {{anch("Live example")}} at the top of the article.</p> + +<h2 id="Technical_summary">Technical summary</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, listed, submittable, resettable, form-associated element, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>. If the {{htmlattrxref("type", "input")}} is not <code>hidden</code>, then labelable element, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td>None, it is an {{Glossary("empty element")}}.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>Must have a start tag and must not have an end tag.</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td> + <ul> + <li><code>type=button</code>: {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}</li> + <li><code>type=checkbox</code>: {{ARIARole("button")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("option")}}, {{ARIARole("switch")}}</li> + <li><code>type=image</code>: {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}</li> + <li><code>type=radio</code>: {{ARIARole("menuitemradio")}}</li> + <li><code>type=color|date|datetime|datetime-local|email|file</code>: None</li> + <li><code>type=hidden|month|number|password|range|reset</code>: None</li> + <li><code>type=search|submit|tel|text|url|week</code>: None</li> + </ul> + </td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLInputElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-input-element', '<input>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML Media Capture', '#the-capture-attribute','<input capture>')}}</td> + <td>{{Spec2('HTML Media Capture')}}</td> + <td>Adds the <code>capture</code> attribute</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-input-element', '<input>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.4', '<form>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Accessibility_concerns">Accessibility concerns</h2> + +<h3 id="Labels">Labels</h3> + +<p>When including inputs, it is recommended to add labels along side. This is so those who use assistive technologies can tell what the input is for. For more information about labels in general see {{anch("Labels and placeholders")}} .</p> + +<p>The following is an example of how to associate the <code><label></code> with an <code><input></code> element in the above style. You need to give the <code><input></code> an <code>id</code> attribute. The <code><label></code> then needs a <code>for</code> attribute whose value is the same as the input's <code>id</code>.</p> + +<pre><label for="peas">Do you like peas?</label> +<input type="checkbox" name="peas" id="peas"> +</pre> + +<h3 id="Size">Size</h3> + +<p>Interactive elements such as form input should provide an area large enough that it is easy to activate them. This helps a variety of people, including people with motor control issues and people using non-precise forms of input such as a stylus or fingers. A minimum interactive size of 44 by 44 <a href="https://www.w3.org/TR/WCAG21/#dfn-css-pixels">CSS pixels</a> is recommended.</p> + +<ul> + <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html">Understanding Success Criterion 2.5.5: Target Size | W3C Understanding WCAG 2.1</a></li> + <li><a href="http://adrianroselli.com/2019/06/target-size-and-2-5-5.html">Target Size and 2.5.5 | Adrian Roselli</a></li> + <li><a href="https://a11yproject.com/posts/large-touch-targets/">Quick test: Large touch targets - The A11Y Project</a></li> +</ul> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<div>{{Compat("html.elements.input")}}</div> + +<p>[1] It is recognized but there is no UI.</p> + +<p>[2] Missing for <code>type="checkbox"</code> and <code>type="radio"</code>.</p> + +<p>[3] In Safari <code>autocapitalize="words"</code> capitalizes every word's second character.</p> + +<p>[4] <code>datetime</code> has been removed from the spec and browsers in favour of <code>datetime-local</code>.</p> + +<p>[5] see {{bug(1355389)}}</p> + +<p>[6] Not yet implemented. For progress, see {{bug("888320")}} and <a href="https://wiki.mozilla.org/TPE_DOM/Date_time_input_types">TPE DOM/Date time input types</a>.</p> + +<h2 id="Notes">Notes</h2> + +<h3 id="Custom_error_messages">Custom error messages</h3> + +<p>If you want to present a custom error message when a field fails to validate, you need to use the <a href="/en-US/docs/Web/API/Constraint_validation#Constraint_validation_interfaces">Constraint validation features</a> available on <code><input></code> (and related) elements. Take the following form:</p> + +<pre class="brush: html"><form> + <label for="name">Enter username (upper and lowercase letters): </label> + <input type="text" name="name" id="name" required pattern="[A-Za-z]+"> + <button>Submit</button> +</form></pre> + +<p>The basic HTML form validation features will cause this to produce a default error message if you try to submit the form with either no valid filled in, or a value that does not match the <code>pattern</code>.</p> + +<p>If you wanted to instead display custom error messages, you could use JavaScript like the following:</p> + +<pre class="brush: js">const nameInput = document.querySelector('input'); +const form = document.querySelector('form'); + +nameInput.addEventListener('input', () => { + nameInput.setCustomValidity(''); + nameInput.checkValidity(); +}); + +nameInput.addEventListener('invalid', () => { + if(nameInput.value === '') { + nameInput.setCustomValidity('Enter your username!'); + } else { + nameInput.setCustomValidity('Usernames can only contain upper and lowercase letters. Try again!'); + } +});</pre> + +<p>The example renders like so:</p> + +<p>{{EmbedLiveSample('Custom_error_messages')}}</p> + +<p>In brief:</p> + +<ul> + <li>We check the valid state of the input element every time its value is changed by running the <code>checkValidity()</code> method via the <code>input</code> event handler.</li> + <li>If the value is invalid, an <code>invalid</code> event is raised, and the <code>invalid</code> event handler function is run. Inside this function we work out whether the value is invalid because it is empty, or because it doesn't match the pattern, using an <code>if()</code> block, and set a custom validity error message.</li> + <li>As a result, if the input value is invalid when the submit button is pressed, one of the custom error messages will be shown.</li> + <li>If it is valid, it will submit as you'd expect. For this to happen, the custom validity has to be cancelled, by invoking <code>setCustomValidity()</code> with an empty string value. We therefore do this every time the <code>input</code> event is raised. If you don't do this, and a custom validity was previously set, the input will register as invalid, even if it current contains a valid value on submission.</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: Firefox supported a proprietary error attribute — <code>x-moz-errormessage</code> — for many versions, which allowed you set custom error messages in a similar way. This has been removed as of version 66 (see {{bug(1513890)}}).</p> +</div> + +<h3 id="Localization">Localization</h3> + +<p>The allowed inputs for certain <input> types depend on the locale. In some locales, 1,000.00 is a valid number, while in other locales the valid way to enter this number is 1.000,00.</p> + +<p>Firefox uses the following heuristics to determine the locale to validate the user's input (at least for <code>type="number"</code>):</p> + +<ul> + <li>Try the language specified by a <code>lang</code>/<code>xml:lang</code> attribute on the element or any of its parents.</li> + <li>Try the language specified by any Content-Language HTTP header or</li> + <li>If none specified, use the browser's locale.</li> +</ul> + +<h3 id="Using_mozactionhint_on_Firefox_mobile">Using mozactionhint on Firefox mobile</h3> + +<p>You can use the {{htmlattrxref("mozactionhint", "input")}} attribute to specify the text for the label of the enter key on the virtual keyboard when your form is rendered on Firefox mobile. For example, to have a "Next" label, you can do this:</p> + +<pre class="brush: html"><input type="text" mozactionhint="next"> +</pre> + +<p>The result is:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/3251/mozactionhint.png" style="border-style: solid; border-width: 1px; height: 400px; width: 240px;"></p> + +<p>Note the "Next" key in the lower-right corner of the keyboard.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Other form-related elements: {{HTMLElement("form")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.</li> + <li><a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">Form constraint validation</a></li> + <li><a class="external" href="http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text">Cross-browser HTML5 placeholder text</a></li> + <li>The CSS {{cssxref("caret-color")}} property</li> + <li>In certain cases (typically involving non-textual inputs and specialized interfaces), the <code><input></code> element is a <a href="/en-US/docs/Web/CSS/Replaced_element">replaced element</a>. When it is, the position and size of the element's size and positioning within its frame can be adjusted using the CSS {{cssxref("object-position")}} and {{cssxref("object-fit")}} properties</li> +</ul> diff --git a/files/it/web/html/element/kbd/index.html b/files/it/web/html/element/kbd/index.html new file mode 100644 index 0000000000..2a0d73948f --- /dev/null +++ b/files/it/web/html/element/kbd/index.html @@ -0,0 +1,153 @@ +--- +title: <kbd> +slug: Web/HTML/Element/kbd +translation_of: Web/HTML/Element/kbd +--- +<p>L'<strong>elemento HTML <code><kbd></code> </strong>rappresenta l'input dell'utente e produce un elemento inline visualizzato dal browser con il font a spaziatura fissa predefinito.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Contenuto di flusso</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">contenuto di enunciazione</a>, contenuto interattivo.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td>Contentuto di enunciazione.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Qualunque elemento che accetta <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">contenuti di enunciazione.</a></td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>Tutti</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLElement")}} Fino a Gecko 1.9.2 (Firefox 4) incluso, Firefox implementa l'interfaccia {{domxref("HTMLSpanElement")}} per questo elemento.</td> + </tr> + </tbody> +</table> + +<h2 id="Attributi">Attributi</h2> + +<p>Questo elemento supporta solamente gli <a href="/en-US/docs/HTML/Global_attributes">attributi globali</a>.</p> + +<h2 id="Esempi">Esempi</h2> + +<pre class="brush: html"><p>Digita questo comando nella finestra Run: + <kbd>cmd</kbd><br /> e premi il pulsante OK.</p> + +<p>Salva il documento premendo +<kbd>Ctrl</kbd> + <kbd>S</kbd></p></pre> + +<h3 id="Result">Result</h3> + +<p>{{ EmbedLiveSample('Examples', 350, 120) }}</p> + +<h2 id="Note">Note</h2> + +<p>È possibile definire una regola CSS per ignorare il font predefinito del browser. Alcune preferenze stabilite dall'utente possono avere la precedenza su quelle specificate dal CSS.</p> + +<p>Quando l'elemento<code> <kbd></code> è posizionato dentro un elemento <code><samp></code>, rappresenta l'input basato sull'output del sistema, per esempio invocando una voce di menù.<br> + </p> + +<p>Quando un elemento <code><kbd></code> è posizionato dentro un altro elemento <code><kbd>,</code> rappresenta un tasto o un altra singola unità di input dipendente dal meccanismo di inserimento.</p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-kbd-element', '<kbd>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-kbd-element', '<kbd>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Aggiornato per includere qualunque input da parte dell'utente, ad esempio input vocale e singole battiture.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<kbd>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_dei_Browser">Compatibilità dei Browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="sect1"> </h2> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{htmlelement("code")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/it/web/html/element/main/index.html b/files/it/web/html/element/main/index.html new file mode 100644 index 0000000000..a70b85ea93 --- /dev/null +++ b/files/it/web/html/element/main/index.html @@ -0,0 +1,154 @@ +--- +title: <main> +slug: Web/HTML/Element/main +tags: + - Elemento + - HTML + - Reference + - Referenza + - Web + - main +translation_of: Web/HTML/Element/main +--- +<h2 id="Sommario">Sommario</h2> + +<p>L'<strong>elemento HTML <code><main></code></strong> rappresenta il contenuto principale del {{HTMLElement("body")}} di un documento o di un'applicazione. L'area principale consiste di un contenuto che è direttamente in relazione con, o si estende su, il tema centrale di un documento o la funzionalità centrale di un'applicazione. Tale contenuto dovrebbe essere unico all'interno del documento, ad esclusione di qualsiasi contenuto che si ripete attraverso una serie di documenti quali potrebbero essere le barre laterali, link di navigazione, informazioni di copyright, loghi e moduli di ricerca (a meno che, ovviamente, la funzione principale del documento sia lo stesso modulo di ricerca).</p> + +<div class="note"> +<p><strong>Nota:</strong> <strong>Non deve</strong> esserci più di un elemento <code><main></code> all'interno di un documento, e <strong>non deve</strong> essere un discendente di un elemento {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, o {{HTMLElement("nav")}}.</p> +</div> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Categorie di contenuto</a></dfn><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Palpable_content">palpable content</a>.</li> + <li><dfn>Contenuto permesso</dfn> <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">Flow content</a>.</li> + <li><dfn>Omissione di tag</dfn> Nessuna; entrambi i tag di inizio e fine sono obbligatori.</li> + <li><dfn>Elementi genitori permessi</dfn>Ogni elemento che accetta <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">flow content</a>, ma non può essere un discendente di un elemento {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, o {{HTMLElement("nav")}}.</li> + <li><dfn>Interfaccia DOM</dfn> {{domxref("HTMLElement")}}</li> +</ul> + +<h2 id="Attributi">Attributi</h2> + +<p><span style="line-height: 21px;">Questo elemento include solo gli </span><a href="/en-US/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">attributi globali</a><span style="line-height: 21px;">.</span></p> + +<h2 id="Esempio">Esempio</h2> + +<pre class="brush: html"><!-- altro contenuto --> + +<span class="highlight"><main></span> + <h1>Mele</h1> + <p>La mela è il frutto pomoforme dell'albero di mele.</p> + + <article> + <h2>Red Delicious</h2> + <p>Queste mele rosso brillante sono le più comuni che si possono trovare in molti + supermercati.</p> + <p>... </p> + <p>... </p> + </article> + + <article> + <h2>Granny Smith</h2> + <p>Queste succose mele verdi sono un'ottimo ripieno per le torte + di mela.</p> + <p>... </p> + <p>... </p> + </article> + +<span class="highlight"></main></span> + +<!-- altro contenuto --></pre> + +<h2 id="Specifications" name="Specifications">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#the-main-element', '<main>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Rimossa la restrizione che prevedeva il non utilizzo di <code><main></code> come discendente di un elemento {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, o {{HTMLElement("nav")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'grouping-content.html#the-main-element', '<main>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Nessun cambiamento da {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-main-element', '<main>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Definizione iniziale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilità con i browser</h2> + +<p>In quanto nuova funzione proposta per HTML, l'elemento <code><main></code> non è ancora ampiamente supportato. Si è quindi fortemente incoraggiati ad aggiungere il ruolo ARIA <span style="font-family: courier new,andale mono,monospace; line-height: 1.5;">"main"</span><span style="line-height: 1.5;"> ad ogni elemento </span><code style="font-style: normal; line-height: 1.5;"><main></code><span style="line-height: 1.5;"> inserito:</span></p> + +<pre class="brush: html"><main role="main"> + ... +</main> +</pre> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>Chrome 26</td> + <td>{{ CompatGeckoDesktop("21.0") }}</td> + <td>{{CompatNo()}}</td> + <td>Opera 16</td> + <td>Safari 7</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>{{CompatNo()}}</td> + <td>{{ CompatGeckoMobile("21.0") }}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>Elementi strutturali di base: {{HTMLElement("html")}}, {{HTMLElement("head")}}, {{HTMLElement("body")}}</li> + <li>Elementi di sezione: {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, or {{HTMLElement("nav")}}</li> +</ul> + +<p> </p> diff --git a/files/it/web/html/element/nav/index.html b/files/it/web/html/element/nav/index.html new file mode 100644 index 0000000000..edd0461c45 --- /dev/null +++ b/files/it/web/html/element/nav/index.html @@ -0,0 +1,124 @@ +--- +title: <nav> +slug: Web/HTML/Element/nav +translation_of: Web/HTML/Element/nav +--- +<h2 id="Sommario">Sommario</h2> + +<p>L'<em>elemento HTML nav</em> (<code><nav></code>) rappresenta una sezione della pagina che contiene link ad altre pagine o a parti della pagina corrente: una sezione di navigazione.</p> + +<div class="note"> +<p><em>Note d'uso:</em></p> + +<ul> + <li>Non tutti i link di un documento devono essere in un elemento <code><nav></code>, che è stato pensato solo per i blocchi di link più importanti; spesso l'elemento {{HTMLElement("footer")}} contiene una lista di link che non necessitano di essere in un elemento {{HTMLElement("nav")}}.</li> + <li>Un documento potrebbe avere vari elementi {{HTMLElement("nav")}}, per sempio uno per la navigazione all'interno del sito e uno per la navigazione all'interno della pagina.</li> + <li>Gli interpreti, come un programma di lettura dello schermo per gli utenti disabili, può usare quest'elemento per determinare se non visualizzarne il contenuto.</li> +</ul> +</div> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categorie di contenuti</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contenuti di flusso</a>, <a href="/en-US/docs/HTML/Content_categories#Sectioning_content" title="HTML/Content categories#Sectioning_content">contenuti di sezionamento</a>, contenuti palpabili.</li> + <li><dfn>Contenuti permessi</dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contenuti di flusso</a>.</li> + <li><dfn>Omissione del tag</dfn> {{no_tag_omission}}</li> + <li><dfn>Permitted parent elements</dfn> Qualsiasi elemento che accetti <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">contenuti di flusso</a>.</li> + <li><dfn>DOM interface</dfn> {{domxref("HTMLElement")}}</li> +</ul> + +<h2 id="Attributi">Attributi</h2> + +<p><span style="line-height: 21px;">Questo elemento include solo gli </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">attributi globali</a><span style="line-height: 21px;">.</span></p> + +<h2 id="Esempi">Esempi</h2> + +<pre class="brush:xml"><nav> + <ul> + <li><a href="#">Home</a></li> + <li><a href="#">About</a></li> + <li><a href="#">Contatti</a></li> + </ul> +</nav> +</pre> + +<h2 id="Specifications" name="Specifications">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-nav-element', '<nav>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-nav-element', '<nav>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>5</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>9.0</td> + <td>11.10</td> + <td>4.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Support di base</td> + <td>2.2</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>9.0</td> + <td>11.0</td> + <td>5.0 (iOS 4.2)</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>Altri elementi correlati alle sezioni: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li> + <li class="last"><a class="deki-ns current" href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sezioni e indici nei documenti HTML5</a>.</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/it/web/html/element/output/index.html b/files/it/web/html/element/output/index.html new file mode 100644 index 0000000000..fea9864a1b --- /dev/null +++ b/files/it/web/html/element/output/index.html @@ -0,0 +1,122 @@ +--- +title: Il tag <output> +slug: Web/HTML/Element/output +translation_of: Web/HTML/Element/output +--- +<h2 id="Summary" name="Summary">Riassunto</h2> + +<p>Il tag <strong>HTML <code><output></code> </strong>rappresenta il risultato di un calcolo o azione dell'utente.</p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, <a href="/en-US/docs/HTML/Content_categories#Form_listed" title="HTML/Content categories#Form listed">listed</a>, <a href="/en-US/docs/HTML/Content_categories#Form_labelable" title="HTML/Content categories#Form labelable">labelable</a>, <a href="/en-US/docs/HTML/Content_categories#Form_resettable" title="HTML/Content categories#Form resettable">resettable</a> <a href="/en-US/docs/HTML/Content_categories#Form-associated_content" title="HTML/Content categories#Form-associated content">form-associated element</a>, palpable content.</li> + <li><dfn>Permitted content</dfn> <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">Phrasing content</a>.</li> + <li><dfn>Tag omission</dfn> {{no_tag_omission}}</li> + <li><dfn>Permitted parent elements</dfn> Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>.</li> + <li><dfn>DOM interface</dfn> {{domxref("HTMLOutputElement")}}</li> +</ul> + +<h2 id="Attributes" name="Attributes">Attributi</h2> + +<p><span style="line-height: 21px;">Questo argomento include </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/attributi globali">attributi globali</a></p> + +<dl> + <dt>{{htmlattrdef("for")}}</dt> + <dd>Un elenco di ID di altri elementi, che indica che tali elementi hanno contribuito a valori di ingresso (o comunque influenzato) il calcolo.</dd> + <dt>{{htmlattrdef("form")}}</dt> + <dd>L'elemento form a cui l'elemento di output è associato (il "proprietario del form"). Il valore dell'attributo deve essere un ID di un form nello stesso documento. Nel caso in cui questo attributo non sia specificato, l'elemento di output deve essere un discendente di un form. Questo attributo permette di inserire elementi di output ovunque all'interno del documento, prescindendo dal vincolo che gli elementi output debbano essere collocati all'interno del form cui fanno riferimento.</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>Il nome dell'elemento.</dd> +</dl> + +<h2 id="Example" name="Example">Esempio</h2> + +<pre class="brush:html"><form oninput="result.value=parseInt(a.value)+parseInt(b.value)"> + <input type="range" name="b" value="50" /> + + <input type="number" name="a" value="10" /> = + <output name="result"></output> +</form> +</pre> + +<h2 id="Specifications" name="Specifications">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifiche</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-output-element', '<output>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-output-element', '<output>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilità fra browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>10</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>11</td> + <td>nightly</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Vedi anche</h2> + +<ul> + <li>Other form-related elements: {{HTMLElement("form")}}, {{HTMLElement("input")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.</li> +</ul> + +<div>{{HTMLRef}}</div> + +<p> </p> diff --git a/files/it/web/html/element/p/index.html b/files/it/web/html/element/p/index.html new file mode 100644 index 0000000000..43076c3029 --- /dev/null +++ b/files/it/web/html/element/p/index.html @@ -0,0 +1,109 @@ +--- +title: '<p>: The Paragraph element' +slug: Web/HTML/Element/p +tags: + - Contenuto di Raggruppamento HTML + - Elemento + - HTML + - Riferimento + - Web +translation_of: Web/HTML/Element/p +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">L'<strong>elemento</strong> <strong>HTML <code><p></code> </strong>rappresenta un paragrafo di un testo. I paragrafi sono di solito rappresentati in modalità visiva come blocchi di testo che sono separati da blocchi adiacenti da linee di spazio verticali e/o dalla prima linea di indentazione</span>. I paragrafi sono elementi block-level.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Categorie di contenuto</a></th> + <td><a href="https://developer.mozilla.org/it/docs/Web/Guide/HTML/Categorie_di_contenuto#Contenuto_di_flusso">Contenuto di flusso</a>, contenuto palpabile.</td> + </tr> + <tr> + <th scope="row">Contenuto permesso</th> + <td><a href="https://developer.mozilla.org/it/docs/Web/Guide/HTML/Categorie_di_contenuto#Contenuto_di_enunciazione">Frasi.</a></td> + </tr> + <tr> + <th scope="row">Tag omessi</th> + <td>Il tag di partenza è richiesto. Il tag di fine può essere omesso se l'elemento {{HTMLElement("p")}} è immediatamente seguito da un {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hr")}}, {{HTMLElement("menu")}}, {{HTMLElement("nav")}}, {{HTMLElement("ol")}}, {{HTMLElement("pre")}}, {{HTMLElement("section")}}, {{HTMLElement("table")}}, {{HTMLElement("ul")}} o un altro elemento {{HTMLElement("p")}}, o se non ci sono più contenuti nell'elemento genitore ed esso non è un elemento {{HTMLElement("a")}}.</td> + </tr> + <tr> + <th scope="row">Genitori permessi</th> + <td>Qualsiasi elemento che accetta <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>.</td> + </tr> + <tr> + <th scope="row">Ruoli ARIA permessi</th> + <td>Qualsiasi.</td> + </tr> + <tr> + <th scope="row">Interfaccia DOM</th> + <td>{{domxref("HTMLParagraphElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributi">Attributi</h2> + +<p>Questo elemento include i <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> + +<div class="note"> +<p><strong>Note:</strong> L'attributo <code>align</code> sui tag <code><p></code> è obsoleto e non dovrebbe essere più usato.</p> +</div> + +<h2 id="Esempi">Esempi</h2> + +<pre class="brush: html"><p>This is the first paragraph of text. + This is the first paragraph of text. + This is the first paragraph of text. + This is the first paragraph of text.</p> +<p>This is the second paragraph. + This is the second paragraph. + This is the second paragraph. + This is the second paragraph.</p> +</pre> + +<p>Il risultato di questo codice è:</p> + +<p>{{EmbedLiveSample('Esempi')}}</p> + +<h2 id="Specificazioni">Specificazioni</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specificazione</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-p-element', '<p>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Nessun cambiamento dall'ultima istantanea W3C {{SpecName("HTML5 W3C")}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-p-element', '<p>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>attributo <code>align</code> è obsoleto</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.1', '<p>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Definizione iniziale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_Browser">Compatibilità con i Browser</h2> + + + +<p>{{Compat("html.elements.p")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{HTMLElement("hr")}}</li> + <li>{{HTMLElement("br")}}</li> +</ul> diff --git a/files/it/web/html/element/section/index.html b/files/it/web/html/element/section/index.html new file mode 100644 index 0000000000..2dbac135c5 --- /dev/null +++ b/files/it/web/html/element/section/index.html @@ -0,0 +1,150 @@ +--- +title: <section> +slug: Web/HTML/Element/section +translation_of: Web/HTML/Element/section +--- +<h2 id="Sommario">Sommario</h2> + +<p>L'<em>elemento HTML section</em> (<code><section></code>) rappresenta una sezione generica di un documento, ovvero un gruppo tematico di contenuti, tipicamente provvisto di un'intestazione. Ogni <code><section></code> dovrebbe essere identificabile, solitamente utlizzando un'intestazione ({{HTMLElement('h1')}}-{{HTMLElement('h6')}}) come fliglio dell'elemento <code><section></code></p> + +<div class="note"> +<p><em>Note d'uso :</em></p> + +<ul> + <li>Se ha senso aggregare il contenuto di un elemento {{HTMLElement("section")}}, è preferibile usare un elemento {{HTMLElement("article")}} al suo posto.</li> + <li>Si sconsiglia di usare l'elemento {{HTMLElement("section")}} come contenitore generico; a questo scopo è preferibile usare {{HTMLElement("div")}}, soprattutto quando la suddivisione in sezioni viene solamente effettuata a scopo stilistico. La regola generale è che una sezione debba apparire logicamente nell'indice di un documento.</li> +</ul> +</div> + +<ul class="htmlelt"> + <li><dfn><a href="/docs/Web/HTML/Content_categories">Categorie di contenuti</a></dfn><a href="/docs/Web/HTML/Content_categories#Flow_content">Contenuti di flusso</a>, <a href="/docs/Web/HTML/Content_categories#Sectioning_content">contenuti di sezionamento</a>, contenuti palpabili.</li> + <li><dfn>Contenuti permessi</dfn> <a href="/docs/Web/HTML/Content_categories#Flow_content">Contenuti di flusso</a>.</li> + <li><dfn>Omissione del tag</dfn> {{no_tag_omission}}</li> + <li><dfn>Elementi genitore permessi</dfn>Qualsiasi elemento che accetti <a href="/docs/Web/HTML/Content_categories#Flow_content">contenuti di flusso</a>. Notare che un elemento {{HTMLElement("section")}} non può essere discendente di un elemento {{HTMLElement("address")}}.</li> + <li><dfn>Interfaccia DOM</dfn> {{domxref("HTMLElement")}}</li> +</ul> + +<h2 id="Attributi">Attributi</h2> + +<p>Questo elemento include solo gli <a href="/docs/Web/HTML/Global_attributes">attributi globali</a>.</p> + +<h2 id="Esempi">Esempi</h2> + +<pre class="brush: html"><section> + <h1>Intestazione</h1> + <p>Contenuto</p> +</section> +</pre> + +<h3 id="Esempio_2">Esempio 2</h3> + +<h4 id="Prima">Prima</h4> + +<div> </div> + +<div> +<pre class="brush: html" style="font-size: 14px;"><div> + <h2>Intestazione</h2> + <img>Un'immagine</img> +</div></pre> + +<div> </div> + +<div> +<h4 id="Dopo" style="line-height: 18px; font-size: 1.28571428571429rem;">Dopo</h4> + +<div> </div> + +<div> +<pre class="brush: html" style="font-size: 14px;"><section> + <h2>Intestazione</h2> + <img>Un'immagine</img> +</section></pre> +</div> +</div> +</div> + +<p> </p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-section-element', '<section>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-section-element', '<section>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>5</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>9.0</td> + <td>11.10</td> + <td>4.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>2.2</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>9.0</td> + <td>11.0</td> + <td>5.0 (iOS 4.2)</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>Altri elementi correlati alle sezioni: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li> + <li><a href="/docs/Sections_and_Outlines_of_an_HTML5_document">Sezioni e indici nei documenti HTML5</a>.</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/it/web/html/element/span/index.html b/files/it/web/html/element/span/index.html new file mode 100644 index 0000000000..6342586894 --- /dev/null +++ b/files/it/web/html/element/span/index.html @@ -0,0 +1,110 @@ +--- +title: <span> +slug: Web/HTML/Element/span +translation_of: Web/HTML/Element/span +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">L'<strong>elemento HTML <code><span></code> </strong>è un contenitore inline generico per il contenuto di frasi, che non rappresenta intrinsecamente nulla. Può essere utilizzato per raggruppare gli elementi per scopi di stile (usando gli attributi <code>class</code> o <code>id</code>), o perché condividono valori di attributo, come <code>lang</code>.</span> Dovrebbe essere usato solo quando nessun altro elemento semantico è appropriato. <code><span></code> è molto simile ad un elemento {{HTMLElement("div")}}, ma {{HTMLElement("div")}} è un <a href="/it/docs/Web/HTML/Block-level_elements">elemento a livello di blocco</a> mentre un elemento <code><span></code> è un <a href="/it/docs/Web/HTML/Inline_elements">elemento inline</a>.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/span.html", "tabbed-shorter")}}</div> + + + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Categorie di contenuti</a></th> + <td><a href="https://developer.mozilla.org/it/docs/Web/Guide/HTML/Categorie_di_contenuto#Contenuto_di_flusso">Contenuto di flusso</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">contenuto di frasi</a>.</td> + </tr> + <tr> + <th scope="row">Contenuto consentito</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Contenuto di frasi</a>.</td> + </tr> + <tr> + <th scope="row">Omissione del tag</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Genitori consentiti</th> + <td>Qualsiasi elemento che accetta <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">contenuto di frasi</a>, o qualsiasi elemento che accetta <a href="https://developer.mozilla.org/it/docs/Web/Guide/HTML/Categorie_di_contenuto#Contenuto_di_flusso">contenuto di flusso</a>.</td> + </tr> + <tr> + <th scope="row">ARIA roles consentiti</th> + <td>Qualunque</td> + </tr> + <tr> + <th scope="row">Interfaccia DOM</th> + <td>{{domxref("HTMLSpanElement")}} (prima di HTML 5, l'interfaccia era {{domxref("HTMLElement")}})</td> + </tr> + </tbody> +</table> + +<h2 id="Attributi">Attributi</h2> + +<p>Questo elemento include solo gli <a href="https://developer.mozilla.org/it/docs/Web/HTML/Global_attributes">attributi globali</a>.</p> + +<h2 id="Esempio_1">Esempio 1</h2> + +<pre class="brush:html; gutter:false"><p><span>Some text</span></p></pre> + +<h3 id="Risultato">Risultato</h3> + +<p><span>Some text</span></p> + +<h2 id="Esempio_2">Esempio 2</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush:html;gutter:false"><li><span> + <a href="portfolio.html" target="_blank">Guarda il mio portfolio</a> +</span></li> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">li span { + background: gold; + } +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-span-element', '<span>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-span-element', '<span>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>L'interfaccia DOM è ora {{domxref("HTMLSpanElement")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#edef-SPAN', '<span>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_Browser">Compatibilità con i Browser</h2> + +<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("html.elements.span")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>HTML {{HTMLElement("div")}} element</li> +</ul> diff --git a/files/it/web/html/element/strike/index.html b/files/it/web/html/element/strike/index.html new file mode 100644 index 0000000000..723254e331 --- /dev/null +++ b/files/it/web/html/element/strike/index.html @@ -0,0 +1,51 @@ +--- +title: <strike> +slug: Web/HTML/Element/strike +tags: + - Elemento + - HTML + - Obsoleto + - Riferimento + - Web +translation_of: Web/HTML/Element/strike +--- +<div>{{ Obsolete_header() }}</div> + +<h2 id="Sommario">Sommario</h2> + +<p>L'<em>Elemento HTML Strikethrough </em> (<code><strike></code>) disegna il testo con uno "strikethrough", cioè una linea a metà altezza.</p> + +<div class="note"><strong>Nota d'uso: </strong>Come tutti gli elementi di pura presentazione, {{ HTMLElement("strike") }} è deprecato in HTML 4 e XHTML 1 ed è obsoleto in HTML5. Se semanticamente appropriato, ad es. se rappresenta contenuto cancellato, si usi al suo posto l'elemento {{ HTMLElement("del") }} ; in tutti gli altri casi, si usi un elemento {{ HTMLElement("span") }} con l'attributo style contenente la proprietà <a href="https://developer.mozilla.org/it/docs/Web/CSS" title="CSS">CSS</a> {{ cssxref("text-decoration") }} impostata a <code>line-through</code>.</div> + +<h2 id="Attributi">Attributi</h2> + +<p>Questo elemento non ha altri attributi oltre agli <a href="https://developer.mozilla.org/it/docs/Web/HTML/Global_attributes" rel="internal" title="HTML/global attributes">attributi globali</a>, comuni a tutti gli elementi.</p> + +<h2 id="Interfaccia_DOM">Interfaccia DOM</h2> + +<p>Questo elemento implementa l'interfaccia <a href="https://developer.mozilla.org/it/docs/Web/API/HTMLElement">HTMLElement</a>.</p> + +<div class="note"> +<p><strong>Nota di implementazione: </strong>fino alla Gecko 1.9.2 inclusa, Firefox implementa per questo elemento l'interfaccia {{domxref('HTMLSpanElement')}} .</p> +</div> + +<h2 id="Esempio">Esempio</h2> + +<pre class="brush:xml"><strike>Today's Special: Salmon</strike> NO LONGER AVAILABLE<br /> +<span style="text-decoration:line-through;">Today's Special: Salmon</span> SOLD OUT +</pre> + +<h3 id="Risultato">Risultato</h3> + +<p><s>Today's Special: Salmon</s> NO LONGER AVAILABLE<br> + <s style="text-decoration: line-through;">Today's Special: Salmon</s> SOLD OUT</p> + +<h2 id="Vedere_anche">Vedere anche</h2> + +<ul> + <li>L'elemento {{ HTMLElement("s") }} , alter ego dell'elemento {{ HTMLElement("strike") }} e, come questo, obsoleto.</li> + <li>L'elemento {{ HTMLElement("del") }} da utilizzare in sua vece se il dato è stato <em>cancellato</em>.</li> + <li>La proprietà CSS {{ cssxref("text-decoration") }} da utilizzare per ottenere il medesimo risultato in visualizzazione ottenibile con l'elemento {{ HTMLElement("strike") }} .</li> +</ul> + +<div>{{ HTMLRef }}</div> diff --git a/files/it/web/html/element/table/index.html b/files/it/web/html/element/table/index.html new file mode 100644 index 0000000000..cbf9a66df3 --- /dev/null +++ b/files/it/web/html/element/table/index.html @@ -0,0 +1,437 @@ +--- +title: <table> +slug: Web/HTML/Element/table +tags: + - Elemento + - HTML + - Reference + - Tabella + - Tabelle + - Web +translation_of: Web/HTML/Element/table +--- +<h2 id="Sommario">Sommario</h2> + +<p>L'elemento HTML <code><table></code> rappresenta una Tabella.</p> + +<div class="note"><strong>Nota: </strong>Prima della nascita del <a href="/en-US/docs/CSS" title="CSS">CSS</a>, spesso gli elementi HTML {{HTMLElement("table")}} venivano usati per impaginare un documento. Questa pratica è stata scoraggiata a partire da HTML 4, e l'elemento {{HTMLElement("table")}} <strong>non dovrebbe</strong> essere usato per gestire il layout.</div> + +<h2 id="Utilizzo">Utilizzo</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content categories">Categoria del contenuto</a></td> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contenuto di flusso</a></td> + </tr> + <tr> + <td>Contenuto permesso</td> + <td> + <div class="content-models"> + <div id="table-mdls"> + <p>In ordine:</p> + + <ul> + <li>un elemento {{HTMLElement("caption")}} <em>(opzionale)</em>;</li> + <li>zero o più elementi {{HTMLElement("colgroup")}};</li> + <li>un elemento {{HTMLElement("thead")}} <em>(opzionale)</em>;</li> + <li>una delle seguenti alternative: + <ul> + <li>uno o più elementi {{HTMLElement("tr")}};</li> + <li>zero o più elementi {{HTMLElement("tbody")}};</li> + </ul> + </li> + <li>un elemento {{HTMLElement("tfoot")}} <em>(opzionale)</em>.</li> + </ul> + </div> + </div> + </td> + </tr> + <tr> + <td>Omissione dei tag</td> + <td>Nessuna, sono necessari sia il tag di apertura che di chiusura.</td> + </tr> + <tr> + <td>Elementi genitore permessi</td> + <td>Qualsiasi elemento che accetti contenuto di flusso.</td> + </tr> + <tr> + <td>Normativa</td> + <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-table-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-table-element">HTML5, sezione 4.9.1</a> (<a class="external" href="http://www.w3.org/TR/REC-html40/struct/tables.html#edef-TABLE" title="http://www.w3.org/TR/REC-html40/struct/tables.html#edef-TABLE">HTML4.01, sezione 11.2.1</a>)</td> + </tr> + </tbody> +</table> + +<h2 id="Attributi">Attributi</h2> + +<p>Questo elemento supporta gli<span style="line-height: 21px;"> </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">attributi globali</a><span style="line-height: 21px;">. </span></p> + +<dl> + <dt>{{htmlattrdef("align")}} {{Deprecated_inline}}</dt> + <dd>Questo attributo indica come la tabella deve essere allineata rispetto al documento che la contiene. Può assumere uno dei seguenti valori: + <ul> + <li><code>left</code>, indica che la tabella deve essere mostrata sulla sinistra del documento;</li> + <li><code>center</code>, indica che la tabella deve essere mostrata al centro del documento;</li> + <li><code>right</code>, indica che la tabella seve essere mostrata sulla sinistra del documento.</li> + </ul> + + <div class="note"><strong>Nota: </strong> + + <ul> + <li><strong>Non usare questo attributo</strong>, essendo deprecato. Lo stile dell'elemento {{HTMLElement("table")}} dovrebbe essere definito usando il <a href="/en-US/docs/CSS" title="CSS">CSS</a>. Per ottenere un effetto simile all'attributo <code>align</code>, usare gli attributi <a href="/en-US/docs/CSS" title="CSS">CSS</a> di layout, ad esempio {{cssxref("margin-left")}} e {{cssxref("margin-right")}} con valore <code>auto</code> ( o {{cssxref("margin")}} con valore <code>0 auto</code>) per centre la tabella.</li> + <li>Fino alla version 4, Firefox supportava (solo usando la modalità <em>quirks mode) i valori</em> <code>middle</code>, <code>absmiddle</code>, e <code>abscenter</code> come sinonimi di <code>center</code><em>. </em></li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("bgcolor")}} {{Deprecated_inline}}</dt> + <dd>Questo attributo definisce il colore di sfondo della tabella e del suo contenuto. È un codice esadecimale di 6 cifre, come definito in <a class="external" href="http://www.w3.org/Graphics/Color/sRGB" title="http://www.w3.org/Graphics/Color/sRGB">sRGB</a>, preceduto da '#'. Può anche essere usato uno dei sedici colori predefiniti. + <table> + <tbody> + <tr> + <td style="width: 24px; background-color: black;"> </td> + <td><span>black</span> = "#000000"</td> + <td style="width: 24px; background-color: green;"> </td> + <td><span>green</span> = "#008000"</td> + </tr> + <tr> + <td style="width: 24px; background-color: silver;"> </td> + <td><span>silver</span> = "#C0C0C0"</td> + <td style="width: 24px; background-color: lime;"> </td> + <td><span>lime</span> = "#00FF00"</td> + </tr> + <tr> + <td style="width: 24px; background-color: gray;"> </td> + <td><span>gray</span> = "#808080"</td> + <td style="width: 24px; background-color: olive;"> </td> + <td><span>olive</span> = "#808000"</td> + </tr> + <tr> + <td style="width: 24px; background-color: white;"> </td> + <td><span>white</span> = "#FFFFFF"</td> + <td style="width: 24px; background-color: yellow;"> </td> + <td><span>yellow</span> = "#FFFF00"</td> + </tr> + <tr> + <td style="width: 24px; background-color: maroon;"> </td> + <td><span>maroon</span> = "#800000"</td> + <td style="width: 24px; background-color: navy;"> </td> + <td><span>navy</span> = "#000080"</td> + </tr> + <tr> + <td style="width: 24px; background-color: red;"> </td> + <td><span>red</span> = "#FF0000"</td> + <td style="width: 24px; background-color: blue;"> </td> + <td><span>blue</span> = "#0000FF"</td> + </tr> + <tr> + <td style="width: 24px; background-color: purple;"> </td> + <td><span>purple</span> = "#800080"</td> + <td style="width: 24px; background-color: teal;"> </td> + <td><span>teal</span> = "#008080"</td> + </tr> + <tr> + <td style="width: 24px; background-color: fuchsia;"> </td> + <td><span>fuchsia</span> = "#FF00FF"</td> + <td style="width: 24px; background-color: aqua;"> </td> + <td><span>aqua</span> = "#00FFFF"</td> + </tr> + </tbody> + </table> + + <div class="note"><strong>Nota:</strong> Non usare questo attributo, essendo deprecato. Lo stile dell'elemento {{HTMLElement("table")}} dovrebbe essere definito usando il <a href="/en-US/docs/CSS" title="CSS">CSS</a>. Per ottenere un effetto simile all'attributo <code>bgcolor</code>, usare la proprietà <a href="/en-US/docs/CSS" title="CSS">CSS</a> {{cssxref("background-color")}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("border")}} {{Deprecated_inline}}</dt> + <dd>Questo attributo, il cui valore è un numero intero, definisce la dimensione in pixel dello spazio intorno alla tabella. Se impostato a <code>0</code>, implica che l'attributo {{htmlattrxref("frame", "table")}} abbia un valore nullo.</dd> + <dd> + <div class="note"><strong>Nota: </strong>Non usare questo attributo, essendo deprecato. Lo stile dell'elemento {{HTMLElement("table")}} dovrebbe essere definito usando il <a href="/en-US/docs/CSS" title="CSS">CSS</a>. Per ottenere un effetto simile all'attributo <code>border</code>, usare le proprietà <a href="/en-US/docs/CSS" title="CSS">CSS</a> {{cssxref("border")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}} e {{cssxref("border-style")}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("cellpadding")}} {{Deprecated_inline}}</dt> + <dd>Questo attributo definisce lo spazio tra il contenuto e il bordo, anche se non visibile, delle celle. Se è un valore in pixel, verrà applicato a tutti e quattro i lati; se è un valore percentuale, il contenuto verrà centrato e lo spazio verticale (sopra e sotto) verrà rappresentato da questa percentuale. Lo stesso per lo spazio orizzontale (destra e sinistra).</dd> + <dd> + <div class="note"><strong>Nota: </strong>Non usare questo attributo, essendo deprecato. Lo stile dell'elemento {{HTMLElement("table")}} dovrebbe essere definito usando il <a href="/en-US/docs/CSS" title="CSS">CSS</a>. Per ottenere un effetto simile all'attributo <code>cellpadding</code>, usare la proprietà <a href="/en-US/docs/CSS" title="CSS">CSS</a> {{cssxref("border-collapse")}} con valore <code>collapse</code> applicata all'elemento {{HTMLElement("table")}} e la proprietò {{cssxref("padding")}} all'elemento {{HTMLElement("td")}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("cellspacing")}} {{Deprecated_inline}}</dt> + <dd>Questo attributo definisce lo spazio, in percentuale o in pixel, tra due celle (sia in verticale che in orizzontale), trail bordo superiore della tabella e le celle della prima riga, tra il bordo inferiore della tabella e l'ultima riga, tra il bordo sinistro della tabella e la prima colonna, e tra il bordo destro della tabella e l'ultima colonna.</dd> + <dd> + <div class="note"><strong>Nota: </strong>Non usare questo attributo, essendo deprecato. Lo stile dell'elemento {{HTMLElement("table")}} dovrebbe essere definito usando il <a href="/en-US/docs/CSS" title="CSS">CSS</a>. Per ottenere un effetto simile all'attributo <code>cellspacing</code>, usare la proprietà <a href="/en-US/docs/CSS" title="CSS">CSS</a> {{cssxref("border-spacing")}}<span style="line-height: 1.5;"> applicata all'elemento {{HTMLElement("table")}}.</span></div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("frame")}} {{Deprecated_inline}}</dt> + <dd>Questo attributo definisce quale parte del frame che circonda la tabella deve essere mostrata. Può avere i seguenti valori:</dd> + <dd> + <table style="width: 668px;"> + <tbody> + <tr> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><code><span>above</span></code></td> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><code><span>below</span></code></td> + </tr> + <tr> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><code><span>hsides</span></code></td> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><code><span>vsides</span></code></td> + </tr> + <tr> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><code><span>lhs</span></code></td> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><code><span>rhs</span></code></td> + </tr> + <tr> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><code><span>border</span></code></td> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><code><span>box</span></code></td> + </tr> + <tr> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><code><span>void</span></code></td> + </tr> + </tbody> + </table> + + <div class="note"><strong>Nota: </strong>Non usare questo attributo, essendo deprecato. Lo stile dell'elemento {{HTMLElement("table")}} dovrebbe essere definito usando il <a href="/en-US/docs/CSS" title="CSS">CSS</a>. Per ottenere un effetto simile all'attributo <code>frame</code>, usare le proprietà <a href="/en-US/docs/CSS" title="CSS">CSS</a> {{cssxref("border-style")}} e {{cssxref("border-width")}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("rules")}} {{Deprecated_inline()}}</dt> + <dd>Questo attributo definisce come devono essere mostrate le linee nella tabella. Può assumere i seguenti valori: + <ul> + <li><code><span>none</span></code>, indica che non deve essere mostrata nessuna linea (il valore di default);</li> + <li><code>groups</code>, indica che le linee devono essere mostrate solo tra i gruppi di righe (definiti dagli elementi {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} e {{HTMLElement("tfoot")}}) e tra i gruppi di colonne (definiti dagli elementi {{HTMLElement("col")}} e {{HTMLElement("colgroup")}});</li> + <li><code><span>rows</span></code>, indica che le linee devono essere mostrate tra le righe ({{HTMLElement("tr")}};</li> + <li><code><span>columns</span></code>, indica che le linee devono essere mostrate tra le colonne;</li> + <li><code>all</code>, indica che le linee devono essere mostrate sia tra le righe che le colonne.</li> + </ul> + + <div class="note"><strong>Nota</strong>: + + <ul> + <li>Lo stile delle linee viene definito dal browser e non può essere modificato.</li> + <li>Non usare questo attributo, essendo deprecato. Lo stile dell'elemento {{HTMLElement("table")}} dovrebbe essere definito usando il <a href="/en-US/docs/CSS" title="CSS">CSS</a>. Per ottenere un effetto simile all'attributo <code>rules</code>, usare le proprietà <a href="/en-US/docs/CSS" title="CSS">CSS</a> {{cssxref("border")}} sugli eleementi {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("col")}} o {{HTMLElement("colgroup")}}.</li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("summary")}} {{Deprecated_inline}}</dt> + <dd>Questo attributo definisce un testo alternativo che descriva il contenuto della tabella nei brawser che non la possono mostrare. Spesso viene usato per fornire le informazioni anche a presone non vedenti, che visualizzano il documento tramite sintetizzatori vocali. Se tali informazioni possono essere utili per chiunque, considerare l'utilizzo dell'elemento {{HTMLElement("caption")}}. L'elemento <code>summary</code> non è obbligatorio e può essere omesso se l'elemento {{HTMLElement("caption")}} ne copre il ruolo.</dd> + <dd> + <div class="note"> + <p><strong>Nota: </strong>Non usare questo attributo per descrivere la tabella, essendo deprecato, ma uno dei seguenti metodi:</p> + + <ul> + <li>Del testo vicino alla tabella (questo è il modo meno semantico).</li> + <li>Un elemento {{HTMLElement("caption")}} nella tabella.</li> + <li>Un elemento {{HTMLElement("details")}} nell'elemento {{HTMLElement("caption")}} della tabella.</li> + <li>Includendo l'elemento {{HTMLElement("table")}} in un elemento {{HTMLElement("figure")}} e aggiungendo del testo che la descriva.</li> + <li>Includendo l'elemento {{HTMLElement("table")}} in un elemento {{HTMLElement("figure")}} e aggiundendo del testo che la descriva in un elemento {{HTMLElement("figcaption")}}.</li> + <li>Modificando la tabella così che la descrizione non sia più necessaria, ad esempio usando gli elementi {{HTMLElement("th")}} e {{HTMLElement("thead")}}.</li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("width")}} {{Deprecated_inline}}</dt> + <dd>Questo attributo definisce la larghezza della tabella. Può assumere un valore in pixel o in precentuale, che rappresenta la larghezza in percentuale rispetto al suo contenitore.</dd> + <dd> + <div class="note"><strong>Nota: </strong>Non usare questo attributo, essendo deprecato. Lo stile dell'elemento {{HTMLElement("table")}} dovrebbe essere definito usando il <a href="/en-US/docs/CSS" title="CSS">CSS</a>. Per ottenere un effetto simile all'attributo <code>width</code>, usare la proprietà <a href="/en-US/docs/CSS" title="CSS">CSS</a> {{cssxref("width")}}.</div> + </dd> +</dl> + +<h2 id="Interfaccia_DOM">Interfaccia DOM</h2> + +<p>Questo elemento implementa l'interfaccia <code><a href="/en-US/docs/DOM/HTMLTableElement" title="DOM/HTMLTableElement">HTMLTableElement</a></code>.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Una_semplice_tabella">Una semplice tabella</h3> + +<pre class="brush: html" style="font-size: 12px;"><table> + <tr> + <td>John</td> + <td>Doe</td> + </tr> + <tr> + <td>Jane</td> + <td>Doe</td> + </tr> +</table> +</pre> + +<h3 id="Altri_esempi">Altri esempi</h3> + +<pre class="brush: html"><p>Una tabella con un'intestazione</p> +<table> + <tr> + <th>Nome</th> + <th>Cognome</th> + </tr> + <tr> + <td>John</td> + <td>Doe</td> + </tr> + <tr> + <td>Jane</td> + <td>Doe</td> + </tr> +</table> + +<p>Una tabella con thead, tfoot, e tbody</p> +<table> + <thead> + <tr> + <th>Intestazione 1</th> + <th>Intestazione 2</th> + </tr> + </thead> + <tfoot> + <tr> + <td>Footer 1</td> + <td>Footer 2</td> + </tr> + </tfoot> + <tbody> + <tr> + <td>Corpo della tabella 1</td> + <td>Corpo della tabella 2</td> + </tr> + </tbody> +</table> + +<p>Tablella con colgroup</p> +<table> + <colgroup span="4" class="columns"></colgroup> + <tr> + <th>Stati</th> + <th>Capitali</th> + <th>Popolazione</th> + <th>Lingua</th> + </tr> + <tr> + <td>USA</td> + <td>Washington D.C.</td> + <td>309 milioni</td> + <td>Inglese</td> + </tr> + <tr> + <td>Svezia</td> + <td>Stoccolma</td> + <td>9 milioni</td> + <td>Svedese</td> + </tr> +</table> + +<p>Tabella con colgroup and col</p> +<table> + <colgroup> + <col class="colonna1"> + <col class="colonne2e3" span="2"> + </colgroup> + <tr> + <th>Lime</th> + <th>Limone</th> + <th>Arancia</th> + </tr> + <tr> + <td>Verde</td> + <td>Giallo</td> + <td>Arancione</td> + </tr> +</table> + +<p>Tabella con caption</p> +<table> + <caption>Descrizione</caption> + <tr> + <td>Dati</td> + </tr> +</table> +</pre> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th> </th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>4.0</td> + <td>7.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th> </th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td><span style="font-size: 12px; line-height: 18px;">Supporto di base</span></td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<p>Internet Explorer 9 ha un bug che riguarda l'elemento <span style="line-height: 1.5;"> {{HTMLElement("table")}} e {{cssxref(":hover")}}; vedere </span><a href="/en-US/docs/Web/CSS/:hover#Browser_compatibility" style="line-height: 1.5;">la sezione "Compatibilità con i browser" dell'articolo riguardante <code>:hover</code></a><span style="line-height: 1.5;"> per altri dettagli.</span></p> + +<h2 id="Vedere_anche">Vedere anche</h2> + +<ul> + <li>Altri elementi HTML riguardanti le tabelle: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}};</li> + <li>Proprietà CSS che posso essere particolarmente utili applicate all'elemento {{HTMLElement("table")}}: + <ul> + <li>{{cssxref("width")}} per controllare la larghezza della tabella;</li> + <li>{{cssxref("border")}}, {{cssxref("border-style")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}}, {{cssxref("border-collapse")}}, {{cssxref("border-spacing")}} per controllare i bordi delle tabelle, le linee e i frame;</li> + <li>{{cssxref("margin")}} e {{cssxref("padding")}} per controllare la disposizione del contenuto delle celle;</li> + <li>{{cssxref("text-align")}} e {{cssxref("vertical-align")}} per definire l'allineamento del testo nelle celle.</li> + </ul> + </li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/it/web/html/element/time/index.html b/files/it/web/html/element/time/index.html new file mode 100644 index 0000000000..9b24a8f468 --- /dev/null +++ b/files/it/web/html/element/time/index.html @@ -0,0 +1,118 @@ +--- +title: <time> +slug: Web/HTML/Element/time +translation_of: Web/HTML/Element/time +--- +<p>L' <strong style="line-height: 1.5;">elemento</strong><span style="line-height: 1.5;"> </span><strong style="line-height: 1.5;">HTML <code><time></code> </strong><span style="line-height: 1.5;">rappresenta un orario nell'arco delle 24 ore o una data precisa nel </span><a class="external" href="http://it.wikipedia.org/wiki/Calendario_gregoriano" style="line-height: 1.5; text-decoration: underline;" title="http://en.wikipedia.org/wiki/Gregorian_calendar">Calendario gregoriano</a> <span style="line-height: 1.5;">(con informazioni facoltative su orario e fuso orario).</span></p> +<p>Questo elemento serve per presentare date e orari in un formato leggibile dal computer. Può essere utile ai motori di ricerca per fornire funzionalità di organizzazione di eventi e calendario. </p> +<div class="note"> + <strong>Nota di utilizzo: </strong>Questo elemento non è appropriato per situazioni in cui una data specifica non pò essere calcolata né dovrebbe essere utilizzato per date antecedenti all'inizio del calendario gregoriano (a causa della difficoltà di calcolo per queste date).<br> + </div> +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, palpable content.</li> + <li><dfn>Permitted content</dfn> <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">Phrasing content</a>, but no descendant <code>time</code> elements.</li> + <li><dfn>Tag omission</dfn> None; both the starting and ending tags are mandatory.</li> + <li><dfn>Permitted parent elements</dfn> Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>.</li> + <li><dfn>DOM interface</dfn> {{domxref("HTMLTimeElement")}}</li> +</ul> +<h2 id="Attributi">Attributi</h2> +<p>Come altri elementi HTML, questo elemento supporta gli <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">attributi globali</a>.</p> +<dl> + <dt> + {{htmlattrdef("datetime")}}</dt> + <dd> + Questo attributo indica il tempo e la data dell'elemento e deve essere una <a class="external" href="http://www.w3.org/TR/html-markup/datatypes.html#common.data.datetime" title="http://www.w3.org/TR/html5/common-microsyntaxes.html#valid-date-string-with-optional-time">stringa di data valida con tempo facoltativo</a>. Se il valore non può essere interpretato come data con tempo facoltativo, l'elemento non ha un datestamp associato.</dd> +</dl> +<h2 id="Esempi">Esempi</h2> +<h3 id="Simple_example" name="Simple_example">Esempio semplice</h3> +<pre class="brush: html"><p>Il concerto inizia alle <time>20:00</time>.</p> +</pre> +<p>L'output del codice HTML in alto:</p> +<p>Il concerto inizia alle 20:00.</p> +<h3 id="Datetime_example" name="Datetime_example"><code><span style="font-family: 'Open Sans', sans-serif; font-size: 1.7142857142857142rem; line-height: 24px;">esempio </span>datetime</code></h3> +<pre class="brush: html"><p>Il concerto si è svolto il <time datetime="2001-05-15 19:00">15 Maggio </time>.</p> +</pre> +<p>Above HTML will output:</p> +<p>Il concerto si è svolto il 15 Maggio.</p> +<h2 id="Specifications" name="Specifications">Specifiche</h2> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#the-time-element', '<time>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'grouping-content.html#the-time-element', '<main>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>No change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-time-element', '<main>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> +<h2 id="Compatibilità_browser">Compatibilità browser</h2> +<p>{{CompatibilityTable}}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("22.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>11.50<br> + Removed in 15.0</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("22.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>11.50<br> + Removed in 15.0</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> + </table> +</div> +<h2 id="See_also" name="See_also">Vedi anche</h2> +<ul> + <li>The {{HTMLElement("data")}} element, allowing to signal other kind of values.</li> +</ul> +<p>{{HTMLRef}}</p> diff --git a/files/it/web/html/element/title/index.html b/files/it/web/html/element/title/index.html new file mode 100644 index 0000000000..4bbf5ffc4c --- /dev/null +++ b/files/it/web/html/element/title/index.html @@ -0,0 +1,56 @@ +--- +title: <title> +slug: Web/HTML/Element/title +translation_of: Web/HTML/Element/title +--- +<h2 id="Sommario">Sommario</h2> + +<p>L'<strong>elemento HTML <code><title></code></strong> definisce il titolo della pagina, mostrato nella barra del titolo di un browser o nella scheda contenente la pagina. Può contenere solo testo e non viene interpretato nessun tag in esso contenuto.</p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categorie di contenuto</a></dfn>Metadati.</li> + <li><dfn>Contenuti permessi</dfn> Testo</li> + <li><dfn>Omissione del tag</dfn> {{no_tag_omission}}. Notare che, omettendo il tag di chiusura <code></title></code>, il browser ignorerebbe il resto della pagina.</li> + <li><dfn>Elementi genitore permessi</dfn>Un elemento {{ HTMLElement("head") }} che non contenga altri elementi {{ HTMLElement("title") }}.</li> + <li><dfn>Interfaccia DOM</dfn> {{domxref("HTMLTitleElement")}}</li> +</ul> + +<h2 id="Attributi">Attributi</h2> + +<p><span style="line-height: 21px;">Questo elemento include solo gli </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">attributi globali</a>.</p> + +<h2 id="Esempio">Esempio</h2> + +<pre class="brush: html"><title>Titolo della pagina</title> +</pre> + +<h2 id="Specifications" name="Specifications">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-title-element', '<title>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-title-element', '<title>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.4.2', '<title>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<p>{{HTMLRef}}</p> diff --git a/files/it/web/html/forms_in_html/index.html b/files/it/web/html/forms_in_html/index.html new file mode 100644 index 0000000000..509b0a278f --- /dev/null +++ b/files/it/web/html/forms_in_html/index.html @@ -0,0 +1,83 @@ +--- +title: Forms in HTML5 +slug: Web/HTML/Forms_in_HTML +translation_of: Learn/HTML/Forms/HTML5_updates +--- +<div> + {{gecko_minversion_header("2")}}</div> +<h2 id="Sommario">Sommario</h2> +<p>Gli elementi e gli attributi dei form in <strong>HTML5</strong> forniscono un mark-up più ricco di valore semantico rispetto ad HTML4, e alleggeriscono gli sviluppatori dalla necessità di scripting e styling intensivo richiesta da HTML4. Le caratteristiche dei form HTML5 generano anche una migliore esperienza utente, rendendo i form più coerenti tra i diversi siti web fornendo un feedback immediato all'utente in merito ai dati inseriti. La funzionalità viene fornita anche agli utenti che hanno disabilitato lo scripting nel browser.</p> +<p>Questa sezione descrive gli elementi nuovi o modificati in HTML5, che sono supportati da Gecko / Firefox, versione 4 o superiore.</p> +<h2 id="The_input_element" name="The_input_element">L'elemento <code><input></code></h2> +<p>L'elemento <code>{{HTMLElement("input")}}</code> ha alcuni nuovi valori per l'attributo {{htmlattrxref("type", "input")}}.</p> +<ul> + <li><code>search</code>: L'elemento rappresenta un campo di ricerca. Le interruzioni di riga vengono rimosse automaticamente dal valore immesso, ma nessun'altra sintassi viene imposta.</li> + <li><code>tel</code>: L'elemento rappresenta un controllo per la modifica di un numero telefonico. Le interruzioni di riga vengono rimosse automaticamente dal valore immesso, ma nessun'altra sintassi viene imposta, dato che la formattazione dei numeri di telefono varia notevolmente a livello internazionale. È possibile utilizzare attributi quali {{htmlattrxref("pattern", "input")}} e {{htmlattrxref("maxlength", "input")}} per limitare i valori immessi nel controllo.</li> + <li><code>url</code>: L'elemento rappresenta un controllo per la modifica di un <a class="external" href="http://it.wikipedia.org/wiki/URL" title="http://it.wikipedia.org/wiki/URL">URL</a>. Le interruzioni di riga e gli spazi vuoti finali vengono eliminati automaticamente dal valore immesso.</li> + <li> + <p><code>email</code>: L'elemento rappresenta un controllo per la modifica di un indirizzo email. Le interruzioni di riga vengono rimosse automaticamente dal valore immesso. Un indirizzo e-mail non valido può essere immesso, ma il campo di input verrà validato solo se l'indirizzo di posta elettronica soddisfa la produzione ABNF <code>1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )</code> dove <code>atext</code> è definito in <a class="external" href="http://tools.ietf.org/html/rfc5322#section-3.2.3">RFC 5322 sezione 3.2.3</a>, e <code>ldh-str</code> è definito in <a class="external" href="http://tools.ietf.org/html/rfc1034#section-3.5">RFC 1034 sezione 3.5</a>.</p> + <div class="note"> + <strong>Nota:</strong> Se l'attributo {{htmlattrxref("multiple", "input")}} è presente, potranno essere inseriti diversi indirizzi email nel {{HTMLElement("input")}}, ad esempio una lista di email separate da virgole, ma questa funzionalità al momento non è stata implementata in Firefox.</div> + </li> +</ul> +<p>L'elemento {{HTMLElement("input")}} ha anche nuovi attributi:</p> +<ul> + <li>{{htmlattrxref("list", "input")}}: l'ID di un elemento {{HTMLElement("datalist")}} il cui contenuto, che consiste in elementi {{HTMLElement("option")}}, dovrà essere utilizzato come suggerimento: le {{HTMLElement("option")}} (opzioni) vengono visualizzate nell'area dedicata ai suggerimenti del campo di input.</li> + <li>{{htmlattrxref("pattern", "input")}}: Un'espressione regolare con cui il valore del controllo viene confrontato. Può essere usato negli {{HTMLElement("input")}} di tipo <code>text</code>, <code>tel</code>, <code>search</code>, <code>url</code>, ed <code>email</code>.</li> + <li>{{htmlattrxref("form", "input")}}: Una stringa indicante a quale elemento {{HTMLElement("form")}} "appartiene" l'input. Ogni input può appartenere ad un solo form.</li> + <li>{{htmlattrxref("formmethod", "input")}}: Una stringa indicante il metodo HTTP (GET o POST) da usare per l'invio dei dati al server; sovrascrive l'attributo {{htmlattrxref("method", "form")}} dell'elemento {{HTMLElement("form")}}, se definito. L'attributo {{htmlattrxref("formmethod", "input")}} può essere usato negli {{HTMLElement("input")}} di tipo <code>image</code> o <code>submit</code>, e quando l'attributo {{htmlattrxref("form", "input")}} è stato impostato.</li> + <li>{{htmlattrxref("x-moz-errormessage", "input")}} {{non-standard_inline}}: Una stringa che contiene un messaggio da visualizzare quando il campo non passa la validazione. Questo attributo è un'estensione di Mozilla, non rientra negli standard.</li> +</ul> +<h2 id="The_form_element" name="The_form_element">L'elemento <code><form></code></h2> +<p>L'elemento {{HTMLElement("form")}} ha un nuovo attributo:</p> +<ul> + <li>{{htmlattrxref("novalidate", "form")}}: Questo attributo fa in modo che il form <strong>non</strong> richieda la validazione.</li> +</ul> +<h2 id="The_datalist_element" name="The_datalist_element">L'elemento <code><datalist></code></h2> +<p>L'elemento {{HTMLElement("datalist")}} racchiude una lista di elementi {{HTMLElement("option")}} da suggerire all'utente durante la compilazione di un {{HTMLElement("input")}}.</p> +<p>Puoi aggiungere l'attributo {{htmlattrxref("list", "input")}} ad un elemento {{HTMLElement("input")}} per collegare un campo specifico ad un elemento {{HTMLElement("datalist")}} specifico.</p> +<h2 id="The_output_element" name="The_output_element">L'elemento <code><output></code></h2> +<p>L'elemento <code>{{HTMLElement("output")}}</code> rappresenta il risultato di una computazione (un calcolo).</p> +<p>Puoi usare l'attributo {{htmlattrxref("for", "output")}} per specificare una relazione tra un elemento <code>{{HTMLElement("output")}}</code> e altri elementi del documento che hanno influenzato la computazione (come input o parametri). Il valore dell'attributo {{htmlattrxref("for", "output")}} è una lista di ID degli altri elementi separati da spazi.</p> +<p>{{non-standard_inline}} Gecko 2.0 (ma non necessariamente altri motori di rendering dei browser) supporta la definizione di vincoli di validità personalizzati e messaggi di errore per gli elementi {{HTMLElement("output")}}, e pertanto applica le pseudo-classi CSS {{Cssxref(":invalid")}}, {{Cssxref(":valid")}}, {{Cssxref(":-moz-ui-invalid")}}, e {{Cssxref(":-moz-ui-valid")}} anche ad esso. Ciò può essere utile in situazioni in cui il risultato calcolato viola una regola, ma nessun valore immesso specifico lo fa (per esempio, "La somma totale delle percentuali non deve superare il 100%").</p> +<h2 id="The_placeholder_attribute" name="The_placeholder_attribute">L'attributo <code><placeholder></code> (testo segnaposto)</h2> +<p>L'attributo {{htmlattrxref("placeholder", "input")}} si applica agli elementi {{HTMLElement("input")}} e {{HTMLElement("textarea")}}, fornendo all'utente un suggerimento su cosa dovrebbe immettere nel campo. Il testo segnaposto non deve contenere interruzioni di linea.</p> +<h2 id="The_autofocus_attribute" name="The_autofocus_attribute">L'attributo <code><autofocus></code></h2> +<p>L'attributo {{htmlattrxref("autofocus", "input")}} consente di specificare che un campo dovrebbero ricevere il focus (dovrebbe essere "focalizzato") al caricamento della pagina, a meno che l'utente non decida altrimenti, per esempio immettendo dati in un altro campo. L'attributo <code>autofocus</code>, Booleano, può essere assegnato ad un solo campo per ciascun form. Si applica agli elementi <code>{{HTMLElement("input")}}</code>, <code>{{HTMLElement("button")}}</code>, <code>{{HTMLElement("select")}}</code> e <code>{{HTMLElement("textarea")}}</code>. Unica eccezione: non può essere assegnato agli elementi <code>{{HTMLElement("input")}}</code> che abbiano l'attributo {{htmlattrxref("type", "input")}} impostato su <code>hidden</code> (ovviamente non si può focalizzare un elemento nascosto).</p> +<h2 id="The_label.control_DOM_property" name="The_label.control_DOM_property">La proprietà label.control del DOM</h2> +<p>L'interfaccia DOM <code><a href="/en-US/docs/DOM/HTMLLabelElement" title="DOM/HTMLLabelElement">HTMLLabelElement</a></code> fornisce una proprietà extra, oltre alle proprietà che corrispondono agli attributi dell'elemento HTML <code>{{HTMLElement("label")}}</code>. La proprietà <strong>control</strong> restituisce il campo etichettato, cioè il campo a cui si riferisce l'etichetta (label), che è determinato dall'attributo {{htmlattrxref("for", "label")}} (se definito) o dal primo campo contenuto nell'etichetta.</p> +<h2 id="Constraint_Validation" name="Constraint_Validation">Vincoli di Validazione</h2> +<p>HTML5 fornisce sintassi ed elementi API per supportare la validazione lato client dei form. Anche se questa funzionalità non sostituisce la validazione lato server, che è ancora necessaria per la protezione e l'integrità dei dati, la validazione lato client può fornire una migliore esperienza utente, dando all'utente un feedback immediato sui dati immessi.</p> +<p>Se l'attributo <code>title</code> viene impostato su di un elemento {{HTMLElement("input")}}, il suo valore è usato come tooltip. Tuttavia, se la validazione fallisce, il tooltip sarà sostituito con un messaggio di errore. È possibile personalizzare tale messaggio di errore usando l'attributo non-standard {{htmlattrxref("x-moz-errormessage")}} o con il metodo <code>setCustomValidity()</code>.</p> +<pre class="brush: html"><input type="email" title="Si prega di fornire una e-mail" x-moz-errormessage="E-mail non valida"></pre> +<div class="note"> + <strong>Nota:</strong> I vincoli di validazione non sono supportati dagli elementi {{HTMLElement("button")}}; per assegnare uno stile ai bottoni in base allo status di validazione del form, usare la pseudo-classe {{cssxref(":-moz-submit-invalid")}}.</div> +<h3 id="HTML_Syntax_for_Constraint_Validation" name="HTML_Syntax_for_Constraint_Validation">Sintassi HTML per Vincolare la Validazione</h3> +<p>I seguenti elementi di sintassi HTML5 possono essere usati per specificare i vincoli sui dati immessi nel form.</p> +<ul> + <li>L'attributo {{htmlattrxref("required", "input")}} nell'elemento {{HTMLElement("input")}}, {{HTMLElement("select")}} e {{HTMLElement("textarea")}} indica che il campo deve essere compilato. (Sull'elemento {{HTMLElement("input")}}, {{htmlattrxref("required", "input")}} si applica solo in combinazione con alcuni valori dell'attributo {{htmlattrxref("type", "input")}})</li> + <li>L'attributo {{htmlattrxref("pattern", "input")}} nell'elemento {{HTMLElement("input")}} vincola il valore in modo che corrisponda una specifica espressione regolare.</li> + <li>Gli attributi {{htmlattrxref("min", "input")}} e {{htmlattrxref("max", "input")}} nell'elemento {{HTMLElement("input")}} vincola il valore specificando il valore minimo e massimo che può essere immesso.</li> + <li>L'attributo {{htmlattrxref("step", "input")}} nell'elemento {{HTMLElement("input")}} (se usato in combinazione con gli attributi {{htmlattrxref("min", "input")}} e {{htmlattrxref("max", "input")}} ) vincola la granularità dei valori che possono essere immessi. I valori che non corrispondono ad uno degli "step" consentiti non passano la validazione.</li> + <li>L'attributo {{htmlattrxref("maxlength", "input")}} negli elementi {{HTMLElement("input")}} e {{HTMLElement("textarea")}} vincola il numero massimo di caratteri (in base a punti di codice Unicode) che l'utente può immettere.</li> + <li>I valori <code>url</code> e <code>email</code> nell'attributo {{htmlattrxref("type", "input")}} restringono i valori accettati rispettivamente ad un URL o ad un indirizzo e-mail valido.</li> +</ul> +<p>In aggiunta, è possibile evitare i vincoli di validazione specificando l'attributo {{htmlattrxref("novalidate", "form")}} nel {{HTMLElement("form")}}, o l'attributo {{htmlattrxref("formnovalidate", "button")}} nell'elemento {{HTMLElement("button")}} o nell'elemento {{HTMLElement("input")}} (quando l'attributo {{htmlattrxref("type", "input")}} è impostato su <code>submit</code> o <code>image</code>). Questi attributi indicano che il form <strong>non</strong> deve essere validato.</p> +<h3 id="Constraint_Validation_API" name="Constraint_Validation_API">API per i Vincoli di Validazione</h3> +<p>Le seguenti proprietà e metodi del DOM, correlati ai vincoli di validazione, sono disponibili agli scripts lato client:</p> +<ul> + <li>Negli oggetti <code><a href="/en-US/docs/DOM/HTMLFormElement" title="DOM/HTMLFormElement">HTMLFormElement</a></code>, il metodo <code>checkValidity()</code> restituisce "true" se tutti gli elementi associati a tale elemento del form che sono soggetti a validazione soddisfano i loro vincoli, e "false" se non lo fanno.</li> + <li>On <a href="/en-US/docs/HTML/Content_categories#Form-associated" title="HTML/Content Categories#form-associated">form-associated elements</a>: + <ul> + <li>La proprietà <code>willValidate</code> è "false" se l'elemento non soddisfa i vincoli di validazione.</li> + <li>La proprietà <code>validity</code> è un oggetto <code><a href="/en-US/docs/DOM/ValidityState" title="DOM/ValidityState Interface">ValidityState</a></code> rappresentante lo stato di validazione dell'elemento.</li> + <li>La proprietà <code>validationMessage</code> è un messaggio che descrive eventuali errori relativi ai vincoli impostati sull'elemento.</li> + <li>Il metodo <code>checkValidity()</code>, se l'elemento non soddisfa uno o più dei suoi vincoli, o true in caso contrario.</li> + <li>Il metodo <code>setCustomValidity()</code> imposta un messaggio di errore personalizzato, permettendo anche ai vincoli personalizzati di essere imposti e validati, oltre a quelli predefiniti.</li> + </ul> + </li> +</ul> +<h2 id="Vedi_anche">Vedi anche</h2> +<ul> + <li><a href="/en-US/docs/HTML/Forms" title="/en-US/docs/HTML/Forms">Guida ai Forms HTML</a></li> +</ul> diff --git a/files/it/web/html/global_attributes/id/index.html b/files/it/web/html/global_attributes/id/index.html new file mode 100644 index 0000000000..e6ec20cfda --- /dev/null +++ b/files/it/web/html/global_attributes/id/index.html @@ -0,0 +1,109 @@ +--- +title: id +slug: Web/HTML/Global_attributes/id +translation_of: Web/HTML/Global_attributes/id +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>L' <a href="/en-US/docs/Web/HTML/Global_attributes">attributo globale</a> id definisce un identificatore univoco(ID) che deve esser univoco nell'intero documento. Il suo scopo è quello di identificare l'elemento in un collegamento(using a fragment identifier), negli script, o nella parte grafica (con i CSS).</p> + +<p>Il valore di questo attributo è una "stringa opaca": questo significa che l'autore non lo utilizza per comunicare informazioni. Particular meaning, for example semantic meaning, must not be derived from the string.</p> + +<p>Il valore di questo attributo non deve contenere whitespace (spazi, tab etc.). I browser trattano i whitespace che sono nell'ID come se ne facessero parte. Al contrario dell'attributo <strong>class</strong>, che permette valori separati da uno spazio, ogni elemento puo avere soltanto un ID.</p> + +<div class="note"> +<p><strong>Nota:</strong> Usando caratteri al di fuori delle lettere, numeri, <code>'_'</code>, <code>'-'</code> e <code>'.'</code> , può causare problemi di compatibilità, dato che loro non sono permessi nell'HTML 4. Anche questa restrizione è stata rimossa nell'HTML 5, un id dovrebbe iniziare con una lettera per compatibilità.</p> +</div> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#the-id-attribute", "id")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-id-attribute", "id")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-id-attribute", "id")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, now accept <code>'_'</code>, <code>'-'</code> and <code>'.'</code> if not at the beginning fo the id. It is also a true global attribute.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#adef-id', 'id')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <code>id</code> is a true global attribute only since Gecko 32.0 {{geckoRelease("32.0")}}.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>All <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</li> + <li>{{domxref("Element.id")}} that reflects this attribute.</li> +</ul> diff --git a/files/it/web/html/global_attributes/index.html b/files/it/web/html/global_attributes/index.html new file mode 100644 index 0000000000..84a66619b7 --- /dev/null +++ b/files/it/web/html/global_attributes/index.html @@ -0,0 +1,444 @@ +--- +title: Attributi globali +slug: Web/HTML/Global_attributes +translation_of: Web/HTML/Global_attributes +--- +<p>HTML definisce alcuni attributi che sono comuni a tutti gli elementi HTML . Questi atttributi possono essere utilizzati su tutti gli elementi, anche se gli attributi possono non avere effetti su alcuni elemento.</p> +<div class="note"> + <p><strong>Nota d'uso:</strong> La specifica HTML5 afferma che gli attributi globali possono essere specificati su tutti gli elementi HTML, <em>anche quelli non specificati in HTML5</em>. Questo significa che tutti gli elementi non-standard devono comunque consentire l'uso di questi attributi, anche se con l'utilizzo di tali elementi, il documento non è più HTML5-compliant. Per esempio, i browser HTML5-compliant nascondono i contenuti contrassegnati come <code><foo hidden>...<foo></code><code style="font-size: 14px;">,</code><span style="line-height: 1.572;">anche se </span><code><foo></code><span style="line-height: 1.572;"> non è un valido elemento HTML.</span></p> +</div> +<h2 id="accesskey"><code><a name="attr-accesskey">accesskey</a></code></h2> +<p class="note">Questo attributo fornisce un suggerimento per generare una scorciatoia da tastiera per l'elemento corrente. Questo attributo è costituito da un elenco separato da spazi di caratteri (un singolo punto Unicode). Il browser dovrebbe utilizzare il primo che esiste sul layout di tastiera del computer.<br> + {{ HTMLVersionInline(4) }} Nelle precedenti versioni dell'HTML, solo un carattere poteva essere specificato. Inoltre non era un attributo globale e poteva essere applicato solo ai tag {{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("label") }}, {{ HTMLElement("legend") }} and {{ HTMLElement("textarea") }}.</p> +<div class="note"> + <strong>Nota d'uso:</strong> L'operazione di attivare l'accesskey dipende dal browser e la piattaforma utilizzata. + <table class="standard-table"> + <tbody> + <tr> + <th> </th> + <th>Windows</th> + <th>Linux</th> + <th>Mac</th> + </tr> + <tr> + <th>Firefox</th> + <td colspan="2" rowspan="1" style="text-align: center;">Alt + Shift + a key</td> + <td> + <ul> + <li>Firefox 14 or newer, Control + Alt + a key</li> + <li>Firefox 13 or older, Control + a key</li> + </ul> + </td> + </tr> + <tr> + <th>Internet Explorer</th> + <td>Alt + a key</td> + <td colspan="2" rowspan="1">N/A</td> + </tr> + <tr> + <th>Google Chrome</th> + <td colspan="2" rowspan="1" style="text-align: center;">Alt + a key</td> + <td>Control + Alt + a key</td> + </tr> + <tr> + <th>Safari</th> + <td>Alt + a key</td> + <td>N/A</td> + <td>Control + Alt + a key</td> + </tr> + <tr> + <th>Opera</th> + <td colspan="3" rowspan="1">Shift + Esc apre una lista dei contenuti che sono accessibili tramite un'accesskey, quindi può scegliere un elemento con una chiave</td> + </tr> + </tbody> + </table> + Notare che Firefox può personalizzare il tasto richiesto con le preferenze dell'utente</div> +<table class="fullwidth-table"> + <tbody> + <tr> + <td>Normative document</td> + <td>{{SpecName('HTML WHATWG', "editing.html#the-accesskey-attribute", "accesskey")}} ({{ HTMLVersionInline(4) }}: {{SpecName('HTML4.01', "interact/forms.html#h-17.11.2", "accesskey")}})</td> + </tr> + </tbody> +</table> +<h2 id="class"><code><a name="attr-class">class</a></code></h2> +<p>Questo attributo è un elenco separato da spazi delle classi dell'elemento. Le classi permettono ai CSS e Javascript di selezionare e accedere a elementi specifici con i <a href="/En/CSS/Class_selectors" title="https://developer.mozilla.org/En/CSS/Class_selectors">selettori di classe</a> o funzioni come il metodo DOM {{domxref("document.getElementsByClassName")}}.</p> +<div class="note"> + <p><strong>Nota d'uso:</strong> Anche se le specificazoni non pongono requisiti sul nome delle classi, gli sviluppatori del web sono incoraggiati ad usare nomi che descrivono lo scopo semantico dell'elemento, anzichè la presentazione dell'elemento (ad esempio, attributo che descrive un attributo piuttosto che + <i> + corsivo,</i> + anche se un elemento di questa classe può essere presentata dal corsivo). I nomi semantici rimangono logici, anche se la presentazione della pagina cambia.</p> +</div> +<table class="fullwidth-table"> + <tbody> + <tr> + <td>Normative document</td> + <td>{{SpecName('HTML WHATWG', "elements.html#classes", "class")}} ({{ HTMLVersionInline(4) }}: {{SpecName('HTML4.01', "struct/global.html#h-7.5.2", "class")}})</td> + </tr> + </tbody> +</table> +<h2 id="contenteditable"><code><a name="attr-contenteditable">contenteditable</a></code></h2> +<p>{{ HTMLVersionInline(5) }} {{ Gecko_minversion_inline("1.9") }} This enumerated attribute indicates if the element should be editable by the user. If so, the browser modifies its widget to allow editing. The attribute must take one of the following values:</p> +<ul> + <li><span style="font-family: Courier New;">true</span> or the <em>empty string</em>, which indicates that the element must be editable;</li> + <li><span style="font-family: Courier New;">false</span>, which indicates that the element must not be editable.</li> +</ul> +<p>If this attribute is not set, its default value is <em>inherited</em> from its parent element.</p> +<div class="note"> + <p><strong>Usage note: </strong>This attribute is an <em>enumerated</em> one and not a <em>Boolean </em>one. This means that the explicit usage of one of the values <span style="font-family: Courier New;">true</span>, <span style="font-family: Courier New;">false</span> or the empty string is mandatory and that a shorthand like <code><label contenteditable>Example Label</label> </code>is not allowed. The correct usage is <code><label contenteditable="true">Example Label</label></code>.</p> +</div> +<table class="fullwidth-table"> + <tbody> + <tr> + <td>Normative document</td> + <td>{{specname("HTML WHATWG", "editing.html#attr-contenteditable", "contenteditable")}}</td> + </tr> + </tbody> +</table> +<h2 id="contextmenu"><code><a name="attr-contextmenu">contextmenu</a></code></h2> +<p>{{ HTMLVersionInline(5) }} {{ Gecko_minversion_inline("9.0") }} This attribute is related to the new {{specname("HTML WHATWG", "interactive-elements.html", "contextmenu")}}.</p> +<p>A <em>context menu</em> is a menu that appears upon user interaction, such as a right-click. HTML5 now allows us to customize this menu. Here are some implementation examples, including nested menus.</p> +<div id="ContextMenu_Example"> + <p>The following HTML...</p> + <pre class="brush:html; highlight:[2,3,4,5,10,11,12,13,15,16,17,18]"><body contextmenu="share"> + <menu type="context" id="share"> + <menu label="share"> + <menuitem label="Twitter" onclick="window.open('https://twitter.com/intent/tweet?text=Hurray! I am learning ContextMenu from MDN via Mozilla');"></menuitem> + <menuitem label="Facebook" onclick="window.open('https://facebook.com/sharer/sharer.php?u=https://https://developer.mozilla.org/en/HTML/Element/Using_HTML_context_menus');"></menuitem> + </menu> + </menu> + <ol> + <li>Anywhere in the example you can share the page on Twitter and Facebook using the Share menu from your context menu.</li> + <li><pre contextmenu="changeFont" id="fontSizing">On this specific list element, you can change the size of the text by using the "Increase/Decrease font" actions from your context menu</pre></li> + <menu type="context" id="changeFont"> + <menuitem label="Increase Font" onclick="incFont()"></menuitem> + <menuitem label="Decrease Font" onclick="decFont()"></menuitem> + </menu> + <li contextmenu="ChangeImage" id="changeImage">On the image below, you can fire the "Change Image" action in your Context Menu.</li><br /> + <img src="https://developer.mozilla.org/media/img/promote/promobutton_mdn5.png" contextmenu="ChangeImage" id="promoButton" /> + <menu type="context" id="ChangeImage"> + <menuitem label="Change Image" onclick="changeImage()"></menuitem> + </menu> + </ol> +</body> +</pre> + <div style="display: none;"> + <pre class="brush:css"> ol { + list-style-type:decimal; + } + </pre> + </div> + <p>...used with this JavaScript...</p> + <pre class="brush:js">function incFont(){ + document.getElementById("fontSizing").style.fontSize="larger"; +} +function decFont(){ + document.getElementById("fontSizing").style.fontSize="smaller"; +} +function changeImage(){ + var j = Math.ceil((Math.random()*39)+1); + document.images[0].src="https://developer.mozilla.org/media/img/promote/promobutton_mdn" + j + ".png"; +}</pre> + <p>...will result in:</p> + <div> + {{EmbedLiveSample("ContextMenu_Example",550,200)}}</div> +</div> +<h2 id="data-*"><code><a name="attr-data-*">data-*</a></code></h2> +<p>{{ HTMLVersionInline(5) }}{{ Gecko_minversion_inline("6.0") }} This class of attributes, called custom data attributes, allows proprietary information to be exchanged between the <a href="/en-US/docs/Web/HTML" title="en/HTML">HTML</a> and its <a href="/en-US/docs/DOM" title="en/DOM">DOM</a> representation that may be used by scripts. All such custom data are available via the {{domxref("HTMLElement")}} interface of the element the attribute is set on. The {{domxref("HTMLElement.dataset")}} property gives access to them.<br> + The <code>*</code> may be replaced by any name following <a class="external" href="http://www.w3.org/TR/REC-xml/#NT-Name" title="http://www.w3.org/TR/REC-xml/#NT-Name">the production rule of xml names</a> with the following restrictions:</p> +<ul> + <li>the name must not start with <code>xml</code>, whatever case is used for these letters;</li> + <li>the name must not contain any semicolon (<code>U+003A</code>);</li> + <li>the name must not contain capital <code>A</code> to <code>Z</code> letters.</li> +</ul> +<p>Note that the <code>HTMLElement.dataset</code> attribute is a <code>StringMap</code> and the name of the custom data attribute <em> data-test-value<span id="1305983291817E" style="display: none;"> </span></em> will be accessible via <code>HTMLElement.dataset.</code><em><code>testValue</code></em> as any dash (<code>U+002D</code>) is replaced by the capitalization of the next letter (camelcase).</p> +<table class="fullwidth-table"> + <tbody> + <tr> + <td>Normative document</td> + <td>{{specname("HTML WHATWG", "elements.html#custom-data-attribute", "data")}}</td> + </tr> + </tbody> +</table> +<h2 id="dir"><code><a name="attr-dir">dir</a></code></h2> +<p>This enumerated attribute indicates the directionality of the element's text. It can have the following values:</p> +<ul> + <li><span style="font-family: Courier New;">ltr</span>, which means <em>left to right </em>and is to be used for languages that are written from the left to the right (like English);</li> + <li><span style="font-family: Courier New;">rtl</span>, which means <em>right to left</em> and is to be used for languages that are written from the right to the left (like Arabic);</li> + <li><span style="font-family: Courier New;">auto</span>, which let the user agent decides. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then apply that directionality to the whole element. {{ HTMLVersionInline(5) }}</li> +</ul> +<div class="note"> + <p><strong>Usage notes: </strong></p> + <ul> + <li>This attribute is mandatory for the {{ HTMLElement("bdo") }} element where it has a different semantic meaning.</li> + <li>This attribute is <em>not</em> inherited by the {{ HTMLElement("bdi") }} element. If not set, its value is <span style="font-family: Courier New;">auto</span>.</li> + <li>This attribute can be overridden by the CSS properties {{ cssxref("direction") }} and {{ cssxref("unicode-bidi") }}, if a CSS page is active and the element supports these properties.</li> + <li>As the directionality of the text is semantically related to its content and not to its presentation, it is recommended that web developers use this attribute instead of the related CSS properties when possible. That way, the text will display correctly even on a browser that doesn't support CSS or has the CSS deactivated.</li> + <li>The <code>auto</code> value should be used for data with an unknown directionality, like data coming from user input, eventually stored in a database.</li> + </ul> +</div> +<table class="fullwidth-table"> + <tbody> + <tr> + <td>Normative document</td> + <td>{{specname("HTML WHATWG", "elements.html#the-dir-attribute", "dir")}} ({{ HTMLVersionInline(4) }}: {{SpecName('HTML4.01', "struct/dirlang.html#h-8.2", "dir")}})</td> + </tr> + </tbody> +</table> +<h2 id="draggable"><code><a name="attr-draggable">draggable</a></code></h2> +<p>{{ HTMLVersionInline(5) }} {{ Gecko_minversion_inline("1.9.1") }} This enumerated attribute indicates whether the element can be dragged, using the <a href="/En/DragDrop/Drag_and_Drop" title="https://developer.mozilla.org/En/DragDrop/Drag_and_Drop">Drag and Drop API</a>. It can have the following values:</p> +<ul> + <li><span style="font-family: Courier New;">true</span>, which indicates that the element may be dragged</li> + <li><span style="font-family: Courier New;">false</span>, which indicates that the element may not be dragged.</li> +</ul> +<p>If this attribute is not set, its default value is <span style="font-family: Courier New;">auto</span>, meaning the behavior should be the one defined by default by the browser.</p> +<div class="note"> + <p><strong>Usage notes: </strong></p> + <ul> + <li>This attribute is an <em>enumerated</em> one and not a <em>Boolean </em>one. This means that the explicit usage of one of the values <span style="font-family: Courier New;">true</span> or <span style="font-family: Courier New;">false</span> is mandatory and that a shorthand like <code><label draggable>Example Label</label> </code>is not allowed. The correct usage is <code><label draggable="true">Example Label</label></code>.</li> + <li>By default, only text selections, images, and links can be dragged. For all others elements, the event <strong>ondragstart</strong> must be set in order to the drag and drop mechanism to work, as shown in this <a href="/En/DragDrop/Drag_Operations" title="https://developer.mozilla.org/En/DragDrop/Drag_Operations">comprehensive example</a>.</li> + </ul> +</div> +<table class="fullwidth-table"> + <tbody> + <tr> + <td>Normative document</td> + <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#the-draggable-attribute" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#the-draggable-attribute">HTML5, section 3.9.5</a></td> + </tr> + </tbody> +</table> +<h2 id="dropzone" style="font-style: normal; font-weight: bold;"><code><a name="attr-draggable">dropzone</a></code></h2> +<p>{{ HTMLVersionInline(5) }} {{ unimplemented_inline() }} This enumerated attribute indicates what types of content can be dropped on an element, using the <a href="/En/DragDrop/Drag_and_Drop" style="color: rgb(51, 102, 153) !important; text-decoration: none; cursor: default;" title="https://developer.mozilla.org/En/DragDrop/Drag_and_Drop">Drag and Drop API</a>. It can have the following values:</p> +<ul> + <li><span style="font-family: Courier New;">copy</span>, which indicates that dropping will create a copy of the element that was dragged</li> + <li><span style="font-family: Courier New;">move</span>, which indicates that the element that was dragged will be moved to this new location.</li> + <li><span style="font-family: Courier New;">link</span>, will create a link to the dragged data.</li> +</ul> +<table class="fullwidth-table"> + <tbody> + <tr> + <td>Normative document</td> + <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#the-dropzone-attribute" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#the-dropzone-attribute">HTML5, section 8.6.8</a></td> + </tr> + </tbody> +</table> +<h2 id="hidden"><code><a name="attr-hidden">hidden</a></code></h2> +<p>{{ HTMLVersionInline(5) }} {{ Gecko_minversion_inline("2") }} This Boolean attribute indicates that the element is not yet, or is no longer, <em>relevant</em>. For example, it can be used to hide elements of the page that can't be used until the login process has been completed. The browser won't render such elements.</p> +<div class="note"> + <p><strong>Usage notes: </strong></p> + <ul> + <li>This attribute must not be used to hide content that could legitimately be shown. For example, it shouldn't be used to hide tabs panels of a tabbed interface, as this is a styling decision and another style showing them would lead to a perfectly correct page.</li> + <li>Hidden elements shouldn't be linked from non-hidden elements.</li> + <li>Elements that are descendants of a hidden element are still active, which means that script elements can still execute and form elements can still submit.</li> + <li>Changing the <a href="/en-US/docs/Web/CSS/display">display</a> CSS value of an element with the <code>hidden</code> attribute overrides the behavior. For instance, an element styled <code>display: flex</code> will be displayed on screen regardless of the <code>hidden</code> attribute being present.</li> + </ul> +</div> +<table class="fullwidth-table"> + <tbody> + <tr> + <td>Normative document</td> + <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#the-hidden-attribute" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#the-hidden-attribute">HTML5, section 8.1</a></td> + </tr> + </tbody> +</table> +<h2 id="id"><code><a name="attr-id">id</a></code></h2> +<p>This attribute defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).</p> +<div class="note"> + <p><strong>Usage note: </strong></p> + <ul> + <li>This attribute's value is an opaque string: this means that web author must not use it to convey any information. Particular meaning, for example semantic meaning, must not be derived from the string.</li> + <li>This attribute's value must not contain white spaces. Browsers treat non-conforming IDs that contains white spaces as if the white space is part of the ID. In contrast to the <strong>class</strong> attribute, which allows space-separated values, elements can only have one single ID defined through the <strong>id</strong> attribute. Note that an element may have several IDs, but the others should be set by another means, such as via a script interfacing with the DOM interface of the element.</li> + <li>Using characters except ASCII letters and digits, '_', '-' and '.' may cause compatibility problems, as they weren't allowed in HTML 4. Though this restriction has been lifted in HTML 5, an ID should start with a letter for compatibility.</li> + </ul> +</div> +<table class="fullwidth-table"> + <tbody> + <tr> + <td>Normative document</td> + <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#concept-id" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#concept-id">HTML5, section 3.2.3.1</a> ({{ HTMLVersionInline(4) }}: <a class="external" href="http://www.w3.org/TR/REC-html40/struct/global.html#adef-id" title="http://www.w3.org/TR/REC-html40/struct/global.html#adef-id">HTML4.01, section 7.5.2</a>)</td> + </tr> + </tbody> +</table> +<h2 id="itemid"><code><a name="attr-itemid">itemid</a></code></h2> +<h2 id="itemprop"><code><a name="attr-itemprop">itemprop</a></code></h2> +<h2 id="itemref"><code><a name="attr-itemref">itemref</a></code></h2> +<h2 id="itemscope"><code><a name="attr-itemscope">itemscope</a></code></h2> +<h2 id="itemtype"><code><a name="attr-itemtype">itemtype</a></code></h2> +<p>{{Spec2('HTML WHATWG')}} These attributes are related to the <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#microdata" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#microdata">WHATWG HTML Microdata feature</a>. {{ Bug(591467) }}</p> +<h2 id="lang"><code><a name="attr-lang">lang</a></code></h2> +<p>This attribute participates in defining the language of the element, the language that non-editable elements are written in or the language that editable elements should be written in. The tag contains one single entry value in the format defines in the <a class="external" href="http://www.ietf.org/rfc/bcp/bcp47.txt" title="http://www.ietf.org/rfc/bcp/bcp47.txt"><em>Tags for Identifying Languages (BCP47)</em></a> IETF document. If the tag content is the <em>empty string</em> the language is set to <em>unkn</em><em>own</em>; if the tag content is not valid, regarding to BCP47, it is set to <em>invalid</em>.</p> +<div class="note"> + <p><strong>Usage note:</strong></p> + <ul> + <li>Even if the <strong>lang</strong> attribute is set, it may not be taken into account, as the <strong>xml:lang</strong> attribute has priority. Read the <a href="/en/Determining_the_language_of_element" title="en/Determining the language of element">algorithm determining the language</a> of an element's content to see how the language is determined in all cases.</li> + <li>For the CSS pseudo-class {{ cssxref(":lang") }}, two invalid language names are different if their names are different.</li> + </ul> +</div> +<table class="fullwidth-table"> + <tbody> + <tr> + <td>Normative document</td> + <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#the-lang-and-xml:lang-attributes" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#the-lang-and-xml:lang-attributes">HTML5, section 3.2.3.3</a>({{ HTMLVersionInline(4) }}: <a class="external" href="http://www.w3.org/TR/REC-html40/struct/dirlang.html#adef-lang" title="http://www.w3.org/TR/REC-html40/struct/dirlang.html#adef-lang">HTML4.01, section 8.1</a>)</td> + </tr> + </tbody> +</table> +<h2 id="spellcheck"><code><a name="attr-spellcheck">spellcheck</a></code></h2> +<p>{{ HTMLVersionInline(5) }} {{ Gecko_minversion_inline("1.8.1") }} This enumerated attribute defines whether the element may be checked for spelling errors. It may have the following values:</p> +<ul> + <li><span style="font-family: Courier New;">true</span>, which indicates that the element should be, if possible, checked for spelling errors;</li> + <li><span style="font-family: Courier New;">false</span>, which indicates that the element should not be checked for spelling errors.</li> +</ul> +<p>If this attribute is not set, its default value is element-type and browser-defined. This default value may also be <span style="font-family: Courier New;">inherited</span>, which means that the element content will be checked for spelling errors only if its nearest ancestor has a <em>spellcheck</em> state of <span style="font-family: Courier New;">true</span>.<br> + <br> + You can consult <a href="/en/HTML/Controlling_spell_checking_in_HTML_forms" title="en/Controlling spell checking in HTML forms">this article</a> to see a comprehensive example of the use of this attribute.</p> +<div class="note"> + <p><strong>Usage notes: </strong></p> + <ul> + <li>This attribute is an <em>enumerated</em> one and not a <em>Boolean </em>one. This means that the explicit usage of one of the values <span style="font-family: Courier New;">true</span> or <span style="font-family: Courier New;">false</span> is mandatory and that a shorthand like <code><label spellcheck>Example Label</label> </code>is not allowed. The correct usage is <code><label spellcheck="true">Example Label</label></code>.</li> + <li>This attribute is merely a hint for the browser: browsers are not required to be able to check for spelling errors. Typically non-editable elements are not checked for spelling errors, even if the <strong>spellcheck</strong> attribute is set to true and the browser supports spellchecking.</li> + <li>The default value of this attribute is browser and element-dependant:</li> + </ul> + <table class="fullwidth-table"> + <tbody> + <tr> + <th>Browser</th> + <th>{{ HTMLElement("html") }}</th> + <th>{{ HTMLElement("textarea") }}</th> + <th>{{ HTMLElement("input") }}</th> + <th>others</th> + <th>Comment</th> + </tr> + <tr> + <td rowspan="3">Firefox</td> + <td><span style="font-family: Courier New;">false</span></td> + <td><span style="font-family: Courier New;">false</span></td> + <td><span style="font-family: Courier New;">false</span></td> + <td><span style="font-family: Courier New;">inherited</span></td> + <td>When <span style="font-family: Courier New;">layout.spellcheckDefault</span> is <span style="font-family: Courier New;">0</span></td> + </tr> + <tr> + <td><strong><span style="font-family: Courier New;">false</span></strong></td> + <td><strong><span style="font-family: Courier New;">true</span></strong></td> + <td><span style="font-family: Courier New;"><strong>inherited</strong></span></td> + <td><span style="font-family: Courier New;"><strong>inherited</strong></span></td> + <td><strong>When <span style="font-family: Courier New;">layout.spellcheckDefault</span> is <span style="font-family: Courier New;">1</span> (default value)</strong></td> + </tr> + <tr> + <td><span style="font-family: Courier New;">false</span></td> + <td><span style="font-family: Courier New;">true</span></td> + <td><span style="font-family: Courier New;">true</span></td> + <td><span style="font-family: Courier New;">inherited</span></td> + <td>When <span style="font-family: Courier New;">layout.spellcheckDefault</span> is <span style="font-family: Courier New;">2</span></td> + </tr> + <tr> + <td rowspan="3">Seamonkey</td> + <td><span style="font-family: Courier New;">false</span></td> + <td><span style="font-family: Courier New;">false</span></td> + <td><span style="font-family: Courier New;">false</span></td> + <td><span style="font-family: Courier New;">inherited</span></td> + <td>When <span style="font-family: Courier New;">layout.spellcheckDefault</span> is <span style="font-family: Courier New;">0</span></td> + </tr> + <tr> + <td><strong><span style="font-family: Courier New;">false</span></strong></td> + <td><strong><span style="font-family: Courier New;">true</span></strong></td> + <td><span style="font-family: Courier New;"><strong>inherited</strong></span></td> + <td><span style="font-family: Courier New;"><strong>inherited</strong></span></td> + <td><strong>When <span style="font-family: Courier New;">layout.spellcheckDefault</span> is <span style="font-family: Courier New;">1</span> (default value)</strong></td> + </tr> + <tr> + <td><span style="font-family: Courier New;">false</span></td> + <td><span style="font-family: Courier New;">true</span></td> + <td><span style="font-family: Courier New;">true</span></td> + <td><span style="font-family: Courier New;">inherited</span></td> + <td>When <span style="font-family: Courier New;">layout.spellcheckDefault</span> is <span style="font-family: Courier New;">2</span></td> + </tr> + <tr> + <td rowspan="3">Camino</td> + <td><span style="font-family: Courier New;">false</span></td> + <td><span style="font-family: Courier New;">false</span></td> + <td><span style="font-family: Courier New;">false</span></td> + <td><span style="font-family: Courier New;">inherited</span></td> + <td>When <span style="font-family: Courier New;">layout.spellcheckDefault</span> is <span style="font-family: Courier New;">0</span></td> + </tr> + <tr> + <td><span style="font-family: Courier New;">false</span></td> + <td><span style="font-family: Courier New;">true</span></td> + <td><span style="font-family: Courier New;">inherited</span></td> + <td><span style="font-family: Courier New;">inherited</span></td> + <td>When <span style="font-family: Courier New;">layout.spellcheckDefault</span> is <span style="font-family: Courier New;">1</span></td> + </tr> + <tr> + <td><strong><span style="font-family: Courier New;">false</span></strong></td> + <td><strong><span style="font-family: Courier New;">true</span></strong></td> + <td><strong><span style="font-family: Courier New;">true</span></strong></td> + <td><span style="font-family: Courier New;"><strong>inherited</strong></span></td> + <td><strong>When <span style="font-family: Courier New;">layout.spellcheckDefault</span> is <span style="font-family: Courier New;">2 </span><strong>(default value)</strong></strong></td> + </tr> + </tbody> + </table> +</div> +<table class="fullwidth-table"> + <tbody> + <tr> + <td>Normative document</td> + <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#attr-spellcheck" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#attr-spellcheck">HTML5, section 8.8</a></td> + </tr> + </tbody> +</table> +<h2 id="style"><code><a name="attr-style">style</a></code></h2> +<p>This attribute contains <a href="/en/CSS" title="en/CSS">CSS</a> styling declarations to be applied to the element. Note that it is recommended for styles to be defined in a separate file or files. This attribute and the {{ HTMLElement("style") }} element have mainly the purpose of allowing for quick styling, for example for testing purposes.</p> +<div class="note"> + <p><strong>Usage note: </strong>This attribute must not be used to convey semantic information. Even if all styling is removed, a page should remain semantically correct. Typically it shouldn't be used to hide irrelevant information; this should be done using the <a href="#attr-hidden" title="#attr-hidden"><strong>hidden</strong></a> attribute.</p> +</div> +<table class="fullwidth-table"> + <tbody> + <tr> + <td>Normative document</td> + <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#the-style-attribute" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#the-style-attribute">HTML5, section 3.2.3.7</a>({{ HTMLVersionInline(4) }}: <a class="external" href="http://www.w3.org/TR/REC-html40/present/styles.html#h-14.2.2" title="http://www.w3.org/TR/REC-html40/present/styles.html#h-14.2.2">HTML4.01, section 14.2.2</a>)</td> + </tr> + </tbody> +</table> +<h2 id="tabindex"><code><a name="attr-tabindex">tabindex</a></code></h2> +<p>This integer attribute indicates if the element can take input focus (is <em>focusable</em>), if it should participate to sequential keyboard navigation, and if so, at what position. It can takes several values:</p> +<ul> + <li>a <em>negative value</em> means that the element should be focusable, but should not be reachable via sequential keyboard navigation;</li> + <li><span style="font-family: Courier New;">0</span> means that the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by the platform convention;</li> + <li>a <span style="font-style: italic;">positive</span><em> value</em> which means should be focusable and reachable via sequential keyboard navigation; its relative order is defined by the value of the attribute: the sequential follow the increasing number of the <strong>tabindex</strong>. If several elements share the same tabindex, their relative order follows their relative position in the document).</li> +</ul> +<p>An element with a <span style="font-family: Courier New;">0</span> value, an invalid value, or no <strong>tabindex</strong> value should be placed after elements with a positive <strong>tabindex</strong> in the sequential keyboard navigation order.</p> +<p>You can consult <a href="/en/Focus_management_in_HTML" title="en/Focus management in HTML">this article</a> to see a comprehensive explanation of focus management.</p> +<table class="fullwidth-table"> + <tbody> + <tr> + <td>Normative document</td> + <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#attr-tabindex" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#attr-tabindex">HTML5, section 8.4.1</a>({{ HTMLVersionInline(4) }}: <a class="external" href="http://www.w3.org/TR/REC-html40/interact/forms.html#adef-tabindex" title="http://www.w3.org/TR/REC-html40/interact/forms.html#adef-tabindex">HTML4.01, section 17.11.1</a>)</td> + </tr> + </tbody> +</table> +<h2 id="title"><code><a name="attr-title">title</a></code></h2> +<p>This attribute contains a text representing advisory information related to the element it belongs too. Such information can typically, but not necessarily, be presented to the user as a tooltip. Here are some typical uses of this attribute:</p> +<ul> + <li>Link: the title or a description of the linked document</li> + <li>Media element like an image: a description or associated credits</li> + <li>Paragraph: a footnote or a commentary about it</li> + <li>Quotation: some information about the author, and so on.</li> +</ul> +<p>If this attribute is omitted, it means that the title of the nearest ancestor of this element is still relevant for it (and can legitimately be used as the tooltip for that element. If this attribute is set to the <em>empty string</em>, it explicitly means that its nearest ancestor's title is not relevant for this element (and shouldn't be used in the tooltip for that element).</p> +<p>Additional semantics are attached to the <strong>title</strong> attributes of the {{ HTMLElement("link") }}, {{ HTMLElement("abbr") }} and {{ HTMLElement("input") }}.</p> +<div class="note"> + <p><strong>Usage note:</strong> The <strong>title</strong> attribute may contains several lines. Each U+000A LINE FEED (LF) inserted represents such a newline. Some caution must be taken though, as that means that:</p> + <pre class="brush: html"><p>Newlines in title should be taken into account,like this <abbr title="This is a +multiline title">example</abbr>.</p> +</pre> + <p>defines a two-line title.</p> + <p>Support for multi-line titles was added to Gecko in Gecko 12.0 {{ geckoRelease("12.0") }}.</p> +</div> +<table class="fullwidth-table"> + <tbody> + <tr> + <td>Normative document</td> + <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#the-title-attribute" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#the-title-attribute">HTML5, section 3.2.3.3</a> ({{ HTMLVersionInline(4) }}: <a class="external" href="http://www.w3.org/TR/REC-html40/struct/global.html#adef-title" title="http://www.w3.org/TR/REC-html40/struct/global.html#adef-title">HTML4.01, section 7.4.3</a></td> + </tr> + </tbody> +</table> +<p> </p> diff --git a/files/it/web/html/html5/index.html b/files/it/web/html/html5/index.html new file mode 100644 index 0000000000..be6fc91a82 --- /dev/null +++ b/files/it/web/html/html5/index.html @@ -0,0 +1,167 @@ +--- +title: HTML5 +slug: Web/HTML/HTML5 +translation_of: Web/Guide/HTML/HTML5 +--- +<p><span class="seoSummary"><strong>HTML5</strong> è l'ultima evoluzione dello standard che definisce <a href="/en-US/docs/HTML" title="HTML">HTML</a>. </span>Il termine rappresenta due concetti differenti:</p> + +<ul> + <li>Una nuova versione del <em>linguaggio</em> HTML, con nuovi elementi, attributi e comportamenti</li> + <li>Un più ampio insieme di tecnologie che permettono siti web e applicazioni più diversificate e potenti: Questo insieme è chiamato <em>HTML5 & compagni</em> ed è spesso abbreviato in<em> HTML5</em></li> +</ul> + +<p>Progettata per essere usabile da tutti gli sviluppatori Open Web, questa pagina di riferimento ha numerosi collegamenti a risorse riguardanti le tecnologie HTML5, classificate in diversi gruppi in base alla loro funzione.</p> + +<ul> + <li><em>Semantica</em>: descrivere con maggiore precisione il contenuto.</li> + <li><em>Connettività</em>: comunicare con il server in modi nuovi e innovativi.</li> + <li><em>Offline & Memorizzazione</em>: permettere alle pagine web di immagazzinare dati sul client per operare più efficientemente offline.</li> + <li><em>Multimedia</em>: rendere audio e video cittadini di prima classe nell'Open Web.</li> + <li><em>Effetti e Grafica 2D/3D</em>: usare una gamma molto più ampia di opzioni di rappresentazione.</li> + <li><em>Prestazioni & Integrazione</em>: ottimizzare la velocità di caricamento e ottenere un migliore utilizzo delle risorse hardware.</li> + <li><em>Accesso ai dispositivi</em>: usare vari dispositivi di input e output.</li> + <li><em>Stile:</em> consentire agli autori di realizzare temi più sofisticati.</li> +</ul> + +<div class="cleared row topicpage-table"> +<div class="section"> +<h2 id="Semantica" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Semantica</h2> + +<dl> + <dt><a href="/it/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document" title=" +Sezioni e Struttura di un Documento HTML5">Sezioni e struttura in HTML5</a></dt> + <dd>Uno sguardo ai nuovi elementi di sezionamento e contorno in HTML5: {{HTMLElement("section")}} , {{HTMLElement("article")}} , {{HTMLElement("nav")}} , {{HTMLElement("header")}} , {{HTMLElement("footer")}} , {{HTMLElement("aside")}} e {{HTMLElement("hgroup")}}.</dd> + <dt><a href="/it/docs/HTML/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Integrare audio e video in HTML5</a></dt> + <dd>Gli elementi {{HTMLElement("audio")}} e {{HTMLElement("video")}} permettono l'integrazione e la manipolazione di nuovi contenuti multimediali.</dd> + <dt><a href="/it/docs/HTML/Forms_in_HTML" title="Forms in HTML5">Forms in HTML5</a></dt> + <dd>Uno sguardo ai miglioramenti dei form in HTML5: le API di convalida dei campi, parecchi nuovi attributi, nuovi valori per l'attributo {{htmlattrxref("type", "input")}} degli {{HTMLElement("input")}}, e il nuovo elemento {{HTMLElement("output")}}.</dd> + <dt>Nuovi elementi semantici</dt> + <dd>Accanto a sezioni, multimedia e le novità dei forms, ci sono numerosi nuovi elementi come {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, o {{HTMLElement("meter")}}, che accrescono la quantità di <a href="/en-US/docs/HTML/HTML5/HTML5_element_list" title="HTML/HTML5/HTML5_element_list">elementi validi di HTML5</a>.</dd> + <dt>Miglioramenti degli {{HTMLElement("iframe")}}</dt> + <dd>Utilizzando {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, e gli attributi {{htmlattrxref("srcdoc", "iframe")}}, gli autori possono ora precisare il livello di sicurezza e il rendering desiderato di un elemento {{HTMLElement("iframe")}}.</dd> + <dt><a href="/en-US/docs/MathML" title="MathML">MathML</a></dt> + <dd>Permette di incorporare direttamente formule matematiche.</dd> + <dt><a href="/it/docs/HTML/HTML5/Introduction_to_HTML5" title="HTML/HTML5/Introduction_to_HTML5">Introduzione a HTML5</a></dt> + <dd>Questo articolo introduce al problema di come indicare al browser che stai utilizzando HTML5 nel tuo progetto o applicazione web.</dd> + <dt><a href="/en-US/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">Parser di HTML5-compatibile</a></dt> + <dd>Il parser, che converte i byte di un documento HTML nel DOM, è stato esteso ed ora riconosce con precisione il comportamento da adottare in tutti i casi, anche quando incontra HTML non valido. Ciò conduce ad una maggiore prevedibilità e interoperabilità tra i browser compatibili con HTML5.</dd> +</dl> + +<h2 id="Connettività" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Connettività</h2> + +<dl> + <dt><a href="/en-US/docs/WebSockets" title="WebSockets">Web Sockets</a></dt> + <dd>Permette di creare una connessione permanente tra la pagina ed il server e di scambiare dati, non HTML, attraverso questo mezzo.</dd> + <dt><a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="Server-sent_events/Using_server-sent_events">Server-event inviati</a></dt> + <dd>Permetta a un server di sottoporre eventi al client, contrariamente al classico paradigma per cui il server invia dati solo in risposta alla richiesta del client.</dd> + <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt> + <dd>Questa tecnologia, in cui RTC sta per Real Time Communication, permette di connettersi ad altre persone e controllare direttamente la videoconferenza nel browser, senza bisogno di plugin o applicazioni esterne.</dd> +</dl> + +<h2 id="Offline_Memorizzazione" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Offline & Memorizzazione</h2> + +<dl> + <dt><a href="/en-US/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">Risorse Offline: la cache dell'applicazione</a></dt> + <dd>Firefox supporta a pieno le specifiche offline di HTML5. La maggior parte degli altri browser hanno un qualche livello di supporto per le risorse offline.</dd> + <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Eventi online e offline</a></dt> + <dd>Firefox 3 supporta eventi WHATWG online e offline, che lasciano rilevare alle applicazioni ed estensioni se c'è o no una connessione internet attiva, nonché quando la connessione cambia stato.</dd> + <dt><a href="/en-US/docs/DOM/Storage" title="DOM/Storage">Sessione WHATWG lato client e memorizzazione persistente (alias Memorizzazione DOM)</a></dt> + <dd>La memorizzazione lato client, persistente e di sessione, permette alle applicazioni web di immagazzinare strutture dati lato client.</dd> + <dt><a href="/en-US/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt> + <dd>E' uno standard web per la memorizzazione nel browser di significative quantità di dati strutturati e per ricerche indicizzate ad elevate prestazioni su tali dati.</dd> + <dt><a href="/en-US/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">Utilizzare file da applicazioni web</a></dt> + <dd>Il supporto per le nuove API per i file in HTML5 è stato aggiunto a Gecko, rendendo possibile l'accesso a file locali selezionati dall'utente. Ciò include il supporto per la selezione multipla di file utilizzando il nuovo attributo <a href="/en-US/docs/HTML/Element/Input#attr-multiple" title="HTML/Element/input#attr-multiple"><strong>multiple</strong></a> con <a href="/en-US/docs/HTML/Element/Input#attr-type" title="HTML/Element/input#attr-type"><strong>type</strong></a> <span style="font-family: courier new;">file</span> dell'elemento <span style="font-family: monospace;">{{HTMLElement("input")}}</span>. C'è anche <a href="/en-US/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a>.</dd> +</dl> + +<h2 id="Multimedia" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Multimedia</h2> + +<dl> + <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Utilizzare audio e video in HTML5</a></dt> + <dd>Gli elementi {{HTMLElement("audio")}} e {{HTMLElement("video")}} incorporano e permetto la manipolazione di nuovi contenuti multimediali.</dd> + <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt> + <dd>Questa tecnologia, in cui RTC sta per Real Time Communication, permette di connettersi ad altre persone e controlla direttamente la videoconferenza nel browser, senza bisogno di plugin o applicazioni esterne.</dd> + <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Utilizzo della API Camera</a></dt> + <dd>Permette di usare, manipolare e memorizzare un'immagine dalla fotocamera del computer.</dd> + <dt>Track e WebVTT</dt> + <dd>L'elemento {{HTMLElement("track")}} consente capitoli e sottotitoli. <a href="/en-US/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a> è un formato di traccia testuale.</dd> +</dl> + +<h2 id="Grafica_Effetti_3D" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Grafica & Effetti 3D</h2> + +<dl> + <dt><a href="/en-US/docs/Canvas_tutorial" title="Tutorial Canvas">Tutorial sui Canvas</a></dt> + <dd>Apprendi il nuovo elemento <code>{{HTMLElement("canvas")}}</code> e come disegnare grafica ed altri oggetti in Firefox</dd> + <dt><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">API di testo per gli elementi <code><canvas></code> di HTML5</a></dt> + <dd>Le API di testo di HTML5 sono ora supportate agli elementi {{HTMLElement("canvas")}}.</dd> + <dt><a href="/en-US/docs/WebGL" title="WebGL">WebGL</a></dt> + <dd>WebGL porta la grafica 3D sul Web introducendo una API strettamente conforme a OpenGL ES 2.0 utilizzata negli elementi {{HTMLElement("canvas")}} di HTML5.</dd> + <dt><a href="/en-US/docs/SVG" title="SVG">SVG</a></dt> + <dd>Un formato di immagine vettoriale basato su XML che può essere direttamente incorporato nel documento HTML.</dd> +</dl> +</div> + +<div class="section"> +<h2 id="Prestazioni_integrazione" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Prestazioni & integrazione</h2> + +<dl> + <dt><a href="/en-US/docs/DOM/Using_web_workers" title="Usare i web workers">Web Workers</a></dt> + <dd>Permette di delegare l'esecuzione JavaScript a thread in background, impedendo a queste attività di rallentare gli eventi interattivi.</dd> + <dt><code><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> Livello 2</dt> + <dd>Permette di ottenere asincronamente qualche parte della pagina e di visualizzarne dinamicamente il contenuto, variandolo nel tempo e in base alle azioni dell'utente. Questa è la tecnologia dietro <a href="/en-US/docs/AJAX" title="AJAX">Ajax</a>.</dd> + <dt>JIT-motori JavaScript compilati</dt> + <dd>La nuova generazione di motori JavaScript sono molto più potenti, e garantiscono maggiori prestazioni.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating_the_browser_history">History API</a></dt> + <dd>Permette la manipolazione della cronologia del browser. Ciò è particolarmente utile per le pagine che caricano nuove informazioni interattivamente.</dd> + <dt><a href="/en-US/docs/HTML/Content_Editable" title="HTML/Content Editable">L'attributo contentEditable: trasforma il tuo sito web in un wiki!</a></dt> + <dd>HTML5 ha standardizzato l'attributo contentEditable.</dd> + <dt><a href="/en-US/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">Drag & drop</a></dt> + <dd>Le API per il drag & drop in HTML5 supportano il trascinamento e rilascio di voci all'interno del sito e tra siti web. Fornisce anche una API più semplice per l'uso da parte di estensioni e applicazioni basate su Mozilla.</dd> + <dt><a href="/en-US/docs/Focus_management_in_HTML" title="Focus_management_in_HTML">Gestione del focus in HTML</a></dt> + <dd>Sono supportati i nuovi attributiHTML5 <code>activeElement</code> e <code>hasFocus</code>.</dd> + <dt><a href="/en-US/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">Gestori di protocollo basato sul Web</a></dt> + <dd>E' ora possibile registrare applicazioni web come gestori di protocollo utilizzando il metodo <code>navigator.registerProtocolHandler()</code>.</dd> + <dt><a href="/en-US/docs/DOM/window.requestAnimationFrame" title="DOM/window.requestAnimationFrame"><code>requestAnimationFrame</code></a></dt> + <dd>Permette di controllare il rendering delle animazioni per ottenere prestazioni ottimali.</dd> + <dt><a href="/en-US/docs/DOM/Using_full-screen_mode" title="DOM/Using_full-screen_mode">Fullscreen API</a></dt> + <dd>Controlla l'utilizzo a pieno schermo da parte di pagine web e applicazioni, senza la visualizzazione della UI del browser.</dd> + <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt> + <dd>Permette di bloccare il puntatore al contenuto, così giochi e applicazioni simili non perdono il focus quando il puntatore ne oltrepassa il margine.</dd> + <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Eventi online ed offline</a></dt> + <dd>Al fine di costruire una buona applicazione web capace di lavorare offline, hai bisogno di sapere quando l'applicazione è offline. Hai anche bisogno di sapere quando l'applicazione torna nello stato online.</dd> +</dl> + +<h2 id="Accesso_ai_Dispositivi" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Accesso ai Dispositivi</h2> + +<dl> + <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Utilizzare le API Camera</a></dt> + <dd>Permette di utilizzare, manipolare e immagazzinare immagini dalla fotocamera del computer.</dd> + <dt><a href="/en-US/docs/DOM/Touch_events" title="DOM/Touch_events">Eventi Touch</a></dt> + <dd>Gestori che reagiscono ad eventi creati dalla pressione sullo schermo da parte dell'utente.</dd> + <dt><a href="/en-US/docs/Using_geolocation" title="Using geolocation">Utilizzare la geolocalizzazione</a></dt> + <dd>Permetti al browser di localizzare la posizione dell'utente grazie alla geolocalizzazione.</dd> + <dt><a href="/en-US/docs/Detecting_device_orientation" title="Detecting_device_orientation">Rilevazione orientamento del dispositivo</a></dt> + <dd>Lascia che il browser sia informato del cambio di orientamento del dispositivo. Può essere utilizzato come metodo di input (per esempio per realizzare giochi che reagiscono alla posizione del dispositivo) o per adattare l'impaginazione all'orientamento dello schermo (potrait o landscape).</dd> + <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt> + <dd>Permette di bloccare il puntatore al contenuto, così giochi e applicazioni simili non perdono il focus quando il puntatore ne oltrepassa il margine.</dd> +</dl> + +<h2 id="Stile" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Stile</h2> + +<p><a href="/en-US/docs/CSS" title="CSS">CSS</a> è stato esteso consentendo elementi di stile più complessi. E' spesso identificato come <a href="/en-US/docs/CSS/CSS3" title="CSS/CSS3">CSS3</a>, sebbene CSS non sia comunque una specifica monolitica e i differenti moduli non siano tutti di livello 3: alcuni sono di livello 1, ed altri di livello 4, con tutti i livelli intermedi.</p> + +<dl> + <dt>Nuove caratteristiche di stile per lo sfondo</dt> + <dd>E' ora possibile aggiungere un'ombra a un box, utilizzando{{cssxref("box-shadow")}} ed impostare <a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple_backgrounds">sfondi multipli</a>.</dd> + <dt>Bordi più fantasiosi</dt> + <dd>Non è solo possibile utilizzare le immagini come stile dei bordi, utilizzando {{cssxref("border-image")}} e le proprietà associate, ma sono supportati i bordi arrotondati per mezzo della proprietà {{cssxref("border-radius")}}.</dd> + <dt>Anima il tuo stile</dt> + <dd>Utilizzando le <a href="/en-US/docs/CSS/Using_CSS_transitions" title="CSS/Using_CSS_transitions">Transizioni CSS</a> per animare il passaggio tra stati, o utilizzando le <a href="/en-US/docs/CSS/Using_CSS_animations" title="CSS/Using_CSS_animations">Animazioni CSS</a> per animare parti della pagina senza un evento scatenante, puoi controllare gli elementi mobili sulla pagina.</dd> + <dt>Miglioramenti tipografici</dt> + <dd>Gli autori hanno un miglior controllo per ottenere un migliore aspetto tipografico. Possono controllare il {{cssxref("text-overflow")}} e la <a href="/en-US/docs/CSS/hyphens" title="CSS/hyphens">sillabazione</a>, ma possono anche applicare <a href="/en-US/docs/CSS/text-shadow" title="CSS/text-shadow">un'ombra</a> o controllare più precisamente la <a href="/en-US/docs/CSS/text-decoration" title="SVG/Attribute/text-decoration">decorazione</a>. Caratteri tipografici personalizzati possono essere scaricati e applicati grazie alla nuova regola {{cssxref("@font-face")}}.</dd> + <dt>Nuove impaginazioni per la presentazione</dt> + <dd>Al fine di migliorare la flessibilità di progettazione, sono stati aggiunti due nuovi layout: <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="CSS/Using_CSS_multi-column_layouts">Impaginazione CSS a colonna multipla</a>, e <a href="/en-US/docs/CSS/Flexbox" title="CSS/Flexbox">l'impaginazione CSS a box flessibile</a>.</dd> +</dl> +</div> +</div> + +<p> </p> diff --git a/files/it/web/html/html5/introduction_to_html5/index.html b/files/it/web/html/html5/introduction_to_html5/index.html new file mode 100644 index 0000000000..14fe305eb6 --- /dev/null +++ b/files/it/web/html/html5/introduction_to_html5/index.html @@ -0,0 +1,22 @@ +--- +title: Introduzione a HTML5 +slug: Web/HTML/HTML5/Introduction_to_HTML5 +translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 +--- +<p><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">HTML5</a> è la quinta revisione e l'ultima versione dello standard HTML. Propone nuove funzionalità che forniscono il supporto dei rich media, la creazione di applicazioni web in grado di interagire con l'utente, con i suoi dati locali e i servers, in maniera più facile ed efficiente di prima.</p> +<p>Poiché HTML5 è ancora in fase di sviluppo, inevitabilmente ci saranno altre modifiche alle specifiche. Pertanto al momento non tutte le funzioni sono supportate da tutti i browser. Tuttavia Gecko, e per estensione Firefox, supporta HTML5 in maniera ottimale, e gli sviluppatori continuano a lavorare per supportare ancora più funzionalità. Gecko ha iniziato a supportare alcune funzionalità di HTML5 dalla versione 1.8.1. È possibile trovare un elenco di tutte le funzionalità HTML5 che Gecko supporta attualmente nella <a href="/it/HTML/HTML5" title="it/HTML/HTML5">pagina principale di HTML5</a>. Per informazioni dettagliate sul supporto degli altri browser delle funzionalità HTML5, fare riferimento al sito web <a class="external" href="http://caniuse.com/#cats=HTML5" title="http://caniuse.com/#cats=HTML5">CanIUse</a>.</p> +<h2 id="Dichiarare_che_un_documento_contiene_mark-up_HTML5_con_il_doctype_HTML">Dichiarare che un documento contiene mark-up HTML5 con il doctype HTML</h2> +<p>Il doctype per HTML5 è semplicissimo. Per specificare che il vostro contenuto HTML utilizza HTML5, basta dichiarare:</p> +<pre class="brush:html;"><!DOCTYPE html> +</pre> +<p>Così facendo persino i browser che attualmente non supportano HTML5 entreranno in modalità standard, cioè interpreteranno il codice HTML in modo compatibile con HTML5, ignorando le nuove funzionalità di HTML5 se non le supportano.</p> +<p>È molto più semplice rispetto ai precedenti doctype, oltre che più breve, quindi più facile da ricordare e riduce anche la quantità di byte scaricati dall'utente.</p> +<h2 id="Dichiarare_il_set_di_caratteri_con_<meta_charset>">Dichiarare il set di caratteri con <code><meta charset></code></h2> +<p>Indicare il set di caratteri che verrà utilizzato è solitamente la prima cosa da fare in un documento HTML. La specifica precedente richiedeva un elemento {{HTMLElement("meta")}} molto complesso. Ora è facilissimo:</p> +<pre class="brush:html;"><meta charset="UTF-8"></pre> +<p>Ricordati di inserire questo tag subito dopo l'apertura del {{HTMLElement("head") }}, perché alcuni browser riavviano il parsing di un documento HTML se il set di caratteri dichiarato è diverso da quello che avevano previsto. Inoltre consigliamo sempre di usare il set UTF-8, ove possibile, perché semplifica la gestione dei caratteri nei documenti utilizzando diversi script.</p> +<p>Nota bene: HTML5 limita il set di caratteri validi a quelli compatibili con ASCII e che usano almeno 8 bit. Ciò è stato deciso per motivi di sicurezza e per prevenire alcuni tipi di attacchi.</p> +<h2 id="Usare_il_nuovo_parser_HTML5">Usare il nuovo parser HTML5</h2> +<p>La regola di parsing di HTML5, che analizza il significato del mark-up, è stata definita con maggiore precisione in HTML5. Fino all'introduzione di HTML5, le uniche regole riguardavano il mark-up <em>valido</em>, quindi il comportamento del parser in caso di errori (e la maggior parte dei siti web ne ha almeno uno) era indefinito. In sostanza, tutti i browser si comportavano in modo diverso. Ora, di fronte a errori nel mark-up, tutti i browser conformi devono comportarsi esattamente nello stesso modo.</p> +<p>Questo obbligo aiuta non poco gli sviluppatori. Anche se tutti i browser moderni ora applicano queste regole di analisi HTML5, alcuni utenti navigano ancora con browser non compatibili con HTML5. Tenete a mente che è ancora altamente raccomandato stendere mark-up valido, in modo che il codice sia facile da leggere e mantenere nel tempo, e diminuisca notevolmente la probabilità di incompatibilità con i vari browser più datati.</p> +<p>Non preoccuparti — non devi cambiare nulla del tuo sito Web — gli sviluppatori dei browser hanno già fatto tutto per te!</p> diff --git a/files/it/web/html/index.html b/files/it/web/html/index.html new file mode 100644 index 0000000000..085a15bd7a --- /dev/null +++ b/files/it/web/html/index.html @@ -0,0 +1,75 @@ +--- +title: 'HTML: Hypertext Markup Language' +slug: Web/HTML +translation_of: Web/HTML +--- +<div>{{HTMLSidebar}}</div> + +<p class="summary"><span class="seoSummary"><strong>HTML</strong> (HyperText Markup Language) è il linguaggio utilizzato per creare pagine web e altri tipi di documenti visualizzabili in un browser. Insieme all'HTML vengono utilizzate altre tecnologie per modificare la presentazione/apparenza di una pagina web (<a href="/it/docs/Web/CSS">CSS</a>) o la sua funzionalità (<a href="/it/docs/Web/JavaScript">JavaScript</a>).</span></p> + +<p>Con "Hypertext" si fa riferimento ai link che connettono pagine web con altre, sia all'interno di un singolo sito web o tra più siti web. I link sono un aspetto fondamentale del Web. Caricando contenuti su Internet e collegandoli a pagine create da altri utenti, diventi un partecipante attivo nel World Wide Web.</p> + +<p>L'HTML utilizza il "markup" per annotare testo, immagini e altri contenuti da mostrare in un browser Web. Il markup HTML include "elementi" speciali come {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("datalist")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("nav")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("video")}}, {{HTMLElement("ul")}}, {{HTMLElement("ol")}}, {{HTMLElement("li")}} e molti altri.</p> + +<p>Un elemento HTML viene distinto in un documento dal resto del testo tramite i "tag", che consiste nel nome dell'elemento circondato da "<code><</code>" e "<code>></code>". Il nome di un elemento all'interno di un tag è case insensitive. Questo significa che può essere scritto in maiuscolo, minuscolo o misto. Ad esempio il tag <code><title></code> può essere scritto come <code><Title></code>, <code><TITLE></code>, o in qualsiasi altro modo.</p> + +<p>Gli articolo qui sotto possono aiutarti a saperne di più sull'HTML.</p> + +<div class="cleared row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Documentation" name="Documentation">Documentazione su HTML</h2> + +<dl> + <dt><a href="https://developer.mozilla.org/it/docs/HTML/Introduction" title="Introduction to HTML"><strong>Introduzione ad HTML</strong></a></dt> + <dd>La pagina fornisce informazioni base sulla sintassi e semantica di una pagina HTML (documento). Ciò fornirà le inormazioni base imprescindibili per lo sviluppo di documenti HTML.</dd> + <dt><a href="https://developer.mozilla.org/it/docs/HTML/Element" title="HTML/Element">Riferimento degli elementi HTML</a></dt> + <dd>Ottenere i dettagli su ogni elemento supportato dai differenti browser.</dd> + <dt><a href="https://developer.mozilla.org/it/docs/HTML/Attributes" title="HTML/Attributes">Elenco degli attributi HTML</a></dt> + <dd>Vedere tutti gli attributi e a quali elementi sono associati.</dd> + <dt><a href="https://developer.mozilla.org/it/docs/HTML/HTML5" title="HTML/HTML5">HTML5</a></dt> + <dd>Apprendere le nuove API e gli elementi di HTML5 insieme al loro supporto.</dd> + <dt><a href="https://developer.mozilla.org/it/docs/HTML/Forms" title="HTML/Forms">Guida ai moduli HTML</a></dt> + <dd>I moduli HTML sono una parte complessa di HTML. Questa guida aiuterà a padroneggiarli, dalla struttura allo stile, dal supporto del browser ai controlli personalizzati.</dd> + <dt><a href="https://developer.mozilla.org/it/docs/Web_development/Historical_artifacts_to_avoid" title="HTML/Bad_copy_pasting_habits">Cattive abitudini da "copie e incolla"</a></dt> + <dd>Le tecnologie web sono molto spesso apprese guardando i sorgenti di altre pagine e facendone il copia e incolla. D'altra parte, ciò significa spesso perpetuare cattive abitudini.</dd> + <dt><a href="https://developer.mozilla.org/it/docs/HTML/Canvas/Drawing_Graphics_with_Canvas" title="Drawing_Graphics_with_Canvas">Fare Grafica con i Canvas</a></dt> + <dd>Un nuovo elemento per la grafica programmabile. <code><canvas></code> può essere utilizzato per il disegno, elementi della UI, e altri elementi grafici personalizzati sul client.</dd> + <dt><a href="https://developer.mozilla.org/it/docs/HTML/Tips_for_authoring_fast-loading_HTML_pages" title="HTML/Tips for authoring fast-loading HTML pages">Suggerimenti per la Creazione di Pagine HTML dal Caricamento Rapido</a></dt> + <dd>Una pagina web ottimizzata non significa solo una maggiore reattività del sito per i tuoi visitatori, ma riduce anche il carico sui server web e la connessione internet.</dd> +</dl> + +<p><span class="alllinks"><a href="https://developer.mozilla.org/it/docs/tag/HTML" title="Article tagged: HTML">Vedi Tutto...</a></span></p> +</div> + +<div class="section"> +<h2 class="Community" id="Community" name="Community">Ottenere aiuto dalla comunità</h2> + +<p>Hai bisogno di aiuto su un problema legato ad HTML e non trovi la soluzione nella documentazione?</p> + +<ul> + <li>Consulta il forum di Mozilla dedicato: {{DiscussionList("dev-tech-html", "mozilla.dev.tech.html")}}</li> + <li>Vai su <a href="http://stackoverflow.com/questions/tagged/html" title="http://stackoverflow.com/questions/tagged/css">Stack Overflow</a>, un sito di Q&A collaborativo in cui trovare risposta alle tue domande o porne qualora non ne trovi.</li> +</ul> + +<p><span class="alllinks"><a href="http://www.catb.org/%7Eesr/faqs/smart-questions.html">Non dimenticarti della <em>netiquette</em>...</a></span></p> + +<h2 class="Tools" id="Tools" name="Tools">Strumenti che semplificano lo sviluppo HTML</h2> + +<ul> + <li><a class="external" href="http://validator.w3.org/">Validatore HTML</a></li> + <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">Web Developer Extension</a></li> + <li><a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a></li> + <li><a class="external" href="http://prettydiff.com/?html">Pretty Diff</a></li> +</ul> + +<p><span class="alllinks"><a href="https://developer.mozilla.org/it/docs/tag/HTML:Tools" title="Article tagged: HTML:Tools">Vedi Tutto...</a></span></p> + +<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Argomenti correlati</h2> + +<ul> + <li>I <a href="https://developer.mozilla.org/it/docs/CSS" title="CSS">Cascading Style Sheets (CSS)</a> utilizzati per dare stile ad HTML.</li> + <li>Il <a href="https://developer.mozilla.org/docs/Document_Object_Model_%28DOM%29" title="Document Object Model (DOM)">Document Object Model (DOM)</a> è la rappresentazione di un documento HTML sotto forma di albero.</li> + <li><a href="https://developer.mozilla.org/it/docs/XHTML" title="XHTML">XHTML</a> è la versione <a href="https://developer.mozilla.org/docs/XML" title="XML">XML</a> del linguaggio.</li> +</ul> +</div> +</div> diff --git a/files/it/web/html/riferimento/index.html b/files/it/web/html/riferimento/index.html new file mode 100644 index 0000000000..6dfc71219d --- /dev/null +++ b/files/it/web/html/riferimento/index.html @@ -0,0 +1,46 @@ +--- +title: Riferimento HTML +slug: Web/HTML/Riferimento +tags: + - Elementi + - HTML + - Riferimento + - Web + - tag +translation_of: Web/HTML/Reference +--- +<div>{{HTMLSidebar}}</div> + +<p><span class="seoSummary">HTML è il linguaggio che descrive la struttura e la semantica del contenuto di un documento Web; è composto da <strong>elementi</strong>, ciascuno dei quali può essere modificato da alcuni <strong>attributi</strong>. Il contenuto di una pagina Web viene marcato con etichette di elementi HTML come per esempio</span> {{HTMLElement("img")}}, {{HTMLElement("title")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, etc.</p> + +<p><span class="seoSummary">I contenuti qui presentati costituiscono materiale di riferimento da utilizzare per lo sviluppo Web.</span> MDN offre un riferimento a tutti gli elementi di HTML, così come a tutti gli attributi che governano il comportamento degli elementi.</p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Documentation" name="Documentation">Contenuti</h2> + +<dl> + <dt><a href="/en-US/docs/Web/HTML/Element">HTML element reference</a></dt> + <dd>This page lists all the HTML elements, which are created using tags.</dd> + <dt><a href="/en-US/docs/Web/HTML/Attributes">HTML attribute reference</a></dt> + <dd>Elements in HTML have attributes; these are additional values that configure the elements or adjust their behavior in various ways to meet the criteria the users want.</dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes">Global attributes</a></dt> + <dd>Global attributes are attributes common to all HTML elements; they can be used on all elements, though they may have no effect on some elements.</dd> + <dt><a href="/en-US/docs/Web/HTML/Link_types">Link types</a></dt> + <dd>In HTML, the following link types indicate the relationship between two documents, in which one links to the other using an <a>, <area>, or <link> element.</dd> + <dt><a href="/en-US/docs/Web/Guide/HTML/Content_categories">Content Categories</a></dt> + <dd>Every HTML element is a member of one or more content categories — these categories group elements that share common characteristics.</dd> +</dl> + +<p><span class="alllinks"><a href="/it-IT/docs/tag/HTML" title="Article tagged: HTML">View All...</a></span></p> +</div> + +<div class="section"> +<h2 class="Tools" id="Tools" name="Tools">Guide e Tutorials</h2> + +<dl> + <dt><a href="/it-IT/docs/Web/Guide/HTML">Guida allo sviluppo HTML</a></dt> + <dd>Articoli MDN che mostrano tecniche specifiche per creare contenuti Web in HTML, tutorial e altro materiale utile a portata di mano.</dd> +</dl> +</div> +</div> diff --git a/files/it/web/html/sections_and_outlines_of_an_html5_document/index.html b/files/it/web/html/sections_and_outlines_of_an_html5_document/index.html new file mode 100644 index 0000000000..822543a758 --- /dev/null +++ b/files/it/web/html/sections_and_outlines_of_an_html5_document/index.html @@ -0,0 +1,320 @@ +--- +title: Sezioni e Struttura di un Documento HTML5 +slug: Web/HTML/Sections_and_Outlines_of_an_HTML5_document +translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines +--- +<p>La specifica HTML5 rende disponibili numerosi nuovi elementi agli sviluppatori, permettendo ad essi di descrivere la struttura di un documento web tramite una semantica standard. Questa pagina descrive i nuovi elementi e spiega come usarli per definire la struttura di qualsiasi documento.</p> +<h2 id="Struttura_di_un_Documento_in_HTML_4">Struttura di un Documento in HTML 4</h2> +<p>La struttura di un documento, cioè la struttura semantica di ciò che si trova tra <code><body></code> e <code></body></code>, è fondamentale nella presentazione della pagina all'utente. HTML 4 usa le nozioni di sezione e sotto-sezione di un documento per descrivere la sua struttura. Una sezione è definita da un Elemento HTML di Divisione ( {{HTMLElement("div")}} ) con un Elemento HTML di Intestazione ( {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, o {{HTMLElement("h6")}} ) al suo interno, che ne definisce il titolo. La relazione tra gli Elementi HTML di Divisione e gli Elementi HTML di Intestazione genera la struttura del documento.</p> +<p>Dunque il seguente mark-up:</p> +<div style="overflow: hidden;"> + <pre class="brush:xml"><div class="section" id="elefanti-delle-foreste" > +<h1>Elefanti delle foreste</h1> +<p>In questa sezione, parliamo dei poco noti elefanti delle foreste. +...la sezione continua... +<div class="subsection" id="elefanti-habitat" > +<h2>Habitat</h2> +<p>Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi. +...la sotto-sezione continua... +</div> +</div> +</pre> +</div> +<p>genera la seguente struttura:</p> +<pre>1. Elefanti delle foreste + 1.1 Habitat +</pre> +<p>L'elemento {{HTMLElement("div")}} non è strettamente necessario per definire una nuova sezione. La mera presenza di un Elemento HTML di Intestazione è abbastanza per indicare una nuova sezione. Perciò:</p> +<pre class="brush:xml"><h1>Elefanti delle foreste</h1> +<p>In questa sezione, parliamo dei poco noti elefanti delle foreste. +...la sezione continua... +<h2>Habitat</h2> +<p>Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi. +...la sotto-sezione continua... +<h2>Dieta</h2> +<h1>Gerbilli della Mongolia</h1> +</pre> +<p>genera la seguente struttura:</p> +<pre>1. Elefanti delle foreste + 1.1 Habitat + 1.2 Dieta +2. Gerbilli della Mongolia +</pre> +<h2 id="Problemi_Risolti_da_HTML5">Problemi Risolti da HTML5</h2> +<p>La definizione della struttura di un documento di HTML 4 è molto approssimativa e causa numerosi problemi:</p> +<ol> + <li>L'uso di un {{HTMLElement("div")}} per definire sezioni semantiche, senza la definizione di valori specifici nell'attributo <strong>class</strong>, rende impossibile per un algoritmo automatico definire la struttura ("Questo {{HTMLElement("div")}} è parte della struttura della pagina, definisce una sezione o una sotto-sezione?" o "è solo un {{HTMLElement("div")}} inserito ai fini di presentazione, usato per scopi estetici?"). In altri termini, la specifica HTML4 è poco precisa riguardo a cosa è una sezione e come definire il suo scopo. La generazione automatica di una struttura è importante, in modo particolare per le <a class="external" href="http://it.wikipedia.org/wiki/Tecnologie_assistive" title="http://it.wikipedia.org/wiki/Tecnologie_assistive">tecnologie assistive</a>, che sono in grado di adattare la presentazione delle informazioni alla struttura del documento. HTML5 rimuove l'elemento {{HTMLElement("div")}} dall'algoritmo che genera la struttura, introducendo l'elemento {{HTMLElement("section")}}, cioè un Elemento HTML di Sezione.</li> + <li>Unire più documenti è difficile: inserire un sotto-documento in un documento principale richiede di cambiare il "grado" delle intestazioni in modo che la struttura venga mantenuta. Questo problema viene risolto in HTML5, grazie ai nuovi elementi di sezionamento ( {{HTMLElement("article")}} , {{HTMLElement("section")}} , {{HTMLElement("nav")}} e {{HTMLElement("aside")}} ) che sono sempre sotto-sezioni della sezione che li contiene, indipendentemente dalle sezioni create dagli Elementi HTML di Intestazione.</li> + <li>Poiché ogni Elemento HTML di Intestazione cambia la struttura, non è possibile assegnare un sotto-titolo o un titolo secondario (es., <code><h1>Justine</h1><h2>Les Malheurs de la Vertu</h2></code> genera la struttura <code>1. Justine 1.1 Les Malheurs de la Vertu</code>). HTML5 introduce l'elemento {{HTMLElement("hgroup")}} che "nasconde" tutti gli elementi di intestazione tranne quello di grado più elevato (es., <code><hgroup><h1>Justine</h1><h2>Les Malheurs de la Vertu</h2></hgroup></code> genera la struttura <code>1. Justine</code>).</li> + <li>Nel HTML4, ogni sezione è parte della struttura del documento. Ma spesso i documenti non sono così lineari. Un documento può avere sezioni speciali contenenti informazioni che non fanno parte del flusso principale, anche se correlati ad esso, come una pubblicità o un approfondimento. HTML5 introduce l'elemento {{HTMLElement("aside")}} permettendo a questo tipo di sezioni di rimanere estranee al flusso principale.</li> + <li>Ancora, nel HTML4, dato che ogni sezione è parte della struttura del documento, non c'è modo di avere sezioni relative non al documento ma a tutto il sito, come il logo, i menu, una tabella dei contenuti, o le informazioni legali e sul copyright. A tal fine, HTML5 introduce tre elementi per altrettante sezioni specifiche: {{HTMLElement("nav")}} per i gruppi di links, come le tabelle dei contenuti, {{HTMLElement("footer")}} e {{HTMLElement("header")}} per le informazioni correlate al sito.</li> +</ol> +<p>Più in generale HTML5 aggiunge precisione alle funzionalità di sezionamento ed intestazione, permettendo una struttura del documento prevedibile e utilizzata dai browser per migliorare l'esperienza utente.</p> +<h2 id="L'Algoritmo_della_Struttura_di_HTML5">L'Algoritmo della Struttura di HTML5</h2> +<h3 id="Definire_Sezioni_nel_HTML5">Definire Sezioni nel HTML5</h3> +<p>Tutto il contenuto dell'elemento {{HTMLElement("body")}} appartiene ad una sezione. Le sezioni HTML5 possono essere nidificate. Accanto alla sezione principale, definita dall'elemento {{HTMLElement("body")}}, i confini delle sezioni vengono definiti esplicitamente o implicitamente. Le sezioni esplicite sono contenute negli elementi {{HTMLElement("body")}}, {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, e {{HTMLElement("nav")}}.</p> +<div class="note"> + <strong>Nota: </strong>Ogni sezione può avere la propria gerarchia di intestazioni. Quindi anche un elemento nidificato può avere un'intestazione {{HTMLElement("h1")}}. Vedi <a href="/it/docs/Sections_and_Outlines_of_an_HTML5_document#Definire_le_Intestazioni_in_HTML5" title="/it/docs/Sections_and_Outlines_of_an_HTML5_document#Definire_le_Intestazioni_in_HTML5">Definire le Intestazioni in HTML5</a>.</div> +<p>Esempio:</p> +<pre class="brush:xml"><section> + <h1>Elefanti delle foreste</h1> + <section> + <h1>Introduzione</h1> + <p>In questa sezione, parliamo dei poco noti elefanti delle foreste. + </section> + <section> + <h1>Habitat</h1> + <p>Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi. + </section> + <aside> + <p>pubblicità + </aside> +</section> +<footer> + <p>(c) 2010 Esempi S.P.A. +</footer></pre> +<p>Questo frammento di HTML definisce due sezioni di primo livello:</p> +<pre><span style="color: red;"><section> + <h1>Elefanti delle foreste</h1> + <section> + <h1>Introduzione</h1> + <p>In questa sezione, parliamo dei poco noti elefanti delle foreste. + </section> + <section> + <h1>Habitat</h1> + <p>Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi. + </section> + <aside> + <p>pubblicità + </aside> +</section></span> + +<span style="color: green;"><footer> + <p>(c) 2010 Esempi S.P.A. +</footer></span></pre> +<p>La prima sezione ha tre sotto-sezioni:</p> +<pre><section> + <h1>Elefanti delle foreste</h1> + + <span style="color: red;"><section> + <h1>Introduzione</h1> + <p>In questa sezione, parliamo dei poco noti elefanti delle foreste. + </section></span> + + <span style="color: green;"><section> + <h1>Habitat</h1> + <p>Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi. + </section></span> + + <span style="color: blue;"><aside> + <p>pubblicità + </aside></span> +</section> + +<footer> + <p>(c) 2010 Esempi S.P.A. +</footer></pre> +<p>Il che genera la seguente struttura:</p> +<pre>1. Elefanti delle foreste + 1.1 Introduzione + 1.2 Habitat + 1.3 Sezione (aside) +</pre> +<h3 id="Definire_le_Intestazioni_in_HTML5">Definire le Intestazioni in HTML5</h3> +<p>L'Elemento HTML di Sezione definisce la struttura del documento, ma c'è bisogno anche delle intestazioni. La regola di base è semplice: il primo Elemento HTML di Intestazione (uno tra {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} ) definisce l'intestazione della sezione corrente.</p> +<p>Gli elementi di intestazione hanno un <em>grado</em> dato dal numero nell'elemento, dove {{HTMLElement("h1")}} è il grado <em>più alto</em>, e {{HTMLElement("h6")}} quello <em>più basso</em>. Il grado relativo ha importanza solo all'interno di una sezione; è la struttura delle sezioni a determinare lo schema definitivo, non il grado di ciascuna intestazione. Per esempio, questo codice:</p> +<pre class="brush:xml"><section> + <h1>Elefanti delle foreste</h1> + <p>In questa sezione, parliamo dei poco noti elefanti delle foreste. + ...la sezione continua... + <section> + <h2>Habitat</h2> + <p>Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi. + ...la sotto-sezione continua... + </section> +</section> +<section> + <h3>Gerbilli della Mongolia</h3> + <p>In questa sezione, parliamo dei famosi gerbilli della Mongolia. + ...la sezione continua... +</section></pre> +<p>genera la seguente struttura:</p> +<pre>1. Elefanti delle foreste + 1.1 Habitat +2. Gerbilli della Mongolia</pre> +<p>Notare come il grado delle intestazioni (nell'esempio {{HTMLElement("h1")}} per la prima sezione di primo livello, {{HTMLElement("h2")}} per la sotto-sezione e {{HTMLElement("h3")}} per la seconda sezione di primo livello) non conta. (Qualsiasi grado può essere utilizzato come intestazione di una sezione esplicitamente definita, anche se questa pratica non è consigliata.)</p> +<h3 id="Sezionamento_implicito">Sezionamento implicito</h3> +<p>Poiché gli elementi HTML5 di sezionamento non sono obbligatori per definire una struttura, c'è un modo per definire sezioni senza di essi, per mantenere la compatibilità con la rete esistente dominata da HTML4. Questa tecnica è chiamata <em>sezionamento implicito</em>.</p> +<p>Gli Elementi HTML di Intestazione da ( {{HTMLElement("h1")}} a {{HTMLElement("h6")}} ) definiscono una nuova sezione implicita quando non sono la prima voce del loro contenitore, che è sempre una sezione esplicita. Il modo in cui questa sezione implicita viene posizionata nella struttura è definito dal suo grado relativo all'intestazione precedente nella sezione che le contiene. Se il grado è inferiore rispetto all'intestazione precedente, viene aperta una sotto-sezione implicita. Questo codice:</p> +<pre class="brush:xml"><section> + <h1>Elefanti delle foreste</h1> + <p>In questa sezione, parliamo dei poco noti elefanti delle foreste. + ...la sezione continua... + <h3 class="implicit subsection">Habitat</h3> + <p>Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi. + ...la sotto-sezione continua... +</section></pre> +<p>genera la seguente struttura:</p> +<pre>1. Elefanti delle foreste + 1.1 Habitat <em>(implicitly defined by the h3 element)</em> +</pre> +<p>Se l'intestazione ha lo stesso grado di quella precedente, la sezione corrente viene chiusa (<strong>anche se esplicita</strong>!) e se ne apre una nuova, implicita, dello stesso livello:</p> +<pre class="brush:xml"><section> + <h1>Elefanti delle foreste</h1> + <p>In questa sezione, parliamo dei poco noti elefanti delle foreste. + ...la sezione continua... + <h1 class="implicit section">Gerbilli della Mongolia</h1> + <p>Gerbilli della Mongolia are cute little mammals. + ...la sezione continua... +</section></pre> +<p>genera la seguente struttura: </p> +<pre>1. Elefanti delle foreste +2. Gerbilli della Mongolia <em>(implicitamente definita dall'elemento h1, che allo stesso tempo ha chiuso la sezione precedente)</em> +</pre> +<p>Se ha grado superiore all'intestazione precedente, chiude la sezione corrente e ne apre una nuova, implicita, di livello superiore:</p> +<pre class="brush:xml"><body> + <h1>Mammiferi</h1> + <h2>Balene</h2> + <p>In questa sezione, parliamo delle balene nuotatrici. + ...la sezione continua... + <section> + <h3>Elefanti delle foreste</h3> + <p>In questa sezione, parliamo dei poco noti elefanti delle foreste. + ...la sezione continua... + <h3>Gerbilli della Mongolia</h3> + <p>Hordes of gerbils have spread their range far beyond Mongolia. + ...la sotto-sezione continua... + <h2>Rettili</h2> + <p>I rettili sono animali dal sangue freddo. + ...la sotto-sezione continua... + </section> +</body></pre> +<p>genera la seguente struttura:</p> +<pre>1. Mammiferi + 1.1 Balene <em>(definita implicitamente dall'elemento h2)</em> + 1.2 Elefanti delle foreste <em>(definita esplicitamente dall'elemento section)</em> + 1.3 Gerbilli della Mongolia <em>(definita implicitamente dall'elemento h3, che allo stesso tempo chiude la sezione precedente)</em> + 1.4 Rettili <em>(definita implicitamente dall'elemento h2, che allo stesso tempo chiude la sezione precedente)</em> +</pre> +<p>Questa non è la struttura che ci si potrebbe aspettare dopo un rapido sguardo alle intestazioni. Per rendere il vostro markup comprensibile all'uomo, è una buona pratica usare sezioni esplicite, e far combaciare il grado dell'intestazione con il livello di nidificazione previsto. Tuttavia, ciò non è richiesto dalla specifica HTML5. Se si riscontra che i browser rendono la struttura del vostro documento in modi inaspettati, verificare se alcune sezioni vengono chiuse implicitamente dagli elementi di intestazione.</p> +<p>Un'eccezione alla regola empirica che il grado dell'intestazione deve corrispondere al livello di nidificazione della sezione avviene per le sezioni che vengono riutilizzate in più documenti. Per esempio, una sezione potrebbe essere memorizzata in un sistema di gestione dei contenuti ed inserita nel documento in fase di runtime. In questo caso, una buona pratica è partire sempre da un elemento {{HTMLElement("h1")}} per la prima intestazione della sezione. Il livello di nidificazione della sezione riutilizzabile sarà determinato dalla struttura del documento in cui appare. I tag di sezione esplicita sono comunque utili in questi casi.</p> +<h3 id="Sovrascrivere_il_Sezionamento_Implicito">Sovrascrivere il Sezionamento Implicito</h3> +<p>A volte, una sezione ha bisogno di avere più intestazioni. Alcuni casi comuni sono:</p> +<ul> + <li>una sezione su un libro o un film, che ha un titolo secondario: + <pre class="brush:xml"><section> + <h1>Justine</h1> + <h2>Les Malheurs de la vertu</h2> +</section></pre> + <p>genera la seguente struttura:</p> + <pre>1. Justine + 1.1 Les Malheurs de la vertu +</pre> + </li> + <li>un elenco di tag: + <pre class="brush:xml"><section> + <h1>Strutture e Schemi di un documento</h1> + <h2>HTML, HTML5, Sezioni, Schemi</h2> +</section></pre> + <p>genera la seguente struttura:</p> + <pre>1. Strutture e schemi di un documento + 1.1 HTML, HTML5, Sezioni, Schemi</pre> + </li> +</ul> +<p>A causa del sezionamento implicito, questo non è possibile senza l'aiuto dell'Elemento HTML di Raggruppamento delle Intestazioni ( {{HTMLElement("hgroup")}} ) introdotto da HTML5. Esso "nasconde" tutte le intestazioni dalla struttura, eccetto la prima, consentendo di evitare il sezionamento implicito. Grazie a questo elemento l'esempio del libro secondario:</p> +<pre class="brush:xml"><section> + <hgroup> + <h1>Justine</h1> + <h2>Les Malheurs de la vertu</h2> + </hgroup> + ... Contenuti ... +</section> +</pre> +<p>genera la seguente struttura:</p> +<pre>1. Justine</pre> +<h3 id="Sezioni_root"><a name="sezioni_root">Sezioni "root"</a></h3> +<p>Una sezione "root" (radice) è un elemento HTML che può avere una propria struttura, ma le sezioni ed intestazioni interne ad esso non interferiscono con la struttura del suo contenitore. Oltre al {{HTMLElement("body")}} che è la sezione "root" logica di un documento, le sezioni root sono spesso elementi che aggiungono contenuto esterno alla pagina: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} e {{HTMLElement("td")}}.</p> +<p>Esempio:</p> +<pre class="brush:xml"><section> + <h1>Elefanti delle foreste</h1> + <section> + <h2>Introduzione</h2> + <p>In questa sezione, parliamo dei poco noti elefanti delle foreste. + </section> + <section> + <h2>Habitat</h2> + <p>Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi. + Vediamo cosa dicono gli scienziati in "<cite>Gli elefanti delle foreste nel Borneo</cite>": + <blockquote> + <h1>Borneo + <p>L'elemento foresta vive nel Borneo... + </blockquote> + </section> +</section> +</pre> +<p>Questo esempio genera la seguente struttura:</p> +<pre>1. Elefanti delle foreste + 1.1 Introduzione + 1.2 Habitat</pre> +<p>La struttura principale non contiene la struttura interna dell'elemento {{HTMLElement("blockquote")}}, che, trattandosi di una citazione esterna, è un elemento di sezione "root", perciò la sua struttura interna viene isolata.</p> +<h3 id="Sezioni_oltre_la_struttura">Sezioni oltre la struttura</h3> +<p>HTML5 introduce quattro nuovi elementi che permettono di definire sezioni che non fanno parte della struttura principale del documento:</p> +<ol> + <li>L'Elemento HTML di Sezione Aside ( {{HTMLElement("aside")}} ) definisce una sezione che, anche se correlata all'elemento principale, non appartiene al flusso principale, come un box di approfondimento o una pubblicità. Ha la sua propria struttura, ma non appartiene a quella principale.</li> + <li>L'Elemento HTML di Sezione Navigazione ( {{HTMLElement("nav")}} ) definisce una sezione che contiene i link di navigazione. In un documento possono essere presenti molti elementi di navigazione, ad esempio: uno con i link interni alla pagina, come le tabelle dei contenuti, e un altro con i link di navigazione del sito. Questi links non fanno parte del flusso o della struttura principale e generalmente il loro rendering viene eseguito per ultimo dagli screen readers e da tecnologie assistive simili.</li> + <li>L'Elemento HTML di Sezione Header ( {{HTMLElement("header")}} ) definisce la testata di una pagina, che generalmente contiene il logo e il nome del sito, occasionalmente una barra di navigazione. A dispetto del nome, non viene necessariamente posizionato all'inizio del documento.</li> + <li>L'Elemento HTML di Sezione Footer ( {{HTMLElement("footer")}} ) definisce il piè di pagina, che generalmente contiene il copyright, le informazioni legali ed a volte altri links. A dispetto del nome, non viene necessariamente posizionato alla fine del documento.</li> +</ol> +<h2 id="Indirizzi_e_data_di_pubblicazione_negli_elementi_di_sezionamento">Indirizzi e data di pubblicazione negli elementi di sezionamento</h2> +<p>L'autore di un documento spesso vuole pubblicare alcune informazioni personali, come nome e indirizzo dell'autore. HTML4 lo permetteva tramite l'elemento {{HTMLElement("address")}}, che è stato esteso in HTML5.</p> +<p>Un documento può essere fatto di diverse sezioni scritte da diversi autori. Una sezione curata da un autore diverso rispetto alla sezione principale può essere definita da un elemento {{HTMLElement("article")}}. Di conseguenza, l'elemento {{HTMLElement("address")}} è ora riferito al più vicino tra gli elementi {{HTMLElement("body")}} e {{HTMLElement("article")}} che lo contengono.</p> +<p>In modo simile, il nuovo elemento {{HTMLElement("time")}}, con il suo set di attributi {{htmlattrxref("pubdate", "time")}}, rappresenta la data di pubblicazione di tutto il documento, rispettivamente all'articolo, legato al più vicino contenitore {{HTMLElement("body")}} o {{HTMLElement("article")}}.</p> +<h2 id="Usare_Elementi_HTML5_nei_Browser_Non-HTML5">Usare Elementi HTML5 nei Browser Non-HTML5</h2> +<p>Sezioni ed intestazioni dovrebbero funzionare nella maggior parte dei browser non-HTML5-compatibili. Anche se non supportati, non necessitano di una interfaccia DOM specifica ma solo di uno stile CSS dedicato, perché agli elementi sconosciuti viene assegnato <code>display:inline</code> di default:</p> +<pre class="brush: css">section, article, aside, footer, header, nav, hgroup { + display:block; +} +</pre> +<p>Naturalmente lo sviluppatore può assegnargli uno stile differente, ma tenendo a mente che nei browser non compatibili con HTML5 il rendering di default è diverso da quel che ci si potrebbe aspettare. Notare che l'elemento {{HTMLElement("time")}} non è stato incluso di proposito, perché in questo caso il rendering di default dei browser non-HTML5-compatibili corrisponde a quello previsto.</p> +<p>Questo metodo però ha delle limitazioni, perché alcuni browser non permettono di applicare stili CSS agli elementi non supportati. È il caso di Internet Explorer (versione 8 e precedenti), che necessita di uno script per abilitare il rendering di tali elementi:</p> +<pre class="brush:xml"><!--[if lt IE 9]> + <script> + document.createElement("header"); + document.createElement("footer"); + document.createElement("section"); + document.createElement("aside"); + + document.createElement("nav"); + document.createElement("article"); + document.createElement("hgroup"); + document.createElement("time"); + </script> +<![endif]--></pre> +<p>Questo significa che, in caso di Internet Explorer (8 e precedenti), javascript deve essere abilitato affinché gli elementi HTML vengano visualizzati correttamente. Altrimenti essi non verranno visualizzati (o verranno visualizzati senza stili applicati NdT), il che potrebbe rivelarsi problematico, dato che si tratta di elementi che definiscono la struttura dell'intera pagina. Ecco perché un elemento {{HTMLElement("noscript")}} dovrebbe essere aggiunto per questi casi specifici, come nell'esempio di seguito:</p> +<pre class="brush:xml"><noscript> + <strong>Attenzione !</strong> + Dato che il tuo browser non supporta HTML5, alcuni elementi vengono simulati usando JScript. + Sfortunatamente il tuo browser ha disattivato lo scripting. Per favore abilita JScript per visualizzare la pagina. +</noscript></pre> +<p>Ciò ci porta al seguente codice per permettere il supporto delle sezioni e delle intestazioni HTML5 nei browser non-HTML5, anche nel caso di Internet Explorer (8 e precedenti), con un fallback adeguato nel caso in il browser non permetta l'esecuzione di javascript:</p> +<pre class="brush:xml"><!--[if lt IE 9]> + <script> + document.createElement("header"); + document.createElement("footer"); + document.createElement("section"); + document.createElement("aside"); + document.createElement("nav"); + document.createElement("article"); + document.createElement("hgroup"); + document.createElement("time"); + </script> + <noscript> + <strong>Attenzione !</strong> + Dato che il tuo browser non supporta HTML5, alcuni elementi vengono simulati usando JScript. + Sfortunatamente il tuo browser ha disattivato lo scripting. Per favore abilita JScript per visualizzare la pagina. +</noscript> +<![endif]--></pre> +<h2 id="Conclusioni">Conclusioni</h2> +<p>Le nuove sezioni e intestazioni introdotte in HTML5 danno agli sviluppatori la capacità di descrivere la struttura di un documento web in maniera standard. Portano un grande vantaggio per le persone che hanno browser supportanti HTML5 e che hanno bisogno della struttura per comprendere la pagina, per esempio le le persone che necessitano l'aiuto di una tecnologia assistiva. I nuovi elementi semantici sono semplici da usare e, con pochi aggiustamenti, funzionano anche nei browser non-HTML5. Pertanto possono essere utilizzati senza restrizioni.</p> +<div> + {{HTML5ArticleTOC()}}</div> diff --git a/files/it/web/html/utilizzare_application_cache/index.html b/files/it/web/html/utilizzare_application_cache/index.html new file mode 100644 index 0000000000..2c35bbaeae --- /dev/null +++ b/files/it/web/html/utilizzare_application_cache/index.html @@ -0,0 +1,383 @@ +--- +title: Utilizzare l'application cache +slug: Web/HTML/utilizzare_application_cache +translation_of: Web/HTML/Using_the_application_cache +--- +<h2 id="Introduzione">Introduzione</h2> + +<p><a href="/en-US/docs/HTML/HTML5" title="HTML/HTML5">HTML5</a> possiede un meccanismo di <em>application caching</em> che permette alle applicazioni web-based di funzionare anche offline. Gli sviluppatori possono utilizzare l'interfaccia <strong>Application Cache</strong> (<em>AppCache</em>) per specificare le risorse che il browser deve memorizzare nella cache e rendere disponibili per gli utenti offline. Le applicazioni in cache si caricano e funzionano correttamente anche se gli utenti cliccano sul tasto refresh del browser quando sono offline.</p> + +<p>L'uso dell'application cache fornisce all'applicazione i seguenti benefici:</p> + +<ul> + <li>Navigazione offline: gli utenti possono navigare un sito anche se sono offline.</li> + <li>Velocità: le risorse sono memorizzate in locale, quindi si caricano più velocemente.</li> + <li>Riduzione del carico server: il browser scarica dal server solo le risorse che sono state modificate.</li> +</ul> + +<h2 id="Come_funziona_l'application_cache">Come funziona l'application cache</h2> + +<h3 id="Abilitare_l'application_cache">Abilitare l'application cache</h3> + +<p>Per abilitare l'application cache per un'applicazione, è necessario includere l'attributo {{htmlattrxref("manifest", "html")}} nell'elemento {{HTMLElement("html")}} delle pagine della tua applicazione, come mostrato nel seguente esempio:</p> + +<div style="overflow: hidden;"> +<pre class="brush: html"><html manifest="example.appcache"> + ... +</html> +</pre> +</div> + +<p>L'attributo <code>manifest<strong> </strong></code>fa riferimento ad un <strong>cache manifest</strong>, un file di testo che elenca tutte le risorse (files) che il browser deve memorizzare per la tua applicazione.</p> + +<p>Bisogna includere l'attributo <code>manifest</code> in tutte le pagine dell'applicazione che vuoi memorizzare nella cache, il browser non memorizza le pagine che non contengono l'attributo <code>manifest</code>, a meno che tali pagine siano esplicitamente elencate nel file manifest stesso. Non c'è bisogno di elencare nel cache manifest tutte le pagine che si vogliono memorizzare nella cache, il browser implicitamente aggiunge ogni pagina che l'utente visita e che ha l'attributo <code>manifest</code> settato sull'application cache.</p> + +<p>Alcuni browser (es. Firefox) mostrano una barra di notifica la prima volta che un utente carica un'applicazione che usa l'application cache. La barra di notifica mostra un messaggio tipo:</p> + +<p style="margin-left: 40px;">Questo sito web (<code>www.example.com</code>) richiede di salvare dati sul computer per l'utilizzo non in linea. [Permetti] [Mai per questo sito] [Non adesso]</p> + +<p>Il termine "offline(-enabled) applications" qualche volta fa riferimento alle applicazioni che l'utente ha esplicitamente abilitato ad utilizzare le capacità offline.</p> + +<h3 id="Caricare_documenti">Caricare documenti</h3> + +<p>L'uso dell'application cache modifica il normale processo di caricamento del documento:</p> + +<ul> + <li>Se esiste un'application cache, il browser carica il documento e le sue risorse associate direttamente dalla cache, senza accedere alla rete. Ciò velocizza il tempo di caricamento del documento.</li> + <li>Il browser quindi controlla se il cache manifest è stato aggiornato sul server.</li> + <li>Se il cache manifest è stato aggiornato, il browser scarica la nuova versione e le risorse elencate. Quest'operazione viene eseguita in background e non influenza la performance significativamente.</li> +</ul> + +<p>Il processo di caricamento del documento ed aggiornamento dell'application cache è specificato in maggior dettaglio qui sotto:</p> + +<ol> + <li>Quando il browser visita un documento che include l'attributo <code>manifest</code>, se non esiste un application cache, il browser carica il documento e poi va a prendere tutte le risorse elencate nel file manifest, creando la prima versione dell'application cache.</li> + <li>Nelle visite successive, il browser preleverà il documento e tutte le risorse specificate nel file manifest direttamente dall'applcation cache (non dal server). In più, il browser invia un evento <code>checking</code> all'oggetto <code><a href="/en-US/docs/DOM/window.applicationCache" title="DOM/window.applicationCache">window.applicationCache</a></code> e processa il file manifest, seguendo le appropriate regole di chaching HTTP.</li> + <li>Se la copia attualmente memorizzata del manifest è aggiornata, il browser invia un evento<code> noupdate</code> all'oggetto <code>applicationCache</code>, ed il processo di aggiornamento è completo. Da notare che se viene modificata una qualsiasi delle risorse sul server, bisogna modificare anche il file manifest, in maniera tale che il browser sappia che ha bisogno di processare tutte le risorse nuovamente.</li> + <li>Se il file manifest è stato modificato, tutti i file elencati in esso - così come quelli aggiunti alla cache utilizzando <code><a href="/en-US/docs/nsIDOMOfflineResourceList#add.28.29" title="nsIDOMOfflineResourceList#add.28.29">applicationCache.add() </a></code>- sono aggiunti ad una cache temporanea, seguendo le appropriate regole di caching HTTP. Per ogni file memorizzato in questa cache temporanea, il browser invia un evento <code>progress</code> all'oggetto <code>applicationCache</code>. In caso di errore, il browser invia un evento <code>error</code> e blocca l'aggiornamento dell'application cache.</li> + <li>Una volta che tutti i files sono stati recuperati con successo, vengono automaticamente spostati nella vera cache offline, e viene inviato un evento <code>cached</code> all'oggetto<code> applicationCache</code>. Dato che il documento è stato già caricato nel browser prelevandolo dalla cache, il documento aggiornato non sarà renderizzato finchè non viene ricaricato (manualmente o attraverso la programmazione).</li> +</ol> + +<h2 id="Percorso_di_memorizzazione_e_cancellazione_della_cache_offline">Percorso di memorizzazione e cancellazione della cache offline</h2> + +<p>Su Chrome è possibile cancellare la cache offline sia selezionando "Clear browsing data..." dalle preferenze, oppure visitando <a title="chrome://appcache-internals/">chrome://appcache-internals/</a>. Safari ha una voce "Svuota cache" simile nelle sue preferenze, ma potrebbe essere necessario riavviare il browser.</p> + +<p>Su Firefox, i dati della cache offline vengono memorizzati separatamente dal profilo Firefox — insieme ai dati degli altri programmi installati:</p> + +<ul> + <li>Windows Vista/7: <code>C:\Users\<username>\AppData\<strong>Local</strong>\Mozilla\Firefox\Profiles\<salt>.<profile name>\OfflineCache</code></li> + <li>Mac/Linux: <code>/Users/<username>/Library/Caches/Firefox/Profiles/<salt>.<profile name>/OfflineCache</code></li> +</ul> + +<p>Su Firefox è possibile ispezionare lo stato della cache offline sulla pagina <code>about:cache</code> (box "Offline cache device"). La cache offline può essere cancellata separatamente per ogni sito utilizzando il tasto "Rimuovi..." presente in:<br> + Firefox -> Opzioni -> Avanzate -> Rete -> Dati non in linea e informazioni utente.</p> + +<p>Nelle versioni precedenti a Firefox 11, l'application cache non poteva essere cancellata utilizzando<br> + Tools -> Clear Recent History<br> + oppure<br> + Tools -> Options -> Advanced -> Network -> Offline data -> Clear Now Questo bug è stato fixato nelle versioni successive.</p> + +<p>Vedi anche <a href="/en-US/docs/DOM/Storage#Storage_location_and_clearing_the_data" title="DOM/Storage#Storage location and clearing the data">clearing the DOM Storage data</a>.</p> + +<p>Le application cache possono anche diventare obsolete. Se il un file manifest dell'applicazione viene rimosso dal server, il browser rimuove tutte le application cache che utilizzano quel manifest ed invia un evento "obsoleted" all'oggetto <code>applicationCache</code>. Questo imposta lo stato dell'application cache su<code> OBSOLETE</code>.</p> + +<h2 id="Il_file_cache_manifest">Il file cache manifest</h2> + +<h3 id="Includere_un_file_cache_manifest">Includere un file cache manifest</h3> + +<p>L'attributo <code>manifest</code> in un'applicazione web può specificare sia il percorso relativo di un file cache manifest che un URL assoluto (gli URL assoluti devono provenire dalla stessa origine dell'applicazione). Un file cache manifest può avere diverse estensioni, ma come MIME type deve avere <code>text/cache-manifest</code>.</p> + +<div class="note"><strong>Nota: </strong>Sui server Apache, il MIME type per i file manifest (.appcache) può essere impostato aggiungendo <code>AddType text/cache-manifest .appcache</code> ad un file .htaccess posizionato nella cartella root, oppure nella stessa cartella dell'applicazione.</div> + +<h3 id="Le_voci_in_un_file_cache_manifest">Le voci in un file cache manifest</h3> + +<p>Il cache manifest è un semplice file di testo che elenca le risorse che il browser deve memorizzare per l'accesso offline. Le risorse sono identificate da un URI. Le voci elencate nel cache manifest devono avere lo stesso schema, host e porta come nel manifest.</p> + +<h3 id="Esempio_1_un_semplice_cache_manifest">Esempio 1: un semplice cache manifest</h3> + +<p>Il seguente è un semplice file di cache manifest, <code>example.appcache</code>, per un ipotetico sito web all'indirizzo <span class="nowiki">www.example.com</span>.</p> + +<pre>CACHE MANIFEST +# v1 - 2011-08-13 +# This is a comment. +<span class="nowiki">http://www.example.com/index.html</span> +<span class="nowiki">http://www.example.com/header.png</span> +<span class="nowiki">http://www.example.com/blah/blah</span> +</pre> + +<p>Un file cache manifest può includere 3 sezioni (<code>CACHE</code>, <code>NETWORK</code>, e <code>FALLBACK</code>, verranno discusse in seguito). Nell'esempio qui sopra, non c'è una sezione header, quindi si assume che tutte le risorse siano elencate nell'esplicita sezione (<code>CACHE</code>), intendendo che il browser deve memorizzare nell'application cache tutte le risorse elencate. Le risorse possono essere specificate utilizzando sia URL assoluti che relativi (es. <code>index.html</code>).</p> + +<p>Il commento "v1" si trova lì per una buona ragione. I browser aggiornano l'application cache solo se il file manifest viene modificato. Se una risorsa presente nella cache viene modificata (per esempio, viene aggiornata l'immagine <code>header.png</code> con un nuovo contenuto), bisogna anche cambiare il contenuto del file manifest per permettere ai browser di sapere che c'è bisogno di refreshare la cache. Si può effettuare qualsiasi modifica al file manifest, ma la best practice è modificare il numero di versione.</p> + +<div class="warning"><strong>Importante:</strong> Non includere mai il cache manifest tra le voci del file stesso, altrimenti verrà sempre prelevato dalla cache locale e sarà quasi impossibile informare il browser che un nuovo manifest è disponibile sul server.</div> + +<h3 id="Le_sezioni_di_un_file_cache_manifest_CACHE_NETWORK_e_FALLBACK">Le sezioni di un file cache manifest: <code>CACHE</code>, <code>NETWORK</code>, <code>e FALLBACK</code></h3> + +<p>Un manifest può avere 3 sezioni distine: <code>CACHE</code>, <code>NETWORK</code>, <code>e FALLBACK</code>.</p> + +<dl> + <dt><code>CACHE:</code></dt> + <dd>Questa è la sezione di default per le voci in un cache manifest. I files elencati sotto l'header della sezione <code>CACHE:</code> (oppure subito dopo la riga <code>CACHE MANIFEST</code>) sono esplicitamente memorizzati nella cache dopo che vengono scaricati per la prima volta.</dd> + <dt><code>NETWORK:</code></dt> + <dd>I files elencati sotto l'header della sezione <code>NETWORK:</code> sono risorse inserite in una white-list che richiedono una connessione al server. Tutte le richieste a queste risorse bypassano la cache, anche se l'utente è offline. È possibile utilizzare wildcards.</dd> + <dt><code>FALLBACK:</code></dt> + <dd>Nella sezione <code>FALLBACK:</code> vengono specificate le pagine alternative che il browser deve utilizzare nel caso una risorsa non sia accessibile. Ogni voce in questa sezione è composta da 2 URI - il primo è la risorsa, il secondo il fallback. Entrambi gli URI devono essere relativi e provenienti dalla stessa origine del file manifest. È possibile utilizzare wildcards.</dd> +</dl> + +<p>Le sezioni <code>CACHE</code>, <code>NETWORK</code>, e <code>FALLBACK </code>possono essere elencate in qualsiasi ordine, ogni sezione può apparire più volte nello stesso cache manifest.</p> + +<h3 id="Example_2_un_cache_manifest_più_completo">Example 2: un cache manifest più completo</h3> + +<p>Il seguente è un esempio più completo di un cache manifest per un ipotetico sito web all'indirizzo <span class="nowiki">www.example.com</span>.</p> + +<pre>CACHE MANIFEST +# v1 2011-08-14 +# This is another comment +index.html +cache.html +style.css +image1.png + +# Use from network if available +NETWORK: +network.html + +# Fallback content +FALLBACK: +/ fallback.html +</pre> + +<p>Questo esempio utilizza le sezioni <code>NETWORK</code> e <code>FALLBACK</code> per specificare che la pagina <code>network.html</code> deve essere sempre prelevata dalla rete e che la pagina <code>fallback.html</code> deve essere servita nel caso una risorsa non sia disponibile (es. nel caso sia impossibile stabilire una connessione col server).</p> + +<h3 id="Struttura_di_un_file_cache_manifest">Struttura di un file cache manifest</h3> + +<p>Un cache manifest deve essere servito con il MIME type <code>text/cache-manifest</code>. Tutte le risorse servite utilizzando questo MIME type devono seguire la sintassi per l'application cache manifest, come definito in questa sezione.</p> + +<p>I cache manifest sono file di testo in formato UTF-8 e possono opzionalmente contenere un carattere BOM. Gli a capo possono essere rappresentati dal line feed (<code>U+000A</code>), dal carriage return (<code>U+000D</code>), o da entrambi i caratteri.</p> + +<p>La prima riga del cache manifest deve obbligatoriamente essere la stringa <code>CACHE MANIFEST</code> (con un singolo spazio <code>U+0020</code> tra le due parole), seguita da zero o pià caratteri di tabulazione. Qualsiasi altro testo su questa riga verrà ignorato.</p> + +<p>Il resto del manifesto cache deve essere composto da zero o più delle seguenti righe:</p> + +<dl> + <dt>Righe vuote</dt> + <dd>È possibile utilizzare righe vuote composte da zero o più spazi e/o caratteri di tabulazione (tab).</dd> + <dt>Commenti</dt> + <dd>I commenti consistono in zero o più tab e/o spazi seguiti da un singolo carattere #, seguito da zero o più caratteri che compongono il testo del commento. Ogni riga di commento deve essere composta in questa maniera, non esiste una coppia di delimitatori inizio/fine per wrappare intere porzioni di codice.</dd> + <dt>Header della sezione</dt> + <dd>Gli header di sezione specificano quale sezione del cache manifest stiamo per manipolare. Ci sono 3 possibili tipi di header:</dd> +</dl> + +<blockquote> +<table class="standard-table"> + <tbody> + <tr> + <th>Header di sezione</th> + <th>Descrizione</th> + </tr> + <tr> + <td><code>CACHE:</code></td> + <td>Sezione che definisce quali risorse memorizzare nella cache (questa è la sezione di default, se l'header non è specificato).</td> + </tr> + <tr> + <td><code>NETWORK:</code></td> + <td>Sezione che definisce quali risorse devono essere sempre scaricate dalla rete.</td> + </tr> + <tr> + <td><code>FALLBACK:</code></td> + <td>Sezione che definisce dei fallback nel caso una risorsa risulti non disponibile.</td> + </tr> + </tbody> +</table> +</blockquote> + +<dl> + <dd>L'header di sezione può includere spazi, ma deve includere i due punti (:) nel nome della sezione.</dd> + <dt>dati della sezione</dt> + <dd>Il formato per le righe di dati varia da sezione a sezione. In quella esplicita (<code>CACHE:</code>), ogni riga è un riferimento URI o IRI valido ad una risorsa da memorizzare nella cache (non è possibile utilizzare caretteri jolly in queste sezioni). Si possono inserire spazi vuoti prima o dopo l'URI o l'IRI. Nella sezione di fallback ogni riga è un riferimento URI o IRI valido ad una risorsa, seguito dalla risorsa di fallback che deve essere servita qualndo non si può stabilire una connessione col server. nella sezione network, ogni riga è un riferimento URI o IRI valido ad una risorsa da prelevare dalla rete. (In questa sezione è consentito utilizzare il carattere jolly *). + <div class="note"><strong>Note: </strong>Gli URI relativi sono relativi all'URI del cache manifest, non all'URI del documento che fa riferimento al cache manifest.</div> + </dd> +</dl> + +<p>I file cache manifest possono passare da una sezione all'altra a piacimento (ogni header di sezione può essere utilizzato più di una volta), le sezioni possono anche essere vuote.</p> + +<h2 id="Risorse_nell'application_cache">Risorse nell'application cache</h2> + +<p>Un application cache include sempre almeno una risorsa, identificata da un URI. Tutte le risorse rientrano in una delle seguenti categorie:</p> + +<dl> + <dt>Master entries</dt> + <dd>Queste risorse sono aggiunte alla cache perchè sono legate ad una pagina che includeva l'attributo <code>manifest</code>.</dd> + <dt>Explicit entries</dt> + <dd>Le risorse esplicitamente indicate nel cache manifest.</dd> + <dt>Network entries</dt> + <dd>Le risorse elencate nel file manifest dell'application cache che devono essere sempre recuperate dalla rete.</dd> + <dt>Fallback entries</dt> + <dd>Le risorse elencate nel file manifest che devono essere utilizzate come alternativa ad una risorsa non raggiungibile.</dd> +</dl> + +<div class="note"><strong>Note:</strong> Una risorsa può rientrare in più categorie, per esempio può apparire sia nella sezione esplicita che in quella di fallback.</div> + +<p>Le categorie di risorse sono descritte in dettaglio qui di seguito.</p> + +<h3 id="Master_entries">Master entries</h3> + +<p>Le master entries sono un qualsiasi file HTML che include l'attributo {{htmlattrxref("manifest","html")}} nell'elemento {{HTMLElement("html")}}. Per esempio, diciamo che abbiamo il file HTML <code><a class="linkification-ext external" href="http://www.foo.bar/entry.html" title="Linkification: http://www.foo.bar/entry.html">http://www.example.com/entry.html</a></code>, composto in questa maniera:</p> + +<pre class="brush: html"><html manifest="example.appcache"> + <h1>Application Cache Example</h1> +</html> +</pre> + +<p>se <code>entry.html</code> non è elencato nel file cache manifest <code>example.appcache</code>, basta visitare la pagina per farla aggiungere all'application cache in qualità di master entry.</p> + +<h3 id="Explicit_entries">Explicit entries</h3> + +<p>Le Explicit entries sono le risorse esplicitamente elencate in una sezione <code>CACHE </code>del file cache manifest.</p> + +<h3 id="Network_entries">Network entries</h3> + +<p>La sezione <code>NETWORK</code> di un cache manifest, specifica le risorse dell'applicazione web che richiedono l'accesso online. Queste voci sono essenzialmente una "online whitelist" — le URI specificate nella sezione <code>NETWORK</code> sono sempre caricate dal server invece che dalla cache. In questo modo il modello di sicurezza del browser protegge l'utente da potenziali falle di sicurezza limitando l'accesso alle risorse approvate.</p> + +<p>Per esempio, si può utilizzare la lista delle risorse network per caricare ed eseguire script ed altro codice dal server invece che dalla cache:</p> + +<pre>CACHE MANIFEST +NETWORK: +/api +</pre> + +<p>La sezione del cache manifest mostrata qui sopra assicura che tutte le richieste di files contenuti nella sottocartella <code><a href="http://www.example.com/api/" rel="freelink">http://www.example.com/api/</a></code> vengano sempre caricate dalla rete senza accedere alla cache.</p> + +<div class="note"><strong>Note</strong>: Omettere semplicemente le master entries (i files che contengono l'attributo <code>manifest</code> nell'elemento <code>html</code>) dal file manifest potrebbe non avere lo stesso risultato, perchè le master entries sarebbero scaricate solo la prima volta dalla rete, per poi essere aggiunte e prelevate dalla cache ai successivi accessi.</div> + +<h3 id="Fallback_entries">Fallback entries</h3> + +<p>Fallback entries sono utilizzate quando fallisce il tentativo di caricare una risorsa. Per esempio, diciamo che il cache manifest <code><a href="http://www.example.com/example.appcache" rel="freelink">http://www.example.com/example.appcache</a></code> includa il seguente contenuto:</p> + +<pre>CACHE MANIFEST +FALLBACK: +example/bar/ example.html +</pre> + +<p>Qualsiasi richiesta a<code><a href="http://www.example.com/example/bar/" rel="freelink"> http://www.example.com/example/bar/</a></code> o a una qualsiasi delle sue sottocartelle ed il loro contenuto fa partire una richiesta newtwork per caricare la risorsa richiesta. Se il tentativo fallisce, a causa della connessione o di un qualsiasi errore del server, il browser carica il file <code>example.html</code> al suo posto.</p> + +<h2 id="Stati_della_cache">Stati della cache</h2> + +<p>Ogni application cache possiede uno <strong>stato</strong>, che indica la condizione corrente della cache. Le cache che condividono la stessa URI per il manifest, condividono anche lo stesso stato della cache, che può essere uno dei seguenti:</p> + +<dl> + <dt><code>UNCACHED</code></dt> + <dd>Un valore speciale che indica che l'oggetto application cache non è inizializzato completamente.</dd> + <dt><code>IDLE</code></dt> + <dd>L'application cache non è attualmente in fase di aggiornamento.</dd> + <dt><code>CHECKING</code></dt> + <dd>Il manifest è in fase di prelievo e controllo aggiornamenti.</dd> + <dt><code>DOWNLOADING</code></dt> + <dd>Le risorse sono in fase di scaricamento per essere aggiunte alla cache, a causa di una risorsa modificata nel manifest.</dd> + <dt><code>UPDATEREADY</code></dt> + <dd>C'è una nuova versione dell'application cache disponibile. C'è un evento corrispondente <code>updateready</code>, che è lanciato al posto dell'evento <code>cached</code> quando un nuovo aggiornamento è stato scaricato ma non ancora attivato tramite il metodo <code>swapCache()</code>.</dd> + <dt><code>OBSOLETE</code></dt> + <dd>Il gruppo application cache è obsoleto.</dd> +</dl> + +<h2 id="Controllare_gli_aggiornamenti_per_il_cache_manifest">Controllare gli aggiornamenti per il cache manifest</h2> + +<p>Si può effettuare, attraverso JavaScript, un test per vedere se un'applicazione ha il cache manifest aggiornato. Dato che un cache manifest può essere stato aggiornato prima che uno script venga caricato ed attacchi un event listener per controllare gli aggiornamenti, gli script devono sempre utilizzare il test <code>window.applicationCache.status</code>.</p> + +<pre class="brush: js">function onUpdateReady() { + alert('found new version!'); +} +window.applicationCache.addEventListener('updateready', onUpdateReady); +if(window.applicationCache.status === window.applicationCache.UPDATEREADY) { + onUpdateReady(); +}</pre> + +<p>Per testare manualmente un nuovo file manifest, è possibile utilizzare <code>window.applicationCache.update()</code>.</p> + +<h2 id="Trappole_da_evitare_(aka_Gotchas)">Trappole da evitare (aka Gotchas)</h2> + +<ul> + <li>Non accedere mai ai file nella cache utilizzando i parametri tradizionali della GET (es. <code>other-cached-page.html?parameterName=value</code>). In questo modo il browser ignorerà la cache e andrà a prendere il file dalla rete. Per linkare risorse nella cache che hanno parametri parsati in Javascript, utilizzare i parametri dopo l'hash (#), come per esempio: <code>other-cached-page.html#whatever?parameterName=value</code>.</li> + <li>Quando le applicazioni sono memorizzate nella cache, non è sufficiente aggiornare i files nella cache che sono utilizzati nella pagina web per aggiornarli. E' necessario aggiornare anche il file cache manifest stesso prima che il browser prelevi ed utilizzi i files aggiornati. Si può fare tramite programmazione utilizzando <code>window.applicationCache.swapCache()</code>, <span id="result_box" lang="it"><span class="hps">anche se</span> <span class="hps">le risorse</span> <span class="hps">che sono state già</span> <span class="hps">caricate</span> <span class="hps">non saranno interessate</span></span>. <span id="result_box" lang="it"><span class="hps">Per assicurarsi</span> <span class="hps">che le risorse</span> <span class="hps">vengono caricate da</span> <span class="hps">una</span> <span class="hps">nuova versione della</span> <span class="hps">cache dell'applicazione</span><span>,</span> <span class="hps">ricaricare la pagina</span> <span class="hps">è l'ideale</span></span>.</li> + <li>Una buona prassi è quella di settare gli expires headers sul tuo web server per far sì che i files <code>*.appcache</code> scadano immediatamente. Questo evita il rischio di inserire nella cache il cache manifest stesso. Per esempio, su Apache è possibile impostare questo comportamento nella seguente:<br> + <code>ExpiresByType text/cache-manifest "access plus 0 seconds"</code></li> +</ul> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.0</td> + <td>3.5</td> + <td>10.0</td> + <td>10.6</td> + <td>4.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.1</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>11.0</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + +<p>Nota: Le versioni di Firefox precedenti alla 3.5 ignorano le sezioni <code>NETWORK </code>e <code>FALLBACK </code>del file cache manifest.</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li><a href="http://www.html5rocks.com/en/tutorials/appcache/beginner/" title="http://www.html5rocks.com/en/tutorials/appcache/beginner/">HTML5Rocks - A Beginner's Guide to Using the Application Cache</a></li> + <li><a href="http://appcachefacts.info/" title="http://appcachefacts.info/">appcachefacts.info</a> - informazioni dettagliate delle idiosincrasie sull'AppCache</li> + <li><a href="http://alistapart.com/article/application-cache-is-a-douchebag" title="http://alistapart.com/article/application-cache-is-a-douchebag">A List Apart: Application Cache is a Douchebag</a> + <ul> + <li><a href="http://flailingmonkey.com/application-cache-not-a-douchebag" title="http://flailingmonkey.com/application-cache-not-a-douchebag">The Application Cache is no longer a Douchebag</a> - una panoramica sui tool di debug per l'app cache presenti in Firefox 23.</li> + </ul> + </li> + <li><a href="http://hacks.mozilla.org/2010/01/offline-web-applications/" title="http://hacks.mozilla.org/2010/01/offline-web-applications/">offline web applications</a> su hacks.mozilla.org - demo di un app offline e speigazione di come funziona.</li> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#offline" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#offline">HTML 5 working draft: Offline web applications</a></li> + <li><a href="http://www.w3.org/TR/offline-webapps/" title="http://www.w3.org/TR/offline-webapps/">W3C Working Group Note: Offline Web Applications</a></li> + <li><a href="http://developer.teradata.com/blog/js186040/2011/11/html5-cache-manifest-an-off-label-usage" title="http://developer.teradata.com/blog/js186040/2011/11/html5-cache-manifest-an-off-label-usage">HTML5 Cache Manifest: An Off-label Usage</a></li> + <li><a href="http://manifest-validator.com" title="http://manifest-validator.com">Cache Manifest Validator</a></li> + <li>{{interface("nsIApplicationCache")}}</li> + <li>{{interface("nsIApplicationCacheNamespace")}}</li> + <li>{{interface("nsIApplicationCacheContainer")}}</li> + <li>{{interface("nsIApplicationCacheChannel")}}</li> + <li>{{interface("nsIApplicationCacheService")}}</li> + <li>{{interface("nsIDOMOfflineResourceList")}}</li> + <li><a href="http://www.ibm.com/developerworks/web/library/wa-ffox3/">Get ready for Firefox 3.0 - A Web developer's guide to the many new features in this popular browser, especially the offline application features</a> (IBM developerWorks)</li> + <li><a href="/en-US/docs/Application_cache_implementation_overview" title="/en-US/docs/Application_cache_implementation_overview">Application cache implementation overview</a></li> +</ul> + +<div>{{HTML5ArticleTOC}}</div> |