From 3011913aa4cd2dc906f78b17b495267fff7972b6 Mon Sep 17 00:00:00 2001 From: stepanz70 Date: Mon, 29 Oct 2018 21:13:57 +0100 Subject: [PATCH 1/4] Introduzione alle Sushi Card di HTML-CSS beginner -- --- _tutorials/HTML-CSS Sushi Card/Step_1.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 _tutorials/HTML-CSS Sushi Card/Step_1.md diff --git a/_tutorials/HTML-CSS Sushi Card/Step_1.md b/_tutorials/HTML-CSS Sushi Card/Step_1.md new file mode 100644 index 0000000..a192845 --- /dev/null +++ b/_tutorials/HTML-CSS Sushi Card/Step_1.md @@ -0,0 +1,20 @@ +## Introduzione + +Impara a scrivere il codice del tuo primo sito web! + +### Cosa farai + +Costruisci un sito come quello che vedi qui sotto. + +

+ +

+ +### Cosa imparerai + +- Ad usare un editor online per creare un sito fatto con un file HTML e uno CSS +- A creare un sito in HTML con dei titoli, dei paragrafi di testo, liste e immagini +- Ad usare il codice CSS per controllare l'aspetto del tuo sito, inserendo una semplice barra menu e cambiare i colori, gli sfondi e i bordi +- A collegare le pagine tra di loro e collegarle ad altri siti web +- A creare una tabella che includa le intestazioni e righe multiple From 59c85e5d1b0e11fed1f78d2530143023a4e19488 Mon Sep 17 00:00:00 2001 From: stepanz70 Date: Mon, 29 Oct 2018 21:15:35 +0100 Subject: [PATCH 2/4] Step successivi al n. 1 --- _tutorials/HTML-CSS Sushi Card/step_10.md | 55 +++++++++++++ _tutorials/HTML-CSS Sushi Card/step_11.md | 65 ++++++++++++++++ _tutorials/HTML-CSS Sushi Card/step_12.md | 75 ++++++++++++++++++ _tutorials/HTML-CSS Sushi Card/step_13.md | 59 ++++++++++++++ _tutorials/HTML-CSS Sushi Card/step_14.md | 93 ++++++++++++++++++++++ _tutorials/HTML-CSS Sushi Card/step_2.md | 9 +++ _tutorials/HTML-CSS Sushi Card/step_3.md | 41 ++++++++++ _tutorials/HTML-CSS Sushi Card/step_4.md | 90 +++++++++++++++++++++ _tutorials/HTML-CSS Sushi Card/step_5.md | 73 +++++++++++++++++ _tutorials/HTML-CSS Sushi Card/step_6.md | 78 +++++++++++++++++++ _tutorials/HTML-CSS Sushi Card/step_7.md | 34 ++++++++ _tutorials/HTML-CSS Sushi Card/step_8.md | 49 ++++++++++++ _tutorials/HTML-CSS Sushi Card/step_9.md | 95 +++++++++++++++++++++++ 13 files changed, 816 insertions(+) create mode 100644 _tutorials/HTML-CSS Sushi Card/step_10.md create mode 100644 _tutorials/HTML-CSS Sushi Card/step_11.md create mode 100644 _tutorials/HTML-CSS Sushi Card/step_12.md create mode 100644 _tutorials/HTML-CSS Sushi Card/step_13.md create mode 100644 _tutorials/HTML-CSS Sushi Card/step_14.md create mode 100644 _tutorials/HTML-CSS Sushi Card/step_2.md create mode 100644 _tutorials/HTML-CSS Sushi Card/step_3.md create mode 100644 _tutorials/HTML-CSS Sushi Card/step_4.md create mode 100644 _tutorials/HTML-CSS Sushi Card/step_5.md create mode 100644 _tutorials/HTML-CSS Sushi Card/step_6.md create mode 100644 _tutorials/HTML-CSS Sushi Card/step_7.md create mode 100644 _tutorials/HTML-CSS Sushi Card/step_8.md create mode 100644 _tutorials/HTML-CSS Sushi Card/step_9.md diff --git a/_tutorials/HTML-CSS Sushi Card/step_10.md b/_tutorials/HTML-CSS Sushi Card/step_10.md new file mode 100644 index 0000000..933d19e --- /dev/null +++ b/_tutorials/HTML-CSS Sushi Card/step_10.md @@ -0,0 +1,55 @@ +## Aggiungere altre pagine + +Questa parte ti mostrerà come aggiungere altre pagine al tuo sito. + +- Al limite superiore del code panel, clicca sul simbolo **+** vicino alle linguette delle schede e digita il nome del nuovo file. Deve terminare con `.html` (incluso il punto!) in modo che il browser possa riconoscerlo come una pagina web. + +![Adding a new file in Trinket](images/tktNewFileArrows.png) + +--- collapse --- +--- +title: Rinominare o cancellare un file +--- + +Se vuoi cambiare il nome di un file, clicca sull'icona **ingranaggio** a destra del nome file, clicca l'icona **matita**. Digita il nuovo nome del file e premi **Enter**. Puoi anche cancellare un file cliccando sull'icone **cestino** invece che sull'icona della **matita**. +![](images/EditFilename.png) + +Potresti chiederti perchè non si può modificare il nome del file `index.html`. `index.html` è un nome file speciale usato per indicare la **pagina iniziale**, l'home page, di un sito. Questa è la pagina su cui atterri quando visiti un sito. Ogni volta che vai alla homepage di un sito, il browser cerca il file con il nome `index.html` e lo mostra sullo schermo. + +--- /collapse --- + +- Trova il file `template.html` , copia e incolla tutto il codice nel tuo nuovo file. Dato che vuoi copiare l'intero contenuto, puoi cliccare in un punto qualunque del codice e usare le scorciatoie da tastiera Ctrl (o cmd) e A per selezionare tutto in una volta sola. + +- Cambia il testo tra il tag` ` in modo che la tua nuova pagina abbia un titolo adatto. Trinket non mostrerà il il titolo, ma puoi vederlo all'estremità superiore del tuo browser se scarichi il file e lo apri. + +![The page title showing in the browser tab](images/egLocalFileWindowTitle.png) + +- Nei tag `

` del nuovo file usa tutto ciò che hai imparato per aggiungere elementi alla pagina: paragrafi, intestazioni, immagini ed elenchi! + +- I ripeti i passi di sopra per ogni nuova pagina. + +Quando ci sono troppe schede aperte per poter essere visualizzate insieme, puoi usare l'icona **<** e **>** in alto a sinistra per farle scorrere. + +![The buttons for scrolling the tabs](images/tktScrollTabIcons.png) + +Ora hai bisogno di creare dei link in modo da poter raggiungere ogni nuova pagina! Mettiamo tutti i link in un elenco. + +- Nel file `index.html`, aggiungi il seguente codice al body della pagina: + +```html +

+``` + +- Modifica il valore dell'attributo `href` per ogni link (ricorda, il testo deve essere inserito all'interno delle virgolette) in modo che sia perfettamente identico ad ogni nome dei file che hai creato. + +- Modifica il testo all'interno dei tag ` ` in modo che sia adatto alla descrizione delle tue pagine. + +Ora puoi navigare tra le tue pagine! + +![Example list of links on a web page](images/egListOfPageLinks.png) + diff --git a/_tutorials/HTML-CSS Sushi Card/step_11.md b/_tutorials/HTML-CSS Sushi Card/step_11.md new file mode 100644 index 0000000..17e5e5f --- /dev/null +++ b/_tutorials/HTML-CSS Sushi Card/step_11.md @@ -0,0 +1,65 @@ +## Navigare nel sito + +Molti siti hanno un menu di **navigazione** per aiutare i visitatori a spostarsi tra le pagine. +Ora che hai un po' di pagine, una homepage, dei link ad ogni pagina, spostiamo la lista dei link in una sezione in alto della pagina. + +![Example of a web page with navigation links at the top](images/egNavLinksAtTop.png) + +- Cerca il codice usato per creare un elenco nei passaggi precedenti. + +- Premi invio subito prima del tag di apertura `

` , premi **Invio** per creare un'altra riga vuota, e digita qui il tag di chiusura ``. + +- Ora dovrai selezionate l'intera sezione `

` e l'elenco cliccando appena rima del tag ``, in questo modo tutto il testo, inclusi i tag di apertura e chiusura saranno evidenziati. Assicurati che siano evidenziate anche le **parentesi angolari** (i segni `<` e `>`). + +![Text is not fully selected](images/egSelectedWhoops.png) +![Fully selected text](images/egSelectedYay.png) + +- Adesso **taglierai** anzichè incollare. Premi il tasto Ctrl (o cmd), mentre lo tieni premuto premi il tasto X . Il testo selezionati scompare, ma... don't panic! + +- All'inizio del file in altro, clicca nello spazio tra i tag `

` . Assicurati che il cursore stia lampeggiando nel posto giusto. Ora incolla il testo tagliato premendo come sempre Ctrl (o cmd) e V. Il codice dovrebbe apparire come questo: + +```html +

+ +

+``` + +--- collapse --- +--- +title: Undo! +--- + +Se commetti un errore, puoi annullare (**undo**) premendo insieme Ctrl (o cmd) e Z . Generalmente è possibile premere questa combinazione di tasti tante volte quanti sono i passaggi che vuoi cancellare. Questa è un'altra combinazione di tasti che puoi usare in molti altri programmi! + +--- /collapse --- + +- Fai una prova per verificare che i link funzionino ancora. + +--- challenge --- + +## Sfida: menu di navigazione per tutte le pagine + +- Inserisci questa porzione di codice nella sezione header di ogni file HRML che hai creato. Questo farà apparire il menu di navigazione in ogni pagina del tuo sito. + + --- hints --- + + --- hint --- +Seleziona l'intera sezione `

` copiandola come hai fatto prima premendo insieme Ctrl (o cmd) e C . + +Dopo, in ogni file `.html`, clicca in mezzo ai tag `

` e incolla il codice proprio come hai fatto prima. + --- /hint --- + + --- /hints --- + +Ora potrai cliccare sui link in qualunque pagina tu sia. + +--- /challenge --- diff --git a/_tutorials/HTML-CSS Sushi Card/step_12.md b/_tutorials/HTML-CSS Sushi Card/step_12.md new file mode 100644 index 0000000..e1b276e --- /dev/null +++ b/_tutorials/HTML-CSS Sushi Card/step_12.md @@ -0,0 +1,75 @@ +## Creazeione di una barra-menu + +In questa card vedrai come trasformare il tuo menù di navigazione in una barra-menu dall'aspetto cool, soltanto aggiungendo alcune regole CSS al tuo foglio di stile. + +![Example of a menu bar](images/egCoolMenuBar.png) + +- Vai al foglio di stile nel tab `styles.css` . Clicca **sotto** una parentesi graffa di chiusura `}`, e premi **Invio** per creare una nuova riga vuota. Aggiungi le regole CSS seguenti: + +```css + nav ul { + background-color: tomato; + } +``` + +Hai visto che abbiamo usato due selettori `nav` a `ul` invece che uno solo? Se usi solo il selettore `ul` , la regola avrà effetto su tutti gli elenchi non numerati del sito, mentre aggiungendo il selettore `nav` come sopra, avrà effetto solo sugli elenchi all'interno dei tag `nav` . + +![List with red background](images/egMenuBarFirstStyle.png) + +Ora liberiamoci dei Bullet point. Sono i punti che compaiono prima delle voci dell'elenco. + +- Aggiungi il codice seguente al file `styles.css`. Nuovamente, scrivi si una nuova riga dopo `}` così non digiterai all'inteno di un altro blocco di regole. + +```css + nav ul li { + list-style-type: none; + } +``` + +Come puoi notare questo set di regole ha tre selettori: si selezionano tutti gli elementi `li` che si trovano in una lista `ul` che a sua volta si trova all'interno di una sezione `nav` . Forte! + +![List with bullet points removed](images/egMenuBarNoBullets.png) + +Ora imposteremo la lista in orizzontale anzichè verticale. + +- Dentro la regola CSS che hai appena creato aggiungi questa riga di codice: `display: inline;`. + +![](images/egMenuBarInline.png) + +- Ora gli oggetti del menu sono orizzontali ma tutti schiacciati insieme, quindi aggiungiamo le proprietà `margin-right` e `margin-left` per inserire un po' di spazio tra di essi. Ora Il blocco di codice CSS dovrebbe essere così: + +```css + nav ul li { + list-style-type: none; + display: inline; + margin-right: 10px; + margin-left: 10px; + } +``` + +Ricorda: `10px` significa 10 pixels. + +Cosa ne pensi se ora facciamo in modo che il menu cambi in modo da indicare in quale pagina ti trovi? Questa parte non riguarda il foglio di stile. + +- Iniziamo dalla homepage. Vai al file `index.html`. Nell'elenco con i link del menu, rimuovi il tag del link prima edopo la parola `Home`, in modo che l'oggetto della lista che indica l'homepage appaia solo tra i tag `

`, come questo: `

Home

`. + +- Ora devi fare lo stesso in tutti gli altri file che compongono le pagine del tuo sito, rimuovendo ogni volta i tag che linkano alla pagina stessa che stai modificando. Così, per esempio, nel file `birds.html`, abbiamo rimosso il tag link tags nell'oggetto `Uccelli protetti`: + +```html +

+ +

+``` + +- Esplora le tue pagine cliccando sui link. Vedi come la barra-menu indica la pagina che stai visitando indicandola con del semplice testo anzichè con un link? + +![Example of menu bar highlighting current page](images/egMenuBarOnPage.png) + +Nella prossima card imparerai alcuni trucchi di CSS per fare ancora più bella la tua barra-menu. diff --git a/_tutorials/HTML-CSS Sushi Card/step_13.md b/_tutorials/HTML-CSS Sushi Card/step_13.md new file mode 100644 index 0000000..9e9fcf6 --- /dev/null +++ b/_tutorials/HTML-CSS Sushi Card/step_13.md @@ -0,0 +1,59 @@ +## Aggiungiamo dello stile alla barra-menu + +Con CSS, le possibilità per dare un look fantastico alla tua menu-bar sono infinite. + +- Vai nuovamente al file `styles.css` - il posto dove avvengono le cose cool! + +- Trova il tuo selettore `nav ul` , e aggiungiamo altre regole in modo che sia come questo: + +```css + nav ul { + background-color: tomato; + border-style: solid; + border-color: MediumVioletRed; + border-width: 2px; + padding: 10px; + } +``` + +La proprietà `padding` aggiunge dello spazio. Riesci ad immaginare a cosa servono le altre proprietà? Prova a fare degli esperimenti con altri colori ed altri numeri di pixel. + +![Menu bar with borders and padding added](images/egMenuBarMoreStyle.png) + +- Per sbarazzarsi della sottolineatura dei link, aggiungi il codice che segue su una nuova riga dopo la chiusura della parentesi graffa `}` della regola per `nav ul li`. Potresti inserirlo dove vuoi dopo `}`, ma sarebbe meglio mantenere insieme le cose che sono collegate tra di loro, così sarà più facile trovarle! + +```css + nav ul li a { + text-decoration: none; + } +``` + +La regola precedente si applica a tutti i link `` situati all'interno di un oggetto `

` in un elenco non numerato `

` posto a sua volta all'interno di una sezione `

`. Wow, sono ben quattro selettori! + +![Menu bar with link underlining removed](images/egMenuBarNoUnderline.png) + +Ti ricordi come hai rimosso il tag link da alcuni oggetti dell'elenco nella sezione `

` in modo da riconoscere in quale pagina ti trovavi? Perchè non cambiare anche il colore degli elementi della lista di navigazione che non sono dei link? + +- Trova il selettore `nav ul li` , e **dentro** la parentesi graffa aggiungi la riga: + +```css + color: PapayaWhip; +``` + +Puoi scegliere qualunque colore ti piaccia! + +Puoi aggiungere la proprietà `color` alla regola del selettore `nav ul li a` in modo che sia di un colore differente dagli altri link del sito. + +- Cosa ne pensi di mettere degli angoli arrotondati per il tuo menu? Prova ad aggiungere il codice seguente alla regola di `nav ul` e guarda cosa succede: `border-radius: 10px;`. + +Con la proprietà `border-radius` è veramente facile dare un look più moderno ad ogni cosa! + +![Webpage with rounded corners on the menu bar and on a picture](images/egMenuBarFullStyles_result.png) + +--- challenge --- + +## Sfida: fai in modo che gli angoli delle tue immagini siano arrotondati + +- Nel tuo foglio di stile, crea un nuovo set di regole per le immagini usando il selettore `img` e aggiungi la regola `border-radius`. + +--- /challenge --- diff --git a/_tutorials/HTML-CSS Sushi Card/step_14.md b/_tutorials/HTML-CSS Sushi Card/step_14.md new file mode 100644 index 0000000..0ecd1e4 --- /dev/null +++ b/_tutorials/HTML-CSS Sushi Card/step_14.md @@ -0,0 +1,93 @@ +## Aggiungere una tabella + +A volte può essere utile mostrare delle informazioni in una tabella. Per esempio, potresti voler fare un elenco dei membri di una società sportiva locale o della squadra della scuola, oppure la top ten delle tue canzoni preferite. + +Una tabella è una griglia fatta di **righe** e **colonne**. La maggior parte delle tabelle include in cima ad ogni colonna un titolo chiamato **header**. Ecco un esempio: + +![Example of information in a table](images/egTableResult.png) + +- Vai al file `page_with_table.html`. Qui vedrai un mucchio di codice tra i tag `

` . + +- Seleziona tutto il codice dall'inizio del tag `` fino al tag di chiusura `

` e copialo. Poi vai ad uno dei tuoi file dove vorresti mettere una tabella e incolla il codice. + +Al momento la tua tabella è vuota. + +- Inizia a riempire la tabella con ciò che ti piace! Semplicemente inserisci del testo tra i tag ` ` e i tag ` `. Puoi aggiungere più informazioni e più tag se lo desideri. + +--- collapse --- +--- +title: Codice di esempio +--- + +Il codice HTML per la tabella apparirà come quello qui sotto: + +```html + + + + + + + + + + + + + + + + + + + + + +

Nome	Località	Uccelli trovati qui
Skellig Michael	Island off coast of Kerry	Pulcinelle di mare
Bird Island	Strangford Lough	Cormorani
Burren Birds of Prey Centre	County Clare	Vari tipi, incluse aquile, falchi, gufi e falconi

+``` + +--- /collapse --- + +Per aggiungere un'altra **riga**, aggiungi un altro set di tag ` `. Tra di essi, inserisci dei **dati** tra le coppie di tag ` ` tanti quanti nelle altre righe. + +Per aggiungere un'altra **colonna**, aggiungi altri dati con un set di tag ` ` per **riga**. Aggiungi anche un ulteriore **header** per la prima riga usando i tag ` `. + +--- collapse --- +--- +title: Come funziona? +--- + +Diamo un'occhiata a tutti questo codice. Assomiglia un po' al codice per un elenco (ti ricordi `

` e `

`) ma con più livelli. + +Ogni coppia di tag ` ` genera una riga, così tutto ciò che scrivi al loro interno appare in una singola riga dalla tabella. + +La prima irga contiene i tag ` ` tags. Questi sono usati per i titoli delle colonne che vanno perciò indicati tra di essi. Ce n'è una coppia per ogni colonna della tua tabell. + +I tag ` ` definiscono ciò che sono le celle della tabella, e appaiono sulla stessa riga. Sono simili ai tag `

` all'inizio della linea e il tag `

` alla fine della riga. Dovresti poter vedere la tua pagina web aggiornata nel pannello a destra. + +![HTML paragraph example](images/egFirstHtmlCode.png) + +- Ora sulla stessa riga, modifica il tag `

` e `

` con `

` e `

`. Noti qualche differenza nel risultato a destra? + +```html +

Hello!

+``` + +--- collapse --- +--- +title: spiegazione di HTML e tag +--- +**HTML** è il codice che genera una pagina web. + +La scritta `.html` nel nome del file dice al browser che quel file è una pagina web, così il browser, che conosce il sigificato dei **tag** sa come visualizzare il contenuto sul monitor. (Un browser è il programma che su usa per visualizza i siti web, per esempio Chrome o Firefox.) + +I tag HTML come `

` e `

` definiscono diffenti parti di una pagina, per esempio paragrafi, intestazioni oppure il corpo. Queste parti sono chiamate **elementi**. Pensa a loro come ai mattoni di un edificio. + +### Perchè mi servono due tag? +Per comunicare al browser dove ***inizia*** e dove ***finisce*** un elemento, ti serve un tag di **apertura** e di uno di **chiusura**. Quindi per un paragrafo il tag di apertura `

` dirà "Qui inizia del testo che vorrei tu facessi apparire come un paragrafo". Il tag di chiusura `

` dice al browser dove deve finire il paragrafo. + +Tutto ciò che si trova i tag `` e `` sarà la tua pagina web. + +- Fai attenzione come il tag di chiusura ha **sempre** una barra retroversa (forward slash) `/`. + +--- /collapse --- + +- Prova a cambiare i numeri nei tuoi tag **heading** per vedere le differenti dimensione che possono assumere. Possono variare da `

` fino a `

`. Ricordati di cambiare il numero sia nel tag di chiusura che di apertura in modo che corrispondano. + +- Trova il paragrafo con il codice che dice 'This website is about bird conservation.' e modificalo in modo che diventi come questo: + +```html +
+ This website is about bird conservation. +
+``` + +Riesci a scoprire cosa fanno i tag ` ` e ` `? + +![Esemio di tag HTML](images/egFirstTags.png) + +--- Sfida --- +## Sfida: aggiungi altro testo creato da te + +- Prova aggiungengo un nuovo paragrafo o un'intestazione usando alcuni dei tag che hai appena visto. + +--- suggerimenti --- + +--- suggerimento --- +Quando vuoi inserire del testo in una pagina, devi infilarlo tra due tag per dire al browser come mostrarlo sullo schermo. +Per esempio i tag `

` dicono al browser che il testo contenuto al loro interno è un nuovo paragrafo e i tag `

` che il testo racchiuso tra di loro è un'intestazione. + +--- /suggerimento --- + +--- suggerimento --- + +Il codice per paragrafo sarà come questo: + +```html +

Questo è un paragrafo di testo

+ +

Questo è un altro paragrafo. + Ogni cosa tra una coppia di tag è mostrato dal browser su una lunga riga della pagina dal browser.

+``` + +--- /suggerimento --- + + +--- suggerimento --- + +Il codice per le intestazioni è così: + +```html +

Questa è un'intestazione.

+``` +Le intestazioni sono generalmente mostrata come parti più grandi o più scure rispetto ai paragrafi. + +--- /suggerimento --- + +--- /suggerimenti --- + +--- /sfida --- + +Congratulazioni, hai costruito la tua prima pagina web! Nella prossima scheda, vedrai come controllarne l'aspetto. diff --git a/_tutorials/HTML-CSS Sushi Card/step_5.md b/_tutorials/HTML-CSS Sushi Card/step_5.md new file mode 100644 index 0000000..26a2528 --- /dev/null +++ b/_tutorials/HTML-CSS Sushi Card/step_5.md @@ -0,0 +1,73 @@ +## Controlla il look + +Il linguaggio che descrive come dovrebbe apparire un sito si chiama **CSS**. + +- Guarda la tab sopra il pannello del codice e vai al file `styles.css` cliccando sul tab con quel nome. +il file contiene il seguente testo: + +```css + body { + background-color: white; + } +``` + +- Modifica il colore `white` a `LightSkyBlue` e guarda cosa accade. Il tuo sito ora dovrebbe avere unos sfondo blue! + +![Esempio con sfondo blu](images/egFirstCSSbluebg.png) + +--- collapse --- +--- +title: Come funziona? +--- + +Se guardi in cima al file `index.html`, troverai questa riga: + +```html + +``` + +Questa riga dice al browser di cercare un file speciale chiamato `styles.css`. Questo file speciale è chiamato **foglio di stile / style sheet**. Puoi riconoscerlo dagli altri perchè il suo nome termina con `.css`. + +Un foglio di stile contiene **regole** su come ogni elemento della pagina web dovrebbe apparire. + +Le parentesi graffe `{ }` e il codice tra di esse contenuto corrisponde al set di **regole CSS**. La parola `body` specifica che tutte le regole indicate sono applicate all'intero elemeno `body` del tuo sito. Il testo che appare prima della parentesi graffa è detto anche **selettore**. Quindi in questo caso questo è il selettore per l'elemento body. + +Ogni regola all'interno delle parentesi graffe è composta da: + - Una **proprietà** a sinistra, seguita dal segno `:` + - Un **valore** da assegnare alla proprietà alla destra del segno `:` + - Un simbolo `;` al termine della riga + +--- /collapse --- + +- Aggiungiamo delle regole per cambiare il modo in cui viene visualizzato il testo. Aggiungi due righe nuove all'interno delle parentesi graffe: + +```css + body { + background-color: LightSkyBlue; + font-family: "Helvetica", sans-serif; + color: purple; + } +``` + ++ Ora guarda com'è cambiato l'aspetto della pagina web. + +La proprietà `color` è sempre riferita al testo. Qui stiamo impostando il colore di tutto il testo contenuto all'interno del tag `body` e quindi di tutta la pagina. + +- Si possono anche scrivere regole differenti e separate per le intestazioni e per i paragrafi. Per le intestazioni `

`, userai il selettore `h1`. Sotto la parentesi graffa che contiene le regole CSS per il body, aggiungi il seguente codice. + +```css + h1 { + color: orange; + font-family: "Times New Roman", serif; + } +``` + +Il testo delle tue intestazioni ora dovrebbe apparire arancione, con il testo dei paragrafi in viola come prima. + +![Risultato del nuovo codice CSS](images/egCssColorsFonts.png) + +Hai visto come anche le lettere ora hanno un aspetto differente oltre al colore? Questo perchè hai cambiato il font family. Puoi trovare altri caratteri [qui](http://dojo.soy/se-font-families). + +- Prova ad aggiungere un set di regole al tag delle intestazioni `

` usando il selettore `h2` . + +- Perchè non provi a fare qualche esperimento con differenti combinazioni di colori per il testo e per lo sfondo/background? Ci sono tantissimi colori disponibili. Puoi trovare una lista [qui](http://dojo.soy/se-color-names). diff --git a/_tutorials/HTML-CSS Sushi Card/step_6.md b/_tutorials/HTML-CSS Sushi Card/step_6.md new file mode 100644 index 0000000..90a5397 --- /dev/null +++ b/_tutorials/HTML-CSS Sushi Card/step_6.md @@ -0,0 +1,78 @@ +## Aggiunta di immagini + +Aggiunge un'immagine! + +- Vai al tal denominato `index.html`. Trova il tag `` e digita nelle righe sopra quello che vedi qui sotto: + +```html + +``` + +Questo è il risultato che dovresti ottenere: + +![Codice e immagine di un uccello](images/egImgCodeBird.png) + +Nota come questo tag ha dei pezzi di informazione extra al suo interno. Sono detti atrributi. + +- Trova il pezzetto di codice che dice `width="200px"` e prova a cambiare il numero e cerca di capire cosa accadrà e a cosa serve questo attributo. Attenzione a non cancellare le lettere `px`! + +--- collapse --- + +--- +title: Coma funziona il tag img +--- + +Osserva come il tag `` è differente dagli altri tag che hai usato fino ad ora - non c'è un tag di chiusura `` . Infatti questo tag è detto self-closing: possieda un `/>` alla fine. Il motivo è che un'immagine non può avere un inizio e una fine come invece ha ad esempio una porzione di testo. + +Il tag contiene altri attributi con informazioni extra: +- L'attributo `src` indica al browser quale file usare per l'immagine. +- L'attributo `alt` è una breve descrizione dell'immagine e viene visualizzata nel caso il browser non possa visualizzare. 'alt' è l'abbreviazione per 'alternative'. Quello che viene scritto nell'attributo `alt` serve anche alle persone con problemi alla vista e che fanno uso di programmi che leggono il testo ad alta voce \(screen radar\). +- L'attributo `width` dice al browser quanto deve apparire larga la foto sullo schermo. `100px` significa 100 pixels, che non sono altro che i piccoli punti che costituiscono ciò che viene visualizzato su uno schermo. Se dimentichi questo attributo l'immagine sarà visualizzata nella sua larghezza originale. + +--- /collapse --- + +Ora che conosci il codice da utilizzare per inserire un'immagine nel tuo sito, vorrai probabilmente cambiarla, giusto? + +- La prima cosa di cui hai bisogno è, ovviamente, un'immagine! Puoi usarne una che si trova già nel tuo computer, magari una foto che hai scattato tu, oppure cercarne una su Internet. + +[[[immagine generica dal web]]] + +Attenzionee: non tutte le immagini che trovi su Internet possono essere usate gratuitamente. Se scarichi un'immagine, assicurati che tu possa usarla liberamente. Puoi trovare più informazioni a proposito qui: + +[[[immagini-permessi-per-uso]]] + +Una volta che hai trovato la foto, puoi scaricarla su Trinket: + +- Nel tuo Trinket, clicca sull'icona image vicina al segno +. + +![Immagine icona](images/tktImageIconArrow.png) + +Qui è dove troverai le immagini che potrai usare sul tuo sito. Dovresti vedere l'immagine di un barbagianni. + +- Clicca il pulsante Add Image e poi clicca Upload. + +- Clicca sul pulsante Click To Select Files. Trova il tuo file e fai doppio-click sul file. + +- Clicca su Done. + +![Immagine area upload](images/tktUploadImages.png) + +La tua immagine dovrebbe essere caricata e pronta per l'uso. + +- Vai al file `index.html` e trova il tag ``. Cambia il testo `barn-owl.jpg` con quello esattamente identico al nome del file che contiene l'immagine che hai scelto di usare. Attenzione al fatto che il nome potrebbe terminare in `.png` invece che `.jpg`! + +Il testo che hai appena modificato è l'attributo `src`, che dice al browser quale file usare e dove trovarlo. + +Nota: Il valore che digiti per l'attributo deve essere racchiuso dalle doppie virgolette `""` ! + +--- sfida --- + +## Sfida: modifica il testo alt dell'immagine + +- Trova l'attributo `alt` della tua immagine e cambialo con una breve descrizione della stessa \(es. gatto di casa\). + +--- /sfida --- + + + + diff --git a/_tutorials/HTML-CSS Sushi Card/step_7.md b/_tutorials/HTML-CSS Sushi Card/step_7.md new file mode 100644 index 0000000..988ea9b --- /dev/null +++ b/_tutorials/HTML-CSS Sushi Card/step_7.md @@ -0,0 +1,34 @@ +## Aggiungere una mappa o un video + +YouTube mette a disposizione un metodo semplice per aggiungere i suoi video al tuo sito web. +Aggiungere al tuo sito elementi provenienti da altri sorgenti online è detto embedding. + +- Trova un video su YouTube che vorresti visualizzare sul tuo sito. + +- Clicca sul pulsante Condividi che trovi sotto il video. Scegli l'opzione Embed. + +Vedrai una casella di testo e il testo tutto selezionato. Se per sbaglio deselezioni il testo, puoi riselezionarlo cliccandoci sopra mentre tieni premuti contemporaneamente i pulsanti `Ctrl` (o `cmd` su un Mac) e `A`. + +![YouTube's embed option with code selected](images/EmbedYouTube.png) + +- Premi insieme i tasto `Ctrl` (o `cmd` su un Mac) e `C` per copiare il testo selezionato. + +- Ora torna al codice HTML del tuo sito e fai click nel punto in cui vuoi che venga visualizzato il video, per esempio nell'esempio sottostante tra un'intestazione e un paragrafo. Incolla il codice premendo contemporaneamente `Ctrl` (o `cmd` su un Mac) e `V`. Non ti preoccupare se non comprendi il siginificato del codice che hai appena incollato! + +![Example of the embedding code pasted into a HTML page](images/EmbedYouTube2.png) + +Ora dovresti vedere apparire il video sulla pagina web. + +La stessa tecnica puoi applicarla per le mappe di Google. Provaci! + +- Vai [qui](http://dojo.soy/se-maps) e cerca un posto che vorresti mostrare sul tuo sito. Attenzione: non condividere mai informazioni personali come il tuo indirizzo di casa su un sito web! + +- Clicca sul risultato, quindi clicca il pulsante Condividi, copia il codice e aggiungilo al tuo codice HTML così come hai fatto prima il video. +![Embed option selected in Google Maps](images/EmbedGoogleMap.png) + +- Se osservi con attenzione il codice che hai incollato, troverai gli attributi `width` e `height`. Puoi anche modificarli per far apparire la mappa più grande o più piccola. + +![Example of embedded Google Map with width and height attributes selected](images/EmbeddedGoogleMapCode.png) + + + diff --git a/_tutorials/HTML-CSS Sushi Card/step_8.md b/_tutorials/HTML-CSS Sushi Card/step_8.md new file mode 100644 index 0000000..42340fc --- /dev/null +++ b/_tutorials/HTML-CSS Sushi Card/step_8.md @@ -0,0 +1,49 @@ +## Creare un elenco + +Adesso vedrai come trasformare una lista di oggetti, come "unicorni, robot, gatti", in un elenco dall'aspetto piacevole e con il quale successivamente farai delle cose davvero cool. + +- Nel file `index.html` , aggiungi il suguente codice esattamente sotto alla riga con il tag ``: + +```html +
+
Barbagianni
+
Albanella reale
+
Zigolo giallo
+
Chiurlo
+
+``` + +Il risultato dovrebbe essere un elenco come questo: + +![Unordered list](images/egUnorderedList.png) + +Fai attenzione alla presenza di una coppia di tag `

` intorno ad ogni elemento della lista. + +Questa è una lista di uccelli protetti in Irlanda. Puoi cambiare gli oggetti della lista con qualcosa di coerente con il tuo sito (ad esempio con gli uccelli protetti in Italia), e aggiungere un paragrafo prima della lista che descriva che tipo di elenco segue, se ti va! + +E come fare se preferisci un elenco numerato? E' quasi la stessa cosa, invece del tag `
`, userai il tag `
`. In inglese un elenco numerato è detto anche ordered list. + +- Aggiungi il seguente codice a quello creato prima - assicurati che sia sotto il tag `
`! + +```html +
+ Minacce per i volatili: +
+
+
Distruzione dell'Habitat
+
Inquinamento
+
Cambiamenti climatici
+
+``` + +E questo è il risultato finale: + +![Ordered list](images/egOrderedList.png) + +--- challenge --- + +## Sfida: aggiungi dello stile al tuo elenco + +- Prova ad aggiungere delle regole CSS al tuo stylesheet per cambiare l'aspetto dell'elenco. + +--- /challenge --- diff --git a/_tutorials/HTML-CSS Sushi Card/step_9.md b/_tutorials/HTML-CSS Sushi Card/step_9.md new file mode 100644 index 0000000..efa689e --- /dev/null +++ b/_tutorials/HTML-CSS Sushi Card/step_9.md @@ -0,0 +1,95 @@ +## Creazione dei link + +In questa sezione imparerai come creare un link che ti porti ad un'altra pagina web una volta che lo avrai cliccato. + +- Aggiungi il seguente codice alla sezione body del file `index.html`: + +```html + Click here +``` + +I tag ` ` trasformano tutto ciò che è compreso al loro interno in un link. + +- Prova a vedere cosa succede se clicchi il tuo nuovo link. Niente, giusto? + +Questo perchè l'attributo `href` al momento è vuoto. Serve che contenga l'URL (l'indirizzo web) della pagina alla quale vuoi collegarti. + +- Vai su Wikipedia e trova una pagina riguardante l'argomento del tuo sito. Io cercherò una pagina sulla Lega Italiana per la protezione e conservazione degli uccelli. + +- Clicca la barra degli indirizzi e selezione tutto il testo contenuto in essa. Questo è l'URL completo della pagina in cui ti trovi. Premi contemporaneamente i tastiCtrl (or cmd) e C per copiarlo. + + ![URL in address bar](images/AddressBarURL.png) + +- Nel tuo Trinket, clicca tra le virgolette dopo `href=` e premi insieme i tasti Ctrl (o cmd) e V per incollare l'URL che hai copiato prima da Wikipedia. Il tuo codice dovrebbe apparire come questo: + +```html + Clicca qui +``` + +Hai appena creato il tuo primo link. Fai click sopra e guarda se funziona. + +![Link tag](images/egLinkTagWithURL.png) + +--- collapse --- +--- +title: Link ad altri siti web +--- +Trinket a volte ha dei problemi a visualizza i link. Puoi provare link a siti diversi da Wikipedia ma potrebbero anche non funzionare. In ogni caso, se scaricherai i file del tuo progetto e li aprirai nel browser del tuo pc vedrai che funzioneranno. + +--- /collapse --- + +- Prova ad inserire un'immagine tra i tag ` ` invece delle parole `Clicca qui`, in questo modo: + +```html + + + +``` + +- Clicca sull'immagine. Hai visto che si è trasformata in un link? + +Puoi inserire un link in qualunque parte della tua pagina web, un paragrafo così come una lista. Qui c'è l'esempio di una frase con un link all'interno: + +```html +
+ Clicca qui per saperne di più sulla protezione degli uccelli da Wikipedia. +
+``` + +![Example of a link in a paragraph element](images/egParagraphLink.png) + +--- challenge --- + +## Sfida: trasforma un link in una lista + +- Prova a vedere se puoi inserire un link all'interno di un elenco al posto di un elemento della lista. + +--- hints --- + +--- hint --- + +Per trasformare un elemento `

` in un link, metti tutto il suo testo, incluso il tag, all'interno del tag link ` ` e aggiungi l'attributo `href` così come hai fatto sopra. + +--- /hint --- + +--- hint --- + +Nella lista seguente, la voce 'albanella reale' è stata trasformata in un link. + +```html +
+
Barbagianni
+
Albanella reale
+
Zigolo giallo
+
Chiurlo
+
+``` + +--- /hint --- + +--- /hints --- + + +--- /challenge --- + + From 2e9129e80498f32af798ff62c62d368a660f3408 Mon Sep 17 00:00:00 2001 From: stepanz70 Date: Thu, 1 Nov 2018 14:08:24 +0100 Subject: [PATCH 3/4] Aggiunto link ad Eventbrite MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit La data nell'evento è giusta, nel nome file è errata (11 novembre anzichè 10). Ciao. --- _posts/2018-11-10-coderdojo-11-novembre-IED.markdown | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_posts/2018-11-10-coderdojo-11-novembre-IED.markdown b/_posts/2018-11-10-coderdojo-11-novembre-IED.markdown index 9c6127d..330177a 100644 --- a/_posts/2018-11-10-coderdojo-11-novembre-IED.markdown +++ b/_posts/2018-11-10-coderdojo-11-novembre-IED.markdown @@ -4,7 +4,7 @@ comments: false date: 2018-11-10 14:30:00+01:00 layout: event location: ied -registration_url: +registration_url: https://www.eventbrite.it/e/biglietti-coderdojo-milano-ied-milano-51863939439 type: Player slug: coderdojo-il-10-novembre-in-ied title: CoderDojo il 10 novembre in IED From 5cf6677f291ea1e12b815f86161c2f7f963ece9c Mon Sep 17 00:00:00 2001 From: stepanz70 Date: Tue, 13 Nov 2018 22:20:15 +0100 Subject: [PATCH 4/4] Insert Eventbrite link --- .../2018-11-24-coderdojo-24-novembre-2018-politecnico.markdown | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_posts/2018-11-24-coderdojo-24-novembre-2018-politecnico.markdown b/_posts/2018-11-24-coderdojo-24-novembre-2018-politecnico.markdown index 30f566d..d9dbd8b 100644 --- a/_posts/2018-11-24-coderdojo-24-novembre-2018-politecnico.markdown +++ b/_posts/2018-11-24-coderdojo-24-novembre-2018-politecnico.markdown @@ -4,7 +4,7 @@ comments: false date: 2018-11-24 14:30:00+01:00 layout: event location: politecnico -registration_url: +registration_url: https://www.eventbrite.it/e/biglietti-coderdojo-milano-politecnico-di-milano-52550148910 type: Player slug: coderdojo-il-24-novembre-al-politecnico title: CoderDojo il 24 novembre al Politecnico