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.

Condividi su Facebook, Twitter o Google Buzz:

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:

oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!