|
|
 |
.:: PER IL TUO SITO - GUIDA HTML ::.
|
 |
| |
Questa guida HTML permette a CHIUNQUE di creare o modificare un Sito Web senza spese e in poco tempo.
Ci sono programmi apposta (vedi sezione "Programmi per Webmaster") che facilitano la creazione e modifica di Siti Web ma per modifiche mirate e precise bisogna per forza conoscere un minimo di HTML.
|
|
|
|
|
.::
Guida HTML ::.
|
|
| |
| <A> ... </A> |
Questo TAG va inserito tra il TAG <BODY>.
Permette di creare dei collegamenti ipertestuali verso la stessa pagina, verso una pagina differente dello stesso sito o di un sito esterno, verso un indirizzo e-mail, verso un file immagine, documenti scaricabili ecc.
<BODY>
<A HREF="nome_collegamento.html">
nome collegamento
</A>
</BODY>
Apparirà così:
nome collegamento
Gli attributi vanno inseriti in questo modo:
<A nomeattributo="valore">
possono essere più di uno e sono i seguenti:
HREF
L'indirizzo del collegamento da aprire.
<A HREF="nome_pagina.html">
In questo esempio il percorso del collegamento contiene solo il nome della pagina di destinazione perché dato che si trova nella stessa cartella dove si trova questa pagina, non bisogna specificarla.
Se invece si trova in una cartella superiore a quella della pagina si deve usare il comando ../ che significa "vai alla cartella superiore":
<A HREF="../nome_pagina.html"> una cartella superiore
<A HREF="../../nome_pagina.html"> due cartelle superiori
<A HREF="../cartella2/nome_pagina.html"> una cartella superiore, nella cartella "cartella2"
<A HREF="nomesottocartella/nome_pagina.html"> va nella sottocartella.
ATTENZIONE: La destinazione del collegamento, qualunque essa sia, deve trovarsi tassativamente in Internet.
TARGET
Specifica la destinazione del collegamento.
<A HREF="nome_collegamento.html" TARGET="_blank">
nome collegamento
</A>
Le possibilità sono:
_blank in una nuova finestra
_frame in un FRAME, dove "frame" è il nome del frame
_self nella stessa pagina (impostazione di default)
_top nella stessa pagina, ignorando eventuali frames.
COLLEGAMENTO ESTERNO:
È anche possibile impostare il collegamento ad una pagina esterna al sito, utilizzando il comando http:// seguito dal percorso completo della pagina:
<A HREF="http://www.nome-del-sito.it/nome_pagina.html">
COLLEGAMENTO A UNA PARTE INTERNA DELLA PAGINA:
È anche possibile impostare il collegamento ad una parte interna della pagina stessa, utilizzando il comando # seguito dal nome dell'ancora:
<A HREF="#nome_ancora">
COLLEGAMENTO ALL'INIZIO DELLA PAGINA:
È anche possibile impostare il collegamento per tornare all'inizio della pagina stessa, utilizzando il comando # seguito da un nome di ancora inesistente, ad esempio top:
<A HREF="#top">
Prova
COLLEGAMENTO AL PROGRAMMA DI POSTA ELETTRONICA:
È anche possibile impostare il collegamento per aprire il programma di posta elettronica predefinito dell'utente, per inviare una e-mail all'indirizzo che specifichiamo in tale collegamento.
<A HREF="mailto:email@email.it">
Prova E-mail
COLLEGAMENTO AD UN FILE SPECIFICO:
È anche possibile impostare il collegamento per aprire un file specifico come un immagine, un file scaricabile o altro.
<A HREF="nome_del_file.ext">
Dove .ext è l'estensione del file, che ne identifica il tipo.
.gif, .jpg, .bmp, .png sono file immagine. Viene aperta normalmente dal browser.
.zip, .rar sono file archivio che contengono al loro interno file compressi. Devono essere prima scaricati per essere visualizzati.
.exe è un file eseguibile che per ragioni di sicurezza deve essere prima scaricato per essere eseguito.
.pdf è un file creato con Adobe Acrobat Reader che può essere visualizzato direttamente nel browser se si dispone del relativo plug-in.
.doc è un file creato con Microsoft Word che può essere visualizzato direttamente nel browser se si dispone del relativo plug-in.
.txt è un file di testo semplice che può essere visualizzato direttamente nel browser.
.??? per ogni altro tipo di file il comportamento del browser dipende dai plug-in installati.
TITLE
Etichetta che viene visualizzata restando con il mouse sopra il link.
<A TITLE="Etichetta collegamento">
resta sopra questo link per provare
HREFLANG
Indica la lingua del documento di destinazione del collegamento.
Il suo utilizzo migliora l'accessibilità del Sito ed aiuta nel posizionamento sui motori di ricerca.
<A HREFLANG="it">
COLORARE I LINK
Per colorare un link indipendentemente dal colore impostato nella pagina bisogna usare il tag FONT all'interno del tag A:
<A attributi...>
<FONT color="orange">
testo del collegamento
</FONT>
</A>
collegamento colorato di arancione anche se nella pagina il colore impostato è il blu
TAG correlati:
BASE: Destinazione dei link
FONT: Formattare il testo
|
Torna su
| <AREA> |
Questo TAG va inserito tra il TAG <MAP>.
Imposta le coordinate delle aree sensibili per creare dei collegamenti sull'immagine.
Ogni tag <AREA> imposta una sola area sensibile.
<IMG SRC="immaginemappata.gif" USEMAP="#MappaBersaglio">
<MAP NAME="MappaBersaglio" ID="MappaBersaglio">
<AREA SHAPE="circle" coords="55, 54, 8">
</MAP>
Per poter associare correttamente il codice per mappare alla relativa immagine, i valori indicati in verde nel codice sopracitato devono essere tassativamente IDENTICI!
In questo esempio solo il centro rosso del bersaglio è un collegamento.
Gli attributi vanno inseriti in questo modo:
<AREA nomeattributo="valore">
possono essere più di uno e sono i seguenti:
SHAPE, COORDS
SHAPE imposta la forma dell'area sensibile del collegamento.
COORDS imposta le coordinate della forma.
<AREA SHAPE="circle" COORDS="55, 54, 8">
Le forme supportate sono:
rect <AREA SHAPE="rect" COORDS="x, y, x, y">
Per impostare una forma quadrata, impostando le coordinate in coords:
(nel seguente ordine)
Coordinate dell'angolo alto sinistro del quadrato:
x distanza in pixel dal punto alto sinistro dell'immagine;
y distanza in pixel dal punto alto sinistro dell'immagine;
Coordinate dell'angolo basso destro del quadrato:
x distanza in pixel dal punto alto sinistro dell'immagine;
y distanza in pixel dal punto alto sinistro dell'immagine;
circle <AREA SHAPE="circle" COORDS="x, y, r">
Per impostare una forma circolare, impostando le coordinate in coords:
(nel seguente ordine)
x distanza in pixel dal punto alto sinistro dell'immagine;
y distanza in pixel dal punto alto sinistro dell'immagine;
r lunghezza in pixel del raggio del cerchio.
poly <AREA SHAPE="poly" COORDS="x, y, x, y, x, y, x, y">
Per impostare una forma poligonale, impostando le coordinate in coords:
Per ogni angolo del poligono specificare:
x distanza in pixel dal punto alto sinistro dell'immagine;
y distanza in pixel dal punto alto sinistro dell'immagine;
Questo tag supporta anche tutti gli attributi del tag A.
TAG correlati:
MAP: Mappa immagine
IMG: Le immagini
A: I collegamenti ipertestuali
|
Torna su
| <B> ... </B> |
Questo TAG va inserito tra il TAG <BODY>.
Imposta il formato grassetto per tutto il testo compreso tra questo tag.
<BODY>
<B>
Testo in grassetto
</B>
</BODY>
|
Torna su
Torna su
| <BASEFONT> |
Questo TAG va inserito tra il TAG <BODY>.
Imposta dimensione, colore o tipo di carattere da utilizzare per i caratteri della pagina.
<BODY>
<BASEFONT SIZE="3" FACE="verdana" COLOR="#00CCFF">
</BODY>
Gli attributi vanno inseriti in questo modo:
<BASEFONT nomeattributo="valore">
possono essere più di uno e sono i seguenti:
SIZE
Imposta la grandezza del testo.
<BASEFONT SIZE="5">
Il suo valore è di default 3 e supporta un valore minimo di 1 e un massimo di 7.
COLOR
Imposta il colore del testo.
<BASEFONT COLOR="#00CCFF">
FACE
Imposta il carattere del testo.
<BASEFONT FACE="verdana">
L'utilizzo di questo TAG è ormai obsoleto dato che il tutto può essere impostato più semplicemente utilizzando un foglio di stile.
TAG correlati:
FONT: formattare il testo
|
Torna su
Torna su
| <BODY> ... <⁄BODY> |
Questo TAG va inserito tra il TAG <HTML>, dopo la chiusura del TAG HEAD.
Tutto quello che viene inserito qui ha lo scopo di essere visualizzato nella pagina: testo, immagini, video, animazioni, colori, tabelle...
ATTENZIONE: Questo tag va inserito UNA SOLA VOLTA nella pagina.
<HTML>
<HEAD>
</HEAD>
<BODY>
testi...
immagini...
e tanto altro...
</BODY>
</HTML>
Gli attributi del tag BODY vanno inseriti in questo modo:
<BODY nomeattributo="valore">
possono essere più di uno e sono i seguenti:
BACKGROUND
Imposta un'immagine come sfondo della pagina che viene ripetuta fino a riempirla. Supporta i file grafici gif, jpg, png, bmp.
<BODY background="nome_file_immagine.jpg">
<BODY background="http://www.nomedelsito.it/indirizzo_immagine.jpg">
BGCOLOR
Imposta un colore a tinta unita come sfondo della pagina e può essere indicato col suo nome in lingua inglese o con il rispettivo codice esadecimale o con il codice RGB.
<BODY bgcolor="blue">
<BODY bgcolor="#0000FF">
LINK
Imposta il colore dei link HTML presenti nella pagina non ancora visitati.
<BODY link="#0000FF">
VLINK
Imposta il colore dei link HTML presenti nella pagina già visitati.
<BODY vlink="#0000FF">
ALINK
Imposta il colore dei link HTML presenti nella pagina durante il Click.
<BODY alink="#0000FF">
TEXT
Imposta il colore del testo presente in tutta la pagina.
<BODY text="#0000FF">
TOPMARGIN, BOTTOMMARGIN, LEFTMARGIN, RIGHTMARGIN
Imposta la distanza in pixel:
TOPMARGIN dal margine superiore
BOTTOMMARGIN dal margine inferiore
LEFTMARGIN dal margine sinistro
RIGHTMARGIN dal margine destro
<BODY toptmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">
Impostando i valori a 0 si eliminano i margini della pagina, guadagnando così spazio per riempire tutta la pagina.
Clicca qui per consultare i codici dei colori..
|
Torna su
| <BR> |
Questo TAG va inserito tra il TAG <BODY>.
Questo tag è importantissimo in quanto imposta la fine della riga dove viene inserito e tutto il contenuto della pagina viene automaticamente visualizzato a capo..
<BODY>
contenuto...<BR>
continuo del contenuto...
</BODY>
<BODY>
contenuto...<BR><BR>
continuo del contenuto...
</BODY>
Da notare che se utilizzato due volte consecutive permette di creare dei paragrafi o semplicemente spostare maggiormente i contenuti per una migliore impaginazione.
|
Torna su
Torna su
| <CAPTION> ... <⁄CAPTION> |
Questo TAG va inserito subito dopo il TAG <TABLE>.
Imposta la didascalia della tabella.
Esempio:
<TABLE border="1">
<CAPTION><B>Didascalia tabella<⁄B></CAPTION>
<TR>
<TD>colonna 1 della riga 1
</TD>
<TD>colonna 2 della riga 1
</TD>
</TR>
<TR>
<TD>colonna 1 della riga 2
</TD>
<TD>colonna 2 della riga 2
</TD>
</TR>
</TABLE>
Produrrà questo risultato:
Didascalia tabella| colonna 1 della riga 1 | colonna 2 della riga 1 | | colonna 1 della riga 2 | colonna 2 della riga 2 |
Gli attributi vanno inseriti in questo modo:
<CAPTION nomeattributo="valore">
possono essere più di uno e sono i seguenti:
ALIGN
Imposta l'allineamento della didascalia rispetto alla tabella e consente le seguenti possibilità: Center centrato, Left sinistra, Right destra, Top alto e Bottom in basso.
Questa è una didascalia con align="top"
| contenuti della tabella |
Questa è una didascalia con align="bottom"
| contenuti della tabella |
TAG correlati:
TABLE: la tabella
|
Torna su
| <CENTER> ... <⁄CENTER> |
Questo TAG va inserito tra il TAG <BODY>.
Tutto ciò che si trova tra questo tag viene allineato centralmente.
<BODY>
contenuto...
<CENTER>
contenuto centrato
</CENTER>
...contenuto
</BODY>
<BODY>
contenuto...<BR><BR>
continuo del contenuto...
</BODY>
Da notare che se utilizzato due volte consecutive permette di creare dei paragrafi o semplicemente spostare maggiormente i contenuti per una migliore impaginazione.
|
Torna su
| <COMMENT> ... </COMMENT> |
Questo TAG va inserito tra il TAG <BODY>.
Tutto ciò che si trova tra questo TAG non viene visualizzato e neanche letto dal browser.
<BODY>
<COMMENT>
Qui posso scrivere tutto quello che mi serve per poter effettuare al meglio future modifiche al documento...
</COMMENT>
</BODY>
Lo stesso risultato si ottiene anche con i tags <!-- ... -->
<BODY>
<!--
Qui posso scrivere tutto quello che mi serve per poter effettuare al meglio future modifiche al documento...
-->
</BODY>
|
Torna su
| <DIR> ... </DIR> |
Questo TAG va inserito tra il TAG <BODY>.
Crea un elenco con un rientro sinistro e uno spazio prima e dopo.
Ogni <LI> crea una nuova voce dell'elenco. Forse identico a MENU.
<BODY>
<DIR>
<LI>uno
<LI>due
<LI>tre
<LI>quattro
<LI>...
</DIR>
</BODY>
uno
due
tre
quattro
...
TAG correlati:
DL: gli elenchi
MENU: gli elenchi
OL: gli elenchi
UL: gli elenchi
|
Torna su
| <DIV> ... </DIV> |
Questo TAG va inserito tra il TAG <BODY>.
Questo speciale tag viene utilizzato per formattare tutto il suo contenuto indipendentemente dal resto della pagina.
<BODY>
<DIV align="right">
Questo testo viene allineato a destra anche se è sotto l'effetto del tag CENTER.
</BODY>
Gli attributi vanno inseriti in questo modo:
<DIV nomeattributo="valore">
possono essere più di uno e alcuni supportati sono i seguenti:
ALIGN
Imposta l'allineamento orizzontale nella pagina e consente le seguenti possibilità: Center centrato, Left sinistra e Right destra.
STYLE
Imposta la struttura grafica del contenuto di questo TAG.
<DIV STYLE="position:absolute; top:0px;">
Questo esempio forza il contenuto ad essere visualizzato il massimo possibile in alto alla pagina.
Per conoscere gli altri attributi supportati basta effettuare una ricerca tramite un motore di ricerca qualsiasi cercando "guida div html".
|
Torna su
| <DL> ... </DL> |
Questo TAG va inserito tra il TAG <BODY>.
Crea un elenco con un rientro sinistro e uno spazio prima e dopo.
Inoltre offre la possibilità di creare dei titoli alle voci dell'elenco.
<DL> imposta l'inizio dell'elenco.
<DT> Crea una voce dell'elenco spostata maggiormente verso il margine sinistro, per poter creare un titolo.
<DD> Crea una voce dell'elenco spostata maggiormente verso il centro, per poter creare la descrizione.
</DL> imposta la fine dell'elenco.
<BODY>
<DL>
<DT>titolo uno
<DD>contenuto uno
<DT>titolo due
<DD>contenuto due
<DT>titolo tre
<DD>contenuto tre
<DT>titolo quattro
<DD>contenuto quattro
<DT>...
<DD>...
</DL>
</BODY>
- titolo uno
- contenuto uno
- titolo due
- contenuto due
- titolo tre
- contenuto tre
- titolo quattro
- contenuto quattro
- ...
- ...
TAG correlati:
MENU: gli elenchi
DIR: gli elenchi
OL: gli elenchi
UL: gli elenchi
|
Torna su
| <!DOCTYPE> |
Questo TAG va inserito ancor prima del TAG <HTML>.
Consente che il documento sia identificato come HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Il suo utilizzo non è obbligatorio tranne se deve essere validato da parte del W3C e serve ad informare il browser che si tratta di un documento html con determinate caratteristiche.
Viene creato automaticamente dagli editor di testo utilizzati solitamente per modificare pagine HTML, ad esempio Dreamweaver.
Se non utilizzato il documento sarà identificato come rispondente alla specifica HTML 2.0.
|
Torna su
Torna su
| <EMBED> |
Questo TAG va inserito tra il TAG <OBJECT>.
Permette di specificare il percorso del file multimediale da visualizzare.
ATTENZIONE: non inserire file multimediali troppo grandi!
<OBJECT>
<EMBED SRC="file_multimediale.ext">
</OBJECT>
Gli attributi vanno inseriti in questo modo:
<EMBED nomeattributo="valore">
possono essere più di uno e sono i seguenti:
SRC
Specifica il percorso del file multimediale da visualizzare.
<EMBED SRC="file_multimediale.ext">
WIDTH, HEIGHT
Impostano rispettivamente la larghezza e altezza dell'elemento multimediale da visualizzare.
AUTOSTART
Attiva o disattiva la riproduzione automatica e consente le seguenti possibilità: TRUE attivato, FALSE disattivato.
Per una guida approfondita effettuare la ricerca su un qualsiasi motore di ricerca.
TAG correlati:
OBJECT: Includere elementi multimediali
PARAM: Impostare i parametri degli elementi multimediali
|
Torna su
| <FONT> ... </FONT> |
Questo TAG va inserito tra il TAG <BODY>.
Formatta il testo che si trova tra questi due tag.
<BODY>
<FONT color="green">
Questo testo viene formattato di verde.
</FONT>
</BODY>
Gli attributi vanno inseriti in questo modo:
<FONT nomeattributo="valore">
possono essere più di uno e sono i seguenti:
COLOR
Imposta il colore.
<FONT color="green">
Questo esempio imposta il colore verde.
</FONT>
Clicca qui per consultare i codici dei colori.
FACE
Imposta il carattere.
<FONT face="Helvetica">
Questo esempio imposta il carattere Helvetica.
</font>
È anche possibile fornire delle alternative al browser, separandole da una virgola seguita da uno spazio.
Questo serve se il tipo di carattere che abbiamo scelto non è installato nel sistema dell'utente che visualizza la pagina, di conseguenza il browser di tale utente utilizza automaticamente il carattere di default "Times".
Suggerendo invece delle alternative il browser caricherà il carattere successivo finché non ne trova uno presente nel sistema.
Il carattere migliore per le pagine internet è "Verdana" in quanto è il più leggibile e leggero.
<FONT face="Lucida BlackLetter, Helvetica, Verdana, Arial">
SIZE
Imposta la grandezza.
<FONT size="5">
Questo esempio imposta la grandezza del testo a 5.
</font>
Se abbiamo utilizzato il tag BASEFONT, si può impostare la grandezza in relazione a questo tag, in questo modo:
(poniamo il caso di aver impostato: <BASEFONT SIZE="2">)
<FONT SIZE="+1"> si aumenta di 1 la grandezza, che sarà 3.
<FONT SIZE="-1"> si diminuisce di 1 la grandezza. Quindi 1.
Questi attributi possono essere combinati tra loro come da questo esempio:
<FONT color="green" face="Helvetica" size="5">
Testo verde, grande 5 e di tipo Helvetica.
</font>
TAG correlati:
BASEFONT: impostazioni di base dei font
|
Torna su
| <FORM> ... </FORM> |
Questo TAG va inserito tra il TAG <BODY>.
Permette all'utente di inviare dati tramite un form (modulo).
<BODY>
<FORM METHOD="POST" ACTION="pagina_di_destinazione.php">
...
</FORM>
</BODY>
Gli attributi vanno inseriti in questo modo:
<FORM nomeattributo="valore">
possono essere più di uno e sono i seguenti:
NAME
Imposta il nome del modulo.
<FORM NAME="nome_form">
...
</FORM>
ACTION
Imposta la pagina di destinazione.
<FORM ACTION="pagina_di_destinazione.php">
...
</FORM>
METHOD
Imposta il metodo di invio dei dati.
<FORM METHOD="POST">
...
</FORM>
POST per evitare che i dati inviati vengano visualizzati nell'url della pagina di destinazione. È il metodo più sicuro.
GET i dati inviati vengono visualizzati nell'url della pagina di destinazione. Per questo motivo essi risultano facilmente consultabili e manipolabili. Si consiglia vivamente di utilizzare sempre il metodo POST.
TARGET
Imposta dove aprire la pagina di destinazione.
<FORM TARGET="_blank">
Le possibilità sono:
_blank in una nuova finestra
_frame in un FRAME, dove "frame" è il nome del frame
_self nella stessa pagina (impostazione di default)
_top nella stessa pagina, ignorando eventuali frames.
ENCTYPE
Imposta il tipo di codifica da effettuare prima di inviare i dati.
Questo attributo non è necessario se i dati passati sono composto solo da semplice testo (lettere, numeri, spazio.)
<FORM ENCTYPE="text/plain"> Valore di default usato per inviare semplice testo.
<FORM ENCTYPE="multipart/form-data"> Valore usato per inviare dati complessi.
<FORM ENCTYPE="application/x-www-form-urlencoded"> Altro tipo di codifica.
TITLE
Etichetta che viene visualizzata restando con il mouse sopra il modulo.
<FORM TITLE="Etichetta del modulo">
TAG correlati:
INPUT: Area di inserimento dati
BUTTON: Inviare i dati
TEXTAREA: Inserire grandi contenuti
SELECT: Selezione dati in un form
OPTION: Scelte possibili nella selezione in un form
OPTGROUP: Raggruppare le scelte
|
Torna su
| <FRAME> |
Questo TAG va inserito tra il tag FRAMESET.
Questo tag imposta ogni singolo riquadro della pagina.
Per comprendere meglio vedere prima il tag FRAMESET.
<FRAMESET ROWS="50%, 30%, *">
<FRAME SRC="primo_frame.html">
<FRAME SRC="secondo_frame.html">
<FRAME SRC="terzo_frame.html">
</FRAMESET>
Gli attributi vanno inseriti in questo modo:
<FRAME nomeattributo="valore">
possono essere più di uno e sono i seguenti:
SRC
Imposta la pagina da far visualizzare nel frame.
<FRAME SRC="pagina_da_visualizzare.html">
NAME
Imposta il nome del frame. Tale nome può essere utilizzato come destinazione per i collegamenti.
<FRAME NAME="primoframe">
<A HREF="collegamento.html" TARGET="primoframe"> Questo link visualizzerà il contenuto nel frame chiamato "primoframe".
SCROLLING
Imposta se permettere all'utente di poter scorrere il frame.
Di default è impostato a "yes".
<RAME SCROLLING="no"> Impedisce lo scorrimento.
<RAME SCROLLING="auto"> Ne consente lo scorrimento quando necessario.
NORESIZE
Impedisce il ridimensionamento del frame.
<FRAME NORESIZE> Da notare che non necessita di un valore.
MARGINHEIGHT, MARGINWIDTH
Imposta la distanza verticale (MARGINHEIGHT) e orizzontale (MARGINWIDTH) del bordo dei frame rispetto ai contenuti.
<FRAME MARGINHEIGHT="3" MARGINWIDTH="2">
TAG correlati:
FRAMESET: Dividere la pagina in frames
NOFRAME: Se il browser non supporta i frame
|
Torna su
| <FRAMESET> ... <⁄FRAMESET> |
Questo TAG va inserito al posto del tag BODY.
Questo tag permette di suddividere la pagina in frames: dei riquadri indipendenti.
Ogni riquadro è una pagina web indipendente dalle altre in ogni aspetto.
Esempio:
<HTML>
<HEAD>
...
</HEAD>
<FRAMESET ROWS="50%, 30%, *">
<FRAME SRC="primo_frame.html">
<FRAME SRC="secondo_frame.html">
<FRAME SRC="terzo_frame.html">
<NOFRAMES>
Contenuti da visualizzare se il browser dell'utente non supporta i FRAME.
</NOFRAMES>
</FRAMESET>
</HTML>
Gli attributi vanno inseriti in questo modo:
<FRAMESET nomeattributo="valore">
possono essere più di uno e sono i seguenti:
ROWS
Imposta la suddivisione della pagina in riquadri orizzontali, impostandone le percentuali o i pixel.
<FRAMESET ROWS="50%, 30%, *">
Il primo frame sarà alto il 50% della pagina, il secondo 30% e il terzo il restante spazio.
Non c'è un limite al numero di frame che una pagina può avere.
COLS
Imposta la suddivisione della pagina in riquadri verticali, impostandone le percentuali o i pixel.
<FRAMESET COLS="50%, 30%, *">
Il primo frame sarà largo il 50% della pagina, il secondo 30% e il terzo il restante spazio.
Non c'è un limite al numero di frame che una pagina può avere.
ATTENZIONE:
Si possono usare gli attributi ROWS e COLS nello stesso TAG FRAMESET:
<FRAMESET ROWS="50%, 30%, *" COLS="50% *">
In questo modo la pagina viene suddivisa in 3 riquadri orizzontali usando ROWS, che a loro volta vengono suddivisi in 2 riquadri verticali usando COLS.
Ovviamente specificando prima COLS il risultato è l'opposto.
FRAMEBORDER
Imposta se visualizzare o no il bordo dei frames.
Di default è impostato a "yes".
<FRAMESET FRAMEBORDER="no"> Non visualizza i bordi dei frames.
BORDER
Imposta lo spessore del bordo dei frames.
<FRAMESET BORDER="5"> Bordo spesso 5 pixel.
BORDERCOLOR
Imposta il colore del bordo dei frames.
<FRAMESET BORDERCOLOR="green"> Bordo di colore verde.
FRAMESET ANNIDATI:
<FRAMESET ROWS="50%, 30%, *">
<FRAME SRC="primo_frame.html">
<FRAMESET COLS="50%, 30%, *">
<FRAME SRC="secondo_frame_1.html">
<FRAME SRC="secondo_frame_2.html">
<FRAME SRC="secondo_frame_3.html">
</NOFRAMES>
<FRAME SRC="terzo_frame.html">
<NOFRAMES>
Contenuti da visualizzare se il browser dell'utente non supporta i FRAME.
</NOFRAMES>
</FRAMESET>
In questo esempio suddividiamo la pagina in 3 frames orizzontali.
Il secondo riquadro è a sua volta suddiviso in tre frames verticali.
Da notare che se si vuole suddividere un FRAME in ulteriori riquadri, non si deve utilizzare il tag FRAME ma nuovamente il tag FRAMESET, completo dei relativi FRAME.
Vedere il tag FRAME per impostare i singoli riquadri.
TAG correlati:
FRAME: I riquadri della pagina
NOFRAME: Se il browser non supporta i frame
|
Torna su
| <H1>,<H2>,<H3>,<H4>,<H5>,<H6> |
Questo TAG va inserito tra il TAG <BODY>.
Viene utilizzato per formattare velocemente un titolo.
Ognuno di essi ha caratteristiche differenti:
Titolo con <H1>
Titolo con <H2>
Titolo con <H3>
Titolo con <H4>
Titolo con <H5>
Titolo con <H6>
Il codice va scritto nel seguente modo:
<BODY>
<H3>
Titolo con <H3>
</H3>
</BODY>
Notare che questo tag crea automaticamente uno spazio tra il testo che lo precede e che lo succede.
|
Torna su
Torna su
| <HR> |
Questo TAG va inserito tra il TAG <BODY>.
Questo tag crea una linea divisoria orizzontale larga quanto lo spazio orizzontale a disposizione. Per default è grigia con trasparenza sullo sfondo, ombreggiata e in rilievo.
<BODY>
contenuto...
<HR color="green">
contenuto...
</BODY>
|
In questo esempio viene creata di colore verde e ricopre tutto la spazio orizzontale a sua disposizione.
Gli attributi vanno inseriti in questo modo:
<HR nomeattributo="valore">
possono essere più di uno e sono i seguenti:
ALIGN
Imposta l'allineamento orizzontale nella pagina e consente le seguenti possibilità: Center centrato, Left sinistra e Right destra.
COLOR
Imposta il colore della linea.
<HR color="green">
Questo esempio imposta il colore verde.
Clicca qui per consultare i codici dei colori.
NOSHADE
Elimina l'ombreggiatura della linea.
<HR NOSHADE="noshade" size="5">
Per notare la differenza questa ha l'ombreggiatura:
SIZE
Imposta lo spessore della linea.
<HR SIZE="5">
WIDTH
Imposta la larghezza. Può essere espressa in pixel o in percentuale.
<HR WIDTH="50%">
|
Torna su
| <HTML> ... <⁄HTML> |
<HTML> va inserito all'inizio del file e indica l'inizio del documento HTML, </HTML> indica invece la fine del documento HTML e va quindi inserito come ultimo TAG del documento.
ATTENZIONE: Questo tag va inserito UNA SOLA VOLTA nella pagina.
|
Torna su
| <I> ... </I> |
Questo TAG va inserito tra il TAG <BODY>.
Imposta il formato corsivo per tutto il testo compreso tra questo tag.
<BODY>
<I>
Testo in corsivo
</I>
</BODY>
|
Torna su
| <IFRAME> ... </IFRAME> |
Questo TAG va inserito tra il tag BODY.
Questo tag permette di creare al volo un frame, cioè un riquadro interno alla pagina che contiene una pagina esterna.
<IFRAME SRC="pagina_da_includere.html" WIDTH="250" HEIGHT="100">
Contenuto alternativo da visualizzare se il browser dell'utente non supporta questo tag.
</IFRAME>
Gli attributi vanno inseriti in questo modo:
<FRAME nomeattributo="valore">
possono essere più di uno e sono i seguenti:
SRC
Imposta la pagina da far visualizzare nel frame.
<FRAME SRC="pagina_da_visualizzare.html">
NAME
Imposta il nome del frame. Tale nome può essere utilizzato come destinazione per i collegamenti.
<FRAME NAME="primoframe">
<A HREF="collegamento.html" TARGET="primoframe"> Questo link visualizzerà il contenuto nel frame chiamato "primoframe".
SCROLLING
Imposta se permettere all'utente di poter scorrere il frame.
Di default è impostato a "yes".
<RAME SCROLLING="no"> Impedisce lo scorrimento.
<RAME SCROLLING="auto"> Ne consente lo scorrimento quando necessario.
NORESIZE
Impedisce il ridimensionamento del frame.
<FRAME NORESIZE> Da notare che non necessita di un valore.
MARGINHEIGHT, MARGINWIDTH
Imposta la distanza verticale (MARGINHEIGHT) e orizzontale (MARGINWIDTH) del bordo dei frame rispetto ai contenuti.
<FRAME MARGINHEIGHT="3" MARGINWIDTH="2">
TAG correlati:
FRAMESET: Dividere la pagina in frames
NOFRAME: Se il browser non supporta i frame
|
Torna su
| <IMG> |
Questo TAG va inserito tra il TAG <BODY>.
Permette di inserire un'immagine nella pagina. Per default l'immagine visualizzata manterrà le proprie dimensioni originali.
I formati più comuni e supportati sono .jpg, .gif, .png e .bmp.
<BODY>
<IMG src="percorso_immagine.jpg">
</BODY>
Gli attributi vanno inseriti in questo modo:
<IMG nomeattributo="valore">
possono essere più di uno e sono i seguenti:
SRC
Fornisce al browser il percorso dell'immagine da visualizzare. Senza questo attributo l'immagine non verrà mai visualizzata.
 <IMG src="esempio.png">
In questo esempio il percorso dell'immagine contiene solo il nome dell'immagine stessa perché dato che si trova nella stessa cartella dove si trova questa pagina, non bisogna specificare la cartella.
Se invece si trova in una cartella superiore a quella della pagina si deve usare il comando ../ che significa "vai alla cartella superiore":
<IMG src="../esempio.png"> una cartella superiore
<IMG src="../../esempio.png"> due cartelle superiori
<IMG src="../cartella2/esempio.png"> una cartella superiore, nella cartella "cartella2"
<IMG src="nomesottocartella/esempio.png"> va nella sottocartella.
 <IMG src="esempio2.png">
In questo caso l'immagine non viene visualizzata. I possibili motivi sono:
- il percorso specificato nell'attributo SRC non è corretto;
- l'immagine non esiste;
- l'immagine non è di un formato supportato.
Da notare come si comporta il browser: visualizza un'immagine sostitutiva "vuota".
IMMAGINE ESTERNA:
È anche possibile visualizzare sulla pagina un'immagine presente su un sito esterno, utilizzando il comando http:// seguito dal percorso completo dell'immagine:
<IMG src="http://www.nome-del-sito.it/immagine.jpg">
DIFFERENZA DEI FORMATI:
.jpg (Joint Photographic Experts Group) È il più utilizzato, permette un caricamento veloce ed è ottimo per immagini di qualità fotografica.
.gif (Graphic Interchange Format) È il formato speciale delle immagini animate con non più di 256 colori.
(Vai nella sezione Gif Animate per un esempio!)
.png (Portable Network Graphic) È un formato ottimizzato per le pagine Web, introdotto di recente dal W3C.
.bmp È (formato nativo di Paint) il formato meno utilizzato in quanto impiega troppo a caricare.
ALT
Testo alternativo che appare all'interno dell'immagine nel caso in cui questa non possa essere visualizzata.
<IMG SRC="nome_file_immagine.jpg" ALT="Testo alternativo">
TITLE
Etichetta che viene visualizzata restando con il mouse sopra di essa.
<IMG SRC="nome_file_immagine.jpg" TITLE="Etichetta immagine">
WIDTH
Imposta la larghezza dell'immagine. Tale valore deve essere espresso in pixel.
<IMG SRC="nome_file_immagine.jpg" WIDTH="150">
Da notare che senza utilizzare anche l'attributo HEIGHT le proporzioni dell'immagini vengono preservate.
HEIGHT
Imposta l'altezza dell'immagine. Tale valore deve essere espresso in pixel.
<IMG SRC="nome_file_immagine.jpg" HEIGHT="150">
Da notare che senza utilizzare anche l'attributo WIDTH le proporzioni dell'immagini vengono preservate.
<IMG SRC="nome_file_immagine.jpg" WIDTH="250" HEIGHT="100">
In questo caso le proporzioni non vengono mantenute.
ALIGN
Imposta come allineare l'immagine con il resto della pagina.
<IMG SRC="nome_file_immagine.jpg" ALIGN="left">
Questa immagine viene allineata a sinistra.
<IMG SRC="nome_file_immagine.jpg" ALIGN="right">
Questa immagine viene allineata a destra.
<IMG SRC="nome_file_immagine.jpg" ALIGN="bottom">
Come di default, allinea la prima riga di testo nella parte bassa dell'immagine.
<IMG SRC="nome_file_immagine.jpg" ALIGN="middle">
Allinea la prima riga di testo nella parte centrale dell'immagine.
<IMG SRC="nome_file_immagine.jpg" ALIGN="top">
Allinea la prima riga di testo nella parte alta dell'immagine.
HSPACE (horizontal space)
Imposta lo spazio orizzontale da lasciare tra l'immagine e ciò che la circonda. Tale valore deve essere espresso in pixel.
testo testo
<IMG SRC="nome_file_immagine.jpg" HSPACE="15">
Imposto la spaziatura orizzontale di 15 pixel.
VSPACE (vertical space)
Imposta lo spazio verticale da lasciare tra l'immagine e ciò che la circonda. Tale valore deve essere espresso in pixel.
testo
testo
<IMG SRC="nome_file_immagine.jpg" VSPACE="15">
Imposto la spaziatura verticale di 15 pixel.
BORDER
Imposta lo spessore del bordo dell'immagine. Di default è 0.
<IMG SRC="nome_file_immagine.jpg" BORDER="3">
Imposto il bordo spesso 3.
IMMAGINE COLLEGAMENTO
Se l'immagine è anche un collegamento, il bordo viene di default impostato a 1. Per eliminarlo bisogna quindi impostarlo a 0:
<A HREF="link"><IMG SRC="img.jpg"></A>
Spessore bordo = 1 per default.
<A HREF="link"><IMG SRC="img.jpg" BORDER="0"></A>
Spessore bordo = 0.
USEMAP
Imposta lo spessore del bordo dell'immagine. Di default è 0.
<IMG SRC="nome_file_immagine.jpg" USEMAP="NomeMappa">
Specifica il nome della mappa a cui l'immagine fa riferimento.
Vedere i seguenti TAG correlati per impostare le aree della mappa:
TAG correlati:
MAP: Mappa immagine
AREA: Aree sensibili delle immagini
|
Torna su
| <INPUT> |
Questo TAG va inserito tra il TAG <FORM>.
Inserisce un campo nel form dove è possibile inserire i dati.
<FORM METHOD="POST" ACTION="pagina_di_destinazione.php">
<INPUT TYPE="text">
</FORM>
Gli attributi vanno inseriti in questo modo:
<INPUT nomeattributo="valore">
possono essere più di uno e sono i seguenti:
NAME
Imposta il nome del campo.
<INPUT NAME="nome_campo">
TYPE
Imposta il tipo del campo.
<INPUT TYPE="text"> Inserimento di semplice testo:
<INPUT TYPE="submit"> Bottone per inviare i dati:
<INPUT TYPE="reset"> Bottone per resettare i dati inseriti dall'utente:
<INPUT TYPE="password"> Inserimento di Password:
<INPUT TYPE="hidden" VALUE="valore"> Per inviare dati prestabiliti nascondendo il relativo campo.
<INPUT TYPE="checkbox"> Selezione di un campo cliccabile:
<INPUT TYPE="image" SRC="nome_immagine.jpg"> Immagine che funge da bottone per inviare i dati:
<INPUT TYPE="radio"> Selezione di un campo cliccabile:
Se ci sono più campi di tipo radio con lo stesso NAME è ammessa solo una scelta tra questi:
<INPUT TYPE="file"> Inserimento di un file presente nel PC dell'utente:
VALUE
Imposta il valore predefinito del campo.
<INPUT VALUE="valore predefinito">
ACTION
Imposta la pagina di destinazione.
<FORM ACTION="pagina_di_destinazione.php">
...
</FORM>
METHOD
Imposta il metodo di invio dei dati.
<FORM METHOD="POST">
...
</FORM>
POST per evitare che i dati inviati vengano visualizzati nell'url della pagina di destinazione. È il metodo più sicuro.
GET i dati inviati vengono visualizzati nell'url della pagina di destinazione. Per questo motivo essi risultano facilmente consultabili e manipolabili. Si consiglia vivamente di utilizzare sempre il metodo POST.
TARGET
Imposta dove aprire la pagina di destinazione.
<FORM TARGET="_blank">
Le possibilità sono:
_blank in una nuova finestra
_frame in un FRAME, dove "frame" è il nome del frame
_self nella stessa pagina (impostazione di default)
_top nella stessa pagina, ignorando eventuali frames.
ENCTYPE
Imposta il tipo di codifica da effettuare prima di inviare i dati.
Questo attributo non è necessario se i dati passati sono composto solo da semplice testo (lettere, numeri, spazio.)
<FORM ENCTYPE="text/plain"> Valore di default usato per inviare semplice testo.
<FORM ENCTYPE="multipart/form-data"> Valore usato per inviare dati complessi.
<FORM ENCTYPE="application/x-www-form-urlencoded"> Altro tipo di codifica.
TITLE
Etichetta che viene visualizzata restando con il mouse sopra il modulo.
<FORM TITLE="Etichetta del modulo">
SIZE
Imposta la lunghezza del campo se questo è di tipo TEXT o PASSWORD.
<INPUT TYPE="text" SIZE="50">
<INPUT TYPE="password" SIZE="50">
MAXLENGHT
Imposta la lunghezza massima di caratteri inseribili nel campo se questo è di tipo TEXT o PASSWORD.
<INPUT TYPE="text" MAXLENGHT="5">
<INPUT TYPE="password" MAXLENGHT="5">
CHECKED
Permette di impostare quale campo deve essere preselezionato.
<INPUT TYPE="checkbox" CHECKED>
<INPUT TYPE="password" CHECKED VALUE="Contenuto">
Da notare che in questo caso il contenuto va inserito con l'attributo VALUE.
READONLY
Permette di leggere e selezionare il contenuto del campo, ma non di modificarlo.
<INPUT TYPE="text" READONLY VALUE="Contenuto">
<INPUT TYPE="password" READONLY VALUE="Contenuto">
Da notare che in questo caso il contenuto va inserito con l'attributo VALUE.
DISABLED
Permette di disabilitare il bottone.
<INPUT TYPE="submit" DISABLED>
<INPUT TYPE="text" DISABLED>
TAG correlati:
BUTTON: Bottone di invio dati
FORM: I moduli
TEXTAREA: Inserire grandi contenuti
SELECT: Selezione dati in un form
OPTION: Scelte possibili nella selezione in un form
|
Torna su
Torna su
Torna su
| <MAP> ... </MAP> |
Questo TAG va inserito dopo il TAG <IMG>.
Imposta il nome dell'immagine da mappare.
<IMG SRC="nome_file_immagine.jpg" USEMAP="#Mappa">
<MAP NAME="Mappa" ID="Mappa">
...
</MAP>
Vedere il tag AREA per continuare.
TAG correlati:
AREA: Aree sensibili delle immagini
IMG: Le immagini
|
Torna su
| <MENU> ... </MENU> |
Questo TAG va inserito tra il TAG <BODY>.
Crea un elenco con un rientro sinistro e uno spazio prima e dopo.
Ogni <LI> crea una nuova voce dell'elenco. Forse identico a DIR.
<BODY>
<MENU>
<LI>uno
<LI>due
<LI>tre
<LI>quattro
<LI>...
</MENU>
</BODY>
TAG correlati:
DL: gli elenchi
DIR: gli elenchi
OL: gli elenchi
UL: gli elenchi
|
Torna su
| <META> |
Questo TAG va inserito tra il TAG <HEAD>.
I META TAGS vengono utilizzati per vari scopi: fornire informazioni e direttive agli spiders dei motori di ricerca quali il titolo, la descrizione e le parole chiave; impostare il copyright, l'editor utilizzato e gli autori del documento; effettuare il redirect a un'altra pagina, ecc.
<HEAD>
<META name="tipo di meta" content="contenuto">
</HEAD>
Vediamo brevemente i principali META TAGS:
<META name="language" content="it">
indica il linguaggio utilizzato nella pagina. Per aggiungere più lingue separarle con una virgola seguita da uno spazio:
<META name="language" content="it, eng">
<META name="author" content="nome autore">
Indica gli autori del documento.
<META name="reply-to" content="email@email.it">
Indica l'indirizzo di posta elettronica da utilizzare per contattare i creatori veri e propri della pagina.
<META name="copyright" content="Copyright Autore 2008">
Indica il Copyright della pagina.
<META name="revisit-after" content="3 days">
Indica agli spiders dei motori di ricerca la frequenza con la quale devono visitare la pagina.
<META name=generator content="Blocco Note">
Indica il programma utilizzato per la realizzazione della pagina.
<META name="description" content="descrizione breve della pagina">
Imposta la descrizione della pagina utilizzata dai moroti di ricerca per l'indicizzazione nei loro archivi.
<META name="keywords" content="parole chiave, separate da una virgola, senza ripeterle più di 3 volte">
Imposta le parole chiave della pagina utilizzata dai moroti di ricerca per l'indicizzazione nei loro archivi, che devono essere utilizzate durante la ricerca per trovare questa pagina.
<META name="robots" content="index/follow">
Indica agli spiders dei motori di ricerca cosa indicizzare:
index indicizza la pagina.
follow indicizza le pagine raggiungibili tramite i collegamenti presenti nella pagina.
noindex non indicizza la pagina.
nofollow non indicizza le pagine raggiungibili tramite i collegamenti presenti nella pagina.
Possono anche essere combinati tra di loro, separandoli con uno /:
<META name="robots" content="index/follow">
TAG correlati:
TITLE: il titolo della pagina
LINK: inclusione file esterni
STYLE: i fogli di stile
HEAD: il capo della pagina
BASE: destinazione dei link
SCRIPT: gli script non HTML
|
Torna su
| <NOFRAMES> |
Questo TAG va inserito tra il tag FRAMESET.
Questo tag permette di visualizzare dei contenuti nel caso in cui il browser dell'utente non supporta i frames.
<FRAMESET ROWS="50%, 30%, *">
<FRAME SRC="primo_frame.html">
<FRAME SRC="secondo_frame.html">
<FRAME SRC="terzo_frame.html">
<NOFRAMES>
Contenuti da visualizzare se il browser dell'utente non supporta i FRAME.
</NOFRAMES>
</FRAMESET>
Il contenuto da visualizzare può essere definito come una pagina alternativa con lo scopo di informare l'utente che non supporta i frame e se possibile fornirgli tutte le informazioni che poteva trovare nei frames.
Tale "pagina" può essere scritta con codice HTML, quindi come una qualsiasi pagina.
TAG correlati:
FRAMESET: Dividere la pagina in frames
|
Torna su
| <OBJECT> ... </OBJECT> |
Questo TAG va inserito tra il TAG <BODY>.
Permette di inserire nella pagina dei file multimediali.
<BODY>
<OBJECT SRC="file_multimediale.ext">
...
</OBJECT>
</BODY>
Gli attributi vanno inseriti in questo modo:
<OBJECT nomeattributo="valore">
possono essere più di uno e sono i seguenti:
DATA
Fornisce informazioni sul percorso dell'oggetto e sul plug-in necessario per visualizzarlo correttamente.
<OBJECT DATA="sottofondo.wav">
CLASSID
Fornisce indicazioni sul percorso e identificare il tipo di plugin necessario per eseguire l'oggetto.
CODEBASE
Indica il percorso di base a cui fanno riferimento DATA e CLASSID.
TYPE
Indica il MIME TYPE dell'oggetto da inserire.
<OBJECT TYPE="video/quicktime"> Per includere un video in formato QuickTime
<OBJECT TYPE="application/x-shockwave-flash"> Per includere file .sfw.
WIDTH, HEIGHT
Impostano rispettivamente la larghezza e altezza dell'elemento multimediale da visualizzare.
Per una guida approfondita effettuare la ricerca su un qualsiasi motore di ricerca.
TAG correlati:
PARAM: Impostare i parametri degli elementi multimediali
EMBED: Includere elementi multimediali
|
Torna su
| <OL> ... </OL> |
Questo TAG va inserito tra il TAG <BODY>.
Crea un elenco con un rientro sinistro e uno spazio prima e dopo.
Per default l'elenco viene numerato da 1 in poi.
<BODY>
<OL>
<LI>uno
<LI>due
<LI>tre
<LI>quattro
</OL>
</BODY>
- uno
- due
- tre
- quattro
<OL> imposta l'inizio dell'elenco.
<LI> Crea una voce dell'elenco assegnandogli un numero progressivo.
</OL> imposta la fine dell'elenco.
Gli attributi dell'elenco vanno inseriti in questo modo:
<OL nomeattributo="valore">
possono essere più di uno e sono i seguenti:
TYPE
Permette di scegliere un alternativa ai numeri assegnati alle voci dell'elenco.
- <OL TYPE="A"> Lettere maiuscole partendo dalla A.
- <OL TYPE="a"> Lettere minuscole partendo dalla a.
- <OL TYPE="I"> Numerazione romana maiuscola partendo da I.
- <OL TYPE="i"> Numerazione romana minuscola partendo da i.
- <OL TYPE="l"> Numerazione partendo da 1.
- <OL TYPE="disc"> Cerchio pieno.
- <OL TYPE="circle"> Cerchio vuoto.
- <OL TYPE="square"> Quadrato.
START
Permette di impostare il valore di partenza da assegnare alla prima voce dell'elenco.
Il valore da assegnare a questo valore deve essere un numero anche se si imposta TYPE differente da quello di default numerico, viene calcolato automaticamente il carattere di partenza.
<OL TYPE="A" START="3"> questo esempio partirà dalla lettera C, cioè la terza:
- uno
- due
- tre
- quattro
TITLE
Assegna un titolo all'elenco, visibile posizionandosi con il mouse su di esso.
<OL TITLE="titolo">
- posizionati
- con il mouse
- sopra una qualsiasi parte
- di questo elenco
TAG correlati:
MENU: gli elenchi
DIR: gli elenchi
DL: gli elenchi
UL: gli elenchi
|
Torna su
| <OPTGROUP> ... </OPTGROUP> |
Questo TAG va inserito tra il TAG <SELECT>.
Permette di raggruppare le scelte possibili.
<FORM METHOD="POST" ACTION="pagina_di_destinazione.php">
<SELECT NAME="scegli">
<OPTGROUP LABEL="gruppo 1">
<OPTION VALUE="scelta1">Scelta 1</OPTION>
<OPTION VALUE="scelta2">Scelta 2</OPTION>
<OPTION VALUE="scelta3">Scelta 3</OPTION>
</OPTGROUP>
<OPTGROUP LABEL="gruppo 2">
<OPTION VALUE="scelta1">Scelta 1</OPTION>
<OPTION VALUE="scelta2">Scelta 2</OPTION>
<OPTION VALUE="scelta3">Scelta 3</OPTION>
</OPTGROUP>
</SELECT>
</FORM>
Gli attributi vanno inseriti in questo modo:
<OPTGROUP nomeattributo="valore">
possono essere più di uno e sono i seguenti:
LABEL
Imposta il nome del gruppo di scelte.
<OPTGROUP LABEL="Gruppo 1">
TAG correlati:
BUTTON: Bottone di invio dati
FORM: I moduli
INPUT: Inserire i dati
SELECT: Selezione dati in un form
TEXTAREA: Inserire grandi contenuti
OPTION: Scelte possibili nella selezione in un form
|
Torna su
| <OPTION> ... </OPTION> |
Questo TAG va inserito tra il TAG <SELECT>.
Permette di inserire una scelta.
<FORM METHOD="POST" ACTION="pagina_di_destinazione.php">
<SELECT NAME="scegli">
<OPTION VALUE="scelta1">Scelta 1</OPTION>
<OPTION VALUE="scelta2">Scelta 2</OPTION>
<OPTION VALUE="scelta3">Scelta 3</OPTION>
</SELECT>
</FORM>
Gli attributi vanno inseriti in questo modo:
<OPTION nomeattributo="valore">
possono essere più di uno e sono i seguenti:
VALUE
Imposta il valore del campo.
<OPTION VALUE="valore">
SELECTED
Permette di preselezionare una scelta.
<form>
<select name="scegli">
<option>scelta 1</option>
<option>scelta 2</option>
<option>scelta 3</option>
<option selected>scelta 4</option>
<option>scelta 5</option>
</select>
</form>
TAG correlati:
BUTTON: Bottone di invio dati
FORM: I moduli
INPUT: Inserire i dati
SELECT: Selezione dati in un form
TEXTAREA: Inserire grandi contenuti
OPTGROUP: Raggruppare le scelte
|
Torna su
| <P> ... </P> |
Questo TAG va inserito tra il TAG <BODY>.
Viene utilizzato per creare un paragrafo di testo e lascia una riga vuota prima della sua apertura e dopo la sua chiusura.
<BODY>
<P align="right">
Paragrafo allineato a destra con <P>
</P>
</BODY>
Viene solitamente utilizzato per allineare il testo contenuto:
left a sinistra
right a destra
center al centro
justify giustificato
|
Torna su
| <PARAM> |
Questo TAG va inserito tra il TAG <OBJECT>.
Specifica alcune caratteristiche del file multimediale da includere.
<OBJECT SRC="file_multimediale.ext">
<PARAM NAME="movie" VALUE="nome_file.ext">
</OBJECT>
Per una guida approfondita effettuare la ricerca su un qualsiasi motore di ricerca.
TAG correlati:
OBJECT: Includere elementi multimediali
EMBED: Includere elementi multimediali
|
Torna su
| <PRE> ... </PRE> |
Questo TAG va inserito tra il TAG <BODY>.
Formatta il testo compreso tra questo tag come blocco di testo preformattato a spaziatura fissa e con rigide regole. Ad esempio non effettua il ritorno a capo automatico se non si utilizza l'apposito tag BR.
<BODY>
<PRE>
Testo preformattato con PRE
</PRE>
</BODY>
|
Torna su
Torna su
| <SELECT> ... </SELECT> |
Questo TAG va inserito tra il TAG <FORM>.
Permette di creare un elenco di opzioni tra cui scegliere.
Ogni scelta va indicata con il tag OPTION.
<FORM METHOD="POST" ACTION="pagina_di_destinazione.php">
<SELECT NAME="scegli">
<OPTION VALUE="scelta1">Scelta 1</OPTION>
<OPTION VALUE="scelta2">Scelta 2</OPTION>
<OPTION VALUE="scelta3">Scelta 3</OPTION>
</SELECT>
</FORM>
Gli attributi vanno inseriti in questo modo:
<SELECT nomeattributo="valore">
possono essere più di uno e sono i seguenti:
NAME
Imposta il nome del campo.
<SELECT NAME="nome_campo">
TITLE
Etichetta che viene visualizzata restando con il mouse sopra il campo.
<SELECT TITLE="Etichetta del campo">
SIZE
Imposta il numero di righe da visualizzare.
<SELECT SIZE="10">
<SELECT SIZE="3">
MULTIPLE
Permette la scelta multipla utilizzando i tasti CTRL o SHIFT.
<SELECT MULTIPLE>
Da notare che l'aspetto del campo cambia.
DISABLED
Permette di disabilitare la scelta.
<SELECT DISABLED>
TAG correlati:
BUTTON: Bottone di invio dati
FORM: I moduli
INPUT: Inserire i dati
SELECT: Selezione dati in un form
OPTION: Scelte possibili nella selezione in un form
OPTGROUP: Raggruppare le scelte
|
Torna su
| <SPAN> ... </SPAN> |
Questo TAG va inserito tra il TAG <BODY>.
Questo tag viene principalmente utilizzato come supporto per i fogli di stile, formattando tutto il contenuto tra questi due tag.
<BODY>
<SPAN STYLE="color:green">
Questo testo viene colorato di verde.
</SPAN>
</BODY>
Questo è solo uno dei tanti utilizzi possibili. Per conoscere gli altri attributi supportati basta effettuare una ricerca tramite un motore di ricerca qualsiasi cercando "guida span html".
|
Torna su
Torna su
| <TABLE> ... <⁄TABLE> |
Questo TAG va inserito tra il tag BODY.
Le tabelle sono un ottimo strumento per impaginare al meglio qualsiasi contenuto della pagina.
Ogni tabella si divide in righe che a loro volta vengono suddivise in colonne.
Esempio:
<BODY>
<TABLE border="1">
<TR>
<TD>colonna 1 della riga 1
</TD>
<TD>colonna 2 della riga 1
</TD>
</TR>
<TR>
<TD>colonna 1 della riga 2
</TD>
<TD>colonna 2 della riga 2
</TD>
</TR>
</TABLE>
</BODY>
Produrrà questo risultato:
| colonna 1 della riga 1 | colonna 2 della riga 1 | | colonna 1 della riga 2 | colonna 2 della riga 2 |
Analizziamo il codice:
•
<TABLE> indica l'inizio della tabella e <⁄TABLE> indica la fine della tabella.
•
<TR> indica l'inizio della riga e <⁄TR> indica la fine della riga e vanno inseriti tra i tag <TABLE> e <⁄TABLE>.
•
<TD> indica l'inizio della colonna e <⁄TD> indica la fine della colonna e vanno inseriti tra i tag <TR> e <⁄TR>. Bisogna ripetere questo codice per ogni colonna che vogliamo ottenere all'interno della stessa riga.
•
border="1" è un attributo della tabella e imposta lo spessore del bordo della tabella e va inserito lasciando uno spazio vuoto fra la scritta TABLE e la sua chiusura >.
All'interno di un TD si può inserire un altra tabella e così via.
Gli attributi della tabella vanno inseriti in questo modo:
<TABLE nomeattributo="valore">
possono essere più di uno e sono i seguenti:
ALIGN
Imposta l'allineamento orizzontale della tabella nella pagina e consente le seguenti possibilità: Center centrato, Left sinistra e Right destra.
BACKGROUND
Imposta un'immagine come sfondo della tabella ed è possibile applicarlo anche agli elementi <TD> e <TH> che descriveremo più avanti. Supporta i file grafici gif, jpg, png, bmp.
<TABLE background="nome_file_immagine.jpg">
BGCOLOR
Imposta il colore in tinta unita della tabella e può essere indicato col suo nome in lingua inglese o con il rispettivo codice esadecimale o con il codice RGB.
(Vai nella sezione Codici HTML per conoscere i codici dei colori!)
<TABLE bgcolor="blue">
<TABLE bgcolor="#0000FF">
BORDER
Imposta lo spessore del bordo perimetrale della tabella e delle celle che la compongono.
<TABLE border="0"> Impostando il valore a 0 si elimina del tutto il bordo ed è il valore di default.
BORDERCOLOR
Imposta il colore del bordo della tabella e può essere indicato col suo nome in lingua inglese o con il rispettivo codice esadecimale o con il codice RGB.
<TABLE border="1" bordercolor="blue">
CELLPADDING
Imposta la quantità di spazio vuoto da lasciare tra i bordi delle celle della tabella e il dato vero e proprio in esse contenuto.
<TABLE cellpadding="10">
produrrà il seguente risultato:
| colonna 1 della riga 1 | colonna 2 della riga 1 | | colonna 1 della riga 2 | colonna 2 della riga 2 |
CELLSPACING
Imposta la quantità di spazio vuoto da lasciare tra le singole celle della tabella.
<TABLE cellspacing="10">
produrrà il seguente risultato:
| colonna 1 della riga 1 | colonna 2 della riga 1 | | colonna 1 della riga 2 | colonna 2 della riga 2 |
HEIGHT
Imposta la larghezza verticale della tabella e può essere espressa in pixel o in percentuale. La percentuale agisce in base allo spazio massimo dedicato alla tabella. Se la tabella si trova all'interno di un TD di un'altra tabella che ha come larghezza verticale 100 pixel, 90% sarà uguale a 90 pixel.
<TABLE height="200">
produrrà il seguente risultato:
| colonna 1 della riga 1 | colonna 2 della riga 1 | | colonna 1 della riga 2 | colonna 2 della riga 2 |
WIDTH
Imposta la larghezza orizzontale della tabella e può essere espressa in pixel o in percentuale. La percentuale agisce in base allo spazio massimo dedicato alla tabella. Se la tabella si trova all'interno di un TD di un'altra tabella che ha come larghezza orizzontale 100 pixel, 90% sarà uguale a 90 pixel.
<TABLE width="500">
produrrà il seguente risultato:
| colonna 1 della riga 1 | colonna 2 della riga 1 | | colonna 1 della riga 2 | colonna 2 della riga 2 |
TAG correlati:
CAPTION: il titolo della tabella
TD: la colonna della tabella
TR: la riga della tabella
|
Torna su
| <TD> ... <⁄TD> |
Questo TAG va inserito tra il TAG <TR>.
È un TAG essenziale, nel quale viene inserito il contenuto da visualizzare.
Ogni coppia di TD crea una cella nella tabella. Per inserire le celle in una riga successiva bisogna chiudere la riga con </TR> e crearne una nuova con <TR>.
Esempio:
<TABLE border="1">
<TR>
<TD>colonna 1 della riga 1
</TD>
<TD>colonna 2 della riga 1
</TD>
</TR>
<TR>
<TD>colonna 1 della riga 2
</TD>
<TD>colonna 2 della riga 2
</TD>
</TR>
</TABLE>
Produrrà questo risultato:
| colonna 1 della riga 1 | colonna 2 della riga 1 | | colonna 1 della riga 2 | colonna 2 della riga 2 |
Gli attributi vanno inseriti in questo modo:
<TD nomeattributo="valore">
possono essere più di uno e sono i seguenti:
VALIGN
Imposta l'allineamento verticale del contenuto della colonna e va inserito all'interno del TAG TD. Consente le seguenti possibilità: Top alto e Bottom in basso.
NOWRAP
Impedisce il ritorno a capo del contenuto della cella, forzando questa a mantenere le dimensioni necessarie per contenere tutto il testo su una sola riga.
<TD NOWRAP> non necessita di valore.
Esempi su una tabella larga 100 pixel:
| contenuti della tabella senza usare NOWRAP |
| contenuti della tabella usando NOWRAP |
ROWSPAN e COLSPAN
COLSPAN unisce le celle orizzontalmente, ROWSPAN verticalmente.
Il numero di celle da unire è a scelta.
<TD rowspan="2"> Vediamo alcuni esempi:
Tabella senza nessun attributo:
| colonna 1 della riga 1 |
colonna 2 della riga 1 |
| colonna 1 della riga 2 |
colonna 2 della riga 2 |
Codice usato:
<table border="1">
<tr>
<td>colonna 1 della riga 1</td>
<td>colonna 2 della riga 1</td>
</tr>
<tr>
<td>colonna 1 della riga 2</td>
<td>colonna 2 della riga 2</td>
</tr>
</table>
Tabella con le prime 2 celle verticali unite:
| colonna 1 della riga 1 |
colonna 2 della riga 1 |
| colonna 1 della riga 2 |
colonna 2 della riga 2 |
Codice usato:
<table border="1">
<tr>
<td rowspan="2">colonna 1 della riga 1</td>
<td>colonna 2 della riga 1</td>
</tr>
<tr>
<td>colonna 1 della riga 2</td>
<td>colonna 2 della riga 2</td>
</tr>
</table>
Da notare che raggruppando le prime 2 celle verticali, quindi occupando 2 posti, si è creata una nuova colonna sulla destra per far posto alla cella che ora risulta in eccesso, non avendo più posto libero.
Il problema si risolve eliminando l'ultimo TD dal codice:
| colonna 1 della riga 1 |
colonna 2 della riga 1 |
| colonna 1 della riga 2 |
Codice usato:
<table border="1">
<tr>
<td rowspan="2">colonna 1 della riga 1</td>
<td>colonna 2 della riga 1</td>
</tr>
<tr>
<td>colonna 1 della riga 2</td>
</tr>
</table>
Oltre agli attributi sopra elencati, TD supporta anche tutti gli attributi del TAG TABLE.
TAG correlati:
TABLE: la tabella
TR: le righe della tabella
|
Torna su
| <TEXTAREA> .. </TEXTAREA> |
Questo TAG va inserito tra il TAG <FORM>.
Inserisce un campo nel form dove è possibile inserire i dati.
<FORM METHOD="POST" ACTION="pagina_di_destinazione.php">
<TEXTAREA>
Contenuto della TEXTAREA.
</TEXTAREA>
</FORM>
Gli attributi vanno inseriti in questo modo:
<TEXTAREA nomeattributo="valore">
possono essere più di uno e sono i seguenti:
NAME
Imposta il nome del campo.
<TEXTAREA NAME="nome_campo">
ROWS, COLS
Impostano rispettivamente il numero di righe e il numero di colonne del campo.
Questo valore non impedisce l'inserimento di contenuti oltre questo spazio dato che se accade appaiono le barre di scorrimento.
<TEXTAREA ROWS="15" COLS="10">
NAME
Imposta il nome del campo.
<TEXTAREA NAME="nome_campo">
TITLE
Etichetta che viene visualizzata restando con il mouse sopra la textarea.
<TEXTAREA TITLE="Etichetta della textarea">
DISABLED
Permette di disabilitare il campo.
<TEXTAREA DISABLED>
TAG correlati:
BUTTON: Bottone di invio dati
FORM: I moduli
INPUT: Inserire i dati
SELECT: Selezione dati in un form
OPTION: Scelte possibili nella selezione in un form
OPTGROUP: Raggruppare le scelte
|
Torna su
Torna su
| <TR> ... <⁄TR> |
Questo TAG va inserito subito dopo il TAG <TABLE>.
Indica l'inizio di una riga all'interno della tabella.
Esempio:
<TABLE border="1">
<TR>
<TD>colonna 1 della riga 1
</TD>
<TD>colonna 2 della riga 1
</TD>
</TR>
<TR>
<TD>colonna 1 della riga 2
</TD>
<TD>colonna 2 della riga 2
</TD>
</TR>
</TABLE>
Produrrà questo risultato:
| colonna 1 della riga 1 | colonna 2 della riga 1 | | colonna 1 della riga 2 | colonna 2 della riga 2 |
Gli attributi vanno inseriti in questo modo:
<TD nomeattributo="valore">
possono essere più di uno e sono gli stessi di TABLE e TD, tranne BGCOLOR e BACKGROUND.
TAG correlati:
TABLE: la tabella
TD: le colonne della tabella
|
Torna su
| <TT> ... </TT> |
Questo TAG va inserito tra il TAG <BODY>.
Imposta il font teletype a spaziatura fissa per tutto il testo compreso tra questo tag.
Oltre ad essere utile per visualizzare meglio porzioni di codice, consente la visualizzazione di alcuni caratteri non presenti in altri tipi di font.
<BODY>
Testo teletype a spaziatura fissa
</BODY>
<BODY>
<TT>
Testo teletype a spaziatura fissa
</TT>
</BODY>
|
Torna su
| <U> ... </U> |
Questo TAG va inserito tra il TAG <BODY>.
Imposta il formato sottolineato per tutto il testo compreso tra questo tag.
<BODY>
<U>
Testo sottolineato
</U>
</BODY>
|
Torna su
| <UL> ... </UL> |
Questo TAG va inserito tra il TAG <BODY>.
Crea un elenco con un rientro sinistro e un ritorno a capo prima e dopo.
Per default l'elenco non viene numerato ma ad ogni voce viene assegnato un piccolo cerchio.
<BODY>
<UL>
<LI>uno
<LI>due
<LI>tre
<LI>quattro
</UL>
</BODY>
<UL> imposta l'inizio dell'elenco.
<LI> Crea una voce dell'elenco assegnandogli un piccolo cerchio.
</UL> imposta la fine dell'elenco.
Gli attributi dell'elenco vanno inseriti in questo modo:
<UL nomeattributo="valore">
possono essere più di uno e sono i seguenti:
TYPE
Permette di scegliere un alternativa ai piccoli rombi assegnati alle voci dell'elenco.
- <UL TYPE="A"> Lettere maiuscole partendo dalla A.
- <UL TYPE="a"> Lettere minuscole partendo dalla a.
- <UL TYPE="I"> Numerazione romana maiuscola partendo da I.
- <UL TYPE="i"> Numerazione romana minuscola partendo da i.
- <UL TYPE="l"> Numerazione partendo da 1.
- <UL TYPE="disc"> Cerchio pieno.
- <UL TYPE="circle"> Cerchio vuoto.
- <UL TYPE="square"> Quadrato.
START
Permette di impostare il valore di partenza da assegnare alla prima voce dell'elenco.
Il valore da assegnare a questo valore deve essere un numero anche se si imposta TYPE differente da quello di default numerico, viene calcolato automaticamente il carattere di partenza.
<UL TYPE="A" START="3"> questo esempio partirà dal numero romano III, cioè il numero 3:
TITLE
Assegna un titolo all'elenco, visibile posizionandosi con il mouse su di esso.
<UL TITLE="titolo">
- posizionati
- con il mouse
- sopra una qualsiasi parte
- di questo elenco
TAG correlati:
MENU: gli elenchi
DIR: gli elenchi
DL: gli elenchi
OL: gli elenchi
|
Torna su
|
|
|
|
.:: Segnala questa pagina ad un amico! ::.
|
|
|
|
BESTDRAGON.it su facebook
 
|
