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...)
2. Tag e attributi
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.
3. Impostare una pagina HTML
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.
4. Il tag Body
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
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
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.
6. Paragrafi, allineamento e blocchi
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).
7. Inserire un'immagine
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).
8. Collegamenti ipertestuali e ancoraggi con nome
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:
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).
9. Le tabelle
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:
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:
........................................(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>
10. I moduli
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
<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>
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.)
11. Utilizzo dei frame
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:
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:
