page loader

Articolo del nostro Blog

HTML spiegato semplice

9 September 2018
|
HTML

Ciao carissimi amici volenterosi di apprendere la qualsiasi sul magico mondo del web! Mi fa molto piacere ritrovarvi qui oggi a leggere il mio articolo sull'HTML. Proverò a spiegarvi in un linguaggio semplice senza troppi tecnicismi cosa si tratta quando si parla di HTML.

Non sono uno scrittore, lo dico in anticipo, scrivo come parlo e spero non trapeli troppo il mio accento toscano, però mi piace e questo è abbastanza! Fortuna che le mie maestre di scuola elamentare in qualche modo (non so con quale sforzo) siano riuscite a trasmettermi un imprinting grammaticale abbastanza corretto da non fare troppe figuraccie.

In questo articolo non ci sarà la pretesa di voler sembrare il professorone di turno, o di fornire incontrastabili teorie sul funzionamento delle cose, piuttosto la consapevolezza che tante astruse terminologie possono essere tradotte in un linguaggio semplice (in soldoni come si dice a Firenze) e tanti concetti complessi rappresentati da esempi banali di vita quotidiana. Quindi, guidato dalla profonda convinzione che ciò sia quello di cui si ha bisogno inizialmente, mi trovate qui impegnato a scrivere una versione molto facile di un tutorial HTML. Se siete già abbastanza ferrati e cercate approfondimenti vi consiglio le ottime guide di Mr. Webmaster che trattano l'argomento ad un livello leggermente superiore, ma state attenti ad avanzare troppo, lo step successivo sono i manualoni da 500 pagine. wink

Ma ora basta parlare di me sennò passo da egocentrico ed entriamo nel cuore della faccenda!

Avete mai provato a fare tasto destro > visualizza sorgente sul browser durante la navigazione?
Se no fatelo, se si rifatelo anche ora sulla mia bella paginetta. Ecco, questo ammasso di codice spigoliforme più o meno accatastato (ciò dipende dalla confusione mentale del programmatore) è il famigerato HTML; ovvero un linguaggio ipertestuale standardizzato atto all'interpretazione e compilazione madre di una qualsiasi pagina web.

Non spaventatevi, è meno complicato di quello che sembra, e soprattutto l'effetto è inversamente proporzionale all'abitudine, quindi quando sarete un pochino più abituati a maneggiarlo lo interpreterete più velocemente dell'italiano.

Come potete notare la stesura del codice HTML è caratterizzata da <tagghettini> di vario genere racchiusi in apici destri e sinistri. Alcuni contengono un sacco di informazioni, altri quasi nulla. Inoltre ci sono quelli che sono seguiti dal medesimo </tagghettino> con lo slash iniziale dopo l'apice di apertura (il primo apice, quello iniziale sinistro di un tag si chiama così: apice di apertura del tag). Allora vi starete chiedendo come si fa a capirci qualcosa in tutto questo caos immagino... bene, ve lo spiego subito.

Precisazione: il termine tag utilizzato per identificare i componenti HTML non va confuso con gli #hashtag di Twitter ne con i tag dei blog. Entrambi hanno sì la funzione di circoscrivere, ma nel caso dell'HTML si circoscrivono comandi, mentre su social e blog assumono una funzione puramente organizzativa di contenuti di pubblico interesse. Per intenderci, i comunemente intesi "tag" corrispondono più o meno alle parole chiave di mastro Google.

Il tag è un entità HTML che può avere molteplici proprietà, esattamente come uno smartphone o un automobile possono avere svariate caratteristiche. Queste proprietà possono essere native, cioè di default di un tag specifico, oppure accessorie, quindi definite a piacimento tramite l'enunciazione di attributi da parte del webmaster. Un attributo non è altro che qualcosa che conferisce una caratteristica specifica ad un oggetto, infatti i tag sono trattati proprio come degli oggetti dal browser e non è un caso che il corpo di una pagina web venga denominato DOM (Document Object Model). Un esempio pratico? in fase di produzione le carrozzerie delle auto nascono tutte del solito colore, poi vengono verniciate diversamente; ecco, questo è un valido esempio di conferimento di proprietà ad un oggetto. Anzichè la spruzzatrice e la vernice, per i tag HTML il processo di definizione di una proprietà di stile è molto più semplice, guardate quanto: style="background-color: red". Incredibile vero?

A questo punto la domanda sorge spontanea: ma se posso variare le proprietà di un tag a piacimento dichiarando innumerevoli attributi, a cosa servono tanti tag diversi? potrebbe bastarne uno? Bene, per rispondere a questa domanda sono costretto a citare un aspetto che non voglio trattare in questo articolo perché introduce un panorama immenso di informazioni che riguardano tutta l'ottica SEO: la semantica.
Per il momento vi basterà sapere che ogni tag ha una sua funzione specifica in termini di significato intrinseco, cioè un tag destinato alla titolazione non può essere usato come contenitore, non perchè il browser ve lo impedisca o qualcosa esploda, ma per il semplice fatto che è un errore semantico, ergo: qualcosa da non fare! Per capirsi, equivale a un errore grammaticale in una lettera di presentazione per la candidatura a una cattedra.

Un altra speciale caratteristica ei tag è la nidificazione, cioè la possibilità di inserirne uno dentro l'altro in maniera pressochè infinita. Infatti, tutto il contenuto di una pagina HTML è racchiuso dentro il tag <html>....</html>, appunto.

I tag possono essere visibile e modellabili oppure invisibili, i cosidetti "metatag", che servono per fornire informazioni ai non umani: i robot. I metatag indicano ai robot che scansionano la pagina cosa devono fare e come comportarsi per interpretarla correttamente. I robot non sono altro che server che navigano costantemente nel web solitamente destinati all'indicizzazione in qualche motore di ricerca. Il più amabile: GoogleBot.

Diamo un occhiata alla struttura basica di una pagina HTML:

<html>

   <head>

      <metatag>

   </head>

   <body>

      Ciao mondo!

   </body>

</html>

È facile intuire che ci sono due sezioni all'interno di un documento HTML; una destinata a informazioni nascoste all'utente e l'altra (body) il corpo della pagina, dove viene inserito tutto il codice da renderizzare che compone la vista/interfaccia utente, in gergo view-port. Scivere una pagina HTML è semplicissimo, potete farlo anche con un semplice editor di testo e poi salvate con estensione .html

I principali tag senza far distinzione tra HTML e HTML5 sono: 

  • <h1></h1>, <h2></h2> e <h3></h3>: elementi di blocco destinati ad un uso di titolo di pagina.
  • <p></p>: elemento di blocco a scopo di paragrafazione.
  • <span></span>: un elemento in linea utilizzato soprattutto per modificare attributi di stile al testo, come ho fatto io per alcune parole del paragrafo precedente.
  • <img>: importantissimo tag per l'incorporazione di immagini nella pagina (come potete vedere questo non possiede il tag di chiusura perché progettato per non contenere informazioni oltre che alpercorso dell'immagine da incorporare)
  • <div></div>: un elemento contenitore di blocco generico.

Se vi è piaciuto l'articolo, avete qualche dubbio, volete qualche consiglio o semplicemente interagire, sentitevi liberi di farlo nel box commenti di Facebook qua sotto. Abbiamo la possibilità di rendere ancora più grande la community.

Articoli correlati

Scrivere per il web: web content editing e copywriting

28 Jun 2017
image

Non si tratterà di una ricetta da seguire passo passo, ma di linee guida per costruire un articolo che possa attirare potenziali lettori.

Approfondisci

Web Marketing e Turismo: Il connubio vincente

28 Jun 2017
image

Quando si parla di Web Marketing per il turismo stiamo trattando uno dei settori più complessi e con maggiore concorrenza del Web. A volte è difficile capire i meccanismi e le dinamiche su cui si basano le strategie di marketing digitale, ma dobbiamo f

Approfondisci

Cookie Law: adeguarsi alla normativa

28 Jun 2017
image

Da alcuni anni in Italia si sta discutendo su come regolamentare le modalità di raccolta di dati sugli utenti da parte dei siti internet. In particolare l'attenzione è rivolta a quei tipi di dati salvati sul dispositivo con cui si accede ad internet, d

Approfondisci