HTML

Transcript HTML

Rita Mocci 4° C
HTML
the Hypertext Markup Language
Concetti base
 HTML
(HyperText
Markup
Language):
linguaggio che utilizza dei contrassegni (tag)
per la formazione degli ipertesti
 Ipertesto: insieme di documenti consultabile
in modo non sequenziale (utilizzando i link),
nel quali si possono inserire elementi testuali,
immagini, suoni, filmati
 Internet:
sistema
globale
comunicazione. Rete fisica di
connessi in tutto il mondo
per
la
computer,
 Browser: programma software in grado di
interpretare i codici HTML.
HyperText Markup Language
 L’
HTML è un linguaggio di descrizione o
di formattazione
 Non è un linguaggio di programmazione,
cioè non c’è algoritmo
 E’ interpretato, cioè non segnala l’errore
 Non è un linguaggio case-sensitive, cioè
non tiene conto delle minuscole e delle
maiuscole.
HyperText Markup Language
 L’HTML non è un linguaggio di programmazione
(sono linguaggi di programmazione il C, il C++, il Pascal,
il Java, e sono linguaggi di scripting il PHP, l'ASP, il
PERL, il JavaScript)
 Si tratta invece di un linguaggio di contrassegno (o ‘di
marcatura'), che permette di indicare come disporre gli
elementi all'interno di una pagina: le indicazioni vengono
date attraverso degli appositi marcatori, detti "tag“
 Ciò significa che l'HTML non ha meccanismi che
consentono di prendere delle decisioni.
Documento HTML
Un documento html è un file di testo con
delle indicazioni sul colore delle scritte,
sulla posizione delle immagini all'interno
della pagina, su come far scorrere il
testo, e altre cose di questo genere.
Il Browser
È il programma che usate quando navigate nel
Web e svolge principalmente due compiti:
1.
scarica i vari files che si trovano su un
computer remoto (il server) e che fanno
riferimento a un certo indirizzo
2.
legge i documenti scritti in html, e a seconda
delle indicazioni ivi contenute, visualizza la
pagina in un modo, piuttosto che in un altro;
inoltre i vari files associati a quel documento
(ad esempio le immagini, o i filmati) vengono
disposti secondo le indicazioni del codice html.
Il Browser
Oltre ad Internet Explorer, il browser più
diffuso, esistono altri browser
Netscape Navigator, Mozilla, Opera ecc.
W3C: Word Wide Web Consortium
 L'organizzazione
che si occupa di
standardizzare la sintassi del linguaggio
HTML è il W3C: Word Wide Web
Consortium
I marcatori (TAG) e gli attrubuti

All'interno di ogni pagina è presente una serie
di marcatori (TAG), da cui dipende la
visualizzazione e che hanno differenti nomi a
seconda della loro funzione

I tag vanno inseriti tra parentesi uncinate
(<TAG>), la chiusura del tag viene indicata con
una "/" quindi: </TAG>

Un attributo è una proprietà associata al tag.
Permette di specificare una funzione aggiuntiva
rispetto a quella di base del tag. All’attributo
deve essere assegnato un valore.
I marcatori (TAG)

Il contenuto va inserito tra l'apertura e la
chiusura del tag medesimo, secondo questa
forma:
<TAG attributi>contenuto</TAG>
<P align="right">testo</P>
dall'esempio è evidente che la struttura di un attributo è:
attributo="valore"
<TAG attributo1="valore1" attributo2="valore2">
contenuto </TAG>
I marcatori (TAG)
 I TAG che vanno chiusi (la maggior parte!)
sono detti TAG DOPPI
 I TAG che non vanno chiusi sono detti TAG
SEMPLICI. I tag che non hanno contenuto
e non hanno chiusura avranno la seguente
forma :
<TAG attributi>
<IMG widht="20" height="20" SRC=“fiore.gif"
ALT=“Questa immagine rappresenta un
fiore">
I commenti
I commenti sono indicazioni significative per il
webmaster, ma invisibili al browser.

Ogni commento dovrà trovarsi su una riga a
sé stante e non è consigliabile includere in un
commento altri tag HTML.
Centriamo le nostre scritte
Per centrare un testo si usa il TAG <CENTER>
che va aperto prima della frase da centrare e
chiuso alla fine della stessa
<HTML>
<HEAD>
<TITLE>pagina di prova</TITLE></HEAD>
<BODY>
<CENTER><H1>ciao a tutti</H1></CENTER>
<H2>ciao a tutti</H2>
…..
</BODY></HTML>
Spazi nel testo
Il testo tra i tags si scrive come deve apparire, ma
con queste differenze:
 Se si mette più di uno spazio tra una parola e
l'altra, ne appare uno solo nella pagina web
 Se si va a capo, e' come se si mettesse uno
spazio
 Alcuni caratteri speciali (le lettere accentate ad
esempio) non possono essere inserite
normalmente
Struttura di una pagina HTML
Un documento HTML è normalmente diviso in due
sezioni:

L'intestazione (racchiusa dal tag HEAD) (<HEAD>)
che contiene una serie di informazioni generali
sull'ipertesto

Il corpo racchiuso tra i tag BODY (<BODY>) contiene
la pagina vera e propria così come dovrà essere
visualizzata. All'interno di questo elemento verrà posto
il testo della pagina, i collegamenti ad altre pagine, ad
immagini o ad altri oggetti utili per realizzare
l'ipertesto.
Struttura di una pagina HTML
L'intero documento HTML ha quindi sempre
questa struttura:
<HTML>
<HEAD>
<TITLE>Questo è il titolo della pagina</TITLE>
</HEAD>
<BODY>
Questo è il testo della pagina
</BODY>
</HTML>
Struttura di una pagina HTML
All'interno dell'intestazione abbiamo sempre il tag
TITLE, che permette di specificare il titolo della pagina
(apparirà come titolo della finestra di Internet Explorer).
All'interno del tag BODY si possono usare i seguenti
attributi:


bgcolor=“colore”
(usato per specificare il colore della pagina)
text=colore (usato per specificare il colore del testo) .
Il colore può essere specificato con il nome inglese:
orange, red, green, cyan, yellow, white, gray,black, ...
Ad es., sfondo blu con testo bianco:
<BODY BGCOLOR=“blue” TEXT=white>
Formattare il testo
Questi sono gli stili fondamentali che si possono applicare
ad un testo qualsiasi:



<B>testo</B> (stile grassetto, bold in inglese)
<I>testo</I> (stile corsivo, italic in inglese)
<U>testo</U> (stile sottolineato, underlined in inglese).
Si possono naturalmente combinare i vari stili, ad esempio:
<B><I>testo visualizzato in grassetto corsivo</I></B>
Formattare il testo
Per modificare le proprietà del carattere in uso si usa il
tag <FONT>:
 <FONT> size=”dimensione”>testo</FONT>
(cambia la dimensione del carattere; il valore della
dimensione va da un minimo di 1 ad un massimo di 7)
 <FONT color="colore">testo</FONT>
(cambia il tipo del carattere; il valore del colore è il
nome in inglese del colore: black, silver, gray, white..)
 <FONT face="tipo">testo</FONT>
(cambia il tipo di carattere; il valore del tipo è il nome
del font scelto: Arial, Courier, Times New Roman,
Comic).
Naturalmente si possono combinare in un'unica
istruzione più attributi, ad esempio:
<FONT face="Arial" size="7">carattere Arial con
grandezza massima</FONT>.
Formattazione dei paragrafi
Si intende per paragrafo tutto quanto viene racchiuso
nel tag <P>:
<P>Frase qualsiasi. Altra Frase. Tutto in un unico
paragrafo.</P>
È possibile stabilire il tipo di allineamento del
paragrafo usando il parametro align:
 <P align=“left”> testo </P>
(allinea il paragrafo
a sinistra)
 <P align=“right”> testo </P>
(allinea il paragrafo
a destra)
 <P align=“center”> testo </P
(centra il testo del
paragrafo)
 <P align=“justify”> testo </P> (giustifica il testo del
paragrafo).
Formattazione dei paragrafi
In un paragrafo per dividere il testo con una linea si usa il
tag <HR>.
Il paragrafo va a capo automaticamente, a seconda della
dimensione della finestra. Se si vuole forzare
un'andata a capo, si può usare il tag <BR> (non esiste
il corrispondente </BR>.
Ad esempio, il testo seguente andrà a capo dopo ogni
parola del paragrafo:
<P>Vado<BR>a<BR>capo</P>
Si noti che se si inserisce più di un carattere di spazio
consecutivo, questi spazi aggiuntivi saranno ignorati.
Ad es., il parametro seguente sarà visualizzato come se
fosse scritto "questo e quello":
<p>questo
e
quello</p>
La nostra prima pagina HTML

Per prima cosa inseriamo una riga che indica
che stiamo utilizzando le specifiche del Word
Wide Web Consortium che riguardano il
codice HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01 Transitional//IT">
La nostra prima pagina HTML
 Poi
apriamo il nostro primo tag, che
indica che quanto è compreso tra
apertura e chiusura è in codice HTML
<html>
…
</html>
La nostra prima pagina HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//IT">
<HTML>
<HEAD>
<TITLE>Pagina HTML</TITLE>
</HEAD>
<BODY>

Scriveremo qui il nostro contenuto
</BODY>
</HTML>
Gli elementi HTML

Elementi di blocco
Sono sostanzialmente gli elementi che
costituiscono un blocco attorno a sé, e che di
conseguenza vanno a capo, come i paragrafi, le
tabelle, le form.

Elementi “inline”
Sono gli elementi che – non andando a capo possono essere integrati nel testo, come i
collegamenti o le immagini

Liste
Titoli, paragrafi, blocchi di testo e
contenitori
Nome tag <hx>
Descrizione
<H1>titolo 1</H1>
<H2>titolo 2</H2>
<H3>titolo 3</H3>
<H4>titolo 4</H4>
<H5>titolo 5</H5>
<H6>titolo 6 </H6>
"H" sta per "heading", cioè
titolo: le grandezze previste
sono sei. Dall’<h1>, che è il
più importante, si va via via
degradando fino all’ <h6>.
Il tag <hx> (sia esso h1 o h6)
risulta formattato in grassetto e
lascia una riga vuota prima e
dopo di sé. Si tratta dunque di
un elemento di blocco.
Titoli, paragrafi, blocchi di testo e
contenitori
Nome tag
Descrizione
<P>paragrafo</P>
Il paragrafo è l’unità
di base entro cui
suddividere un testo.
Il tag <P> lascia una
riga vuota prima della
sua apertura e dopo
la sua chiusura.
Titoli, paragrafi, blocchi di testo e
contenitori
Nome tag
<DIV>
Blocco di
</DIV>
Descrizione
E’ un gruppo di paragrafi. Il
testo blocco di testo va a capo e,
a differenza del paragrafo,
non lascia spazi prima e
dopo la sua apertura.
Titoli, paragrafi, blocchi di testo e
contenitori
Nome tag
Descrizione
<SPAN>
contenitore
</SPAN>
Lo span è un contenitore
generico che può essere
annidato (ad esempio)
all’interno dei DIV.
Si tratta di un elemento
inline, che cioè non va a capo
e continua sulla stessa linea
del tag che lo include.
Avrete modo di utilizzare lo
<SPAN> soprattutto quando
incomincerete ad usare i fogli
di stile.
Titoli, paragrafi, blocchi di testo e
contenitori
Allineamento
Sintassi
Visualizzazione
Testo
allineato a
sinistra
Testo
allineato a
destra
Testo
giustificato
<P align="left">testo</p>
Nel mezzo del cammin di
nostra vita mi ritrovai per
una selva oscura ché la
diritta via era smarrita
<P align="right">testo</p>
Nel mezzo del cammin di
nostra vita mi ritrovai per
una selva oscura ché la
diritta via era smarrita
<P align="justify">testo</p> Nel mezzo del cammin di
nostra vita mi
ritrovai
per una selva oscura
ché la diritta via era
smarrita
Gli elenchi nell'HTML
 Elenchi
ordinati
 Elenchi non ordinati
 Elenchi di definizioni
Gli elenchi nell'HTML

Elenchi ordinati
<OL type="1">
<li>primo
<li>secondo
<li>terzo
</OL>
 Type : 1, a, A, i, I
 li: voce o elemento della lista
Gli elenchi nell'HTML

Elenchi non ordinati
<UL type="circle">
<li>primo
<li>secondo
<li>terzo
</UL>
 Type : disc, circle, square
Gli elenchi nell'HTML
Elenchi di definizioni
<DL> definition list: lista delle definizioni
<DT> definition term: indica il termine da definire
<DD> definition description: è la definizione vera
e propria del termine. L’elemento è rientrato
……
<DL>
<DT>trapezi </DT>
<DD> quadrilateri con i due lati paralleli</DD>
<DT>parallelogrammi</DT>
………
</DL>
Rita Mocci 4°C