Scribd
Carica
123 visualizzazioni

Guida Pratica HTML e CSS

Caricato da

Stefania Cristini
Copyright
© © All Rights Reserved
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
123 visualizzazioni

Guida Pratica HTML e CSS

Caricato da

Stefania Cristini
Copyright
© © All Rights Reserved
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
Sei sulla pagina 1/ 31

 

1
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, at-

traverso 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, spa-

ziature è 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.

2
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) vedre-

mo una pagina bianca nel nostro browser di default. Questo logicamente perché

non abbiamo ancora scritto nessun codice html al suo interno.

3
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 digi-

teremo 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 pa-

gina 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 con-

tenuto. Il tag di chiusura ha sempre il backslash “/“ prima della keyword del tag.

Gli atri due tag fondamentali per costruire una pagina web sono:

4
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 contie-

ne quello che viene visualizzato nella pagina web.

<body>

Mettendo insieme i nostri 3 tag fondamentali crediamo la struttura base di una pa-

gina 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 scriven-

do 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.

5
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 inter-

no è 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.

6
<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 at-

tributi sono informazioni che inseriamo dentro i tag con la sintassi nome-attribu-

to=“valore-attributo”. Nel caso dei link l’attributo href contiene l’indirizzo della pa-

gina web (l’Url) alla quale vogliamo arrivare tramite il link. Se aggiorniamo la nostra

pagina con l’esempio appena fatto avremo:

7
<!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>
</body>
</html>

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.

8
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 seguen-

te:

<img src="la-mia-immagine.jpg" alt=“descrizione-di-cosa-ce-nel-


immagine”>

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.

9
<!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.

10
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
 

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 otti-

mizzata 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.

12
<!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=“Stephen Curry”/>
</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 utiliz-

zare sotto paragrafi fino a 6 livelli (personalmente non sono mai andato sotto il 4).

13
 

Con questo abbiamo creato la nostra prima pagina html con dei contenuti di pro-

va. Dal punto di vista grafico lascia veramente a desiderare, vedremo nel prossimo

capitolo come migliorare la situazione applicando uno stile grafico con i Css.

14
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>

15
Nel codice abbiamo utilizzato una lista <ul> per creare il menu di navigazione. Al-

l’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 rinominia-

mo 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>

16
Ripetiamo l’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 na-

vigare tra le 3 pagine. La pagina corrente (nella quale siamo) non deve avere il link

attivo.

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 graf-

fe e vengono applicate al selettore di riferimento che precede le parentesi. Le re-

gole 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 valo-

re della proprietà background.

Per applicare lo stile che abbiamo appena creato al nostro sito dobbiamo in-

cluderlo 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>

18
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 pagi-

na-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 fonda-

mentali 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 sfon-

do.

body{
background:#dfdfdf;
font-family: arial;
}

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

19
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 co-

lore 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 trova-

re il codice di questo colore con photoshop o altri software di grafica come sketch

e illustrator.

20
 

Possiamo definire uno stile sempre utilizzando i tag html come selettori per i para-

grafi <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 introdu-

ciamo di nuove. La propietà background viene utilizzata per definire il colore dello

sfondo (nel nostro caso del paragrafo). Padding viene utilizzata per dare una “im-

bottitura” di 15px al nostro paragrafo.

21
 

2.5 Proprietà a più selettori


Una tecnica spesso utilizzata è quelle di applicare proprietà a più elementi utiliz-

zando 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 ele-

menti 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>

22
…
<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 utiliz-

zare una classe.

Per creare una classe prima la dobbiamo dichiarare nel foglio di stile con la se-

guente 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.

23
<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;
}

24
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 “co-

lor:#fff”.

Questo perché i fogli di stile CSS sono processati dall’alto verso il basso (in casca-

ta), a parità di specificità vengono applicate le proprietà dell’ultimo selettore.

25
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:

26
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 ele-

mento 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 combi-

nato “#navigazione li” vado ad applicare la proprietà “display: inline” a tutti gli ele-

menti <li> della lista che “id=navigazione”. Il risultato nel browser è un menu cen-

trato.

27
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 do-

vrei utilizzare?

Prova a scrivere la risposta:

……………………………………………………

Nella prossima pagina trovi la soluzione.

28
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 trova-

re i file del codice realizzato in questo eBook a questo link: http://www.marchetti-

design.net/demo/html-base.zip

29
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-responsi-

ve-2-struttura-html-e-responsive-design/

Fammi sapere, nei commenti delle varie risorse che ti ho linkato come sta an-

dando e se queste ti sono state utili! A presto, Stay Tuned!

Andrea Marchetti

www.marchettideign.net

Tutti i diritti sono riservati MarchettiDesign.net

30
P.S.

Sto realizzando un corso su come disegnare un sito web, avendo ben in mente ob-

biettivi di Design, conversione e User Experience se ti interessa iscritti alla newslet-

ter, ti avviserò quando sarà pronto!

http://eepurl.com/QuUtT

31

Potrebbero piacerti anche