HTML?
HyperTest Markup Language
Linguaggio di specifica che usa i
marcatori:
<nomeMarcatore>
Testo
</nomeMarcatore>
E che permette di visualizzare Ipertesti.
TAG
Definizione
Si definisce TAG generalmente una parola
(elemento) racchiusa tra parentesi angolate <>
es. <caramella>, <html>, <body> ….
In HTML il testo racchiuso da <> è già definito (lo vedremo
man mano), mentre in altri linguaggi di Markup il testo può
essere definito dall’utente (XML).
Attributi
Definizione
Viene definito Attributo il testo, diverso da
quello dell’elemento del tag, compreso nei
tag di apertura
es. <body bgcolor =“1234”> ….
Nell’esempio bgcolor è l’attributo e “1234” è il valore
dell’attributo, in generale il valore dell’attributo viene
sempre messo tra virgolette (“”).
TAG (apertura e chiusura)
In HTML tutto ciò che deve essere visualizzato
deve essere racchiuso tra il TAG di apertura e il
TAG di chiusura
TAG di apertura
<html>
TAG di chiusura
</html>
<tr>
<body>
</tr>
</body>
<HTML>
Tutti gli elementi e il contenuto di un
documento HTML sono compresi tra
<html> e </html>
Dopo <html> si procede con i due tag che
dividono il documento in due parti
fondamentali:
L’intestazione
(<head>)
Il corpo (<body>)
Tag di struttura
Un semplice documento HTML
======= <HTML>
======= <HEAD>
======= </HEAD>
======= <BODY>
======= </BODY>
======= <HTML>
Not case sensitive
<html>
<head>
</head>
<body>
</body>
</html>
Intestazione
<head>
<title>
Prima Pagina
</title>
<META name =“author” content =“Franca Debole”>
<META name =“GENERATOR” content =“WordPad”>
<META name =“keywords” content =“html, prima pagina”>
</head>
<title>
contiene il titolo della pagina visualizzato nella
cornice della finestra del browser
<META>
contiene informazioni di gestione non
visualizzate
Attributi: name, content.
Nota: usato da
alcuni motori di
ricerca
Corpo
<body>
Altri TAG
Altro testo …..
Tutto il contenuto del documento HTML
</body>
Attributi
BGCOLOR
Definisce il colore dello sfondo
BACKGROUND
Definisce l’immagine da usare come sfondo
TEXT
Definisce il colore del testo
LINK
Definisce il colore del testo dei link
VLINK
Definisce il colore del testo dei link già visitati
ALINK
Definisce il colore del testo dei link attivi
STYLE
Definisce lo stile del documento tramite appositi file
…………
COLORI
I colori sono espressi in Esadecimale(0..F):
#FFFFFF
#000000
la forma #xxyyzz:
xx = red yy = green zz = blue
oppure
I colori sono espressi con il loro nome:
Yellow
Thistle
Tabella colori
Immagini
Le immagini consentite nel linguaggio
HTML sono:
.gif
.jpg
.png
In genere si adoperano le .gif quando servono
immagini animate o con trasparenze, ma il .jpg
risulta il più veloce da caricare e quindi il +
conveniente da usare.
Dimensione (small , big)
Normale
normale
Small:
<small>piccolo</small>
Big:
<big>grande</big>
Nota:
1) tag di chiusura
2) tag senza attributi
Dimensione (small , big)
<FONT>
Permette di modificare alcune caratteristiche del
testo in qualsiasi momento
Attributi
1) size
Permette di scegliere la dimensione del testo
2) face
Permette di scegliere il tipo del testo
3) color Permette di scegliere il colore del testo
Attributi <FONT> (1)
Size può assumere valori
compresi tra
1e7
<font size="1"> size1 </font>
<font size="2"> size2 </font>
<font size="3"> size3 </font>
<font size="4"> size4 </font>
<font size="5"> size5 </font>
<font size="6"> size6 </font>
<font size="7"> size7 </font>
Attributi <FONT> (2)
Assume valori standard degli
editor di testi
<font face="Verdana">
testo
</font>
<font face="Book Antiqua">
testo
</font>
<font face="Times New Roman">
testo
</font>
Attributi <FONT> (3)
Colora il testo usando la
specifica che abbiamo già
visto per bgcolor
<font color =“#bbbb00">
testo
</font>
<font color =“#6699cc">
testo
</font>
<font color =“#ff6633">
testo
</font>
Formattazione Testo
Gli spazi
Il newline (ritorno carrello)
I titoli
I paragrafi
Spazi
Gli spazi in HTML vengono considerati
diversamente da come siamo abituati
Se scrivo <body>Spazio1 Spazio2</body>
o
<body>Spazio1 Spazio2</body>
Il browser dopo la parola Spazio1 in entrambi
i casi aggiungerà solamente uno spazio.
Come aggiungere spazi?
Grazie ad un carattere speciale:
Senza
Con
In entrambi i casi ho usato sei spazi
Caratteri Speciali
Oltre a usato per lo spazio ci sono
altri metacaratteri alcuni dei quali devono
essere usati obbligatoriamente in HTML
<
< <
#
#
£
£ £
>
[
]
&
> >
@
{
}
%
@
à
é
©
“
à à
Vedi:
[
]
& &
http://www.asciitable.com/
{
}
%
é é
© ©
"
"
Andare a capo
In HTML non è possibile andare a capo
premendo invio (return)
E allora come?
Usare <BR>
Nota:
1) Nessun TAG di chiusura!
<BR>
<BR> indica un interruzione di linea (break row)
<font size="6">
Voglio andare a capo ORA
lo ha fatto??
</font>
<font size="6">
Voglio andare a capo ORA <br> lo ha fatto??
</font>
Titoli
In un testo generalmente si evidenziano i titoli
dal resto
In HTML ci sono 6 possibilità di formattare i titoli
cioè possiamo scrivere:
Titolo1
Titolo2
Titolo3
Titolo4
Titolo5
Titolo6
Usando un <Hy>.
<Hy>
Abbiamo sei
possibilità:
y = {1,2,3,4,5,6}
<Hy> Titolo </Hy>
Nota:
1) Tag di chiusura!
<Hy> cont...
Stilisticamente parlando un buon creatore
di pagine HTML non passa mai da un
titolo3 a un titolo1
È buona norma rispettare la gerarchia dal
titolo più grande (H1) al più piccolo (H6)
Formato carattere
grassetto
Ciao
corsivo
Ciao
sottolineato
Ciao
pedice
ACiao
apice
ACiao
Grassetto & Corsivo
Grassetto
normale e <B>grassetto</B>
B = Bold
Corsivo
normale e <I>corsivo</I>
I = Italic
Nota:
1) tag di chiusura
2) tag senza attributi
Grassetto & Corsivo
Sottolineato
Sottolineato
normale e
<U>sottolineato</U>
U = Underline
Nota:
1) tag di chiusura
2) tag senza attributi
Sottolineato
Pedice & Apice
Pedice
normale e
<sub>pedice</sub>
Apice
normale e
<sup>apice</sup>
Nota:
1) tag di chiusura
2) tag senza attributi
Pedice & Apice
Combinazioni
Grassetto corsivo (viceversa)
<b><i> Pippo </i></b>
Pippo
Sottolineato corsivo (viceversa)
<u><i> Pippo </i></u>
Pippo
Pedice corsivo (viceversa)
Pluto<sub><i> Pippo </i></sub>
PlutoPippo
Paragrafi
At the same time, there began to take form a system of numbering, the
calendar, hieroglyphic writing, and a technically advanced art, all of
which later influenced other peoples.
Within the framework of this gradual evolution or cultural progress the
Preclassic horizon has been divided into Lower, Middle and Upper
periods, to which can be added a transitional or Protoclassic period.
Testo suddiviso in due paragrafi (P1, P2) in HTML
è possibile usando <P>
P1
P2
Con <P>
Senza <P>
<P>
Tag di chiusura
Tag con attributi
Attributo Valore
Risultato
align
paragrafo allineato al
centro
paragrafo allineato a
sinistra
paragrafo allineato a
destra
center
left
right
<P ALIGN=“”>
Di
default
Il
<p align=“center”>
paragrafo
<p align=“left”>
<p align=“right”>
è
allineato
a sinistra
Immagini
Le immagini consentite nel linguaggio
HTML sono:
.gif
.jpg
.png
In genere si adoperano le .gif quando servono
immagini animate o con trasparenze, ma il .jpg
risulta il più veloce da caricare e quindi il +
conveniente da usare.
IMMAGINE DI SFONDO
Sintassi:
<BODY background= “pathtoimageaaaaaa.bbb”>
Semantica:
aaaaaa = nome dell’immagine
bbb = estensione dell’immagine
path
PATH
•
Assoluto
metto tutto il percorso partendo dalla directory
principale
es:
c:\Documents and Settings\Documenti\Immagini\NomeImmagine.gif
•
Relativo
metto solamente il percorso partendo dalla
directory in cui è posta la mia WebPage.
es:
Immagini/NomeImmagine.gif