Il linguaggio HTML - Nozioni di base

Transcript

Corso IFTS
Informatica, Modulo 3 – Progettazione pagine web statiche
(50 ore)
Il linguaggio HTML - Nozioni di
base (2)
Dott. Chiara Braghin
[email protected]
TAG strutturali visti fino ad ora
 <HTML> - tag principale necessario per identificare il tipo di documento.
Deve essere sempre definito.
 <HEAD> - intestazione, contiene:
 <title>…</title>: titolo da assegnare alla pagina
 <base>: specifica la destinazione per tutti i link della pagina, qualora
questa fosse strutturata in frame
<base target=“nome_del_frame_sul_quale_aprire_i_links”/>
 <link>: richiama fogli di stile esterni
 <style>: definisce degli stili
 <script>: permette l’inserimento di script per “animare” la pagina
proprio
 <meta> - contiene le meta-informazioni relative al documento
 <BODY> - 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
C. Braghin - HTML: nozioni di base
2
1
Attributi di <BODY>
 BGCOLOR=“#rrggbb”
 Attribuisce allo sfondo della pagina uno specifico colore RGB
 TEXT=“#rrggbb”
 Indica il colore di tutto il testo nella pagina
 il colore di default è nero
 BACKGROUND=“immagine.jpg”
 inserisce un'immagine come sfondo della pagina (sono permesse
immagini .gif .jpg o .png), indipendentemente dalle sue dimensioni
 BGPROPERTIES=“fixed”
 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
3
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.
4
2
Attributi di <BODY> - Margini
 TOPMARGIN=“1”, BOTTOMMARGIN=“1”,
LEFTMARGIN=“1”, RIGHTMARGIN=“1”
 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
5
Formattazione del testo (1)
 <P>…</P>
 La lettera p sta per paragrafo. In questo modo si formano dei
paragrafi simili a quelli di questa slide.
 Tra un paragrafo e l’altro 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.
 <BR>
 All’interno dello stesso paragrafo è possibile andare a capo con il
tag <BR>.
 In questo caso lo spazio di interlinea non viene inserito.
 All’interno del codice HTML si possono inserire dei commenti
che non vengono visualizzati dal browser. È sufficiente inserirli
tra i tag .
6
3
 Tutti i browser ignorano gli spazi aggiuntivi, le
tabulazioni e gli a capo del file HTML di origine
 La ripetizione del tag <BR> o del tag <P> non viene
considerata
 Come fare a lasciare più di uno spazio di interlinea?
 Utilizzando il carattere speciale   seguito da
<BR> o da <P>, i due comandi ripetuti tante volte quanti
sono gli spazi di interlinea desiderati
  <BR>
 <BR>
 <BR>
 Esempio6: formattazione1.html
7
 <HR>
 inserisce una linea orizzontale
 i browser più moderni supportano 4 attributi per l'elemento
<HR>
 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
8
4
 ALIGN = "left" | "center" | "right" | "justify"
 il testo all’interno di un paragrafo <P>…</P> può
essere allineato in diversi modi, a seconda di come
specificato dall’attributo ALIGN
 <p align="left">Questa è una riga allineata a
sinistra</p>
 <p align="right">Questa è una riga allineata a destra</p>
 <p align="center">Questa è una riga allineata
centrale</p>
 <p align="justify">Questa è la mia prima pagina
giustificata</p>
9
 <BLOCKQUOTE>
 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
 <CENTER>
 tutto ciò che si trova fra gli elementi <center>
</center> sarà centrato nella finestra del browser
10
5
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.
 <B>
 bold, grassetto
 <U>
 underline, sottolineato
 <I>
 italico, inclinato, corsivo
 <TT>
 font a spaziatura fissa tipo macchina da scrivere
 <SUB> e <SUP>
 Pedice e apice
 <STRIKE>
 testo barrato
 Esempio10: font1.html
11
 <STRONG>
 strong emphasis (enfasi forte - di solito in grassetto)
 <EM>
 emphasis (enfasi - di solito in corsivo)
 <VAR>
 una variabile
 <CITE>
 una citazione (di solito in corsivo)
 <KBD>
 testo definito come input da tastiera: ad esempio, in un
istruzione manuale sarebbe il testo scritto dall'utente
 <CODE>
 codice linguaggio (di solito una font a spaziatura fissa)
12
6
 <SAMP>
 sequenza di caratteri letterali
 <DFN>
 la definizione di un termine (di solito in grassetto o grassetto
corsivo)
 <PRE>
 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
13
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
 <FONT>
 il tag font cambia il font utilizzato dal testo racchiuso nei tag
COLOR, FACE, SIZE,
rispettivamente per colore, tipo di carattere e dimensioni dello stesso:
<FONT COLOR=“#FFFFFF">
<FONT FACE=”Arial">
<fONT SIZE="3">
 sono necessari gli attributi
 FACE può non essere rispettato se il browser non dispone di quel
particolare carattere
14
7
Stilizzazione del testo (4) -Intestazioni
 Sono previsti 6 tipi di intestazioni (heading) identificati dal
nome dell'elemento heading <H2> .. <H6> 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 <Hn> 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
15
Altri Comandi (1)
 <DIV>
 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 <DIV>
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
16
8
Altri comandi (2)
 <ADDRESS>
 per la parte che fa da "firma" del documento contenente il
nome e/o indirizzo dell’autore della pagina
 <SPAN>
 l'elemento <SPAN> non ha alcuna caratteristica se non quella di
fare da supporto per gli stili, come <DIV> si presta bene come
contenitore per l'associazione di tutto quello che serve ad html
dinamico.
<SPAN style="color:green">
Questa riga di testo è colorata di verde.
</SPAN>
17
Caratteri speciali
 Dato che le parentesi <angolate> 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
 
ò
&ograve:
à
à
ù
ù
è
è
ì
ì
“
"
&
&
<
<
>
>
€
€
18
9
Prologo
 <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0
Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
 Questa prima riga è chiamata prologo, e si trova prima del tag
di apertura <HTML>
 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/
19
Esercizi (1)
 1) Scrivere un file HTML con gli elementi di base:
 Titolo (a piacere) in <HEAD>
 Un paragrafo di testo
 Linee di separazione di diverse dimensioni
20
10
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)
21
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
Città
Titoli di studio:
2000 – Maturità classica
2003- HTML:
– Laurea
Informatica
C. Braghin
nozioni di in
base
22
11
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 <P>
 2. Creare un paragrafo allineato al centro usando il tag
<DIV>
 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
23
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
24
12

Il linguaggio HTML - Nozioni di base

Transcript

Documenti analoghi

AGENTE DI AFFARI IN MEDIAZIONE (AGENTE IMMOBILIARE)

Il Corso di Lingua Olandese - Servizio Linguistico Selda

Corso operativo base di informatica per avvocati e collaboratori di

Sei proprio il mio Typo: La vita segreta delle font

Indice PARTE I Istologia, anatomia, fisiologia, patologia e igiene

locandina Abilitanti Agente immobiliare

Indovinello: L`alimento più prezionso

CV Emanuele Campana - Camera di Commercio di Rimini