Elenco dei TAG HTML

(Guida HTML)

pagina 2 di 2

ELEMENTI DI BASE
(tutti i documenti HTML devono contenere questi tag)

Tipo documento	<HTML></HTML>	(segnano l'inizio e la fine del file)
Titolo	<TITLE></TITLE>	(titolo della pagina, da inserire all’interno della testata)
Testata	<HEAD></HEAD>	(informazioni descrittive; come il titolo)
Corpo	<BODY></BODY>	(contenuto della pagina)

PROPRIETA' DELLA PAGINA: SFONDI E COLORI

Immagine di sfondo	<BODY BACKGROUND="URL">
Colore di sfondo	<BODY BGCOLOR="#******">
Colore del testo	<BODY TEXT="#******">
Colore dei collegamenti	<BODY LINK="#******">
Colore dei collegamenti visitati	<BODY VLINK="#******">
Colore del collegamento selezionato	<BODY ALINK="#******">

* URL = indirizzo Internet tipo http://www.google.it, oppure percorso del file inserito
* #****** = codice esadecimale dei colori

FORMATTAZIONE DEL TESTO

Grassetto	<B></B>
Corsivo	<I></I>
Sottolineato	<U></U>	(a partire dalle versioni 4.x)
Barrato o cancellato	<DEL></DEL>	(a partire dalle versioni 4.x)
Barrato o cancellato	<STRIKE></STRIKE>	(a partire dalle versioni 4.x)
Apice	<SUP></SUP>
Pendice	<SUB></SUB>
Lampeggiante	<BLINK></BLINK>	(Supportato solo da Netscape)
Testo scorrevole	<MARQUEE></MARQUEE>	(Supportato solo da Internet Explorer)
Macchina da scrivere	<TT></TT>	(Visualizzato a spaziatura fissa)
Codice	<CODE></CODE>	(a partire dalle versioni 4.x)
Preformattato	<PRE></PRE>	(Visualizzato tale e quale, compresi gli spazi)
Centrato	<CENTER></CENTER>	(sia per testo che immagini)
Dimensioni carattere	<FONT SIZE=?></FONT>	(valori da 1 a 7)
Modifica misura	<FONT SIZE="+\|-?"></FONT>	(valori da –3 a +3)
Colore	<FONT COLOR="#******"></FONT>
Tipo	<FONT FACE="Verdana"></FONT>	(A partire dalle versioni 4.x)

* ? = numeri
* | = oppure
* #****** = codice esadecimale dei colori

COLLEGAMENTI (link)

Link a un documento	<A HREF="URL"></A>
Definizione di un’àncora	<A NAME="nomeàncora"></A>
Link a un’àncora dello stessa pagina	<A HREF="#nomeàncora"></A>
Link a un’àncora di un’altra pagina	<A HREF="URL#nomeàncora"></A>
Link da visualizzare in altro frame	<A HREF="URL" TARGET="_nomedelframe"></A>
Link a indirizzo e-mail	<A HREF="mailto:indirizzo@posta.it"></A>

Al Tag per i link può essere aggiunto un attributo, se omesso di default è target="_self".

<A HREF="URL" TARGET="_SELF"></A> = Apre una pagina nella stessa finestra del browser

<A HREF="URL" TARGET="_BLANK"></A> = Apre il link in un’altra finestra

* URL = indirizzo Internet tipo http://www.google.it, oppure percorso del file inserito

IMMAGINI

Visualizzazione immagine	<IMG SRC="URL">
Allineamento immagine	<IMG SRC="URL" ALIGN=TOP\|BOTTOM\|MIDDLE\|LEFT\|RIGHT>
Immagine: testo in alternativa	<IMG SRC="URL" ALT="testo">
Dimensioni immagine (in pixel)	<IMG SRC="URL" WIDTH=? HEIGHT=?>
Dimensioni immagine(in % largh. e alt. pagina)	<IMG SRC="URL" WIDTH=?% HEIGHT=?%>
Bordo immagine (in pixel)	<IMG SRC="URL" BORDER=?>

* URL = indirizzo Internet tipo http://www.google.it/image.jpg, oppure percorso del file inserito
* | = oppure
* ? = numeri

FORMATO DI STRUTTURA
(le caratteristiche di visualizzazione dipendono dai browser)

Separazione	<DIV></DIV>
Separazione: allineamento	<DIV ALIGN=LEFT\|RIGHT\|CENTER \|JUSTIFY></DIV>	(sinistra\|destra\|centrato\|giustificato)
Citazione	<BLOCKQUOTE></BLOCKQUOTE>	(in genere visualizzato come blocco di testo rientrato)
Font molto grande	<BIG></BIG>
Font molto piccolo	<SMALL></SMALL>

* | = oppure

DIVISORI

Paragrafo (spesso il comando di chiusura viene omesso)	<P></P>
Paragrafo: allineamento	<P ALIGN=LEFT\|CENTER\|RIGHT></P>
Paragrafo: giustificazione (Supportato solo da Netscape)	<P ALIGN=JUSTIFY></P>
Interruzione riga (Singolo ritorno a capo)	<BR>
Riga orizzontale	<HR>
Riga orizzontale: allineamento	<HR ALIGN=LEFT\|RIGHT\|CENTER>
Riga orizzontale: spessore (in pixel)	<HR SIZE=?>
Riga orizzontale: larghezza (in pixel)	<HR WIDTH=?>
Riga orizzontale: % larghezza rispetto alla larghezza della pagina	<HR WIDTH="?%">
Riga orizzontale: piena (senza l'effetto ombra)	<HR NOSHADE>

* | = oppure
* ? = numeri

ELENCHI PUNTATI, NUMERATI, ECC.

Elenco puntato	<UL><LI></UL>	(<LI> prima di ogni elemento)
Elenco puntato compatto	<UL COMPACT></UL>
Tipo di puntatore	<UL TYPE=DISC\|CIRCLE\|SQUARE>	(per tutta la lista)
Tipo di puntatore	<LI TYPE=DISC\|CIRCLE\|SQUARE>	(questo e successivi)
Elenco numerato	<OL><LI></OL>	(<LI> prima di ogni elemento)
Elenco numerato compatto	<OL COMPACT></OL>
Tipo di numero	<OL TYPE=A\|a\|I\|i\|1>	(per tutta la lista)
Tipo di numero	<LI TYPE=A\|a\|I\|i\|1>	(questo e successivi)
Numero di partenza	<OL START=?>	(per tutta la lista)
Numero di partenza	<LI VALUE=?>	(questo e successivi)
Elenco di definizioni	<DL><DT><DD></DL>	(<DT>=termine, <DD>=definizione)
Elenco di definizioni compatto	<DL COMPACT></DL>
Elenco tipo Menu	<MENU><LI></MENU>	(<LI> prima di ogni elemento)
Elenco tipo Menu compatto	<MENU COMPACT></MENU>
Elenco tipo indirizzario	<DIR><LI></DIR>	(<LI> prima di ogni elemento)
Elenco tipo indirizzario compatto	<DIR COMPACT></DIR>

* | = oppure
* ? = numeri

TABELLE
(alcuni effetti sono supportati solo dalle versioni 4.x o superiori)

Inizio e fine tabella	<TABLE></TABLE>
Allineamento tabella	<TABLE ALIGN=LEFT\|RIGHT\|CENTER>	(a partire dalle versioni 4.x)
Spessore bordo tabella	<TABLE BORDER=?></TABLE>	(numero pixel; con '0' non è visibile)
Spazio tra le celle	<TABLE CELLSPACING=?>
Spazio nelle celle	<TABLE CELLPADDING=?>
Larghezza tabella (in pixel)	<TABLE WIDTH=?>
Larghezza % tabella	<TABLE WIDTH="?%">	(in percentuale rispetto alla pagina o alla tabella più esterna)
Colore di sfondo tabella	<TABLE BGCOLOR="#******"></TABLE>
Riga	<TR></TR>
Allineamento della riga (orizzontale e verticale)	<TR ALIGN=LEFT\|RIGHT\|CENTER VALIGN=TOP\|MIDDLE\|BOTTOM>
Cella	<TD></TD>	(deve essere all'interno di una riga)
Allineamento della cella (orizzontale e verticale)	<TD ALIGN=LEFT\|RIGHT\|CENTER VALIGN=TOP\|MIDDLE\|BOTTOM>
Senza interruzione	<TD NOWRAP>
Unione colonne	<TD COLSPAN=?>
Unione righe	<TD ROWSPAN=?>
Larghezza celle (in pixel)	<TD WIDTH=?>
Larghezza % celle	<TD WIDTH="?%">	(in percentuale risp. alla tabella)
Colore di sfondo della cella	<TD BGCOLOR="#******">

* | = oppure
* ? = numeri
* #****** = codice esadecimale dei colori

FRAME
(definizione e gestione di specifiche sezioni della finestra)

Documento Frame	<FRAMESET></FRAMESET>	(al posto di <BODY>)
Impostazione frame div. Orizz.	<FRAMESET ROWS=?,*></FRAMESET>	(altezza in pixel o %)
Larghezza dei frame div. Vert.	<FRAMESET COLS=*,?></FRAMESET>	(larghezza in pixel o %)
Bordo fra i frame	<FRAMESET FRAMEBORDER="yes \| no"></FRAMESET>	(Sì \| No)
Larghezza dei bordi fra i frame	<FRAMESET BORDER=?>
Colore del bordo fra i frame	<FRAMESET BORDERCOLOR="#******">
Spaziatura fra i frame	<FRAMESET FRAMESPACING=?></FRAMESET>
Definizione del Frame	<FRAME>	(contenuto di una sezione)
Documento da visualizzare	<FRAME SRC="URL">
Denominazione	<FRAME NAME="***"\|_blank\|_self\|_parent\|_top>
Larghezza dei margini	<FRAME MARGINWIDTH=?>	(margine destro e sinistro)
Altezza dei margini	<FRAME MARGINHEIGHT=?>	(margine alto e basso)
Barra di scorrimento	<FRAME SCROLLING="YES\|NO\|AUTO">	(sì \| no \| automatico)
Dimensione non modificabile	<FRAME NORESIZE>
Presenza del bordo	<FRAME FRAMEBORDER="yes\|no">
Colore del bordo	<FRAME BORDERCOLOR="#******">
Contenuto in assenza di frame	<NOFRAMES></NOFRAMES>	(visualizzato dai browser che non supportano i frame)
Frame interno	<IFRAME></IFRAME>	(con gli stessi attributi di FRAME)
Frame interno: dimensioni	<IFRAME WIDTH=? HEIGHT=?></IFRAME>
Frame interno: dimensioni %	<IFRAME WIDTH="?%" HEIGHT="?%"></IFRAME>

* | = oppure
* ? = numeri
* URL = indirizzo Internet tipo http://www.google.it, oppure percorso del file inserito
* #****** = codice esadecimale dei colori

VARI

Commenti (non visualizzati dal browser)	<!-- testo del commento -->
Dichiarazione tipo di file (primissima riga)	<!doctype html public "-//w3c//dtd html 4.0 transitional//en">

Per facilitare l'indicizzazione dei motori di ricerca (*) utilizzare i seguenti tag
(da inserire nella testata)

Autore del documento html	<meta name="Author" content="nomedellautore">
Descrizione dei contenuti	<meta name="Description" content="testodelladescrizione">
Parole-chiave per ricerche	<meta name="Keywords" content="parole, chiave, da, inserire">

* Vedi anche Generatore di Meta Tags.

CARATTERI SPECIALI
(devono essere digitati in caratteri minuscoli)

Vedi Caratteri Speciali HTML.

I COLORI NELL'HTML

Vedi Codice Esadecimale

NOTE FINALI

Le coppie di tag vanno intese come delle parentesi che si aprono e si chiudono e tutto il contenuto deve risiedere all'interno.
Per avere esempi pratici di utilizzo dei codici quale migliore scuola dei siti realizzati da professionisti? Quando vedete una pagina Web su Internet e vi piacerebbe realizzarne una così, andate a curiosare nel codice html: è il modo migliore per apprenderlo bene (con Internet Explorer usate il tasto destro del mouse -> HTML oppure Menu Visualizza -> HTML; con Mozilla Firefox: tasto destro del mouse -> Visualizza Sorgente Pagina).

pagina 1 2