HTML e CSS

Sviluppo applicazioni web e linguaggio HTML

LEZIONE 01

HTML + CSS

Il World Wide Web è un insieme di contenuti e servizi
disponibili tramite un accesso internet

• Protocollo di rete client/server
• Contesto di esecuzione: internet o intranet
• Protocollo applicativo: HTTP
server
client

script: ASP,JSP,PHP...
HTML
+ CSS + dati e risorse: file,
database, immagini...
Javascript

Gli attori in gioco

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”
server
client Request
(browser) 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

browser
Il client conosce
solo l’HTML

HyperText Markup Language

L’HTML spiega al
browser che cosa deve
visualizzare

Struttura di un documento HTML
<html>
<head>

</body>
</html>

< p >
lo chiamavano paragrafo

< a >
lo chiamavano anchor (link)

< img >
lo chiamavano immagine

< h1 >
lo chiamavano titolo

< ul >
lo chiamavano lista

< table>

lo chiamavano tabella

<h1>Questo è un titolo</h1>

Esempio di codice HTML

<p>
Questo è un paragrafo con un
<a href="http://www.cgn.it">link</a>.
</p>


tag di apertura

<p>
</p>


tag di apertura tag di chiusura

<p>
</p>


tag di apertura tag di chiusura

<p>
</p>
attributo


Per un elenco completo dei tag scaricate il cheat sheet da addedbytes.com
Per un elenco completo scaricate il pdf

Mettiamoci un po’ di colore …

I CSS spiegano al
browser come deve
visualizzare le
informazioni
(colore, altezza, posizione, carattere,…)

Per identificare un elemento nella
pagina HTML ho bisogno di un selettore
html: <h1>titolo</h1>
1 Nome del TAG selettore: h1

ID dell’elemento
2 (univoco)
html: <p id=“intro”>…</p>
selettore: #intro

Classe
3 dell’elemento
html: <p class=“intro”>
…</p>
(posso averne più di selettore: .intro
una per pagina e tag)

Premessa

Struttura di una
regola di stile
commento

selettore {
/* dichiarazione */
proprietà: valore;
}

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

pseudoclasse

a:hover {
/* se vado sopra un
link si colora di rosso */
color: #FF0000;
}

Per un elenco completo delle regole scaricate il cheat sheet da addedbytes.com

Dove posso specificare le regole?

1 In-linea (direttamente come attributo style)

All’interno di un tag come questo:
2 <style type=“text/css”>…</style>

In un file esterno caricato nell’head con:
3 <link rel=“stylesheet” type=“text/css” href=“/style.css”/>

Come faccio ad usarli?

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

Reset CSS

# regole
Selettore 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

Perché sono “Cascading”?

Credits
Le immagini contenute in questa presentazione
hanno licenza Creative Commons

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/

Thank You MANUEL SCAPOLAN
website: www.manuelscapolan.it
twitter: manuelscapolan
e-mail: info@manuelscapolan.it

HTML e CSS

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a HTML e CSS

Semelhante a HTML e CSS (20)

Mais de Manuel Scapolan

Mais de Manuel Scapolan (9)

Último

Último (9)

HTML e CSS