I PRINCIPALI TAG DEL LINGUAGGIO HTML
Struttura generica di una pagina Web:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Titolo della pagina</TITLE>
<META name="title" content="Home Page, ISIS Einaudi-Ceccherelli, Piombino">
<META name="description" content="Home Page, ISIS Einaudi-Ceccherelli, Piombino ">
<META name="keywords" content=" ISIS Einaudi-Ceccherelli ">
<META name="author" content="Matteo Gistri / ISIS Einaudi-Ceccherelli, Piombino ">
<META name="copyright" content="2007-2011, ISIS Einaudi-Ceccherelli, Piombino ">
<META http-equiv="Reply-to" content="[email protected]">
<META http-equiv="content-language" content="IT">
<META http-equiv="Content-Type" content="text/html; iso-8859-1">
<META name="ROBOTS" content="INDEX,FOLLOW">
<META name="creation_Date" content="11/11/2011">
<META name="revisit-after" content="7 days">
</HEAD>
<BODY bgcolor=”#000000” text=”ffffff”>
imposto colore sfondo e colore testo
Oppure:
<BODY background=”percorso e nome del file” text=”ffffff”>
imposto immagine di sfondo e colore testo
Contenuto della pagina
</BODY>
</HTML>
Per Generare Meta Tag: http://www.tuttowebmaster.it/strumenti/meta_tag_generator.php
I possibili attributi del tag Body sono:
background
bgcolor
text
link
vlink
alink
Paragrafi (BR, P, DIV, SPAN)
Il tag <BR> equivale ad un'interruzione di riga che non spezza il paragrafo. Infatti, il testo che segue va a capo
mantenendo tutte le caratteristiche del testo precedente e senza che si crei spazio vuoto tra le righe. Il tag <BR> non
richiede un corrispondente tag di chiusura, basta inserirlo nel punto in cui si vuole che la frase vada a capo.
Esempio: <BR>
Il tag <P> crea invece un'interruzione di paragrafo; il testo successivo va a capo, lasciando una riga di spazio vuoto, e
può essere formattato in maniera diversa rispetto al testo precedente. Il tag <P> d e v e essere usato con la rispettiva
chiusura </P>.
Esempio: <P>testo del paragrafo</P>
Il tag <DIV> che si usa con la chiusura </DIV> serve a creare un blocco di testo che va a capo e può assumere
caratteristiche di formattazione diverse dal testo precedente senza tuttavia creare spazio vuoto tra il nuovo testo e
quello precedente. Il tag DIV definisce una porzione di documento.
Il tag <SPAN> che si usa con la chiusura </SPAN> è un contenitore generico che può essere annidato (ad esempio)
all'interno dei <div>. Si tratta di un elemento inline, che cioè non va a capo e continua sulla stessa linea del tag che lo
include.
Esempio: <span>contenitore 1</span><span>contenitore 2</span>
Struttura generica di una pagina Web e principali Tag del Linguaggio HTML (ultima revisione 14/11/2011)
Pag. 1
Riassumendo: le caratteristiche più evidenti di <p>, <div> e <span> sono quindi:
<p> lascia spazio prima e dopo la propria chiusura
<div> non lascia spazio prima e dopo la propria chiusura, ma - essendo un elemento di blocco - va a capo
<span> - essendo un elemento inline - non va a capo
Allineamenti di testo
Per impostare gli allineamenti di testo che valgono paragrafo per paragrafo si usa l'attributo ALIGN del tag <P> secondo
la sintassi: <P ALIGN=“valore“>paragrafo da allineare</p>
dove il valore di ALIGN può essere:
left per l'allineamento a sinistra, (allineamento predefinito)
center per l'allineamento al centro,
right per quello a destro
justify per l'allineamento giustificato
Allo stesso modo di <P ALIGN="valore">....</P> si può usare il tag <DIV ALIGN="valore">....</DIV> per identificare e
formattare in modo omogeneo interi blocchi di testo anziché i singoli paragrafi.
Formattazione
I principali tag per la formattazione sono:
<B>... </B>
testo in grassetto;
<I>... </I>
testo in corsivo;
<U>... </U>
testo sottolineato;
<STRIKE>... </STRIKE>
testo barrato o depennato;
testo apice;
<SUP>... </SUP>
<SUB>... </SUB>
testo pedice.
Scegliere il font del testo (Tag Font Face)
Vediamo alcuni esempi di famiglie "sicure" di caratteri:
<font face="Verdana, Arial, Helvetica, sansserif">Verdana e caratteri simili</font>
Verdana e caratteri simili
<font face="Arial, Helvetica, sans-serif">Arial e
caratteri simili</font>
Arial e caratteri simili
<font face="Times New Roman, Times,
serif">Times e caratteri simili</font>
Times e caratteri simili
<font face="Courier New, Courier,
mono">Curier e caratteri simili</font>
Curier e caratteri simili
<font face="Georgia, Times New Roman, Times, Georgia e caratteri simili
serif">Georgia e caratteri simili </font>
<font face="Geneva, Arial, Helvetica, sansserif">Geneva e caratteri simili</font>
Geneva e caratteri simili
Struttura generica di una pagina Web e principali Tag del Linguaggio HTML (ultima revisione 14/11/2011)
Pag. 2
Scegliere il colore del testo (Tag Font Color)
Una volta scelto il carattere con cui scrivere il nostro testo possiamo scegliere il colore, ecco il codice:
<font color="blue">testo blu</font> oppure: <font color="#0000FF">testo blu</font>
Una volta scelto il colore possiamo sempre decidere di cambiarlo:
<font face="Verdana, Arial, Helvetica, sans-serif" color="blue">
testo blu in Verdana
</font>
<br >
<font face="Verdana, Arial, Helvetica, sans-serif" color="red">
testo rosso
</font>
<br>
o meglio ancora:
<font face="Verdana, Arial, Helvetica, sans-serif" color="blue">
testo blu in Verdana
<br/>
<font color="red">
testo rosso
</font>
<br>
</font>
La seconda codifica è preferibile alla precedente, perché la scelta del tipo di carattere viene effettuata una sola volta,
evitando così di scrivere del codice inutile. È importante notare che per evitare la ripetizione i due tag sono annidati l'uno
dentro l'altro.
Immagini(Tag IMG)
Per inserire un'immagine in una pagina HTML basta inserire il tag: <IMG SRC="nome immagine">; questo tag non ha
bisogno di chiusura.
Affinché l'immagine venga visualizzata nella pagina web bisogna specificarne il nome, l'estensione e l'eventuale
percorso. Usando il tag in questo modo l'immagine appare allineata alla base della riga di testo corrispondente,
senza spazi aggiuntivi e mantiene le sue dimensioni assolute.
Possiamo definire le dimensioni di visualizzazione di un'immagine specificando gli attributi WIDTH (larghezza in
pixel) e HEIGHT (altezza in pixel). Ad esempio:
<IMG SRC=”image.jpg” WIDTH=”100” HEIGHT=”50”>
Quando si specificano le dimensioni di un'immagine è necessario conoscerne le dimensioni effettive per mantenere
inalterato il rapporto larghezza/altezza evitando così di deformare l'immagine.
Oltre alle dimensioni di visualizzazione possiamo definire anche l'allineamento dell'immagine rispetto al testo
circostante mediante l'attributo ALIGN. I valori di ALIGN ammessi sono:
Bottom: il lato inferiore dell'immagine appare allineato alla base della riga di testo (valore predefinito);
Middle: il punto mediano dell'altezza dell'immagine si allinea alla base della riga di testo; il testo si spezza e
prosegue sotto l'immagine;
Left: l'immagine si posiziona sul lato sinistro della pagina e il testo scorre intorno a lei sul lato destro;
Right: l'immagine si posiziona sul lato destro della pagina e il testo scorre intorno a lei sul lato sinistro.
Nel caso in cui si voglia allontanare l'immagine dal testo si può aumentare lo spazio vuoto che circonda l'immagine
attraverso gli attributi VSPACE (spazio verticale, in pixel) e HSPACE (spazio orizzontale, in pixel). Ad esempio
Struttura generica di una pagina Web e principali Tag del Linguaggio HTML (ultima revisione 14/11/2011)
Pag. 3
scrivendo:
<IMG SRC=”image.jpg ” VSPACE=”10” HSPACE=”20”>
Si può anche aggiungere un bordo intorno all'immagine tramite l'attributo BORDER che deve essere espresso in
pixel secondo la sintassi:
<IMG SRC=”image.jpg” BORDER=”5”>
Un attributo fondamentale del tag <IMG> è ALT (testo alternativo). Grazie a tale attributo si può definire una
didascalia associata all'immagine. La sintassi corretta è:
<IMG SRC=”nome immagine” ALT=”breve descrizione testuale”>
Questa didascalia associata all'immagine appare durante il caricamento della pagina o quando si passa con il mouse
sopra l'immagine. I vantaggi principali dell'usare l'attributo ALT sono:
i visitatori possono capire prima del caricamento completo il contenuto delle immagini;
i browser speciali per non-vendenti sono in grado di interpretare correttamente la pagina;
diversi motori di ricerca tengono conto del valore dell'attributo ALT delle immagini di una pagina per catalogarla
con precisione.
Ad ogni immagine si può associare un collegamento ipertestuale includendo il tag <IMG> all'interno della coppia di tag
<A HREF> e </A> secondo la sintassi:
<A HREF=”index.html”><IMG SRC=”index.gif”></A>
Però quando un'immagine è cliccabile, appare generalmente circondata da un bordo di colore blu che risulta
anti- estetico. In questo caso basta indicare all'interno del tag <IMG> l'attributo BORDER="0" per fare in modo che il
bordo resti invisibile.
Collegamenti Ipertestuali(Tag A HREF)
I collegamenti ipertestuali si creano associando l'indirizzo (percorso/nome file) del nodo di destinazione ad un
elemento visualizzato nella pagina corrente che può essere una stringa di testo o un'immagine. Per creare un
collegamento verso un'altra pagina dello stesso sito la sintassi è:
<A HREF=”pagina2.html”> Vai a pagina 2 </A
Il tag <A HREF> permette a n c h e di puntare un collegamento anziché ad una pagina web ad un'immagine. La sintassi è:
<A HREF=”foto.jpg”> Vai a foto </A>
Se si vuole creare un collegamento ad un file da aprire o da scaricare come ad esempio un filmato o un
pacchetto compresso la sintassi è:
<A HREF=”file.zip”> Scarica il file in formato zip </A>
Per creare un collegamento verso un'altro sito web è sufficiente inserire nel tag <A HREF> l'indirizzo completo del sito
in questione:
<A HREF=http://www.gdesign.it> Principi di Web Design by GDC </A>
È consigliabile inserire nelle proprie pagine web un indirizzo di posta elettronica cui i visitatori possano rivolgersi.
Allora si può inserire un indirizzo cliccabile, associato cioè alla casella e-mail corrispondente, in modo che l'invio del
messaggio sia quasi automatizzato. La sintassi è:
<A HREF=”mailto:[email protected]> Scrivimi per informazioni </A>
Quando si clicca su un collegamento in una pagina web, viene caricata la nuova destinazione (immagine, pagina o
sito) nella stessa finestra del browser. Seguendo i vari collegamenti ipertestuali, il lettore potrebbe non ricordarsi più il
Struttura generica di una pagina Web e principali Tag del Linguaggio HTML (ultima revisione 14/11/2011)
Pag. 4
punto di destinazione. Per prevenire questo inconveniente si può fare in modo che la destinazione del collegamento
venga visualizzata in una nuova finestra del browser che si sovrappone a quella di partenza. Per ottenere questo
risultato basta aggiungere al tag <A HREF> di partenza l'attributo TARGET. Ad esempio:
<A HREF=”pagina2.html” TARGET=”_blank”> Vai a pagina 2 </A>
Titoli(Tag H1…H6)
Mediante l'inserimento di opportuni titoli il testo di una pagina HTML può essere suddivisa in capitoli e sottocapitoli.
Per i titoli HTML sono previsti sei livelli gerarchici.
Il tag per definire un titolo è <Hn>... </Hn> dove n è un valore che va da 1 a 6. Ciò significa che si possono avere sei
livelli di titolazione, da <H1> (livello superiore) a<H6> (livello inferiore).
Elenchi Puntati e Numerati(Tag UL, OL, LI)
Il primo tipo di elenco che vedremo è quello puntato; le voci di questo elenco non hanno un ordine di successione
ed ogni voce viene evidenziata da un simbolo.
Il tag è <UL> (Unordered List) e funziona con il rispettivo </UL>. Nel mezzo del tag <UL>... </UL> ciascuna voce è
identificata dal tag <LI>. Esempio:
<UL>
<LI> voce a
<LI> voce b
<LI> voce c
</UL>
Al tag <UL> si può aggiungere l'attributo TYPE="tipo di simbolo" che permette di scegliere un simbolo personalizzato. I
valori previsti sono:
disc
punto pieno
circle
punto vuoto
square
quadrato nero.
Un altro tipo di elenco è quello numerato; le voci di questo elenco hanno un preciso ordine di successione ed ogni
voce viene evidenziata da un numero oppure opzionalmente, da una lettera.
Il tag è <OL> (Ordered List) e funziona con il rispettivo </OL>. Nel mezzo del tag <OL>... </OL> ciascuna voce è
identificata dal tag <LI>. Al tag <OL> si può aggiungere l'attributo TYPE="tipo di numerazione" che permette di
scegliere numeri o lettere. I valori previsti sono:
1
I
i
A
a
numeri arabi,
numeri romani maiuscoli,
numeri romani minuscoli,
lettere maiuscole,
lettere minuscole.
Si può anche usare l'attributo START="numero" per far iniziare il conteggio da un qualsiasi valore.
Tag IFRAME
L’iframe, ossia Inline Frame, viene utilizzato per inserire ed integrare una pagina web all’interno di un’altra pagina web, in
questo modo è possibile far vedere una pagina o una parte di essa (che può anche risiedere su un altro server) all’interno di
una cornice (frame). La sintassi di base per inserire un iframe all'interno di una pagina web è questa:
<iframe src="pagina_esterna.html" width="400" height="110"></iframe>
Oppure:
<iframe
src="pagina_esterna.html"
Struttura generica di una pagina Web e principali Tag del Linguaggio HTML (ultima revisione 14/11/2011)
Pag. 5
scrolling="no"
frameborder="0"
align=left
marginheight="0px"
marginwidth="0px"
height="170"
width="140">
<p>Il tuo browser non supporta gli iframe.</p>
</iframe>
src: corrisponde all'indirizzo della pagina da caricare nell'iframe.
Scrolling: indica se ci devono essere barre di scorrimento. Può ricevere valori: yes-no-auto.
Framenorder: indica se deve comparire un bordo intorno al frame. Come valore può ricevere 0-1.
Align: indica l’allineamento che deve assumere l’iframe. Può essere left, right, top, middle, o bottom, rispetto al contenitore
dove verrà inserito (es. tabella o div).
Marginheight: specifica i margini superiore e inferiore che deve avere l’iframe.
Marginwidth: specifica i margini destro e sinistro che deve avere l’iframe.
height: imposta l'altezza in pixel.
width: imposta la larghezza in pixel.
<p> Il tuo….</>: è un commento che si visualizza nel remoto caso in cui il browser del visitatore non dovesse supportare gli
iframe.
Struttura generica di una pagina Web e principali Tag del Linguaggio HTML (ultima revisione 14/11/2011)
Pag. 6
