Lungo il percorso di ogni blogger indipendente arriva quel momento in cui si ha la necessità di apportare modifiche al proprio blog entrando nel codice e negli script che lo compongono. Prima di farlo però è fondamentale capire come è fatto e come funziona evitando così di commettere qualche errore capace di comprometterne il corretto funzionamento. Per questo oggi scopriamo insieme come è fatto un sito web con una guida pratica sull’introduzione al codice HTML. Un particolare linguaggio utile da conoscere al fine di poter gestire autonomamente tutte le pagine del nostro blog o sito web.
Nomenclatura degli script di un sito
- index.html. La pagina principale di un sito web che viene chiamata Home Page generalmente corrisponde ad un file denominato index.html collocato nella cartella contenente tutti i file del sito. E’ il primo documento che viene aperto dagli utenti e attraverso i link presenti nell’home page sarà possibile accedere ed aprire gli altri script corrispondenti ad altre pagine web.
- Web server. Server che rende disponibili le pagine di un sito web attraverso la rete internet a qualunque utente ne faccia richiesta.
- Dominio. Cartella dentro un web server nella quale sono presenti tutti gli script del sito.
Tutti gli altri file che compongono un sito non hanno obblighi di nome. E’ solo vivamente consigliato siano senza spazi e abbiano attinenza al loro contenuto in modo da facilitare una successiva modifica individuandoli subito. Ad esempio nomesenzaspazi.html o nome_senza_spazi.html.
Come è fatta una pagina web
L’anatomia di una tipica pagina web è composta da:
- Testata o header. Contiene il logo e il nome del sito.
- Menu di primo livello. Contiene tutti i link visibili in ogni pagina del sito.
- Menu di secondo livello. Si può trovare sia a destra che a sinistra e non essere visibile in ogni pagina del sito. Molto spesso viene chiamato sidebar.
- Area contenuti. Visualizzazione dei cosiddetti articoli, testi, immagini e video legati al menù di primo e secondo livello selezionati.
- Pedice o footer. Link di interesse sempre presenti in tutte le pagine del sito.
Come si progetta un sito web
Quando si progetta un sito web normalmente si usa l’albero dei contenuti per rappresentare tutti i tipi di contenuti che il sito dovrà avere. I rami dell’albero rappresentano i link che servono per navigare da una pagina all’altra. Infine da ogni pagina deve essere sempre possibile tornare alla pagina principale (home page) ricordandosi di inserirne il link in tutte le pagine del sito. Deve essere semplice ed intuitivo per facilitare la navigazione all’utente e si può presentare come in figura:
- Home Page = la pagina iniziale di un sito.
- Categoria = Menù di primo livello, (l’azienda, il blog, la gallery, i prodotti, i contatti…)
- Sotto categoria = Menù di secondo livello. (Varie categorie di raccolta articoli, foto o prodotti.)
- Articoli = Gli articoli o i prodotti. Le singole pagine specifiche che mostrano i veri e propri contenuti.
Come costruire le pagine di un sito a partire da un template
Il template di un blog o sito web parte dalla creazione di una struttura di layout generica per tutte le pagine del sito. Generalmente viene salvato come file denominato nometemplate.html e verrà utilizzato come base per generare tutte le altre pagine di un sito. Infatti vengono salvate con lo stesso codice HTML anche tutti gli altri script delle pagine.
Introduzione al codice HMTL
Che cos’è il codice HTML
Da quanto detto finora si deduce che il codice HTML (Hyper Text Markup Language) è il principale linguaggio utilizzato per costruire pagine e siti web. Le sue “parole” prendono il nome di “tag” e per creare un documento HTML serve un editor che permetta di salvarlo con estensione .html. Un sito web è quindi un documento HTML visto attraverso un browser. Un particolare file testuale contenente tutti i comandi utili alla formattazione del testo, l’inserimento di parti multimediali e la definizione di link ipertestuali. Le pagine HTML di un sito web possono essere dinamiche e statiche.
- Pagine dinamiche. Per funzionare hanno bisogno di linguaggi scripting, ossia linguaggi di programmazione interpretati.
- Pagine statiche. Con gli ipertesti in HTML trasmettono tutte le informazioni necessarie e sono provviste di collegamenti ipertestuali per accedere a diversi contenti e/o pagine contemporaneamente.
I tag HTML
I tag HTML sono quegli elementi presenti all’interno di un documento HTML che danno determinate caratteristiche a ciò che vogliamo rendere visibile online. In poche parole sono i marcatori che permettono al browser di dare una struttura a tutto il documento HTML. Quindi, per dare un certo tipo di layout al contenuto di una pagina web è necessario far uso di tali tag. Un tag HTML è identificato da un nome specifico a seconda della sua funzione e può contenere un’immagine, del testo, un video ecc. Si presenta sempre composta da due parti:
Un’apertura <tag> e una chiusura </tag> dentro le quali viene inserito l’oggetto come in questo esempio:
<tag> oggetto </tag>
L’apertura serve per dire al browser che in quel punto della pagina web inizia una marcatura di qualcosa e deve essere interpretata in un determinato modo. La chiusura, caratterizzata dal simbolo “/“, fa invece capire al browser che la marcatura di quell’elemento termina in quel punto.
I tag HTML senza contenuto
In un documento HTML esistono anche dei tag senza contenuto ma che hanno un significato ben preciso includendo informazioni o collegando altri document alla pagina web. Questi tag non hanno la chiusura </tag> ma presentano solo il simbolo “/” prima della parentesi finale <tag ... />. I più comuni ed utilizzati sono:
- br. Quando si ha necessità di andare a capo viene utilizzato il tag <br>. Ad esempio, se volessimo lasciare 3 spazi bianchi tra un oggetto e l’altro lo inseriremo 3 volte in questo modo:
<br><br><br>. - hr. Viene utilizzato per creare una linea di separazione tra diverse sezioni di una pagina.
- img. Tag necessario per inserire un’immagine nella pagina web.
- link. Fondamentale per collegare altre risorse alle pagine di un sito.
- meta. Tag che contengono altri dati.
! La nomenclatura specifica dei tag HTML non si può assolutamente cambiare.
Introduzione al codice HTML: la struttura di una pagina web
Un pagina web presenta una struttura rigida standard che viene utilizzata ogni qualvolta si crea un nuovo documento di codice HTML. Per metterla in piedi sono necessari dei tag specifici con la loro rispettiva apertura e chiusura:
<html></html>. Il tag html è il marcatore più esterno che contiene e tiene insieme tutta la pagina web.<head></head>. Presenta tutti quegli elementi utili al posizionamento della pagina web per essere gestita dai browser e dai motori di ricerca. Description, favicon, meta tag, tag title, ecc.<body></body>. Racchiude tutte le informazioni del sito visibili dall’utente. Immagini, moduli, tabelle, testi, titoli e sottotitoli, video e qualsiasi altra tipologia di contenuto.
I tag HTML possono, e a volte devono, essere inseriti l’uno all’interno dell’altro. All’interno del tag <html> c’è il tag <head></head> e sempre all’interno del tag <html>, ad un livello pari del tag <head> c’è il tag <body></body>. Di base la scheda di apertura di una pagina web si presenta così:
<!DOCTYPE html><html lang="it"><head><meta charset="utf-8"><title>Introduzione al codice HTML</title><link rel="stylesheet" type="text/css" href="css/introduzione.css" /></head><body><p>struttura base di una pagina web HTML</p></body></html>
! <!DOCTYPE html> è obbligatorio e serve per specificare che il file contiene una pagina HTML.
Curiosità. Per vedere il codice sorgente di una pagina web ti basta cliccare con il tasto destro del mouse in un punto qualsiasi della schermata e selezionare la voce “Ispeziona elemento” con Safari o “Visualizza sorgente pagina” con Chrome.
Gli attributi dei tag HTML
Come abbiamo precedentemente visto un generico tag html si presenta come <tag> testo </tag>. A questa stringa di codice è possibile aggiungere delle caratteristiche che specializzino meglio il suo comportamento. Lasciando uno spazio bianco tra la parola tag e la sua chiusura possiamo inserire degli attributi. L’attributo di un tag HTML indica una proprietà di quell’elemento.
Es. <tag nomeattributo="valore">testo</tag>
La struttura di un attributo presenta sempre la stessa sintassi, rigorosamente da rispettare: nomeattributo=”valore”. Nello specifico è composta da 3 elementi:
- nomeattributo. E’ il nome dell’attributo su cui andiamo ad intervenire.
- =. L’uguale serve a dare un valore specifico all’attributo.
- “valore”. Sempre virgolettato, può essere un numero o del testo che ne specificano la trasformazione.
Quasi tutti i tag HTML hanno degli attributi e per ciascuno è possibile inserirne contemporaneamente più di uno. Ciononostante è sempre meglio usarli solo quando strettamente necessario in modo da cercare di mantenere un codice di pagina web il più pulito e leggero possibile. Ricordiamo sempre che per molte modifiche possiamo ricorrere anche al codice CSS che ci permette di sporcare meno il documento HTML.
! Gli attributi vanno sempre separati tra uno e l’altro da uno spazio vuoto.
Principali attributi di tutti gli elementi di una pagina web
- class=”nome della classe”. Assegna uno o più nomi di classe per la stilizzazione. Può essere utilizzato più volte nella stessa pagina.
- id=”identificativo unico”. Da un nome identificativo unico all’elemento per fini funzionali e di stilizzazione. Può essere usato una sola volta nella stessa pagina.
- style=”foglio di stile inline”. Attribuisce all’elemento stili di presentazione o layout in linea.
- title=”testo descrittivo”. Fornisce una descrizione all’elemento comparendo come tooltip quando il mouse ci passa sopra. Importante non confonderlo con il tag
<title>usato per il titolo della pagina posto all’interno del tag<head>.
Analizziamo il tag font
Per stabilire le caratteristiche di un testo bisogna usare il tag <font>:
Di base si presenta come: <font>testo</font>
Inserendo degli attributi potremmo avere:
<font size="23" color="blue" face="Verdana">Fashion Snobber</font>
Con questa stringa di codice HTML stiamo dicendo al browser di mostrare la scritta “Fashion Snobber” grande 23px, di colore blu e con font Verdana.
! Il tag <font> va inserito all’interno del tag <body> </body>.
Il tag img
Per inserire e gestire le immagini in un sito web si usa il tag <img>. La sua struttura si apre e si chiude in un’unica istanza senza aver bisogno di una chiusura perché è un elemento privo di contenuto. Facendo un esempio pratico, potremmo avere di base un tag <img> così:
<img src="https://www.fashionsnobber.com/logofashionsnobber.jpg" alt="Logo Fashion Snobber">
Analizzando questa stringa di codice HTML notiamo:
- img. E’ il nome del tag.
- src. Principale attributo del tag img. Non presenta un valore numerico, bensì un testo che specifica il percorso e l’origine dell’immagine. In poche parole è l’indirizzo del file che vogliamo mostrare.
- alt. E’ il testo alternativo che appare nel caso in cui il server non riesca a caricare o mostrare l’immagine. E’ un attributo facoltativo ma molto utile sotto un punto di vista SEO per facilitarne l’indicizzazione sui motori di ricerca. Deve contenere un testo che fornisca una descrizione di cosa rappresenta l’immagine.
Se vogliamo aggiungere ulteriori informazioni all’immagine possiamo ricorrere all’utilizzo dell’attributo title=”testo”. Questo permette di mostrare del testo quando un utente si sofferma con il mouse sopra un’immagine o un link.
Es. <img src="https://www.fashionsnobber.com/logofashionsnobber.jpg" title="FashionSnobber.com" alt="Logo Fashion Snobber"/>
Nel tag <img> si possono anche utilizzare l’attributo width=”valore” della larghezza e height=”valore” dell’altezza. Entrambi hanno valori numerici in pixel.
Es. <img src="https://www.fashionsnobber.com/logofashionsnobber.jpg" title="FashionSnobber.com" alt="Logo Fashion Snobber" width="480" height="200"/>
E’ possibile non inserire l’attributo altezza ma sono quello della larghezza. Automaticamente l’immagine verrà adattata alla proporzione della larghezza. Ovviamente ci sono molti altri modi di personalizzare le immagini andando ad agire poi sul codice CSS che vedremo più avanti.
! Il tag <img> va inserito all’interno del tag <body></body>.
Il tag table
Il tag <table> consente di organizzare i contenuti all’interno di una pagina web. Ha una struttura rigida che ne determina la sua composizione con regole ben precise da rispettare e la cui base di codice HTML non va mai modificata. Presenta un’apertura e una chiusura <table></table> e tra di esse c’è l’obbligo di inserire il tag <tr> all’interno del quale si può inserire solo il tag <td> o <th>.
Il tag <tr> gestisce le righe della tabella mentre il tag <td> definisce le celle e può contenere qualsiasi cosa.
Il tag <th> invece indica una cella che contiene un’intestazione.
La struttura base di una tabella in codice HTML con tre righe, due colonne e un solo dato per cella può essere così scritta:
<table border="2" width="332"><tr><td>Colonna 1</td><td>Colonna 2</td></tr><tr><td>Dato 1 di 1</td><td>Dato 1 di 2</td></tr><tr><td>Dato 2 di 1</td><td>Dato 2 di 2</td></tr></table>
Risultato visivo:
Nel caso in cui volessimo che la prima riga presenti un’intestazione con un solo dato largo come le due colonne sottostanti dovremo ricorrere all’utilizzo dell’attributo colspan=”numero” applicato al tag <td> o <th>. L’attributo colspan permette quindi di ottenere una cella che occupa più colonne.
Per ottenere una cella che invece si estende su più di una riga bisogna utilizzare l’attributo rowspan=”numero” applicato al tag <td>.
Esempio base di un’ipotetica pagina web organizzata con l’annidamento del tag <table> per far comprendere meglio il meccanismo:
<!DOCTYPE html><html lang="it"><head><meta charset="utf-8"><title>Fashion Snobber</title><link rel="stylesheet" type="text/css" href="css/introduzione.css" /></head><body><table border="2" width="1170"><tr><td width="500"><img src="immagini/logofashionsnobber.jpg" title="FashionSnobber.com" alt="Logo Fashion Snobber" width="480" /></td><td><font face="cinzel" size="23">Fashion Snobber</font></td></tr><tr><td colspan="2">Menu 1</td></tr><tr><td><table><tr><td>Menu 2</td></tr><tr><td>Dato 1</td></tr><tr><td>Dato 2</td></tr><tr><td>Dato 3</td></tr><tr><td rowspan="4">Dato 4</td></tr></table></td><td><table><tr><td rowspan="2"><img src="immagini/blogtips.jpg" title="Blog Tips" alt="Consigli per il tuo blog" width="350" /></td><td><img src="immagini/seasonalcolors.jpg" title="Seasonal Colors" alt="Colori di stagione" width="350" /></td><td><img src="immagini/download.jpg" title="Download" alt="Download gratuiti" width="350" /></td></tr><tr><td rowspan="6">Area Contenuti</td></tr></table></td></tr><tr><td colspan="2">Powered by Luna</td></tr></table></body></html>
Risultato visivo:
! Il tag <table> va inserito all’interno del tag <body></body>.
Tag <a> ed i link
In un qualsiasi sito web è sempre necessario sapere come creare un collegamento tra due pagine HTML. Ossia fare in modo che ad esempio cliccando su un contenuto nella home page si attivi e si apra un’altra pagina del sito. Questo può capitare sia cliccando su un’immagine che su un testo. Per attivare questo meccanismo bisogna usare il tag <a></a> con la sua inequivocabile apertura e chiusura e tutti gli attributi necessari per specificare, come e dove, si vuole indirizzare il collegamento. In questo modo il contenuto all’interno del tag diventerà un link.
Esempio con richiamo a una pagina HTML: Fai click<a href="About.html">qui</a>
Esempio con richiamo a un indirizzo web specifico: Fai click<a href="https://www.fashionsnobber.com">qui</a>
L’attributo href=”nome della pagina o url” contiene appunto il nome della pagina HTML o l’url, sia interno che esterno al sito, su cui vogliamo puntare.
Nel caso in cui vogliamo che il link si apra in un’altra pagina del browser dovremo utilizzare l’attributo target=”_blank” in questo modo:
Fai click<a href="https://www.fashionsnobber.com" target="_blank">qui</a>
Per impedire l’indicizzazione del collegamento sui motori di ricerca invece aggiungeremo l’attributo rel=”nofollow”.
Fai click<a href="https://www.fashionsnobber.com" rel="nofollow" target="_blank">qui</a>
Con l’attributo title=”testo esplicativo” possiamo specificare tramite un testo l’elemento a cui si riferisce l’attributo. Questo testo appare quando il cursore del mouse si ferma sul collegamento esattamente come abbiamo visto per il tag <img>.
Fai click<a title="Fashion Slobber: blog di moda e lifestyle" href="https://www.fashionsnobber.com" rel="nofollow" target="_blank">qui</a>
! L’indirizzamento per nome del file funziona solo se le due pagine HTML create sono nella stessa cartella della pagina chiamante.
Introduzione al codice HTML: Conclusioni
Con questa guida pratica sull’introduzione al codice HTML adesso sei in grado di comprendere meglio il linguaggio che si cela dietro ogni blog o sito web. Ti basterà completare il tutto con un’introduzione al codice CSS e potrai apportare più facilmente eventuali modifiche al tuo template qualora non rispecchi a pieno le tue esigenze. Ci tengo a precisare che comunque ormai ogni piattaforma di blogging fornisce le opportune sezioni in cui operare e ti basterà conoscere i codici esatti da inserire. Alcuni li puoi trovare nella pratica guida “Come personalizzare un blog su Blogger con i codici HTML e CSS“. Detto questo se invece hai bisogno di ulteriori informazioni più specifiche ti consiglio di affidarti ad HTML.it. Il sito di codice HTML più chiaro e completo che opera in questo settore.