Home Page + Webmaster: Risorse e servizi gratuiti per webmaster.

GUIDA HTML

Sommario

Generale: Struttura di base di un documento HTML
Formattazione: Dal grassetto all'allineamento, dal colore all'impostazione della grandezza del testo
Collegamenti (Link, Hyperlink, Ancore): Capire e strutturare i link interni ed esterni dei documenti ipertestuali
Immagini: Inserimento di immagini, loro dimensione e risoluzione video
Mappe: definizione: Creare immagini intelligenti!!! , tipi di mappature e programmi di utilità
Segni di paragrafo e argomento
Spaziature e formattazioni
Liste: Liste libere, elenchi puntati e numerati, liste composte
Sfondi e colori: Attributi colore del documento, programmi per gestire colori RGB
Caratteri speciali: Tabelle di conversione e di consultazione per caratteri latin e simboli di utilità generica
Moduli , Schede o form: Tutti i tag per la creazione di form complessi e di acquisizione dati utente
Tabelle: Uso delle tabelle per presentazione dati e per impaginazioni di alto livello grafico
Frames: Divisione e gestione della finestra del browser in porzioni
Target (destinazione dei link): Gestione della destinazione dell' output proveniente da link o processi server come risposte di form
Varie e curiosità: Comandi non classificabili nelle sezioni precedenti
Condizioni d'uso del manuale: Tutto quello che dovete sapere per un corretto uso di questo manuale e i diritti di distribuzione

G E N E R A L E
(impostazioni obbligatorie del documento ipertestuale)

Tipo di documento	<HTML></HTML>	(inizio e fine del file, tag obbligatorio)
Testata	<HEAD></HEAD>	(descrizioni varie; come il titolo e i Meta Name)
Titolo documento	<TITLE></TITLE>	(nome del documento; contenuto in Head)
Contenuto	<BODY></BODY>	(corpo del file)

F O R M A T T A Z I O N E D E L T E S T O

Titoli di paragrafo e capitoli	<H?></H?>	(sono possibili 6 diversi livelli di grandezza ed importanza h1,h2, etc.)
Allineamento titolo	<H? ALIGN=LEFT\|CENTER\|RIGHT></H?>
Divisione di un blocco	<DIV></DIV>	usato per porzioni di testo o paragrafi
Allineamento del blocco	<DIV ALIGN=LEFT\|RIGHT\|JUSTIFY\|CENTER></DIV>
Formattazioni particolari
Citazioni	<BLOCKQUOTE></BLOCKQUOTE>	rientrato
Evidenziato	<EM></EM>	corsivo
Molto marcato	<STRONG></STRONG>	neretto
Citazione	<CITE></CITE>	corsivo
Codice programm.	<CODE></CODE>	programmi
Esempio	<SAMP></SAMP>
Immissione da tastiera	<KBD></KBD>	carattere a spaziatura fissa
Variabile	<VAR></VAR>
Definizione	<DFN></DFN>
Indirizzo dell'autore	<ADDRESS></ADDRESS> corsivo
Font grande	<BIG></BIG>
Font piccolo	<SMALL></SMALL>
Grassetto	<B></B>
Corsivo	<I></I>
Sottolineato	<U></U>	(non più supportato)
Depennato (Strikeout)	<S></S>
Pedice	<SUB></SUB>
Apice	<SUP></SUP>
Font non scalabile	<TT></TT>	(spaziatura fissa)
Preformattato	<PRE></PRE>	(mantiene gli allineamenti originali)
Larghezza	<PRE WIDTH=?></PRE>	(in caratteri)
Centrato	<CENTER></CENTER>	(sia per testo che immagini)
Intermittente	<BLINK></BLINK>	(il comando più ridicolo)
Specifica il tipo di Font	<FONT FACE="Verdana,Verdana,Helvetica,Geneva">	HTML3
Grandezza del Font	<FONT SIZE=?></FONT>	(valori da 1 a 7)
Cambia la grandezza del font	<FONT SIZE=+\|-?></FONT>
Grandezza font di base	<BASEFONT SIZE=?>	(da 1 a 7; il valore di default e' 3)
Colore del Font	<FONT Color="#$$$$$$"></FONT>

C O L L E G A M E N T I N E L T E S T O E A D A L T R I F I L E

Collegamento di base	<A HREF="URL"></A>
link ad un' ancora nel file	<A HREF="URL#$$$$"></A>	(in altro file)
	<A HREF="#$$$$"></A>	(nello stesso file)
ad un file indicando la destinazione	<A HREF="URL" TARGET="$$$$"></A>	(nello stesso file)
Definizione di ancora nel file	<A NAME="$$$$"></A>

I M M A G I N I

Inserimento di una immagine	<IMG SRC="URL">
Allineamento	<IMG SRC="URL" ALIGN=TOP\|BOTTOM\|MIDDLE>
Allineamento	<IMG SRC="URL" ALIGN=LEFT\|RIGHT\|TEXTTOP\|ABSMIDDLE\|BASELINE>
testo alternativo	<IMG SRC="URL" ALT="$$$$">	(quando non viene visualizzata l'immagine si vedra' il testo carattere)
Mappa navigabile	<IMG SRC="URL" ISMAP>	(richiede un script)
Mappa navigabile client-side o locale	<IMG SRC="URL" USEMAP="URL#$$$$">
Dimensioni	<IMG SRC="URL" WIDTH="?" HEIGHT="?">	(in pixel)
Bordi	<IMG SRC="URL" BORDER=?>	(in pixel)
Bassa risoluzione	<IMG SRC="URL" LOWSRC="URL">
Spaziatura	<IMG SRC="URL" HSPACE=? VSPACE=?>

M A P P E
Old: occorre conoscere in molti casi la directory sul server per posizionare il file .map di definizione
Aggiornamento: Usando un tipo di dichiarazione Client-Side il file .map non è più necessario. La definizione di mappa può essere dichiarata all'interno del file documento HTML. Per la dichiarazione si usa il codice <MAP NAME="nome della mappa"> </MAP> come indicato sotto.

Specifica della mappa	<MAP NAME="$$$$";></MAP>	(descrive la mappa)
Sezione mappa	<AREA SHAPE="RECT\|CIRCLE\|POLYGON" COORDS=",,," HREF="URL"\|NOHREF>
	Consigliamo un programma tipo MapThis per la creazione del file .map e per la specifica delle coordinate dei segmenti

S E G N I D I P A R A G R A F O E D A R G O M E N T O

Paragrafo	<P></P>	(lascia due righe bianche)
Allineamento	<P ALIGN=LEFT\|CENTER\|RIGHT></P>
Interruzione riga	<BR>	(ritorno a capo)
Riga orizzontale	<HR>
Parametri:
Allineamento	<HR ALIGN=LEFT\|CENTER\|RIGHT>
Spessore	<HR SIZE=?>	(in pixel)
Larghezza	<HR WIDTH=?>	(in pixel)
in %	<HR WIDTH=%>	(come percentuale della larghezza della pagina)
No effetto 3D	<HR NOSHADE>

L I S T E
Elenchi semplici, composti, numerati o puntati

Liste libere	<UL><LI></UL>	(<LI> prima di ogni elemento)
Punto	<UL TYPE=DISC\|CIRCLE\|SQUARE>	( valido per tutta la lista)
	<LI TYPE=DISC\|CIRCLE\|SQUARE>	(valido per questo e i successivi)
Liste numerate	<OL><LI></OL>	(<LI> prima di ogni elemento)
Tipo di numero	<OL TYPE=A\|a\|I\|i\|1>	(valido per per tutta la lista)
	<LI TYPE=A\|a\|I\|i\|1>	(valido per questo e i successivi)
Numero di partenza	<OL VALUE=?>	(per tutta la lista)
<LI VALUE=?>	(questo e successivi)
Lista di definizioni	<DL><DT><DD></DL>	Molto usata nella definizione dei menu
Se date un'occhiata al sorgente di questa guida avrete un valido esempio della Lista di Definizione :-)

S F O N D I E D E F I N I Z I O N E D I C O L O R E

Colore di sfondo	<BODY BGCOLOR="#$$$$$$">	(in ordine di RGB)
colore dei collegamenti	<BODY LINK="#$$$$$$">
colore dei collegamenti visitati	<BODY VLINK="#$$$$$$">
colore del testo	<BODY TEXT="#$$$$$$">
colore del collegamento in corso	<BODY ALINK="#$$$$$$">
immagine di sfondo	<BODY BACKGROUND="URL">

Clicca per avere l'immagine dell' ELENCO DEI COLORI

C A R A T T E R I S P E C I A L I
Il seguente elenco non è completo ma comprende i caratteri maggiormente usati nei documenti HTML per usi particolari. Per maggiori informazioni consiglio di consultare le pagine del CERN.

carattere speciale	&#?; (? indica il codice ISO)	carattere speciale	&#?; (? indica il codice ISO)
<	<	Ograve Ò	&Ograve
>	>	Ocirc Ô	&Ocirc
&	&	Otilde Õ	&Otilde
"	"	Ouml Ö	&Ouml
Aacute Á	Á	Oslash Ø	&Oslash
Agrave À	&Agrave
Acirc Â	&Acirc	Uacute Ú	&Uacute
Atilde Ã	&Atilde	Ugrave Ù	&Ugrave
Aring Å	&Aring	Ucirc Û	&Ucirc
Auml Ä	&Auml	Uuml Ü	&Uuml
AElig Æ	&AElig	Yacute Ý	&Yacute
Ccedil Ç	&Ccedil	THORN Þ	&THORN
Eacute É	&Eacute	aelig æ	&aelig
Egrave È	&Egrave	eacute é	&eacute
Ecirc Ê	&Ecirc	egrave è	&egrave
Euml Ë	&Euml	ecirc ê	&ecirc
Iacute Í	&Iacute	euml ë	&euml
Igrave Ì	&Igrave	reg ®	® Registered TradeMark
Icirc Î	&Icirc	copy ©	© Copyright
Iuml Ï	&Iuml	trade ™	™ TradeMark
ETH Ð	&ETH	nbsp	Non breaking space
Ntilde Ñ	&Ntilde
Oacute Ó	&Oacute

M O D U L I
Per ottenere risposte ottimali occorre uno script di tipo cgi sul server oppure si puo' usare il mailto: abbinato al POST
Script di tipo mail si possono trovare facilmente e gratuitamente in vari server Internet, con allegata documentazione per l'uso.

Definizione	<FORM ACTION="URL" METHOD=GET\|POST></FORM>
Upload di file	<FORM ENCTYPE="multipart/form-data"></FORM>
Campo di immissione	<INPUT TYPE="TEXT\|PASSWORD\|CHECKBOX\|RADIO\| IMAGE\|HIDDEN\|SUBMIT\|RESET">
Nome campo	<INPUT NAME="$$$$">
Valore del campo	<INPUT VALUE="$$$$">
Lunghezza massima	<INPUT MAXLENGTH=?>	(in caratteri)
Selezionato di default	<INPUT CHECKED>	(checkbox e radio)
Grandezza	<INPUT SIZE=?>
Selezione elenco delle opzioni	<SELECT></SELECT>
Nome campo	<SELECT NAME="$$$$"></SELECT>
Numero opzioni	<SELECT SIZE=?></SELECT>
Selezione multipla	<SELECT MULTIPLE>	(per selezionare più di 1 elemento)
Opzioni	<OPTION>	(elementi che possono essere selezionati)
Opzione di default	<OPTION SELECTED>
Finestra di immissione	<TEXTAREA ROWS=? COLS=?></TEXTAREA>
Nome del campo	<TEXTAREA NAME="$$$$"></TEXTAREA>
A capo automatico in diversi modi	<TEXTAREA WRAP=OFF\|VIRTUAL\|PHYSICAL></TEXTAREA>

T A B E L L E

Definizione tabella	<TABLE></TABLE>
Bordo	<TABLE BORDER></TABLE>	(per visualizzare il bordo)
Si puo' impostare lo spessore del bordo	<TABLE BORDER=?></TABLE>	(per indicare lo spessore)

Spazio tra le celle	<TABLE CELLSPACING=?>
Spazio tra testo e bordo	<TABLE CELLPADDING=?>
Larghezza tabella	<TABLE WIDTH=?>	(in pixel)
Larghezza tabella in %	<TABLE WIDTH=%>	(percentuale della pagina)
Riga	<TR></TR>
Allineamento	<TR ALIGN=LEFT\|RIGHT\|CENTER VALIGN=TOP\|MIDDLE\|BOTTOM>
Campo dati	<TD></TD>	(definita dentro una definizone di riga)
Allineamento	<TD ALIGN=LEFT\|RIGHT\|CENTER VALIGN=TOP\|MIDDLE\|BOTTOM>
No interruzione	<TD NOWRAP>
Colonne da occupare	<TD COLSPAN=?>
Righe da occupare	<TD ROWSPAN=?>
Larghezza desiderata	<TD WIDTH=?>	(in pixel)
Larghezza desiderata in %	<TD WIDTH=%>	(percentuale della tabella)
Titolo della colonna	<TH></TH>	(come <TD>, ma in neretto e centrata)
Legenda della tabella	<CAPTION></CAPTION>
Allineamento	<CAPTION ALIGN=TOP\|BOTTOM>	(sopra o sotto la tabella)

F R A M E
Divisione e gestione di parti della finestra del browser.

Documento FRAME	<FRAMESET></FRAMESET>	(al posto di <BODY>)
altezza in righe	<FRAMESET ROWS=,,,></FRAMESET>	(pixel o %)
altezza in righe	<FRAMESET ROWS=*></FRAMESET>	(* = misura relativa)
larghezza in colonne	<FRAMESET COLS=,,,></FRAMESET>	(pixel o %)
larghezza in colonne	<FRAMESET COLS=*></FRAMESET>	(* = misura relativa)
Definizione	<FRAME>	(contenuto di ogni singolo quadro)
Gestione dei bordi	<FRAME BORDER=Yes \| No Bordercolor="RGB">	Presente sia in FRAMES che in FRAMESET
Bordo in Frameset	<FRAMESET Bordercolor="canale RGB">
Gestione dei Margini	<FRAME MARGIN="xx,yy">
Visualizza documento	<FRAME SRC="URL">
Nome del frame	<FRAME NAME="$$$$"\|_blank\|_self\|_parent\|_top>
Larghezza margine	<FRAME MARGINWIDTH=?>	(margine destro e sinistro)
Altezza margine	<FRAME MARGINHEIGHT=?>	(margine alto e basso)
Barra di scorrimento?	<FRAME SCROLLING="YES\|NO\|AUTO>
Misure non modificabili	<FRAME NORESIZE>
Contenuto in assenza di frame	<NOFRAMES></NOFRAMES>	(per i browser che non supportano FRAME)

T A R G E T (DESTINAZIONE DEI LINK)

target in una definiz. di ancora	< A HREF="url" TARGET="nome_finestra">Ancora di destinazione </A>	Visualizza il link nella finestra indicata nel target
target di base	< BASE TARGET="nome_finestra">	Imposta di default la finestra indicata nel target
target in una mappa	< AREA SHAPE="shape" COORDS="x,y,..."> TARGET="finestra_destinazione">	Visualizza il link risulatto dalla mappa nella finestra indicata dal target
target in un form	< FORM ACTION="url" TARGET="nome_finestra">	Visualizza il risultato del form nella finestra indicata nel target
Target Speciali	TARGET="_blank"	Visualizza il link in nuova finestra vuota
Target Speciali	TARGET="_self"	link nella stessa finestra
Target Speciali	TARGET="_parent"	link nella finestra parente. Se non esiste diventa come _self
Target Speciali	TARGET="_top"	link nella stessa finestra ma a tutto schermo

V A R I E

Mulicolonne	<MULTICOL COLS="$$" GUTTER="$$" WIDTH="$$">	Imposta più colonne definendo il numero di colonne, la spaziatura e la larghetta fissa o in percentuale

Relazioni	<LINK REV="$$$$" REL="$$$$" HREF="URL">	(nella testata)
Meta Informazioni	<META>	(deve essere nella testata)
Commenti	<!-- $$$$ -->	(non visualizzati dal browser)
Prologo	<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
Prologo	<!DOCTYPE HTML PUBLIC "-//W3O//DTD W3 HTML 3.0//EN">
Prologo	<!DOCTYPE HTML PUBLIC "-//microsoft corp.//DTD HTML //EN">
Ricerca	<ISINDEX>	(indica che è un documento collegato ad un database indicizzato in cui è possibile fare ricerche)
Domanda	<ISINDEX PROMPT="$$$$">	(testo da anteporre alla casella di inserimento)
Invio ricerca	<A HREF="URL?$$$$"></a>	(usare il punto di domanda)
URL base di questo file	<BASE HREF="URL">	(deve essere nella testata)

LE CATEGORIE DI WEBMASTER Add Url - Affiliazioni - Applet Java - Barre - Banner Swish - Bottoni - Chat Webmaster - Contatori Accessi - Corso Web Marketing - Directory Italiane - Directory Straniere - Domini - Forum - Frecce - Frame - Frontpage - Google Adsense - Google Pagerank - Google Search - Guadagnare con un sito - Guestbook - Guida Java - Html - Html Editor - Icone - Meta Tags - Midi Web - Mini Icone - Msn Search - News - Paint Sho Pro - Photoshop - Perl - Posizionamento Sito - Programmi Grafica - Programmi Webmaster - Promozione Sito - Raccolta Java Script - Realizzazione Siti - Scambio Banner - Sfondi - Spazio Web - Template Frontpage - Template Swish - Webmaster Tools - Ws Ftp - Yahoo Search