La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

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

Presentazioni simili


Presentazione sul tema: "HTML? HyperTest Markup Language Linguaggio di specifica che usa i marcatori: Testo E che permette di visualizzare Ipertesti."— Transcript della presentazione:

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

2 TAG Definizione Si definisce TAG generalmente una parola (elemento) racchiusa tra parentesi angolate <> es.,, …. In HTML il testo racchiuso da <> è già definito (lo vedremo man mano), mentre in altri linguaggi di Markup il testo può essere definito dallutente (XML).

3 Attributi Definizione Viene definito Attributo il testo, diverso da quello dellelemento del tag, compreso nei tag di apertura es. …. Nellesempio bgcolor è lattributo e 1234 è il valore dellattributo, in generale il valore dellattributo viene sempre messo tra virgolette ().

4 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 aperturaTAG di chiusura

5 Tutti gli elementi e il contenuto di un documento HTML sono compresi tra e Dopo si procede con i due tag che dividono il documento in due parti fondamentali: Lintestazione ( ) Il corpo ( )

6 Tag di struttura Un semplice documento HTML ======= Not case sensitive

7 Intestazione Prima Pagina contiene il titolo della pagina visualizzato nella cornice della finestra del browser Nota: usato da alcuni motori di ricerca contiene informazioni di gestione non visualizzate Attributi: name, content.

8 Corpo Altri TAG Altro testo ….. Tutto il contenuto del documento HTML Attributi BGCOLOR Definisce il colore dello sfondo BACKGROUND Definisce limmagine 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 …………

9 COLORI I colori sono espressi in Esadecimale(0..F): #FFFFFF # la forma #xxyyzz: xx = red yy = green zz = blue oppure I colori sono espressi con il loro nome: Yellow Thistle

10 Tabella colori

11 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.

12 Dimensione (small, big) Normale normale Small: piccolo Big: grande Nota: 1) tag di chiusura 2) tag senza attributi

13 Dimensione (small, big)

14 Permette di modificare alcune caratteristiche del testo in qualsiasi momento Attributi 1) sizePermette di scegliere la dimensione del testo 2) facePermette di scegliere il tipo del testo 3) colorPermette di scegliere il colore del testo

15 Attributi (1) Size può assumere valori compresi tra 1 e 7 size1 size2 size3 size4 size5 size6 size7

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

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

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

19 Spazi Gli spazi in HTML vengono considerati diversamente da come siamo abituati Se scrivo Spazio1 Spazio2 o Spazio1 Spazio2 Il browser dopo la parola Spazio1 in entrambi i casi aggiungerà solamente uno spazio.

20 Come aggiungere spazi? Grazie ad un carattere speciale: Senza Con In entrambi i casi ho usato sei spazi

21 Caratteri Speciali Oltre a usato per lo spazio ci sono altri metacaratteri alcuni dei quali devono essere usati obbligatoriamente in HTML < < < # # £ £ £ > > @ à à à [ [ { { é é é ] ] } } © © © & & & % % " " Vedi:

22 Andare a capo In HTML non è possibile andare a capo premendo invio (return) E allora come? Usare Nota: 1) Nessun TAG di chiusura!

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

24 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.

25 Abbiamo sei possibilità: y = {1,2,3,4,5,6} Titolo Nota: 1) Tag di chiusura!

26 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)

27 Formato carattere grassettoCiao corsivoCiao sottolineatoCiao pediceA Ciao apiceA Ciao

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

29 Grassetto & Corsivo

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

31 Sottolineato

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

33 Pedice & Apice

34 Combinazioni Grassetto corsivo (viceversa) Pippo Sottolineato corsivo (viceversa) Pippo Pedice corsivo (viceversa) Pluto Pippo

35 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 P1 P2

36 Con

37 Senza

38 Tag di chiusura Tag con attributi AttributoValoreRisultato aligncenter left right paragrafo allineato al centro paragrafo allineato a sinistra paragrafo allineato a destra

39 Di default Il paragrafo è allineato a sinistra

40 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.

41 IMMAGINE DI SFONDO Sintassi: Semantica: aaaaaa = nome dellimmagine bbb = estensione dellimmagine path

42 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


Scaricare ppt "HTML? HyperTest Markup Language Linguaggio di specifica che usa i marcatori: Testo E che permette di visualizzare Ipertesti."

Presentazioni simili


Annunci Google