Laboratorio di Applicazioni Informatiche II mod. A HTML – Tag principali
Laboratorio di Applicazioni Informatiche II mod Laboratorio di Applicazioni Informatiche II mod. A HTML – Tag principali 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 < e >, 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 Laboratorio di Applicazioni Informatiche II mod. A HTML – Tag principali Un tag facoltativo, che se usato deve essere il primo di un documento HTML, è <!DOCTYPE>. 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. <!DOCTYPE HTML public "-//W3C//DTD HTML 4.1 Transitional//EN“> il documento è pubblico la lingua del documento è l'inglese il tipo di HTML è gestito dal W3C la versione di HTML supportata è la 4.1
Laboratorio di Applicazioni Informatiche II mod 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): <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 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). <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Laboratorio di Applicazioni Informatiche II mod 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 l’elemento frameset che sostituisce l’elemento body: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Laboratorio di Applicazioni Informatiche II mod Laboratorio di Applicazioni Informatiche II mod. A HTML – Tag principali Un documento HTML deve invece contenere obbligatoriamente i tag indicati in Figura, nell’ordine con cui sono scritti <html> <head> </head> <body> </body> </html>
Laboratorio di Applicazioni Informatiche II mod Laboratorio di Applicazioni Informatiche II mod. A HTML – Tag principali Il tag <html>, inserito all’inizio del documento, indica al browser che il documento è marcato in HTML. Come la maggior parte dei tag, <html> deve essere seguito da un tag di chiusura, che si ottiene aggiungendo una / dopo la parentesi < iniziale, quindi </html>.
<head> </head> <body> </body> Laboratorio di Applicazioni Informatiche II mod. A HTML – Tag principali I due tag <head> </head> delimitano la sezione intestazione di un documento HTML, mentre i tag <body> </body> delimitano il corpo del documento.
I principali elementi (tutti facoltativi) che essa contiene sono: Laboratorio di Applicazioni Informatiche II mod. A HTML –Tag principali 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.
<title>Punto Informatico – Quotidiano dal 1996</title> Laboratorio di Applicazioni Informatiche II mod. A HTML – Tag principali Il titolo del documento, che va racchiuso tra i tag <title> e </title>, viene visualizzato nella finestra del titolo, all’inizio di ciascuna videata. Ad esempio, il tag: <title>Punto Informatico – Quotidiano dal 1996</title> produce la seguente visualizzazione:
I termini chiave per i motori di ricerca Laboratorio di Applicazioni Informatiche II mod. A HTML – Tag principali 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: <meta name="descrizione" content=“Corsi Web gratuiti su HTML, CSS, XML e XHTML"> Un elemento meta che definisce i termini chiave di una pagina potrebbe essere: <meta name=“parole chiave" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">
Laboratorio di Applicazioni Informatiche II mod Laboratorio di Applicazioni Informatiche II mod. A HTML – Tag principali 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.
Laboratorio di Applicazioni Informatiche II mod 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: <html> <head> <title>Documento di prova Ciao a tutti</title> </head> <body> <h1>Ciao a tutti!</h1> Questo è un documento HTML ridotto al minimo. Evidenzia i due blocchi di base di un file HTML. </body> </html>
<em></em> enfatizzato Laboratorio di Applicazioni Informatiche II mod. A HTML - Tag principali Il testo racchiuso tra i tag <h1> e </h1> 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 <h1> a <h6>. I tag di chiusura </h1>...</h6> ripristinano la dimensione di testo preimpostata e determinano una andata a capo. Altre possibilità di formattazione del testo sono fornite dai seguenti tag: <b></b> grassetto <i></i> corsivo <u></u> sottolineato <em></em> enfatizzato
<body leftmargin=“40” topmargin=“60”> Il tag <body> può contenere i due attributi leftmargin topmargin che consentono di impostare i margini rispettivamente sinistro e superiore della pagina Web, in termini di numero di pixel. Esempio: <body leftmargin=“40” topmargin=“60”>
Laboratorio di Applicazioni Informatiche II mod. A HTML – Colori
<body bgcolor=“aqua”> 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 <body> l’attributo bgcolor, seguito a sua volta da un valore, che determina il colore dello sfondo delle pagine Web. Esempio: <body bgcolor=“aqua”>
Per i colori sono possibili i seguenti 16 valori standard: Laboratorio di Applicazioni Informatiche II mod. A HTML – Tag principali 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 "#000000" e "#FFFFFF". Per esempio, per il colore rosso (red) si può scrivere anche : <body bgcolor="#FF0000"> I codici esadecimali dei 16 colori standard sono indicati in Figura.
Laboratorio di Applicazioni Informatiche II mod Laboratorio di Applicazioni Informatiche II mod. A HTML - Tag principali
Laboratorio di Applicazioni Informatiche II mod Laboratorio di Applicazioni Informatiche II mod. A HTML - Tag principali 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.
<body background=“sfondomare.bmp”> Laboratorio di Applicazioni Informatiche II mod. A HTML - Tag principali Anziché assegnare a una pagina un colore di sfondo, le si può assegnare come sfondo una immagine, facendo seguire al tag <body> l’attributo background, al quale si assegna come valore un file di immagine. Esempio: <body background=“sfondomare.bmp”> 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” all’elemento <body>: <body background=“sfondomare.bmp” bgproperties=“fixed”>
<body text="red"> Laboratorio di Applicazioni Informatiche II mod. A HTML - Tag principali Il colore può essere assegnato anche a tutto il testo, tramite l'attributo text: <body text="red"> Inoltre, all'interno del documento è possibile marcare parte del testo in colori differenti da quello impostato con text. Ciò si ottiene usando il tag <font> seguito dall’attributo color, cui si assegna uno dei valori di colore visti in precedenza. Esempio: Questa frase ha una <font color=”yellow”> parola </font> in giallo
<font face=”Garamond, Arial”> Testo in Garamond </font> Laboratorio di Applicazioni Informatiche II mod. A HTML – Tag principali Il tag <font> consente anche di selezionare un repertorio di caratteri (font) e impostarne la dimensione (oltre che il colore). Per selezionare il font si usa l’attributo face, che accetta una lista di font in ordine di preferenza. Esempio: <font face=”Garamond, Arial”> Testo in Garamond </font> Per impostare la dimensione dei caratteri si usa l’attributo 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.
<font size=”+1” face=”Garamond, Times New Roman”> 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: <font size=”+1” face=”Garamond, Times New Roman”> Testo da visualizzare </font> . Si osservi che per impostare la dimensione dei caratteri nei titoli è meglio usare i tag <h1>..<h6>, piuttosto che <font>.
<!--questo è un commento--> Laboratorio di Applicazioni Informatiche II mod. A HTML – Tag principali All'interno di un documento HTML possono essere inclusi dei commenti, facendoli precedere da <!-- e concludere da --> Esempio: <!--questo è un commento--> Il testo di commento può essere formato da qualsiasi carattere e può prolungarsi anche dopo il termine della riga. I commenti sono utili per effettuare dei controlli in fase di ricerca degli errori o per migliorare la leggibilità del codice.
Un tag molto usato, privo di tag di chiusura, è: <br> Laboratorio di Applicazioni Informatiche II mod. A HTML – Tag principali Un tag molto usato, privo di tag di chiusura, è: <br> che produce un’andata a capo. Per definire un paragrafo, ossia un brano di testo preceduto e seguito da una riga vuota, si usa il tag: <p> Esso può essere seguito o no dal tag di chiusura, e può contenere l’attributo align, che può assumere uno degli attributi left center right.
<blockquote>Paragrafo rientrato</blockquote> Laboratorio di Applicazioni Informatiche II mod. A HTML – Tag principali Per esempio, si potrebbe avere: <p align=“center”>paragrafo visualizzato centrato</p> Un paragrafo può essere visualizzato rientrato racchiudendolo tra i marcatori <blockquote> e </blockquote>: <blockquote>Paragrafo rientrato</blockquote> È possibile separare blocchi di testo o immagini con una linea orizzontale, tramite il tag <hr>