diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
| commit | da78a9e329e272dedb2400b79a3bdeebff387d47 (patch) | |
| tree | e6ef8aa7c43556f55ddfe031a01cf0a8fa271bfe /files/it/web/html/element | |
| parent | 1109132f09d75da9a28b649c7677bb6ce07c40c0 (diff) | |
| download | translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.gz translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.bz2 translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.zip | |
initial commit
Diffstat (limited to 'files/it/web/html/element')
47 files changed, 8251 insertions, 0 deletions
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> |