10_ by Stadio5

â&#x20AC;¯

1. Guida pratica all’HTML e CSS: Come creare una pagina web Html e Css sono due linguaggi che servono per creare pagine Web. In questo eBook cercherò di illustrare le funzionalità base di entrambi partendo da zero, attraverso una serie di esempi pratici.

Html e CSS Partiamo dall’html. L’html è utilizzato per definire il contenuto di un pagina web quindi: testo, immagini, video, sono definiti al l’interno di una pagina web tramite html. Tutto quello che riguarda l’aspetto grafico quindi: colore, caratteri, stili, spaziature è definito dai CSS (che vedremo nella seconda parte).

Editor Per modificare e scriver html e css abbiamo bisogno di un editor. Se non ne avete ancora uno scaricate Atom o Sublime Text sono entrambi editor professionali (free) e aiutano molto nella scrittura del codice.

1.1 Html: Contenuto della pagina Creiamo la nostra prima pagina web in html. Apriamo il nostro editor preferito, creiamo un nuovo file: file —> new file lo chiamiamo index.html e salviamo.

Un file con estensione .html è un file html se lo apriamo nel browser vedremo una pagina web. Apriamo il file .html che abbiamo appena creato (doppio click sul file) vedremo una pagina bianca nel nostro browser di default. Questo logicamente perché non abbiamo ancora scritto nessun codice html al suo interno.

Abbiamo chiamato la nostra pagina index.html perché la maggior parte dei server utilizza questa pagina come pagina di default (la Home del sito). Se carichiamo questa pagina su uno spazio web “standard” questa verrà visualizzata quando digiteremo www.nomesito.com.

1.2 I Tag Html I mattoncini con il quale è costruita la nostra pagina web sono i tag html. I tag sono parole chiave racchiuse da apici. Quelli che servono per costruire una pagina web base non sono molti. Il primo che vediamo è <html>:

1.2.1 Il tag HTML Il tag html è il tag che racchiude tutta la nostra pagina web. <html> è il tag di apertura di una pagina html. </html> è il tag di chiusura di una pagina html.

Tutto quello che è all’interno di questi due tag è considerato parte della nostra pagina html. Tutti i tag (a parte pochissimi casi come <img> e <input>) necessitano di un tag di chiusura. La sintassi prevede un tag di apertura (per esempio <html>) e un tag di chiusura (per esempio </html>) all’interno dei due tag va inserito il contenuto. Il tag di chiusura ha sempre il backslash “/“ prima della keyword del tag. Gli atri due tag fondamentali per costruire una pagina web sono:

1.2.2 Il tag <head> e il tag <body> Il tag head è un tag “funzionale”. <head>

Serve a contenere tutte una serie di informazioni che non vengono direttamente mostrate nella pagina ma servono alla pagina stessa per funzionare correttamente. Per esempio informazioni per i motori di ricerca e per il browser. Il tag body contiene quello che viene visualizzato nella pagina web. <body>

Mettendo insieme i nostri 3 tag fondamentali crediamo la struttura base di una pagina web. <!doctype html> <html> <head> <!— Contenuto dell'head --> </head> <body> <!— Contenuto del Body --> </body> </html>

Il tag <!doctype html> all’inizio della pagina indica al browser che stiamo scrivendo una pagina in html 5 (va inserito sempre). La sintassi  è quella utilizzata per fare i commenti nell’html tutto quello dentro  non viene considerato dal browser.

1.2.3 Il tag P Il tag p (paragrafo) è il tag usato per inserire testo libero all’interno della pagina web: <p>

Proviamo a visualizzare un messaggio nella nostra pagina web: <!doctype html> <html> <head> <!— Contenuto dell'head --> </head> <body> <p>Ciao, ecco il mio messaggio!</p> </body> </html>

Nel codice html abbiamo utilizzato il nuovo tag <p> il testo racchiuso al suo interno è un paragrafo. Salviamo index.html e aggiorniamo la pagina web, dovremmo vedere nel browser il nostro messaggio.

Fatto questo incominciamo ad utilizzare il nostro head, introducendo un altro tag molto importante <title>

1.2.4 Il tag Title Il tag title inserito nell’head è molto importante.

<title>

Questo tag viene utilizzati dai motori di ricerca per sapere il titolo del contenuto che è inserito nella pagina. <!doctype html> <html> <head> <title>La mia Pagina Web</title> </head> <body> <p>Ciao, ecco il mio messaggio!</p> </body> </html>

Il title è visualizzato nelle tab del browser e nell’elenco dei preferiti quando si salva la pagina.

1.2.5 Il tag a (Link) Altro tag essenziale è il tag <a>. <a>

Questo è il tag per definire i link (i collegamenti tra pagine web) ci permette di creare un collegamento dalla nostra pagina ad un altra pagina. La sintassi di un link è la seguente: <a href="http://www.google.com"> questo è un link a google</a>

Il tag <a> ha sempre bisogno dell’attributo href=“…”(Hypertext REFerence). Gli attributi sono informazioni che inseriamo dentro i tag con la sintassi nome-attributo=“valore-attributo”. Nel caso dei link l’attributo href contiene l’indirizzo della pagina web (l’Url) alla quale vogliamo arrivare tramite il link. Se aggiorniamo la nostra pagina con l’esempio appena fatto avremo:

Ora se abbiamo inserito il link correttamente dovremmo vedere il testo all’interno del tag <a href=“…”> blu sottolineato.

Se cicchiamo su di esso ci porterà alla home di google.

1.2.6 Il tag Img Un altro tag che ha sempre bisogno di un attributo è il tag <img> <img>

Questo tag necessita sempre dell’attributo è src=“…” (source) nel quale definiamo il percorso dell’immagine da mostrare. A differenza di tutti i tag visti fin ora <img> non ha bisogno del tag di chiusura. La sintassi di una immagine base è la seguente: <img src="la-mia-immagine.jpg" alt=“descrizione-di-cosa-ce-nelimmagine”>

Notiamo l’attributo alt, questo attributo viene utilizzato se l’immagine per qualche motivo non viene caricata, è molto importante anche per i motori di ricerca che lo utilizzano per capire cosa c’è nell’immagine. Aggiorniamo la nostra pagina con un inserita da google, facendo tasto destro sull’immagine posso copiare l’indirizzo.

Inseriamo l’indirizzo copiato nel html.

<!doctype html> <html> <head> <title>La mia Pagina Web</title> </head> <body> <p>Ciao, ecco il mio messaggio!</p> <p>Paragrafo con <a href="http://www.google.com"> link a google!</a></p> <img src="http://www.gannett-cdn.com/-mm-/ 4a3a44a51060a252e5652ab3b0de8f75a0998627/ c=1203-0-3795-3456&r=537&c=0-0-534-712/local/-/media/2015/02/12/ USATODAY/USATODAY/635593043210421208-USATSI-8272280.jpg" alt=“Stephen Curry”/> </body> </html>

Aggiorniamo la pagina nel browser.

Andiamo a vedere altri tag html molto utilizzati nelle pagine web.

1.2.7 I tag lista UL, LI I tag lista vengono utilizzati spesso all’interno del testo e in modo funzionale nei menu. <ul> <li>

Le liste <ul> (unordered list), vengono utilizzate per rappresentare liste di elementi all’interno di una pagina, la sintassi è la seguente: <ul> <li>Primo elemento della lista</li> <li>Secondo</li> <li>Terzo</li> </ul>

All’interno dell’ul abbiamo gli <li> (List item), aggiorniamo il nostro esempio: <!doctype html> <html> <head> <title>La mia Pagina Web</title> </head> <body> <p>Ciao, ecco il mio messaggio!</p> <p>Paragrafo con <a href="http://www.google.com"> link a google!</a></p> <ul> <li>Primo elemento della lista</li> <li>Secondo</li> <li>Terzo</li> </ul> <img src="http://www.gannett-cdn.com/-mm-/ 4a3a44a51060a252e5652ab3b0de8f75a0998627/ c=1203-0-3795-3456&r=537&c=0-0-534-712/local/-/media/2015/02/12/ USATODAY/USATODAY/635593043210421208-USATSI-8272280.jpg" alt=“Stephen Curry”/> </body> </html>

Ecco il risultato nel browser: 11

â&#x20AC;Ż Spesso tramite le liste <ul> vengono realizzati i menu dei siti web, vedremo piĂš avanti come fare.

1.2.8 I tag di Titolazione Questi sono i tag per definire i titoli con 6 livelli di importanza <h1> <h2> <h3> <h4> <h5> <h6>

Il tag <h1> Ă¨ quello con maggior peso dal punto di vista gerarchico. Questo tag viene utilizzato per definire il titolo principale del nostro contenuto. Per essere ottimizzata per i motori di ricerca la nostra pagine deve avere un solo h1 con stesso testo del title della pagina. Modifichiamo la nostra pagina html di conseguenza.

<!doctype html> <html> <head> <title>La mia Pagina Web</title> </head> <body> <h1>Stephen Curry</h1> <p>Cestista statunitense. Figlio di Dell Curry, ex giocatore NBA, e fratello maggiore di Seth Curry, anche lui professionista nella NBA con i Sacramento Kings.</p> <h2>Infanzia e High school</h2> <p>Nato ad Akron, Ohio, nel medesimo ospedale dove era nato quattro anni prima LeBron James, cresciuto a Charlotte, North Carolina, dove il padre Dell giocava per gli Charlotte Hornets. </p> <h2>College</h2> <p>Nella prima gara stagionale contro Eastern Michigan Curry conclude la partita realizzando 15 punti ma perdendo 13 palloni.Nella gara successiva, contro Michigan, mette a referto una prestazione da 32 punti, 4 assist e 9 rimbalzi.</p> <ul> <li>Primo elemento della lista</li> <li>Secondo</li> <li>Terzo</li> </ul> <img src="http://www.gannett-cdn.com/-mm-/ 4a3a44a51060a252e5652ab3b0de8f75a0998627/ c=1203-0-3795-3456&r=537&c=0-0-534-712/local/-/media/2015/02/12/ USATODAY/USATODAY/635593043210421208-USATSI-8272280.jpg" alt=â&#x20AC;&#x153;Stephen Curryâ&#x20AC;?/> </body> </html>

Nel esempio con <h1> definiamo il titolo del contenuto della pagina, vediamo poi che ho definito degli <h2> questi sono i titoli dei sotto-paragrafi. Si possono utilizzare sotto paragrafi fino a 6 livelli (personalmente non sono mai andato sotto il 4).

â&#x20AC;Ż Con questo abbiamo creato la nostra prima pagina html con dei contenuti di prova. Dal punto di vista grafico lascia veramente a desiderare, vedremo nel prossimo capitolo come migliorare la situazione applicando uno stile grafico con i Css.

2. Guida pratica all’HTML e CSS: Come stilizzare pagine web con i CSS e creare un sito con più pagine In questa seconda parte dell’ebook andiamo a creare un sito molto semplice di 3 pagine utilizzando i tag html visti precedentemente. Il sito avrà un foglio di stile CSS esterno condiviso in tutte le pagine. Partiamo dalla seguente struttura html.

2.1 Struttura base Html Crediamo un nuovo file index.html come abbiamo visto precedentemente e al suo interno inseriamo il codice della nostra home page. <!doctype html> <html> <head> <title>Home</title> </head> <body> <h1>Il mio Sito</h1> <ul> <li> Home </li> <li> <a href="pagina-2.html">Pagina 2</a> </li> <li> <a href="pagina-3.html">Pagina 3</a> </li> </ul> <h2>Home</h2> <p>Home page del mio sito</p> </body></html>

Nel codice abbiamo utilizzato una lista <ul> per creare il menu di navigazione. All’interno della lista <ul> abbiamo definito 3 pagine. Di queste pagine due hanno il link (Pagina 2 e Pagina 3) e una no (Home), home non necessita di link perché quando visualizziamo questa pagina (la home page) siamo già nella home index.html. I link utilizzati nel menu hanno definito nell’attributo href=“” percorsi relativi (non hanno un percorso completo http://www.miosito.com/miapagina.html). I percorsi relativi funzionano se le pagine che stiamo “linkando” sono nella stessa cartella della home (index.html).

2.2 Creazione delle pagine interne Per creare la seconda pagina del nostro sito duplichiamo index.html, la rinominiamo in pagina-2.html. Fatto questo apriamo pagina-2 nell’editor, cambiamo il title, l’h2 e il link attivo nel menu, ottenendo il seguente html: <!doctype html> <html> <head> <title>Pagina 2</title> </head> <body> <h1>Il mio Sito</h1> <ul> <li> <a href="index.html"> Home </a> </li> <li> Pagina 2 </li> <li> <a href="pagina-3.html">Pagina 3</a> </li> </ul> <h2>Pagina 2</h2> <p>Pagina interna del sito</p> </body> </html>

Ripetiamo lâ&#x20AC;&#x2122;operazione per la pagina 3: <!doctype html> <html> <head> <title>Pagina 3</title> </head> <body> <h1>Il mio Sito</h1> <ul> <li> <a href="index.html"> Home </a> </li> <li> <a href="pagina-2.html">Pagina 2 </a></li> <li> Pagina 3 </li> </ul> <h2>Pagina 3</h2> <p>Pagina interna del sito</p> </body> </html>

Se abbiamo fatto tutto correttamente cliccando sulle voci del menu dovremmo navigare tra le 3 pagine. La pagina corrente (nella quale siamo) non deve avere il link attivo.

â&#x20AC;Ż Ora che abbiamo la nostra struttura html base, possiamo pensare a renderla piĂš accattivante grazie ad uno foglio di stile Css. 17

2.3 Lo stile CSS Apriamo il nostro editor, creiamo un nuovo file e lo chiamiamo stile.css. Apriamo il file appena creato e scriviamo la nostra prima istruzione css. body{ background: yellow; }

Un istruzione Css è formata dal selettore (nel nostro caso body) e dalla regola (nel nostro caso background: yellow). Tutto le regole sono racchiuse tra parentesi graffe e vengono applicate al selettore di riferimento che precede le parentesi. Le regole css hanno la prima parte detta proprietà (nel nostro caso background) e la seconda parte detta valore (nel nostro caso yellow). Nell’esempio yellow è il valore della proprietà background. Per applicare lo stile che abbiamo appena creato al nostro sito dobbiamo includerlo dentro il tag head di tutte le pagine. <!doctype html> <html> <head> <title>Home</title> <link href="stile.css" rel="stylesheet" type="text/css"/> </head> <body> <h1>Il mio Sito</h1> <ul> <li> Home </li> <li> <a href="pagina-2.html">Pagina 2</a> </li> <li> <a href="pagina-3.html">Pagina 3</a> </li> </ul> <h2>Home</h2> <p>Home page del mio sito</p> </body> </html>

Introduciamo un nuovo tag, il tag <link> che serve per inserire risorse esterne nelle pagine web nel nostro caso lo stile: <link href="stile.css" rel="stylesheet" type="text/css"/>

Il tag va inserito nell’header di tutte le pagine del nostro sito quindi anche in pagina-2.html e pagine-3.html. Così avremo lo stile contenuto in style.css condiviso e applicato in tutte le pagine. Se aggiorniamo il browser dovremmo vedere il colore dello sfondo giallo.

Le proprietà css a differenza dei tag html sono molte, partiamo da quelle fondamentali e man mano andiamo a vedere quelle più complesse. Come prima cosa impostiamo un carattere (font) per tutte le pagine e aggiustiamo il colore di sfondo. body{ background:#dfdfdf; font-family: arial; }

Ora stiamo utilizzando come selettore body ovvero il tag html <body>.

2.4 I selettori CSS (con i tag Html) Utilizzando come selettori i tag html possiamo applicare uno stile per tutti i titoli <h1>. h1{ font-size: 50px; color: #f15c62; text-transform: uppercase; text-align: center; }

Con questo codice definiamo la dimensione del titolo con “font-size: 50px” e il colore con “color: #f15c62”. Con “text-transform: uppercase” imposto tutte le lettere del titolo come maiuscole e con “text-align: center” centro il testo. Il risultato è un qualcosa di questo tipo:

Il codice del colore che abbiamo utilizzato è esadecimale #f15c62, possiamo trovare il codice di questo colore con photoshop o altri software di grafica come sketch e illustrator.

Possiamo definire uno stile sempre utilizzando i tag html come selettori per i paragrafi <p> e i titoli <h2> p{ background: #fff; padding:15px; } h2{ font-size: 22px; color: #fff; background: #f15c62; padding:15px; text-align: center; }

In questo codice utilizziamo le proprietà viste prima (color, font-size) e ne introduciamo di nuove. La propietà background viene utilizzata per definire il colore dello sfondo (nel nostro caso del paragrafo). Padding viene utilizzata per dare una “imbottitura” di 15px al nostro paragrafo.

2.5 Proprietà a più selettori Una tecnica spesso utilizzata è quelle di applicare proprietà a più elementi utilizzando più selettori separati da virgola, per esempio: h1, a{color: #f15c62;}

Con questa istruzione sto applicando il colore #f15c62 a tutti i titoli <h1> e a tutti i link <a> con un unica istruzione. Questo ci permette di definire lo stile degli elementi in maniera veloce e intelligente.

2.5 I selettori CSS (le classi) Abbiamo applicato un stile a tutti i paragrafi se ne duplico uno quindi dovremmo vedere lo stesso stile applicato al secondo <p>

… <h2>Home</h2> <p>Home page del mio sito</p> <p>Secondo paragrafo nella home page del sito</p> …

Con il seguente risultato nel browser:

Se volessimo però avere uno stile differente solo per un paragrafo dobbiamo utilizzare una classe. Per creare una classe prima la dobbiamo dichiarare nel foglio di stile con la seguente e sintassi: .dark{ background: #333; color:#fff; }

Con .nome-classe definiamo la classe, all’interno delle parentesi graffe definiamo le proprietà. Fatto questo applichiamo la classe al elemento nel html.

<p>Home page del mio sito</p> <p class="dark">Secondo paragrafo nella home page del sito</p>

Il nostro secondo paragrafo cambierà colore.

Selezionando gli elementi con le classi siamo più specifici rispetto la selezione con i tag html. Questo vuol dire che la classe .dark applicata al elemento p sovrascrive le proprietà di <p>. p{ background: #fff; padding:15px; } .dark{ background: #333; color:#fff; }

Le classi sono più specifiche dei tag html nel css, se avessimo invece due selettori uguali e di pari livello: p{ background: #fff; padding:15px; } p{ background: #333; color:#fff; }

Le proprietà che vengono applicate sono le ultime “background: #333” e “color:#fff”.

Questo perché i fogli di stile CSS sono processati dall’alto verso il basso (in cascata), a parità di specificità vengono applicate le proprietà dell’ultimo selettore.

2.6 I selettori CSS (gli id) Le classi possono essere applicate a più elementi nella stessa pagina per esempio: <p>Home page del mio sito</p> <p class="dark">Secondo paragrafo nella home page del sito</p> <p class="dark">Terzo paragrafo nella home page del sito</p>

Gli id invece sono univoci possono essere applicati a un solo elemento. <p id="colorfull">Quarto paragrafo nella home page del sito</p>

Il selettore id è più specifico delle classi, nel foglio di stile ha la seguente sintassi. #colorfull{ background: #f15c62; color:#333; }

il cancelletto è seguito dal nome del id. Il risultano nel browser sarà il seguente:

2.7 I selettori CSS esempi di utilizzo Nello sviluppo di siti web si tende a utilizzare più le classi rispetto che gli id, questo perché l’id è molto specifico. Nella nostra pagina di esempio possiamo avere un solo id id=“colorfull". Se avessimo l’esigenza di utilizzare quello stile su un altro elemento non potremmo farlo. Per uno stile ripetibile su più elementi devo utilizzare una classe. Un esempio classico dell’utilizzo di un id è il menu di navigazione. Nella nostra struttura html inseriamo (nella lista utilizzata per creare il menu) l’id navigazione. <ul id="navigazione"> <li> Home </li> <li> <a href="pagina-2.html">Pagina 2</a> </li> <li> <a href="pagina-3.html">Pagina 3</a> </li> </ul>

A seguire nel foglio di stile definisco le proprietà dell’id. #navigazione{text-align: center} #navigazione li {display: inline;}

Con questo codice allineo al centro la lista “#navigazione”. Con il selettore combinato “#navigazione li” vado ad applicare la proprietà “display: inline” a tutti gli elementi <li> della lista che “id=navigazione”. Il risultato nel browser è un menu centrato.

Ora facciamo un piccola verifica per vedere se hai capito la base dei selettori css. Se volessi applicare un colore a tutti i link <a> del nostro sito che sintassi CSS dovrei utilizzare? Prova a scrivere la risposta: …………………………………………………… Nella prossima pagina trovi la soluzione.

a{color: #codice-colore} per esempio --> a{color: #f15c62;}

Ecco il risultato nel menu della nostra struttura.

Con questo concludiamo l’introduzione base al mondo dell’ Html e Css. Puoi trovare i file del codice realizzato in questo eBook a questo link: http://www.marchettidesign.net/demo/html-base.zip

3 Guida pratica all’HTML e CSS: Conclusioni Abbiamo realizzato il nostro primo sito! Spero di averti dato una mano a capire come funzionano Html e Css, logicamente c’è ancora tanto da fare ma ora hai delle basi solide sulle quali costruire la tua conoscenza! Se ti va di ringraziarmi l’asciamo un like sulla pagina Facebook ;-) https://www.facebook.com/marchettidesignnet/ Continua ad apprendere il prossimo passo è guardarti questi 3 video su come realizzare lo scheletro delle strutture web più utilizzate per creare siti: http://www.marchettidesign.net/tag/float/ Mi raccomando guardali tutti e cimentati nel ricreare le stesse strutture che ti mostro nel video, quando ti senti abbastanza ferrato, fai il salto di qualità e prova a ricreare questa struttura: http://www.marchettidesign.net/2016/07/creare-un-tema-wordpress-responsive-2-struttura-html-e-responsive-design/ Fammi sapere, nei commenti delle varie risorse che ti ho linkato come sta andando e se queste ti sono state utili! A presto, Stay Tuned! Andrea Marchetti www.marchettideign.net Tutti i diritti sono riservati MarchettiDesign.net

P.S. Sto realizzando un corso su come disegnare un sito web, avendo ben in mente obbiettivi di Design, conversione e User Experience se ti interessa iscritti alla newsletter, ti avviserĂ˛ quando sarĂ pronto! http://eepurl.com/QuUtT