Nel precedente post ho scritto che:

“per classificare le pagine web, Google valuta, oltre alla presenza delle specifiche parole chiave, anche dove sono presenti all’interno della pagina”. 

Per poter vedere come Google esegue questa funzione, bisogna osservare come è scritta una pagina web.

 

Il codice HTML

Il testo contenuto in una pagina web non è scritto come appare alla nostra vista. I browser – come Internet Explorer, Firefox, Chrome, Safari, ecc. – per mostrare le pagine come le vediamo, hanno bisogno che siano opportunamente “formattate” e che, quindi, siano scritte in un particolare linguaggio: l’HTML (HyperText Markup Language).

Questo linguaggio fa sì che in tutto il mondo qualsiasi browser possa comprendere e visualizzare il contenuto in modo corretto, perché è il linguaggio standard. Questo non accadrebbe se, ad esempio, i browser potessero leggere un format proprietario: Microsoft vorrebbe utilizzare, per il suo browser (Internet Explorer), il suo format (Word); Apple, per il suo browser (Safari), vorrebbe utilizzare il suo format (Pages); ecc. 

Sarebbe il caos: per poter visualizzare una pagina web nei vari browser, bisognerebbe scriverla  in tutti i format utilizzati. 

Ecco che allora ci viene in soccorso l’HTML, un linguaggio che viene compreso da tutti i browser. 

L’HTML è quindi il linguaggio che indica ai browser come visualizzare sia il contenuto testuale che quello non testuale: come i vari elementi sono disposti (testo, immagini, video, ecc.), quali parole sono in corsivo e quali in grassetto, quando occorre andare a capo, ecc.

 

In pratica, il browser vede una parola – ad esempio, “computer” – senza differenze tra grassetto, corsivo, virgolette, ecc. Per indicare al browser che la parola “computer” deve essere scritta in grassetto, o tra virgolette, dobbiamo aggiungere un’etichetta (markup) davanti alla parola.

Questa etichetta (o marcatore), che aiuta il browser a capire come la pagina è “formattata”, si chiama “tag” ed è racchiusa tra parentesi angolari, cioè tra il simbolo < ed il simbolo >. 

Attraverso vari tag, diciamo al browser quale parte del testo è un titolo, quale testo è un paragrafo, quale testo deve essere enfatizzato, dove devono essere collocate le immagini, ecc. 

Faccio un breve esempio. Immaginiamo di voler scrivere una pagina web in questo modo: 

Il browser è il programma che usate quando navigate nel Web e svolge principalmente due compiti:

• scarica i vari file che si trovano su un computer remoto (il server) e che fanno riferimento a un certo indirizzo;
• legge i documenti scritti in html e, a seconda delle indicazioni contenute, visualizza la pagina in un modo, piuttosto che in un altro.

Se scrivessimo il testo in questo modo, il browser lo visualizzerebbe così (semplifico un pò per non complicare troppo le cose): 

Il browser è il programma che usate quando navigate nel Web e svolge principalmente due compiti: scarica i vari fileche si trovano su un computer remoto (il server) e che fanno riferimento a un certo indirizzo; legge i documenti scritti in html e, a seconda delle indicazioni ivi contenute, visualizza la pagina in un modo, piuttosto che in un altro.

In pratica, la pagina apparirebbe come se fosse costituita da un testo in cui non sono presenti parole in grassetto e in corsivo, in cui non si va mai a capo e in cui non esistono “punti elenco”. 

Perché il browser visualizzi la pagina come noi vorremmo, dobbiamo indicare esplicitamente come i vari elementi sono disposti nella pagina: quando andare a capo, quando scrivere una parola in grassetto o in corsivo, ecc. 

Per esempio, se vogliamo indicare al browser che bisogna andare a capo, dobbiamo utilizzare questo tag: <br>. Se vogliamo scrivere una o più parole in grassetto, dobbiamo far precedere queste parole dal tag <b> (o <strong>), in quanto questo tag indica al browser che tutto quello che segue dovrà essere scritto in grassetto. 

Per indicare al browser che non deve più scrivere in grassetto, si deve inserire il tag </b> (o </strong>). Infatti, per delimitare un testo – nel nostro caso, scrivere alcune parole in grassetto – si deve delimitare il campo da un tag di apertura e da uno di chiusura (che coincide con il tag di apertura preceduto da una barra: </>). 

Ad esempio, per visualizzare la prima riga del nostro esempio, si dovrebbe scrivere:

Il <b>browser</b>è il programma che usate …

Il primo comando che bisogna digitare, quando si inizia a scrivere il testo di una pagina web, è rappresentato dal tag <html>: in questo modo, si comincia la pagina comunicando al browser in quale linguaggio verrà scritta.

Allo stesso modo, quando si termina di scrivere il contenuto della pagina, bisogna comunicare al browser che la pagina è finita: si dovrà pertanto utilizzare il tag di chiusura, cioè il tag </html>. 

Un intera pagina viene quindi delimitata attraverso due tag che indicano al browser l’inizio e la fine del documento: <html> e </html>.

All’interno di questi due tag, la pagina web si divide in due distinte sezioni (figura seguente):

1. l’intestazione (header), delimitata dai tag <head> e </head>, all’interno dei quali bisogna indicare: a) il titolo associato alla pagina, racchiuso dai tag <title> e </title>; b) delle informazioni tecniche (metadata), che non vengono visualizzate dal browser e che sono utili per i motori di ricerca (descrizione del contenuto della pagina, parole chiave utilizzate, ecc.);
2. il corpo (body), delimitato dai tag <body> e </body>, all’interno dei quali bisogna scrivere tutto il testo della pagina web ed inserire i tag previsti per la sua formattazione: questo contenuto verrà visualizzato dal browser. 

 

 

Quindi, per scrivere una pagina web, abbiamo questi principali tag: 

<html>                            (indica al browser l’inizio della pagina) 

 

<head>                             (inizio della sezione “head”)

 

            In questa sezione si devono indicare, oltre ad altri elementi,

            il titolo della pagina e i meta data (utili per i motori di ricerca)

 

</head>                            (fine della sezione “head”)

 

<body>                                 (inizio della sezione “body”: indica al

                                                    browser che il testo della pagina inizia qui)

 

            In questa sezione si deve scrivere il contenuto della pagina

            che deve essere visualizzato dal browser

 

</body>                                (indica al browser che la sezione “body” è finita)

 

<html/>                                 (indica al browser che la pagina è terminata)

 

Un esempio del codice HTML di una pagina web

Vediamo un esempio semplificato (tratto dal libro “Head First HTML with CSS & XHTML”, di Elisabeth Freeman e Eric Freeman, ed. O’Reilly):

 

 

Per creare questa pagina è stato utilizzato il seguente codice HTML:

<html>                                               (indica al browser l’inizio del documento)

<head>                                               (inizio della sezione head)

<title>Head First Lounge</title>         (A, titolo della pagina, visibile nella

                                                                         finestra del browser)

</head>                                              (fine della sezione Head)

<body>                                                (inizio della sezione body) 

<h1>Welcome to the Head First Lounge</h1> 

                                                              (B, titolo principale del contenuto)

<img src=“drinks.gif”>                            (C, posizionamento dell’immagine)

<p>                                                        (D, inizio di un paragrafo)

    Join us any evening for refreshing elixirs,

    conversation and maybe a game of two of

    <em>Dance Dance Revolution</em>.   (E, inserimento testo in corsivo)

</p>                                                        (fine del paragrafo)

<h2>Directions</h2>             (F, indica che la parola è un sottotitolo e che quindi

                                                deve avere un carattere più piccolo del titolo h1)

<p>                                                              (G, inizio di un altro paragrafo)   

    You’ll find us right in the center of 

    downtown Webville. Come join us!

</p>                                                             (fine del paragrafo) 

</body>                                                      (fine della sezione body) 

</html>                                                    (indica al browser la fine della pagina)

 

Quindi, quando il browser legge il codice HTML, interpreta tutti i tag che sono presenti nel documento. Questi tag dicono al browser qual è il titolo della pagina; quali sono i paragrafi (dove iniziano e dove finiscono); qual è il titolo principale del contenuto e quali sono quelli secondari (sottotitoli, visualizzati con caratteri più piccoli); dove posizionare le immagini; quale parte del testo deve essere enfatizzata; ecc.

Ora che abbiamo visto come viene scritta una pagina web, possiamo passare ad esaminare come i motori di ricerca cercano le parole chiave e come le valutano, a seconda di dove sono posizionate.

Questo argomento sarà trattato nel prossimo post.