INTERNET (5/10)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Col termine HTML (Hyper Text Markup Language) si intende un semplice linguaggio in grado di impartire dei comandi attraverso un sistema di etichettatura (tagging scheme); esso rappresenta un sottoinsieme del più complesso linguaggio SGML (Structured Generalized Markup Linguage).
Un documento HTML è un file di testo in cui alcuni caratteri rappresentano dei comandi che consentono di strutturare a nostro piacimento il documento comprensivo di immagini e link.
Il linguaggio è in continua evoluzione: attualmente è in uso la versione 4; le versioni aggiornate introducono nuovi comandi e dichiarano obsolete alcune altri che continuano, comunque, a funzionare o a non funzionare per nulla a seconda del software browser utilizzato.
I comandi che non funzionano vengono semplicemente ignorati.
La maggior parte dei comandi ha una etichetta (tag) iniziale
che l'attiva e una etichetta finale che la disattiva.
Vi sono, inoltre, dei comandi che, per loro natura, non
hanno bisogno del tag di disattivazione.
Un tag è compreso tra due parentesi angolari (i
segni di minore e maggiore).
Un tag di disattivazione ha la stessa struttura del tag
di attivazione ma inizia con la parentesi angolare aperta seguita dal segno
di diviso.
A titolo di esempio si scrive, in formato HTML, il codice
per ottenere le seguenti due righe sul monitor utilizzando un browser
di pagine Web come Netscape o Explorer:
Testo in neretto
Testo normale
codice HTML:
<CENTER> <B> Testo in neretto </B> <BR> Testo normale </CENTER>
Commento:
<CENTER> è il tag per centrare il documento.
</CENTER> disattiva il comando di centratura.
<B> è il tag per ottenere il testo in neretto
(Bold). </B> disattiva il comando neretto.
<BR> è il tag corrispondente alla pressione
del tasto invio, cioè fa andare a capo. Si noti che, in questo caso,
non ha senso il comando di disattivazione che, pertanto, non esiste.
Un documento HTML si può sviluppare con qualsiasi editor di testo come EDIT di MS-DOS, WRITE di Windows, Word per DOS o per Windows, ecc., purché si salvi il documento in formato testo attribuendo un nome a piacere ed una estensione che, per sistemi DOS e Windows 3. 1 o 3.11, deve essere .htm e per sistemi UNIX, Windows 95-98, ME, XP, 2000 e NT può essere anche .html.
Esistono, tuttavia, numerosi programmi editori di documenti HTML funzionanti sotto Windows ed altri sistemi operativi che presentano una interfaccia grafica ed una struttura a menù che consentono di sviluppare velocemente, senza la necessità di ricordare tutti i tag a memoria, complessi documenti HTML.
Si elencano alcuni di questi programmi:
HTML EDITOR, W3E, HOT DOG, Microsoft Front Page, Netscape Composer, ecc.
Essi consentono di trasformare automaticamente un documento con comandi di formattazione Word in un documento in formato HTML, consentono di editare direttamente in formato HTML e, infine, consentono di visualizzare il documento HTML con le stesse modalità un browser Web del tipo Netscape o Explorer.
Alcuni di essi trasformano una tabella di Excel in una tabella HTML e una presentazione sviluppata in Power Point in un documento con link ed immagini in formato HTML.
I programmi editor di HTML, in genere, non risultano ottimizzati rispetto alla effettiva quantità di tag necessari per cui talvolta alcuni programmatori esperti (e pignoli) apportano "manualmente" delle modifiche al codice HTML tramite un qualsiasi programma editor di testi.
Un documento HTML è compreso tra i tag: <HTML> e </HTML>.
La struttura di un documento HTML è costituita da due parti:
I tag per l'inizio e la fine dell'intestazione sono: <HEAD> e </HEAD>.
I tag per l'inizio e la fine del corpo del documento sono: <BODY> e </BODY>.
Un tipico documento HTML, pertanto, possiede almeno questi tag:
<HTML>
<HEAD> ..... </HEAD>
<BODY> ..... </BODY>
</HTML>
Si elencano di seguito, a beneficio dei programmatori di pagine Web, i fondamentali tag del formato HTML senza fornire un commento approfondito poiché l'argomento esula dagli obiettivi di questo articolo.
GENERALI (tutti i documenti HTML dovrebbero contenere questi comandi)
Tipo <HTML></HTML> (inizio e fine del file)
Titolo <TITLE></TITLE>(nome del documento;deve essere nella testata)
Testata <HEAD></HEAD> (informazioni descrittive; come il titolo)
Corpo <BODY></BODY> (contenuto della pagina)
DEFINIZIONE DI STRUTTURA (sostituire ? con un numero da 1 a 6)
Intestazioni(Headings) <H?></H?>; (sono definiti 6 livelli)
Allineamento <H? ALIGN=LEFT|CENTER|RIGHT></H?>
Blocchi divisi <DIV></DIV>
Allineamento <DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>
Codice <CODE></CODE> (per listati di programmi)
Il font più grande <BIG></BIG>
Il font più piccolo <SMALL></SMALL>
Neretto (Bold) <B></B>
Corsivo (Italic) <I></I>
Deponente <SUB></SUB>
Esponente <SUP></SUP>
Macchina da scrivere <TT></TT> (visualizzato a spaziatura fissa)
Preformattato <PRE></PRE> (visualizzato tale e quale)
Larghezza <PRE WIDTH=?></PRE> (in caratteri)
Centrato <CENTER></CENTER> (sia per testo che immagini)
Lampeggiante <BLINK></BLINK> (Blinking)
Grandezza del Font <FONT SIZE=?></FONT> (valori da 1 a 7)
Cambio grandezza font <FONT SIZE=+|-?></FONT>
Grandezza font di base <BASEFONT SIZE=?> (da 1 a 7; default 3)
Colore del Font <FONT COLOR="#$$$$$$"></FONT> ($= valore esadecimale)
Collegamento <A HREF="URL"></A>
ad un punto(target) <A HREF="URL#***"></A> (in un altro documento)
<A HREF="#***"></A> (nello stesso documento)
ad una finestra<A HREF="URL" TARGET="***"></A>(nello stesso documento)
Definizione del punto <A NAME="***"></A>
Visualizzazione immagine <img SRC="URL">
Allineamento <img SRC="URL" ALIGN=TOP|BOTTOM|MIDDLE>
Allineamento <img SRC="URL"
ALIGN=LEFT|RIGHT|TEXTTOP|ABSMIDDLE|BASELINE|ABSBOTTOM>
testo alternativo <img SRC="URL" ALT="***"> (quando non viene visualizzata l'immagine)
Mappa navigabile <img SRC="URL" ISMAP> (richiede uno script)
Mappa navigabile locale <img SRC="URL" USEMAP="URL#***">
Descrizione mappa <MAP NAME="***";></MAP> (descrive la mappa)
Sezione mappa <AREA SHAPE="RECT|CIRCLE|POLYGON" COORDS=",,,"
HREF="URL"|NOHREF>
Dimensioni <img SRC="URL" WIDTH="?" HEIGHT="?"> (in pixel)
Bordi <img SRC="URL" BORDER=?> (in pixel)
Spazio circostante <img SRC="URL" HSPACE=? VSPACE=?> (in pixel)
Bassa risoluzione <img SRC="URL" LOWSRC="URL">
Metodo "Client Pull"<META HTTP-EQUIV="Refresh" CONTENT="?; URL=URL">
Incorpora oggetti <EMBED SRC="URL"> (inserimento oggetto nella pagina)
Grandezza oggetti <EMBED SRC="URL" WIDTH="?" HEIGHT="?">
Paragrafo <P> (di solito esegue un doppio ritorno a capo)
Paragrafo <P></P> (ridefinito come comando pieno)
Allineamento <P ALIGN=LEFT|CENTER|RIGHT></P>
Interruzione riga <BR> (ritorno a capo singolo)
Pulizia margini <BR CLEAR=LEFT|RIGHT|ALL>
Riga orizzontale <HR>
Allineamento <HR ALIGN=LEFT|RIGHT|CENTER>
Spessore <HR SIZE=?> (in pixel)
Larghezza <HR WIDTH=?> (in pixel)
Larghezza in % <HR WIDTH=%> percentuale della larghezza di pagina)
Riga piena <HR NOSHADE> (senza l'effetto 3D)
Immagine di sfondo <BODY BACKGROUND="URL">
Colore di sfondo <BODY BGCOLOR="#$$$$$$"> (RGB)
Colore del testo <BODY TEXT="#$$$$$$">
Colore dei collegamenti <BODY LINK="#$$$$$$">
Colore dei collegamenti visitati <BODY VLINK="#$$$$$$">
colore del collegamento in corso <BODY ALINK="#$$$$$$">
Liste senza ordine <UL><LI></UL> (<LI> prima di ogni elemento)
Tipo di bullet <UL TYPE=DISC|CIRCLE|SQUARE> (per tutta la lista)
<LI TYPE=DISC|CIRCLE|SQUARE> (questo e successivi)
Liste numerate <OL><LI></OL> (<LI> prima di ogni elemento)
Tipo di numero <OL TYPE=A|a|I|i|1> (per tutta la lista)
<LI TYPE=A|a|I|i|1> (questo e successivi)
Numero di partenza <OL VALUE=?> (per tutta la lista)
<LI VALUE=?> (questo e successivi)
Lista di definizioni <DL><DT><DD></DL> (<DT>=termine,<DD>=definizione)
Lista tipo Menu <MENU><LI></MENU> (<LI> prima di ogni elemento)
Lista tipo Directory <DIR><LI></DIR> (<LI> prima di ogni elemento)
Carattere speciale (il numero dopo &# indica il codice ISO 8859-1)
| < < |
Copyright © |
|
> > |
à à |
|
& & |
é é |
|
" " |
è è |
|
Registered TM ® |
ì ì |
|
Registered TM ® |
ò ò |
Copyright © |
ù ù |
Definizione <FORM ACTION="URL" METHOD=GET|POST></FORM>
Upload di file <FORM ENCTYPE="multipart/form-data"></FORM>
Campo di immissione <INPUT TYPE="TEXT|PASSWORD|CHECKBOX|RADIO|IMAGE|HIDDEN|SUBMIT|RESET">
Nome del campo <INPUT NAME="***">
Valore del campo <INPUT VALUE="***">
Barrato? <INPUT CHECKED> (checkbox e radio)
Grandezza <INPUT SIZE=?> (in caratteri)
Lunghezza massima <INPUT MAXLENGTH=?> (in caratteri)
Lista di selezione <SELECT></SELECT>
Nome del campo <SELECT NAME="***"></SELECT>
Numero di opzioni <SELECT SIZE=?></SELECT>
Scelta multipla <SELECT MULTIPLE> (per selezionare più di 1 elemento)
Opzioni <OPTION> (Elementi che possono essere selezionati)
Opzione proposta <OPTION SELECTED>
Finestra di immissione <TEXTAREA ROWS=? COLS=?></TEXTAREA>
Nome del campo <TEXTAREA NAME="***"></TEXTAREA>
Divisione del testo <TEXTAREA WRAP=OFF|VIRTUAL|PHYSICAL></TEXTAREA>
Definizione tabella <TABLE></TABLE>
Bordo <TABLE BORDER></TABLE> (per visualizzare il bordo)
Table Border <TABLE BORDER=?></TABLE>(per indicare lo spessore)
Spazio tra celle <TABLE CELLSPACING=?>
Spazio all'interno <TABLE CELLPADDING=?>
Larghezza desiderata <TABLE WIDTH=?> (in pixel)
Larghezza in % <TABLE WIDTH=%> (percentuale della pagina)
Riga <TR></TR>
Allineamento <TR ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>
Cella <TD></TD> (deve essere all'interno di una riga)
Allineamento <TD ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>
Senza interruzione <TD NOWRAP>
Colonne da occupare <TD COLSPAN=?>
Righe da occupare <TD ROWSPAN=?>
Larghezza desiderata <TD WIDTH=?> (in pixel)
Larghezza desiderata in % <TD WIDTH=%> (percentuale della tabella)
Intestazione <TH></TH> (come <TD>, ma in neretto e centrata)
Allineamento <TH ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>
Senza interruzione <TH NOWRAP>
Colonne da occupare <TH COLSPAN=?>
Righe da occupare <TH ROWSPAN=?>
Larghezza desiderata <TH WIDTH=?> (in pixel)
Larghezza desiderata in % <TH WIDTH=%> (percentuale della tabella)
Legenda della tabella <CAPTION></CAPTION>
Allineamento <CAPTION ALIGN=TOP|BOTTOM> (sopra o sotto la tabella)
Documento FRAME <FRAMESET></FRAMESET> (al posto di <BODY>)
Altezza in righe <FRAMESET ROWS=,,,></FRAMESET> (pixel o %)
Altezza in righe <FRAMESET ROWS=*></FRAMESET> (* = misura relativa)
Larghezza in colonne <FRAMESET COLS=,,,></FRAMESET> (pixel o %)
larghezza in colonne <FRAMESET COLS=*></FRAMESET>(* = misura relativa)
Definizione <FRAME> (contenuto di ogni singolo quadro)
Visualizza documento <FRAME SRC="URL">
Nome del frame <FRAME NAME="***"|_blank|_self|_parent|_top>
Larghezza <FRAME MARGINWIDTH=?> (margine destro e sinistro)
Altezza margine <FRAME MARGINHEIGHT=?> (margine alto e basso)
Barra di scorrimento?<FRAME SCROLLING="YES|NO|AUTO>
Misure non modificabili <FRAME NORESIZE>
Contenuto in assenza di frame <NOFRAMES></NOFRAMES> (per i browser che non supportano FRAME)