html e css
DESCRIPTION
Prima lezione di un corso sullo sviluppo di applicazioni webTRANSCRIPT
HTML + CSS
Sviluppo applicazioni web e linguaggio HTML
LEZIONE 01
Il World Wide Web è un insieme di contenuti e servizi disponibili tramite un accesso internet
Motori di ricerca
Aste on-line
Blog
Enciclopedie
fonte
• Protocollo di rete client/server
• Contesto di esecuzione: internet o intranet
• Protocollo applicativo: HTTP
Gli attori in gioco
HTML
+ CSS +
Javascript
script: ASP,JSP,PHP...
dati e risorse: file,
database, immagini...
client
server
“Navigare in internet”
Come trovo una
pagina su internet?
Attraverso il suo
indirizzo (o URL)… http://www.google.it/nwshp?hl=it
• Modello request/response
• Tipo di request: GET, POST, HEAD…
• Protocollo “stateless”
Request GET /default.htm HTTP/1.1
Host: www.microsoft.com
Response HTTP/1.1 200 OK
Server: Microsoft-IIS/6.0
Content-Type: text/html
Content-Lenght: 155
<html><body><h1>Hello …
Il protocollo HTTP
server
client (browser)
Il client conosce
solo l’HTML
HyperText Markup Language
browser
fonte
L’HTML spiega al
browser che cosa deve
visualizzare
Struttura di un documento HTML
<html>
<head>
</body>
</html>
< >
lo chiamavano TAG
???
< >
lo chiamavano paragrafo
p
< >
lo chiamavano anchor (link)
a
< >
lo chiamavano immagine
img
< >
lo chiamavano titolo
h1
< >
lo chiamavano lista
ul
< >
lo chiamavano tabella
table
… come si usano?
Esempio di codice HTML
<h1>Questo è un titolo</h1>
Esempio di codice HTML
<p>
Questo è un paragrafo con un
<a href="http://www.cgn.it">link</a>.
</p>
<h1>Questo è un titolo</h1>
Esempio di codice HTML
<p>
Questo è un paragrafo con un
<a href="http://www.cgn.it">link</a>.
</p>
<h1>Questo è un titolo</h1>
tag di apertura
Esempio di codice HTML
<p>
Questo è un paragrafo con un
<a href="http://www.cgn.it">link</a>.
</p>
<h1>Questo è un titolo</h1>
tag di apertura tag di chiusura
Esempio di codice HTML
<p>
Questo è un paragrafo con un
<a href="http://www.cgn.it">link</a>.
</p>
<h1>Questo è un titolo</h1>
tag di apertura tag di chiusura
attributo
Esempio di codice HTML
Per un elenco completo scaricate il pdf Per un elenco completo dei tag scaricate il cheat sheet da addedbytes.com
Mettiamoci un po’ di colore …
I CSS spiegano al
browser come deve
visualizzare le
informazioni (colore, altezza, posizione, carattere,…)
Premessa
Per identificare un elemento nella
pagina HTML ho bisogno di un selettore
1 Nome del TAG html: <h1>titolo</h1>
selettore: h1
Classe
dell’elemento (posso averne più di
una per pagina e tag)
html: <p class=“intro”>
…</p> selettore: .intro
ID dell’elemento
(univoco) html: <p id=“intro”>…</p>
selettore: #intro 2
3
Struttura di una
regola di stile
selettore {
/* dichiarazione */
proprietà: valore;
}
commento
h1 {
/* titolo in grassetto e
di colore rosso*/
color: #FF0000;
font-weight: bold;
padding: 15px 0 10px 0;
}
spaziatura
(Top Right Bottom Left)
#logo {
/* immagine con bordi
e margini personalizzati */
border: 1px solid #0000FF;
margin: 10px;
}
RedGreenBlue
a:hover {
/* se vado sopra un
link si colora di rosso */
color: #FF0000;
}
pseudoclasse
Per un elenco completo delle regole scaricate il cheat sheet da addedbytes.com
Come faccio ad usarli?
Dove posso specificare le regole?
1 In-linea (direttamente come attributo style)
In un file esterno caricato nell’head con: <link rel=“stylesheet” type=“text/css” href=“/style.css”/>
All’interno di un tag come questo: <style type=“text/css”>…</style> 2
3
Reset CSS
Il browser ha però degli stili predefiniti, è buona
norma definire una regola per rimuoverli:
/* v1.0 | 20080212 */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
Perché sono “Cascading”?
Selettore # regole in linea
# of ID #of CLASS # of TAG Specificità
LI 0 0 0 1 0,0,0,1
UL LI 0 0 0 2 0,0,0,2
DIV UL LI 0 0 0 3 0,0,0,3
DIV UL .LIclass 0 0 1 2 0,0,1,2
#myLI 0 1 0 0 0,1,0,0
<li style="color:red"> 1 0 0 0 1,0,0,0
NOTA: a parità di specificità prevale l’ultima regola
Slide 2 : http://www.flickr.com/photos/96745290@N00/54371294/
Slide 9 : http://www.flickr.com/photos/sbh/4826181212/in/photostream/
Slide 16 : http://www.flickr.com/photos/pisosantacruz/414375220/
Slide 32 : http://www.flickr.com/photos/anieto2k/5498808099/in/photostream/
Credits Le immagini contenute in questa presentazione
hanno licenza Creative Commons
Thank You
MANUEL SCAPOLAN website: www.manuelscapolan.it twitter: manuelscapolan e-mail: [email protected]