HTML? HyperTest Markup Language Linguaggio di specifica che usa i marcatori: Testo E che permette di...

HTML?

HyperTest Markup Language Linguaggio di specifica che usa i

marcatori:

<nomeMarcatore>

Testo

</nomeMarcatore>

E che permette di visualizzare Ipertesti.

TAGDefinizione

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

DefinizioneViene definito Attributo il testo, diverso daquello dell’elemento del tag, compreso neitag di apertura es. <body bgcolor =“1234”> ….

Nell’esempio bgcolor è l’attributo e “1234” è il valoredell’attributo, in generale il valore dell’attributo vienesempre 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 TAG di chiusura

<html> </html>

<tr> </tr>

<body> </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> ======= <HTML>

<head> ======= <HEAD>

</head> ======= </HEAD>

<body> ======= <BODY>

</body> ======= </BODY>

</html> ======= <HTML>

Not case sensitive

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>

Nota: usato da alcuni motori di ricerca

contiene informazioni di gestione non visualizzate

Attributi: name, content.

Corpo<body>

Altri TAGAltro testo …..Tutto il contenuto del documento HTML

</body>

AttributiBGCOLOR Definisce il colore dello sfondo BACKGROUND Definisce l’immagine da usare come sfondo

TEXT Definisce il colore del testoLINK Definisce il colore del testo dei linkVLINK Definisce il colore del testo dei link già visitatiALINK Definisce il colore del testo dei link attiviSTYLE 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 servonoimmagini 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:

piccolo Big:

<big>grande</big>

Nota:

1) tag di chiusura

2) tag senza attributi

Dimensione (small , big)

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 (1) Size può assumere valori

compresi tra

1 e 7 size1 

 size2

Attributi (2) Assume valori standard degli

editor di testi



testo





testo





testo

Attributi (3) Colora il testo usando la

specifica che abbiamo già visto per bgcolor

 testo



testo 

testo

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 capoIn HTML non è possibile andare a capopremendo invio (return)

E allora come? Usare 

Nota: 1) Nessun TAG di chiusura!

indica un interruzione di linea (break row)



Voglio andare a capo ORA lo ha fatto??





Voglio andare a capo ORA

lo ha fatto??

Titoli In un testo generalmente si evidenziano i titoli

dal resto In HTML ci sono 6 possibilità di formattare i titoli

cioè possiamo scrivere:

Titolo1Titolo2Titolo3Titolo4Titolo5Titolo6

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 grassettoB = Bold

Corsivo

normale e corsivoI = Italic

Nota:

1) tag di chiusura

Grassetto & Corsivo

Sottolineato Sottolineato

normale e

sottolineatoU = Underline

Nota:

1) tag di chiusura

Sottolineato

Pedice & Apice Pedice

normale e

pedice Apice

normale e

apice

Nota:

1) tag di chiusura

Pedice & Apice

Combinazioni Grassetto corsivo (viceversa)

 Pippo 

Pippo Sottolineato corsivo (viceversa)

 Pippo 

Pippo Pedice corsivo (viceversa)

Pluto Pippo 

PlutoPippo

ParagrafiAt 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 

P1

P2

Con

Senza

Tag di chiusura Tag con attributi

Attributo Valore Risultato

align center

left

right

paragrafo allineato al centro

paragrafo allineato a sinistra

paragrafo allineato a destra

Di

default

Il

paragrafo

è

allineato

a sinistra

Immagini Le immagini consentite nel linguaggio

HTML sono: .gif .jpg .png

In genere si adoperano le .gif quando servonoimmagini 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 principalees:

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

HTML? HyperTest Markup Language Linguaggio di specifica che usa i marcatori: Testo E che permette di...

Documents

Transcript of HTML? HyperTest Markup Language Linguaggio di specifica che usa i marcatori: Testo E che permette di...