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

HTML – Tag principali

Laboratorio di Applicazioni Informatiche II mod. A

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

il tipo di HTML è gestito dal W3C

la versione di HTML supportata è la 4.1

la lingua del documento è

l'inglese


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


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

<html>

</html>

<head>

</head>

<body>

</body>

Un documento HTML deve invece contenere obbligatoriamente i tag indicati in Figura, nell’ordine con cui sono scritti



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


<body>

</body>

delimitano il corpo del documento.

<head>

</head>

delimitano la sezione intestazione di un documento HTML, mentre i tag

I due tag

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


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

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



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.

<html>

</html>

<head>

</head>

<body>

</body>

<title>Documento di prova Ciao a tutti</title>

<h1>Ciao a tutti!</h1>Questo è un documento HTML ridotto al minimo. Evidenzia i due blocchi di base di un file HTML.


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:

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

che consentono di impostare i margini rispettivamente sinistro e superiore della pagina Web, in termini di numero di pixel.

Esempio:

leftmargin topmargin

Il tag <body> può contenere i due attributi

<body leftmargin=“40” topmargin=“60”>

Laboratorio di Applicazioni Informatiche II mod. A

HTML – Colori


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:

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 :


I codici esadecimali dei 16 colori standard sono indicati in Figura.

<body bgcolor="#FF0000">


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.


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:


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

<body background=“sfondomare.bmp” bgproperties=“fixed”>

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

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 face=”Garamond, Arial”> Testo in Garamond</font>


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 size=”+1” face=”Garamond, Times New Roman”> Testo da visualizzare</font>


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 <h1>..<h6>, piuttosto che <font>.

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

Esempio:




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.

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.


<br>

Un tag molto usato, privo di tag di chiusura, è:

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>

Per esempio, si potrebbe avere:

<blockquote>Paragrafo rientrato</blockquote>


Un paragrafo può essere visualizzato rientrato racchiudendolo tra i marcatori <blockquote> e </blockquote>:

<p align=“center”>paragrafo visualizzato centrato</p>

È possibile separare blocchi di testo o immagini con una linea orizzontale, tramite il tag

<hr>

Documents

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