initial commit

10 files changed, 1331 insertions, 0 deletions

diff --git a/files/it/web/guide/ajax/index.html b/files/it/web/guide/ajax/index.html
new file mode 100644
index 0000000000..5f8b87ee74
--- /dev/null
+++ b/files/it/web/guide/ajax/index.html
@@ -0,0 +1,57 @@
+---
+title: AJAX
+slug: Web/Guide/AJAX
+tags:
+  - AJAX
+  - Tutte_le_categorie
+translation_of: Web/Guide/AJAX
+---
+<p>
+</p>
+<div class="callout-box"><b><a href="it/AJAX/Iniziare">AJAX:Iniziare</a></b><br>Una introduzione ad AJAX.</div>
+<p><b>Asynchronous JavaScript and XML (AJAX)</b> non è di per sè una tecnologia, ma è un termine che descrive un "nuovo" approccio all'utilizzo di diverse tecnologie esistenti, compresi: <a href="it/HTML">HTML</a> o <a href="it/XHTML">XHTML</a>, <a href="it/CSS">CSS</a>, <a href="it/JavaScript">JavaScript</a>, <a href="it/DOM">DOM</a>, <a href="it/XML">XML</a>, <a href="it/XSLT">XSLT</a> e l'oggetto <a href="it/XMLHttpRequest">XMLHttpRequest</a>. Grazie all'utilizzo di queste tecnologie in combinazione con il modello AJAX, le applicazioni web possono eseguire aggiornamenti rapidi e incrementali dell'interfaccia utente senza ricaricare nel browser l'intera pagina. Questo rende l'applicazione più performante e più reattiva alle azioni dell'utente.<br>
+Il W3C ha pubblicato una <a class="external" href="http://www.w3.org/TR/2006/WD-XMLHttpRequest-20060405/">bozza</a> di standard per l'oggetto XMLHttpRequest.
+</p>
+<table class="topicpage-table">
+<tbody><tr><td>
+<h4 id="Documentazione"> Documentazione </h4>
+<dl><dt> <a href="it/AJAX/Iniziare">AJAX:Iniziare</a>
+</dt><dd> <small>Questo articolo spiega le fondamenta di AJAX e fornisce due semplici esempi per cominciare.</small>
+</dd></dl>
+<dl><dt> <a href="it/Compatibilit%c3%a0_di_AJAX">Compatibilità di AJAX</a>
+</dt><dd> <small>Quali browser supportano AJAX?</small>
+</dd></dl>
+<dl><dt> <a class="external" href="http://www.adaptivepath.com/publications/essays/archives/000385.php">Ajax: A New Approach to Web Applications</a> (EN)
+</dt><dd> <small>Jesse James Garrett, di <a class="external" href="http://www.adaptivepath.com">adaptive path</a>, ha scritto questa introduzione ad AJAX nel febbraio 2005.</small>
+</dd></dl>
+<dl><dt> <a class="external" href="http://www.onlamp.com/pub/a/onlamp/2005/05/19/xmlhttprequest.html">A Simpler Ajax Path</a> (EN)
+</dt><dd> <small>"E' facile avvalersi dell'oggetto XMLHttpRequest per costruire un'applicazione web che si comporti come un'applicazione desktop utilizzando però strumenti come i web forms per ricevere input dagli utenti."</small>
+</dd></dl>
+<dl><dt> <a class="external" href="http://www.contentwithstyle.co.uk/Articles/38/fixing-the-back-button-and-enabling-bookmarking-for-ajax-apps">Fixing the Back Button and Enabling Bookmarking for AJAX Apps</a> (EN)
+</dt><dd> <small>Mike Stenhouse ha realizzato questo articolo che esamina nel dettaglio alcuni metodi che è possibile utilizzare per risolvere i problemi relativi al bottone "Indietro" e ai Bookmark nelle applicazioni AJAX.</small>
+</dd></dl>
+<dl><dt> <a class="external" href="http://alexbosworth.backpackit.com/pub/67688">Ajax Mistakes</a> (EN)
+</dt><dd> <small>Alex Bosworth ha scritto questo articolo che evidenzia alcuni errori comuni degli sviluppatori AJAX.</small> </dd></dl>
+</td>
+<td>
+<h4 id="Strumenti">Strumenti</h4>
+<ul><li> <a class="external" href="http://www.ajaxprojects.com">Strumenti e Framework</a> </li><li> <a class="external" href="http://blog.monstuff.com/archives/000252.html">Strumento di debugging per AJAX</a>
+</li><li> <a class="external" href="http://www.osflash.org/doku.php?id=flashjs">Kit di integrazione Flash/AJAX</a>
+</li><li> <a class="external" href="http://www.hotajax.org">Hot!Ajax: many cool examples</a>
+</li></ul>
+<h4 id="Argomenti_correlati">Argomenti correlati</h4>
+<ul><li> <a href="it/HTML">HTML</a>
+</li><li> <a href="it/XHTML">XHTML</a>
+</li><li> <a href="it/CSS">CSS</a>
+</li><li> <a href="it/DOM">DOM</a>
+</li><li> <a href="it/JavaScript">JavaScript</a>
+</li><li> <a href="it/XML">XML</a>
+</li><li> <a href="it/XMLHttpRequest">XMLHttpRequest</a>
+</li><li> <a href="it/XSLT">XSLT</a>
+</li><li> <a href="it/DHTML">DHTML</a>
+</li></ul>
+</td>
+</tr>
+</tbody></table>
+<p><span>Interwiki Language Links</span>
+</p>{{ languages( { "ca": "ca/AJAX", "en": "en/AJAX", "es": "es/AJAX", "fr": "fr/AJAX", "ja": "ja/AJAX", "ko": "ko/AJAX", "nl": "nl/AJAX", "pl": "pl/AJAX", "pt": "pt/AJAX" } ) }}
diff --git a/files/it/web/guide/ajax/iniziare/index.html b/files/it/web/guide/ajax/iniziare/index.html
new file mode 100644
index 0000000000..f473f64d1e
--- /dev/null
+++ b/files/it/web/guide/ajax/iniziare/index.html
@@ -0,0 +1,252 @@
+---
+title: Iniziare
+slug: Web/Guide/AJAX/Iniziare
+tags:
+  - AJAX
+  - Tutte_le_categorie
+translation_of: Web/Guide/AJAX/Getting_Started
+---
+<p> </p>
+
+<p>Questo articolo spiega le fondamenta di AJAX e fornisce due semplici esempi per iniziare.</p>
+
+<h3 id="Cos.27.C3.A8_AJAX.3F" name="Cos.27.C3.A8_AJAX.3F">Cos'è AJAX?</h3>
+
+<p>AJAX (Asynchronous JavaScript and XML) è un termine coniato recentemente per descrivere due utili funzionalità che sono presenti nei browser da anni, ma che sono state sottovalutate dalla maggioranza degli sviluppatori web fino a quando, di recente, alcune applicazioni come Gmail, Google suggest e Google Maps le hanno portate in auge.</p>
+
+<p>Le funzionalità di cui stiamo parlando sono:</p>
+
+<ul>
+ <li>la possibilità di eseguire richieste al server senza ricaricare la pagina</li>
+ <li>la possibilità di interpretare e lavorare con i documenti XML</li>
+</ul>
+
+<h3 id="Passo_1_.E2.80.93_D.C3.AC_.22per_favore.22.2C_o_Come_fare_una_richiesta_HTTP" name="Passo_1_.E2.80.93_D.C3.AC_.22per_favore.22.2C_o_Come_fare_una_richiesta_HTTP">Passo 1 – Dì "per favore", o Come fare una richiesta HTTP</h3>
+
+<p>Per effettuare una richiesta HTTP al server utilizzando JavaScript, si utilizza un'istanza di una classe che fornisce detta funzionalità. Tale classe è stata introdotta originariamente in Internet Explorer come oggetto ActiveX e si chiamava <code>XMLHTTP</code>. Successivamente Mozilla, Safari e altri browser hanno implementato la classe <code>XMLHttpRequest</code>, che supporta gli stessi metodi e le stesse proprietà della classe di Microsoft.</p>
+
+<p>Il risultato è che per creare un'istanza (oggetto) da tale classe che funzioni sui diversi browser, occorre scrivere un codice simile al seguente:</p>
+
+<pre>if (window.XMLHttpRequest) { // Mozilla, Safari, ...
+    http_request = new XMLHttpRequest();
+} else if (window.ActiveXObject) { // IE
+    http_request = new ActiveXObject("Microsoft.XMLHTTP");
+}
+</pre>
+
+<p>(Per scopi illustrativi, il codice qui riportato è una versione leggermente semplificata del codice generalmente utilizzato per creare un'istanza XMLHTTP. Per un esempio più pratico, si veda il Passo 3 di questo articolo)</p>
+
+<p>Certe versioni di alcuni browser della famiglia Mozilla, non si comportano correttamente nel caso in cui la risposta del server non contiene un'intestazione HTTP <code>mime-type</code>. Per ovviare a questo problema, è possibile utilizzare un metodo aggiuntive per sovrascrivere l'header inviato dal server, nel caso non sia presente o non sia impostato a <code>text/xml</code>.</p>
+
+<pre>http_request = new XMLHttpRequest();
+http_request.overrideMimeType('text/xml');
+</pre>
+
+<p>Dopodichè occorre decidere cosa fare con la risposta inviata dal server. Quindi bisogna dire all'oggetto XMLHttpRequest quale funzione JavaScript elaborerà il codice XML. Questo si fa impostando la proprietà <code>onreadystatechange</code> dell'oggetto con il nome della funzione JavaScript, in questo modo:</p>
+
+<p><code>http_request.onreadystatechange = nomeFunzione;</code></p>
+
+<p>Si noti che non ci sono parentesi dopo il nome della funzione e non viene passato alcun parametro, perchè si sta semplicemente assegnando un riferimento alla funzione, non la si sta ancora chiamando. Inoltre, invece di passare il nome di una funzione, si potrebbe utilizzare la tecnica JavaScript di definire funzioni "al volo" e di definire le azioni che elaboreranno la risposta XML, in questo modo:</p>
+
+<pre>http_request.onreadystatechange = function(){
+    // azioni da eseguire...
+};
+</pre>
+
+<p>Dopo aver dichiarato ciò che accadrà quando si riceverà la risposta dal server, occorre inviare la richiesta. Bisogna chiamare i metodi <code>open()</code> e <code>send()</code> della classe che esegue le richieste, in questo modo:</p>
+
+<pre>http_request.open('GET', 'http://www.esempio.org/qualsiasi.file', true);
+http_request.send(null);
+</pre>
+
+<ul>
+ <li>Il primo parametro da passare a <code>open()</code> è il metodo che si desidera utilizzare per la richiesta HTTP: GET, POST, HEAD o qualsiasi altro metodo che si desideri utilizzare e sia supportato dal server. Il metodo deve essere scritto in lettere MAIUSCOLE, come specificato dallo standard HTTP; altrimenti alcuni browser (come Firefox) potrebbero non eseguire la richiesta. Per ulteriori informazioni sui possibili metodi da utilizzare si veda le: <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html">specifiche del W3C</a></li>
+ <li>Il secondo parametro è l'URL della pagina che si sta richiedendo. Per ragioni di sicurezza, non è possibile chiamare pagine che si trovino su un dominio differente da quello in cui si trova la pagina corrente. Bisogna anche assicurarsi di utilizzare esattamente lo stesso dominio in tutte le pagine o si avrà un errore di 'permission denied' quando si chiama il metodo <code>open()</code>. Un errore comune è quello di accedere al sito da &lt;tt&gt;dominio.org&lt;/tt&gt; e cercare poi di chiamare pagine che si trovano su &lt;tt&gt;www.dominio.org&lt;/tt&gt;</li>
+ <li>Il terzo parametro specifica se la richiesta deve essere asincrona. Se è impostato a <code>TRUE</code> (e di solito è così), la funzione JavaScript resterà in esecuzione anche prima dell'arrivo della risposta.</li>
+</ul>
+
+<p>Il parametro del metodo <code>send()</code> è costituito dai dati che si vogliono inviare al server se la richiesta è di tipo <code>POST</code>. I dati vengono passati sotto forma di querystring, così:</p>
+
+<p><code>nome1=valore1&amp;nome2=valore2&amp;ecc=ecc</code></p>
+
+<p>Si noti che se si desidera inviare i dati come <code>POST</code>, occorre modificare il tipo MIME della richiesta con la riga seguente:</p>
+
+<pre>http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+</pre>
+
+<p>In caso contrario, il server ignorerà la richiesta.</p>
+
+<h3 id="Step_2_.E2.80.93_.22Via.21.22_o_Come_gestire_la_risposta_del_server" name="Step_2_.E2.80.93_.22Via.21.22_o_Come_gestire_la_risposta_del_server">Step 2 – "Via!" o Come gestire la risposta del server</h3>
+
+<p>Come si è detto, all'atto di inviare la richiesta, si è fornito il nome della funzione JavaScript che deve elaborare la risposta.</p>
+
+<p><code>http_request.onreadystatechange = nomeFunzione;</code></p>
+
+<p>Ma cosa dovrebbe fare questa funzione? Primo, la funzione deve controllare lo stato della richiesta. Se lo stato ha un valore di 4, significa che la risposta è stata ricevuta per intero e si può continuare l'elaborazione:</p>
+
+<p> </p>
+
+<pre>if (http_request.readyState == 4) {
+    // tutto a posto, la risposta è stata ricevuta
+} else {
+    // non sono ancora pronto
+}
+</pre>
+
+<p>Ecco la lista completa dei possibili valori di <code>readyState</code>:</p>
+
+<ul>
+ <li>0 (non inizializzato)</li>
+ <li>1 (sta caricando)</li>
+ <li>2 (già caricato)</li>
+ <li>3 (interattivo)</li>
+ <li>4 (completato)</li>
+</ul>
+
+<p>(<a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/readystate_1.asp">Fonte</a>) (1)</p>
+
+<p>Bisognerà poi controllare il codice di stato della risposta HTTP. Tutti i codici possibili sono elencati nel <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html">sito del W3C</a>. Per i nostri scopi, ci interessa soltanto il codice <code>200 OK</code>.</p>
+
+<pre>if (http_request.status == 200) {
+    // perfetto!
+} else {
+    // c'è stato un problema nella richiesta,
+    // per esempio un codice di errore 404 (Not Found)
+    // o 500 (Internal Server Error)
+}
+</pre>
+
+<p>Una volta controllati lo stato della richiesta e il codice di stato HTTP della risposta, sarà lo sviluppatore a decidere cosa desidera fare con i dati ricevuti dal server. Per accedere ad essi, vi sono due possibilità:</p>
+
+<ul>
+ <li><code>http_request.responseText</code> – restituisce la risposta sotto forma di stringa di testo</li>
+ <li><code>http_request.responseXML</code> – restituisce la risposta sotto forma di oggetto <code>XMLDocument</code> che si può navigare tramite le funzioni DOM.</li>
+</ul>
+
+<h3 id="Passo_3_-_.22Tutti_insieme_ora.21.22.2C_Un_semplice_esempio" name="Passo_3_-_.22Tutti_insieme_ora.21.22.2C_Un_semplice_esempio">Passo 3 - "Tutti insieme ora!", Un semplice esempio</h3>
+
+<p>Vediamo ora tutti gli elementi esaminati finora combinati insieme. Il seguente JavaScript richiede un documento HTML (<code>test.html</code>), che contiene il testo "Sono un test.", e farà un <code>alert()</code> coi contenuti di questo file.</p>
+
+<pre>&lt;script type="text/javascript" language="javascript"&gt;
+
+
+
+    function eseguiRichiesta(url) {
+
+        var http_request = false;
+
+        if (window.XMLHttpRequest) { // Mozilla, Safari,...
+            http_request = new XMLHttpRequest();
+            if (http_request.overrideMimeType) {
+                http_request.overrideMimeType('text/xml');
+                // Vedi note sotto
+            }
+        } else if (window.ActiveXObject) { // IE
+            try {
+                http_request = new ActiveXObject("Msxml2.XMLHTTP");
+            } catch (e) {
+                try {
+                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
+                } catch (e) {}
+            }
+        }
+
+        if (!http_request) {
+            alert('Giving up :( Non riesco a creare una istanza XMLHTTP');
+            return false;
+        }
+        http_request.onreadystatechange = function() { alertContents(http_request); };
+        http_request.open('GET', url, true);
+        http_request.send(null);
+
+    }
+
+    function alertContents(http_request) {
+
+        if (http_request.readyState == 4) {
+            if (http_request.status == 200) {
+                alert(http_request.responseText);
+            } else {
+                alert('Si è verificato un problema con la richiesta');
+            }
+        }
+
+    }
+&lt;/script&gt;
+&lt;span
+    style="cursor: pointer; text-decoration: underline"
+    onclick="eseguiRichiesta('test.html')"&gt;
+        Fai una richiesta
+&lt;/span&gt;
+</pre>
+
+<p>In questo esempio:</p>
+
+<ul>
+ <li>L'utente clicca sul link "Fai una richiesta";</li>
+ <li>Viene chiamata la funzione <code>eseguiRichiesta()</code> con un parametro: il nome del file <code>test.html</code>, che si trova nella stessa directory;</li>
+ <li>Il browser esegue la richiesta e l'esecuzione passa a <code>alertContents()</code>;</li>
+ <li><code>alertContents()</code> controlla se l'esecuzione è stata ricevuta e se lo stato della risposta è OK: in caso affermativo chiama un <code>alert()</code> con i contenuti del file <code>test.html</code>.</li>
+</ul>
+
+<p>Si può provare questo esempio <a class="external" href="http://www.w3clubs.com/mozdev/httprequest_test.html">qui</a> e si può leggere il file "test.html" <a class="external" href="http://www.w3clubs.com/mozdev/test.html">qui</a>.</p>
+
+<p><b>Nota</b>: La riga di codice <code> http_request.overrideMimeType('text/xml');</code> causa degli errori nella Console JavaScript di Firefox 1.5 o superiore nel caso che la pagina chiamata non sia costituita da XML ben formato (come in questo caso). Questo comportamento è corretto ed è documentato qui: <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=311724" rel="freelink">https://bugzilla.mozilla.org/show_bug.cgi?id=311724</a> - l'articolo verrà rivisto per correggere questo errore.</p>
+
+<p><b>Nota 2</b>: se si invia una richiesta con una porzione di codice che restituisce XML e non un file XML statico, bisogna impostare alcune intestazioni nella risposta perchè la pagina funzioni anche su Internet Explorer. Se non si imposta l'intestazione <code>Content-Type: application/xml</code>, IE lancia un errore JavaScript 'Object Expected' appena si cerca di accedere a un elemento XML. Se non si imposta l'intestazione <code>Cache-Control: no-cache</code>, il browser registra la risposta nella cache e non rieseguirà più la richiesta, il che fa impazzire molti sviluppatori in fase di debugging.</p>
+
+<p><b>Nota 3</b>: se la variabile <code>http_request</code> è globale, se vi sono altre funzioni che chiamano <code>makeRequest()</code>, possono sovrasciversi a vicenda. Per evitare questo problema, occorre dichiarare questa variabile come locale e passarla alla funzione <code>alertContent()</code>.</p>
+
+<p><b>Nota 4</b>: nel registrare la funzione callback per <code>onreadystatechange</code> non è possibile passare alcun argomento:</p>
+
+<pre>http_request.onreadystatechange = function() { alertContents(http_request); };  //1 (richiesta simultanea)
+http_request.onreadystatechange = alertContents(http_request); //2 (non funziona)
+http_request.onreadystatechange = alertContents;  //3 (variabile globale)
+</pre>
+
+<p>Il metodo 1 permette di elaborare diverse richieste simultaneamente. Il metodo 2 non funziona. Il metodo 3 è da utilizzare se <code>http_request</code> è una variabile globale.</p>
+
+<h3 id="Passo_4_-_.22Gli_X-Files.22.2C_o_Elaborare_la_risposta_XML" name="Passo_4_-_.22Gli_X-Files.22.2C_o_Elaborare_la_risposta_XML">Passo 4 - "Gli X-Files", o Elaborare la risposta XML</h3>
+
+<p>Nell'esempio precedente, dopo che la risposta HTTP è stata ricevuta si è utilizzata la proprietà <code>reponseText</code> dell'oggetto richiesta, che conteneva i contenuti del file &lt;tt&gt;test.html&lt;/tt&gt;. Proveremo ora a utilizzare la proprietà <code>responseXML</code>.</p>
+
+<p>Prima di tutto, occorre creare un documento XML valido che verrà chiamato in seguito. Il documento (&lt;tt&gt;test.xml&lt;/tt&gt;) contiene quanto segue:</p>
+
+<pre>&lt;?xml version="1.0" ?&gt;
+&lt;root&gt;
+    Sono un test.
+&lt;/root&gt;
+</pre>
+
+<p>Nello script occorre cambiare soltanto la riga seguente:</p>
+
+<pre>...
+onclick="eseguiRichiesta('test.xml')"&gt;
+...
+</pre>
+
+<p>In <code>alertContents()</code>, bisogna poi sostituire la riga <code>alert(http_request.responseText);</code> con:</p>
+
+<pre>var xmldoc = http_request.responseXML;
+var root_node = xmldoc.getElementsByTagName('root').item(0);
+alert(root_node.firstChild.data);
+</pre>
+
+<p>Questo codice prende l'oggetto <code>XMLDocument</code> fornito da <code>responseXML</code> e utilizza i metodi DOM per accedere ai dati contenuti nel documento XML. Si può vedere <code>test.xml</code> <a class="external" href="http://www.w3clubs.com/mozdev/test.xml">qui</a>. Si può vedere in azione questa versione dello script <a class="external" href="http://www.w3clubs.com/mozdev/httprequest_test_xml.html">qui</a>.</p>
+
+<p>Per ulteriori dettagli sui metodi DOM, si vedano i documenti sull'<a class="external" href="http://www.mozilla.org/docs/dom/">Implementazione DOM di Mozilla</a>.</p>
+
+<hr>
+<p><small>La bozza di standard del W3C indica i seguenti valori per la proprietà <code>readystate</code>: </small></p>
+
+<ul>
+ <li>0 Non inizializzato: il valore iniziale</li>
+ <li>1 Aperto: il metodo open() è stato chiamato con successo</li>
+ <li>2 Inviato: il browser a completato la richiesta con successo, ma ancora non ha ricevuto alcun dato in risposta</li>
+ <li>3 Ricezione: immediatamente prima di ricevere il corpo del documento (se esiste). Tutte le intestazioni HTTP sono state ricevute (la bozza pone però un quesito: come comportarsi con le richieste di tipo HEAD?)</li>
+ <li>4 Caricato: il trasferimento dei dati è stato completato</li>
+</ul>
+
+<p><a class="external" href="http://www.w3.org/TR/2006/WD-XMLHttpRequest-20060405/#xmlhttprequest">Fonte</a></p>
+
+<p>{{ languages( { "ca": "ca/AJAX/Primers_passos", "de": "de/AJAX/Getting_Started", "en": "en/AJAX/Getting_Started", "es": "es/AJAX/Primeros_Pasos", "fr": "fr/AJAX/Premiers_pas", "ja": "ja/AJAX/Getting_Started", "pl": "pl/AJAX/Na_pocz\u0105tek", "pt": "pt/AJAX/Como_come\u00e7ar" } ) }}</p>
diff --git a/files/it/web/guide/api/index.html b/files/it/web/guide/api/index.html
new file mode 100644
index 0000000000..3f571c0cb8
--- /dev/null
+++ b/files/it/web/guide/api/index.html
@@ -0,0 +1,26 @@
+---
+title: Guide to Web APIs
+slug: Web/Guide/API
+tags:
+  - API
+  - Guide
+  - Landing
+  - NeedsTranslation
+  - TopicStub
+  - Web
+translation_of: Web/Guide/API
+---
+<p>Here you'll find links to each of the guides introducing and explaining each of the APIs that make up the Web development architecture.</p>
+
+
+<h2 id="Web_APIs_from_A_to_Z">Web APIs from A to Z</h2>
+
+<p>{{ListGroups}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API">Web API interface reference</a> (an index of all of the interfaces comprising all of these APIs)</li>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model</a> (DOM)</li>
+ <li><a href="/en-US/docs/Web/Events">Web API event reference</a></li>
+ <li><a href="/en-US/docs/Learn">Learning web development</a></li></ul>
diff --git a/files/it/web/guide/css/index.html b/files/it/web/guide/css/index.html
new file mode 100644
index 0000000000..20621b40b0
--- /dev/null
+++ b/files/it/web/guide/css/index.html
@@ -0,0 +1,23 @@
+---
+title: CSS developer guide
+slug: Web/Guide/CSS
+tags:
+  - CSS
+  - Guide
+  - Landing
+  - NeedsTranslation
+  - TopicStub
+translation_of: Learn/CSS
+---
+<p>{{draft}}</p>
+<p><span class="seoSummary">Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML</span> or other markup languages such as SVG<span class="seoSummary">. CSS describes how the structured elements in the document are to be rendered on screen, on paper, in speech, or on other media.</span> The ability to adjust the document's presentation depending on the output medium is a key feature of CSS.</p>
+<p>CSS is one of the core languages of the open Web and has a standardized <a class="external" href="http://w3.org/Style/CSS/#specs">W3C specification</a>.</p>
+<p>{{LandingPageListSubpages}}</p>
+<h2 id="Pages_elsewhere">Pages elsewhere</h2>
+<p>Here are other pages related to CSS that should be linked to from here.</p>
+<h2 id="See_also">See also</h2>
+<ul>
+  <li><a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/HTML">CSS</a></li>
+  <li><a href="/en-US/docs/Web/Reference" title="/en-US/docs/Web/Reference">Web developer reference</a></li>
+  <li><a href="/en-US/docs/Web/Guide" title="/en-US/docs/Web/Guide">Web developer guide</a></li>
+</ul>
diff --git a/files/it/web/guide/graphics/index.html b/files/it/web/guide/graphics/index.html
new file mode 100644
index 0000000000..7221d89ec7
--- /dev/null
+++ b/files/it/web/guide/graphics/index.html
@@ -0,0 +1,58 @@
+---
+title: Graphics on the Web
+slug: Web/Guide/Graphics
+tags:
+  - 2D
+  - 3D
+  - Canvas
+  - Grafica
+  - HTML5
+  - SVG
+  - WebGL
+  - WebRTC
+translation_of: Web/Guide/Graphics
+---
+<p><span class="seoSummary">I moderni Siti Web e Applicazioni, spesso necessitano di mostrare una grafica.</span> Mostrare delle immagini statiche, può essere fatto facilmente usando l'elemento immagine {{HTMLElement("img")}} , Oppure settando lo sfondo di elementi HTML usando la proprietà dello sfondo css {{cssxref("background-image")}}. Spesso è possibile creare anche grafici "al volo", oppure manipolare immagini dopo averle fatte.<span class="seoSummary">Questi articoli forniscono infomazioni su come si può ottenere questo risultato</span></p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">Grafiche 2D</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/HTML/Canvas">Canvas</a></dt>
+ <dd><em>L'elemento {{HTMLElement("canvas")}} fornisce </em><em>APIs per disegnare grafica 2D usando JavaScript.</em></dd>
+ <dt><a href="/en-US/docs/Web/SVG">SVG</a></dt>
+ <dd><em>La Grafica a Vettori Scalabile (SVG) consente di usare linee, curve, e altre forme geometriche per realizzare grafica. Evitando l'utilizzo di bitmaps, potete creare immagini che scalano in modo pulito ad ogni dimensione.</em></dd>
+</dl>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<p><span class="alllinks"><a href="/en-US/docs/tag/Graphics">View All...</a></span></p>
+</div>
+
+<div class="section">
+<h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">Grafiche 3D</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/WebGL">WebGL</a></dt>
+ <dd><em>Una guida per come iniziare con WebGL, L' API di grafica 3D per il Web. Questa tecnologia consente un uso standard delle OpenGL.Ad esempio un contenuto Web</em></dd>
+</dl>
+
+<h2 id="Video">Video</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video">Usare  l'audio e il video HTML5</a></dt>
+ <dd>Incorporare un<em> video in un documento HTML e controllare la riproduzione.</em></dd>
+ <dt><a href="/en-US/docs/WebRTC">WebRTC</a></dt>
+ <dd><em>L'acronimo RTC in WebRTC sta per Real-Time Communications, technology (Comunicazioni in Tempo Reali) che abilitano lo streaming audio/video e la condivisione di dati tra i browser e i clienti (peers).</em></dd>
+</dl>
+</div>
+</div>
+
+<p> </p>
diff --git a/files/it/web/guide/html/categorie_di_contenuto/index.html b/files/it/web/guide/html/categorie_di_contenuto/index.html
new file mode 100644
index 0000000000..94eae32320
--- /dev/null
+++ b/files/it/web/guide/html/categorie_di_contenuto/index.html
@@ -0,0 +1,141 @@
+---
+title: Categorie di contenuto
+slug: Web/Guide/HTML/Categorie_di_contenuto
+translation_of: Web/Guide/HTML/Content_categories
+---
+<p>Ciascun elemento HTML deve rispettare le regole che definiscono che tipo di contenuto può avere. <span id="result_box" lang="it"><span class="hps">Queste regole sono</span> <span class="hps">raggruppate in</span> <span class="hps">modelli di contenuto</span> <span class="hps">comuni a</span> <span class="hps">diversi elementi</span><span>.</span></span> Ogni elemento HTML appartiene a nessuno, uno, o diversi modelli di contenuto, ognuno dei quali possiede regole che devono essere seguite in un documento conforme HTML.</p>
+
+<p>Vi sono tre tipi di categorie di contenuto:</p>
+
+<ul>
+ <li>Le categorie del contenuto principale, che descrivono le regole comuni per il contenuto, delle quali fanno parte molti elementi</li>
+ <li>Le categorie relative alla figura del contenuto, che descrivono le regole comuni per gli elementi relativi alla figura</li>
+ <li>Le categorie dei contenuti specifici, che descrivono categorie non frequenti, condivise solo da pochi elementi, a volte solo in contesti particolari.</li>
+</ul>
+
+<div style="width: 50%;"><a href="/@api/deki/files/6244/=Content_categories_venn.png" title="Content_categories_venn.png"><img alt="Content_categories_venn.png" class="default internal" src="/@api/deki/files/6244/=Content_categories_venn.png?size=webview" style="height: 200px; width: 350px;"></a></div>
+
+<h2 id="Categorie_di_contenuto_principale">Categorie di contenuto principale</h2>
+
+<h3 id="Contenuto_di_Metadati">Contenuto di Metadati</h3>
+
+<p>Gli elementi appartenenti alla categoria dei <em>metadati</em> modificano la presentazione o il comportamento del resto del documento, impostano collegamenti ad altri documenti, o comunicano altre informazioni <em>non in linea</em>.</p>
+
+<p>Gli elementi che appartengono a questa categoria sono {{HTMLElement("base")}}, {{HTMLElement("command")}}, {{HTMLElement("link")}}, {{HTMLElement("meta")}}, {{HTMLElement("noscript")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} e {{HTMLElement("title")}}.</p>
+
+<h3 id="Contenuto_di_flusso"><a name="flow_content">Contenuto di flusso</a></h3>
+
+<p>Gli elementi che appartengono alla catogoria dei contenuti di flusso tipicamente contengono testo o altri contenuti. Essi sono: {{HTMLElement("a")}}, {{HTMLElement("abbr")}}, {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{HTMLElement("command")}}, {{HTMLElement("datalist")}}, {{HTMLElement("del")}}, {{HTMLElement("details")}}, {{HTMLElement("dfn")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("hr")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("ins")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("map")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("menu")}}, {{HTMLElement("meter")}}, {{HTMLElement("nav")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("ol")}}, {{HTMLElement("output")}}, {{HTMLElement("p")}}, {{HTMLElement("pre")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("section")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("svg")}}, {{HTMLElement("table")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("ul")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} e Text.</p>
+
+<p>Pochi altri elementi appartengono a questa categoria, ma solo in determinale condizioni:</p>
+
+<ul>
+ <li>{{HTMLElement("area")}}, se discendente da un elemento {{HTMLElement("map")}}</li>
+ <li>{{HTMLElement("link")}}, se presente l'attributo <a href="/en-US/docs/HTML/Global_attributes#itemprop" title="HTML/Global attributes#itemprop"><strong>itemprop</strong></a></li>
+ <li>{{HTMLElement("meta")}}, se presente l'attributo <a href="/en-US/docs/HTML/Global_attributes#itemprop" title="HTML/Global attributes#itemprop"><strong>itemprop</strong></a></li>
+ <li>{{HTMLElement("style")}}, se l'attributo {{htmlattrxref("scoped","style")}} è  presente</li>
+</ul>
+
+<h3 id="Contenuto_di_sezione">Contenuto di sezione</h3>
+
+<p>Gli elementi che appartengono ai modelli di contenuti di sezione creano una <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">sezione nell'attuale contorno</a> che definisce gli'ambiti degli elementi  {{HTMLElement("header")}} , degli elementi {{HTMLElement("footer")}} , e dei <a href="#heading_content" title="#heading content">contenuti di intestazione</a>.</p>
+
+<p>Elementi appartenenti a questa categoria sono {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} e {{HTMLElement("section")}}. </p>
+
+<div class="note">
+<p><em>Nota:</em> non confondere questo modello di contenuto con la categoria  <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document#sectioning_root" title="Sections and Outlines of an HTML5 document#sectioning root">sezione radice</a> , che isola il suo contenuto dal regolare contorno.</p>
+</div>
+
+<h3 id="Contenuto_di_intestazione">Contenuto di intestazione</h3>
+
+<p>Il contenuto di intestazione definisce il titolo della sezione, se contrassegnato da un esplicito elemento di <a href="#sectioning_content" title="#sectioning content">contenuto di intestazione</a>  o implicitamente definito da un contenuto di intestazione.</p>
+
+<p>Elementi appartenenti a questa categoria sono {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} e {{HTMLElement("hgroup")}}.</p>
+
+<div class="note">
+<p><em>Nota:</em> Consideralo possibilmente come un contenuto di intestazione, l' {{HTMLElement("header")}} non è un contenuto di intestazione.</p>
+</div>
+
+<h3 id="Contenuto_di_enunciazione">Contenuto di enunciazione</h3>
+
+<p>Il contenuto di enunciazione definisce il testo e la marcatura che essa contiene.Si appropria del contenuto di Enunciazione dei paragrafi.</p>
+
+<p>Elementi appartenenti a questa categoria sono {{HTMLElement("abbr")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{HTMLElement("command")}}, {{HTMLElement("datalist")}}, {{HTMLElement("dfn")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("meter")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} e il puro text (che non consiste soltanto nello spazio bianco dei caratteri).</p>
+
+<p>Molte altri elementi appartengono da questa categoria,ma solo se vengono soddisfatte delle specifiche condizioni:</p>
+
+<ul>
+ <li>{{HTMLElement("a")}}, se contengono solo contenuti di Enunciazione</li>
+ <li>{{HTMLElement("area")}},se è il discendente di un elemento {{HTMLElement("map")}}</li>
+ <li>{{HTMLElement("del")}},se contiene soltanto contenuto di Enunciazione</li>
+ <li>{{HTMLElement("ins")}}, se contiene soltanto contenuto di Enunciazione</li>
+ <li>{{HTMLElement("link")}}, se l'attributo <a href="/en-US/docs/HTML/Global_attributes#itemprop" title="HTML/Global attributes#itemprop"><strong>itemprop</strong></a> è present</li>
+ <li>{{HTMLElement("map")}}, se contiene soltanto contenuto di Enunciazione</li>
+ <li>{{HTMLElement("meta")}}, se l'attributo <a href="/en-US/docs/HTML/Global_attributes#itemprop" title="HTML/Global attributes#itemprop"><strong>itemprop</strong></a> è presente</li>
+</ul>
+
+<h3 id="Contenuto_integrato">Contenuto integrato</h3>
+
+<p>Il contenuto integrato importa un'altra risorsa o inserisce contenuto da un'altro linguaggio di marcatura o un namespace nel documento.Elementi che appartengono a questa categoria includono: {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{HTMLElement("svg")}}, {{HTMLElement("video")}}.</p>
+
+<h3 id="Contenuto_interattivo"><a name="interactive_content">Contenuto interattivo</a></h3>
+
+<p>Il contenuto interattivo include elementi che sono speficatamente progettati per l'interazione dell'utente. Elementi che provengono da questa categoria includono: {{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, e {{HTMLElement("textarea")}}.<br>
+ Alcuni elementi appartengono a questa categoria solo sotto  specifiche condizioni:</p>
+
+<ul>
+ <li>{{HTMLElement("audio")}}, se l'attributo {{htmlattrxref("controls", "audio")}} è presente</li>
+ <li>{{HTMLElement("img")}}, se l'attributo {{htmlattrxref("usemap", "img")}} è presente</li>
+ <li>{{HTMLElement("input")}}, se l'attributo {{htmlattrxref("type", "input")}} non è nascosto</li>
+ <li>{{HTMLElement("menu")}}, se l'attributo {{htmlattrxref("type", "menu")}} è nella barra degli strumenti</li>
+ <li>{{HTMLElement("object")}}, se l'attributo {{htmlattrxref("usemap", "object")}} è presente</li>
+ <li>{{HTMLElement("video")}}, se l'attributo {{htmlattrxref("controls", "video")}} è presente</li>
+</ul>
+
+<h3 id="Contenuto_modulo-associato">Contenuto modulo-associato</h3>
+
+<p>Il contento modulo-associato comprende elementi che ha un modulo beneficiario ,mostrato attraverso l'attributo <strong>form</strong>.Un beneficiario di un modulo  è o l'elemento contenente {{HTMLElement("form")}} o è l' elemento che ha id specificato nell'attributo <strong>form</strong>.</p>
+
+<ul>
+ <li>{{HTMLElement("button")}}</li>
+ <li>{{HTMLElement("fieldset")}}</li>
+ <li>{{HTMLElement("input")}}</li>
+ <li>{{HTMLElement("keygen")}}</li>
+ <li>{{HTMLElement("label")}}</li>
+ <li>{{HTMLElement("meter")}}</li>
+ <li>{{HTMLElement("object")}}</li>
+ <li>{{HTMLElement("output")}}</li>
+ <li>{{HTMLElement("progress")}}</li>
+ <li>{{HTMLElement("select")}}</li>
+ <li>{{HTMLElement("textarea")}}</li>
+</ul>
+
+<p> Questa categoria contiene diverse altre sotto-categorie:</p>
+
+<dl>
+ <dt><a name="Form_listed">elencati</a></dt>
+ <dd>Elementi che sono elencati nel <a href="/en-US/docs/DOM/form.elements" title="DOM/form.elements">elementi.modulo</a> ed il fieldset.Collezioni di elementi IDL. Contiene{{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}}, e {{HTMLElement("textarea")}}.</dd>
+ <dt><a name="Form_labelable">l'abilità labelable</a></dt>
+ <dd>Elementi che possono essere associati con elementi {{HTMLElement("label")}}. Contiene {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("meter")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, e {{HTMLElement("textarea")}}.</dd>
+ <dt><a name="Form_submittable">Dati Inviabili tramite un <strong>form</strong></a></dt>
+ <dd>Elementi che possono essere usati per costruire il modulo dati quando il modulo é stato inviato. Contiene {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, e {{HTMLElement("textarea")}}.</dd>
+ <dt><a name="Form_resettable">reset dei dati di un form </a></dt>
+ <dd>Elementi che possono essere usati per portare il <strong>form</strong> al reset delle impostazioni originarie.Contiene {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("output")}},{{HTMLElement("select")}}, e {{HTMLElement("textarea")}}.</dd>
+</dl>
+
+<h2 id="Modello_di_contenuto_trasparente">Modello di contenuto trasparente</h2>
+
+<p>Se un elemento ha un modello di contenuto trasparente,allora i suoi contenuti possono essere strutturati come quelli validi in  HTML5, perfino se l'elemento trasparente era stato rimosso e rimpiazzato da elemento figlio.</p>
+
+<p>Per esempio, gli elementi {{HTMLElement("del")}} e {{HTMLELement("ins")}}sono trasparenti:</p>
+
+<pre>&lt;p&gt;Tratteniamo queste verità per essere&lt;del&gt;&lt;em&gt;consacrate &amp;amp; innegabili&lt;/em&gt;&lt;/del&gt; &lt;ins&gt;chiare&lt;/ins&gt;.&lt;/p&gt;
+</pre>
+
+<p>Se quegli elementi verranno rimossi, questo frammento potrebbe essere ancora un valido HTML (anche se non in corretto italiano).</p>
+
+<pre>&lt;p&gt;Tratteniamo queste verità per essere&lt;del&gt;&lt;em&gt;consacrate &amp;amp; innegabili&lt;/em&gt;&lt;/del&gt; &lt;ins&gt;chiare&lt;/ins&gt;.&lt;/p&gt;</pre>
+
+<h2 id="Altri_modelli_di_contenuto">Altri modelli di contenuto</h2>
+
+<p>Sezione radice.</p>
diff --git a/files/it/web/guide/html/editable_content/index.html b/files/it/web/guide/html/editable_content/index.html
new file mode 100644
index 0000000000..e878289a2c
--- /dev/null
+++ b/files/it/web/guide/html/editable_content/index.html
@@ -0,0 +1,216 @@
+---
+title: Making content editable
+slug: Web/Guide/HTML/Editable_content
+translation_of: Web/Guide/HTML/Editable_content
+---
+<p><span class="seoSummary">Inprogress! In HTML, any element can be editable. By using some JavaScript event handlers, you can transform your web page into a full and fast rich text editor. This article provides some information about this functionality.</span></p>
+
+<h2 id="How_does_it_work">How does it work?</h2>
+
+<p>All you have to do is set the {{htmlattrxref("contenteditable")}} attribute on nearly any HTML element to make it editable.</p>
+
+<p>Here's a simple example which creates a {{HTMLElement("div")}} element whose contents the user can edit.</p>
+
+<pre class="brush: html">&lt;div contenteditable="true"&gt;
+  This text can be edited by the user.
+&lt;/div&gt;</pre>
+
+<p>Here's the above HTML in action:</p>
+
+<p>{{ EmbedLiveSample('How_does_it_work') }}</p>
+
+<h2 id="Executing_commands">Executing commands</h2>
+
+<p>When an HTML element has <code>contenteditable</code> set to <code>true</code>, the {{ domxref("document.execCommand()") }} method is made available. This lets you run <a href="/en-US/docs/Web/API/document.execCommand#Commands">commands</a> to manipulate the contents of the editable region. Most commands affect the document's selection by, for example, applying a style to the text (bold, italics, etc), while others insert new elements (like adding a link) or affect an entire line (indenting). When using <code>contentEditable</code>, calling <code>execCommand()</code> will affect the currently active editable element.</p>
+
+<h2 id="Differences_in_markup_generation">Differences in markup generation</h2>
+
+<p>Use of <code>contenteditable</code> across different browsers has been painful for a long time because of the differences in generated markup between browsers. For example, even something as simple as what happens when you press Enter/Return to create a new line of text inside an editable element was handled differently across the major browsers (Firefox inserted {{htmlelement("br")}} elements, IE/Opera used {{htmlelement("p")}}, Chrome/Safari used {{htmlelement("div")}}).</p>
+
+<p>Fortunately, in modern browsers things are somewhat more consistent. As of <a href="/en-US/docs/Mozilla/Firefox/Releases/55">Firefox 55</a>, Firefox has been updated to wrap the separate lines in {{htmlelement("div")}} elements, matching the behavior of Chrome, modern Opera, Edge, and Safari.</p>
+
+<p>Try it out in the above example.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Internet Explorer, which is no longer being developed, uses {{htmlelement("p")}} elements instead of <code>&lt;div&gt;</code>.</p>
+</div>
+
+<p>If you want to use a different paragraph separator, the above browsers all support {{domxref("document.execCommand")}}, which provides a <code>DefaultParagraphSeparator</code> command to allow you to change it. For example, to use {{htmlelement("p")}} elements:</p>
+
+<pre class="language-js"><code class="language-js">document<span class="punctuation token">.</span><span class="function token">execCommand</span><span class="punctuation token">(</span><span class="string token">"DefaultParagraphSeparator"</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">,</span> <span class="string token">"p"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Security">Security</h2>
+
+<p>For security reasons, Firefox doesn't let JavaScript code use clipboard related features (copy, paste, etc.) by default. You can enable them by setting the preferences shown below using <code>about:config</code>:</p>
+
+<pre class="code">user_pref("capability.policy.policynames", "allowclipboard");
+user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org");
+user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess");
+user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");</pre>
+
+<h2 id="Example_A_simple_but_complete_rich_text_editor">Example: A simple but complete rich text editor</h2>
+
+<div style="height: 500px; width: auto; overflow: auto;">
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;Rich Text Editor&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+var oDoc, sDefTxt;
+
+function initDoc() {
+  oDoc = document.getElementById("textBox");
+  sDefTxt = oDoc.innerHTML;
+  if (document.compForm.switchMode.checked) { setDocMode(true); }
+}
+
+function formatDoc(sCmd, sValue) {
+  if (validateMode()) { document.execCommand(sCmd, false, sValue); oDoc.focus(); }
+}
+
+function validateMode() {
+  if (!document.compForm.switchMode.checked) { return true ; }
+  alert("Uncheck \"Show HTML\".");
+  oDoc.focus();
+  return false;
+}
+
+function setDocMode(bToSource) {
+  var oContent;
+  if (bToSource) {
+    oContent = document.createTextNode(oDoc.innerHTML);
+    oDoc.innerHTML = "";
+    var oPre = document.createElement("pre");
+    oDoc.contentEditable = false;
+    oPre.id = "sourceText";
+    oPre.contentEditable = true;
+    oPre.appendChild(oContent);
+    oDoc.appendChild(oPre);
+  } else {
+    if (document.all) {
+      oDoc.innerHTML = oDoc.innerText;
+    } else {
+      oContent = document.createRange();
+      oContent.selectNodeContents(oDoc.firstChild);
+      oDoc.innerHTML = oContent.toString();
+    }
+    oDoc.contentEditable = true;
+  }
+  oDoc.focus();
+}
+
+function printDoc() {
+  if (!validateMode()) { return; }
+  var oPrntWin = window.open("","_blank","width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes");
+  oPrntWin.document.open();
+  oPrntWin.document.write("&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;title&gt;Print&lt;\/title&gt;&lt;\/head&gt;&lt;body onload=\"print();\"&gt;" + oDoc.innerHTML + "&lt;\/body&gt;&lt;\/html&gt;");
+  oPrntWin.document.close();
+}
+&lt;/script&gt;
+&lt;style type="text/css"&gt;
+.intLink { cursor: pointer; }
+img.intLink { border: 0; }
+#toolBar1 select { font-size:10px; }
+#textBox {
+  width: 540px;
+  height: 200px;
+  border: 1px #000000 solid;
+  padding: 12px;
+  overflow: scroll;
+}
+#textBox #sourceText {
+  padding: 0;
+  margin: 0;
+  min-width: 498px;
+  min-height: 200px;
+}
+#editMode label { cursor: pointer; }
+&lt;/style&gt;
+&lt;/head&gt;
+&lt;body onload="initDoc();"&gt;
+&lt;form name="compForm" method="post" action="sample.php" onsubmit="if(validateMode()){this.myDoc.value=oDoc.innerHTML;return true;}return false;"&gt;
+&lt;input type="hidden" name="myDoc"&gt;
+&lt;div id="toolBar1"&gt;
+&lt;select onchange="formatDoc('formatblock',this[this.selectedIndex].value);this.selectedIndex=0;"&gt;
+&lt;option selected&gt;- formatting -&lt;/option&gt;
+&lt;option value="h1"&gt;Title 1 &amp;lt;h1&amp;gt;&lt;/option&gt;
+&lt;option value="h2"&gt;Title 2 &amp;lt;h2&amp;gt;&lt;/option&gt;
+&lt;option value="h3"&gt;Title 3 &amp;lt;h3&amp;gt;&lt;/option&gt;
+&lt;option value="h4"&gt;Title 4 &amp;lt;h4&amp;gt;&lt;/option&gt;
+&lt;option value="h5"&gt;Title 5 &amp;lt;h5&amp;gt;&lt;/option&gt;
+&lt;option value="h6"&gt;Subtitle &amp;lt;h6&amp;gt;&lt;/option&gt;
+&lt;option value="p"&gt;Paragraph &amp;lt;p&amp;gt;&lt;/option&gt;
+&lt;option value="pre"&gt;Preformatted &amp;lt;pre&amp;gt;&lt;/option&gt;
+&lt;/select&gt;
+&lt;select onchange="formatDoc('fontname',this[this.selectedIndex].value);this.selectedIndex=0;"&gt;
+&lt;option class="heading" selected&gt;- font -&lt;/option&gt;
+&lt;option&gt;Arial&lt;/option&gt;
+&lt;option&gt;Arial Black&lt;/option&gt;
+&lt;option&gt;Courier New&lt;/option&gt;
+&lt;option&gt;Times New Roman&lt;/option&gt;
+&lt;/select&gt;
+&lt;select onchange="formatDoc('fontsize',this[this.selectedIndex].value);this.selectedIndex=0;"&gt;
+&lt;option class="heading" selected&gt;- size -&lt;/option&gt;
+&lt;option value="1"&gt;Very small&lt;/option&gt;
+&lt;option value="2"&gt;A bit small&lt;/option&gt;
+&lt;option value="3"&gt;Normal&lt;/option&gt;
+&lt;option value="4"&gt;Medium-large&lt;/option&gt;
+&lt;option value="5"&gt;Big&lt;/option&gt;
+&lt;option value="6"&gt;Very big&lt;/option&gt;
+&lt;option value="7"&gt;Maximum&lt;/option&gt;
+&lt;/select&gt;
+&lt;select onchange="formatDoc('forecolor',this[this.selectedIndex].value);this.selectedIndex=0;"&gt;
+&lt;option class="heading" selected&gt;- color -&lt;/option&gt;
+&lt;option value="red"&gt;Red&lt;/option&gt;
+&lt;option value="blue"&gt;Blue&lt;/option&gt;
+&lt;option value="green"&gt;Green&lt;/option&gt;
+&lt;option value="black"&gt;Black&lt;/option&gt;
+&lt;/select&gt;
+&lt;select onchange="formatDoc('backcolor',this[this.selectedIndex].value);this.selectedIndex=0;"&gt;
+&lt;option class="heading" selected&gt;- background -&lt;/option&gt;
+&lt;option value="red"&gt;Red&lt;/option&gt;
+&lt;option value="green"&gt;Green&lt;/option&gt;
+&lt;option value="black"&gt;Black&lt;/option&gt;
+&lt;/select&gt;
+&lt;/div&gt;
+&lt;div id="toolBar2"&gt;
+&lt;img class="intLink" title="Clean" onclick="if(validateMode()&amp;&amp;confirm('Are you sure?')){oDoc.innerHTML=sDefTxt};" src="data:image/gif;base64,R0lGODlhFgAWAIQbAD04KTRLYzFRjlldZl9vj1dusY14WYODhpWIbbSVFY6O7IOXw5qbms+wUbCztca0ccS4kdDQjdTLtMrL1O3YitHa7OPcsd/f4PfvrvDv8Pv5xv///////////////////yH5BAEKAB8ALAAAAAAWABYAAAV84CeOZGmeaKqubMteyzK547QoBcFWTm/jgsHq4rhMLoxFIehQQSAWR+Z4IAyaJ0kEgtFoLIzLwRE4oCQWrxoTOTAIhMCZ0tVgMBQKZHAYyFEWEV14eQ8IflhnEHmFDQkAiSkQCI2PDC4QBg+OAJc0ewadNCOgo6anqKkoIQA7" /&gt;
+&lt;img class="intLink" title="Print" onclick="printDoc();" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oEBxcZFmGboiwAAAAIdEVYdENvbW1lbnQA9syWvwAAAuFJREFUOMvtlUtsjFEUx//n3nn0YdpBh1abRpt4LFqtqkc3jRKkNEIsiIRIBBEhJJpKlIVo4m1RRMKKjQiRMJRUqUdKPT71qpIpiRKPaqdF55tv5vvusZjQTjOlseUkd3Xu/3dPzusC/22wtu2wRn+jG5So/OCDh8ycMJDflehMlkJkVK7KUYN+ufzA/RttH76zaVocDptRxzQtNi3mRWuPc+6cKtlXZ/sddP2uu9uXlmYXZ6Qm8v4Tz8lhF1H+zDQXt7S8oLMXtbF4e8QaFHjj3kbP2MzkktHpiTjp9VH6iHiA+whtAsX5brpwueMGdONdf/2A4M7ukDs1JW662+XkqTkeUoqjKtOjm2h53YFL15pSJ04Zc94wdtibr26fXlC2mzRvBccEbz2kiRFD414tKMlEZbVGT33+qCoHgha81SWYsew0r1uzfNylmtpx80pngQQ91LwVk2JGvGnfvZG6YcYRAT16GFtW5kKKfo1EQLtfh5Q2etT0BIWF+aitq4fDbk+ImYo1OxvGF03waFJQvBCkvDffRyEtxQiFFYgAZTHS0zwAGD7fG5TNnYNTp8/FzvGwJOfmgG7GOx0SAKKgQgDMgKBI0NJGMEImpGDk5+WACEwEd0ywblhGUZ4Hw5OdUekRBLT7DTgdEgxACsIznx8zpmWh7k4rkpJcuHDxCul6MDsmmBXDlWCH2+XozSgBnzsNCEE4euYV4pwCpsWYPW0UHDYBKSWu1NYjENDReqtKjwn2+zvtTc1vMSTB/mvev/WEYSlASsLimcOhOBJxw+N3aP/SjefNL5GePZmpu4kG7OPr1+tOfPyUu3BecWYKcwQcDFmwFKAUo90fhKDInBCAmvqnyMgqUEagQwCoHBDc1rjv9pIlD8IbVkz6qYViIBQGTJPx4k0XpIgEZoRN1Da0cij4VfR0ta3WvBXH/rjdCufv6R2zPgPH/e4pxSBCpeatqPrjNiso203/5s/zA171Mv8+w1LOAAAAAElFTkSuQmCC"&gt;
+&lt;img class="intLink" title="Undo" onclick="formatDoc('undo');" src="data:image/gif;base64,R0lGODlhFgAWAOMKADljwliE33mOrpGjuYKl8aezxqPD+7/I19DV3NHa7P///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARR8MlJq7046807TkaYeJJBnES4EeUJvIGapWYAC0CsocQ7SDlWJkAkCA6ToMYWIARGQF3mRQVIEjkkSVLIbSfEwhdRIH4fh/DZMICe3/C4nBQBADs=" /&gt;
+&lt;img class="intLink" title="Redo" onclick="formatDoc('redo');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAB1ChDljwl9vj1iE34Kl8aPD+7/I1////yH5BAEKAAcALAAAAAAWABYAAANKeLrc/jDKSesyphi7SiEgsVXZEATDICqBVJjpqWZt9NaEDNbQK1wCQsxlYnxMAImhyDoFAElJasRRvAZVRqqQXUy7Cgx4TC6bswkAOw==" /&gt;
+&lt;img class="intLink" title="Remove formatting" onclick="formatDoc('removeFormat')" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9oECQMCKPI8CIIAAAAIdEVYdENvbW1lbnQA9syWvwAAAuhJREFUOMtjYBgFxAB501ZWBvVaL2nHnlmk6mXCJbF69zU+Hz/9fB5O1lx+bg45qhl8/fYr5it3XrP/YWTUvvvk3VeqGXz70TvbJy8+Wv39+2/Hz19/mGwjZzuTYjALuoBv9jImaXHeyD3H7kU8fPj2ICML8z92dlbtMzdeiG3fco7J08foH1kurkm3E9iw54YvKwuTuom+LPt/BgbWf3//sf37/1/c02cCG1lB8f//f95DZx74MTMzshhoSm6szrQ/a6Ir/Z2RkfEjBxuLYFpDiDi6Af///2ckaHBp7+7wmavP5n76+P2ClrLIYl8H9W36auJCbCxM4szMTJac7Kza////R3H1w2cfWAgafPbqs5g7D95++/P1B4+ECK8tAwMDw/1H7159+/7r7ZcvPz4fOHbzEwMDwx8GBgaGnNatfHZx8zqrJ+4VJBh5CQEGOySEua/v3n7hXmqI8WUGBgYGL3vVG7fuPK3i5GD9/fja7ZsMDAzMG/Ze52mZeSj4yu1XEq/ff7W5dvfVAS1lsXc4Db7z8C3r8p7Qjf///2dnZGxlqJuyr3rPqQd/Hhyu7oSpYWScylDQsd3kzvnH738wMDzj5GBN1VIWW4c3KDon7VOvm7S3paB9u5qsU5/x5KUnlY+eexQbkLNsErK61+++VnAJcfkyMTIwffj0QwZbJDKjcETs1Y8evyd48toz8y/ffzv//vPP4veffxpX77z6l5JewHPu8MqTDAwMDLzyrjb/mZm0JcT5Lj+89+Ybm6zz95oMh7s4XbygN3Sluq4Mj5K8iKMgP4f0////fv77//8nLy+7MCcXmyYDAwODS9jM9tcvPypd35pne3ljdjvj26+H2dhYpuENikgfvQeXNmSl3tqepxXsqhXPyc666s+fv1fMdKR3TK72zpix8nTc7bdfhfkEeVbC9KhbK/9iYWHiErbu6MWbY/7//8/4//9/pgOnH6jGVazvFDRtq2VgiBIZrUTIBgCk+ivHvuEKwAAAAABJRU5ErkJggg=="&gt;
+&lt;img class="intLink" title="Bold" onclick="formatDoc('bold');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAInhI+pa+H9mJy0LhdgtrxzDG5WGFVk6aXqyk6Y9kXvKKNuLbb6zgMFADs=" /&gt;
+&lt;img class="intLink" title="Italic" onclick="formatDoc('italic');" src="data:image/gif;base64,R0lGODlhFgAWAKEDAAAAAF9vj5WIbf///yH5BAEAAAMALAAAAAAWABYAAAIjnI+py+0Po5x0gXvruEKHrF2BB1YiCWgbMFIYpsbyTNd2UwAAOw==" /&gt;
+&lt;img class="intLink" title="Underline" onclick="formatDoc('underline');" src="data:image/gif;base64,R0lGODlhFgAWAKECAAAAAF9vj////////yH5BAEAAAIALAAAAAAWABYAAAIrlI+py+0Po5zUgAsEzvEeL4Ea15EiJJ5PSqJmuwKBEKgxVuXWtun+DwxCCgA7" /&gt;
+&lt;img class="intLink" title="Left align" onclick="formatDoc('justifyleft');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JMGELkGYxo+qzl4nKyXAAAOw==" /&gt;
+&lt;img class="intLink" title="Center align" onclick="formatDoc('justifycenter');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIfhI+py+0Po5y02ouz3jL4D4JOGI7kaZ5Bqn4sycVbAQA7" /&gt;
+&lt;img class="intLink" title="Right align" onclick="formatDoc('justifyright');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JQGDLkGYxouqzl43JyVgAAOw==" /&gt;
+&lt;img class="intLink" title="Numbered list" onclick="formatDoc('insertorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAADljwliE35GjuaezxtHa7P///////yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKSespwjoRFvggCBUBoTFBeq6QIAysQnRHaEOzyaZ07Lu9lUBnC0UGQU1K52s6n5oEADs=" /&gt;
+&lt;img class="intLink" title="Dotted list" onclick="formatDoc('insertunorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAAB1ChF9vj1iE33mOrqezxv///////yH5BAEAAAcALAAAAAAWABYAAAMyeLrc/jDKSesppNhGRlBAKIZRERBbqm6YtnbfMY7lud64UwiuKnigGQliQuWOyKQykgAAOw==" /&gt;
+&lt;img class="intLink" title="Quote" onclick="formatDoc('formatblock','blockquote');" src="data:image/gif;base64,R0lGODlhFgAWAIQXAC1NqjFRjkBgmT9nqUJnsk9xrFJ7u2R9qmKBt1iGzHmOrm6Sz4OXw3Odz4Cl2ZSnw6KxyqO306K63bG70bTB0rDI3bvI4P///////////////////////////////////yH5BAEKAB8ALAAAAAAWABYAAAVP4CeOZGmeaKqubEs2CekkErvEI1zZuOgYFlakECEZFi0GgTGKEBATFmJAVXweVOoKEQgABB9IQDCmrLpjETrQQlhHjINrTq/b7/i8fp8PAQA7" /&gt;
+&lt;img class="intLink" title="Delete indentation" onclick="formatDoc('outdent');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAAAAADljwliE35GjuaezxtDV3NHa7P///yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKCQG9F2i7u8agQgyK1z2EIBil+TWqEMxhMczsYVJ3e4ahk+sFnAgtxSQDqWw6n5cEADs=" /&gt;
+&lt;img class="intLink" title="Add indentation" onclick="formatDoc('indent');" src="data:image/gif;base64,R0lGODlhFgAWAOMIAAAAADljwl9vj1iE35GjuaezxtDV3NHa7P///////////////////////////////yH5BAEAAAgALAAAAAAWABYAAAQ7EMlJq704650B/x8gemMpgugwHJNZXodKsO5oqUOgo5KhBwWESyMQsCRDHu9VOyk5TM9zSpFSr9gsJwIAOw==" /&gt;
+&lt;img class="intLink" title="Hyperlink" onclick="var sLnk=prompt('Write the URL here','http:\/\/');if(sLnk&amp;&amp;sLnk!=''&amp;&amp;sLnk!='http://'){formatDoc('createlink',sLnk)}" src="data:image/gif;base64,R0lGODlhFgAWAOMKAB1ChDRLY19vj3mOrpGjuaezxrCztb/I19Ha7Pv8/f///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARY8MlJq7046827/2BYIQVhHg9pEgVGIklyDEUBy/RlE4FQF4dCj2AQXAiJQDCWQCAEBwIioEMQBgSAFhDAGghGi9XgHAhMNoSZgJkJei33UESv2+/4vD4TAQA7" /&gt;
+&lt;img class="intLink" title="Cut" onclick="formatDoc('cut');" src="data:image/gif;base64,R0lGODlhFgAWAIQSAB1ChBFNsRJTySJYwjljwkxwl19vj1dusYODhl6MnHmOrpqbmpGjuaezxrCztcDCxL/I18rL1P///////////////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAVu4CeOZGmeaKqubDs6TNnEbGNApNG0kbGMi5trwcA9GArXh+FAfBAw5UexUDAQESkRsfhJPwaH4YsEGAAJGisRGAQY7UCC9ZAXBB+74LGCRxIEHwAHdWooDgGJcwpxDisQBQRjIgkDCVlfmZqbmiEAOw==" /&gt;
+&lt;img class="intLink" title="Copy" onclick="formatDoc('copy');" src="data:image/gif;base64,R0lGODlhFgAWAIQcAB1ChBFNsTRLYyJYwjljwl9vj1iE31iGzF6MnHWX9HOdz5GjuYCl2YKl8ZOt4qezxqK63aK/9KPD+7DI3b/I17LM/MrL1MLY9NHa7OPs++bx/Pv8/f///////////////yH5BAEAAB8ALAAAAAAWABYAAAWG4CeOZGmeaKqubOum1SQ/kPVOW749BeVSus2CgrCxHptLBbOQxCSNCCaF1GUqwQbBd0JGJAyGJJiobE+LnCaDcXAaEoxhQACgNw0FQx9kP+wmaRgYFBQNeAoGihCAJQsCkJAKOhgXEw8BLQYciooHf5o7EA+kC40qBKkAAAGrpy+wsbKzIiEAOw==" /&gt;
+&lt;img class="intLink" title="Paste" onclick="formatDoc('paste');" src="data:image/gif;base64,R0lGODlhFgAWAIQUAD04KTRLY2tXQF9vj414WZWIbXmOrpqbmpGjudClFaezxsa0cb/I1+3YitHa7PrkIPHvbuPs+/fvrvv8/f///////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAWN4CeOZGmeaKqubGsusPvBSyFJjVDs6nJLB0khR4AkBCmfsCGBQAoCwjF5gwquVykSFbwZE+AwIBV0GhFog2EwIDchjwRiQo9E2Fx4XD5R+B0DDAEnBXBhBhN2DgwDAQFjJYVhCQYRfgoIDGiQJAWTCQMRiwwMfgicnVcAAAMOaK+bLAOrtLUyt7i5uiUhADs=" /&gt;
+&lt;/div&gt;
+&lt;div id="textBox" contenteditable="true"&gt;&lt;p&gt;Lorem ipsum&lt;/p&gt;&lt;/div&gt;
+&lt;p id="editMode"&gt;&lt;input type="checkbox" name="switchMode" id="switchBox" onchange="setDocMode(this.checked);" /&gt; &lt;label for="switchBox"&gt;Show HTML&lt;/label&gt;&lt;/p&gt;
+&lt;p&gt;&lt;input type="submit" value="Send" /&gt;&lt;/p&gt;
+&lt;/form&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<div class="note"><strong>Note:</strong> if you want to see how to standardize the creation and the insertion of your editor in your page, please see our <a class="internal" href="/@api/deki/files/6243/=rich-text-editor.zip" title="rich-text-editor.zip">more complete rich-text editor example</a>.</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.contentEditable")}}</li>
+ <li>The {{htmlattrxref("contenteditable")}} global attribute</li>
+ <li><a href="/en-US/docs/Mozilla/Projects/Midas">Midas</a> (the scriptable text editor component)</li>
+ <li>{{cssxref("caret-color")}}, which lets you set the color of the text insertion caret</li>
+</ul>
diff --git a/files/it/web/guide/html/editable_content/rich-text_editing_in_mozilla/index.html b/files/it/web/guide/html/editable_content/rich-text_editing_in_mozilla/index.html
new file mode 100644
index 0000000000..0beccd9e00
--- /dev/null
+++ b/files/it/web/guide/html/editable_content/rich-text_editing_in_mozilla/index.html
@@ -0,0 +1,420 @@
+---
+title: Rich-Text Editing in Mozilla
+slug: Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla
+translation_of: Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla
+---
+<h3 id="Introduction" name="Introduction">Introduzione</h3>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Mozilla 1.3 introduce un'implementazione della caratteristica designMode di Microsoft<sup>®</sup> Internet Explorer. In Mozilla 1.3, il supporto al rich-text editing supporta la caratteristica designMode che trasforma i documenti HTML in editor rich-text. Partendo da Firefox 3, Mozilla supporta anche l'attributo <code style="color: rgb(37, 34, 29); font-weight: inherit;">contentEditable</code> di Internet Explorer che permette a qualsiasi elemento di diventare un elemento modificabile o non (la seconda caratteristica viene usata per prevenire cambiamenti ad un elemento che non deve essere modificato).</p>
+
+<h3 id="Setting_Up_Rich-Text_Editing" name="Setting_Up_Rich-Text_Editing">Impostare il Rich-Text Editing</h3>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Il Rich-text editing viene inizializzato tramite la proprietà <code style="color: rgb(37, 34, 29); font-weight: inherit;">designMode</code> di un documento ad "On", come un documento all'interno di un iframe. Una volta che <code style="color: rgb(37, 34, 29); font-weight: inherit;">designMode</code> viene impostato ad "On", il documento diventa un'area di rich-text editing e l'utente può digitare dentro questa come se fosse una textarea. The most basic keyboard commands such as copy and paste are available, all others need to be implemented by the website.</p>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Allo stesso modo, impostando <code style="color: rgb(37, 34, 29); font-weight: inherit;">contentEditable</code> a "true" ti permette di rendere modificabili singoli elementi di un documento.</p>
+
+<h3 id="Executing_Commands" name="Executing_Commands">Eseguire i Comandi</h3>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Quando un documento HTML viene impostato come modificabile con designMode, l'oggetto document rilascia il metodo  <code style="color: rgb(37, 34, 29); font-weight: inherit;">execCommand,</code> la quale permette di eseguire dei comandi per manipolare il contenuto dell'area modificabile. Molti comandi agiscono sulla selezione del testo nel documento (grassetto, corsivo, ecc), mentre altri inseriscono nuovi elementi (collegamenti) o agisco su un'intera riga (indentazione). Quando si usa <code style="color: rgb(37, 34, 29); font-weight: inherit;">contentEditable</code>, il metodo <code style="color: rgb(37, 34, 29); font-weight: inherit;">execCommand</code> coinvolgerà l'attuale elemento attivo modificabile.</p>
+
+<pre class="eval" style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; font: normal normal normal 12px/normal 'Courier New', 'Andale Mono', monospace; color: rgb(37, 34, 29);">execCommand(Stringa nomeComando, Booleano mostraUIPredefinita, Stringa valoreArgomento)
+</pre>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><strong>Argomenti</strong></p>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">Stringa nomeComando</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">il nome del comando</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">Booleano mostraUIPredefinita</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">se l'interfaccia utente standard deve essere visualizzata. Questa caratteristica non è implementata in Mozilla.</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">Stringa valoreArgomento</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">alcuni comandi (come insertimage) richiedono un valore per un argomento extra (l'indirizzo dell'immagine). Passa un argomento oppure <code style="color: rgb(37, 34, 29); font-weight: inherit;">null</code>, se l'argomento non è necessario.</dd>
+</dl>
+</blockquote>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><strong>Comandi</strong></p>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">backColor</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Cambia il colore di sfondo del documento. In modalità styleWithCss invece, questo agisce sul colore di sfondo del blocco che lo contiene. Richiede un valore esadecimale do un colore da passare come argomento. (Internet Explorer usa questo comando per impostare il colore di sfondo del testo.)</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">bold</dt>
+ <dd>Attiva o disattiva il grassetto sulla selezione corrente o alla posizione del cursore. (Internet Explorer usa il tag STRONG al posto di B.)</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">contentReadOnly</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Rende il contenuto del documento modificabile o di sola lettura. Richiede una valore booleano true/false da passare come argomento. (Non è supportato da Internet Explorer.)</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">copy</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Copia l'attuale selezione del testo negli appunti. I permessi per usare questo comando devo essere abilitati nel file di configurazione user.js. Vedi </dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">createLink</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Crea un collegamento dalla selezione, solo se esiste la selezione. Richiede una stringa contenente l'indirizzo del collegamento da passare come argomento. L'indirizzo deve contenere almeno un unico carattere, che può essere uno spazio bianco. (Internet Explorer creerà un link con un valore null.)</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl>
+ <dt>cut</dt>
+</dl>
+
+<dl>
+ <dd>Copia l'attuale selezione del testo negli appunti. I permessi per usare questo comando devo essere abilitati nel file di configurazione user.js. Vedi </dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">decreaseFontSize</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Aggiunge un tag SMALL attorno alla selezione o alla posizione del cursore. (Non supportato da Internet Explorer.)</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">delete</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Cancella la selezione corrente.</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">fontName</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Cambia il carattere alla selezione o alla posizione del cursore. Richiede una stringa, con il nome di un font ("Arial" per esempio) da passare come argomento.</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">fontSize</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Cambia la dimensione del testo nella selezione o alla posizione del cursore. Richiede una dimensione HTML (1-7) da passare come argomento.</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">foreColor</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Cambia il colore del testo alla selezione on alla posizione del cursore. Richiede una stringa con il valore esadecimale del colore da passare come argomento.</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">formatBlock</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Aggiunge un tag di blocco-stile attorno alla selezione o alla posizione del cursore. Richiede una stringa con il nome del tag da passare come argomento. Praticamente possono essere usati tutti i blocchi di stile (es. "H1", "EM", "BUTTON", "TEXTAREA"). (Internet Explorer supporta soltanto i tags di intestazione H1 - H6, ADDRESS, e PRE, e devono essere racchiusi all'interno dei delimitatori &lt; &gt;, quindi l'argomento dovrà essere passato come "&lt;H1&gt;".)</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">heading</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Aggiunge un'intestazione attorno la selezione o sulla riga in cui è posizionato il cursore. Richiede una stringa con il nome del tag da passare come argomento (es. "H1", "H6"). (Non supportato da Internet Explorer.)</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">hiliteColor</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Cambia il colore di sfondo della selezione o della posizione del cursore. Richiede una stringa con il valore esadecimale del colore da passare come argomento. UseCSS deve essere attivata per usare questa funzione. (Non supportato da Internet Explorer.)</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">increaseFontSize</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Aggiunge il tag BIG attorno alla selezione o alla posizione del cursore. (Non supportato da Internet Explorer.)</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">indent</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Aumenta il rientro dell'elemento all'interno della selezione corrente o alla posizione del cursore.</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">insertHorizontalRule</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Inserisce una horizontal rule alla posizione del cursore (elimina la selezione).</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">insertHTML</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Inserisce una stringa HTML alla posizione del cursore (elimina la selezione). Richiede una stringa HTML valida da passare come argomento. (Non supportata da Internet Explorer.)</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">insertImage</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Inserisce un'immagine alla posizione del cursore (elimina la selezione). Richiede una stringa contenente l'indirizzo dell'immagine da passare come argomento. L'indirizzo deve contenere almeno un unico carattere, che può essere uno spazio bianco. (Internet Explorer creerà un link con un valore null.)</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">insertOrderedList</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Crea un elenco numerato all'interno della selezione corrente o alla posizione del cursore.</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">insertUnorderedList</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Crea un elenco puntato all'interno della selezione corrente o alla posizione del cursore.</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">insertParagraph</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Inserisce una paragrafo attorno alla selezione o alla riga corrente. (Internet Explorer inserisce un paragrafo alla posizione del cursore e cancella la selezione.)</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">italic</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Attiva o disattiva il corsivo sulla selezione o alla posizione del cursore. (Internet Explorer usa il tag EM al posto di I.)</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">justifyCenter</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Allinea al centro la selezione o la posizione del cursore.</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">justifyLeft</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Allinea a sinistra la selezione o la posizione del cursore.</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">justifyRight</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Allinea a destra la selezione o la posizione del cursore.</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">outdent</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Diminuisce il rientro dell'elemento sulla selezione o alla posizione del cursore.</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">paste</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Incolla il contenuto degli appunti alla posizione del cursore (sostituisce la selezione corrente). I permessi per usare questo comando devo essere abilitati nel file di configurazione user.js. Vedi </dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">redo</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Ripristina il comando precedentemente annullato.</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">removeFormat</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Rimuove tutta la formattazione dalla selezione corrente.</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">selectAll</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Seleziona tutto il contenuto dell'area modificabile.</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">strikeThrough</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Attiva o disattiva il testo barrato sulla selezione o alla posizione del cursore.</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">subscript</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Attiva o disattiva subscript sulla selezione o alla posizione del cursore.</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">superscript</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Attiva o disattiva superscript sulla selezione o alla posizione del cursore.</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">underline</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Attiva o disattiva la sottolineatura sulla selezione o alla posizione del cursore.</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">undo</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Annulla l'ultimo comando eseguito.</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">unlink</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Rimuove il collegamento dal collegamento selezionato.</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">useCSS {{ Deprecated_inline() }}</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Attiva o disattiva l'uso di tags HTML tags o CSS per la generazione del markup. Richiede una valore booleano true/false come argomento. NOTA: Questo argomento è invertito (es. usa false per usare il CSS, true per usare l'HTML). (Non supportato da Internet Explorer.) Questo comando è diventato deprecato; in alternativa usa il comando <em>styleWithCSS</em>.</dd>
+</dl>
+</blockquote>
+
+<blockquote>
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">styleWithCSS</dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Sostituisce il comando <em>useCSS</em>; l'argomento, a differenza del comando useCSS, l'argomento lavora come ci si aspetta, es. passato true modifica/genera attributi <em>style</em> nel markup, false genera elementi di formattazione.</dd>
+</dl>
+</blockquote>
+
+<h3 id="Internet_Explorer_Differences" name="Internet_Explorer_Differences">Differenze con Internet Explorer</h3>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Una delle maggiori differenze tra Mozilla e Internet Explorer che coinvolgono designMode è il codice generato nel documento modificabile: while Internet Explorer uses HTML tags (em, i, ecc), Mozilla 1.3 will generate by default spans with inline style rules. Il comando  <code style="color: rgb(37, 34, 29); font-weight: inherit;">useCSS </code>può essere usato per attivare o disattivare la creazione di markup HTML o CSS.</p>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><strong>Figure 1 : Generated HTML differences</strong></p>
+
+<pre style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; font: normal normal normal 12px/normal 'Courier New', 'Andale Mono', monospace; color: rgb(37, 34, 29);">Mozilla:
+&lt;span style="font-weight: bold;"&gt;I love geckos.&lt;/span&gt;
+&lt;span style="font-weight: bold; font-style: italic;
+    text-decoration: underline;"&gt;Dinosaurs are big.&lt;/span&gt;
+
+Internet Explorer:
+&lt;STRONG&gt;I love geckos.&lt;/STRONG&gt;
+&lt;STRONG&gt;&lt;EM&gt;&lt;U&gt;Dinosaurs are big.&lt;/U&gt;&lt;/EM&gt;&lt;/STRONG&gt;
+</pre>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Un'altra differenza tra Mozilla e IE è il modo in cui si accede all'oggetto document di un iframe, con la quale viene usato in congiunzione con designMode. Mozilla usa il modo standard fornito da W3C, <code style="color: rgb(37, 34, 29); font-weight: inherit;">IFrameElement.<a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-38538621">contentDocument</a></code>, mentre IE richiede <code style="color: rgb(37, 34, 29); font-weight: inherit;">IFrameElement.document</code>.</p>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><em><strong>DevEdge</strong></em> fornisce una classe JavaScript, <code style="color: rgb(37, 34, 29); font-weight: inherit;"><a href="/en/Rich-Text_Editing_in_Mozilla/Class_xbDesignMode" rel="internal" title="en/Rich-Text_Editing_in_Mozilla/Class_xbDesignMode">xbDesignMode</a></code>, il cui scopo è quello di racchiudere le caratteristiche di designMode in una classe che nasconde le differenze tra IE e Mozilla.</p>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><br>
+ <strong>Gestione degli Eventi Disabilitati</strong></p>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Una significante differenza per Mozilla è che una volta che viene impostato il documento a designMode, tutti gli eventi sul determinato documento vengono disabilitati. Tuttavia, disattivato il designMode (come ora è possibile in Mozilla 1.5) gli eventi diventeranno attivi di nuovo.</p>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><strong>Maggiori informazioni</strong> possono essere trovato nella sezione <a href="/en/Migrate_apps_from_Internet_Explorer_to_Mozilla#Rich_text_editing" rel="internal" title="en/Migrate_apps_from_Internet_Explorer_to_Mozilla#Rich_text_editing">Rich text editing</a> dell'articolo <a href="/en/Migrate_apps_from_Internet_Explorer_to_Mozilla" rel="internal" title="en/Migrate_apps_from_Internet_Explorer_to_Mozilla">Convertire le applicazioni da Internet Explorer a Mozilla</a>.</p>
+
+<h3 id="Examples" name="Examples">Esempi</h3>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><em><strong>Nota:</strong> I files di esempio sono stati trasferiti su un'altro sito. In questo momento non sono disponibili.</em> --<a href="/User:Fumble" rel="internal" title="User:Fumble">fumble</a> 18:13, 24 Apr 2005 (PDT)</p>
+
+<h4 id="Example_1" name="Example_1">Esempio 1</h4>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Il primo esempio è un documento HTML impostato con <code style="color: rgb(37, 34, 29); font-weight: inherit;">designMode</code> a "On". In Mozilla 1.3, questo rende l'intero documento modificabile. Tuttavia, Internet Explorer, non permette a javascript di cambiare il designMode del documento corrente. Per farlo funzionare in Internet Explorer, l'attributo <code style="color: rgb(37, 34, 29); font-weight: inherit;">contentEditable</code> del tag body necessita di essere impostato a "true".</p>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><strong>Figura 2 : Primo esempio</strong></p>
+
+<pre style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; font: normal normal normal 12px/normal 'Courier New', 'Andale Mono', monospace; color: rgb(37, 34, 29);">HTML:
+&lt;body contentEditable="true" onload="load()"&gt;
+
+JavaScript:
+function load(){
+  window.document.designMode = "On";
+}
+</pre>
+
+<h4 id="Example_2" name="Example_2">Esempio 2</h4>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Il secondo esempio è una semplice pagina in rich text editing, dove il testo può essere trasformato in grassetto/corsivo/sottolineato, possono essere aggiunti nuovi collegamenti e si può cambiare il colore del testo. La pagina di esempio consiste in un iframe, la quale sarà l'area rich-text, nonché gli elementi che consento di effettuare modifiche base al testo come grassetto/corsivo/colore del testo.</p>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><strong>Figura 3 : Impostazione del rich-text editing</strong></p>
+
+<pre style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; font: normal normal normal 12px/normal 'Courier New', 'Andale Mono', monospace; color: rgb(37, 34, 29);">HTML:
+&lt;body onload="load()"&gt;
+
+JavaScript:
+function load(){
+  getIFrameDocument("editorWindow").designMode = "On";
+}
+
+function getIFrameDocument(aID){
+  // se esiste contentDocument, W3C compliant (Mozilla)
+  if (document.getElementById(aID).contentDocument){
+    return document.getElementById(aID).contentDocument;
+  } else {
+    // IE
+    return document.frames[aID].document;
+  }
+}
+</pre>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">L'esempio contiene una funzione <code style="color: rgb(37, 34, 29); font-weight: inherit;">doRichEditCommand</code> che rende semplice l'esecuzione dei comandi nel documento dell'iframe e mantiene pulito il codice HTML. La funzione esegue il comando richiesto tramite <code style="color: rgb(37, 34, 29); font-weight: inherit;">execCommand()</code> e dopodiché imposta il focus di nuovo al documento modificabile, come anche cliccando su di un pulsante imposterà il focus su pulsante stesso, la quale interromperà il flusso di modifica.</p>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><strong>Figura 4 : Esecuzione dei comandi Rich Editing</strong></p>
+
+<pre style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; font: normal normal normal 12px/normal 'Courier New', 'Andale Mono', monospace; color: rgb(37, 34, 29);">HTML:
+&lt;button onclick="doRichEditCommand('bold')" style="font-weight:bold;"&gt;B&lt;/button&gt;
+
+JavaScript:
+function doRichEditCommand(aName, aArg){
+  getIFrameDocument('editorWindow').execCommand(aName,false, aArg);
+  document.getElementById('editorWindow').contentWindow.focus()
+}
+</pre>
+
+<h3 id="Resources" name="Resources">Risorse</h3>
+
+<ul style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 25px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <li style="margin-bottom: 0.25em;"><a class="external" href="http://mozilla.org/editor/midas-spec.html">mozilla.org's rich-text editing Specification</a></li>
+ <li style="margin-bottom: 0.25em;"><a class="external" href="http://mozilla.org/editor/midasdemo/">mozilla.org's rich-text editing Demo</a></li>
+ <li style="margin-bottom: 0.25em;"><a href="/en/Migrate_apps_from_Internet_Explorer_to_Mozilla" rel="internal" title="Convertire le applicazioni da Internet Explorer a Mozillaa">Convertire le applicazioni da Internet Explorer a Mozilla</a><a class="external" href="http://www.mozilla.org/editor/ie2midas.html"> su mozilla.org</a></li>
+ <li style="margin-bottom: 0.25em;"><a href="/it/docs/Web/API/Document/designMode">designMode</a></li>
+ <li style="margin-bottom: 0.25em;"><a href="https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/ms537834(v=vs.85)">MSDN: How to Create an HTML Editor Application</a></li>
+ <li style="margin-bottom: 0.25em;"><a class="external" href="http://www.kevinroth.com/rte/demo.htm">A closed source, cross-browser rich-text editing demo</a></li>
+ <li style="margin-bottom: 0.25em;"><a href="/en/Rich-Text_Editing_in_Mozilla/Class_xbDesignMode" rel="internal" title="en/Rich-Text_Editing_in_Mozilla/Class_xbDesignMode">xbDesignMode; a JavaScript helper class for easier cross-browser development using designMode.</a></li>
+ <li style="margin-bottom: 0.25em;"><a class="external" href="http://starkravingfinkle.org/blog/2007/07/firefox-3-contenteditable/">Firefox 3 and contentEditable</a></li>
+</ul>
diff --git a/files/it/web/guide/index.html b/files/it/web/guide/index.html
new file mode 100644
index 0000000000..db55293bd5
--- /dev/null
+++ b/files/it/web/guide/index.html
@@ -0,0 +1,39 @@
+---
+title: Guida Web developer
+slug: Web/Guide
+tags:
+  - Guide
+  - Landing
+  - NeedsTranslation
+  - TopicStub
+  - Web
+translation_of: Web/Guide
+---
+<p><strong>Questi articoli forniscono informazioni utili per l'utilizzo di specifiche tecnologie e API.</strong></p>
+
+<div>
+<div>
+<ul>
+ <li class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS">CSS developer guide</a></li>
+ <li class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Events">Event developer guide</a></li>
+ <li class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Graphics">Graphics on the Web</a></li>
+ <li class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API">Guide to Web APIs</a></li>
+ <li class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML">HTML developer guide</a></li>
+ <li class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a></li>
+ <li class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Localizations_and_character_encodings">Localizations and character encodings</a></li>
+ <li class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Mobile">Mobile Web Development</a></li>
+ <li class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Performance">Optimization and performance</a></li>
+ <li class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Parsing_and_serializing_XML">Parsing and serializing XML</a></li>
+ <li class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/SVG-in-OpenType">SVG-in-OpenType</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/WOFF">The Web Open Font Format (WOFF)</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/User_experience">User experience</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects">Using FormData Objects</a></li>
+</ul>
+</div>
+</div>
+
+<h2 id="Guarda_anche">Guarda anche</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Reference" title="/en-US/docs/Web/Reference">Web Developer Reference</a></li>
+</ul>
diff --git a/files/it/web/guide/woff/index.html b/files/it/web/guide/woff/index.html
new file mode 100644
index 0000000000..c3fb596778
--- /dev/null
+++ b/files/it/web/guide/woff/index.html
@@ -0,0 +1,99 @@
+---
+title: Il Formato Open di Font per il Web (WOFF)
+slug: Web/Guide/WOFF
+translation_of: Web/Guide/WOFF
+---
+<p><span class="seoSummary"><strong>WOFF</strong> (<strong>Web Open Font Format</strong>, Formato Font per il Web Open) e un nuovo formato di font per il web sviluppato da Mozilla in collaborazione con Type Supply, LettError, e altre organizzazioni. Usa una versione compressa della stessa struttura <code>sfnt</code> basata su tabelle di TrueType, OpenType e Open Font Format, ma aggiunge alcuni metadati e strutture dati ad uso privato, compresi alcuni campi predefiniti che permettono di fornire informazioni di licenza se lo si desidera.</span></p>
+
+<p>Usare WOFF comporta principalmente tre benefici:</p>
+
+<ol>
+ <li>I dati del font sono compressi, quindi i siti che usano WOFF usano meno banda e si caricheranno più in fretta rispetto a quelli che usano equivalenti non compressi come TrueType o OpenType.</li>
+ <li>Molti produttori di font che non intendono dare in licenza i propri font in formato TrueType o OpenType per l'uso nel web, daranno in licenza i font in formato WOFF. Questo migliora la disponibilità di font ai designer di siti web.</li>
+ <li>I produttori di browser (sia proprietari che liberi) apprezzano il formato WOFF, che ha quindi il potenziale per diventare un formato per i font realmente universale e interoperabile, a differenza degli attuali formati per i font.</li>
+</ol>
+
+<h2 id="Usare_WOFF">Usare WOFF</h2>
+
+<p>Puoi usare la proprietà CSS {{cssxref("@font-face")}} per utilizzare i font WOFF per il testo nei contenuti web. Funziona esattamente come i formati OpenType e TrueType, eccetto per il fatto che molto probabilmente renderà lo scaricamento molto più efficiente grazie alla compressione.</p>
+
+<h2 id="Strumenti_per_lavorare_con_i_font_WOFF">Strumenti per lavorare con i font WOFF</h2>
+
+<p>Sono disponibili <a href="https://people.mozilla.org/~jkew/woff/">Strumenti per lavorare con i font WOFF</a>. <code>sfnt2woff</code> e <code>woff2sfnt</code> convertono da WOFF a OpenType e viceversa.</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('WOFF1.0', '', '')}}</td>
+   <td>{{Spec2('WOFF1.0')}}</td>
+   <td>Specifica 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>Caratteristica</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>6.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0</td>
+   <td>11.10</td>
+   <td>5.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caratteristica</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>Supporto di base</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{cssxref("@font-face")}}</li>
+</ul>