Impara a codificare HTML&CSS

Se puoi, immagina un tempo prima dell’invenzione di Internet. I siti web non esistevano, e i libri, stampati su carta e strettamente rilegati, erano la tua fonte primaria di informazioni. Ci voleva un considerevole sforzo e una notevole quantità di letture per rintracciare l’esatta informazione che stavi cercando.

Oggi puoi aprire un browser web, saltare sul tuo motore di ricerca preferito e cercare. Qualsiasi informazione immaginabile è a portata di mano. Ed è probabile che qualcuno da qualche parte abbia costruito un sito web con la tua esatta ricerca in mente.

In questo libro ti mostrerò come costruire i tuoi siti web usando i due linguaggi informatici più dominanti: HTML e CSS.

Prima di iniziare il nostro viaggio per imparare a costruire siti web con HTML e CSS, è importante capire le differenze tra i due linguaggi, la sintassi di ciascun linguaggio, ed alcuni termini comuni.

Che cosa sono HTML & CSS?

HTML, HyperText Markup Language, dà struttura e significato al contenuto definendolo, per esempio, come titoli, paragrafi o immagini. I CSS, o Cascading Style Sheets, sono un linguaggio di presentazione creato per dare stile all’aspetto del contenuto, usando, per esempio, caratteri o colori.

I due linguaggi – HTML e CSS – sono indipendenti l’uno dall’altro e dovrebbero rimanere tali. I CSS non dovrebbero essere scritti all’interno di un documento HTML e viceversa. Come regola, l’HTML rappresenterà sempre il contenuto, e i CSS rappresenteranno sempre l’aspetto di quel contenuto.

Con questa comprensione della differenza tra HTML e CSS, immergiamoci nell’HTML in modo più dettagliato.

Capire i termini comuni dell’HTML

Mentre inizierai ad usare l’HTML, probabilmente incontrerai nuovi e spesso strani termini. Col tempo diventerai sempre più familiare con tutti loro, ma i tre termini HTML comuni con cui dovresti iniziare sono elementi, tag e attributi.

Elementi

Gli elementi sono identificati dall’uso di parentesi angolari minori e maggiori, < >, che circondano il nome dell’elemento. Così, un elemento avrà il seguente aspetto:

 
1 2


<a> 




  
Tags
L’uso di parentesi angolari minori e maggiori che circondano un elemento crea ciò che è noto come tag. I tag si presentano più comunemente in coppie di tag di apertura e di chiusura.
Un tag di apertura segna l’inizio di un elemento. Consiste in un segno meno-che seguito dal nome dell’elemento, e poi termina con un segno più-che; per esempio, <div>.
Un tag di chiusura segna la fine di un elemento. Consiste in un segno meno-che seguito da una barra in avanti e dal nome dell’elemento, e poi finisce con un segno maggiore-che; per esempio, </div>.
Il contenuto che cade tra i tag di apertura e di chiusura è il contenuto di quell’elemento. Un anchor link, per esempio, avrà un tag di apertura <a> e un tag di chiusura </a>. Quello che cade tra questi due tag sarà il contenuto del link di ancoraggio.
Quindi, i tag di ancoraggio avranno un aspetto simile a questo:
 
1 2


<a>...</a> 




  
Attributi
Gli attributi sono proprietà usate per fornire informazioni aggiuntive su un elemento. Gli attributi più comuni includono l’attributo id, che identifica un elemento; l’attributo class, che classifica un elemento; l’attributo src, che specifica una fonte per il contenuto incorporabile; e l’attributo href, che fornisce un riferimento ad una risorsa collegata.
Gli attributi sono definiti all’interno del tag di apertura, dopo il nome di un elemento. Generalmente gli attributi includono un nome e un valore. Il formato per questi attributi consiste nel nome dell’attributo seguito da un segno di uguale e poi da un valore di attributo citato. Per esempio, un elemento <a> che include un attributo href avrebbe il seguente aspetto:
 
1 2


<a href="http://shayhowe.com/">Shay Howe</a> 




  

Common HTML Terms Demo
Guarda la penna Common HTML Terms di Shay Howe (@shayhowe) su CodePen.

Il codice precedente mostrerà il testo “Shay Howe” sulla pagina web e porterà gli utenti a http://shayhowe.com/ cliccando sul testo “Shay Howe”. L’elemento di ancoraggio è dichiarato con i tag di apertura <a> e di chiusura </a> che racchiudono il testo, e l’attributo e il valore di riferimento dell’hyperlink sono dichiarati con href="http://shayhowe.com" nel tag di apertura.

Ora che sai cosa sono gli elementi HTML, i tag e gli attributi, diamo un’occhiata alla creazione della nostra prima pagina web. Se qualcosa vi sembra nuovo, non preoccupatevi, lo decifreremo man mano che procediamo.
Impostare la struttura del documento HTML
I documenti HTML sono documenti di testo semplice salvati con un’estensione .html piuttosto che un’estensione .txt. Per iniziare a scrivere HTML, hai bisogno prima di tutto di un editor di testo semplice che ti è comodo usare. Purtroppo questo non include Microsoft Word o Pages, poiché questi sono editor di testo ricco. Due dei più popolari editor di testo semplice per scrivere HTML e CSS sono Dreamweaver e Sublime Text. Le alternative gratuite includono anche Notepad++ per Windows e TextWrangler per Mac.
La dichiarazione del tipo di documento, o <!DOCTYPE html>, informa i browser web quale versione di HTML è in uso ed è posta all’inizio del documento HTML. Poiché useremo l’ultima versione di HTML, la nostra dichiarazione del tipo di documento è semplicemente <!DOCTYPE html>. Dopo la dichiarazione del tipo di documento, l’elemento <html> indica l’inizio del documento.
 All’interno dell’elemento <html>, l’elemento <head> identifica la parte superiore del documento, compresi eventuali metadati (informazioni di accompagnamento sulla pagina). Il contenuto all’interno dell’elemento <head> non viene visualizzato sulla pagina web stessa. Invece, può includere il titolo del documento (che viene visualizzato sulla barra del titolo nella finestra del browser), collegamenti a qualsiasi file esterno, o qualsiasi altro metadato utile.
Tutto il contenuto visibile all’interno della pagina web rientrerà nell’elemento <body>. Una ripartizione di una tipica struttura di un documento HTML assomiglia a questa:

Dimostrazione della struttura del documento HTML
Guarda la struttura del documento HTML di Shay Howe (@shayhowe) su CodePen.

Il codice precedente mostra il documento che inizia con la dichiarazione del tipo di documento, <!DOCTYPE html>, seguito direttamente dall’elemento <html>. All’interno dell’elemento <html> vengono gli elementi <head> e <body>. L’elemento <head> include la codifica dei caratteri della pagina tramite il tag <meta charset="utf-8"> e il titolo del documento tramite l’elemento <title>. L’elemento <body> include un titolo tramite l’elemento <h1> e un paragrafo tramite l’elemento <p>. Poiché sia l’intestazione che il paragrafo sono annidati all’interno dell’elemento <body>, sono visibili sulla pagina web.
Quando un elemento è posto all’interno di un altro elemento, noto anche come annidato, è una buona idea indentare quell’elemento per mantenere la struttura del documento ben organizzata e leggibile. Nel codice precedente, entrambi gli elementi <head> e <body> erano annidati – e indentati – dentro l’elemento <html>. Il modello di indentazione degli elementi continua man mano che nuovi elementi vengono aggiunti all’interno degli elementi <head> e <body>.

Elementi a chiusura automatica
Nell’esempio precedente, l’elemento <meta> aveva solo un tag e non includeva un tag di chiusura. Non temere, questo era intenzionale. Non tutti gli elementi consistono in tag di apertura e chiusura. Alcuni elementi ricevono semplicemente il loro contenuto o comportamento dagli attributi all’interno di un singolo tag. L’elemento <meta> è uno di questi elementi. Il contenuto del precedente elemento <meta> viene assegnato con l’uso dell’attributo charset e del valore. Altri elementi comuni di chiusura automatica includono

<br>
<embed>
<hr>
<img>
<input>
<link>
<meta>
<param>
<source>
<wbr>

La struttura delineata qui, facendo uso del tipo di documento <!DOCTYPE html> e degli elementi <html><head> e <body>, è abbastanza comune. Vorremo tenere questa struttura del documento a portata di mano, dato che la useremo spesso quando creeremo nuovi documenti HTML.

Convalida del codice
Non importa quanto siamo attenti quando scriviamo il nostro codice, inevitabilmente faremo degli errori. Fortunatamente, quando scriviamo HTML e CSS abbiamo dei validatori per controllare il nostro lavoro. Il W3C ha costruito entrambi i validatori HTML e CSS che scansionano il codice alla ricerca di errori. Convalidare il nostro codice non solo lo aiuta a rendere correttamente in tutti i browser, ma ci aiuta anche a insegnare le migliori pratiche per scrivere codice.

In pratica
Come web designer e sviluppatori front-end, abbiamo il lusso di frequentare un certo numero di grandi conferenze dedicate al nostro mestiere. Inventeremo la nostra conferenza, Styles Conference, e costruiremo un sito web per essa nel corso delle prossime lezioni. Ci siamo! 

Cambiamo un po’ marcia, allontanandoci dall’HTML, e diamo uno sguardo ai CSS. Ricordate, l’HTML definirà il contenuto e la struttura delle nostre pagine web, mentre i CSS definiranno lo stile visivo e l’aspetto delle nostre pagine web.
Comprendere i termini comuni dei CSS
In aggiunta ai termini HTML, ci sono alcuni termini comuni dei CSS con cui vorrete familiarizzare. Questi termini includono selettori, proprietà e valori. Come per la terminologia HTML, più lavori con i CSS, più questi termini diventeranno una seconda natura.
Selettori
Quando gli elementi vengono aggiunti ad una pagina web, possono essere stilizzati usando i CSS. Un selettore designa esattamente l’elemento o gli elementi all’interno del nostro HTML a cui applicare gli stili (come colore, dimensione e posizione). I selettori possono includere una combinazione di diversi qualificatori per selezionare elementi unici, tutto dipende da quanto specifico vogliamo essere. Per esempio, potremmo voler selezionare ogni paragrafo di una pagina, o potremmo voler selezionare solo uno specifico paragrafo di una pagina.
I selettori generalmente mirano al valore di un attributo, come un valore id o class, o al tipo di elemento, come <h1> o <p>.
Nei CSS, i selettori sono seguiti da parentesi graffe, {}, che comprendono gli stili da applicare all’elemento selezionato. Il selettore qui si rivolge a tutti gli elementi <p>.
 
1 2


p { ... } 




  
Proprietà
Una volta selezionato un elemento, una proprietà determina gli stili che saranno applicati a quell’elemento. I nomi delle proprietà cadono dopo un selettore, tra le parentesi graffe, {}, e immediatamente prima dei due punti, :. Ci sono numerose proprietà che possiamo utilizzare, come backgroundcolorfont-sizeheight, e width, e spesso vengono aggiunte nuove proprietà. Nel codice seguente, stiamo definendo le proprietà color e font-size da applicare a tutti gli elementi <p>.
 
1 2 3 4 5


p { color: ...; font-size: ...; } 




  
Valori
Finora abbiamo selezionato un elemento con un selettore e determinato quale stile vogliamo applicare con una proprietà. Ora possiamo determinare il comportamento di quella proprietà con un valore. I valori possono essere identificati come il testo tra i due punti, :, e il punto e virgola, ;. Qui stiamo selezionando tutti gli elementi <p> e impostando il valore della proprietà color su orange e il valore della proprietà font-size su 16 pixel.
 
1 2 3 4 5


p { color: orange; font-size: 16px; } 




  
Per rivedere, nei CSS il nostro set di regole inizia con il selettore, che è immediatamente seguito da parentesi graffe. All’interno di queste parentesi graffe ci sono dichiarazioni che consistono in coppie di proprietà e valori. Ogni dichiarazione inizia con una proprietà, che è seguita da due punti, il valore della proprietà e infine un punto e virgola.
È una pratica comune indentare le coppie di proprietà e valore all’interno delle parentesi graffe. Come per l’HTML, queste indentazioni aiutano a mantenere il nostro codice organizzato e leggibile.

Conoscere alcuni termini comuni e la sintassi generale dei CSS è un ottimo inizio, ma abbiamo ancora qualche elemento da imparare prima di andare troppo in profondità. In particolare, dobbiamo dare un’occhiata più da vicino a come funzionano i selettori all’interno dei CSS.
Lavorare con i selettori
I selettori, come già detto, indicano quali elementi HTML vengono stilizzati. È importante comprendere appieno come usare i selettori e come possono essere sfruttati. Il primo passo è quello di familiarizzare con i diversi tipi di selettori. Inizieremo con i selettori più comuni: selettori di tipo, classe e ID.
Selettori di tipo
I selettori di tipo puntano gli elementi secondo il loro tipo di elemento. Per esempio, se volessimo mirare a tutti gli elementi di divisione, <div>, useremmo un selettore di tipo div. Il codice seguente mostra un selettore di tipo per elementi di divisione così come l’HTML corrispondente che seleziona.
CSS
 
1 2


div { ... } 




  
HTML
 
1 2 3


<div>...</div> <div>...</div> 




  
Selettori di classe
I selettori di classe ci permettono di selezionare un elemento in base al valore dell’attributo class. I selettori di classe sono un po’ più specifici dei selettori di tipo, poiché selezionano un particolare gruppo di elementi piuttosto che tutti gli elementi di un tipo.
I selettori di classe ci permettono di applicare lo stesso stile a diversi elementi in una volta sola usando lo stesso valore dell’attributo class su più elementi.
Nei CSS, le classi sono indicate da un punto iniziale, ., seguito dal valore dell’attributo class. Qui il selettore di classe selezionerà qualsiasi elemento contenente il valore dell’attributo class di awesome, compresi gli elementi di divisione e di paragrafo.
CSS
 
1 2


.awesome { ... } 




  
HTML
 
1 2 3


<div class="awesome">...</div> <p class="awesome">...</p> 




  
Selettori ID
I selettori ID sono ancora più precisi dei selettori di classe, poiché puntano ad un solo elemento alla volta. Proprio come i selettori di classe usano il valore dell’attributo class di un elemento come selettore, i selettori ID usano il valore dell’attributo id di un elemento come selettore.
A prescindere dal tipo di elemento su cui appaiono, i valori degli attributi id possono essere usati solo una volta per pagina. Se usati, dovrebbero essere riservati ad elementi significativi.
Nei CSS, i selettori ID sono denotati da un segno hash iniziale, #, seguito dal valore dell’attributo id. Qui il selettore ID selezionerà solo l’elemento contenente il valore dell’attributo id di shayhowe.
CSS
 
1 2


#shayhowe { ... } 




  
HTML
 
1 2


<div>...</div> 




  
Selettori addizionali
I selettori sono estremamente potenti, e quelli descritti qui sono i più comuni che incontreremo. Questi selettori sono anche solo l’inizio. Esistono molti selettori più avanzati e sono facilmente disponibili. Quando vi sentirete a vostro agio con questi selettori, non abbiate paura di esaminare alcuni dei selettori più avanzati.
Va bene, tutto sta cominciando ad essere completo. Aggiungiamo elementi ad una pagina all’interno del nostro HTML, e possiamo poi selezionare quegli elementi e applicare loro degli stili usando i CSS. Ora colleghiamo i punti tra il nostro HTML e i CSS, e facciamo in modo che questi due linguaggi lavorino insieme.
Riferimento dei CSS
Per far parlare i nostri CSS con il nostro HTML, abbiamo bisogno di fare riferimento al nostro file CSS all’interno del nostro HTML. La pratica migliore per referenziare il nostro CSS è quella di includere tutti i nostri stili in un singolo foglio di stile esterno, che viene referenziato dall’interno dell’elemento <head> del nostro documento HTML. L’uso di un singolo foglio di stile esterno ci permette di usare gli stessi stili in un intero sito web e di apportare rapidamente cambiamenti in tutto il sito.

Altre opzioni per aggiungere CSS
Altre opzioni per referenziare i CSS includono l’uso di stili interni e in linea. Potresti imbatterti in queste opzioni in natura, ma sono generalmente disapprovate, in quanto rendono l’aggiornamento dei siti web macchinoso e poco maneggevole.

Per creare il nostro foglio di stile CSS esterno, dovremo utilizzare nuovamente il nostro editor di testo preferito per creare un nuovo file di testo semplice con estensione .css. Il nostro file CSS dovrebbe essere salvato nella stessa cartella, o in una sottocartella, dove si trova il nostro file HTML.
Nell’elemento <head> del documento HTML, l’elemento <link> è usato per definire la relazione tra il file HTML e il file CSS. Poiché ci stiamo collegando al CSS, usiamo l’attributo rel con un valore di stylesheet per specificare la loro relazione. Inoltre, l’attributo href (o hyperlink reference) è usato per identificare la posizione, o percorso, del file CSS.
Considerate il seguente esempio di un documento HTML <head> elemento che fa riferimento ad un singolo foglio di stile esterno.
 
1 2 3 4


<head> <link rel="stylesheet" href="main.css"> </head> 




  
Per fare in modo che il CSS venga reso correttamente, il percorso del valore dell’attributo href deve essere direttamente correlato a dove viene salvato il nostro file CSS. Nell’esempio precedente, il file main.css è memorizzato nella stessa posizione del file HTML, noto anche come la directory principale.
Se il nostro file CSS è all’interno di una sottodirectory o sottocartella, il valore dell’attributo href deve essere correlato a questo percorso. Per esempio, se il nostro file main.css fosse memorizzato in una sottodirectory chiamata stylesheets, il valore dell’attributo href sarebbe stylesheets/main.css, usando una barra per indicare lo spostamento in una sottodirectory.
A questo punto le nostre pagine cominciano a prendere vita, lentamente ma sicuramente. Non ci siamo addentrati troppo nei CSS, ma potresti aver notato che alcuni elementi hanno stili predefiniti che non abbiamo dichiarato all’interno del nostro CSS. Questo è il browser che impone i propri stili CSS preferiti per quegli elementi. Fortunatamente possiamo sovrascrivere questi stili abbastanza facilmente, che è quello che faremo ora usando i CSS reset.
Usando i CSS Reset
Ogni browser web ha i propri stili predefiniti per diversi elementi. Il modo in cui Google Chrome rende le intestazioni, i paragrafi, le liste e così via può essere diverso da quello di Internet Explorer. Per assicurare la compatibilità cross-browser, le reimpostazioni CSS sono diventate ampiamente utilizzate.
Le reimpostazioni CSS prendono ogni elemento HTML comune con uno stile predefinito e forniscono uno stile unificato per tutti i browser. Queste reimpostazioni generalmente comportano la rimozione di qualsiasi dimensionamento, margine, padding o stile aggiuntivo e la riduzione di questi valori. Dato che i CSS sono in cascata dall’alto verso il basso – ne parleremo più avanti – il nostro reset deve essere all’inizio del nostro foglio di stile. Così facendo ci assicuriamo che quegli stili vengano letti per primi e che tutti i diversi browser lavorino da una linea di base comune.
Ci sono un mucchio di resettaggi diversi da usare, tutti con i loro punti di forza. Uno dei reset più popolari è quello di Eric Meyer, che è stato adattato per includere gli stili per i nuovi elementi HTML5.
Se ti senti un po’ più avventuroso, c’è anche Normalize.css, creato da Nicolas Gallagher. Normalize.css si concentra non sull’uso di un hard reset per tutti gli elementi comuni, ma invece sull’impostazione di stili comuni per questi elementi. Richiede una maggiore comprensione dei CSS, così come la consapevolezza di ciò che vorresti che fossero i tuoi stili.

Cross-Browser Compatibility & Testing
Come già detto, diversi browser rendono gli elementi in modi diversi. È importante riconoscere il valore della compatibilità cross-browser e dei test. I siti web non hanno bisogno di apparire esattamente uguali in ogni browser, ma dovrebbero essere vicini. Quali browser desideri supportare, e in che misura, è una decisione che dovrai prendere in base a ciò che è meglio per il tuo sito web.

In tutto ci sono una manciata di cose a cui prestare attenzione quando scrivi CSS. La buona notizia è che tutto è possibile, e con un po’ di pazienza capiremo tutto.
In pratica
Riprendendo da dove abbiamo lasciato l’ultima volta il nostro sito web della conferenza, vediamo se possiamo aggiungere un po’ di CSS.
È ora di controllare il nostro lavoro e vedere se il nostro HTML e CSS vanno d’accordo. Ora aprendo il nostro file index.html (o aggiornando la pagina se è già aperta) all’interno di un browser web dovrebbe mostrare risultati leggermente diversi da prima.

Demo & Codice sorgente
Di seguito potete vedere il sito della Styles Conference nel suo stato attuale, così come scaricare il codice sorgente per il sito web nel suo stato attuale.
Vedi il sito web della Styles Conference o scarica il codice sorgente (file zip)
Sommario
Finora tutto bene! Abbiamo fatto alcuni grandi passi in questa lezione.
Pensa che ora conosci le basi di HTML e CSS. Continuando e passando più tempo a scrivere HTML e CSS, diventerai molto più a tuo agio con i due linguaggi.
Per ricapitolare, finora abbiamo coperto quanto segue:

La differenza tra HTML e CSS
Conoscere gli elementi HTML, i tag e gli attributi
Impostare la struttura della tua prima pagina web
Conoscere i selettori CSS, proprietà e valori dei CSS
Lavorare con i selettori CSS
Riferire i CSS nel tuo HTML
Il valore dei CSS reset

Ora diamo uno sguardo più da vicino all’HTML e impariamo un po’ di semantica.