lunedì 10 giugno 2013

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:

“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 :-) „

4 commenti:

  1. Si preannuncia una serie di post di estremo interesse. Io al di là di qualche rudimento di HTML non mi sono mai buttato all'approfondimento dei linguaggi web. Fra l'altro, mi hai appena ricordato che devo studiarmi un po' i CSS...

    RispondiElimina
    Risposte
    1. Sono contenta che la mia esperienza possa risultare utile.
      CSS non è complicato ma per cominciare è meglio se ti procuri un manuale o una guida pocket che comprenda anche un'introduzione al linguaggio. Io ho avuto modo di approfondire quando ho dato l'idoneità informatica. L'esame era tutto incentrato sui linguaggi del web. HTML lo conoscevo già dai tempi di HTML1. Quando ho cominciato a pasticciare con gli ipertesti conoscere HTML aiutava. CSS con l'avvento di editor WYSIWYG anche molto sofisticati e blog l'avevo un po' trascurato, ma l'esame mi ha dato modo di recuperare. Con JavaScript invece ci sto ancora litigando, quindi non so se riuscirò a trattare l'argomento. Dovrei cercare qualcuno più ferrato di me che mi scriva un paio di guest post.

      Elimina
  2. E' bellissimo pensare come un insieme di simboli eapparentemente senza senso siano in realtà una grafica magari anche molto bella e creativa!
    Ho sempre voluto imparare i vari linguaggi web ma sono ancora ferma a poche nozioni!

    RispondiElimina
    Risposte
    1. Allora spero che questa serie di post ti dia la spinta necessaria ad approfondire la tua conoscenza. Inoltre alla fine fornirò una lista di risorse utili per chi volesse continuare a studiare anche da solo.

      Elimina