La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

HTML – Tag principali Laboratorio di Applicazioni Informatiche II mod. A.

Presentazioni simili


Presentazione sul tema: "HTML – Tag principali Laboratorio di Applicazioni Informatiche II mod. A."— Transcript della presentazione:

1 HTML – Tag principali Laboratorio di Applicazioni Informatiche II mod. A

2 Vediamo i principali elementi di HTML, limitandoci ai primi due livelli di compatibilità, che sono supportati da quasi tutti i browser Web. Un documento HTML consiste in testo e comandi o tag. Questi ultimi sono parole o frasi racchiuse tra i simboli, detti marcatori di struttura. I tag definiscono la struttura logica del documento, identificando elementi quali titoli, intestazioni, paragrafi ed elenchi. Essi possono essere scritti indifferentemente in lettere maiuscole o minuscole. Laboratorio di Applicazioni Informatiche II mod. A HTML – Tag principali

3 Un tag facoltativo, che se usato deve essere il primo di un documento HTML, è. Esso dice al browser quale specifica HTML (o XHTML) il documento usa. La versione 4.01 di HTML specifica tre tipi di documento (DTD): Strict, Transitional e Frameset. il documento è pubblico il tipo di HTML è gestito dal W3C la versione di HTML supportata è la 4.1 la lingua del documento è l'inglese

4 Laboratorio di Applicazioni Informatiche II mod. A HTML – Tag principali La DTD Strict viene usata quando si vuole una marcatura pulita, che dia luogo a una presentazione priva di confusioni. Va usata insieme ai fogli di stile a cascata (CSS): La DTD Transitional comprende attributi di presentazione ed elementi che il W3C si aspetta che siano messi in un foglio di stile. Va usata quando si debbano usare le caratteristiche di presentazione di HTML in quanto i lettori non dispongono di browser che supportino i fogli di stile a cascata (CSS).

5 Laboratorio di Applicazioni Informatiche II mod. A HTML – Tag principali La DTD frameset va usata in documenti con i frame. E uguale alla DTD Transitional, tranne che per lelemento frameset che sostituisce lelemento body :

6 Un documento HTML deve invece contenere obbligatoriamente i tag indicati in Figura, nellordine con cui sono scritti Laboratorio di Applicazioni Informatiche II mod. A HTML – Tag principali

7 Il tag, inserito allinizio del documento, indica al browser che il documento è marcato in HTML. Come la maggior parte dei tag, deve essere seguito da un tag di chiusura, che si ottiene aggiungendo una / dopo la parentesi.

8 Laboratorio di Applicazioni Informatiche II mod. A HTML – Tag principali delimitano il corpo del documento. delimitano la sezione intestazione di un documento HTML, mentre i tag I due tag

9 L'intestazione contiene una serie di informazioni necessarie al browser per una corretta interpretazione del documento, ma non visualizzate all'interno dello stesso. L'intestazione quindi ha un ruolo non apparente ma sicuramente fondamentale. I principali elementi (tutti facoltativi) che essa contiene sono: il titolo del documento; i termini chiave per i motori di ricerca; il tipo di HTML supportato; i link base di riferimento. Laboratorio di Applicazioni Informatiche II mod. A HTML –Tag principali

10 Il titolo del documento, che va racchiuso tra i tag e, viene visualizzato nella finestra del titolo, allinizio di ciascuna videata. Ad esempio, il tag: Punto Informatico – Quotidiano dal 1996 produce la seguente visualizzazione:

11 I termini chiave per i motori di ricerca Alcuni motori di ricerca usano gli attributi name e content del tag meta per indicizzare le pagine trovate. Un elemento meta che definisce una descrizione di una pagina potrebbe essere: Un elemento meta che definisce i termini chiave di una pagina potrebbe essere: Laboratorio di Applicazioni Informatiche II mod. A HTML – Tag principali

12 Scopo degli attributi name e content è quello di descrivere il contenuto di una pagina. Tuttavia, dato che molti Web master usano i tag meta a fini di spamming, per esempio ripetendo i termini chiave per fare attribuire alle pagine un punteggio più alto, alcuni motori di ricerca hanno smesso completamente di usarli.

13 Documento di prova Ciao a tutti Ciao a tutti! Questo è un documento HTML ridotto al minimo. Evidenzia i due blocchi di base di un file HTML. Laboratorio di Applicazioni Informatiche II mod. A HTML – Tag principali Il corpo di un documento HTML contiene il testo, le immagini e i collegamenti che saranno poi visualizzati sulla relativa pagina Web. Si potrebbe avere, per esempio:

14 Laboratorio di Applicazioni Informatiche II mod. A HTML - Tag principali Il testo racchiuso tra i tag e viene considerato come un titolo di primo livello e visualizzato nella dimensione massima possibile. Si possono definire titoli di sei livelli (e dimensioni) decrescenti usando i tag da a. I tag di chiusura... ripristinano la dimensione di testo preimpostata e determinano una andata a capo. Altre possibilità di formattazione del testo sono fornite dai seguenti tag: grassetto corsivo sottolineato enfatizzato

15 che consentono di impostare i margini rispettivamente sinistro e superiore della pagina Web, in termini di numero di pixel. Esempio: leftmargin topmargin Il tag può contenere i due attributi

16 Laboratorio di Applicazioni Informatiche II mod. A HTML – Colori

17 Laboratorio di Applicazioni Informatiche II mod. A HTML – Tag principali Se non stabilito diversamente, il colore dello sfondo è bianco e quello del testo è nero, valori preimpostati dai browser. Per modificare il colore dello sfondo, si fa seguire al tag lattributo bgcolor, seguito a sua volta da un valore, che determina il colore dello sfondo delle pagine Web. Esempio:

18 Per i colori sono possibili i seguenti 16 valori standard: aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal white yellow Essi corrispondono all'insieme standard VGA sui PC. È possibile sostituire al nome in inglese un valore esadecimale compreso tra " # " e " #FFFFFF ". Per esempio, per il colore rosso ( red ) si può scrivere anche : Laboratorio di Applicazioni Informatiche II mod. A HTML – Tag principali I codici esadecimali dei 16 colori standard sono indicati in Figura.

19 Laboratorio di Applicazioni Informatiche II mod. A HTML - Tag principali

20 L'uso dei valori esadecimali consente di ottenere colori non standard, contenenti diverse proporzioni dei tre colori fondamentali red green blue. In particolare, le prime due cifre dopo il # indicano la quantità di red, le due successive la quantità di green e le ultime due la quantità di blue. I computer più recenti supportano migliaia o milioni di colori, ma molti sistemi a colori più vecchi possono supportare solo 256 colori per volta. Laboratorio di Applicazioni Informatiche II mod. A HTML - Tag principali

21 Anziché assegnare a una pagina un colore di sfondo, le si può assegnare come sfondo una immagine, facendo seguire al tag lattributo background, al quale si assegna come valore un file di immagine. Esempio: Laboratorio di Applicazioni Informatiche II mod. A HTML - Tag principali Se il contenuto di una pagina si estende oltre lo spazio di una videata, è possibile farlo scorrere cliccando sulla barra di scorrimento verticale che viene visualizzata automaticamente. In tal caso, anche lo sfondo scorre insieme al contenuto della pagina, a meno che non lo si voglia fissare, aggiungendo bgproperties=fixed allelemento :

22 Il colore può essere assegnato anche a tutto il testo, tramite l'attributo text : Laboratorio di Applicazioni Informatiche II mod. A HTML - Tag principali Inoltre, all'interno del documento è possibile marcare parte del testo in colori differenti da quello impostato con text. Ciò si ottiene usando il tag seguito dallattributo color, cui si assegna uno dei valori di colore visti in precedenza. Esempio: Questa frase ha una parola in giallo

23 Per impostare la dimensione dei caratteri si usa lattributo size, che accetta valori da 1 a 6. Se si pone un segno - o + prima del numero, esso viene interpretato come un valore relativo, rispetto al valore impostato in precedenza. Testo in Garamond Laboratorio di Applicazioni Informatiche II mod. A HTML – Tag principali Il tag consente anche di selezionare un repertorio di caratteri (font) e impostarne la dimensione (oltre che il colore). Per selezionare il font si usa lattributo face, che accetta una lista di font in ordine di preferenza. Esempio:

24 . Testo da visualizzare Laboratorio di Applicazioni Informatiche II mod. A HTML – Tag principali Quindi size=+1 fa usare la successiva dimensione di font in grandezza, mentre size=-1 la precedente. Esempio: Si osservi che per impostare la dimensione dei caratteri nei titoli è meglio usare i tag.., piuttosto che.

25 All'interno di un documento HTML possono essere inclusi dei commenti, facendoli precedere da

Presentazioni simili


Annunci Google