Il linguaggio HTML - Nozioni di base (2)

1
Il linguaggio HTML - Nozioni di base (2)
Corso IFTSInformatica, Modulo 3 Progettazione
pagine web statiche (50 ore)

• Dott. Chiara Braghin braghin_at_dti.unimi.it

2
TAG strutturali visti fino ad ora

• ltHTMLgt - tag principale necessario per
  identificare il tipo di documento. Deve essere
  sempre definito.
• ltHEADgt - intestazione, contiene
• lttitlegtlt/titlegt titolo da assegnare alla pagina
• ltbasegt specifica la destinazione per tutti i
  link della pagina, qualora questa fosse
  strutturata in frame
• ltbase targetnome_del_frame_sul_quale_aprire_i_li
  nks/gt
• ltlinkgt richiama fogli di stile esterni
• ltstylegt definisce degli stili
• ltscriptgt permette linserimento di script per
  animare la pagina proprio
• ltmetagt - contiene le meta-informazioni relative
  al documento
• ltBODYgt - corpo, la parte principale del documento
  contenente tutto il contenuto, comprese immagini,
  link ad altre pagine HTML e tag che modificano il
  layout di testo ed immagini

3
Attributi di ltBODYgt

• BGCOLORrrggbb
• Attribuisce allo sfondo della pagina uno
  specifico colore RGB
• TEXTrrggbb
• Indica il colore di tutto il testo nella pagina
• il colore di default è nero
• BACKGROUNDimmagine.jpg
• inserisce un'immagine come sfondo della pagina
  (sono permesse immagini .gif .jpg o .png),
  indipendentemente dalle sue dimensioni
• BGPROPERTIESfixed
• l'immagine adoperata a riempimento può essere
  tenuta ferma durante lo spostamento verticale
  (scrolling) sulla pagina (solo con Internet
  Explorer, o con CSS)
• Esempio4 body3_bg_text.html

4
Modello di colori RGB

• RGB è il nome di un modello di colori le cui
  specifiche sono state descritte nel 1931 dalla
  CIE (Commission Internationale dell'Enclairage).
• Il modello è di tipo additivo e si basa sui tre
  colori Rosso (Red), Verde (Green) e Blu (Blue), -
  da cui il nome RGB-
• da non confondere con i tre colori primari
  Rosso, Blu e Giallo.
• Questo modello viene usato nel digitale per
  trasmettere immagini a colori.
• Un'immagine può infatti essere scomposta,
  attraverso filtri o altre tecniche, in questi
  colori base che, miscelati tra loro, danno quasi
  tutto lo spettro dei colori visibili, con
  l'eccezione delle porpore.
• I 3 colori principali corrispondo a forme d'onda
  (radiazioni luminose) di periodo fissato. A una
  lunghezza d'onda di 700 nm corrisponde il rosso,
  a 546.1 nm il verde, a 435.8 nm il blu.
• Additivo unendo i tre colori con la loro
  intensità massima si ottiene il bianco (tutta la
  luce viene riflessa). La combinazione delle
  coppie di colori dà il cìano, il magenta e il
  giallo.

5
Attributi di ltBODYgt - Margini

• TOPMARGIN1, BOTTOMMARGIN1, LEFTMARGIN1,
  RIGHTMARGIN1
• sono i quattro attributi per definire la distanza
  in pixel rispettivamente dal
• margine superiore
• margine inferiore
• margine sinistro
• margine destro
• Un margine uguale a zero farà si che il testo
  inizi praticamente sul bordo della finestra del
  browser
• Esempio5 body4_bg_margin.html

6
Formattazione del testo (1)

• ltPgtlt/Pgt
• La lettera p sta per paragrafo. In questo modo si
  formano dei paragrafi simili a quelli di questa
  slide.
• Tra un paragrafo e laltro il browser inserisce
  uno spazio di interlinea.
• Il tag di chiusura è opzionale, dato che un
  paragrafo viene automaticamente chiuso quando ne
  inizia un altro, oppure quando inizia un heading,
  una tabella, un'elenco, un form.
• ltBRgt
• Allinterno dello stesso paragrafo è possibile
  andare a capo con il tag ltBRgt.
• In questo caso lo spazio di interlinea non viene
  inserito.
• Allinterno del codice HTML si possono inserire
  dei commenti che non vengono visualizzati dal
  browser. È sufficiente inserirli tra i tag lt!--
  e --gt.

7
Formattazione del testo (2)

• Tutti i browser ignorano gli spazi aggiuntivi, le
  tabulazioni e gli a capo del file HTML di origine
• La ripetizione del tag ltBRgt o del tag ltPgt non
  viene considerata
• Come fare a lasciare più di uno spazio di
  interlinea?
• Utilizzando il carattere speciale nbsp seguito
  da ltBRgt o da ltPgt, i due comandi ripetuti tante
  volte quanti sono gli spazi di interlinea
  desiderati
• nbspltBRgt
• nbspltBRgt
• nbspltBRgt
• Esempio6 formattazione1.html

8
Formattazione del testo (3)

• ltHRgt
• inserisce una linea orizzontale
• i browser più moderni supportano 4 attributi per
  l'elemento ltHRgt
• SIZE"n"
• specifica l'altezza della linea in pixel (n è un
  intero)
• WIDTH"n", o WIDTH"n"
• specifica la larghezza della linea, in pixel o in
  percentuale della larghezza dello schermo (n è un
  intero)
• ALIGN"left", "right", "center"
• specifica l'allineamento della linea all'interno
  della pagina
• il valore di default è center
• NOSHADE
• disegna la linea come una barra solida di colore
  -- di default la linea è una barra ombreggiata
• Esempio7 formattazione2.html

9
Formattazione del testo (3)

• ALIGN "left" "center" "right" "justify"
• il testo allinterno di un paragrafo ltPgtlt/Pgt può
  essere allineato in diversi modi, a seconda di
  come specificato dallattributo ALIGN
• ltp align"left"gtQuesta è una riga allineata a
  sinistralt/pgt
• ltp align"right"gtQuesta è una riga allineata a
  destralt/pgt
• ltp align"center"gtQuesta è una riga allineata
  centralelt/pgt
• ltp align"justify"gtQuesta è la mia prima pagina
  giustificatalt/pgt
• Esempio8 formattazione3.html

10
Formattazione del testo (4)

• ltBLOCKQUOTEgt
• definisce un blocco di testo come citazione
• il browser lo visualizzerà in modo appropriato,
  ad esempio spostando a destra il rientro del
  testo, o facendolo vedere in corsivo
• causa anche un line break, cioè obbliga il
  browser a inserire una linea vuota prima e dopo
  di esso
• può contenere paragrafi e la maggior parte delle
  istruzioni piu' comuni
• ltCENTERgt
• tutto ciò che si trova fra gli elementi ltcentergt
  lt/centergt sarà centrato nella finestra del
  browser
• Esempio9 formattazione4.html

11
Stilizzazione del testo (1)

• Per rendere una pagina più leggibile si fa spesso
  ricorso ad una specie di cosmesi del testo, come
  la sottolineatura, i caratteri in corsivo, il
  ridimesionamento, ecc.
• ltBgt
• bold, grassetto
• ltUgt
• underline, sottolineato
• ltIgt
• italico, inclinato, corsivo
• ltTTgt
• font a spaziatura fissa tipo macchina da scrivere
• ltSUBgt e ltSUPgt
• Pedice e apice
• ltSTRIKEgt
• testo barrato
• Esempio10 font1.html

12
Stilizzazione del testo (2)

• ltSTRONGgt
• strong emphasis (enfasi forte - di solito in
  grassetto)
• ltEMgt
• emphasis (enfasi - di solito in corsivo)
• ltVARgt
• una variabile
• ltCITEgt
• una citazione (di solito in corsivo)
• ltKBDgt
• testo definito come input da tastiera ad
  esempio, in un istruzione manuale sarebbe il
  testo scritto dall'utente
• ltCODEgt
• codice linguaggio (di solito una font a
  spaziatura fissa)

13
Stilizzazione del testo (3)

• ltSAMPgt
• sequenza di caratteri letterali
• ltDFNgt
• la definizione di un termine (di solito in
  grassetto o grassetto corsivo)
• ltPREgt
• usato per racchiudere il testo che deve essere
  visualizzato con un font a spaziatura fissa (come
  la macchina da scrivere)
• viene usato di solito per distinguere parti di
  testo che hanno il significato di codice computer
• può avere un attributo, WIDTH
• specifica il massimo numero di caratteri che
  possono essere visualizzati in una singola linea
• il valore di default e' 80 caratteri, ma dipende
  dal browser
• Inoltre potete inserire elementi di enfasi del
  testo (EM, STRONG, B, I, etc.) e anche link
  ipertestuali all'interno dell'elemento PRE
• Esempio11 font2.html

14
Stilizzazione del Testo (3) - I Font

• Ogni browser ha un set di caratteri di default,
  colore e dimensione
• Con i browser dell'ultima generazione è possibile
  cambiare il tipo di font
• ltFONTgt
• il tag font cambia il font utilizzato dal testo
  racchiuso nei tag
• sono necessari gli attributi COLOR, FACE, SIZE,
  rispettivamente per colore, tipo di carattere e
  dimensioni dello stesso
• ltFONT COLORFFFFFF"gt
• ltFONT FACEArial"gt
• ltfONT SIZE"3"gt
• FACE può non essere rispettato se il browser non
  dispone di quel particolare carattere
• Esempio12 font3.html

15
Stilizzazione del testo (4) -Intestazioni

• Sono previsti 6 tipi di intestazioni (heading)
  identificati dal nome dell'elemento heading ltH2gt
  .. ltH6gt che possono essere usati come titoli
  delle diverse porzioni del testo
• Per ottenerle basta scrivere i comandi di inizio
  e di fine ai relativi titoli
• L'elemento ltHngt permette di usare l'attributo
  ALIGN per specificare il tipo di allineamento
  visuale dell'intestazione
• i valori possibili sono ALIGN"left" (valore di
  default) per allineare a sinistra l'intestazione
• ALIGN"center" per centrare l'intestazione
• ALIGN"right" per allineare a destra
  l'intestazione.
• Quasi tutti i browser riconoscono l'allineamento
  a sinistra e centrato, mentre solo quelli piu'
  moderni riconoscono quello a destra.
• Esempio13 intestazioni.html

16
Altri Comandi (1)

• ltDIVgt
• permette di unire in un blocco altri elementi di
  tipo blocco di testo, e associarli tra loro
• tutti gli attributi e le associazioni applicate
  al tag ltDIVgt saranno estese a tutto il blocco di
  codice interessato
• puo assumere l'attributo ALIGN, e tutti i
  blocchi prenderanno le caratteristiche di
  allineamento specificate serve come contenitore
  per l'associazione con fogli di style e crea un
  nuovo blocco
• Esempio14 formattazione5.html

17
Altri comandi (2)

• ltADDRESSgt
• per la parte che fa da "firma" del documento
  contenente il nome e/o indirizzo dellautore
  della pagina
• ltSPANgt
• l'elemento ltSPANgt non ha alcuna caratteristica se
  non quella di fare da supporto per gli stili,
  come ltDIVgt si presta bene come contenitore per
  l'associazione di tutto quello che serve ad html
  dinamico.
• ltSPAN style"colorgreen"gtQuesta riga di testo è
  colorata di verde.
• lt/SPANgt

18
Caratteri speciali

• Dato che le parentesi ltangolategt servono a
  distinguere i tag html dalle parole del testo,
  come faccio ad inserire una di queste nel testo
  della mia pagina?
• Lo stesso problema si pone con tutta una serie di
  caratteri speciali come lo spazio o le vocali
  accentate, che vengono indicate con dei codici.
• Esempio15 caratteriSpeciali.html

spazio nbsp ò ograve
à agrave ù ugrave
è egrave ì igrave
quot amp
lt lt gt gt
euro euro euro
19
Prologo

• lt!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0
  Transitional//EN http//www.w3.org/TR/html4/loos
  e.dtdgt
• Questa prima riga è chiamata prologo, e si trova
  prima del tag di apertura ltHTMLgt
• Solitamente viene generata in modo automatico
  dall'editor HTML specifico, non è obbligatoria ed
  ha il solo compito di informare il browser che si
  tratta di un documento html relativo alle
  specifiche (in questo caso) 4.0.
• È necessaria quando si vuole validare la pagina
  web tramite un validatore, ad esempio
  http//validator.w3.org/

20
Esercizi (1)

• 1) Scrivere un file HTML con gli elementi di
  base
• Titolo (a piacere) in ltHEADgt
• Un paragrafo di testo
• Linee di separazione di diverse dimensioni

21
Esercizi (2)

• 2) Creare una cartella in temp con il nome del
  vostro sito
• creare nella cartella un documento HTML chiamato
  a piacere con i seguenti elementi
• 1. sfondo arancio (trovare il codice esadecimale
  corrispondente)
• 2. colore di base per il testo blu (utilizzare
  il nome del colore)
• 3. dimensione di base del testo 3
• 4. titolo
• 5. titolo H1 nel corpo del testo. Una ed una sola
  parola del titolo deve essere rossa e corsivo
• 6. un paragrafo con il font di dimensione
  invariata
• 7. un paragrafo con il font di dimensione
  maggiore
• 8. un paragrafo con il font di dimensione minore
  di colore verde scuro (trovare il codice
  esadecimale corrispondente)

22
Esercizi (3)

• 3) Creare un documento HTML chiamato
  miocognome.html all'interno della vostra
  cartella. In tale file creare una pagina web con
  il proprio cv simile a quanto segue

Luigi Rossi Nato il A Indirizzo Via Numero CAP C
ittà Titoli di studio 2000 Maturità
classica 2003 Laurea in Informatica
23
Esercizi (4)

• 4) Creare un documento HTML chiamato index2.html
  all'interno della vostra cartella
• 1. Creare un paragrafo allineato a sinistra
  usando il tag ltPgt
• 2. Creare un paragrafo allineato al centro usando
  il tag ltDIVgt
• 3. Creare un paragrafo allineato a destra che
  contenga almeno 5 righe di testo, con ciascua
  riga scritta con un font ed un colore diverso

24
Bibliografia

• Specifiche W3C (World Wide Web Consortium)
• http//www.w3.org/MarkUp/
• Tutorial in Italiano
• http//www.html.it/guida/ (di base)
• Validatore
• http//validator.w3.org/
• Manuale HTML e CSS
• AA. VV. HTML 4.01. Apogeo 2001