HTML e CSS

1
HTML e CSS

• Concetti base

Comunicazione Multimediale
2
Hyper Text Markup Language

• Structured Generalized Markup Language (SGML)
• Nasce in ambiente editoriale
• Testo non formattato ma contrassegnato da coppie
  di marcatori ltXXgt lt/XXgt
• Document Type Definition (DTD) per ogni categoria
  di documenti

Comunicazione Multimediale 29/10/04
3
Hyper Text Markup Language

• Serve per costruire una pagina web che ha
  estensione .htm o .html

• Può essere scritto con il semplice blocco notes o
  con diversi software (editor) che sono
  specializzati per favorire e controllare la
  sintassi del linguaggio (Front Page, Dreamweaver,
  )

Comunicazione Multimediale 29/10/04

• La pagina web può essere visualizzata solo grazie
  ad un particolare programma che interpreta i tags
  del linguaggio html (browser) Internet Explorer,
  Netscape,ecc

4
Hyper Text Markup Language

• I TAGS, o elementi, che compongono HTML devono
  essere racchiusi fra parentesi angolari ltcosìgt
  Si tratta di parole chiave, termini in lingua
  inglese.
• L'elemento (tag) smette di produrre il suo
  effetto nel momento in cui lo stesso viene
  ripetuto facendolo precedere da una barra
  laterale / contenuta sempre all'interno delle
  parentesi angolari lt/cosìgt.

Comunicazione Multimediale 29/10/04
5
Struttura di un documento
ltHTMLgt
ltHEADgt ... lt/HEADgt
Comunicazione Multimediale 29/10/04
ltBODYgt .... lt/BODYgt
lt/HTMLgt
6
HTML Es.1
è formato da definizioni, elementi, tags,
marcatori
lthtmlgt ltheadgt lttitlegt Primo esempiolt/titlegt lt/he
adgt ltbodygt ltpgt PRIMA RIGA lt/pgt ltpgt SECONDA RIGA
lt/pgt lt/bodygt lt/htmlgt
7
Hyper Text Markup Language

• HTML tutto il documento
• HEAD testata (metainformazione)
• TITLE titolo
• BODY corpo dell'informazione
• P paragrafo

8
HTML Es.2
lthtmlgt ltheadgt lttitlegt Secondo
esempiolt/titlegt lt/headgt ltbodygt ltp align"left"gt
Riga a sinistra lt/pgt ltp align"right"gt Riga a
destra lt/pgt ltp align"center"gt Riga al centro
lt/pgt ltp align"justify"gt Riga in cui
verifichiamo la struttura giustificata lt/pgt
lt/bodygt lt/htmlgt
Da notare in esecuzione che gli allineamenti
sono rispettati qualsiasi dimensione abbia la
finestra del browser
9
HTML Es.3
lthtmlgt ltheadgt lttitlegt terzo esempiolt/titlegt lt/he
adgt ltbodygt ltp align"left"gt Riga a sinistra
lt/pgt ltp align"right"gt Riga a destra lt/pgt ltp
align"center"gt Riga al centro lt/pgt ltpgt Riga
ltbrgtin cui verifichiamoltbrgt la strutturaltbrgt
giustificata lt/pgt lt/bodygt lt/htmlgt
10
HTML Es.4
lthtmlgt ltheadgt lttitlegt Quarto esempiolt/titlegt lt/h
eadgt ltbodygt ltp align"center"gt ITALIA TERRA DI
EMIGRANTI lt/pgt ltcentergt ltimg src"immagini/immigr
azioneitaliani2.jpg" width"340" height"219"
border"2" alt"Italiani partono per l'America"
gt lt/centergt lt/bodygt lt/htmlgt
11
HTML Es.5
lthtmlgt ltheadgt lttitlegt Quarto esempiolt/titlegt lt/h
eadgt ltbodygt ltp align"center"gt ltbgtltugtltigtltfont
face"Comic Sans MS" color"008000" size"3"
gt ITALIA TERRA DI EMIGRANTI lt/fontgtlt/igtlt/ugtlt/bgtlt/p
gt ltcentergt ltimg src"immagini/immigrazioneitalian
i2.jpg" width"340" height"219" border"2"
alt"Italiani partono per l'America"
gt lt/centergt lt/bodygt lt/htmlgt
12
HTML Es.6
lthtmlgt ltheadgt lttitlegt Quarto esempiolt/titlegt ltME
TA NAME"description" CONTENT"L'Italia come
terra di emigranti e di immigrati"gt ltMETA
NAME"keywords" CONTENT"Italia, emigranti,
immigrati, immigrazione, clandestini"gt lt/headgt ltbo
dy bgcolor"red" topmargin"10" bottommargin"10"
leftmargin"5" rightmargin"5" link"purple"
vlink"fuchsia" text"white"gt ltp
align"center"gt ltbgtltugtltigtltfont face"Comic Sans
MS" color"008000" size"6" gt ITALIA TERRA DI
EMIGRANTI lt/fontgtlt/igtlt/ugtlt/bgtlt/pgt ltcentergt ltimg
src"immagini/immigrazioneitaliani2.jpg"
width"340" height"219" border"2"
alt"Italiani partono per l'America" gtltbrgtltp
align"center"gt ltbgtltugtltigtltfont face"Comic Sans
MS" size"6" gt ITALIA DI IMMIGRATIlt/fontgtlt/igtlt/u
gtlt/bgtlt/pgtlt/centergt lt/bodygt lt/htmlgt
13
HTML Es.7
lthtmlgt ltheadgt lttitlegt Quarto esempiolt/titlegt ltME
TA NAME"description" CONTENT"L'Italia come
terra di emigranti e di immigrati"gt ltMETA
NAME"keywords" CONTENT"Italia, emigranti,
immigrati,immigrazione, clandestini"gt lt/headgt ltbod
y bgcolor"red" topmargin"10" bottommargin"10"
leftmargin"5" rightmargin"5" link"purple"
vlink"fuchsia" text"white"gt ltEMBED
src"troto.mid" WIDTH"145" HEIGHT"35"
AUTOSTART"true" LOOP"true"gt ltp align"center"gt
ltbgtltugtltigtltfont face"Comic Sans MS"
color"008000" size"6" gt ITALIA TERRA DI
EMIGRANTI lt/fontgtlt/igtlt/ugtlt/bgtlt/pgt ltcentergt ltimg
src"immagini/immigrazioneitaliani2.jpg"
width"340" height"219" border"2" alt"Italiani
partono per l'America" gtltbrgtltp align"center"gt
ltbgtltugtltigtltfont face"Comic Sans MS" size"6"
gt ITALIA DI IMMIGRATIlt/fontgtlt/igtlt/ugtlt/bgtlt/pgt lt/cen
tergt lt/bodygt
14
HTML Es.8
lthtmlgt ltheadgt lttitlegt Quarto esempiolt/titlegt ltME
TA NAME"description" CONTENT"L'Italia come
terra di emigranti e di immigrati"gt ltMETA
NAME"keywords" CONTENT"Italia, emigranti,
immigrati,immigrazione, clandestini"gt ltbgsound
src"troto.mid" loop"-1"gt lt/headgt ltbody
bgcolor"red" topmargin"10" bottommargin"10"
leftmargin"5" rightmargin"5" link"purple"
vlink"fuchsia" text"white"gt ltp align"center"gt
ltbgtltugtltigtltfont face"Comic Sans MS"
color"008000" size"6" gt ITALIA TERRA DI
EMIGRANTI lt/fontgtlt/igtlt/ugtlt/bgtlt/pgt ltcentergt ltimg
src"immagini/immigrazioneitaliani2.jpg"
width"340" height"219" border"2" alt"Italiani
partono per l'America" gtltbrgtltp align"center"gt
ltbgtltugtltigtltfont face"Comic Sans MS" size"6"
gt ITALIA DI IMMIGRATIlt/fontgtlt/igtlt/ugtlt/bgtlt/pgt lt/cen
tergt lt/bodygt
15
HTML-Ancore
lthtmlgt ltheadgt lttitlegt Quarto esempiolt/titlegt ltME
TA NAME"description" CONTENT"L'Italia come
terra di emigranti e di immigrati"gt ltMETA
NAME"keywords" CONTENT"Italia, emigranti,
immigrati, immigrazione, clandestini"gt ltbgsound
src"troto.mid" loop"-1"gt lt/headgt ltbody
bgcolor"red" topmargin"10" bottommargin"10"
leftmargin"5" rightmargin"5" link"purple"
vlink"fuchsia" text"white"gt ltp align"center"gt
ltbgtltugtltigtltfont face"Comic Sans MS"
color"008000" size"6" gt ITALIA TERRA DI
EMIGRANTI lt/fontgtlt/igtlt/ugtlt/bgtlt/pgt ltcentergt lta
hrefhttp//www.emigranti.rai.it/"gt ltimg
src"immagini/immigrazioneitaliani2.jpg"
width"340" height"219" border"2"
alt"Italiani partono per l'America" gtltbrgtltp
align"center"gt ltbgtltugtltigtltfont face"Comic Sans
MS" size"6" gtlt/agt ITALIA DI IMMIGRATIlt/fontgtlt/i
gtlt/ugtlt/bgtlt/pgt lt/centergt lt/bodygt lt/htmlgt
16
HTML-Ancore
Fra le virgolette dell'attributo HREF oltre agli
indirizzi URL validi come quello dell'esempio ltA
HREF"http//..."gt, è possibile specificare anche
ltA HREF"ftp//..."gtltA HREF"mailto..."gtltA
HREF"news..."gtltA HREF"nomefile.zip"gtltA
HREF"nomepagina.html"gtChe servono
rispettivamente perltA HREF"ftp//..."gtCollegam
ento ad un sito FTP. ltA HREF"mailto
nome_at_server"gtIndirizzo di  posta elettronica per
la spedizione di una e-mail all'indirizzo
specificato, facendo uso del proprio programma di
posta elettronica. ltA HREF"news..."gtCollegamen
to ad un gruppo di discussione (newsgroup
Usenet). ltA HREF"nomefile.zip"gtScaricamento
(download) di un file in formato compresso. ltA
HREF"nomepagina.html"gtCollegamento ad altra
pagina all'interno della stessa cartella.
17
HTML- Pubblicare
L'accesso al server che ospita la nostra pagina
web avviene di solito con programmi FTP (file
transfer protocol).

• Parametri da fornire al programma
• nome del server ftp
• user ID
• Password

18
HTML-Ancore
lthtmlgt ltheadgt lttitlegt Decimo esempiolt/titlegt ltli
nk relstylesheet href"esempio.css"
type"text/css"gt lt/headgt ltbodygt ltp
align"left"gt Riga a sinistra lt/pgt ltp
align"right"gt Riga a destra lt/pgt ltp
align"center"gt Riga al centro lt/pgt ltpgt Riga
ltbrgt lta href"primo.htm"gtin cui
verifichiamoltbrgtlt/agt la struttura
ltbrgtgiustificata lt/pgt lt/bodygt lt/htmlgt
19
HTML-Foglio di stile
BODY margin-left .5cm margin-right
.5cm color 000099 font-family
Verdana,Arial,Helvetica font-size 14pt
background-image url('nuvole.gif')
ALINK text-decoration none color
009900 AVISITED text-decoration
none color Gray AHOVER Color
ffff00 text-decoration none
TD font-family "MS Sans Serif" font-size
12pt p text-align justify text-indent
12px
20
HTML-Ancore
ltlthtmlgt ltheadgt lttitlegt Undici
esempiolt/titlegt ltlink relstylesheet
href"esempioclassi.css" type"text/css"gt lt/hea
dgt ltbodygt ltp align"left"gt Riga a sinistra lt/pgt
ltp align"right"gt Riga a destra lt/pgt ltp
align"center"gt Riga al centro lt/pgt ltpgt Riga
ltbrgt lta href"primo.htm"gtin cui
verifichiamoltbrgtlt/agtltp class"firma"gt la
struttura ltbrgtlt/pgtgiustificata lt/pgt
lt/bodygt lt/htmlgt
21
HTML-Foglio di stile
BODY margin-left .5cm margin-right
.5cm color 000099 font-family
Verdana,Arial,Helvetica font-size 14pt
background-image url('nuvole.gif')
background-repeat repeat-x
background-position 50 50 ALINK text-
decoration none color 009900
AVISITED text-decoration none color
Gray AHOVER Color
ffff00 text-decoration none
TD font-family "MS Sans Serif" font-size
12pt p text-align justify text-inden
t 12px .firma font-family
Verdana,Arial,Helvetica color ff0000
font-size 10pt text-align
center font-weight lighter font-style
italic
22
Hyper Text Markup Language

• due sono le categorie in cui si suddividono gli
  editor visuali e testuali.
• Quelli visuali sono sicuramente molto più
  semplici da adoperare, assomigliano a dei
  programmi di grafica, è sufficiente trascinare al
  loro interno testi ed immagini per avere
  un'impaginazione più che soddisfacente
• Gli editors testuali richiedono  invece da parte
  di chi li adopera una minima conoscenza di base,
  potrebbero sembrare più dispendiosi in termini di
  impegno, ma alla lunga si rivelano invece un
  autentico investimento. Consentono di fare cose
  che editors visuali non permetterebbero mai e
  danno la possibilità di avere il controllo
  assoluto su ogni parte del codice