- Cos'e' l'HTML?
- Tag e attributi
- Impostare una pagina HTML
- Il tag body
- Formattazione del testo
- Paragrafi, allineamento e blocchi
- Inserire un'immagine
- Collegamenti ipertestuali e ancoraggi con nome
- Le tabelle
- I moduli
- Utilizzo dei frame
L'HTML (hypertext markup language) è un sistema basato sul contrassegno che,
attraverso un'apposita sintassi (tag html) ci permette di realizzare pagine web.
In pratica, sfruttando i tag che l'html, giunto ormai alla versione 4, ci mette
a disposizione, andiamo a dare al browser le coordinate per l'inserimento e la
formattazione di ciascun elemento.
Per chi comincia da zero è consigliabile utilizzare il notepad di windows per scrivere il codice html delle pagine che si andranno a realizzare. Esse avranno sempre estensione .htm o .html. Esistono tuttavia appositi editor visuali che permettono di operare con maggiore semplicità (frontpage, dreamweaver ecc...)
Torna su
Un tag HTML è un comando che permette di delineare un elemento, e di influenzarlo attraverso l'istruzione che contiene. Ad esempio se vogliamo applicare il grassetto ad una parola, useremo la coppia di tag <b></b> (tag di apertura e tag di chiusura) e al loro interno digiteremo la parola in questione. Un ATTRIBUTO, associato ad un tag, è un'ulteriore proprietà di formattazione. ES: <font face=arial>testo</font> - l'attributo 'face' formatta il nostro testo, associando ad esso il carattere Arial.
Torna su
Tutte le pagine che vorremo realizzare, dovranno avere necessariamente un'impostazione di base, per essere riconosciute e processate dal browser di navigazione:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
I tag <html></html> aprono e chiudono la
pagina;
Nei tag <head></head> andranno (oltre al titolo della pagina)
meta-tag (che vedremo in seguito), script, fogli di stile, ecc;
I tag <title></title> conterranno il titolo del nostro
documento;
Infine i tag <body></body> conterranno il corpo della pagina,
il testo e tutti gli altri tag per la formattazione degli elementi che
inseriremo.
Torna su
Come abbiamo visto, all'interno dei tag <body></body>, vanno tutti gli elementi che verranno visualizzati a video. Questo tag supporta molti attributi, tra cui, i più importanti sono:
bgcolor - colore di sfondo*;
background - immagine di sfondo**;
topmargin - margine superiore***;
leftmargin - margine sinistro;
bottommargin - margine inferiore;
rightmargin - margine destro;
marginwidth - larghezza margini;
marginheight - altezza margini;
ES: <body topmargin=1 bgcolor=#ffffff></body> - in questo caso il margine superiore della nostra pagina avrà ampiezza 1 e il colore di sfondo sarà bianco (#ffffff).
* Nome colore o codice colore;
** Se non si trova nella stessa cartella, specificare il path;
*** Valore numerico
Torna su
Quelli che seguono sono i tag più usati per formattare il
testo (stile del testo, colore del testo, grandezza del testo).
I tag di stile titolo e l'effetto che producono:
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
Il tag FONT
La coppia di tag è utilizzata per definire tipo, grandezza e colore del testo
racchiuso in essa.
Ad esempio, attraverso la riga di codice:
<font face=verdana size=2 color=#000000>testo</font>
stabilisco che la parola 'testo',
contenuta nei tag <font></font>, sia di tipo Verdana (attributo
face), di grandezza 2 (attributo size) e di colore nero (attributo color).
Altri TAG
<b></b>: applicano lo stile grassetto al testo che è racchiuso in
essi;
<i></i>: applicano lo stile corsivo al testo che è racchiuso in
essi;
<u></u>: applicano lo stile sottolineato al testo che è racchiuso
in essi.
Torna su
Definire un paragrafo e allineare il testo:
Per definire un paragrafo occorre utilizzare gli appositi tag <p>testo del paragrafo</p>. Tutto il testo che racchiudono, farà parte dello stesso paragrafo.
Per allineare il testo occorre utilizzare l'attributo align.
ES1: <p align=center>testo allineato al centro</p> - Il testo sarà
allineato al centro della pagina;
ES2: <p align=left>testo allineato a sinistra</p> - Il testo sarà
allineato sul lato sinistro della pagina;
ES3: <p align=right>testo allineato a destra</p> - Il testo sarà
allineato sul lato destro della pagina
ES4: <p align=justify>testo giustificato</p> - Il testo sarà
giustificato e si adatterà alla pagina e ai margini.
Interruzioni di riga
Le interruzioni di riga servono per interrompere appunto una riga di testo in un punto, facendola riprendere a capo rigo. Il tag utilizzato è <br> (break) e non prevede un ulteriore tag di chiusura.
Definire dei blocchi
Spesso in html è utile definire dei blocchi, siano essi di solo testo, testo e immagini, o altri elementi. La coppia di tag utilizzata è <div></div> che indicano l'inizio e la fine di un blocco. Il tag <div> supporta l'attributo align (come abbiamo visto per i paragrafi).
Torna su
Per inserire un'immagine in
HTML, viene usato il tag
<img> insieme all'attributo src:
<img src="immagine"> (se l'immagine non si trova nella stessa
cartella, occorre definire il path). Come per il tag <br>, anche il tag
<img> è di sola apertura (non prevede un tag di chiusura).
Principali Attributi
Tra gli attributi che il tag <img> supporta, quelli che occorre conoscere sono:
-
src - path immagine
-
alt - testo che appare quando ci fermiamo col puntatore sull'immagine o quando
non visualizziamo l'immagine stessa -
border - valore numerico
-
width - valore numerico che esprime la larghezza in pixel
-
height - valore numerico che esprime la larghezza in pixel
ES: <img src="immagine.gif" width=40 height=70 alt="la mia immagine" border="0"> - Stiamo inserendo l'immagine 'immagine.gif', la larghezza è di 40 pixel, l'altezza di 70, il testo alternativo o esplicativo è 'la mia immagine', il bordo è uguale a 'zero' (nessun bordo).
Torna su
Probabilmente rappresentano la parte più importante
nell'HTML
poichè ci permettono di spostarci all'interno di un sito, visitandone tutte le
pagine, o da un sito all'altro.
La coppia di tag utilizzata per inserire un collegamento ipertestuale è <a></a>.
Al tag <a> bisogna associare l'attributo href. All'interno dei tag <a></a> andrà il testo o l'immagine, a cui vogliamo assegnare il collegamento.
Se ad esempio vogliamo fare in modo che il visitatore del sito, cliccando sull'immagine 'immagine.gif' venga portato al sito 'http://www.vuolo.net', useremo la seguente sintassi:
<a href="http://www.vuolo.net"><img src="immagine.gif" border=0></a>
Nel tag img abbiamo utilizzato l'attributo 'border=0' per fare in modo che l'immagine non sia bordata. Infatti, quando applichiamo un link a un'immagine, essa, di default, viene bordata.
L'uso dei TARGET*
Il tag <a> prevede, tra gli altri, l'attributo target="destinazione del collegamento", dove, per destinazione del collegamento si intende in quale finestra sarà aperta la pagina a cui è collegato il link su cui andremo a cliccare. Se non impostiamo alcun target, verrà riutilizzata la medesima finestra del browser. Se invece all'attributo target daremo il valore _blank, vale a dire target="_blank", cliccando sul collegamento ipertestuale, la pagina ad esso collegata sarà aperta in una nuova finestra.
*L'impiego dei target è molto utile se si utilizzano i frame.
Ancoraggi con nome
Creare un ancoraggio con nome significa definire un 'segnalibro' all'interno di una pagina web e far puntare ad esso un collegamento ipertestuale. Si tratta in pratica di costituire un link che consente la navigazione all'interno dello stesso documento web. Prima di tutto occorre definire il segnalibro:
<a name="segnalibro">Testo</a>
In secondo luogo bisognerà creare il collegamento che punta al segnalibro così creato:
<a href="#segnalibro">Vai al segnalibro creato</a>
Ora cliccando sul link 'Vai al segnalibro creato', saremo portati direttamente
alla parola 'Testo'.
(è possibile assegnare segnalibri non solo al testo ma anche ad altri elementi,
come ad esempio alle immagini).
Torna su
Le tabelle, in HTML, oltre ad un uso classico (catalogazione
ecc..) vengono usate per creare il layout delle pagine web. UN giusto utilizzo,
infatti, anche se comunque limitato, consente di creare siti web di grande
impatto visivo.
Per inserire una tabella si utilizzano i tag <table></table>. Al loro interno vanno ancora i tag <tr></tr> che marcano una riga; nidificati tra questi, a loro volta, vanno i tag <td></td> che delineano invece le colonne (celle). All'interno di questi ultimi andranno gli elementi racchiusi nella tabella. Il codice sorgente avrà così la seguente struttura:
<table
width=100
height=100 align=center bgcolor=#ffffff background="path/img.jpg"
cellspacing=0 cellpadding=0>
<tr>
<td width=50 height=50 valign=top bgcolor=#000000 background="path/img.gif">testo,
immagini, altri elementi</td>
</tr>
</table>
Come si può notare sono stati inseriti degli attributi propri delle tabelle (e delle celle in esse contenute):
width - larghezza tabella o cella
espressa in pixel;
height - altezza tabella o cella espressa in pixel;
align - allineamento tabella o allineamento elementi cella (center, left,
right, justify);
bgcolor - colore di sfondo della tabella o della cella, espresso in
codici esadecimali o nomi dei colori;
background - immagine di sfondo della tabella o della cella;
valign - allineamento verticale degli elementi contenuti nella cella
(top, middle, bottom...);
cellspacing - lo spazio (in pixel) tra le celle che compongono la
tabella;
cellpadding - lo spessore (in pixel) del margine delle celle che
compongono la tabella;
Esistono inoltre due ulteriori attributi, colspan=numero e rowspan=numero, che applicati ad una cella (td) specificano rispettivamente il numero di colonne e righe espandibili su una cella:
1-2-3 ecco il codice che genera questa piccola tabella:
<table width="100"
border="1" cellspacing="0" cellpadding="0" align="center">
<tr> ........................................(inizio
prima riga)
<td>1</td> .............................(prima cella/colonna)
<td>2</td> .............................(seconda
cella/colonna)
</tr> ......................................(fine prima riga)
<tr> .......................................(inizio seconda riga)
<td colspan="2">3</td> .........(terza
cella/colonna)
</tr> ......................................(fine seconda riga)
</table>
Torna su
Generalmente l'utilizzo dei moduli
(form) è associato
all'impiego di script installati sul server (cgi ecc..) ma è comunque possibile
impiegarli senza ricorrere necessariamente ad alcuno script.
I tag che vengono usati per delineare un modulo in HTML sono <form></form>. Al loro interno vengono inseriti ulteriori tag che richiamano gli altri elementi del modulo:
<form action="mailto:webmaster@guidainlinea.com"
method="get/post">
(in questo esempio il modulo invia i dati che andremo ad inserire all'indirizzo
email contenuto nell'action; per il metodo d'invio, method, si consiglia di
utilizzare 'post'. In questo modo i dati saranno inviati al server
separatamente.)
<input type="hidden" name="nome1">
(tipo nascosto, utile per inviare informazioni ad uno script installato sul
server che rielaborerà i dati)
<input type="text" size="30" maxlenght="50"
name="nome2" value="valore_iniziale">
(visualizza una casella di testo all'interno della quale è possibile digitare
dei dati)
<input type="checkbox" name="nome3" checked>
(visualizza una casella spuntata che può essere selezionata o deselezionata
dall'utente. In questo esempio è selezionata poichè è presente l'attributo 'checked'.
Naturalmente è possibile inserire del testo prima o dopo il tag che
affiancherà la casella di testo)
<input type="password" name="nome4" size="15"
maxlenght="50">
(visualizza una casella di testo particolare, dedicata all'inserimento delle
password. Infatti, se proviamo ad inserire del testo al suo interno, questo
sarà criptato)
<input type="radio" name="scelta" value="scelta1">
<input type="radio" name="scelta" value="scelta1"
checked >
<input type="radio" name="scelta" value="scelta1">
(utile allorchè si debba selezionare una sola tra più opzioni di scelta.
Infatti selezionandone una si deselezionano automaticamente le altre. Come si
può notare, la casella centrale è già selezionata perchè è stato inserito
l'attributo 'checked' all'interno del tag)
<input type="reset" value="reimposta">
(visualizza un pulsante che permette di resettare/azzerare il modulo,
cancellando eventualmente tutti i dati precedentemente inseriti)
<input type="submit" value="invia">
(visualizza un pulsante che permette l'invio del modulo)
<input type="image" src="path_immagine">
(visualizza un'immagine al posto del pulsante di 'submit')
<select size="1" name="elenco">
<option value="seleziona" selected>seleziona
<option value="1">opzione1
<option value="2">opzione2
<option value="3">opzione3
</select>
(visualizza un elenco/menù a discesa, contenente valori precedentemente
inseriti che possono essere selezionati)
<textarea wrap="virtual" row="numero righe" cols="numero
colonne">
testo da visualizzare nel textarea
</textarea>
(visualizza un'area dedicata all'inserimento di testo. L'attributo wrap="virtual"
fa in modo che il testo torni a capo automaticamente una volta raggiunto il
margine destro del textarea. Impostato invece su 'physical' consente al testo di
procedere orizzontalmente, anche oltre il bordo del textarea. In questo secondo
caso compariranno le barre di scrolling orizzontali)
</form>
Torna su
L'utilizzo dei frame in un sito web è da sempre stato oggetto
di accesi dibattiti. Molte volte si è discusso se fosse giusto o meno
suddividere una pagina web in più frame differenti.. Fondamentalmente si tratta
di gusti personali visto che le nuove versioni dei browser più diffusi li
supportano appieno. Diciamo solo che in termini di risorse tecniche, una pagina
che utilizza i frame ne richiede di più di una che non li impiega (inoltre è
più difficile il processo d'indicizzazione sui motori di ricerca).
Infatti una pagina contenente dei frame deve essere composta come minimo da tre pagine html, una nella quale sono presenti le istruzioni di base (frameset) e altre due che saranno richiamate in due diverse finestre (o frame). L'una sarà indipendente dall'altra.
Per prima cosa bisogna creare un FRAMESET che conterrà i tag e gli attributi necessari a determinare la struttura della pagina completa. Esso avrà generalmente questa struttura:
<html>
<head>
<title>Frameset</title>
<frameset rows="50,*">
(il frameset crea un frame in alto con larghezza relativa, 100%, e altezza 50
pixel)
<frame src="intestazione.html" name="intestazione">
(nel frame superiore è richiamato il file 'intestazione.html')
<frameset cols="30%,*">
(il frameset crea due ulteriori frame affiancati, entrambi con larghezza
relativa 30% e 70%)
<frame src="sx.html" name="sinistro">
(il tag richiama nel frame di sinistra il file 'sx.html')
<frame src="dx.html" name="destro">
(il tag richiama nel frame di destra il file 'dx.html')
</frameset>
</frameset>
</html>
Alcuni attributi del FRAMESET
Border - spessore bordo espresso in pixel"
Frameborder - 1 per sì, 0 per no
Rows - misura1, misura2 ...
Cols - misura1, misura2 ...
L'attributo TARGET e i frame
Supponendo di avere una pagina composta da due frame, ipotizziamo di aver creato nel frame superiore un collegamento ipertestuale ad una nuova pagina con questa sintassi:
<a href="pagina.html">PAGINA</a>
Cliccando sul link ci renderemo conto che il documento html verrà visualizzato nell'interezza della finestra del browser facendoci uscire dalla pagina con i frame. Da quio l'utilità dell'attributo TARGET che ci consente di definire la destinazione del collegamento ipertestuale. Se infatti vogliamo che la pagina 'pagina.html' venga visualizzata nel frame inferiore, supponendo di aver precedentemente nominato questo frame 'inferiore' (con l'attributo 'name'), basterà modificare il codice in questo modo:
<a href="pagina.html" target="inferiore">PAGINA</a>
Così per i restanti links.
Il tag NOFRAME
Per evitare che i browser di vecchia generazione, non compatibili con la teconologia dei frame, visualizzino una pagina bianca al posto di una pagina web composta da più frame, si utilizza la coppia di tag <noframe></noframe>, inserendo al loro interno ciò che vogliamo venga visualizzato in questa situazione.
IFRAME, il frame interno
La coppia di tag <iframe></iframe> ci permette di inserire un frame interno, in un punto ben definito di una pagina web, e di richiamare al suo interno un qualsiasi file html (come per i normali frame). La sintassi utilizzata è la seguente:
<iframe src="pagina.html" width="200" height="300"></iframe>
Il tag IFRAME è stato inserito con la versione 4.0 del linguaggio HTML e non è compatibile con tutti i browser di navigazione.
Torna su
PER CHI CONOSCE LA LINGUA INGLESE
|
"La Guida per Principianti
all'HTML" - by NCSA Questa guida molto facile ma allo stesso tempo molto efficace vi introdurrà nell' uso dell'HTML e vi aiuterà a creare files per il Web. Questa è la guida primaria per produrre documenti in HTML, il HyperText Markup Language usato nel World Wide Web. Basta vedere da chi è stato fatto - NCSA. Inoltre troverete due link per scaricarlo in formato zip e pdf.
"A Beginner's Guide to HTML"
- by NCSA |
| Oppure potete scaricare un
programma in inglese che vi aiuterà con facilità ad apprendere l'
HTML senza nessuna esperienza precedente. Download del programma - TeachHTML.exe offerto dalla Pinsoft. TEACH ME HTML - by Pinsoft The easy way to learn HTML without any knowledge of HTML - by Pinsoft |