Webmaking101 ∞ Facciamo conoscenza con HTML

HTML è il linguaggio del Web. Descrive il modo in cui le pagine devono apparire e funzionare sui vari browser*.
Vi siete mai chiesti che aspetto ha il codice sorgente** di una pagina web?
Ho una bella immagine per voi.

Ok, ora potete anche esclamare “Ma che cavolo…!” e andare a sbattere la testa contro il muro.
No! No! Non andate a sbattere la testa, stavo scherzando! :P
Oh, e se vi state chiedendo cosa c’è nell’immagine, quello è il codice sorgente dell’homepage di Twitter.

Tag: etichetta, cartellino. Ad esempio
il cartellino del prezzo di una felpa.

Ora, vorrei che focalizzaste l’attenzione sulle parole evidenziate in viola e precedute dal simbolo <. Quelle paroline lì sono tag HTML. HTML è lo scheletro di una pagina web e i tag sono i mattoncini che lo compongono. Un po’ come il LEGO.
Agli inizi del web, HTML descriveva sia la forma sia il contenuto di una pagina web.
Poi il linguaggio si è evoluto e, per questioni pratiche, si è deciso di dividere il contenuto della forma e affidare tutte le informazioni sullo stile di una pagina web a un altro linguaggio, chiamato CSS.
CSS (Cascading Style Sheet) o fogli di stile di stile a cascata, descrivere il look della pagina.
HTML e CSS lavorano insieme per descrivere cosa contiene e com’è fatta una pagina web. Sono i mattoncini LEGO del Web.

Giocavate ai LEGO da piccoli?

HTML e CSS da soli non sono sufficienti a rendere le pagine interattive: pulsanti, moduli, le varie funzionalità del Web 2.0 sono ottenute con una tecnologia chiamata AJAX (acronimo di Asynchronous JavaScript and XML) , che permette l’interattività. Spiegarvi cosa siano AJAX, JavaScript e XML sarebbe complicato, quindi tenete semplicemente a mente che è la tecnologia che permette lo sviluppo di applicazioni web interattive.
Poiché HTML è un linguaggio, ha anche una sua sintassi, cioè un insieme di regole che descrivono come deve essere usato. Nell’HTML si fa inoltre una distinzione tra elementi e attributi.
HTML è un linguaggio annidato, per cui un elemento può essere accompagnato da uno o più attributi.

• Ogni elemento HTML inizia con uno start tag e finisce con uno end tag.
• Il contenuto dell’elemento è ciò che è compreso tra il tag d’apertura e quello di chiusura.
• Alcuni elementi HTML descrivono un contenuto vuoto. Gli elementi vuoti sono chiusi nello start tag.
• Gli elementi HTML possono avere degli attributi.

Nella prossima puntata faremo la conoscenza con alcuni tag HTML di base.
Ho preparato anche un simpatico esercizio per voi. Until next time! ♪

Note:
* Un web browser è un programma che permette di navigare in rete (Chrome,Firefox,IE).
** Il codice sorgente è il testo in html che descrive il funzionamento di una pagina web.

Allego qui un commento dal mio stream G+ che corregge alcune mie imprecisioni:

Joshi Spawnbrød 

“Attenzione, Ajax non è la base tecnologica delle interfacce, ma solo una specifica implementazione che serve a scambiare dati.

L'interattività di una pagina si realizza anche solo in CSS (css3), arricchita poi con Javascript (la libreria più comunemente usata è jQuery, ma ce ne sono a bizzeffe la fuori).

Se parli con un programmatore molto attento alle definizioni ricordati sempre di menzionare "linguaggio di markup" quando parli di HTML, e mai di solo "linguaggio" , ma è una finezza di dizionario :-) „