Dopo aver impostato l'area di lavoro ed aver installato gli strumenti necessari all'ottimizzazione siamo pronti per organizzare la struttura delle pagine.
Come creare la struttura di una pagina Web utilizzando Brackets
È molto importante definire la struttura dei documenti in quanto ciò che sarà inserito all'interno dovrà essere letto e visualizzato in maniera corretta dai motori di ricerca che avranno il compito di indicizzare le pagine ed i contenuti mostrandoli all'interno dei risultati.
Nelle lezioni precedenti abbiamo introdotto il linguaggio HTML ed abbiamo visto alcuni esempi di scrittura del codice, ora è il momento di stabilire i confini entro i quali questi elementi dovranno essere inseriti per essere correttamente indicizzati e visualizzati online.
Tutte le pagine HTML hanno una struttura ben definita che contiene non solo gli elementi che le compongono ma anche elementi esterni, come i fogli di stile, di cui parleremo nella prossima lezione, e librerie esterne come jQuery che è appunto una libreria JavaScript usata per le applicazioni Web della quale avremo modo di parlare più avanti.
Ognuno di questi elementi dovrà essere inserito in un punto esatto della pagina per poter funzionare correttamente ed essere individuato più facilmente dai motori di ricerca.
Come si struttura una pagina Web?
Avviamo Brackets, apriamo il file chiamato index.html creato nelle precedenti lezioni e cancelliamo tutto il contenuto presente al suo interno in maniera da iniziare da zero.
In caso non avessi salvato il file, ti basterà creare un nuovo documento e rinominarlo usando il nome index.html, del quale spiegheremo più avanti il significato.
La prima cosa che dobbiamo stabilire è il tipo di documento, sembra scontato avendo salvato il file con estensione .html ma è sempre buona norma dichiarare il tipo di documento anche a livello di codice, in maniera da far capire nel minor tempo possibile al browser quale tipo di documento dovrà interpretare.
Per fare ciò scriviamo il seguente codice:
<!DOCTYPE html>Con Il termine doctype, indichiamo la contrazione di Document Type Declaration.
Il contenitore principale
Ora procediamo con la creazione del contenitore principale che avrà il compito di racchiudere al suo interno tutto il codice strutturale della pagina. Il contenitore più grande ed esterno del documento si identifica nel seguente modo:
<html>
</html>All'interno del primo tag possiamo inserire una voce dedicata alla lingua dei contenuti che andremo a scrivere, i quali potranno essere riportati in Italiano oppure in altre lingue.
Possiamo quindi aggiungere l'attributo lang="" all'interno del quale specifichiamo la lingua, nel nostro esempio utilizzeremo l'Italiano perciò scriveremo lang="it"
Le librerie
Ora che abbiamo inserito il tag che delimita il contenitore principale procediamo con il contenitore dedicato alle librerie esterne ed al codice CSS, richiamato in questo modo:
<head>
</head>Questo contenitore è molto importante perché incaricato di elaborare, tra le altre, librerie CSS e JavaScript.
Il body
A questo punto possiamo procedere con la creazione del contenitore centrale delimitato dai tag <body> </body>.
Come suggerisce anche il nome, questo elemento è il corpo del documento, all'interno del quale inseriremo tutti gli elementi che comporranno la nostra pagina Web.
Generare la struttura con un'estensione
Ora che abbiamo analizzato i contenitori principali che compongono le pagine HTML, dobbiamo tenere a mente che questi dovranno essere presenti all'interno di tutte le pagine che comporranno il sito Web, per questo motivo possiamo utilizzare l'estensione chiamata HTML Skeleton, vista nella lezione precedente, grazie alla quale ottenere automaticamente la creazione di tutti i contenitori che serviranno per la corretta visualizzazione del file.
Clicchiamo quindi sopra all'icona relativa all'estensione ed apriamo la finestra dedicata alle opzioni proposte.
La prima istruzione che possiamo inserire è quella destinata alla struttura della pagina, ovvero contenente tutti i tag che compongono la struttura base delle pagine HTML.
Procediamo quindi con la selezione di questa prima opzione e procediamo all'inserimento.
Notiamo come la struttura inserita in modo automatico sia identica a quella che abbiamo creato in modo autonomo con l'aggiunta di alcune stringhe che ora analizzeremo.
Andiamo con ordine, la prima modifica rispetto al lavoro manuale è la seguente:
<meta charset="utf-8">Per UTF-8 si intende la codifica standard dei caratteri in rete, questo codice viene usato per assicurare la corretta lettura delle parole presenti all'interno del documento, in particolare i caratteri speciali e le lettere accentate.
La riga di codice sottostante è anch'essa indispensabile per il corretto funzionamento del documento, si occupa in particolare del funzionamento delle regole "responsive" che permettono il riadattamento della pagina a seconda del dispositivo che si utilizza per visualizzarla.
Se ad esempio visualizziamo un sito Web attraverso lo schermo di uno smartphone o di un tablet, gli elementi devono avere una disposizione differente rispetto a quella che si avrebbe tramite il monitor di un PC.
Se la seguente riga di codice non fosse presente, le istruzioni non funzionerebbero e la visualizzazione sarebbe identica ovunque. In questo modo le pagine o il sito Web non sarebbero ottimizzate e anche i motori di ricerca penalizzerebbero il nostro lavoro.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Nelle prossime lezioni vedremo come funziona il responsive design e analizzeremo le regole che ci permetteranno di ottimizzare la visualizzazione del nostro sito Web su tutti i dispositivi mobili.
Il title
Un'ultima regola è quelle dedicata al titolo della pagina, richiamata con il tag <title></title>
All'interno di questa voce dovremo inserire il nome della pagina in maniera da informare i motori di ricerca ed i browser su quale pagina è attiva in quel momento.
Il titolo sarà inoltre visibile a chiunque quando la nostra pagina a Web verrà visualizzata.
