2. Definizione
2
BLOG
web + log
1997 dicembre: John Barger usa nel suo sito il termine weblog
1999: Patrick Merholz usa la frase we blog nel suo sito
3. Classificazione dei blog
3
Blog personale
Blog didattico
Audio blog
Blog di attualità
Video blog
Blog politico
M blog
Blog tematico
Blog directory
Watch blog
Photo blog
4. Cosa mi serve?
4
Blog ospitato da server pubblico
Wordpress
Splinder
Myblog
Blogspot
Il Cannocchiale
Blog disponibile su sito personale
http://www.mioblog.com
5. Terminologia
5
Blog : diario in rete
Blogger : autore di un blog
Post : singolo messaggio in un blog
Commento : commento ad un post
Permalink : link ad un singolo post
Trackback : segnalazione di link ai propri
post
Template : struttura del blog
Feed (RSS) : formato testuale per leggere i
post fuori dal blog
7. Ipertesti
7
Insieme di documenti, collegati tra loro
tramite link (riferimenti ipertestuali)
I link consentono di seguire un
percorso scelto a piacere e non
impongono sequenzialità.
8. HTTP
8
Hyper Text Transfer Protocol
trasferisce attraverso la rete internet le
pagine web localizzandole mediante un
sistema di indirizzamento noto come
URL – Uniform Resource Locator
9. HTML
9
Hyper Text Markup Language
Consente di:
Inserire oggetti
Definisce: immagini
Struttura di un ipertesto tabelle
Aspetto di un ipertesto moduli
Creare link ipertestuali
interni
esterni
10. Strumenti per creare un file HTML
10
1. Editor di testo
1. WordPad (blocco note)
2. Applicazione specifica di tipo WYSIWYG
1. Microsoft FrontPage
2. Netscape Composer
3. Macromedia DreamWeaver
Il file va salvato con estensione
.htm o .html
affinché sia letto da un browser
11. Tag HTML
11
sono i comandi del linguaggio
<NOMETAG>………………………</NOMETAG>
(tranne pochi casi vanno aperti e chiusi)
possono avere degli attributi scelti tra un
insieme predefinito, i quali assumono
determinati valori (scritti tra virgolette)
12. Struttura di un documento HTML
12
Un documento HTML è contenuto per intero all’interno del tag
<HTML>…………………………………………..</HTML>
<HTML>
<HEAD>
descrizione delle caratteristiche del documento
</HEAD>
<BODY>
documento vero e proprio
</BODY>
</HTML>
13. Caratteristiche dei tag HTML
13
hanno nomi mnemonici
possono avere degli attributi
si possono indentare per facilitare la
leggibilità
sono indifferenti rispetto all’uso di
caratteri maiuscoli o minuscoli
sono indifferenti rispetto agli spazi
14. Intestazione del documento (tag <HEAD>)
14
<HEAD>
<TITLE>ITIS Alessandro Volta – Napoli </TITLE>
<META name = “keywords” content = “Napoli, Alessandro Volta”>
<META name = “author” content = “Francesco Zoino”>
<META name = “generator” content = “WordPad”>
</HEAD>
Il titolo viene usato per costruire gli indici automatici di cui si servono i motori di ricerca
Le keywords sono i termini usati dai motori di ricerca per l’indicizzazione
Il contenuto del tag <TITLE> viene inserito nell’elenco dei Preferiti quando si salva la pagina nel browser
15. Titoli
15
<H1>titolo 1</H1>
<H2>titolo 2</H2>
<H3>titolo 3</H3>
…….
<H6>titolo 6</H6>
Oltre che per indicare quali parti di testo vengono usate come
titoli, permettono di controllare le dimensioni dei caratteri dal più
grande (titolo 1) al più piccolo (titolo 6).
16. Attributi di <BODY>
16
<BODY
bgcolor = “colore sfondo”
text = “colore testo”
background = “immagine di sfondo”
link = “colore link da visitare”
vlink = “colore link visitato”
>
Il colore può essere specificato con:
parole chiave: red, yellow,….
codice esadecimale
17. Gestione dei caratteri
17
<BASEFONT size = “4”>
caratteri a dimensione 4
<FONT size = “3”> caratteri a dimensione 3 </FONT>
caratteri a dimensione 4
<FONT size = “+1”> caratteri a dimensione 5
</FONT>
caratteri a dimensione 4
<FONT size = “5” color = “red” face = “Courier”> testo rosso Courier di
dimensione 5 </FONT>
18. Formato dei caratteri
18
Stili fisici
<B>testo</B> grassetto
<I>testo</I> corsivo
Stili logici
<EM> testo </EM> enfasi (corsivo)
<STRONG> testo </STRONG> forte enfasi (grassetto)
19. Allineamento e paragrafi
19
<p align = “left”> testo del paragrafo </p>
<p align = “right”> testo del paragrafo </p>
<p align = “center”> testo del paragrafo </p>
<CENTER> testo da centrare </CENTER>
<BR>
HTML non è sensibile alle linee vuote
<P>
20. Lista di elementi non numerata
20
UL = Unordered List
LI = List Item
<UL>
<LI> primo item </LI>
<LI> secondo item </LI>
…
<LI> ultimo item </LI>
</UL>
tipo di punto elenco <UL type = “disc”>
<UL type = “circle”>
<UL type = “square”>
21. Lista di elementi numerata
21
<OL>
OL = Ordered List
<LI> primo item </LI>
<LI> secondo item </LI> tipo di numerazione
… <OL type = “1”>
<LI> ultimo item </LI> <OL type = “A”>
</OL> <OL type = “a”>
<OL type = “I”>
<OL type = “i”>
<OL start = “numero di partenza”>
22. Lista descrittiva
22
DL = Definition List
DT = Definition Term
DD = Definition Description
<DL>
<DT> primo termine </DT>
<DD> descrizione </DD>
…
<DT> ultimo termine </DT>
</DL>
23. Immagini
23
<IMG
src = “pathname”
align = “tipo di allineamento”
alt = “testo alternativo all’immagine”
border = “larghezza del bordo in pixel”
height = “altezza dell’immagine in pixel”
width = “larghezza dell’immagine in pixel”
space = “spazio a destra e a sinistra in
pixel”
vspace = “spazio in alto e in basso in pixel”
>
24. Collegamenti ipertestuali
24
URL : protocollo://indirizzo internet/pathname#label
Protocolli
http (trasferimento con http)
ftp (trasferimento con ftp)
news (collegamento a server news)
telnet (collegamento remoto)
mailto (spedizione di mail)
25. Tag A
25
<A href = “ URL “> testo di riferimento </A>
<A href = “http://www.itis-volta.it> Istituto Tecnico Industriale
“Alessandro Volta” </A>
26. TABELLE
26
<TABLE> descrizione della tabella </TABLE>
<TABLE
border = “larghezza dei bordi”
align = “allineamento”
cellspacing = “spazio in pixel tra le celle”
cellpadding = “spazio tra bordo e contenuto delle celle”
width = “larghezza della tabella in pixel o in
percentuale”
>
27. TABELLE -FORMATTAZIONE : TR
27
<TR> nuova riga </TR>
<TR
align = “allineamento”
valign = “allineamento verticale del testo”
bgcolor = “colore di sfondo della riga”
>
<TR
align = “left”
valign = “bottom”
bgcolor = “yellow”
>
28. TD – TH - CAPTION
28
<TD> nuova cella in una riga </TD>
<TH> elemento evidenziato in cella </TH>
<CAPTION> titolo della tabella </CAPTION>
29. ATTRIBUTI DI TD E TH
29
<TD (TH)
width = “larghezza in pixel o in percentuale”
colspan = “numero di colonne su cui si distribuisce”
rowspan = “numero di righe su cui si distribuisce”
nowrap (non andare a capo nella cella)
>
30. THEAD – TFOOT - TBODY
30
<THEAD> righe di intestazione </THEAD>
<TFOOT> righe di fondo </TFOOT>
<TBODY> righe del corpo </TBODY>
35. CSS
35
Cascading Style Sheet
Può essere:
•Un file con estensione .css associato al file html
•Del codice che si incorpora nelle pagine html stesse
<head> <head>
<link rel = “stylesheet” href = “foglio.css” type = <style type = “text/css”>
“text/css”> …
… </style>
</head> </head>
36. Formato delle regole CSS
36
selettore { dichiarazione }
un oggetto all’interno del documento
ciò che si vuole ottenere sull’oggetto
In generale:
selettore, selettore, selettore {
dichiarazione;
dichiarazione;
dichiarazione;
}
37. Dichiarazioni CSS
37
selettore { proprietà : valore valore_alternativo
valore_alternativo …}
scomposizione della dichiarazione
i valori alternativi si assegnano in ordine di importanza e sono
separati da spazi
38. Esempi
38
h1 { color : red }
BODY { background: url(fondale.jpg) white }
si attribuisce al BODY lo sfondo fondale.jpg o in subordine uno
sfondo bianco
39. Selettori
39
• Selettori di tipo
• Classi
• Identificatori
40. Selettori di tipo
40
Corrispondono al nome del TAG HTML cui si riferiscono
p {…}
a {…}
div {…}
h1 {…}
* {…}
41. Classi
41
Servono a definire un insieme di oggetti omogenei.
Per associare un elemento a una classe è
sufficiente specificarne il nome attraverso
HTML l’attributo class.
<div class = “nomeclasse”>…</div>
.nomeclasse {…}
CSS
42. Combinazione di selettori di tipo e classi
42
HTML
<p class = “nomeclasse”>…</p>
<h1 class = “nomeclasse”>…</h1>
applicata a tutti gli elementi di classe nomeclasse
CSS
applicata agli elementi <p> di classe nomeclasse
.nomeclasse {…}
p.nomeclasse {…}
h1.nomeclasse {…}
applicata agli elementi <h1> di classe nomeclasse
43. Identificatori
43
Servono a selezionare un elemento unico nella pagina.
Per associare un elemento a un identificatore
è sufficiente specificarne il nome attraverso
HTML l’attributo id.
<div id = “nomeidentificatore”>…</div>
# nomeidentificatore {…}
CSS
44. Pseudoclassi
44
Supportate dai browser più diffusi (è importante scriverle in ordine)
link non ancora visitato
link già visitato
a:link
a:visited
a:hover link su cui è posizionato il mouse
a:focus
a:active
link che ha ricevuto il focus
link durante l’attivazione da parte dell’utente
45. Discendenza tra selettori
45
Per selezionare un elemento della pagina con maggiore
accuratezza, è possibile indicarne non solo tipo, classe o
identificatore, ma anche specificare uno o più elementi progenitori.
HTML
<h1>Omero - <em>Iliade</em></h1>
<p>Cantami, o Diva, del <em>Pelide Achille</em></p>
CSS
Se la discendenza è padre-figlio
h1 em {…} la si indica con >
p em {…}
