HTML (Hyper Text Markup Language)

Transcript

1 HTML (Hyper Text Markup Language) E un linguaggio di scrittura di pagine per Internet (pagine web) nato nel E un linguaggio di marcatura ipertestuale Non è un linguaggio di programmazione, in quanto non elabora dati e informazioni, ma si limita a visualizzare la pagina in una forma leggibile E un linguaggio di tipo dichiarativo i cui elementi vengono riconosciuti e interpretati dai browser Web (IE, Netscape, Mozilla, Safari)

2 L ipertesto testo con una struttura non sequenziale fruibile al computer libera navigazione in un insieme di informazioni di vario genere diversi legami associativi tra le informazioni variabilità del percorso di lettura similitudine con le modalità di archiviazione del cervello umano

3 I legami associativi Da un concetto possono partire molti percorsi: Il rock e i giovani Movimento studentesco I figli dei fiori Il 68 Musica Rock Artisti Forme espressive Rock and Roll Elvis Presley Woodstock Concerto con orchestra sinfonica The Beatles Rolling Stones Liverpool Inghilterra Chitarra Heavy Metal

4 Ipermedia Ipertesti multimediali contenenti: testo immagini Grafica - animazioni filmati suoni

5 La struttura non lineare Nodo Link

6 Nodi Un Nodo: può essere raggiunto da diversi link (archi) è costituito da una pagina di dimensione variabile e può contenere testi, immagini, video e audio

7 Link E lo strumento per navigare da un nodo all altro nell ipertesto Può essere rappresentato da : testo (parola - frase) immagine (fotografia - disegno)

8 Struttura ad albero I nodi sono organizzati in livelli gerarchici successivi. La navigazione comincia sempre dal tronco dell albero Tronco

9 Struttura a griglia I collegamenti sono sempre in orizzontale o in verticale. Solitamente i nodi della stessa riga o colonna contengono informazioni sullo stesso argomento o dello stesso tipo.

10 Struttura a rete Non ha una struttura precisa. I collegamenti possono partire da un qualsiasi nodo per raggiungere un qualsiasi altro nodo. La navigazione è più complessa.

11 Quale organizzazione scegliere? Gli ipertesti e gli ipermedia con strutture a griglia o ad albero sono progettati più agevolmente e sono più facilmente navigabili. La struttura a rete è tipica del World Wide Web di Internet che contiene una enorme quantità e diversificazione delle informazioni.

12 Pagine ipermediali scritte in HTML CONTENUTO: testi, immagini, suoni, filmati,ecc STRUTTURA: organizzazione logica interna del documento cioè la suddivisione in capitoli paragrafi e sottoparagrafi. PRESENTAZIONE: il modo in cui il contenuto di un documento, organizzato secondo una certa struttura, viene visualizzato dal punto di vista grafico (stile).

13 Gli strumenti indispensabili per costruire e visualizzare una pagina HTML sono: un browser, cioè un programma che consente di visualizzare le pagine web di Internet come ad esempio Internet Explorer, Netscape, Mozilla o Opera. un editor di testi. In Windows trovate BLOCCO NOTE. Si può usare anche un Word Processor come Word, con l'accortezza di salvare il file in formato ASCII. un programma di grafica, che consente di creare e modificare immagini, soprattutto del tipo GIF e JPG. Buoni programmi, facili da usare, sono Paint Shop Pro e Corel Draw.

14 CHE COSA OCCORRE PER SCRIVERE DOCUMENTI HTML Editor WYSIWYG: sono editor che non visualizzano il codice ma esclusivamente gli oggetti, le immagini e il testo. In questo modo lo sviluppatore non si trova a lavorare sul codice html ma sulla pagina così come verrà visualizzata dal browser. Un software di questo genere è Front Page che però non dà la possibilità di comprendere HTML e personalizzarne l uso. Editor testuali: sono programmi che propongono modifiche dirette sul codice HTML e che presuppongono la conoscenza e la padronanza del codice.

15 REGOLE GENERALI Ogni pagina di un ipertesto deve essere contenuta in un file diverso, che deve avere estensione HTM o HTML. I documenti HTML sono file di tipo plain text e possono essere visualizzati con i browser WWW (browser agent) La pagina iniziale dell'ipertesto (quella che deve essere visualizzata per prima) dovrebbe (non è obbligatorio, ma è consigliabile) avere uno dei seguenti nomi: index.htm default.htm home.htm main.htm index.html default.html home.html main.html perché su Internet viene visualizzata automaticamente, senza che si debba chiamarla per nome (il nome preciso dipende dal server che contiene le pagine).

16 Nomi di file del sito composti da sole lettere MINUSCOLE Usare possibilmente nomi di UNA SOLA PAROLA NON usare accenti, spazi, punteggiature o caratteri inusuali

17 Il codice HTML Le istruzioni HTML devono aderire il più possibile allo standard stabilito dal W3C (World Wide Web Consortium), che ha il compito di definire le specifiche del linguaggio. Si compone di elementi detti TAG che iniziano e finiscono tra parentesi angolari < > Non è case sensitive, cioè non fa distinzione fra minuscole e maiuscole

18 STRUTTURA DI UNA PAGINA Corpo del documento: contiene il testo, le immagini, i link, ecc.. Intestazione: contiene una serie di informazioni necessarie al browser per una corretta interpretazione del documento come per esempio il titolo della pagina, i termini chiave per i motori di ricerca, il tipo di HTML supportato.

19 <HTML> <HEAD> <TITLE> prima pagina web </TITLE> </HEAD> <BODY BGCOLOR= RED > <b>ciao</b> </BODY> </HTML>

20 TAG Empty tag: tag vuoti, senza contenuto e senza chiusura <br> Start tag : apertura End tag: chiusura <body> </body>

21 PARAGRAFO <P> </P> definisce un nuovo paragrafo del testo indicando al browser di inserire una riga vuota prima e dopo il testo.

22 Testo scorrevole <marquee loop= infinite bgcolor= yellow height= 60 width= 100 hspace= 100 > Ciao </marquee>

23 LE INTESTAZIONI Il marcatore Hn ha il compito di evidenziare i titoli in un documento. La sintassi è: H (header = titolo) + un numero da 1 a 6 che identifica la dimensione. Il numero identifica anche l importanza del titolo

24 LIVELLO DELLE INTESTAZIONI <H1>...</H1> <H2>...</H2> <H3>...</H3> <H4>...</H4> <H5>...</H5> <H6>...</H6> Tutto il testo compreso fra questi due tags, utilizzerà dei caratteri molto grandi ed evidenziati in grassetto. Lascia una o due righe bianche sia al di sopra che al di sotto del testo. Viene utilizzato solitamente per titoli di pagina centrati rispetto allo schermo Testo in grassetto di dimensioni leggermente inferiori al caso precedente, e con una o due righe bianche sopra e sotto il testo. Viene utilizzato per il testo normale, sia come dimensione che come aspetto estetico (font) del carattere. Lascia una o due righe bianche sopra e sotto il testo Viene utilizzato per evidenziare in grassetto un testo con caratteri di dimensioni normali. Lascia inoltre una riga bianca sopra e sotto. Come il caso precedente con carattere leggermente più piccolo e riga bianca al di sopra del testo. Carattere in grassetto di piccole dimensioni. Lascia una riga bianca al di sopra del testo.

25 Le immagini Il tag per inserire un immagine è: <IMG SRC= immagine.jpg >