Guida al linguaggio HTML - Concetti di base e formattazione del codice

Dopo la dovuta introduzione sulle origini del linguaggio HTML e al concetto di ipertesto, passiamo ad approfondirne i concetti base e la formattazione del codice. Il linguaggio HTML deve il suo nome (ricordo che HTML sta per Hyper Text Mark-Up Language, cioè linguaggio a marcatori di ipertesto) alla caratteristica presenza di marcatori.

Nell'articolo farò riferimento a tag, identificatori e marcatori dandogli sempre lo stesso significato.

Gli identificatori

Un identificatore (o marcatore) HTML ha la seguente sintassi:

<identificatore> </identificatore>

Il primo è un tag di apertura: significa che sta per iniziare una sequenza di codice HTML. Il secondo è un tag di chisura, e come vediamo ha sempre lo stesso nome del tag di apertura preceduto dal carattere /. Ogni tag di apertura deve essere sempre seguito dal suo tag di chiusura.

Il modo in cui viene interpretato il testo che si trova tra i due tag dipende dalla natura del tag stesso. Tra un tag di apertura e uno di chiusura possono essere annidati infiniti altri tag di apertura e di chiusura, stando bene attenti però a rispettare l'ordine di apertura e chiusura:

<identificatore1>
     <identificatore2>
         <identificatore3>
         </identificatore3>
     </identificatore2>
 </identificatore1>

Come vedete, il primo identificatore che si apre è anche l'ultimo che si chiude. Quando si chiude un tag, si deve controllare che per sbaglio prima non si sia chiuso un tag che sia stato aperto prima ancora del tag che si sta per chiudere. Per intenderci, il seguente codice HTML darebbe risultati imprevedibili:

<identificatore1>
     <identificatore2>
     </identificatore1>
</identificatore2>

Il codice è errato perchè stiamo chiudendo il tag identificatore1 prima ancora di aver chiuso identificatore2, che essendo più interno va chiuso prima.

La presenza di spazi o di carattere di invio non ha influenza sul codice HTML, per cui le seguenti porzioni di codice:

 <identificatore1>  </identificatore1>

 <identificatore1>              </identificatore1>

 <identificatore1>
 </identificatore1>

Sono sempre perfettamente equivalenti. Ovviamente per chiarezza e pulizia è sempre meglio non tenere tutto su una riga ma andare a capo e indentare bene il codice, aggiungendo degli spazi all'inizio in base all'annidamento del codice:

 <identificatore1>  (primo identificatore)

     <identificatore2> (annidato, meglio andare a capo e lasciare un po' di spazio)

     </identificatore2>

 </identificatore1> (torniamo al primo identificatore, andiamo a capo e scriviamolo più rientrato)

Nelle vecchie sintassi HTML, non era sempre obbligario chiudere un tag, si poteva semplicemente indicare un tag di apertura. Con l'ultima sintassi si deve sempre indicare il tag di chiusura. Se si copia vecchio codice HTML dentro un elemento di tipo HTML/JavaScript in Blogger (e cioè senza tag di chiusura), ci verrà segnalato un errore del tipo "manca il tag di chiusura...". In questi casi, basta semplicemente capire quali sono i tag di apertura e chiuderli nel corretto ordine.

 

Visualizzare del testo

Quello che si trova tra il tag di apertura e di chiusura viene sempre interpretato come testo da visualizzare. Ad esempio:

<identificatore1>Ciao mondo!</identificatore1>

produrra diversi effetti in base al tipo di identificatore, ma a video avremo sempre il testo "Ciao mondo!". Anche in questo caso la presenza di spazio prima o dopo il testo viene assolutamente ignorata, così come la presenza di un'andata a capo nel codice.

Per renderci conto, proviamo a copiare questa riga di codice:

<b>Ciao mondo!</b>

e incollarla nell'editor HTML online:

Il tag <b> indica che il testo viene visualizzato in grassetto. Proviamo a eliminare i tag e visualizziamo di nuovo il risultato:

Come vediamo il testo non è più in grassetto, ma soprattutto qui impariamo una cosa importante: tutto quello che non viene interpretato come identificatore, viene visualizzato come semplice testo.

 

Attributi degli identificatori

I tag HTML possono avere degli attributi, cioè delle informazioni aggiuntive che estendono e completano il significato del tag stesso. La sintassi è la seguente:

<identificatore attributo="valore">

</identificatore>

La sintassi è sempre attributo="valore" e possono esserci tutti gli attributi che vogliamo, purchè siano coerenti col tag. Vediamo per esempio il seguente codice:

<a href="http://creareblog.blogspot.com">Creare blog</a>

Il tag <a> identifica un link, href="..." indica l'indirizzo che verrà aperto, e il testo in verde sarà il testo del link visualizzato. Incolliamo il codice nell'editor online:

Otterremo per l'appunto un link che cliccato ci porterà all'indirizzo di questo blog.

 

Riassumendo

Dei vari identificatori previsti dal linguaggio parleremo nel prossimo post, per adesso concentratevi sulle varie parti della sintassi. Riepilogando, il codice HTML è composto dalle seguenti parti:

• un identificatore
• gli attributi dell'identificatore
• il testo da visualizzare

Prendete del codice HTML (anche dal template del vostro blog) e cominciate ad esercitarvi a individuare le varie parti del codice.

Nel prossimo post parlerò dei tag HTML più comuni, nel frattempo per dubbi o chiarimenti lasciatemi pure un commento.

Guida al linguaggio HTML - Cenni storici

Come diversi mi hanno chiesto (e in particolare Andrea si è dimostrato entusiasta dell'idea) comincio a pubblicare una serie di articoli sul linguaggio HTML. Non è mia intenzione fare una guida completa su questo linguaggio, ma cercare di dare col tempo le conoscenze di base e gli strumenti necessari che permettano, soprattutto agli autori di blog, di mettere mano a del codice HTML riuscendo a capire cosa stanno facendo.

Ovviamente nel corso di questi articoli sono sempre disponibile per maggiori chiarimenti e se necessario ritornerò su argomenti già trattati per approfondirli.

Prima di entrare troppo nel tecnico, voglio spendere qualche parola sulle origini di quella che è una delle più grandi invenzioni dell'umanità e che è stata ricercata da secoli: l'ipertesto.

HTML sta infatti per Hyper Text Mark-Up Language, cioè linguaggio a marcatori di ipertesto, e per ipertesto si intende genericamente una sistema che permetta di passare velocemente da un testo all'altro, come appunto permette di fare una pagina HTML.

Possiamo dire che tra i primi a ricercare uno strumento che permettesse di realizzare un ipertesto fu Agostino Ramelli, che nel 1588 pubblicò un libro dove spiegava la sua invenzione: la ruota dei libri, un macchinario che avrebbe permesso di passare velocemente da un libro ad un altro. Sebbene come vediamo nell'immagine a destra il risultato era più buffo che altro, capiamo già come il problema abbia origini storiche più antiche dell'avvento del web stesso o dell'informatica in generale.

In epoca più recente, Vannevar Bush nel 1945 scrisse un articolo intitolato As we may think ("come potremmo pensare"), nel quale descrive il Memex, un sistema di informazioni interconnesse mai realizzato ma che fu fonte di ispirazione per molti, tra cui Theodor Holm Nelson, che nel 1963 coniò il termine ipertesto. Nelson creò il progetto Xanadu: un sistema elettronico che immagazzinasse informazioni e che le rendesse disponibili a tutti quelli che volessero consultarle. Il sistema avrebbe dovuto essere ospitato in un satellite in rotazione intorno alla terra in maniera tale che fosse accessibile dovunque. Xanadu era il nome di una dimensione immaginaria da dove derivava (e in cui fosse conservata) tutta la conoscenza umana, secondo alcune civiltà pre-colombiane.

Con l'avvento dell'informatica si resero finalmente disponibili strumenti più adatti allo scopo, e solo nel 1990 Tim Berners Lee (allora ricercatore al CERN, il Centro Europeo per la Ricerca Nucleare) creò il Word Wide Web ("rete grande quanto il mondo"), il linguaggio HTML e il primo browser, il WorldWideWeb (come la rete in cui avrebbe permesso di navigare). Tim Berners Lee (foto a sinistra) è l'uomo che ha inventato Internet così come la conosciamo oggi, e nel 1994 ha fondato il Word Wide Web Consortium (W3C), che da allora arricchisce e definisce le specifiche del linguaggio HTML, attualmente alla versione 4.01.

La versione 4.01 dovrebbe anche essere l'ultima del linguaggio HTML, visto che col tempo verrà sostituito dal linguaggio XHTML, che sostanzialmente non è altro che un HTML più ricco e pulito.

Nella prima metà degli anni 90 nacquero anche i primi browser così come li conosciamo oggi, tra cui Internet Explorer e Netscape. Vista la lentezza con cui veniva sviluppato il linguaggio HTML e la necessità sempre maggiore di arricchire le pagine web con elementi che non fossero solo testo o semplici immagini, i vari browser cominciarono a creare proprie versione di HTML, arricchendole di nuovi identificatori che permettessero soprattutto di modificare l'aspetto grafico delle pagine web.

In quegli anni (anni in cui anch'io cominciai a navigare in rete) capitava molto spesso di entrare in un sito e non riuscire a visualizzarlo bene perchè era ottimizzato per un altro browser. Nel 1996 allora il W3C pubblicò le specifiche del Cascading Style Sheets (CSS), cioè delle specifiche che permettessero di modificare la formattazione di una pagina web e di definirne lo stile. I CSS rappresentano tutt'ora lo standard per definire l'aspetto di una pagina web, anche Blogger ne fa uso e in diversi articoli in cui parlo di come modificare il template del nostro blog (ad esempio come cambiare lo sfondo del template o di un post) fanno riferimento proprio allo stile CSS della pagina. Le specifiche CSS di solito stanno su un file a parte con estensione .css, ma possono stare anche dentro la pagina web, come nel caso di Blogger.

E con questa introduzione "storica" finisco questo primo articolo. Ho voluto farla per far capire un concetto che spesso passa in secondo piano: l'HTML è una grande rivoluzione, non è un semplice gadget informatico. L'HTML ha realizzato il sogno dei ricercatori degli ultimi secoli: condividere la conoscenza e permettere a chiunque di consultarla facilmente e velocemente. Nel prossimo articolo comincieremo già a scrivere del codice HTML. Vi consiglio, se non lo avete già fatto, di leggere il mio articolo su due validissimi strumenti che utilizzerò spesso negli esempi che farò in futuro.

Le immagini sono state prelevate da en.wikipedia.org e it.wikipedia.org.