HTML Hyper Test Markup Language n Linguaggio di

TAG Definizione Si definisce TAG generalmente una parola (elemento) racchiusa tra parentesi angolate <>

Attributi Definizione Viene definito Attributo il testo, diverso da quello dell’elemento del tag, compreso

TAG (apertura e chiusura) n In HTML tutto ciò che deve essere visualizzato deve

<HTML> Tutti gli elementi e il contenuto di un documento HTML sono compresi tra

Tag di struttura n Un semplice documento HTML ======= <HTML> ======= <HEAD> ======= </HEAD>

Intestazione <head> <title> Prima Pagina </title> <META name =“author” content =“Franca Debole”> <META name

Corpo <body> Altri TAG Altro testo …. . Tutto il contenuto del documento HTML

COLORI n n I colori sono espressi in Esadecimale(0. . F): #FFFFFF #000000 la

Immagini n Le immagini consentite nel linguaggio HTML sono: . gif n. jpg n.

Dimensione (small , big) n n n Normale normale Small: <small>piccolo</small> Big: <big>grande</big> Nota:

<FONT> n Permette di modificare alcune caratteristiche del testo in qualsiasi momento 1) size

Attributi <FONT> (1) n Size può assumere valori compresi tra 1 e 7 <font

Attributi <FONT> (2) n Assume valori standard degli editor di testi <font face="Verdana"> testo

Attributi <FONT> (3) n Colora il testo usando la specifica che abbiamo già visto

Formattazione Testo Gli spazi n Il newline (ritorno carrello) n I titoli n I

Spazi n Gli spazi in HTML vengono considerati diversamente da come siamo abituati Se

Come aggiungere spazi? Grazie ad un carattere speciale: Senza Con In entrambi i

Caratteri Speciali n Oltre a usato per lo spazio ci sono altri metacaratteri

Andare a capo In HTML non è possibile andare a capo premendo invio (return)

<BR> n <BR> indica un interruzione di linea (break row) <font size="6"> Voglio andare

Titoli n n In un testo generalmente si evidenziano i titoli dal resto In

<Hy> n Abbiamo sei possibilità: y = {1, 2, 3, 4, 5, 6} <Hy>

<Hy> cont. . . n Stilisticamente parlando un buon creatore di pagine HTML non

Formato carattere grassetto Ciao corsivo Ciao sottolineato Ciao pedice ACiao apice ACiao

Grassetto & Corsivo Grassetto normale e <B>grassetto</B> n B = Bold Corsivo normale e

Sottolineato normale e <U>sottolineato</U> U = Underline Nota: 1) tag di chiusura 2) tag

Pedice & Apice Pedice normale e <sub>pedice</sub> n Apice normale e <sup>apice</sup> n Nota:

Combinazioni Grassetto corsivo (viceversa) <b><i> Pippo </i></b> Pippo n Sottolineato corsivo (viceversa) <u><i> Pippo

Paragrafi At the same time, there began to take form a system of numbering,

<P> n n Tag di chiusura Tag con attributi Attributo Valore Risultato align paragrafo

<P ALIGN=“”> Di default Il <p align=“center”> paragrafo <p align=“left”> <p align=“right”> è allineato

IMMAGINE DI SFONDO n Sintassi: <BODY background= “pathtoimageaaaaaa. bbb”> n Semantica: aaaaaa = nome

PATH • Assoluto metto tutto il percorso partendo dalla directory principale es: c: Documents

Slides: 42

Download presentation

HTML? Hyper. Test Markup Language n Linguaggio di specifica che usa i marcatori: <nome. Marcatore> Testo </nome. Marcatore> E che permette di visualizzare Ipertesti. n

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 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) n 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> n Dopo <html> si procede con i due tag che dividono il documento in due parti fondamentali: n ¨ L’intestazione (<head>) ¨ Il corpo (<body>)

Tag di struttura n Un semplice documento HTML ======= <HTML> ======= <HEAD> ======= </HEAD> ======= <BODY> ======= </BODY> ======= <HTML> Not case sensitive <html> <head> </head> <body> </html>

Intestazione <head> <title> Prima Pagina </title> <META name =“author” content =“Franca Debole”> <META name =“GENERATOR” content =“Word. Pad”> <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 n n 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 n Le immagini consentite nel linguaggio HTML sono: . gif n. jpg n. png n 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) n n n Normale normale Small: piccolo Big: <big>grande</big> Nota: 1) tag di chiusura 2) tag senza attributi

Dimensione (small , big)

n Permette di modificare alcune caratteristiche del testo in qualsiasi momento 1) size Attributi 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) n Size può assumere valori compresi tra 1 e 7 size 1 size 2 size 3 size 4 size 5 size 6 size 7

Attributi (2) n Assume valori standard degli editor di testi testo testo testo

Attributi (3) n Colora il testo usando la specifica che abbiamo già visto per bgcolor testo testo testo

Formattazione Testo Gli spazi n Il newline (ritorno carrello) n I titoli n I paragrafi n

Spazi n Gli spazi in HTML vengono considerati diversamente da come siamo abituati Se scrivo <body>Spazio 1 Spazio 2</body> Il browser dopo la parola Spazio 1 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 n 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) n E allora come? Usare Nota: 1) Nessun TAG di chiusura!

n indica un interruzione di linea (break row) Voglio andare a capo ORA lo ha fatto? ? Voglio andare a capo ORA lo ha fatto? ?

Titoli n n In un testo generalmente si evidenziano i titoli dal resto In HTML ci sono 6 possibilità di formattare i titoli cioè possiamo scrivere: Titolo 1 Titolo 2 Titolo 3 Titolo 4 Titolo 5 Titolo 6 Usando un <Hy>.

<Hy> n Abbiamo sei possibilità: y = {1, 2, 3, 4, 5, 6} <Hy> Titolo </Hy> Nota: 1) Tag di chiusura!

<Hy> cont. . . n Stilisticamente parlando un buon creatore di pagine HTML non passa mai da un titolo 3 a un titolo 1 È buona norma rispettare la gerarchia dal titolo più grande (H 1) al più piccolo (H 6)

Formato carattere grassetto Ciao corsivo Ciao sottolineato Ciao pedice ACiao apice ACiao

Grassetto & Corsivo Grassetto normale e grassetto n B = Bold Corsivo normale e corsivo n I = Italic Nota: 1) tag di chiusura 2) tag senza attributi

Grassetto & Corsivo

Sottolineato normale e sottolineato U = Underline Nota: 1) tag di chiusura 2) tag senza attributi

Sottolineato

Pedice & Apice Pedice normale e pedice n Apice normale e apice n Nota: 1) tag di chiusura 2) tag senza attributi

Pedice & Apice

Combinazioni Grassetto corsivo (viceversa) Pippo Pippo n Sottolineato corsivo (viceversa) Pippo Pippo n Pedice corsivo (viceversa) Pluto Pippo Pluto. Pippo n

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 (P 1, P 2) in HTML è possibile usando P 1 P 2

Con

Senza

n n 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

Di default Il paragrafo è allineato a sinistra

IMMAGINE DI SFONDO n Sintassi: <BODY background= “pathtoimageaaaaaa. bbb”> n Semantica: aaaaaa = nome dell’immagine bbb = estensione dell’immagine path

PATH • Assoluto metto tutto il percorso partendo dalla directory principale es: c: Documents and SettingsDocumentiImmaginiNome. Immagine. gif • Relativo metto solamente il percorso partendo dalla directory in cui è posta la mia Web. Page. es: Immagini/Nome. Immagine. gif