L'HTML (Hyper Text Markup Language) è un "linguaggio" per la creazione di pagine ipertestuali in genere, e specialmente pagine Web per Internet.
HTML (così come i più evoluti SGML e XML) si basa sulla distinzione fondamentale tra "testo", cioè la nuda sequenza dei caratteri di un testo, e "markup", che ha a che fare con la formattazione e la messa in pagina del testo, e con i collegamenti ipertestuali che vi fossero inclusi, quali links a immagini, suoni, animazioni e ogni riferimento ad oggetti esterni in genere. Più precisamente, le etichette (tecnicamente "tags") del markup html definiscono la struttura e l'aspetto che il testo assumerà fornendo ai browser Web (Netscape, Explorer, Opera ecc.) le istruzioni necessarie per "leggere" i documenti.
Esistono sul mercato numerosi software specializzati nella creazione di pagine html.
Alcuni sono fondamentalmente degli editors testuali, che facilitano la scrittura dei codici con vari strumenti, come la visualizzazione in colori diversi dei tags ecc. (ad es. EditPro, HomeSite).
Diversi sono invece quelli di tipo WYSIWYG ("What You See Is What You Get"), come per esempio FrontPage, che non visualizzano il codice html ma direttamente il "risultato", ovvero le immagini e il testo. In quest'ultimo caso l'utente lavora direttamente con la pagina così come verrà visualizzata sul Web, spostando oggetti con il semplice trascinamento del mouse, sfruttando layout predefiniti ecc. Questo tipo di programmi, però, non dà la possibilità di personalizzare l'uso dell'HTML e, in assenza di alcune nozioni basilari di HTML "puro", impedisce all'editor (cioè all'utente che crea la sua pagina) di risolvere eventuali errori o di superare gli inevitabili limiti che la presenza di layout predefiniti comporta.
Problemi analoghi si incontrano creando una pagina html all'interno di Word: è infatti da ricordare che anche Word (almeno nelle versioni più recenti) prevede la possibilità di generare un documento html a partire da quello, nativo, doc, preservandone – in linea di principio – la formattazione, ma creando – di fatto – un codice alquanto idiosincratico ed estremamente pesante.
In ogni caso, dunque, è fondamentale avere presente alcune nozioni fondamentali dell'HTML, e poter controllare il codice sorgente delle proprie pagine.
Consiglio dunque, per iniziare, un editor testuale come HomeSite (il più ricco di funzioni, ma anche il più caro: $99), o EditPro (più austero, ma perfettamente adeguato agli scopi e più economico: $29). In alternativa, può bastare anche il solo Blocco Note di Win95.
I tags html si presentano in genere racchiusi tra parentesi uncinate (ingl. "less-than sign - greater-than sign": <...>), e possono essere scritti indifferentemente maiuscoli o minuscoli (HTML non è sensibile a questa differenza), anche se è buon criterio usare un sistema uniforme, per scrivere delle pagine il più possibile chiare e facilmente controllabili.
I tags in genere "rinchiudono" il testo da formattare come in un gioco di scatole cinesi:
Ad esempio:
darà luogo a questa visualizzazione:
Occorre fare attenzione agli spazi vuoti che si inseriscono dopo i codici e prima della loro chiusura: essi verrano visualizzati esattamente come li abbiamo inseriti. Per es., se scrivessimo, come nel caso precedente:
aggiungendo degli spazi dopo il tag <I> verrebbe visualizzato un doppio spazio (tra i due punti e la parola "esempio") probabilmente indesiderato.
Sono invece senza importanza, come vedremo, gli spazi o le andate a capo che possiamo introdurre dopo la chiusura di un tag che serve a introdurre testo, come per es. subito dopo il tag </P>.
Es. <P>SAMPSON: My naked weapon is out. Quarrel. I will back thee. </P>...
<P>GREGORY: How? turn thy back and run?</P>
Per esempio:
Se gli attributi sono più di uno, verranno inseriti separati semplicemente da uno spazio. Per es.:
Il seguito dell'esposizione renderà molto più chiare queste indicazioni.
Per scrivere un documento html ci sono in primo luogo una serie di codici obbligati, una struttura all'interno della quale deve essere posto il testo.
Un primo esempio, con la sola struttura essenziale, è il seguente:
<HTML>
<HEAD>
<TITLE>griglia_html</TITLE>
</HEAD>
<BODY>
<P>Prova html</P>
</BODY>
</HTML>
(Potete visualizzare da voi questa griglia cliccando sull'esempio sopra e in seguito utilizzando, in Explorer, il menu Visualizza e poi cliccando su "HTML", oppure cliccando sul tasto destro del mouse puntato sul documento.)
– un documento html inizia sempre con il tag <HTML> e finisce sempre con il tag </HTML>.
– Dopo il tag <HTML> si apre la "head", o intestazione del documento (con il tag <HEAD>) all'interno della quale viene posto innanzitutto il titolo (<TITLE>griglia_html</TITLE>), e, nei documenti più complessi, informazioni ulteriori necessarie al browser, ai Webserver e ai motori di ricerca, contenute nei tag "DOCTYPE" e "META". Vanno infine poste nella head anche le eventuali indicazioni dei fogli di stile CSS, come vedremo in seguito.
Il titolo comparirà nella striscia superiore alla pagina Web, fornisce indicazioni ai motori di ricerca e, in caso di salvataggio dell'URL da parte del navigatore, dà il nome al collegamento. Non va in ogni caso confuso con il nome con il quale è salvato il file html.
– Dopo la chiusura della head (</HEAD>) si apre, con il tag <BODY>, il corpo vero e proprio del documento, in cui verranno inseriti gli oggetti (testo, immagini, suoni ecc.) e che si chiude con lo stesso tag, </BODY>.
– Il testo in genere viene scritto all'interno dei tags <P>...</P> (P per "paragraph"), oppure, se si tratta di titoli, nei tags <H1>...</H1>, <H2>...</H2>, ecc., a seconda del livello di importanza del titolo. In BODY inseriremo le tabelle e tutti gli elementi della pagina.
È importante osservare, a questo proposito, che con l'utilizzo di questi tags il testo verrà formattato secondo dei valori predefiniti, con un certo allineamento, un certo tipo di carattere, una certa grandezza e una certa nerezza tutti di default: con carattere più grande se si tratta di un titolo di livello 1, ecc. Si tratta cioè di tags "fisici", la cui funzione è di formattare visivamente un documento – anche se per alcuni tags permangono delle differenze nel modo in cui browser diversi interpretano visivamente il testo. Queste formattazioni sono comunque modificabili attraverso specificazioni ulteriori, con codici sempre html o meglio ancora con i fogli di stile, come si vedrà più avanti. Esistono peraltro anche tags unicamente "logici", che hanno la funzione di definire una struttura indipendentemente dal suo aspetto, che va definito con i fogli di stile. Tali sono per esempio i tags <BLOCKQUOTE>...</BLOCKQUOTE>, usato per introdurre citazioni più lunghe di due o tre righe; <EM>...</EM>, che enfatizza il testo compreso all'interno del tag; <DFN>...</DFN>, che indica che il testo compreso è una definizione.
Per maggiori dettagli, vedi questa pagina di html.it.
Altri tags di uso più comune, oltre a quelli già presentati, sono i seguenti:
<BR> è il tag che serve ad andare a capo, e quindi va posto ogni qualvolta si desideri interrompere una riga. Non prevede tag di chiusura.
<HR> serve per introdurre linee orizzontali, che possono essere formattate a piacere con l'utilizzo degli attributi ALIGN ="center|right|left" (per l'allineamento), SIZE="numero" (definisce l'altezza, in pixel, della riga), WIDTH="numero" (definisce la lunghezza della riga), COLOR, ecc. Per es.:
<DIV>...</DIV> è un marcatore con funzioni simili a <P>...</P>, ma introduce una sepazione più forte.
L'argomento dell'attributo TITLE verrà visualizzato con il cursore del mouse quando questo passerà sopra il testo specificato.
Nell'inserire il testo dovete fare attenzione ai caratteri speciali (lettere accentate, virgolette inglesi, ecc.), cioè ai caratteri che, nelle tavole ASCII ed ANSI, hanno codici superiori a 226. I codici ASCII (per American Standard Code for Information Interchange) sono le rappresentazioni numeriche che traducono per il computer i caratteri e altri elementi o azioni (i "non printing characters").
È dunque opportuno, nella pagina madre, non scrivere queste lettere come tali ma sostituirle con un codice specifico corrispondente, cosa che renderà possibile la lettura a partire da qualsiasi piattaforma.
Il codice specifico raccomandato ha la forma &nomelettera; – per es. & seguito da "Egrave;" per la e maiuscola con accento grave, & seguito immediatamente da "icirc;" per la i con accento circonflesso, e così via (rimando a questa lista e alla bibliografia).
Per un esempio dell'uso di questi caratteri, rimando alla fonte html di questa pagina, nonché a quella afferente a http://www.bmanuel.org/courses/sinarab.html (verificate l'uso dei codici ASCII nel "body" del documento).
Scritta la pagina madre, in WordPad o in un'altro editor, è infine importante, in vista della sua pubblicazione online, ricordarsi di salvarla utilizzando nomi di file sempre in minuscolo e senza utilizzare spazi e caratteri speciali (lettere accentate, ecc.), con l'estensione html. La scelta tra l'estensione htm e quella html dipende esclusivamente dal server che ospiterà le vostre pagine Web, fermo restando che i due formati sono in tutto e per tutto equivalenti. Ogni server infatti imposta una pagina di default che viene caricata digitando il solo indirizzo della home del sito senza specificare il file di partenza; questo "default" è di solito index.html (ad es. scrivendo www.bmanuel.org verrete portati automaticamente a www.bmanuel.org/index.html).
I documenti vanno salvati possibilmente tutti dentro una stessa cartella, perché ciò semplifica sia le operazioni da compiere per collegare i documenti tra loro sia quelle necessarie per trasmetterli al Web.
La correttezza dei codici può essere controllata attraverso servizi gratuiti, come http://validator.w3.org/, o a pagamento (http://www2.imagiware.com/RxHTML/, http://www.unipress.com/cgi-bin/WWWeblint), ma esistono sistemi di controllo anche all'interno di programmi come Homesite: aiutano tutti a rintracciare gli errori formali compresi nella propria pagina, spesso molto più numerosi di quanto un principiante possa immaginare, e che potrebbero impedire la visualizzazione corretta da parte di browser diversi dal proprio.
Le pagine, una volta redatte, controllate, e salvate sul proprio hard disk, vengono pubblicate sul Web attraverso l'utilizzo di un protocollo di trasmissione, l'FTP, sul quale non mi soffermerò in questa sede (alcuni cenni si trovano in questa pagina di html.it).
***************************************************************************************
| (0) | Presentazione. | ||||||||
| (1) | Nozioni introduttive di HTML. | ||||||||
| (2) | Tabelle, immagini, links. | ||||||||
| (3) | Introduzione ai fogli di stile CSS. | ||||||||
| (4) | Modelli scaricabili. | ||||||||
| (5) | Riferimenti. | ||||||||