Blog

BLOG
1

UN MODO MODERNO PER
COMUNICARE

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

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

Cosa mi serve?
4

 Blog ospitato da server pubblico
 Wordpress
 Splinder
 Myblog
 Blogspot
 Il Cannocchiale
 Blog disponibile su sito personale
 http://www.mioblog.com

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

HTML
6

IL LINGUAGGIO BASE PER LE
PAGINE WEB

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

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

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

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

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)

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>

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

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

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

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

Gestione dei caratteri
17

<BASEFONT size = “4”>
caratteri a dimensione 4
<FONT size = “3”> caratteri a dimensione 3 </FONT>
<FONT size = “+1”> caratteri a dimensione 5
</FONT>

<FONT size = “5” color = “red” face = “Courier”> testo rosso Courier di
dimensione 5 </FONT>

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)

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>

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

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

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>

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

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)

Tag A
25

<A href = “ URL “> testo di riferimento </A>

<A href = “http://www.itis-volta.it> Istituto Tecnico Industriale
“Alessandro Volta” </A>

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

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

TD – TH - CAPTION
28

<TD> nuova cella in una riga </TD>

<TH> elemento evidenziato in cella </TH>

<CAPTION> titolo della tabella </CAPTION>

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

THEAD – TFOOT - TBODY
30

<THEAD> righe di intestazione </THEAD>

<TFOOT> righe di fondo </TFOOT>

<TBODY> righe del corpo </TBODY>

ESEMPIO
31

<TABLE>
<CAPTION> Tabella </CAPTION>

<THEAD>
<TR><TD>Primo</TD><TD>Secondo</TD></TR>
</THEAD>

<TBODY>
<TR><TD>uno</TD><TD>due</TD></TR>
<TR><TD>tre</TD><TD>quattro</TD></TR>
<TR><TD>cinque</TD><TD>sei</TD></TR>
</TBODY>

</TABLE>

ESEMPIO
32

<TABLE>

<THEAD>
<TR><TD>Primo</TD><TD>Secondo</TD></TR>
</THEAD>

<TBODY>
<TR><TD>uno</TD><TD>due</TD></TR>
<TR><TD>tre</TD><TD>quattro</TD></TR>
</TBODY>

<TFOOT>
<TR><TD>Alfa</TD><TD>Beta</TD></TR>
</TFOOT>

</TABLE>

ESEMPIO
33

<TABLE border = “1”>
<CAPTION align = “top”> Tabella complessa </CAPTION>

<TR>
<TH colspan = “2”, rowspan = “2”> </TH>
<TH colspan = “2”> MEDIA </TH>
</TR>
<TR>
<TH>Altezza</TH>
<TH>Peso</TH>
</TR>
<TR>
<TH rowspan = “2”, valign = “top”> Genere </TH>
<TH> Maschi </TH>
<TD> 1,75 </TD>
<TD> 70 </TD>
</TR>
<TR>
<TH> Femmine </TH>
<TD> 1,65 </TD>
<TD> 60 </TD>
</TR>
</TABLE>

CSS
34

FOGLI DI STILE A CASCATA

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>

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

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

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

Selettori
39

• Selettori di tipo
• Classi
• Identificatori

Selettori di tipo
40

Corrispondono al nome del TAG HTML cui si riferiscono

p {…}
a {…}
div {…}
h1 {…}
* {…}

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

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

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

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

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 {…}

Blog

More Related Content

What's hot

Viewers also liked

Similar to Blog

Blog