########################### HTML ###################

#######################################################

<html> </html>	Tag di apertura e chiusura di una pagina web

#############################################################################

<head> </head>	Tag dell'area di intestazione contiene il tag <title>

#############################################################################

<meta attributo1="valore"attributo2="valore">

Il tag meta va inserito all'interno del tag (<head>).

serve ad inserire informazioni sul sito che non vengono visualizzate nella pagina ma servono al browser e ai motori di ricerca per gestire al meglio i contenuti. Questo tag non necessita di un tag di chiusura.

ESEMPI :

<meta name="description" content="breve descrizione della pagina">

inserisce una descrizione che viene usato dai motori di ricerca

<meta name="keywords" content="parola1,parola2,parola3">

inserisce un elenco di parole chiave usate dai motori di ricerca

<meta name="robots" content="valore">

info per i robots dei motori di ricerca i possibili (valori) sono :

index	la pagina viene indicizzata

noindex	non viene indicizzata

follow	le pagine linkate al documento vengono indicizzate

nofollow	non vengono indicizzate

<meta http-equiv="refresh" content="secondi; url=pagina.html">

redirige il visitatore alla pagina (pagina.html) dopo il numero di (secondi) specificati

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">

indica al browser che deve caricare il set di caratteri occidentale

#############################################################################

<title> </title>	Tag in cui definire il titolo che compare il cima alla	finestra

#############################################################################

<body> </body>	Tag che indica l'apertura della pagina vera e propria, il	tag supporta 6 attributi;

bgcolor="valore"	il valore è la cifra esadecimale del colore preceduta dal segno del cancelletto (#) si puo utilizzare anche il nome del colore ma la scelta è piu limitata

backgrond="percorso/nomeFile"	utilizzato per inserire un immagine come sfondo alla pagina, se l'immagine è piu piccola verra ripetuta fino a riempire la pagina.

text="valore"	imposta il colore del testo

link="valore"	il colore dei link (il default è blu)

alink="valore"	imposta il colore del link su cui si è cliccato (default	rosso)

vlink="valore"	imposta il colore dei link che si è gia' visitato(default	viola)

################# FORMATTAZIONE DEL TESTO ################################

#############################################################################

<!--commento-->	per inserire un commento per rendere comprensibile i passaggi e che non verra visualizzato dal browser lo si racchiude tra (<!-- -->)

#############################################################################

<p> </p>	Il tag indica un paragrafo inserendo una riga vuota tra un paragrafo ed il sucessivo creando cosi ordine nel testo il tag va' inserito sulla stessa riga del testo e per ragioni di conformita' alla versione 4 di HTML si inserisce anche il tag di chiusura che non sarebbe necessario il tag <p> supporta le opzioni di allineamento:

align="left"	align="center"	align="right"	align="justify"	Direi che si spiegano da soli :-)

#############################################################################

<div> </div>	Con questa coppia di tag si puo creare un blocco, contenente (testo,immagini o altro) di cui si puo gestire l'allineamento infatti l'attributo di <div> è il solito :

align="valore"	il valore puo essere [left-right-center-justify]

#############################################################################

<h1> </h1>	Tag di intestazione che va' da <h1> il piu grande a <h6> piu	piccolo supporta le opzioni di allineamento (align="valore")

#############################################################################

<br>	Tag di interruzione di riga per mandare a capo il testo se ne puo	usare anche piu di uno per inserire piu righe vuote, non necessita	del tag di chiusura

#############################################################################

<nobr> </nobr>	Tag per mantenere un insieme di parole sulla stessa riga

#############################################################################

<font> </font>	Tag per il controllo dei font e necessario	aggiungere almeno un opzione :

<font face="NomeFont">	per sciegliere il tipo di font

<font size="numero">	specifica le dimensioni del font il valore va'	da 1 (piccolo) a 7 (grande) di default il	valore è 3

<font color="valoreHex">	per impostare il colore

#############################################################################

<tt> </tt>	impostare un carattere a spaziatura fissa

#############################################################################

<b> </b>	grassetto

<i> </i>	corsivo

<u> </u>	sottolineato

<strike> </strike>	testo barrato

<sub> </sub>	pedice

<sup> </sup>	apice

<pre> </pre>	mantiene la formattazione usata nel codice (utile per	ascii art)

<acronym> </acronym>	Per specificare il senso esteso di un acronimo	si utilizza questo tag con l'attributo (title) es:

<acronym title="World Wide Web">WWW</acronym>

La scritta compresa nel campo title compare nella pagina come suggerimento quando si passa con il mouse sull'acronimo WWW

#############################################################################

<hr>	Tag per inserire una linea (utile per separare un blocco di	testo da un immagine o da un altro blocco di testo)

width="valore"	al posto del termine valore si puo imserire il valore in	pixel o in percentuale

size="pixel"	il valore puo essere espresso solo in pixel

align="valore"	valore puo essere [left-center(default)-right]

noshade	elimina l'effetto grafico di profondità della linea

#############################################################################

<blockquote> </blockquote>	Tag per creare un rientro del testo

#############################################################################

######################	ELENCHI #############################

#############################################################################

<ol>

<li>elemento1

<li>elemento2

</ol>

Il tag <ol> supporta l'attributo (type) che puo avere 5 valori

1 = numerazione araba (valore di default)

i = numerazione araba (lettere piccole)

I = numerazione araba (lettere grandi)

a = lettere (piccole)

A = lettere (grandi)

<ul>

<li>elemento1

<li>elemento2

</ul>

Il tag <ul> supporta l'attributo (type) che puo avere 3 valori

disc = un pallino nero (valore di default)

circle = un pallino vuoto

square = un quadretto nero

PER CREARE UN GLOSSARIO :

<dl>

<dt>termine1<dd>definizione1

<dt>termine2<dd>definizione2

</dl>

#############################################################################

##################### INSERIRE IMMAGINI ################################

#############################################################################

<img src="percorso/Nomefile">	Questo è il tag per inserire un immagine	gli attributi sono :

width="pixel"	Larghezza da indicare in pixel

height="pixel"	Altezza da indicare in pixel

alt="descrizione"	descrizione alternativa per chi non visualizza le	immagini

border="numero"	quando l'immagine è usata come link viene circondata da	un bordo,con questo attributo se ne imposta lo spessore,	assegnando il valore (0) si disabilita il bordo

align="valore"	I valori possibili sono 5 :

left	Immagine si trova a sinistra, il testo scorre a destra

right	Immagine a destra, il testo scorre a sinistra

top	Bordo superiore dell'immagine allineato a bordo superiore	testo

middle	Il testo si trova in corrispondenza della meta' del	valore height

bottom	Bordo inferiore immagine allineato a bordo inferiore	testo

hspace="pixel"	per aggiungere spazio orrizontale tra l'immagine ed il	testo(espresso in pixel)

vspace="pixel"	per aggiungere spazio verticale tra l'immagine ed il	testo(espresso in pixel)

#############################################################################

############################### LINK ##################################

#############################################################################

Per inserire un collegamento si usa la coppia di tag <a> </a> tra cui si inserisce le parole che compariranno come link sulla pagina mentre con l'attributo (href) si indica il collegamento vero e proprio ESEMPI :

<a href="percorso/NomeDocumento">clicca qui</a>

Collegamento ad un altra pagina del sito

<a href="http://www.tuttogratis.it">vai al sito</a>

Collegamento ad un sito esterno

<a href="http://www.tuttogratis.it" target="_blank">vai al sito</a>

Apre il collegamento in una nuova finestra, vale per tutti i tipi di link

<a href="http://www.tuttogratis.it"><img src="percorso/NomeFile"></a>

Per utilizzare un immagine come link a cui si possono aggiungere altri attributi

<a name="segnaposto"></a>

<a href="#segnaposto">vai a segnaposto</a>

Con il primo tag si crea una marcatura all'interno della pagina e con il secondo si puo tornare al punto marcato da qualsiasi altra parte della pagina, per tornare al punto marcato da una pagina diversa si deve aggiungere il nome della pagina in cui si trova il tag marcatore all'attributo (href) del secondo tag

<a href="index.html#segnaposto>vai a segnaposto su index.html</a>

Ovviamente al posto di (segnaposto) va inserito un nome diverso per ogni tag marcatore

<a href="mailto:web@hotmail.com">e-mail</a>

Link ad un indirizzo E-mail attiva il programma di posta con il campo (to) attivo

<a href="mailto:nome@dominio.suffisso?subject=Testo_oggetto">mail+Oggetto</a>

attiva il programma di posta con gia inserito anche l'oggetto (subject)

<a href="http://www.html.it" title="italiano sul Web">Visita HTML.it</a>

utilizzando l'attributo (title) si puo aggiungere un commento che verra visualizzato quando si sosta col mouse sul link.

#############################################################################

########################### TABELLE #############################

#############################################################################

Questa è la struttura base di una tabella :

<table>	inizio tabella

<tr>	prima riga

<td> </td>	prima cella della 1 riga

<td> </td>	seconda cella della 1 riga

</tr>	fine prima riga

<tr>	inizio seconda riga

<td> </td>	prima cella seconda riga

</tr>	fine seconda riga

</table>	fine tabella

il tag (table) supporta i seguenti 6 attributi

width="valore"	specifica la larghezza della tabella puo essere espresso	in pixel o in percentuale

align="valore"	Il valore puo essere (left-right-center)

border="pixel"	spessore del bordo (defaul è 1) per eliminare il bordo si	imposta a “0”

cellspacing="pixel"	Imposta la spaziatura tra le celle espresso in pixel

cellpadding="pixel"	imposta la spaziatura tra il contenuto ed i bordi delle	celle

bgcolor="#valoreHex"	imposta il colore di sfondo della tabella

I tag (tr)e(td) supportano i seguenti 3 attributi

align="valore"	Allineamento orrizontale il valore puo essere (left-	right-center)

valign="valore"	Allineamento verticale il valore puo essere (top-	middle-bottom)

bgcolor="#valoreHex"	colore di sfondo

Il tag (td) inoltre supporta i seguenti 2 attributi

rowspan="numero"	estende la cella attraverso il numero di righe	specificato

colspan="numero"	estende la cella attraverso il numero di colonne	specificato

width="valore"	specifica la larghezza della cella puo essere espresso in	pixel o in percentuale

height="pixel"	specifica l'altezza della cella in pixel

Nel caso si volesse creare una tabella vera e propria tornano utili anche questi tag :

<caption></caption>	è il titolo della tabella viene subito dopo il tag	<table>

<thead></thead>	è l'intestazione quella che contiene	indicazioni sul contenuto delle celle al suo interno si puo usare il tag <th></th> al posto di <td></td> così facendo le scritte all'interno delle celle compariranno in grassetto e centrate

<tfoot></tfoot>	è la riga finale che va inserita prima del	corpo della tabella

<tbody></tbody>	è la parte centrale con il contenuto della	tabella

ESEMPIO : uso `*` al posto dei dati

<table width="75%" border="1">

<caption><div align="center"><b>*</b></div></caption>

<thead>

<tr>

<th width="20%">*</th>

<th width="40%">*</th>

<th width="40%">*</th>

</tr>

</thead>

<tfoot>

<tr>

<td ><b>*</b></td>

<td >*</td>

<td >*</td>

</tr>

</tfoot>

<tbody>

<tr>

<td >*</td>

<td >*</td>

<td >*</td>

</tr>

<tr>

<td >feb</td>

<td >20.000</td>

<td >2.000</td>

</tr>

</tbody>

</table>

######################################################################################################## FRAME ############################## #############################################################################

<framset></framset>	sostituendo questi tag ai tag <body></body> si crea	una pagina basata sui frame. supporta i seguenti	attributi.

rows="valore,valore"	per dividere la pagina in righe. Il valore puo	essere [percentuale%-pixel-*]il carattere "*"	indica una dimensione dinamica si potrebbe	usare anche rows="*,2*"	crea due righe	dinamiche di cui la 2a il doppio della 1a. Ogni	valore deve essere separato da una virgola.

cols="valore,valore"	per dividere la pagina in colonne vale lo	stesso che per l'attributo (rows).

usando le colonne una buona soluzione è definirne una fissa in pixel e una dinamica; cols="150,*" ma ovviamente l'unico limite è la fantasia.

###########################################################

Per creare pagine divise in righe e colonne bisogna annidare i tag <framset>. Ad esempio per avere una pagina formata da una riga superiore alta 100 pixel e una inferiore divisa in due colonne una fissa a 150 pixel ed una dinamica il codice è questo:

<html>

<head>

<title></title>

</head>

<framset rows="100,*">

<frame src=" ">

<framset cols="150,*">

<frame src=" ">

<frame src=" ">

</framset>

</framset>

</html>

#############################################################

con gli attributi :

frameborder="pixel"	framespacing="pixel"	border="pixel"

si impostano bordi e spaziature tra i frame, inpostandoli tutti a "0" si eliminano i bordi, questi attributi vanno aggiunti a tutti i tag <framset> nelle strutture annidate.

<frame src="percorso/file.html">	indica la pagina da caricare nel frame, in caso di pagine divise in colonne la prima istanza di <frame> indica la prima colonna a sinistra, in pagine divise in righe il primo <frame> indica la prima riga in alto. Non necessita del tag di chiusura.

attributi :

scrolling="valore"	per impostare le barre di scorrimento, i valori	possibili sono : yes - no - auto

noresize	per impedire di ridimensionare i frame

name="nome"	per assegnare un nome al frame questo è molto	importante per poi gestire l'apertura dei link	all'interno del frame desiderato

Per guidare l'apertura dei link bisogna spostarsi nella pagina html e nel tag del link aggiungere l'attributo target="nomedelframe" per questo è importante aggiungere sempre l'attributo name al tag <frame>.

l'HTML consente di impiegare "valori speciali" per indirizzare contenuti dei link :

target="_blank"	apre in una nuova pagina

target="_self"	apre nello stesso frame che contiene il link

target="_parent"	apre nel framset primario

target="_top"	apre nella finestra ingrandita e si sostituisce agli	altri frame sulla pagina

<noframes></noframes>	aggiungendo questi tag dopo l'ultimo tag </framset> si può indicare un messaggio ai visitatori che non visualizzano i frame ed eventualmente indirizzarli ad una versione della pagina che non usa i frame.

Per inserire dei frames in una pagina html normale si usano i tag :

<iframe width="300" height="200" src="pagina.html">

<frame width="300" height="200" src="pagina.html">

</iframe>

questi attributi sono necessari e vanno ripetuti sia per il tag <iframe> d'apertura che nel tag <frame> per controllare con precisione l'allineamento si puo gestire il frame come se fosse un immagine ed utilizzare l'attributo :

align="valore"	hspace="valore"	vspace="valore"

###################################################################################################### - DA RICORDARE | CONSIGLI - ####################

#############################################################################

È importante assegnare sempre un colore alla pagina, anche quando lo sfondo è bianco (assegnando "bgcolor="#ffffff"). Infatti come impostazione predefinita il browser assegna alla pagina il colore di sfondo che l'utente ha impostato nella finestra del sistema operativo, se questo non viene impostato dall'attributo (bgcolor)

#############################################################################

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

Aggiungendo questi attributi nel tag <body> si evita che i browser visulizzino dei margini attorno alla pagina. 2 sono per (IE) gli altri due per quelli compatibili Netscape.

Nelle pagine basate sui frame quest attributi vanno aggiunti a tutti i tag <frame>

#############################################################################

Impostare sempre le dimensioni delle immagini per semplificare il lavoro del browser ed ottenere un maggiore controllo sull'aspetto della pagina

#############################################################################

Creando delle tabelle di dimensioni piu piccole della pagina è utile allinearle al centro utilizzando il tag:

<div align="center">

#############################################################################

Per inserire nelle pagine un comando che funziona come i tasti avanti e indietro del browser il codice da utilizzare è :

<a href="javascript:history.go(-1)">indietro</a>

<a href="javascript:history.go(1)">avanti</a>

#############################################################################

Per aprire un collegamento in una nuova finestra del browser si inserisce target="_blank" nel tag <A HREF>. Se vogliamo che tutti i collegamenti contenuti in una pagina web puntino ad una nuova finestra del browser possiamo inserire tra <HEAD> e </HEAD>:

<BASE target="_blank">

Fatto questo non abbiamo bisogno di specificare nulla in <A HREF>.

Se vogliamo aprire tramite un link una finestra dalle dimensioni predefinite basta inserire tra <HEAD> e </HEAD> il seguente codice:

<SCRIPT language="JavaScript">

function apri(){open('Url del file da aprire','titolo', 'height=360 width=400', 'toolbar=1, scrollbars,resizable');}

</SCRIPT>

e dopo creare un link nella pagina web utilizzando il codice:

<A HREF=javascript:apri()>Apri finestra</A>

Possiamo modificare il codice tra <HEAD> e </HEAD> per personalizzare la finestra che vogliamo aprire:

height e width sono l'altezza e la larghezza in pixel;se toolbar=1 avremo una finestra con la barre degli strumenti, se invece è uguale a zero non avremo la barra degli strumenti; se togliamo scroolbar la finestra non avrà le barre di scorrimento (né verticali, ne orizzontali); se togliamo resizable la finestra non potrà essere ridimensionata.

#############################################################################

CARATTERI SPECIALI : L' (&) indica l'inizio di un carattere speciale, mentre (;) ne indica la fine.

&nbsp; ( spazio)

&lt; (minore)

&gt; (maggiore)

&amp; (&)

&quot; (virgolette)

&shy; (trattino)

Il linguaggio HTML ci permette di inserire soltanto uno "spazio" da tastiera; quindi, per inserire più spazi bisogna utilizzare il carattere speciale: &nbsp;

#############################################################################

FOGLI DI STILE (CSS)

Per utilizzare i CSS in una pagina html si utilizzano 3 sistemi :

1) <link rel=stylesheet href="percorso/.css" type="text/css">

si crea un collegamento verso il file .css appositamente creato. il tag và inserito tra i tag <head></head> dopo <title></title>. (collegato)

2) si scrive il foglio di stile all'interno della pagina html. il css inizia e finisce con i tag <style></stile> va scritto tra i tag <head></head> dopo <title>. (incorporato)

3) si aggiunge l'attributo (style="selettore: attributo;"). Come ad esempio:

<p style="font-family: helvetica;">

(in linea)

Si possono usare anche tutte e 3 le tecniche nel qual caso gli stili (in linea) hanno la precedenza su quelli (incorporati) che hanno la precedenza su quelli (collegati)

#############################################################################

PaginaN°(9)	Guida all'HTML by ^shiva^	html-TAG

shiva

2004-06-02T23:29:03

shiva