diff options
| author | Ryan Johnson <rjohnson@mozilla.com> | 2021-04-29 16:16:42 -0700 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-04-29 16:16:42 -0700 |
| commit | 95aca4b4d8fa62815d4bd412fff1a364f842814a (patch) | |
| tree | 5e57661720fe9058d5c7db637e764800b50f9060 /files/it/learn/getting_started_with_the_web | |
| parent | ee3b1c87e3c8e72ca130943eed260ad642246581 (diff) | |
| download | translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.gz translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.bz2 translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.zip | |
remove retired locales (#699)
Diffstat (limited to 'files/it/learn/getting_started_with_the_web')
9 files changed, 0 insertions, 1442 deletions
diff --git a/files/it/learn/getting_started_with_the_web/css_basics/index.html b/files/it/learn/getting_started_with_the_web/css_basics/index.html deleted file mode 100644 index b229d8f888..0000000000 --- a/files/it/learn/getting_started_with_the_web/css_basics/index.html +++ /dev/null @@ -1,267 +0,0 @@ ---- -title: Basi di CSS -slug: Learn/Getting_started_with_the_web/CSS_basics -translation_of: Learn/Getting_started_with_the_web/CSS_basics ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</div> - -<div class="summary"> -<p>CSS (Cascading Style Sheets) è il codice usato per modellare lo stile delle pagine web. In questo capitolo, CSS Basics, viene spiegato di cosa si ha bisogno per iniziare. Risponderemo a domande come: come faccio a rendere il testo nero o rosso? Come faccio a far visualizzare il contenuto in un certo posto sullo schermo? Come faccio a decorare la pagina web con immagini di sfondo e colori?</p> -</div> - -<h2 id="Quindi_cosa_sono_i_CSS_in_concreto">Quindi, cosa sono i CSS in concreto?</h2> - -<p>Come l'HTML, anche il CSS non è un vero e proprio linguaggio di programmazione. Si tratta di un "linguaggio di stile", che consente cioé di applicare, selettivamente, uno stile agli elementi dei documenti HTML. Per esempio, per selezionare tutti gli elementi paragrafo di una pagina HTML e rendere rosso il testo che contengono, devi scrivere questo CSS:</p> - -<pre class="brush: css notranslate">p { - color: red; -}</pre> - -<p>Facciamo una prova: incolliamo le tre righe di CSS nell'editor di testo, in un nuovo file e salviamolo come stile.css nella sottocartella styles.</p> - -<p>Abbiamo ancora bisogno di collegare il CSS al documento HTML, altrimenti non influenzerà il modo in cui il browser visualizza il documento HTML. (Se non avete seguito il nostro progetto, leggete <a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a> (Gestire i files) e <a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">HTML basics (Nozioni di base di HTML)</a> per scoprire cosa è stato fatto fin qui.</p> - -<ol> - <li>Apriamo il file index.html e incolliamo la seguente riga nella sezione <head>, cioè tra i tag <head> e </head>. - <pre class="brush: html notranslate"><link href="styles/style.css" rel="stylesheet" type="text/css"></pre> - </li> - <li>Salviamo index.html e apriamolo nel browser. Si dovrebbe vedere qualcosa di simile a questo:</li> -</ol> - -<p><img alt="A mozilla logo and some paragraphs. The paragraph text has been styled red by our css." src="https://mdn.mozillademos.org/files/9435/website-screenshot-styled.png" style="display: block; height: 832px; margin: 0px auto; width: 711px;">Se il testo dei paragrafi ora è rosso, congratulazioni! Hai appena scritto il tuo primo CSS funzionante.</p> - -<h3 id="Anatomia_di_un_set_di_regole_CSS">Anatomia di un set di regole CSS</h3> - -<p>Diamo un'occhiata più approfondita al CSS precedente.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9461/css-declaration-small.png" style="display: block; height: 480px; margin: 0px auto; width: 850px;"></p> - -<p>Tutta la struttura è chiamata "insieme di regole" (rule set), ma spesso anche solo "regola", per brevità. Nota anche i nomi delle singole parti:</p> - -<dl> - <dt>Selettore</dt> - <dd>Il nome dell'elemento HTML all'inizio del set di regole. Seleziona l'elemento o gli elementi a cui applicare la regola (in questo caso, gli elementi p). Per applicare la regola di stile ad un elemento diverso basta cambiare il selettore.</dd> - <dt>Dichiarazione</dt> - <dd>Una sola regola/dichiarazione (color: red;) che definisce una delle proprietà dell'elemento.</dd> - <dt>Proprietà</dt> - <dd>Le proprietà di un dato elemento HTML che è possibile modificare; in questo caso il colore. Il colore è una delle proprietà degli elementi p. Nelle regole dei CSS si sceglie quali proprietà si desidera modificare.</dd> - <dt>Valore della proprietà</dt> - <dd>A destra della proprietà, separato dai due punti, si definisce il valore di quella proprietà, scegliendone uno tra i molti possibili (ci sono molti altri colori oltre al rosso).</dd> -</dl> - -<p>Notate le altre parti importanti della sintassi:</p> - -<ul> - <li>A parte il selettore, ogni gruppo di regole deve essere chiuso tra parentesi graffe ({}).</li> - <li>All'interno di ogni dichiarazione, è necessario utilizzare i due punti (:) per separare proprietà e valore.</li> - <li>All'interno di ogni set di regole, è necessario utilizzare un punto e virgola (;) per separare una dichiarazione da quella successiva.</li> -</ul> - -<p>Quindi, per modificare i valori di molte proprietà in una sola volta, è sufficiente scriverle separate da un punto e virgola; in questo modo:</p> - -<pre class="brush: css notranslate">p { - color: red; - width: 500px; - border: 1px solid black; -}</pre> - -<h3 id="Selezionare_più_elementi">Selezionare più elementi</h3> - -<p>È anche possibile selezionare più tipi di elementi e applicare a tutti un unico insieme di regole. Bisogna specificare più selettori separandoli con virgole. Per esempio:</p> - -<pre class="brush: css notranslate">p,li,h1 { - color: red; -}</pre> - -<h3 id="Differenti_tipi_di_selettori">Differenti tipi di selettori</h3> - -<p>Ci sono molti diversi selettori. Fin qui, abbiamo guardato solo ai selettori elemento, che selezionano tutti gli elementi di un tipo; ma siamo in grado di effettuare selezioni più specifiche. Ecco alcuni dei più comuni tipi di selettore:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Nome del selettore</th> - <th scope="col">Cosa seleziona</th> - <th scope="col">Esempio</th> - </tr> - </thead> - <tbody> - <tr> - <td>Element selector (a volte chiamato tag o type selector)</td> - <td>Tutti gli elementi HTML del tipo specificato</td> - <td><code>p</code><br> - seleziona gli elementi <code><p></code></td> - </tr> - <tr> - <td>ID selector</td> - <td>L'elemento della pagina con l'ID specificato (in una specifica pagina HTML è consentito un solo elemento con un certo ID).</td> - <td><code>#my-id</code><br> - Seleziona <code><p id="my-id"></code> or <code><a id="my-id"></code></td> - </tr> - <tr> - <td>Class selector</td> - <td>Gli elementi della pagina della classe specificata (in una pagina la classe può essere richiamata più volte).</td> - <td><code>.my-class</code><br> - Selects <code><p class="my-class"></code> and <code><a class="my-class"></code></td> - </tr> - <tr> - <td>Attribute selector</td> - <td>Gli elementi della pagina con l'attributo specificato</td> - <td><code>img[src]</code><br> - Seleziona <code><img src="myimage.png"></code> ma non <code><img></code></td> - </tr> - <tr> - <td>Pseudo class selector</td> - <td>Gli elementi specificati, ma solo quando sono nello stato specificato, ad esempio quando c'è su il mouse.</td> - <td><code>a:hover</code><br> - Seleziona <code><a></code>, ma solo quando il puntatore del mouse si trova sopra il link.</td> - </tr> - </tbody> -</table> - -<p>Ci sono molti altri selettori da conoscere e se ne può trovare un elenco più dettagliato nella nostra <a href="/en-US/docs/Web/Guide/CSS/Getting_started/Selectors">Selectors guide</a> (guida ai selettori).</p> - -<h2 id="Caratteri_e_testo">Caratteri e testo</h2> - -<p>Ora che abbiamo esplorato alcune nozioni di base dei CSS, possiamo aggiungere alcune regole e informazioni in più al nostro file stile.css per dare al nostro esempio un aspetto gradevole. Per cominciare, cerchiamo di migliorare l'aspetto dei caratteri e del testo.</p> - -<ol> - <li>Prima di tutto, andiamo a riprendere i <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like#Font">Google Font</a> che abbiamo memorizzato in un posto sicuro. Aggiungiamo il tag <link ...> da qualche parte nella <head> del documento index.html (ancora una volta, in qualsiasi punto tra i tag <head> e </head>. Sarà qualcosa di simile a questo: - - <pre class="brush: html notranslate"><link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'></pre> - </li> - <li>Successivamente, eliminiamo la regola creata prima: è stato un buon esercizio, ma il testo rosso in realtà non è una bellezza.</li> - <li>Al suo posto mettiamo le righe seguenti, sostituendo la linea segnaposto con la vera "font-family" ottenuta da Google Font. (Font-family significa semplicemente "famiglia di caratteri" che si desidera utilizzare). Questa regola imposta un font di base e la dimensione del carattere per l'intera pagina (poiché <html> è l'elemento padre di tutta la pagina, essendo tutti gli altri elementi al suo interno, erediteranno tutti gli stessi font-size e font-family): - <pre class="brush: html notranslate">html { - font-size: 10px; /* px significa 'pixels': la dimensione base del carattere è ora alta 10 pixels */ - font-family: segnaposto - questo dovrebbe essere il resto dell'output ottenuto da Google Fonts -}</pre> - - <div class="note"> - <p><strong>Nota</strong>: per spiegare cosa significa "px" è stato aggiunto un "commento". Tutto ciò che, in un documento CSS, sta tra i simboli /* e */ è un <strong>commento CSS</strong> che il browser ignora quando esegue il rendering del codice. In questo modo si possono scrivere utili annotazioni su cosa si sta facendo con quelle regole.</p> - </div> - </li> - <li>Ora impostiamo le dimensioni dei caratteri per gli elementi di testo contenuti all'interno del "corpo" del documento HTML ({{htmlelement("h1")}}, {{htmlelement("li")}}, e {{htmlelement("p")}}). Inoltre, centriamo il testo dell'intestazione e regoliamo l'altezza delle linee e la spaziatura dei caratteri per rendere il contenuto un po' più leggibile: - <pre class="brush: css notranslate">h1 { - font-size: 60px; - text-align: center; -} - -p, li { - font-size: 16px; - line-height: 2; - letter-spacing: 1px; -}</pre> - </li> -</ol> - -<p>È possibile regolare questi valori a piacimento per far apparire il progetto come si vuole, ma dovrebbe essere qualcosa del genere:</p> - -<p><img alt="Immagine della pagina creata, un logo Mozilla e alcuni paragrafi. Impostato un tipo di carattere sans-serif, la dimensione dei caratteri, l'altezza delle linee, la spaziatura tra le lettere e l'intestazione della pagina è stata centrata." src="https://mdn.mozillademos.org/files/9447/website-screenshot-font-small.png" style="display: block; height: 1020px; margin: 0px auto; width: 921px;"></p> - -<h2 id="Box_box_tutta_una_questione_di_box">Box, box, tutta una questione di box</h2> - -<p>Una cosa che noterete riguardo ai CSS è che sono in gran parte assimilabili a contenitori (boxes): se ne modificano le dimensioni, il colore, la posizione, ecc. La maggior parte degli elementi HTML della pagina può essere pensato come un contenitore impilato su un altro.</p> - -<p><img alt="Immagine di una grande pila di casse impilate una sopra l'altra" src="https://mdn.mozillademos.org/files/9441/boxes.jpg" style="display: block; height: 463px; margin: 0px auto; width: 640px;"></p> - -<p>Non a caso, la struttura dei CSS si basa principalmente sul "box model". Ciascuno dei blocchi (o contenitori), occupando spazio sulla pagina, ha proprietà come queste:</p> - -<ul> - <li>padding (imbottitura), lo spazio intorno al contenuto (ad esempio intorno al testo di un paragrafo)</li> - <li>border (bordo), la linea continua che si trova intorno all'imbottitura (padding)</li> - <li>margin (margine), lo spazio intorno al bordo, la parte esterna dell'elemento</li> -</ul> - -<p><img alt="three boxes sat inside one another. From outside to in they are labelled margin, border and padding" src="https://mdn.mozillademos.org/files/9443/box-model.png" style="display: block; height: 450px; margin: 0px auto; width: 574px;"></p> - -<p>In questa sezione usiamo anche:</p> - -<ul> - <li><code>width</code> (larghezza di un elemento)</li> - <li><code>background-color</code>, il colore di sfondo dell'elemento</li> - <li><code>color</code>, il colore del contenuto dell'elemento (abitualmente testo)</li> - <li><code>text-shadow</code>: imposta un ombra per il testo contenuto nell'elemento</li> - <li><code>display</code>: imposta la modalità di visualizzazione dell'elemento (per ora no ti preoccupare di cosa voglia dire)</li> -</ul> - -<p>Adesso, aggiungiamo un po' di regole al documento CSS! Mettiamole in fondo alla pagina e sperimentiamo senza paura modificando i valori per vedere cosa si ottiene.</p> - -<h3 id="Cambiare_il_colore_della_pagina">Cambiare il colore della pagina</h3> - -<pre class="brush: css notranslate">html { - background-color: #00539F; -}</pre> - -<p>Questa regola imposta il colore di sfondo per l'intera pagina. Modificate il codice relativo al colore con quello che avete scelto pianificando il sito.<a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like#Theme_color"> (planning your site</a>).</p> - -<h3 id="Formattazione_del_<body>">Formattazione del <body></h3> - -<pre class="brush: css notranslate">body { - width: 600px; - margin: 0 auto; - background-color: #FF9500; - padding: 0 20px 20px 20px; - border: 5px solid black; -}</pre> - -<p>Qui ci sono diverse dichiarazioni; vediamole una per una:</p> - -<ul> - <li><code>width: 600px;</code> — imposta una larghezza fissa di 600 px</li> - <li><code>margin: 0 auto;</code> — Quando si impostano 2 valori per le proprietà <code>margin</code> o <code>padding</code>, il primo valore sarà riferito ai lati top e bottom (in questo caso li rende uguali a 0), il secondo valore ai lati left e right (in questo caso imposta il valore <code>auto</code> che è uno speciale valore che divide lo spazio disponibile orizzontalmente tra i due lati). Si possono anche usare 1, 3 o 4 valori come documentato <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin#Values">qui</a>.</li> - <li><code>background-color: #FF9500;</code> — come già visto, imposta il colore di sfondo dell'elemento. Ho usato un reddish orange per l'elemento <body> per contrastare il dark blue dell'elemento <html>. Vai avanti a sperimentare. Sentiti libero di usare il white o qualunque altro colore ti piaccia.</li> - <li><code>padding: 0 20px 20px 20px;</code> — abbiamo 4 valori di padding, per creare un po' di spazio attorno al contenuto. Questa volta il padding è 0 per il lato top del <body> e 20 pixels per left, bottom e right. I valori si riferiscono, nell'ordine, ai lati top, right, bottom, left (senso orario).</li> - <li><code>border: 5px solid black;</code> — qui si imposta un bordo di 5 pixel di spessore, solid, nero (black) su tutti i lati dell'elemento <body>.</li> -</ul> - -<h3 id="Posizionare_e_formattare_il_titolo_principale_della_pagina">Posizionare e formattare il titolo principale della pagina</h3> - -<pre class="brush: css notranslate"><code>h1 { - margin: 0; - padding: 20px 0; - color: #00539F; - text-shadow: 3px 3px 1px black; -}</code></pre> - -<p>Potresti aver notato che c'è un orribile spazio in cima all'elemento body. Questo accade perché i browsers applicano alcune formattazioni di default all'elemento {{htmlelement("h1")}} (tra gli altri) anche quando non viene definita alcuna regola nel CSS. Ciò potrebbe sembrare una cattiva idea, ma si vuole che anche un documento non formattato abbia una minima leggibilità. Per eliminare quello spazio abbiamo scavalcato il comportamento del browser impostando <code>margin: 0;</code>.</p> - -<p>Poi abbiamo impostato il padding dei lati top e bottom del titolo a 20 pixels e assegnato al testo lo stesso colore dello sfondo dell'elemento <html>.</p> - -<p>Una proprietà piuttosto interessante che abbiamo usato é <code>text-shadow</code>, che applica un'ombra al testo contenuto nell'elemento. I suoi 4 valori sono i seguenti:</p> - -<ul> - <li>Il primo valore in pixels imposta l' <strong>horizontal offset</strong> (spostamento orizzontale) dell'ombra dal testo — di quanto si sposta; un valore negativo la sposta a sinistra</li> - <li>Il secondo valore in pixels imposta il <strong>vertical offset</strong> (spostamento verticale) — di quanto si sposta in giù; un valore negativo la sposta verso l'alto</li> - <li>Il terzo valore in pixels imposta il <strong>blur radius</strong> (raggio di sfumatura) dell'ombra — un valore più grande determina un'ombra maggiormente offuscata.</li> - <li>Il quarto valore imposta il colore base dell'ombra.</li> -</ul> - -<p>Ancora, proviamo a sperimentare diversi valori per capire quali effetti possiamo ottenere.</p> - -<h3 id="Centrare_limmagine">Centrare l'immagine</h3> - -<pre class="brush: css notranslate">img { - display: block; - margin: 0 auto; -}</pre> - -<p>Infine, centriamo l'immagine per avere un miglior effetto. Possiamo usare il trucco dei margini (<code>margin: 0 auto</code>) come abbiamo già fatto per il body, ma abbiamo anche bisogno di qualcos'altro: l'elemento body è <strong>block level</strong>, ciò significa che prende spazio nella pagina e gli possono essere applicati parametri come i margini e il padding. Le immagini, al contrario, sono elementi <strong>inline</strong>, il che significa che non gli si potrebbe attribuire quei parametri; quindi per applicare all'immagine i margini dobbiamo stabilire che si comporti come i blocchi, usando la regola "<code>display: block;</code>".</p> - -<div class="note"> -<p><strong>Nota</strong>: non preoccuparti se per ora non capisci la regola <code>display: block;</code> e la distinzione tra elementi del block level e inline level. La imparerai studiando più in dettaglio i CSS. Puoi scoprire di più sui possibili valori display nella nostra pagina di riferimento (<a href="/en-US/docs/Web/CSS/display">display reference page</a>).</p> -</div> - -<h2 id="Conclusioni">Conclusioni</h2> - -<p>Se hai seguito tutte le istruzioni in questo articolo dovresti aver ottenuto qualcosa che assomiglia a questo (puoi confrontare <a href="http://mdn.github.io/beginner-html-site-styled/">la nostra versione qui</a>):</p> - -<p><img alt="Il logo mozilla, centrato, titolo e paragrafi. Adesso ha un bello stile con uno sfondo blu per l'intera pagina e arancione per la fascia principale." src="https://mdn.mozillademos.org/files/9455/website-screenshot-final.png" style="display: block; height: 1084px; margin: 0px auto; width: 940px;"></p> - -<p>Se sei bloccato puoi sempre confrontare il tuo lavoro con il nostro su GitHUb (<a href="https://github.com/mdn/beginner-html-site-styled/blob/gh-pages/styles/style.css">finished example code on Github</a>).</p> - -<p>Qui abbiamo solo scalfito la superfice dei CSS. Per scoprire di più vai a vedere <a href="https://developer.mozilla.org/en-US/Learn/CSS">CSS Learning topic</a>.</p> - -<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</p> diff --git a/files/it/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/it/learn/getting_started_with_the_web/dealing_with_files/index.html deleted file mode 100644 index 5d4f6f624b..0000000000 --- a/files/it/learn/getting_started_with_the_web/dealing_with_files/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Gestire i file -slug: Learn/Getting_started_with_the_web/Dealing_with_files -translation_of: Learn/Getting_started_with_the_web/Dealing_with_files -original_slug: Learn/Getting_started_with_the_web/Gestire_i_file ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</div> - -<div class="summary"> -<p>Un sito web è composto da molti file: contenuti testuali, codice, fogli di stile, contenuti multimediali e molto altro. Quando crei un sito web, devi assemblare questi files nel tuo computer in maniera strutturata, facendo si che essi possano <em>dialogare</em> tra di loro e facendo in modo che tutto il contenuto appaia correttamente, prima di (eventualmente) <a href="/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">caricarli su un server</a>. Questa pagina esamina alcune problematiche che dovresti conoscere, così da saper impostare una struttura corretta dei files necessari al tuo sito web.</p> -</div> - -<h2 id="Dove_andrebbe_collocato_il_tuo_sito_web_all'interno_del_tuo_computer">Dove andrebbe collocato il tuo sito web all'interno del tuo computer?</h2> - -<p>Quando stai lavorando a un sito web localmente sul tuo computer, dovresti tenere tutti i file in una singola cartella che rispecchi la struttura di file all'interno del tuo server. Questa cartella può essere creata ovunque tu voglia, ma dovresti posizionarla in una directory dove tu possa facilmente trovarla, magari sul tuo Desktop, nella tua cartella di Home, o nella root del tuo hard drive.</p> - -<ol> - <li>Seleziona un posto dove archiviare i tuoi progetti web. Qui, crea una nuova cartella chiamata <code>progetti-web</code> (o qualcosa di simile). Ecco dove vivrà il tuo intero sito web.</li> - <li>Dentro questa prima cartella, crea un'altra cartella per archiviare al suo interno il tuo primo sito web. Chiamala <code>sito-test</code> (o qualcosa di più fantasioso).</li> -</ol> - -<h2 id="Un_chiarimento_riguardo_gli_spazi_e_la_distinzione_tra_maiuscole_e_minuscole">Un chiarimento riguardo gli spazi e la distinzione tra maiuscole e minuscole</h2> - -<p>Forse hai notato che, nel corso di questo articolo, i nomi delle cartelle e dei file sono sempre in minuscolo e senza spazi. Questo perchè:</p> - -<ol> - <li>Tanti computer, particolarmente i server web, fanno una distinzione tra lettere maiuscole e minuscole. Ad esempio: se crei un'immagine nella cartella <code>test-site</code> e le assegni il nome <code>MyImage.jpg</code>, ma successivamente provi ad aprirla usando <code>myimage.jpg</code>, potrebbe non funzionare.</li> - <li>Browsers, server web e linguaggi di programmazione non gestiscono gli spazi tutti allo stesso modo. Per esempio, se usi gli spazi nella denominazione di un file, alcuni sistemi li tratteranno come se fossero più nomi. Alcuni server sostituiscono lo spazio con "%20" (il codice carattere che viene usato al posto degli spazi nei URL), rendendo impossibile aprire tutti i tuoi link. È meglio quindi separare con dei trattini o con delle sottolineature, ad esempio: <code> my-file.html</code> o <code>my_file.html</code>.</li> -</ol> - -<p>In ogni caso dovresti usare il trattino per separare le parole. Google considera i trattini come separatori delle parole, ma non tratta le sottilineature allo stesso modo. Per queste ragioni è buona abitudine scrivere il nome dei file e delle cartelle in minuscolo senza spazi e separando le parole con trattini, almeno fino a quando sai cosa stai facendo. In questo modo non cadrai in errori comuni nel futuro.</p> - -<h2 id="Quale_struttura_dovrebbe_avere_il_tuo_sito">Quale struttura dovrebbe avere il tuo sito?</h2> - -<p>La struttura più utilizzata in qualsiasi progetto è un file HTML, che funge da homepage, e delle cartelle per contenere immagini, fogli di stile e file di script. Vediamola insieme:</p> - -<ol> - <li><code><strong>index.html</strong></code>: Questo file racchiude generalmente il contenuto della tua homepage, cioè il testo e le immagini che le persone vedono quando accedono per la prima volta al tuo sito. Usando il tuo text editor, crea un nuovo file chiamato <code>index.html</code> e salvalo nella cartella <code>test-site</code>.</li> - <li><strong>cartella <code>images</code></strong>: Questa cartella racchiude tutte le immagini che usi nel tuo sito. Crea una sottocartella chiamata <code>images</code>, nella cartella <code>test-site</code>.</li> - <li><strong>cartella <code>styles</code></strong>: Questa cartella racchiude il codice CSS usato per creare il contenuto grafico (per esempio, quale font usare, quali colori usare come sfondo). Crea una sottocartella chiamata <code>styles</code>, nella cartella <code>test-site</code>.</li> - <li><strong>cartella <code>scripts</code></strong>: Questa cartella racchiude tutto il codice JavaScript usato per aggiungere funzioni interattive al tuo sito (per. es. tasti che caricano dei dati quando vengono cliccati ). Crea una sottocartella chiamata <code>scripts</code>, nella cartella <code>test-site</code>.</li> -</ol> - -<div class="note"> -<p><strong>Nota</strong>: Su Windows, potresti avere problemi a vedere l'estensione dei file, perchè Windows ha un opzione chiamata <strong>Nascondi estensioni per tipi di file conosciuti</strong> attivata per default. Normalmente puoi disattivarla in Windows Explorer, selezionando <strong>Opzioni cartella...</strong> , deselezionare <strong>Nascondi estensioni per tipi di file conosciuti</strong>, poi cliccando <strong>OK</strong>. Per avere più informazioni sulla tua versione di Windows, fai una ricerca su internet!</p> -</div> - -<h2 id="Percorsi_dei_file">Percorsi dei file</h2> - -<p>Per permettere ad un file di trovarne un altro, dovremo indicare un percorso tra di loro - in pratica creare un itinerario, così che un file possa <em>sapere</em> dov'è l'altro. Per dimostrare ciò, inseriremo un po' di codice HTML nel nostro file <code>index.html</code>, rendendo così possibile mostrare l'immagine scelta nell'articolo <a href="/it/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like">"Come dovrebbe apparire il tuo sito web?"</a></p> - -<ol> - <li>Copia l'immagine scelta in precedenza nella cartella <code>images</code>.</li> - <li>Apri il file <code>index.html</code>, e inserisci il codice che segue, così come lo vedi scritto. Non preoccuparti del suo significato per ora - approfondiremo i dettagli più avanti. - <pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>La mia pagina di prova</title> - </head> - <body> - <img src="" alt="La mia immagine di prova"> - </body> -</html> </pre> - </li> - <li>La riga <code><img src="" alt="My test image"></code> è il codice HTML che si occupa di mostrare l'immagine nella pagina. Dobbiamo indicare nell'HTML dove trovare l'immagine: essa si trova all'interno della directory <em>images</em>, che a sua volta è nella directory comune a <code>index.html</code>. Scorrendo lo schema strutturale da <code>index.html</code> alla nostra immagine, il percorso che dovremmo avere è: <code>images/your-image-filename</code>. Se ad esempio, la mia immagine si chiama <code>firefox-icon.png</code>, allora il percorso corretto sarà <code>images/firefox-icon.png</code>.</li> - <li>Scrivi l'indirizzo del file nel codice HTML, tra le virgolette di <code>src=""</code>.</li> - <li>Salva il tuo file HTML, ed aprilo con il browser web (puoi farlo velocemente con un doppio click). Dovresti vedere l'immagine nella tua pagina web appena creata.</li> -</ol> - -<p><img alt="A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world" src="https://mdn.mozillademos.org/files/9229/website-screenshot.png" style="display: block; height: 542px; margin: 0px auto; width: 690px;"></p> - -<p>Alcune regole generali per i percorsi dei file:</p> - -<ul> - <li>Per indicare che il file è nella stessa cartella / directory del file HTML richiesto, puoi semplicemente usare il nome del file, ad esempio: <code>my-image.jpg</code>.</li> - <li>Per riferirti ad un file in una sotto cartella / directory, scrivi il nome della directory prima del nome del file e separali con un forward slash (/), ad esempio <code>subdirectory/my-image.jpg</code>.</li> - <li>Per usare un file che si trova in una cartella / directory al di fuori di quella dove risiede il file HTML richiesto, si possono usare due punti (<code>..</code>). Ad esempio se <code>index.html</code> si trova in una sotto cartella / directory di <code>test-site</code> e <code>my-image.jpg</code> è all'interno di <code>test-site</code>, <code>my-image.jpg</code> può essere richiamato da <code>index.html</code> usando <code>../my-image.jpg</code>.</li> - <li>Queste notazioni, possono essere combinate come si preferisce, ad esempio <code>../subdirectory/another-subdirectory/my-image.jpg</code>.</li> -</ul> - -<p>For now, this is about all you need to know.</p> - -<div class="note"> -<p><strong>Nota</strong>: Il file system di Windows, usa i backslash, non i forward slash, esempio: <code>C:\windows</code>. Questo nel codice HTML non conta — anche se stai sviluppando il tuo sito web su Windows, è obbligatorio usare i forward slash nel codice.</p> -</div> - -<h2 id="Cos'altro_dovrei_fare">Cos'altro dovrei fare?</h2> - -<p>Per ora è tutto. L'albero della tua cartella / directory, dovrebbe essere simile a questo:</p> - -<p><img alt="A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file" src="https://mdn.mozillademos.org/files/9231/file-structure.png" style="display: block; height: 577px; margin: 0px auto; width: 929px;"></p> - -<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</p> diff --git a/files/it/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/it/learn/getting_started_with_the_web/how_the_web_works/index.html deleted file mode 100644 index 32c4cc1810..0000000000 --- a/files/it/learn/getting_started_with_the_web/how_the_web_works/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Come funziona il Web -slug: Learn/Getting_started_with_the_web/How_the_Web_works -translation_of: Learn/Getting_started_with_the_web/How_the_Web_works -original_slug: Learn/Getting_started_with_the_web/Come_funziona_il_Web ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div> - -<div class="summary"> -<p><em>Come funziona il Web</em> spiega in modo semplice quello che accade quando visualizzi una pagina web sul browser del tuo computer o telefono.</p> -</div> - -<p>Questa parte teorica non è essenziale sin da subito per scrivere il codice web, ma a breve ti avvantaggerà capire cosa c'è sullo sfondo.</p> - -<h2 id="Client_e_server">Client e server</h2> - -<p>I computer connessi sul web sono chiamati <strong>client</strong> e <strong>server</strong>. Il seguente schema semplificato mostra come possono interagire tra loro:</p> - -<p><img alt="I due cerchi rappresentano client e server. Due frecce indicano rispettivamente una richiesta dal client al server e una risposta dal server al client" src="https://mdn.mozillademos.org/files/17297/simple-client-server.png" style="height: 371px; width: 1193px;"></p> - -<ul> - <li>I client sono tipicamente i dispositivi degli utenti connessi a Internet (ad esempio: il tuo computer connesso alla rete Wi-Fi o il tuo smartphone connesso alla rete mobile) e il software, presente su quei dispositivi, che ha accesso alla rete (solitamente un browser come Firefox o Chrome).</li> - <li>I server sono computer che ospitano pagine web, siti o applicazioni. Quando il dispositivo di un client vuole accedere a una pagina web, una copia della pagina viene scaricata dal server sulla macchina client per essere così visualizzata nel browser dell'utente.</li> -</ul> - -<h2 id="Le_restanti_componenti_del_Web">Le restanti componenti del Web</h2> - -<p>La descrizione appena fatta di client e server non racconta l'intera storia. Ci sono altri numerosi elementi coinvolti che descriveremo di seguito.</p> - -<p>Immaginiamo per adesso che la rete sia una strada. A un estremo della strada si trova il client, che è come la tua abitazione. All'altro estremo della strada c'è il server, che è come un negozio dal quale vuoi acquistare qualcosa.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9749/road.jpg" style="display: block; height: 427px; margin: 0px auto; width: 640px;"></p> - -<p>Oltre al client e al server dobbiamo anche considerare:</p> - -<ul> - <li><strong>La tua connessione a Internet</strong>: Ti permette di inviare e ricevere dati nella rete. In sostanza, rappresenta il pezzo di strada tra la tua abitazione e il negozio.</li> - <li><strong>TCP/IP</strong>: Il Protocollo di Controllo di Trasmissione e il Protocollo Internet (TCP e IP in inglese) sono protocolli di comunicazione che definiscono come devono viaggiare i dati attraverso Internet. Sono simili al mezzo di trasporto che ti consente di effettuare un ordine, andare al negozio e fare acquisti. Nel nostro esempio, può trattarsi di una macchina o di una bici (o un qualsiasi altro mezzo con il quale desideri spostarti).</li> - <li><strong>DNS</strong>: Il sistema dei nomi di dominio (Domain Name Servers in inglese) è l'equivalente di una rubrica di indirizzi per i siti web. Quando digiti un indirizzo web nel tuo browser, quest'ultimo si collega al server DNS per trovare l'indirizzo reale del sito prima di recuperare la pagina web. Il browser deve conoscere su quale server è ospitato il sito web, così da poter inviare dei messaggi HTTP nel luogo corretto (leggi di seguito). Questa procedura è simile alla ricerca dell'indirizzo del negozio in modo tale da poterci andare.</li> - <li><strong>HTTP</strong>: Il {{Glossary("Protocol" , "protocollo")}} di trasferimento di un ipertesto (HTTP in inglese) definisce un linguaggio che permette a client e server di comunicare tra loro. È simile al linguaggio che usi per effettuare i tuoi acquisti.</li> - <li><strong>File che costituiscono il sito web</strong>: Un sito web è composto da numerosi e differenti file, i quali possono essere paragonati alle diverse parti delle merci che si acquistano nel negozio. Questi file possono essere distinti in due tipi: - <ul> - <li><strong>File di codice</strong>: I siti web sono sviluppati basandosi soprattutto su HTML, CSS e JavaScript, anche se conoscerai a breve altre tecnologie.</li> - <li><strong>Risorse</strong>: Questa categoria racchiude tutti gli altri oggetti che costituiscono un sito web, ad esempio: immagini, musica, video, documenti Word e PDF.</li> - </ul> - </li> -</ul> - -<h2 id="Ma_allora_cosa_accade_esattamente">Ma allora: cosa accade esattamente?</h2> - -<p>Quando digiti un indirizzo web all'interno del tuo browser (seguendo la nostra analogia, è come raggiungere il negozio camminando):</p> - -<ol> - <li>Il browser contatta il server DNS e cerca il reale indirizzo del server su cui è ospitato il sito web (equivale a trovare l'indirizzo del negozio).</li> - <li>Il browser invia un messaggio di richiesta HTTP al server, chiedendogli di inviare una copia del sito web al client (equivale ad andare nel negozio e ordinare le merci). Questo messaggio e tutti gli altri dati inviati tra client e server sono inviati attraverso la tua connessione Internet, usando il protocollo TCP/IP.</li> - <li>Se il server approva la richiesta del client, gli invia un messaggio con scritto "200 OK", che significa "Ma certo che puoi guardare quel sito web! Eccolo" e inizia quindi ad inviare i file del sito web al browser in una serie di piccoli pezzi chiamati pacchetti di dati (seguendo l'analogia, al negozio ricevi i tuoi acquisti e li porti a casa).</li> - <li>Il browser assembla i piccoli pezzi in una pagina web completa e te la mostra (nell'analogia, l'ordine arriva alla porta di casa — sfavillante roba nuova, fantastico!).</li> -</ol> - -<h2 id="Chiarimenti_sul_DNS">Chiarimenti sul DNS</h2> - -<p>I veri indirizzi web non sono quelle stringhe semplici e facili da ricordare che inserisci all'interno della tua barra degli indirizzi per cercare i tuoi siti web preferiti. Sono piuttosto numeri speciali dall'aspetto simile a questo: <code>63.245.215.20</code>.</p> - -<p>Si chiama {{Glossary("IP Address", "IP address")}} e rappresenta una posizione unica nel Web. Ad ogni modo, non è molto facile da ricordare, non è vero? Ecco perché sono stati inventati i Domain Name Server. Si tratta di server speciali che abbinano l'indirizzo web che digiti all'interno del tuo browser (come "mozilla.org") all'indirizzo (IP) reale del sito internet.</p> - -<p>I siti web possono essere raggiunti direttamente attraverso il loro indirizzo IP. Puoi trovare l'indirizzo IP di un sito web digitando il suo dominio in uno strumento tipo <a href="https://ipinfo.info/html/ip_checker.php">IP Checker</a>.</p> - -<h2 id="Chiarimenti_sui_pacchetti">Chiarimenti sui pacchetti</h2> - -<p>Prima abbiamo usato il termine "pacchetti" per descrivere il formato in cui i dati sono inviati dal server al client. Che cosa significa? In pratica, quando i dati vengono inviati in tutto il Web, essi sono inviati sotto forma di migliaia di piccoli pezzi in modo tale che differenti utenti possano scaricare lo stesso sito web contemporaneamente. Se i siti web fossero inviati sotto forma di grandi pacchetti singoli, solamente un utente alla volta potrebbe scaricare il che, ovviamente, renderebbe il Web davvero inefficiente e poco divertente da usare.</p> - -<h2 id="Vedi_anche">Vedi anche</h2> - -<ul> - <li><a href="/en-US/Learn/How_the_Internet_works">How the Internet works</a></li> - <li><a href="https://dev.opera.com/articles/http-basic-introduction/">HTTP — an Application-Level Protocol</a></li> - <li><a href="https://dev.opera.com/articles/http-lets-get-it-on/">HTTP: Let’s GET It On!</a></li> - <li><a href="https://dev.opera.com/articles/http-response-codes/">HTTP: Response Codes</a></li> -</ul> - -<h2 id="Credit">Credit</h2> - -<p>Street photo: <a href="https://www.flickr.com/photos/kdigga/9110990882/in/photolist-cXrKFs-c1j6hQ-mKrPUT-oRTUK4-7jSQQq-eT7daG-cZEZrh-5xT9L6-bUnkip-9jAbvr-5hVkHn-pMfobT-dm8JuZ-gjwYYM-pREaSM-822JRW-5hhMf9-9RVQNn-bnDMSZ-pL2z3y-k7FRM4-pzd8Y7-822upY-8bFN4Y-kedD87-pzaATg-nrF8ft-5anP2x-mpVky9-ceKc9W-dG75mD-pY62sp-gZmXVZ-7vVJL9-h7r9AQ-gagPYh-jvo5aM-J32rC-ibP2zY-a4JBcH-ndxM5Y-iFHsde-dtJ15p-8nYRgp-93uCB1-o6N5Bh-nBPUny-dNJ66P-9XWmVP-efXhxJ">Street composing</a>, by <a href="https://www.flickr.com/photos/kdigga/">Kevin D</a>.</p> - -<p>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p> - -<h2 id="In_questo_modulo">In questo modulo</h2> - -<ul> - <li id="Installing_basic_software"><a href="/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a></li> - <li id="What_will_your_website_look_like"><a href="/en-US/Learn/Getting_started_with_the_web/What_will_your_website_look_like">What will your website look like?</a></li> - <li id="Dealing_with_files"><a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a></li> - <li id="HTML_basics"><a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a></li> - <li id="CSS_basics"><a href="/en-US/Learn/Getting_started_with_the_web/CSS_basics">CSS basics</a></li> - <li id="JavaScript_basics"><a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript basics</a></li> - <li id="Publishing_your_website"><a href="/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">Publishing your website</a></li> - <li id="How_the_web_works"><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">How the web works</a></li> -</ul> diff --git a/files/it/learn/getting_started_with_the_web/html_basics/index.html b/files/it/learn/getting_started_with_the_web/html_basics/index.html deleted file mode 100644 index 8ab4970c7c..0000000000 --- a/files/it/learn/getting_started_with_the_web/html_basics/index.html +++ /dev/null @@ -1,217 +0,0 @@ ---- -title: Basi di HTML -slug: Learn/Getting_started_with_the_web/HTML_basics -tags: - - Corso - - Principianti -translation_of: Learn/Getting_started_with_the_web/HTML_basics ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</div> - -<div class="summary"> -<p>HTML (<strong>H</strong>ypertext Markup Language) è il codice usato per strutturare e visualizzare una pagina web e il suo contenuto. Per esempio, il contenuto potrebbe essere strutturato in una serie di paragrafi, un elenco oppure con immagini e tabelle di dati. Come suggerisce il titolo, questo articolo ti fornirà una comprensione di base dell'HTML e delle sue funzioni.</p> -</div> - -<h2 id="Ma_cosè_veramente_lHTML">Ma cos'è veramente l'HTML?</h2> - -<p>HTML non è un linguaggio di programmazione; è un linguaggio basato sui <em>markup</em>, ed è utilizzato per indicare al browser come visualizzare le pagine web che vengono visitate. Può essere complicato o semplice a seconda di come i web designer ne utilizzano le funzionalità. HTML consiste in una serie di <strong>{{Glossary("element", "elementi")}}</strong>, che vengono usati per raggruppare o impacchettare parti differenti del contenuto, per farlo apparire o agire in uno specifico modo. L'uso dei {{Glossary("tag", "tags")}} può fare di una parola o di un'immagine un hyperlink, ossia un collegamento a qualcos'altro, oppure può rendere il testo in corsivo, il font più grande o più piccolo, eccetera. Per esempio, prendiamo la seguente linea del contenuto:</p> - -<pre class="notranslate">My cat is very grumpy</pre> - -<p>Se vogliamo che la linea venga visualizzata isolatamente, possiamo specificare che è un paragrafo, includendola all'interno di tags che identificano il paragrafo:</p> - -<pre class="brush: html notranslate"><p>My cat is very grumpy</p></pre> - -<h3 id="Anatomia_di_un_elemento_HTML">Anatomia di un elemento HTML</h3> - -<p>Analizziamo in maniera più approfondita l'elemento che identifica il paragrafo.</p> - -<p><br> - <img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p> - -<p>Le parti principali dell'elemento sono:</p> - -<ol> - <li><strong>Il tag di apertura:</strong> è il nome dell'elemento (in questo caso, p), incluso tra il <strong>segno di minore</strong> e il <strong>segno di maggiore</strong>. Questo indica dove l'elemento inizia, o dove inizia ad avere effetto — in questo caso indica l'inizio del paragrafo.</li> - <li><strong>Il tag di chiusura:</strong> ha lo stesso formato del tag di apertura ad eccezione della barra che deve precedere il nome dell'elemento. Indica dove termina l'elemento — in questo caso, la fine del paragrafo. Dimenticare di includere il tag di chiusura è uno degli errori più comuni tra i principianti e può portare a risultati imprevisti.</li> - <li><strong>Il contenuto:</strong> Questo rappresenta il contenuto dell'elemento, che nel nostro caso è solo testo.</li> - <li><strong>L'elemento:</strong> Il tag di apertura insieme al tag di chiusura ed al contenuto rappresentano l'elemento.</li> -</ol> - -<p>Gli elementi possono anche avere attributi, come nell'esempio che segue:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p> - -<p>Gli attributi contengono informazioni extra sull'elemento che non si desidera appaiano nel contenuto visualizzato. Nell'esempio, <code>class</code> è il <em>nome</em> dell'attributo, e <code>editor-note</code> è il<em> valore</em> dell'attributo. L'attributo <code>class</code> permette di associare un identificatore all'elemento che potrà essere usato in seguito per applicare all'elemento informazioni di stile e altre cose.</p> - -<p>Un attributo dovrebbe sempre avere:</p> - -<ol> - <li>Uno spazio che lo separa dal nome dell'elemento (o dal precedente attributo, se l'elemento ha già uno o più attributi)</li> - <li>Il nome dell'attributo, seguito dal segno di uguale</li> - <li>Il valore dell'attributo incluso tra doppi apici. </li> -</ol> - -<h3 id="Elementi_annidati">Elementi annidati</h3> - -<p>E' possibile anche inserire elementi all'interno di altri elementi — questa modalità è chiamata <strong>nesting (annidamento)</strong>. Se volessimo affermare che "The cat is <strong>very</strong> grumpy", potremmo racchiudere la parola "very" in un elemento {{htmlelement("strong")}}, che indica che la parola deve essere fortemente enfatizzata:</p> - -<pre class="brush: html notranslate"><p>My cat is <strong>very</strong> grumpy.</p></pre> - -<p>Bisogna tuttavia assicurarsi che gli elementi siano opportunamente annidati: nell'esempio sopra abbiamo aperto il primo elemento {{htmlelement("p")}}, poi l'elemento <span style="background-color: transparent; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal;">{{htmlelement("strong")}}</span>, perciò dobbiamo chiudere l'elemento {{htmlelement("strong")}} per primo, poi l'elemento {{htmlelement("p")}}. L'esempio che segue non è corretto:</p> - -<pre class="example-bad brush: html notranslate"><p>My cat is <strong>very grumpy.</p></strong></pre> - -<p>Gli elementi devono essere aperti e chiusi correttamente in modo che sia chiaro come essi si trovino l'uno all'interno dell'altro. Se si sovrappongono come nell'esempio sopra, il browser web cercherà di interpretare al meglio quello che si sta cercando di dire, ma si potrebbero ottenere risultati inattesi. Quindi non va fatto!</p> - -<h3 id="Elementi_vuoti">Elementi vuoti</h3> - -<p>Alcuni elementi non hanno contenuto, e sono chiamati <strong>elementi vuoti</strong>. Prendiamo l'elemento {{htmlelement("img")}} che abbiamo nel nostro HTML:</p> - -<pre class="brush: html notranslate"><img src="images/firefox-icon.png" alt="My test image"></pre> - -<p>Contiene due attributi, ma non c'è il tag di chiusura <code></img></code> e non c'è un testo incluso. Questo perchè un elemento immagine non deve avere effetti su un testo. Il suo scopo è quello di aggiungere un'immagine alla pagina HTML nel punto in cui si trova.</p> - -<h3 id="Anatomia_di_un_documento_HTML">Anatomia di un documento HTML</h3> - -<p>Include la struttura base dei singoli elementi HTML, che non sono tuttavia molto utili da soli. Ora vedremo come singoli elementi sono combinati per formare un'intera pagina HTML. Riguardiamo il codice che abbiamo inserito nel nostro esempio <code>index.html</code> (che abbiamo incontrato per la prima volta nell'articolo <a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a>):</p> - -<pre class="brush: html notranslate"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>My test page</title> - </head> - <body> - <img src="images/firefox-icon.png" alt="My test image"> - </body> -</html></pre> - -<p>Abbiamo:</p> - -<ul> - <li><code><!DOCTYPE html></code> — Il doctype. Nella notte dei tempi, quando l'HTML era giovane (circa nel 1991/2), doctypes avevano lo scopo di raggruppare un insieme di regole che la pagina HTML doveva seguire per essere considerata buon HTML, come poteva essere il controllo automatico degli errori e altre cose utili. Tuttavia oggi nessuno se ne interessa e sono ormai solo un artefatto storico che necessitano di essere inclusi perchè tutto funzioni correttamente. Per ora, questo è tutto ciò che occorre sapere.</li> - <li><code><html></html></code> — l'elemento {{htmlelement("html")}}. Questo elemento racchiude tutti i contenuti dell'intera pagina, ed è talvolta noto come elemento radice.</li> - <li><code><head></head></code> — l'elemento {{htmlelement("head")}}. Questo elemento fà da contenitore per tutte le cose che si vuole includere nella pagina HTML che <em>non siano</em> il contenuto che si vuole mostrare ai visitatori della pagina. Tra queste ci sono cose come {{Glossary("keyword", "keywords")}} e una descrizione della pagina che si vuole appaia nei risultati di ricerca, CSS per lo stile dei contenuti, dichiarazione del set di caratteri e altro.</li> - <li><code><meta charset="utf-8"></code> — questo elemento imposta il set di caratteri che il documento deve usare su UTF-8, che include la maggior parte dei caratteri della stragrande maggioranza delle lingue umane scritte. Essenzialmente può gestire qualsiasi contenuto testuale che può essere inserito. Non c'è motivo per non impostarlo, e può evitare di incorrere in problemi in seguito.</li> - <li><code><title></title></code> — l'elemento {{htmlelement("title")}}. Imposta il titolo della pagina, che è il titolo che appare nella scheda del browser in cui è caricata la pagina. E' anche usato per descrivere la pagina quando viene aggiunta ai preferiti.</li> - <li><font color="#333333" face="Consolas"><body></body></font><span style="background-color: transparent; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal;"> — l'elemento {{htmlelement("body")}}. Contiene </span><em>tutto</em><span style="background-color: transparent; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal;"> il contenuto che si vuole mostrare agli utenti web quando visitano la pagina, che si tratti di testo, immagini, video, giochi, tracce audio riproducibili o qualsiasi altra cosa.</span></li> -</ul> - -<h2 id="Immagini">Immagini</h2> - -<p>Rivolgiamo ancora la nostra attenzione all'elemento {{htmlelement("img")}}:</p> - -<pre class="brush: html notranslate"><img src="images/firefox-icon.png" alt="My test image"></pre> - -<p>Come abbiamo detto prima, quest'elemento aggiunge un'immagine nella pagina, nella posizione in cui si trova. E' l'attributo <code>src</code> (source) che fa questo, contenendo il percorso del file immagine.</p> - -<p>Abbiamo anche incluso l'attributo <code>alt</code> (alternative). In questo attributo viene specificato il testo descrittivo per quegli utenti che non possono visualizzare l'immagine, probabilmente per i seguenti motivi:</p> - -<ol> - <li>Sono ipovedenti. Gli utenti con disabilità visive significative spesso usano strumenti chiamati screen reader che leggono per loro il testo dell'elemento alt</li> - <li>Qualcosa è andato storto causando la mancata visualizzazione dell'immagine. Per esempio, se si prova a modificare deliberatamente il percorso all'interno dell'attributo <code>src</code> per renderlo errato. Salvando e ricaricando la pagina, si dovrebbe vedere qualcosa di simile a ciò che segue, al posto dell'immagine:</li> -</ol> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9349/alt-text-example.png" style="display: block; height: 36px; margin: 0px auto; width: 108px;"></p> - -<p>Le parole chiave per il testo nell'alt sono "testo descrittivo". Il testo che viene scrito nell'alt dovrebbe fornire al lettore informazioni sufficienti per avere una buona idea di ciò che l'immagine rappresenta. In questo esempio, il testo attuale "My test image" non è per niente adatto. Un'alternativa decisamente migliore per il logo di Firefox potrebbe essere "Il logo di Firefox: una volpe fiammeggiante che circonda la Terra."</p> - -<p>Prova subito a trovare un testo adatto per l'alt delle tua immagine.</p> - -<div class="note"> -<p><strong>Nota</strong>: Scopri di più sull'accessibilità al link <a href="/en-US/docs/Web/Accessibility">MDN's Accessibility landing page</a>.</p> -</div> - -<h2 id="Marcatura_del_testo">Marcatura del testo</h2> - -<p>Questa sezione riguarda alcuni elementi HTML di base che vengono usati per la marcatura del testo.</p> - -<h3 id="Intestazioni">Intestazioni</h3> - -<p>Gli elementi Intestazioni permettono di specificare che alcune parti del contenuto sono titoli — o sottotitoli. Allo stesso modo in cui un libro ha un titolo principale, titoli di capitoli e sottotitoli, così anche un documento HTML. HTML contiene sei livelli di intestazione, {{htmlelement("h1")}}–{{htmlelement("h6")}} sebbene in genere se ne usino da 3 a 4 al massimo:</p> - -<pre class="brush: html notranslate"><h1>My main title</h1> -<h2>My top level heading</h2> -<h3>My subheading</h3> -<h4>My sub-subheading</h4></pre> - -<p>Ora prova ad aggiungere un titolo adatto alla tua pagina HTML appena sopra l'elemento {{htmlelement("img")}}.</p> - -<h3 id="Paragrafi">Paragrafi</h3> - -<p>Come spiegato sopra, gli elementi {{htmlelement("p")}} sono usati per contenere paragrafi di testo; verranno usati di frequente per contrassegnare contenuti di testo regolari:</p> - -<pre class="brush: html notranslate"><p>This is a single paragraph</p></pre> - -<p>Aggiungi il tuo testo di esempio (dovresti averlo dall'articolo <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like"><em>What should your website look like?</em></a>) in uno o più paragrafi, direttamente sotto l'elemento {{htmlelement("img")}}.</p> - -<h3 id="Liste">Liste</h3> - -<p>Molti contenuti web sono elenchi, e l'HTML ha elementi speciali per gestirli. La marcatura di liste consiste sempre in almeno due elementi. I tipi più comuni di lista sono le liste ordinate e le liste non ordinate:</p> - -<ol> - <li> - <p><strong>Le liste non ordinate </strong>sono liste in cui l'ordine degli articoli non ha importanza, come in una lista della spesa. Queste sono racchiuse in un elemento {{htmlelement("ul")}}.</p> - </li> - <li><strong>Le liste ordinate</strong> sono liste dove l'ordine degli articoli ha importanza, come in una ricetta. Queste sono racchiuse in un elemento {{htmlelement("ol")}}.</li> -</ol> - -<p>Ogni articolo all'interno delle liste è inserito all'interno di un elemento {{htmlelement("li")}} (list item).</p> - -<p>Per esempio, se volessimo convertire una parte del seguente paragrafo in una lista:</p> - -<pre class="brush: html notranslate"><p>At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... </p></pre> - -<p>Potremmo modificare la marcatura così:</p> - -<pre class="brush: html notranslate"><p>At Mozilla, we’re a global community of</p> - -<ul> - <li>technologists</li> - <li>thinkers</li> - <li>builders</li> -</ul> - -<p>working together ... </p></pre> - -<p>Prova ad aggiungere una lista ordinata e una non ordinata alla tua pagina di esempio.</p> - -<h2 id="I_collegamenti">I collegamenti</h2> - -<p>I link sono molto importanti — sono quelli che rendono il web una rete! Per aggiungere un collegamento, si deve usare un semplice elemento — {{htmlelement("a")}} — la "a" è l'abbreviazione di "anchor". Per convertire il testo del paragrafo in un link, seguire i seguenti passaggi:</p> - -<ol> - <li>Scegliere il testo. Noi abbiamo scelto "Mozilla Manifesto".</li> - <li>Includere il testo in un elemento {{htmlelement("a")}}, come segue: - <pre class="brush: html notranslate"><a>Mozilla Manifesto</a></pre> - </li> - <li>Dare all'elemento {{htmlelement("a")}} un attributo <code>href</code>, come segue: - <pre class="brush: html notranslate"><a href="">Mozilla Manifesto</a></pre> - </li> - <li>Compilare il valore di quest'attributo con l'indirizzo web a cui si desidera che il collegamento si colleghi: - <pre class="brush: html notranslate"><a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a></pre> - </li> -</ol> - -<p>Si potrebbero ottenere risultati imprevisti se si omettono <code>https://</code> o <code>http://</code>, che sono chiamati <em>protocollo</em>, all'inizio dell'indirizzo web. Dopo aver impostato un link, fare click su di esso per assicurarsi che si colleghi dove desiderato.</p> - -<div class="note"> -<p><code>href</code> potrebbe apparire in un primo momento come una scelta piuttosto oscura per un nome di attributo. Se hai difficoltà a memorizzarlo, ricorda che sta per <em><strong>h</strong>ypertext <strong>ref</strong>erence</em>.</p> -</div> - -<p>Ora puoi aggiungere un link alla tua pagina, se ancora non l'hai fatto.</p> - -<h2 id="Conclusione">Conclusione</h2> - -<p>Se hai seguito tutte le istruzioni di questo articolo, dovresti aver ottenuto una pagina che assomiglia a questa riportata sotto (può essere anche visualizzata da questo link <a href="http://mdn.github.io/beginner-html-site/">view it here</a>):<br> - <br> - <img alt="A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text" src="https://mdn.mozillademos.org/files/9351/finished-test-page-small.png" style="display: block; height: 838px; margin: 0px auto; width: 716px;"></p> - -<p>Se ti sei bloccato, puoi sempre confrontare il tuo lavoro con il codice di esempio <a href="https://github.com/mdn/beginner-html-site/blob/gh-pages/index.html">finished example code</a> che trovi su GitHub.</p> - -<p>Qui, abbiamo solo graffiato la superficie dell'HTML. Per saperne di più, vai al seguente link <a href="/en-US/Learn/HTML">HTML Learning topic</a>.</p> - -<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</p> diff --git a/files/it/learn/getting_started_with_the_web/index.html b/files/it/learn/getting_started_with_the_web/index.html deleted file mode 100644 index a079b7905b..0000000000 --- a/files/it/learn/getting_started_with_the_web/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Primi Passi con il Web -slug: Learn/Getting_started_with_the_web -tags: - - Beginner - - CSS - - Design - - Guide - - HTML - - Índice -translation_of: Learn/Getting_started_with_the_web ---- -<div>{{LearnSidebar}} -<div></div> -</div> - -<div class="summary"> -<p><em>Primi passi con il Web</em> è una breve introduzione alle tecniche dello sviluppo web. Inizieremo conoscendo e impostando gli strumenti necessari per disegnare una semplice pagina web e pubblicare il tuo codice.</p> -</div> - -<h2 id="La_storia_del_tuo_primo_sito_web">La storia del tuo primo sito web</h2> - -<p>Creare un sito web professionale non è certo un lavoro breve, se ti approcci per la prima volta allo sviluppo web ti suggeriamo di partire imparando le basi. Non abbiamo la pretesa di creare un nuovo Facebook ma non è difficile pubblicare il tuo semplice sito online; inizieremo da qua.</p> - -<p>Seguendo le istruzioni contenute nei successivi articoli vedrai la tua prima pagina web pubblicata. Iniziamo!</p> - -<h3 id="Installare_il_software_fondamentale"><a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installare il software fondamentale</a></h3> - -<p>Quando si tratta di strumenti per lo sviluppo web ci sono molti software utili. Se stai iniziando potresti essere confuso dalla quantità di editor, framework e strumenti per testing che ci sono. Nella sezione <a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installare il software fondamentale</a> puoi trovare guide passo-passo su come installare tutti gli strumenti che ti serviranno per iniziare con lo sviluppo.</p> - -<h3 id="Che_aspetto_avrà_il_tuo_sito_web"><a href="https://wiki.developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/Che_aspetto_avr%C3%A0_il_tuo_sito_web">Che aspetto avrà il tuo sito web?</a></h3> - -<p>Prima di iniziare a disegnare il tuo sito è meglio pensare a come farlo. Quali informazioni intendi mostrare? Che fonts e che colori vuoi usare? <a href="https://wiki.developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/Che_aspetto_avr%C3%A0_il_tuo_sito_web">Come sarà il tuo sito?</a> Ti forniamo un semplice metodo da seguire per pianificare la struttura del sito e il suo contenuto.</p> - -<h3 id="Gestire_i_file"><a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/Gestire_i_file">Gestire i file</a></h3> - -<p>Un sito web contiene molti file con diversi tipi di contenuto: testuale, codice, css, multimediale e così via. Quando si tratta di costruire un sito è necessario assemblare questi documenti in una struttura concreta ed assicurarsi che questi file possano interfacciasi l'un l'altro. <a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/Gestire_i_file">Gestire i file</a> ti spiega come impostare una struttura per il tuo sito e illustra i problemi dei quali essere consapevoli.</p> - -<h3 id="Principi_di_HTML"><a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/HTML_basics">Principi di HTML</a></h3> - -<p>Hypertext Markup Language (HTML) è il linguaggio utilizzato per strutturare il contenuto web e fornirgli forma e significato. Consente, per esempio, di crere paragrafi o elenchi puntati; permette inoltre di disporre le immagini all'interno della pagina, di inserire tabelle o altri contenuti. <a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/HTML_basics">Principi di HTML</a> mette a disposizione abbastanza informazioni per approcciarsi all'HTML.</p> - -<h3 id="Principi_di_CSS"><a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/CSS_basics">Principi di CSS</a></h3> - -<p>Cascading Stylesheets (CSS) è il tipo di codice utilizzato per aggiungere lo stile al sito. Per esempio, preferisci che il testo sia rosso oppure nero? Dove dovrebbe essere posto il contenuto sullo schermo? Che immagini di sfondo o colori dovrebbero essere inseriti per decorare la tua pagina? <a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/CSS_basics">Principi di CSS</a> ti illustra le basi necessarie per iniziare.</p> - -<h3 id="Principi_di_JavaScript"><a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Principi di JavaScript</a></h3> - -<p>JavaScript è il linguaggio di programmazione usato per aggiungere contenuto interattivo al tuo sito, come giochi, cose che accadono alla pressione di un pulsante o all'inserimento di informazioni in un form, effetti di stile dinamici, animazioni e molto altro. <a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Principi di JavaScript</a> fornisce un'idea di cosa sia possibile fare con questo interessante linguaggio e di come iniziare.</p> - -<h3 id="Pubblicare_il_tuo_sito"><a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/Pubbicare_sito">Pubblicare il tuo sito</a></h3> - -<p>Una volta completata la scrittura del codice e organizzati i file che compongono il tuo sito è ovvimente necessario porre il tutto online, così che le persone possano trovarlo ed apprezzarlo. <a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/Pubbicare_sito">Pubblicare il tuo sito </a>descrive come compiere questo processo in modo facile e col minimo sforzo.</p> - -<h3 id="Come_funziona_il_Web"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">Come funziona il Web</a></h3> - -<p>Quando accedi al tuo sito preferito, accadono una serie di complicati processi in background, dei quali potresti non sapere nulla. <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">Come funziona il web</a> spiega quello che accade quando visualizzi una pagina sul tuo computer.</p> - -<p>{{Next("Learn/Getting_started_with_the_web/Installing_basic_software")}}</p> diff --git a/files/it/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/it/learn/getting_started_with_the_web/installing_basic_software/index.html deleted file mode 100644 index 8f4871eb46..0000000000 --- a/files/it/learn/getting_started_with_the_web/installing_basic_software/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Installazione di software fondamentali -slug: Learn/Getting_started_with_the_web/Installing_basic_software -translation_of: Learn/Getting_started_with_the_web/Installing_basic_software ---- -<div>{{LearnSidebar}}</div> - -<div>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</div> - -<div class="summary"> -<p>In questo articolo, ti mostriamo come eseguire l'installazione di tutti i software necessari per iniziare con lo sviluppo web.</p> -</div> - -<h2 id="Quali_strumenti_utilizzano_i_professionisti">Quali strumenti utilizzano i professionisti?</h2> - -<ul> - <li><strong>Un computer</strong>. Certo, potrebbe sembrare ovvio, ma alcuni di voi staranno leggendo questo articolo su un telefono o sul computer della biblioteca. Per iniziare seriamente con lo sviluppo web, sarebbe meglio investire in un computer di tuo possesso, con un qualsiasi sistema operativo (Windows, Mac, o Linux).</li> - <li><strong>Un editor di testo</strong>, dove scrivere il codice. Si possono utilizzare editor di testo (es. <a href="http://brackets.io/">Brackets</a>, <a href="https://atom.io/">Atom</a> o <a href="https://code.visualstudio.com/">Visual Studio Code</a>), oppure un editor ibrido (es. <a href="https://www.adobe.com/products/dreamweaver.html">Dreamweaver</a>). Editors per documenti da ufficio (es. Word o OpenOffice) non sono adatti allo scopo, siccome fanno affidamento su elementi nascosti che interferiscono con i motori di rendering usati dai browser web.</li> - <li><strong>Web browsers</strong>, per testare il codice. Al momento, i browser più utilizzati sono <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a>, e <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a>. Dovrestii anche testare il tuo sito su dispositivi mobili e sui vecchi web browser che i tuoi visitatori potrebbero ancora usare (come IE 8 - 10, ad esempio).</li> - <li><strong>Un editor grafico</strong>, come <a href="http://www.gimp.org/">GIMP</a>, <a href="http://www.getpaint.net/">Paint.NET</a>, o <a href="https://www.adobe.com/products/photoshop.html">Photoshop</a>, per creare immagini da usare nel tuo sito.</li> - <li><strong>Un version control system</strong>, per gestire i file sui server, collaborare ad un progetto con un team, condividere assets e codici, ed evitare conflitti di modifica. <a href="http://git-scm.com/">Git</a> è attualmente il version control system più utilizzato, ed inoltre il servizio di code hosting fornito da <a href="https://github.com/">GitHub</a>, basato su Git, è molto popolare.</li> - <li><strong>Un programma FTP</strong>, usato su degli account di webhosting più vecchi per gestire i file sui server (<a href="http://git-scm.com/">Git</a> sta pian piano rimpiazzando FTP per questo motivo). Esistono diversi programmi (S)FTP disponibili come ad esempio <a href="https://cyberduck.io/">Cyberduck</a>, <a href="http://fetchsoftworks.com/">Fetch</a>, e <a href="https://filezilla-project.org/">FileZilla</a>.</li> - <li><strong>Un automation system</strong>, come <a href="http://gruntjs.com/">Grunt</a> o <a href="http://gulpjs.com/">Gulp</a>, per compiere automaticamente attività ripetitive, ad esempio minimizzare il codice ed eseguire test.</li> - <li>Templates, librerie, frameworks, ecc., per velocizzare la scrittura di funzionalità comuni.</li> - <li>Ed anche altri strumenti!</li> -</ul> - -<h2 id="Di_quali_strumenti_ho_bisogno_in_questo_momento">Di quali strumenti ho bisogno, in questo momento?</h2> - -<p>Sembra proprio una lista terrificante, fortunatamente puoi iniziare ad occuparti di web development senza sapere nulla di molto di ciò elencato. In questo articolo ti mostreremo quali sono gli strumenti indispensabili per incominciare — un editor di testo e qualche browser web moderno.</p> - -<h3 id="Installare_un_editor_di_testo">Installare un editor di testo</h3> - -<p>Probabilmente hai già un editor di testo di base nel tuo computer. Windows ha <a href="https://en.wikipedia.org/wiki/Microsoft_Notepad">Notepad</a> di default mentre macOS ha <a href="https://en.wikipedia.org/wiki/TextEdit">TextEdit</a>. Le distro Linux variano; Ubuntu ha <a href="https://en.wikipedia.org/wiki/Gedit">gedit</a> di default.</p> - -<p>Per il web development, puoi probabilmente avere di meglio che NotePad o TextEdit. Noi raccomandiamo di iniziare con <a href="http://brackets.io">Brackets</a>, un editor gratuito che offre anteprime live e suggerimenti sul codice.</p> - -<h3 id="Installare_browser_web_moderni">Installare browser web moderni</h3> - -<p>Per adesso, installeremo solamente un paio di browser web per desktop per testarci il nostro codice. Scegli più sotto il tuo sistema operativo e clicca sui relativi link per scaricare il file d'installazione per il tuo browser preferito:</p> - -<ul> - <li>Linux: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>.</li> - <li>Windows: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a> (Windows 10 contiene Edge di default; se hai Windows 7 o superiore, puoi installare Internet Explorer 11; altrimenti, dovresti installare un browser alternativo)</li> - <li>Mac: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a> (maxOS e IOS contengono Safari di default)</li> -</ul> - -<p>Prima di andare avanti, dovresti installare almeno due di questi browser e assicurarti di averli pronti per il testing.</p> - -<h3 id="Installazione_di_un_server_Web_locale">Installazione di un server Web locale</h3> - -<p>Alcuni esempi dovranno essere eseguiti da un server Web per funzionare correttamente. Per informazioni su come eseguire questa operazione, vedere Come si configura un server di prova locale? (<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server">How do you set up a local testing server?</a> )</p> - -<p>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</p> diff --git a/files/it/learn/getting_started_with_the_web/javascript_basics/index.html b/files/it/learn/getting_started_with_the_web/javascript_basics/index.html deleted file mode 100644 index bb12f8680e..0000000000 --- a/files/it/learn/getting_started_with_the_web/javascript_basics/index.html +++ /dev/null @@ -1,402 +0,0 @@ ---- -title: Basi di JavaScript -slug: Learn/Getting_started_with_the_web/JavaScript_basics -tags: - - JavaScript -translation_of: Learn/Getting_started_with_the_web/JavaScript_basics ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div> - -<div class="summary"> -<p>JavaScript è un linguaggio di programmazione che aggiunge interattività al tuo sito internet (per esempio: giochi, risposte al premersi di un bottone o inserimento di dati in moduli, stili dinamici e animazioni). Questo articolo ti aiuterà a iniziare il tuo percorso in questo fantastico linguaggio dandoti un'idea di ciò che è possibile costruire (spoiler alert: molte, molte cose).</p> -</div> - -<h2 id="Cosè_JavaScript_davvero">Cos'è JavaScript, davvero?</h2> - -<p>{{Glossary("JavaScript")}} ("JS" per i fan) è un {{Glossary("Dynamic programming language", "linguaggio dinamico di programmazione")}} che, quando applicato a un documento {{Glossary("HTML")}}, può dare interattività dinamica al sito web. Fu inventato da Brendan Eich, co fondatore del Mozilla project, Mozilla Foundation e Mozilla Corporation.</p> - -<p>JavaScript è incredibilmente versatile. Puoi iniziare dal piccolo, con slider (carousel), gallerie di immagini, layout fluttuanti, risposte al premersi di un bottone. Con più esperienza sarai in grado di creare giochi, grafiche animate 2D e 3D, applicazioni con database e molto altro!</p> - -<p>JavaScript è un linguaggio abbastanza compatto ma comunque flessibile. Gli Sviluppatori hanno scritto una grande varietà di plugins e snippets di codice da inserire sopra al linguaggio nativo che è il cuore di JavaScript, aprendo alle potenzialità e alle extra funzionalità del linguaggio, diminuendo gli sforzi. Queste includono:</p> - -<ul> - <li>Application Programming Interfaces per il Browser ({{Glossary("API","APIs")}}) — Le API all'interno dei web browsers regalano funzionalità come la creazione dinamica di HTML e stili CSS, la collezione e manipolazione di streaming video dalla webcam dell'utente o la generazione di grafiche 3D o di audio. </li> - <li>API di terze parti permettono agli Sviluppatori di incorporare funzionalità nei loro siti da altri providers come Twitter o Facebook.</li> - <li>Framework e librerie di terze parti possono essere applicate al tuo HTML per permetterti di costruire siti e applicazioni più rapidamente.</li> -</ul> - -<p>Questo articolo vuole essere una leggera introduzione a JavaScript, non andremo a confoderti parlando dei dettagli e delle differenze tra il linguaggio nativo di JavaScript e tutte le varie librerie e framework che sono state costruite. Potrai imparare più in dettaglio nell'<a href="/en-US/docs/Learn/JavaScript">area di apprendimento JavaScript</a>, oppure nel resto di MDN.</p> - -<p>Sotto introdurremo alcuni aspetti del linguaggio nativo e potrai giocare anche con alcune delle API del browser. Divertiti!</p> - -<h2 id="ciao_mondo">"ciao mondo"</h2> - -<p>Quanto scritto sopra potrebbe sembrare eccitante, e dovrebbe — JavaScript è una delle tecnologie più vivaci e iniziando a usarlo, i tuoi siti si apriranno a nuove dimensioni di potere e creatività.</p> - -<p>Ad ogni modo, JavaScript è un po' più complesso di HTML e CSS (che non sono propriamente linguaggi di programmazione, bensì di markup e di stile). Puoi iniziare con piccole cose come questa qui sotto. Iniziamo con l'aggiungere del JavaScript di base alla nostra pagina creando un esempio "ciao mondo" (<a href="https://en.wikipedia.org/wiki/%22Hello,_World!%22_program">lo standard negli esempi base di programmazione</a>).</p> - -<div class="warning"> -<p><strong>Importante</strong>: Se non hai seguito il resto del corso, scarica questo <a href="https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip">esempio</a> e usalo come punto di inizio.</p> -</div> - -<ol> - <li>Per prima cosa andiamo dove abbiamo salvato il nostro sito di test e creiamo una nuova cartella 'scripts' (senza gli apici). Poi al suo interno creiamo un file e chiamiamolo <code>main.js</code> (questo file è uno script di JavaScript).</li> - <li>Poi, nel tuo file <code>index.html </code>inserisci questo elemento in una nuova riga prima del tag di chiusura <code></body></code>: - <pre class="brush: html notranslate"><script src="scripts/main.js"></script></pre> - </li> - <li>Praticamente stiamo facendo quello che avremmo fatto per un file di stile CSS con {{htmlelement("link")}} - applichiamo il JavaScript alla pagina così che possa avere effetto su questa (e così anche sul CSS e qualsiasi altra cosa sulla pagina).</li> - <li>Ora aggiungi questo snippet di codice al file <code>main.js</code>: - <pre class="brush: js notranslate">var myHeading = document.querySelector('h1'); // Seleziono tutti i tag h1 -myHeading.textContent = 'Hello world!'; // Cambio il testo</pre> - </li> - <li>Assicurati che i file HTML e JavaScript siano salvato e carica index.html nel browser. Dovresti vedere qualcosa di simile:<img alt="" src="https://mdn.mozillademos.org/files/9543/hello-world.png" style="display: block; height: 236px; margin: 0px auto; width: 806px;"></li> -</ol> - -<div class="note"> -<p><strong>Note</strong>: Abbiamo inserito l'elemento script sul fondo della pagina HTML perchè l'HTML carica in ordine lettura, in maniera sincrona. Se il JavaScript venisse caricato prima e non in fondo alla pagina, potrebbe causare dei problemi in quanto sarebbe caricato prima dell'HTML su cui lo script lavorerebbe, ma non sempre è così. Di solito è buona pratica, anche per i tempi di caricamento, inserire il JavaScript a fine pagina HTML, ma ciò può cambiare a seconda delle necessità.</p> -</div> - -<h3 id="Cosè_successo">Cos'è successo?</h3> - -<p>Il testo nell'elemento <code>h1</code> è stato cambiato in "Hellow world!" usando JavaScript. Lo hai fatto utilizzando una funzione chiamata <code>{{domxref("Document.querySelector", "querySelector()")}}</code> per prendere un riferimento del tuo elemento <code>h1</code> e poi salvando l'elemento in una variabile chiamata <code>myHeading</code>. Questo è molto simile a quello che abbiamo fatto con i selettori CSS. Quando vogliamo fare qualcosa con un elemento, dobbiamo prima selezionarlo.</p> - -<p>Dopo aver selezionato l'elemento e averlo inserito nella variabile <code>myHeading</code>, hai cambiato la proprietà <code>{{domxref("Node.textContent", "textContent")}}</code> , una proprietà che fa parte nativamente degli elementi HTML grazie alla <a href="/en-US/docs/Web/API/Document_Object_Model">DOM API</a>, in "Hello world!".</p> - -<div class="note"> -<p><strong>Nota</strong>: Entrambe le funzionalità che hai usato fanno parte della <a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model (DOM) API</a>, che ti permette di manipolare i documenti HTML.</p> -</div> - -<h2 id="Basi_del_linguaggio">Basi del linguaggio</h2> - -<p>Parliamo di alcune delle funzionalità principali del linguaggio JavaScript, per darti un'idea migliore di come tutto funziona. Inoltre, alcune di queste funzionalità sono comuni a tutti i linguaggi di programmazione. Se riuscirai a padroneggiare queste fondamenta, sarai sulla strada giusta per programmare più o meno tutto!</p> - -<div class="warning"> -<p><strong>Importante</strong>: In questo articolo, prova a inserire il codice di esempio nella tua console di JavaScript per vedere cosa succede. Per maggiori dettagli sulle console di JavaScript vedi <a href="/en-US/Learn/Discover_browser_developer_tools">Scoprire i tool di sviluppo del browser</a></p> -</div> - -<h3 id="Variabili">Variabili</h3> - -<p>{{Glossary("Variable", "Le Variabili")}} sono contenitori dove puoi immagazzinare o salvare dei valori. Puoi iniziare dichiarando una variabile con la parola chiave var, seguita da qualsiasi nome tu voglia (più o meno <a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Lexical_grammar">JavaScript Keywords and Preserved Words</a>):</p> - -<pre class="brush: js notranslate">var myVariable; // ok -var _myVariable; // ok -var $myVariable; // ok -var my_Variable; // ok -var -myVariable; // error -var delete; // error, preserved keyword -myVariable; // error</pre> - -<div class="note"> -<p><strong>Nota</strong>: Il punto e virgola indica la fine di un'istruzione; è solo necessario quando devi separare le varie istruzioni su una singola riga, ma è anche buona pratica. Ci sono altre regole per sapere quando usarli e quando non usarli - vedi <a href="https://www.codecademy.com/blog/78">Your Guide to Semicolons in JavaScript</a> per maggiori dettagli.</p> -</div> - -<div class="note"> -<p><strong>Nota</strong>: Puoi chiamare una variabile più o meno con qualsiasi nome ma ci sono alcune regole o restrizioni da seguire (vedi <a href="http://www.codelifter.com/main/tips/tip_020.shtml">questo articolo</a>). Se non sei sicuro puoi <a href="https://mothereff.in/js-variables">controllarne la validità</a>.</p> -</div> - -<div class="note"> -<p><strong>Nota</strong>: JavaScript è case sensitive quindi <code>myVariable</code> e <code>myvariable</code> sono due variabili diverse. Se riscontri dei problemi nel tuoi codice, controlla le lettere!</p> -</div> - -<p>Dopo aver dichiarato la variabile, puoi dargli un valore:</p> - -<pre class="brush: js notranslate">myVariable = 'Bob';</pre> - -<p>Oppure puoi usare una scorciatoia e unire i passaggi:</p> - -<pre class="brush: js notranslate">var myVariable = 'Bob';</pre> - -<p>Puoi richiamare il valore della variabile chiamandola:</p> - -<pre class="brush: js notranslate">myVariable;</pre> - -<p>Dopo avergli assegnato un valore puoi anche cambiarlo:</p> - -<pre class="notranslate">var myVariable = 'Bob'; -myVariable = 'Steve';</pre> - -<p>Nota che queste variabili sono di <a href="/en-US/docs/Web/JavaScript/Data_structures">tipi diversi</a>:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="row">Variable</th> - <th scope="col">Explanation</th> - <th scope="col">Example</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row">{{Glossary("String")}}</th> - <td>Per denotare che una variabile è una stringa, dovresti metterne il valore tra virgolette.</td> - <td><code>var myVariable = 'Bob';</code></td> - </tr> - <tr> - <th scope="row">{{Glossary("Number")}}</th> - <td>I numeri non hanno virgolette intorno a loro.</td> - <td><code>var myVariable = 10;</code></td> - </tr> - <tr> - <th scope="row">{{Glossary("Boolean")}}</th> - <td> - <p>Un valore Vero/Falso. Le parole <code>true</code> e <code>false</code> sono parole chiave in JS e non hanno bisogno di virgolette.</p> - </td> - <td><code>var myVariable = true;</code></td> - </tr> - <tr> - <th scope="row">{{Glossary("Array")}}</th> - <td>Una struttura che ti permette di immagazzinare più valori su un singolo riferimento.</td> - <td><code>var myVariable = [1,'Bob','Steve',10];</code><br> - Riferisciti a ogni membro dell'array:<br> - <code>myVariable[0]</code>, <code>myVariable[1]</code>, etc.</td> - </tr> - <tr> - <th scope="row">{{Glossary("Object")}}</th> - <td>Tutto in JavaScript è un oggetto e può essere salvato in una variabile. Tienilo a mente mentre impari.</td> - <td><code>var myVariable = document.querySelector('h1');</code></td> - </tr> - </tbody> -</table> - -<p>Quindi perchè abbiamo bisogno delle variabili? Le variabili sono necessarie per rendere le cose interessanti nella programmazione. Se i valori non potessero cambiare non potremmo fare niente di dinamico, come personalizzare un messaggio di benvenuto o cambiare l'immagine mostrata in una galleria d'immagini.</p> - -<h3 id="Commenti">Commenti</h3> - -<p>Puoi commentare il tuo codice JavaScript come faresti con il CSS:</p> - -<pre class="brush: js notranslate">/* -Qui dentro è un commento -*/</pre> - -<p>Se il tuo commento non contiene più di una riga è a volte più semplice fare un commento <code>inline</code>:</p> - -<pre class="brush: js notranslate" style="font-size: 14px;">// Questo è un commento inline -</pre> - -<h3 id="Operatori">Operatori</h3> - -<p>Un <code>{{Glossary("operatore")}}</code> è un simbolo matematico che produce risultati basandosi su due valori (o variabili). Nella seguente tabella puoi vedere gli operatori più semplici seguiti da alcuni esempi di JavaScript che puoi provare nella tua console.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="row">Operator</th> - <th scope="col">Explanation</th> - <th scope="col">Symbol(s)</th> - <th scope="col">Example</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row">addizione/concatenazione</th> - <td>Usato per fare la somma tra due numeri o incollare insieme due stringhe.</td> - <td><code>+</code></td> - <td><code>6 + 9;<br> - "Hello " + "world!";</code></td> - </tr> - <tr> - <th scope="row">sottrazione,moltiplicazione,divisione</th> - <td>Queste fanno ciò che ci si aspetta.</td> - <td><code>-</code>, <code>*</code>, <code>/</code></td> - <td><code>9 - 3;<br> - 8 * 2; // per moltiplicare in JS si usa l'asterisco<br> - 9 / 3;</code></td> - </tr> - <tr> - <th scope="row">operatore di assegnazione</th> - <td>L'hai già visto. Serve per assegnare un valore a una variabile.</td> - <td><code>=</code></td> - <td><code>var myVariable = 'Bob';</code></td> - </tr> - <tr> - <th scope="row">operatore di identità</th> - <td>Fa un test per vedere se due variabili sono uguali o meno e restituisce un valore <code>booleano</code> (<code>true</code>/<code>false</code>)</td> - <td><code>===</code></td> - <td><code>var myVariable = 3;<br> - myVariable === 4; // false</code></td> - </tr> - <tr> - <th scope="row">negazione, non uguale</th> - <td>Restituisce l'opposto logico.</td> - <td><code>!</code>, <code>!==</code></td> - <td> - <p>L'espressione di base è <code>true</code> ma restituisce <code>false</code> perchè l'abbiamo negata:</p> - - <p><code>var myVariable = 3;<br> - !(myVariable === 3);</code></p> - - <p>Qui testiamo che <code>myVariable</code> NON E' UGUALE a 3". Questo restituisce <code>false</code> perchè <code>myVariable</code> E' uguale a 3.</p> - - <p><code><code>var myVariable = 3;</code><br> - myVariable !== 3;</code></p> - </td> - </tr> - </tbody> -</table> - -<p>Ci sono molti altri operatori da esplorare, per ora va bene così. Vedi <a href="/en-US/docs/Web/JavaScript/Reference/Operators">Espressioni e operatori </a>per una lista completa.</p> - -<div class="note"> -<p><strong>Nota</strong>: Mischiare tipi di dati diversi può portare a strani comportamenti quando andiamo a affrontare calcoli quindi stai attento a riferirti alle variabili corretamente per avere il risultato che ti aspetti. Per esempio, "35" + "25" non darà il risultato sperato, questo perchè i numeri sono stati messi tra virgolette e sono diventati stringhe. In questo caso stiamo facendo una concatenazione di stringhe, non un'addizione, quindi il risultato sarà 3525. Togliendo le virgolette il risultato sarà quello che ci aspettavamo.</p> -</div> - -<h3 id="Condizionali">Condizionali</h3> - -<p>I Condizionali sono strutture di codice che ci permettono di testare delle espressioni che restituiscono valore vero o falso, facendo funzionare parti di codice a seconda del risultato. La forma più comune è chiamata <code>if</code> <code>...</code> <code>else</code>. Quindi per esempio:</p> - -<pre class="brush: js notranslate">var iceCream = 'chocolate'; -if (iceCream === 'chocolate') { - alert('Yay, I love chocolate ice cream!'); -} else { - alert('Awwww, but chocolate is my favorite...'); -}</pre> - -<p>L'espressione dentro il condizionale<code> if ( ... ) </code>è il test — questo usa l'operatore di identità (come descritto sopra) per comparare la variabile <code>iceCream</code> con la stringa <code>"chocolate" </code>per vedere se sono uguali. Se la comparazione restituisce true, il primo blocco di codice viene eseguito, altrimenti (<code>else</code>) si passa al secondo blocco di codice.</p> - -<h3 id="Funzioni">Funzioni</h3> - -<p>{{Glossary("Function", "Le Funzioni")}} sono un modo di impacchettare funzionalità che pensi di riutilizzare. Quando hai bisogno di una procedura puoi chiamare una funzione con il suo nome invece di riscrivere lo stesso codice ogni volta. Avrai visto alcuni esempi di usi di funzione, per esempio:</p> - -<ol> - <li> - <pre class="brush: js notranslate">var myVariable = document.querySelector('h1');</pre> - </li> - <li> - <pre class="brush: js notranslate">alert('hello!');</pre> - </li> -</ol> - -<p>Queste funzioni, <code>documents.querySelector</code> e <code>alert</code>, sono già presenti nel browser da poter utilizzare quando vuoi.</p> - -<p>Se vedi quaclosa che assomiglia a una variabile ma ha delle parentesi dopo il nome — ( ) — allora probabilmente è una funzione. Le Funzioni spesso prendono degli {{Glossary("Argument", "argomenti")}} — pezzi di dati che gli servono per fare il proprio lavoro. Questi dati vanno all'interno delle parentesi, separati da virgole.</p> - -<p>Per esempio, la funzione <code>alert()</code> fa apparire un box dentro la finestra del browser, ma dobbiamo dargli una stringa come argomento per dire alla funzione cosa scrivere all'interno del pop-up.</p> - -<p>La buona notizia è che puoi definire le tue funzioni — nel prossimo esempio scriviamo una semplice funzione che prende due numeri come argomenti e li moltiplica, restituendo il risultato:</p> - -<pre class="brush: js notranslate">function multiply(num1,num2) { - var result = num1 * num2; - return result; -}</pre> - -<p>Prova a eseguire la funzione sopra nella console con degli argomenti di test. Per esempio:</p> - -<pre class="brush: js notranslate">multiply(4,7); -multiply(20,20); -multiply(0.5,3);</pre> - -<div class="note"> -<p><strong>Nota</strong>: La parola chiave <a href="/en-US/docs/Web/JavaScript/Reference/Statements/return"><code>return</code></a> dice al browser di restituire la variabile risultato per renderla utilizzabile al di fuori della funzione. Questo è necessario perchè le cose che vengono definite all'interno di una funzione sono disponibili solo alla funzione. Questo è chiamato {{Glossary("Scope", "scoping")}} (Leggi di più <a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Variable_scope">variable scoping</a>.)</p> -</div> - -<h3 id="Eventi">Eventi</h3> - -<p>La vera interattività di un sito dipende dagli eventi. Questi sono strutture di codice che ascoltano le varie cose che succedono nel browser, rispondendo con l'esecuzione di codice. Un esempio ovvio è l'<a href="/en-US/docs/Web/Events/click">evento click </a>che è inizializzato dal browser quando si preme qualcosa con il mouse. Per dimostrarlo, inserisci il seguente codice nella console e poi premi ovunque sulla pagina corrente.</p> - -<pre class="brush: js notranslate">document.querySelector('html').onclick = function() { - alert('Ouch! Stop poking me!'); -}</pre> - -<p>Ci sono molti modi per attaccare un evento a un elemento. Qui selezioniamo un elemento HTML, impostando la proprietà del suo gestore <a href="/en-US/docs/Web/API/GlobalEventHandlers.onclick">onclick</a> a una funzione anonima (i.e. senza nome), che contiene il codice che vogliamo eseguire quando l'elemento viene premuto.</p> - -<p>Nota che</p> - -<pre class="brush: js notranslate">document.querySelector('html').onclick = function() {};</pre> - -<p>è uguale a</p> - -<pre class="brush: js notranslate">var myHTML = document.querySelector('html'); -myHTML.onclick = function() {};</pre> - -<p>E' solo più corta come soluzione.</p> - -<h2 id="Diamo_i_superpoteri_al_nostro_sito_web_di_esempio">Diamo i superpoteri al nostro sito web di esempio</h2> - -<p>Adesso che abbiamo visto un po' le basi di JavaScript, aggiungiamo alcune funzionalità interessanti al nostro sito di esempio per vedere cos'è possibile fare con JavaScript.</p> - -<h3 id="Aggiungere_un_cambio_immagine">Aggiungere un cambio immagine</h3> - -<p>In questa sezione, aggiungeremo un'ulteriore immagine al nostro sito utilizzando alcune funzionalità della DOM API, usando un po' di JavaScript per scambiare le immagini quando vengono premute.</p> - -<ol> - <li>Prima di tutto, trova un'altra immagine che vorresti usare per il tuo sito. Assicurati che sia della stessa grandezza della prima immagine o più o meno uguale (oppure, se conosci il CSS, applica alcune regole di stile).</li> - <li>Salva quest'immagine nella cartella <code>images</code>.</li> - <li>Rinomina quest'immagine a 'firefox2.png' (senza apici).</li> - <li>Val al tuo <code>main.js</code> file e inserisci il seguente JavaScript. (Se il tuo "hello world" è ancora lì, cancellalo.) - <pre class="brush: js notranslate">var myImage = document.querySelector('img'); - -myImage.onclick = function() { - var mySrc = myImage.getAttribute('src'); - if(mySrc === 'images/firefox-icon.png') { - myImage.setAttribute ('src','images/firefox2.png'); - } else { - myImage.setAttribute ('src','images/firefox-icon.png'); - } -}</pre> - </li> - <li>Salva tutti i file e carica index.html nel browser. Ora quando premi sull'immagine, dovrebbe scambiarsi con la seconda!</li> -</ol> - -<p>Immagazzini un riferimento al tuo elemento immagine nella variabile <code>myImage</code>. Poi definisci il gestore della proprietà <code>onclick</code> della variabile <code>myImage</code> con una funzione anonima. Ora, tutte le volte che l'elemento immagine viene premuto:</p> - -<ol> - <li>Recuperi il valore dell'attributo <code>src</code> dell'immagine.</li> - <li>Usi un condizionale per sapere se il valore <code>src</code> è uguale alla destinazione dell'immagine originale: - <ol> - <li>Se lo è, cambi la destinazione nell'attributo <code>src</code> con quella della seconda immagine, forzando l'altra immagine a essere caricata nell'elemento {{htmlelement("image")}}.</li> - <li>Se non lo è (quindi è già stata scambiata), il valore di <code>src</code> torna a essere quello della destinazione dell'immagine originale.</li> - </ol> - </li> -</ol> - -<h3 id="Aggiungere_un_messaggio_di_benvenuto_personalizzato">Aggiungere un messaggio di benvenuto personalizzato</h3> - -<p>Aggiungiamo un altro po' di codice, cambiando il titolo della pagina in un messaggio personalizzato quando l'utente visita il sito web. Questo messaggio di benvenuto rimarrà in memoria qualora l'utente dovesse lasciare il sito per tornare in un momento successivo — lo salveremo usando la <a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage API</a>. Includeremo un'opzione per cambiare l'utente e quindi il messaggio di benvenuto in qualsiasi momento risulti necessario.</p> - -<ol> - <li>In <code>index.html</code>, aggiungiamo la seguente riga prima dell'elemento {{htmlelement("script")}}: - - <pre class="brush: html notranslate"><button>Cambia utente</button></pre> - </li> - <li>In <code>main.js</code>, inserisci il seguente codice alla fine del file, proprio come scritto — questo prende i riferimenti di un nuovo bottone e dell'elemento <code>h1</code>, immagazzinandoli in delle variabili: - <pre class="brush: js notranslate">var myButton = document.querySelector('button'); -var myHeading = document.querySelector('h1');</pre> - </li> - <li>Inserisci questa funzione per personalizzare il messaggio di benvenuto — questo ancora non farà niente ma lo sistemeremo tra poco: - <pre class="brush: js notranslate">function setUserName() { - var myName = prompt('Inserisci il tuo nome.'); - localStorage.setItem('name', myName); - myHeading.textContent = 'Mozilla is cool, ' + myName; -}</pre> - Questa funzione utilizza la funzione <code><a href="/en-US/docs/Web/API/Window.prompt">prompt()</a></code> che fa apparire un piccolo box di dialogo, un po' come <code>alert()</code>. Questo <code>prompt() </code>però chiede all'utente di inserire dei dati, salvandoli in una variabile dopo che l'utente ha premuto <strong>OK</strong>. In questo caso chiediamo all'utente di inserire il proprio nome. Dopo chiamiamo un'API chiamata <code>localStorage</code> che ci permette di immagazzinare dati nel browser per poi recuperarli successivamente. Usiamo la funzione <code>setItem()</code> di <code>localStorage</code> per creare e immagazzinare un oggetto chiamato 'name', impostando il suo valore a quello della variabile <code>myName</code> che contiene il dato inserito dall'utente. Finalmente, impostiamo il <code>textContent</code> dell'elemento <code>h1</code> a una stringa più il valore della variabile <code>myName</code> che contiene il nome dell'utente.</li> - <li>Poi aggiungiamo un blocco <code>if ... else </code>— possiamo chiamare questo codice di inizializzazione per strutturare la app al suo avvio: - <pre class="brush: js notranslate">if(!localStorage.getItem('name')) { - setUserName(); -} else { - var storedName = localStorage.getItem('name'); - myHeading.textContent = 'Mozilla is cool, ' + storedName; -}</pre> - Questo blocco prima usa l'operatore di negazione logica, poi controlla se il dato name esiste nel <code>localStorage</code>. Se non esiste (primo blocco), fa partire la funzione <code>setUserName()</code>, altrimenti recuperiamo il nome dal <code>localStorage</code> con la funzione <code>getItem()</code> e impostiamo <code>textContent</code> dell'elemento <code>h1</code> a una stringa più il valore della stringa restituita da <code>getItem()</code>.</li> - <li>Inserisci il gestore dell'evento <code>onclick</code> dell'elemento <code>button</code>. Quando premuto, la funzione <code>setUserName() </code>viene eseguita. Questo permette all'utente di inserire un nuovo nome quando vogliono, premendo il bottone: - <pre class="brush: js notranslate">myButton.onclick = function() { - setUserName(); -} -</pre> - </li> -</ol> - -<p>Ora quando visitiamo il sito per la prima volta, ti verrà richiesto il tuo username, poi ti sarà dato un messaggio personalizzato. Puoi cambiare il tuo nome quando vuoi premendo il bottone. Come bonus aggiunto, il nome è salvato in localStorage quindi rimane in memoria anche dopo la chiusura del browser mantenendo il messaggio personalizzato quando riaprirai il sito.</p> - -<h2 id="Conclusione">Conclusione</h2> - -<p>Se hai seguito tutte le istruzioni in questo articolo, dovresti avere una pagina così (puoi vedere <a href="https://mdn.github.io/beginner-html-site-scripted/">la nostra versione qui</a>):</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9539/website-screen-scripted.png" style="display: block; height: 995px; margin: 0px auto; width: 800px;"></p> - -<p>Se ti blocchi, puoi comparare il tuo lavoro con <a href="https://github.com/mdn/beginner-html-site-scripted/blob/gh-pages/scripts/main.js">il nostro esempio finito su Github</a>.</p> - -<p>Abbiamo appena iniziato con JavaScript. Se ti è piaciuto giocare e vorresti avanzare ancora di più, vai al nostro <a href="/en-US/docs/Learn/JavaScript">JavaScript learning topic</a>.</p> - -<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p> diff --git a/files/it/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/it/learn/getting_started_with_the_web/publishing_your_website/index.html deleted file mode 100644 index 96a721fe9e..0000000000 --- a/files/it/learn/getting_started_with_the_web/publishing_your_website/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: Pubblicare il tuo sito -slug: Learn/Getting_started_with_the_web/Publishing_your_website -tags: - - Advanced - - Beginner - - CodingScripting - - FTP - - GitHub - - Google App Engine - - Learn - - Web - - l10n:priority - - publishing - - web server -translation_of: Learn/Getting_started_with_the_web/Publishing_your_website -original_slug: Learn/Getting_started_with_the_web/Pubbicare_sito ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</div> - -<div class="summary"> -<p>Una volta finito di scrivere il codice e di organizzare i file del tuo sito, dovrai caricarli online per permettere ad altri di accedervi. Questo articolo ti aiuterà a mettere online la tua creazione senza troppi sforzi.</p> -</div> - -<h2 id="Quali_opzioni_ho">Quali opzioni ho?</h2> - -<p>Ci sono molti modi per pubblicare un sito e l'argomento è molto vasto. Lo scopo di questo articolo non è compilare una lista di tutte le opzioni possibili, ma piuttosto illustrare i pro e i contro dei tre metodi principali più indicati per i principianti e orientarti verso uno in particolare che dà risultati immediati per la maggior parte dei lettori.</p> - -<h3 id="Acquistare_un_hosting_e_un_dominio">Acquistare un hosting e un dominio</h3> - -<p>Per gestire più liberamente i contenuti e l'aspetto del proprio sito, molti scelgono di acquistare:</p> - -<ul> - <li>Un hosting, ovvero uno spazio "a noleggio" sul <a href="/en-US/Learn/What_is_a_web_server">server web</a> di una compagnia di hosting dove caricare i file del tuo sito. Il server web rende il contenuto fruibile ai visitatori del tuo sito.</li> - <li>Un <a href="/en-US/Learn/Understanding_domain_names">nome dominio</a>, ovvero un indirizzo univoco attraverso il quale gli utenti possono trovare il tuo sito, come <code>http://www.mozilla.org</code> o <code>http://www.bbc.co.uk</code>. Puoi noleggiare un dominio per il tempo desiderato (minimo un anno) da un <strong>registrar di dominio</strong>.</li> -</ul> - -<p>Molti siti professionali adottano questa soluzione.</p> - -<p>Inoltre avrai bisogno di un programma {{Glossary("FTP", "File Transfer Protocol (FTP)")}} per trasferire i file dal tuo computer al server web (consulta <a href="/en-US/Learn/How_much_does_it_cost#Software">How much does it cost: software</a> per ulteriori dettagli). Ogni programma FTP funziona in modo diverso, ma in linea generale devi connetterli al tuo server web immettendo le credenziali fornite dalla tua compagnia di hosting (es. username, password, hostname). Una volta connesso, vedrai i file locali (sul tuo PC) e i file del server web in due finestre separate e potrai trasferirli da una parte all'altra:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9469/ftp.jpg" style="display: block; height: 487px; margin: 0px auto; width: 800px;"></p> - -<h4 id="Consigli_su_hosting_e_domini">Consigli su hosting e domini</h4> - -<ul> - <li>In questo articolo non intendiamo sponsorizzare compagnie di hosting o registrar di domini specifici. Si possono però reperire facilmente cercando "web hosting" e "domain names" sul proprio motore di ricerca preferito. Tutti i registrar permettono di verificare se il nome di dominio scelto è disponibile o se qualcun altro l'ha già registrato.</li> - <li>Alcuni {{Glossary("ISP", "internet service provider")}} mettono a disposizione lo spazio sufficiente per un piccolo sito web. Anche se hanno funzionalità limitate, sono l'ideale per i tuoi primi esperimenti.</li> - <li>Puoi utilizzare alcuni servizi gratuiti come <a href="https://neocities.org/">Neocities</a>, <a href="https://www.blogger.com">Blogger</a>, e <a href="https://wordpress.com/">WordPress</a>. Non sono certo paragonabili ai servizi a pagamento, ma offrono risorse sufficienti per condurre i primi esperimenti.</li> - <li>Molte compagnie offrono soluzioni di hosting e dominio in un unico pacchetto. I servizi gratuiti di solito non hanno bisogno di software FTP per caricare i file: basta trascinarli e rilasciarli nell'interfaccia web.</li> -</ul> - -<h3 id="Usare_una_piattaforma_online_come_GitHub_o_Google_App_Engine">Usare una piattaforma online come GitHub o Google App Engine</h3> - -<p>Puoi pubblicare il tuo sito anche attraverso alcune piattaforme:</p> - -<ul> - <li><a href="https://github.com/">GitHub</a> è un sito di sviluppo di codice sorgente comunitario. Permette agli utenti di caricare il codice in cartelle apposite (repository) controllate mediante <a href="http://git-scm.com/"> Git</a>, un <strong>sistema di controllo versione</strong>. Se non diversamente specificato, il codice caricato su GitHub è open source. Ciò significa che puoi collaborare a progetti altrui e i programmatori di tutto il mondo possono trovare il tuo codice, utilizzarlo, imparare da esso o migliorarlo. GitHub ha una funzionalità molto utile chiamata <a href="https://pages.github.com/">GitHub Pages</a>, che permette di generare un sito web dal codice in tempo reale.</li> - <li><a href="https://cloud.google.com/appengine/">Google App Engine</a> è una piattaforma che permette di sviluppare ed eseguire applicazioni attraverso l'infrastruttura Google, sia per lo sviluppo da zero di applicazioni web multi-tier (un tipo di architettura client-server molto diffusa) che per ospitare un sito web statico. Per maggiori informazioni consulta <a href="/en-US/docs/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">How do you host your website on Google App Engine?</a></li> -</ul> - -<p>A differenza della maggior parte degli hosting, questi strumenti sono gratuiti ma hanno delle funzionalità limitate.</p> - -<h3 id="Usare_un_IDE_online_come_CodePen">Usare un IDE online come CodePen</h3> - -<p>Online si possono trovare numerose applicazioni web che emulano l'ambiente di sviluppo di un sito, consentendoti di vedere in tempo reale come appare il codice HTML, CSS e JavaScript mentre lo scrivi… tutto in un'unica finestra del browser! In generale, questi strumenti sono abbastanza semplici, ottimi per imparare e per condividere codice (ad esempio se vuoi mostrare una certa procedura o chiedere ai colleghi di effettuare un debug) e gratuiti accontentandosi delle funzionalità base. La pagina generata dal tuo codice viene ospitata su un indirizzo web univoco. Le funzionalità base sono però limitate e di solito non offrono spazio per ospitare risorse (come le immagini).</p> - -<p>Prova alcuni tra questi servizi e scegli quello più adatto alle tue esigenze:</p> - -<ul> - <li><a href="https://jsfiddle.net/">JSFiddle</a></li> - <li><a href="https://glitch.com/">Glitch</a></li> - <li><a href="http://jsbin.com/">JS Bin</a></li> - <li><a href="https://codepen.io/">CodePen</a></li> -</ul> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9471/jsbin-screen.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></p> - -<h2 id="Pubblicare_con_GitHub">Pubblicare con GitHub</h2> - -<p>Vediamo ora i passi per pubblicare il tuo sito su GitHub Pages:</p> - -<ol> - <li>Registra un <a href="https://github.com/">account GitHub</a> e verifica il tuo indirizzo email.</li> - <li><a href="https://github.com/new">Crea un repository</a> per i tuoi file.</li> - <li>Su questa pagina, nella casella <em>Repository name</em>, inserisci <em>username</em>.github.io, dove <em>username</em> è il tuo username. Per esempio, Mario Rossi scriverà qualcosa come <em>mariorossi.github.io</em>.<br> - Inoltre, spunta la casella "<em>Initialize this repository with a README</em>" e fai clic su <em>Create repository</em>.<img alt="" src="https://mdn.mozillademos.org/files/9479/github-create-repo.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></li> - <li>Ora trascina e rilascia i contenuti del tuo sito nel repository e fai clic su <em>Commit changes</em>. - <div class="note"> - <p><strong>Nota</strong>: Assicurati che la tua cartella contenga un file chiamato <code>index.html</code>.</p> - </div> - </li> - <li> - <p>Apri <em>username</em>.github.io per vedere il tuo sito online. Per esempio, per il nome utente <em>chrisdavidmills</em>, vai a <a href="http://chrisdavidmills.github.io/"><em>chrisdavidmills</em>.github.io</a>.</p> - - <div class="note"> - <p><strong>Nota</strong>: Potrebbero essere necessari alcuni minuti perché il sito vada online. Se non lo vedi immediatamente, attendi alcuni minuti e riprova.</p> - </div> - </li> -</ol> - -<p>Per approfondire consulta <a href="https://help.github.com/categories/github-pages-basics/">GitHub Pages Help</a>.</p> - -<h2 id="Approfondimenti">Approfondimenti</h2> - -<ul> - <li><a href="/en-US/Learn/What_is_a_web_server">What is a web server</a></li> - <li><a href="/en-US/Learn/Understanding_domain_names">Understanding domain names</a></li> - <li><a href="/en-US/Learn/How_much_does_it_cost">How much does it cost to do something on the web?</a></li> - <li><a href="https://www.codecademy.com/learn/deploy-a-website">Deploy a Website</a>: Un tutorial di Codecademy che mostra altre idee e spiega un po' più nello specifico il processo di creazione e lancio di un sito.</li> - <li><a href="http://alignedleft.com/resources/cheap-web-hosting">Cheap or Free Static Website Hosting</a>, di Scott Murray, dà alcune idee utili sui servizi disponibili.</li> -</ul> - -<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</p> - -<h2 id="In_questo_modulo">In questo modulo</h2> - -<ul> - <li id="Installing_basic_software"><a href="/it/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installazione di software fondamentali</a></li> - <li id="What_will_your_website_look_like"><a href="it/docs/Learn/Getting_started_with_the_web/Che_aspetto_avrà_il_tuo_sito_web">Che aspetto avrà il tuo sito Web?</a></li> - <li id="Dealing_with_files"><a href="/it/docs/Learn/Getting_started_with_the_web/Gestire_i_file">Gestire i file</a></li> - <li id="HTML_basics"><a href="/it/docs/Learn/Getting_started_with_the_web/HTML_basics">Basi di HTML</a></li> - <li id="CSS_basics"><a href="/it/docs/Learn/Getting_started_with_the_web/CSS_basics">Basi di CSS</a></li> - <li id="JavaScript_basics"><a href="/it/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Basi di JavaScript</a></li> - <li id="Publishing_your_website"><a href="/it/docs/Learn/Getting_started_with_the_web/Pubbicare_sito">Pubblicare il tuo sito</a></li> - <li id="How_the_web_works"><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">How the web works</a></li> -</ul> diff --git a/files/it/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/it/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html deleted file mode 100644 index 8adb6dbe7d..0000000000 --- a/files/it/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Che aspetto avrà il tuo sito Web? -slug: Learn/Getting_started_with_the_web/What_will_your_website_look_like -tags: - - Basi - - Design - - Fonts - - Grafica - - Web - - imparare -translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like -original_slug: Learn/Getting_started_with_the_web/Che_aspetto_avrà_il_tuo_sito_web ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</div> - -<div class="summary"> -<p><em>Che aspetto avrà il tuo sito?</em> spiega come pianificare e lavorare sul design prima di iniziare a scrivere le primissime righe di codice. Esso include risposte a domande come "Che informazioni offre il mio sito Web?", "Quale font e colore voglio?" e "Cosa fa il mio sito?" </p> -</div> - -<h2 id="Prima_di_tutto_pianifica">Prima di tutto: pianifica</h2> - -<p>Prima che tu faccia qualsiasi cosa, devi avere qualche idea. Il tuo sito Web cosa dovrebbe esattamente fare? Un sito Web può fare praticamente tutto, ma inizialmente dovresti mantenere le cose semplici. Inizieremo creando una semplice pagina con un'intestazione, un'immagine e un po' di paragrafi.</p> - -<p>Prima di iniziare dovrai rispondere a questi domande:</p> - -<ol> - <li><strong>Di cosa tratterà il tuo sito Web? </strong>Ti piacciono i cani, New York, o Pacman?</li> - <li><strong>Quali informazioni vorrai portare su quell'argomento? </strong>Scrivi un titolo e un po' di paragrafi e pensa a un'immagine che vorresti far vedere nella pagina.</li> - <li><strong>Che aspetto ha il tuo sito Web </strong>in breve? Qual è il suo colore di sfondo? Quale genere di font è più appropriato: formale, grassetto e rumoroso, simile a un sottotitolo?</li> -</ol> - -<div class="note"> -<p><strong>Nota bene</strong>: Progetti complessi necessitano di linee guida dettagliate che vadano a fondo su ogni dettaglio di colore, font, spaziatura tra gli elementi di una pagina, stile di scrittura, e così via. Per fare questo ci si basa, di solito, su guide e linee guida severe. Puoi vedere un esempio su <a href="/it/docs/Archive/B2G_OS">Firefox OS Guidelines</a>.</p> -</div> - -<h2 id="Fare_uno_schizzo_del_design">Fare uno schizzo del design</h2> - -<p>Successivamente, prendi carta e penna e fai uno schizzo veloce su come il tuo sito Web dovrebbe essere. Per le tue prime pagine non ci sarà molto da disegnare, ma ti abituerebbe a farlo. È un'abitudine che aiuta: ricorda che non avrai bisogno di essere Van Gogh!</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9239/website-drawing-scan.png" style="display: block; height: 460px; margin: 0px auto; width: 640px;"></p> - -<div class="note"> -<p><strong>Nota bene</strong>: Anche nei siti Web complessi e professionali, i team grafici di solito iniziano con diversi schizzi veloci su carta e, solo successivamente, sviluppano un modello grafico con editor o tecnologie Web.</p> - -<p><span style="font-size: 1.125rem;">I gruppi di sviluppo Web spesso hanno sia un grafico (front-end developer) che un programmatore (back-end developer). I grafici, ovviamente, mettono insieme le idee grafiche per il sito. Gli sviluppatori UX hanno un ruolo più astratto e si occupano di come l'utente finale si interfaccerà con il sito.</span></p> -</div> - -<h2 id="Scegliere_le_tue_risorse">Scegliere le tue risorse</h2> - -<p>A questo punto è bene iniziare a mettere insieme il contenuto che apparirà sul tuo sito Web.</p> - -<h3 id="Testo">Testo</h3> - -<p>Dovresti già avere i tuoi paragrafi e il tuo titolo da prima. Per ora tienili là.</p> - -<h3 id="Colori_del_tema">Colori del tema</h3> - -<p>Per scegliere un colore, vai <a href="/it/docs/Web/CSS/CSS_Colors/Color_picker_tool">qui</a> e trova il colore che più ti piace. Quando premi su un colore, vedrai uno strano codice a sei cifre come <code>#660066</code>. Questo è chiamato <em>codice esadecimale</em>, e rappresenta il tuo colore. Copia il codice in un posto sicuro per ora.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8975/Screenshot%20from%202014-11-03%2017:40:49.png" style="height: 262px; width: 448px;"></p> - -<h3 id="Immagini">Immagini</h3> - -<p>Per scegliere un'immagine, vai su <a href="https://images.google.com/?gws_rd=ssl">Google Immagini</a> e cerca qualcosa che faccia al caso tuo.</p> - -<ol> - <li>Quando trovi l'immagine che desideri, premi sull'immagine.</li> - <li>Premi sul bottone <em>Visualizza immagine</em>.</li> - <li>Sulla pagina che si aprirà, premi con il tasto destro del mouse sull'immagine (Ctrl + click sul Mac), scegli <em>Salva immagine come...</em>, e scegli un posto sicuro in cui salvare l'immagine. In alternativa, copia l'URL dell'immagine che trovi sulla barra degli indirizzi del tuo browser per un utilizzo futuro.</li> -</ol> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8985/Screenshot%20from%202014-11-04%2015:09:21.png" style="height: 293px; width: 420px;"></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8989/Screenshot%20from%202014-11-04%2015:20:48.png" style="height: 292px; width: 340px;"></p> - -<div class="note"> -<p><strong>Nota bene</strong>: La maggior parte delle immagini sul Web, comprese quelle su Google Immagini, sono protette da copyright. Per ridurre la tua possibilità di una violazione del diritto d'autore, puoi usare il filtro di licenza Google. Semplicemente premi su 1) <strong>Strumenti</strong>, poi su 2) <strong>Diritti di utilizzo </strong>e, infine, sulla scelta che più soddisfa le vostre necessità:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8981/Screenshot%20from%202014-11-04%2014:27:45.png" style="height: 195px; width: 587px;"></p> -</div> - -<h3 id="Font">Font</h3> - -<p>Per scegliere un font:</p> - -<ol> - <li>Vai su <a href="http://www.google.com/fonts">Google Fonts</a> e passa la lista fino a quando non troverai quello che più ti piace. Puoi anche usare il pannello sulla destra per filtrare la ricerca.</li> - <li>Premi il bottone con l'icona '+' (Add to) vicino al font che desideri.</li> - <li>Premi sul bottone "* Family Selected"<em> </em>nel pannello a fondo della pagina ("*" dipenderà da quanti font avrete selezionato).</li> - <li>Nel pop-up che esce, puoi vedere e copiare le linee di codice che Google ti darà. Ricordati di salvarle in un editor di testo, cosicché possa usarle futuro.</li> -</ol> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13871/font1.png" style="height: 359px; width: 600px;"></p> - -<p> </p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13873/font2.png" style="height: 608px; width: 600px;"></p> - -<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</p> - -<p> </p> - -<h2 id="In_questo_modulo">In questo modulo</h2> - -<ul> - <li id="Installing_basic_software"><a href="/it/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installazione dei software fondamentali</a></li> - <li id="What_will_your_website_look_like"><a href="/it/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Che aspetto avrà il tuo sito Web</a></li> - <li id="Dealing_with_files"><a href="/it/docs/Learn/Getting_started_with_the_web/Gestire_i_file">Gestire i file</a></li> - <li id="HTML_basics"><a href="/it/docs/Learn/Getting_started_with_the_web/HTML_basics">Basi HTML</a></li> - <li id="CSS_basics"><a href="/it/docs/Learn/Getting_started_with_the_web/CSS_basics">Basi CSS</a></li> - <li id="JavaScript_basics"><a href="/it/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Basi JavaScript</a></li> - <li id="Publishing_your_website"><a href="/it/docs/Learn/Getting_started_with_the_web/Pubblicare_il_tuo_sito">Pubblicare il tuo sito Web</a></li> - <li id="How_the_web_works"><a href="/it/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Come lavora il Web</a></li> -</ul> - -<p> </p> |