Corso di HTML (Le Basi)
di Pierluigi
HTML minimo
Un documento standard HTML è delimitato da un tag specifico (<html>).Presenta due parti distinte, denominate intestazione e corpo della pagina, individuate da opportuni tag (<head> e <body>). Il nome della pagina è determinato dal tag di titolo (<title>) contenuto nella testa.
La struttura elementare di una pagina HTML è dunque:
<html>
<head>
<title>Esempio HTML</title>
</head>
<body>
Ecco il risultato!
</body>
</html>
<HTML></HTML>
Questo tag indica al browser che ciò che segue è un file HTML. La stessa indicazione viene fornita anche dalla estensione del file che se possibile sarà .html altrimenti solo .htm. Ogni documento HTML deve essere racchiuso tra la parte iniziale e finale di questo tag.
Commenti
<!-- Qui dentro possono essere scritti i vari commenti -->
L'utilizzo di commenti opportuni rende la lettura del sorgente piu' semplice ed immediata .
<HEAD></HEAD>
Questo tag identifica la prima parte del documento (quella contenente il titolo).
<TITLE></TITLE>
Questo tag si trova all'interno della prima parte del documento, quella fra i limitatori <head> e </head>. Dentro questo tag e il suo delimitatore di chiusura si trova il titolo della pagina, di solito visualizzato in alto nella finestra del browser. Di regola dev'essere qualcosa di breve (massimo 64 caratteri compresi gli spazi bianchi) ma unico e rappresentativo perché può essere usato per ricerche sul server.
Altri tag dentro <head>......</head>
<ISINDEX [PROMPT=richiesta] [ACTION="url"]>
Si informa il browser che il documento può essere utilizzato per una ricerca a chiave e contenere quindi una "query"in fondo al proprio URL del tipo: req=url?chiave. A tal fine verràattivato uno script, cioè un programma, che eseguirà la ricerca.ACTION specifica l'indirizzo del gateway a cui dev'essere passata la stringa di ricerca.
<BASE HREF="url">
Stabilisce la Url del documento da usare come base per i riferimenti relativi. E' preferibile evitare il suo utilizzo a meno che sia l'unica via per evitare errori di indirizzamento.
<BASEFONT SIZE=#>
Stabilsce la dimensione base del carattere utilizzato nel testo. Il numero # può variare tra 1 e 7,se non viene indicato il valore di default è 3 come quello utilizzato per questo documento.
<SCRIPT>...</SCRIPT>
Contiene il testo di uno script.
<STYLE>...</STYLE>
Contiene definizioni di stile.
<LINK [REF=tipo riferimento] [REV=tipo inverso] [TITLE="nome"]HREF=url>
Contiene riferimenti come: autore, documenti correlati. In futuro verrà utilizzato per creare in automatico una barra di navigazione. REF (in alcuni manuali si trova scritto REL) stabilisce il tipo di relazione dal link a questa pagina. Possibili valori sono: home, toc (table of contents), index, glossary, copyright, bookmark, up, next, previous, help. L'attributo REV specifica una relazione inversa da questa pagina al link. Possibili valori sono: made (per l'autore e il suo indirizzo di posta elettronica) e tutti quelli utilizzabili con REF. L'attributo TITLE specifica un titolo per il link.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
Questo tag è il primo elemento di ogni documento che utilizzi l'HTML 3.2.
<META [NAME="..."] CONTENT="..." [HTTP-EQUIV="..."]>
Viene utilizzato per specificare varie proprietà della pagina:
<META HTTP-EQUIV="Refresh" CONTENT="#; URL=url" >
Dopo # secondi carica il nuovo url. (Solo Netscape 1.1)
<META HTTP-EQUIV="Expires" CONTENT="Mon, 12 Apr1997 04:12:00 GMT" >
Specifica una data di scadenza per la pagina così che sarà ricaricata.
<META HTTP-EQUIV="Keywords" CONTENT="keyword1,keyword2,..." >
Specifica delle parole chiave per certi servizi di ricerca.
<META HTTP-EQUIV="Description" CONTENT="Descrizione">
Specifica la descrizione della pagina per alcuni servizi di ricerca.
<BODY>...</BODY>
Questo tag identifica la seconda parte del documento. E' qui che si trovano tutte le direttive che creano l'intera pagina. La sintassi completa di tutti gli attributi (opzionali) è:
<BODY [BGCOLOR="#RRGGBB"] [TEXT="#RRGGBB"] [LINK="#RRGGBB"] [VLINK="#RRGGBB"] [ALINK="#RRGGBB"] [BGPROPERTIES=FIXED] [LEFTMARGIN=#] [TOPMARGIN=#]>
BGCOLOR=colore RRGGBB dello sfondo.
TEXT=colore RRGGBB del testo.
LINK=colore RRGGBBdei link.
VLINK=colore RRGGBBdei link visitati.
ALINK=colore RRGGBBdel link attivato (solo Xmosaic 2.7 e Netscape1.1).
BGPROPERTIES=FIXED stabilisce che lo sfondo sia fisso e che quindi non possa "scrollare".
LEFTMARGIN=# stabilisce il margine sinistro per l'intera pagina.
TOPMARGIN=# stabilisce il margine superiore per l'intera pagina.
I colori sono espressi come RGB (red, green, blue) ed ognuno di essi è rappresentato da un numero da 0 a 255 espresso in notazione esadecimale.Riportiamo una tabella dei colori con i codici esadecimali di alcune tonalità cromatiche.
Se, anziché stabilire un colore per lo sfondo, si vuole utilizzareun'immagine con cui riempire la pagina si può utilizzare l'attributo BACKGROUND. In questo caso l'intero fondo verrà ricoperto con l'immagine selezionata. Se l'immagine scelta per lo sfondo risulta più piccola delle dimensioni della pagina, ne vengono utilizzate più copie affiancate.
<BODY BACKGROUND="url dell'immagine da usare per lo sfondo">
Formattazione
Per rendere il documento più leggibile o anche solo esteticamente più gradevole, si possono utilizzare svariati tag. Con questi è possibile modificare lo stile con cui verrà visualizzato il testo, la spaziatura fra i paragrafi, la dimensione dei caratteri, ecc.
<H# [ALIGN=left|right|center] [CLEAR=left|right|all]></H#>
Racchiude un titolo di livello # (da 1 a 6). L'attributo ALIGN consente di allineare l'inizio del nuovo paragrafo a sinistra, a destra, oppure al centro. L'attributo CLEAR permette di tener conto anche delle immagini presenti in quella riga, muovendo l'inizio della linea successiva abbastanza in basso affinchè il margine sinistro|destro|entrambi sia libero da ogni parte di immagini della riga soprastante.
<BR [CLEAR=left|right|all]>
Va a capo. Per l'attibuto CLEAR vale quanto detto per <h#>.
<NOBR></NOBR>
Inibisce l'a-capo. (solo Netscape)
<WBR>
Permette l'a-capo in una parola o se inibito. (solo Netscape)
<P [ALIGN=left|right|center] [CLEAR=left|right|all]>[</P>]
Delimita un paragrafo. Non richiede tag di chiusura perchè esegue un'azione ben circostanziata. Per i due attributi vale quanto già detto in <h#>.
<DIV [ALIGN=center|left|right|justify]></DIV>
Allineamento del blocco. (HTML 3.0)
<PRE [WIDTH=#]></PRE>
Racchiude un testo preimpaginato, dove gli spazi non vengono contratti, le linee non vengono concatenate e lo stile è necessariamente quello a spaziatura fissa. Utile, ad esempio, se si vuole inserire il sorgente di un programma o una tabella. È possibile inserire qualunque altro tag, che non verrà conteggiato come carattere.
<SPACER [ALIGN="right|left|top|middle|bottom|texttop|absmiddle|baseline|absbottom] [HEIGHT=#] [WIDTH=#] [SIZE=#] [TYPE="horizontal|vertical|block]></SPACER>
Inserisce blocchi di spazi intorno ai documenti. L'attributo ALIGN serve per l'allineamento, mentre HEIGHT e WIDTH stabiliscono l'altezza e la larghezza del blocco quando TYPE=block (cioè se c'è l'inserimento di un rettangolo di spazio come fosse una immagine. Se TYPE=horizontal allora c'è l'inserimento di spazio tra due parole, se TYPE=verticalc'è l'inserimento di spazio tra due linee. In entrambi i casi si utilizza l'attributo SIZE per stabilire la larghezza dello spazio.
<HR [SIZE=#] [WIDTH=#%] [ALIGN=left|right|center] [NOSHADE] >
Visualizza una linea orizzontale. L'attributo SIZE definisce lo spessore della riga come numero intero crescente. L'attributo WIDTH permette di definire la percentuale di finestra che sarà occupata dalla riga di separazione. L'attributo ALIGN permette di allineare la riga ad uno dei margini. L'attributo NOSHADE rende la riga di separazione come una barra solida togliendo l'effetto 3D. Non richiede tag di chiusura.
<CENTER></CENTER>
Per allineare al centro. (solo Netscape, in conflitto con HTML 3.0)
<ADDRESS></ADDRESS>
Racchiude un indirizzo scritto in corsivo e come paragrafo separato.
<BLOCKQUOTE><BLOCKQUOTE/>
Racchiude il testo di una citazione su un paragrafo Rientrato.
<EM></EM>
Stile enfatizzato. Corsivo.
<STRONG></STRONG>
Stile marcato. Neretto.
<DFN></DFN>
La formattazione eseguita fa sembrare il contenuto come una definizione.
<CITE></CITE>
Stile citazione. Corsivo.
<CODE></CODE>
Stile codice programma.
<SAMP></SAMP>
Stile esempio.
<KBD></KBD>
Stile immissione da tastiera. Spaziatura fissa.
<VAR></VAR>
Stile variabile.
<MULTICOL></MULTICOL>
Dispone il testo in colonne. Gli attributi possibili sono COLS=# per stabilire il numero di colonne, GUTTER=# per specificare il numero di pixel fra ogni colonna, e WIDTH=# per la larghezza dell'insieme di colonne.
<BIG></BIG>
Font grande.
<SMALL></SMALL>
Font piccolo.
<BLINK></BLINK>
Fa lampeggiare il testo contenuto al suo interno.
<FONT SIZE=#></FONT>
Stabilisce le dimensioni del carattere utilizzato facendo variare # tra 1 e 7. Anzichè # può essere utilizzato +|-# per effettuare variazioni nelle dimensioni del carattere relativamente alla base del font.
<FONT COLOR="#RRGGBB"></FONT>
Stabilisce il colore del font.
<B></B>
Stile fisico grassetto.
<I></I>
Stile fisico corsivo (italico).
<U></U>
Stile fisico sottolineato.
<S></S>
Stile fisico depennato.
<SUB></SUB>
Scritta a pedice.
<SUP></SUP>
Scirtta ad apice.
<TT></TT>
Stile fisico macchina da scrivere. Spaziatura fissa.
Liste
Se occorre presentare più link oppure creare un glossario, risulta conveniente l'utilizzo di una forma a lista.
<UL [TYPE=disc|circle|square]></UL>
Crea una lista semplice. L'attributo TYPE permette di definire il simbolo associato ad ogni voce del menu.
<OL [TYPE=A|a|I|i|1] [START=#]></OL>
Crea una lista numerata. L'attributo TYPE definisce il tipo di contatore. L'attributo START definisce il valore iniziale del contatore.
<LI [TYPE=A|a|I|i|1] [START=#]>
Crea un elemento di una lista precedente. Con gli attributi è possibile cambiare lo stile precedente.
<DL></DL>
Identifica una lista di termini (titoli) e le loro corrispondenti definizioni (testi).
<DT>
Precede ogni titolo.
<DD>
Precede ogni testo.
Collegamenti
Nell'utilizzo delle capacità ipertestuali del WWW, risultano fondamentali i link (collegamenti) tra i vari documenti. Grazie a questi è possibile realizzare navigazioni personalizzate attraverso una rete di pagine.
<A NAME="nome dell'àncora"></A>
Si definisce un'ancora nel testo, cioè un sistema che permette di raggiungere esattamente quel punto del documento, cliccando su un richiamo situato altrove.
<A HREF="url"></A>
Richiama il file indicato da "url", di qualsiasi genere, sia testo che immagini.
<A HREF ="nome dell'àncora"></A>
Effettua un collegamento (link) ad un punto del testo (ad un'àncora).
<A HREF ="url#nome dell'àncora"></A>
Effettua un collegamento ad un'àncora situata nel file indicato dall'url.
Altri possibili tag sono :
onClick="..." Nel caso che il collegamento faccia riferimento ad uno script, specifica che l'attivazione avverrà dopo il cliccaggio con il mouse.
onMouseOver="..." Nel caso che il collegamento faccia riferimento ad uno script, specifica che l'attivazione avverrà semplicemente con il passaggio del puntatore del mouse sopra il link.
REL="..." Specifica la relazione relativa.
REV="..." Specifica la relazione inversa (i valori possibili sono gli stessi di REL).
TARGET="..." Specifica in quale finestra verrà caricato il risultato del collegamento. Può fare riferimento al nome di un frame specificato nel tag <FRAME> oppure può riportare un valore speciale.
TITLE="..." Specifica il titolo che appare quando il link è selezionato ma non ancora cliccato.
Immagini
<IMG SRC="url" [LOWSRC="url"] [ALIGN=top|bottom|middle|texttop|absmiddle|absbottom|right|left] [ALT="testo alternativo"] [BORDER=#] [VSPACE=#] [HSPACE=#] [WIDTH=#] [HEIGHT=#] [USEMAP="url#nome"] [ISMAP]>
Questo tag permette di inserire una immagine nella pagina e non richiede un tag di chiusura. L'attributo SRC definisce il nome del file (se necessario preceduto dal percorso) contenete l'immagine in formato gif, jpg o xbm. Una immagine può essere resa trasparente utilizzando le proprietà del formato GIF89a, passando il valore esadecimale del colore dello sfondo in formato RGB. L'attributo LOWSRC viene utilizzato per la modalità di bassa risoluzione. In pratica viene caricato un'immagine più piccola in attesa che si carichi quella indicata da SRC.
L'attributo ALIGN viene utilizzato per definire l'allineamento dell'immagine rispetto alla linea base del testo circostante. L'attributo ALT rende disponibile un'alternativa testuale nel caso in cui non sia possibile caricare l'immagine.
L'attributo BORDER stabilisce lo spessore del bordo intorno all'immagine con un numero positivo che rappresenta i pixel. VSPACE e HSPACE definiscono lo spazio verticale ed orizzontale che deve essere lasciato libero intorno ad una immagine. Gli attributi WIDTH e HEIGHT determinano le dimensioni dell'immagine se si vogliono diverse da quelle del file originale.
L'attributo USEMAP serve per poter utilizzare una mappa non locale ma reperibile seguendo l'url. ISMAP viene utilizzato per indicare che l'immagine è una mappa cliccabile, cioè suddivisa in varie parti nelle quali il clic del mouse fa partire un link.
Utilizzando come browser Internet Explorer, bisogna ricordare altri quattro attributi per l'utilizzo di video clip o di mondi VRML:
DYNSRC="..." Specifica l'URL di un video clip o mondo VRML. Può essere utilizzata un'immagine con l'attributo SRC per i browser che non supportano i video.
CONTROLS Aggiunge un insieme di controlli sotto il video clip.
LOOP="n" Specifica il numero di volte che il video deve ricominciare. I valori "-1" o "INFINITE" permettono di far ripartire il video indefinitivamente.
START="..." Specifica quando il video clip deve iniziare. Possibili valori sono "FILEOPEN" (default), "MOUSEOVER", o entrambi.
Nuovi elementi generici HTML 4.0
<ACRONYM> indica un acronimo (serie di lettere rappresentanti le iniziali di parole: WWW, HTTP, URL, etc.).
Esempi:
<ACRONYM title="World Wide Web">WWW</ACRONYM>
<ACRONYM
lang="fr"
title="Société Nationale de Cheminis de Fer">
SNCF
</ACRONYM>
L'attributo title riporta per esteso il significato dell'acronimo, mentre lang esprime la lingua di appartenenza.
* Le parti racchiuse fra parentesi quadre,[...], sono facoltative.