Guida HTML: Struttura della Pagina, Paragrafi e Link

Nel precedente tutorial hai  già impostato il tuo ambiente di lavoro, hai realizzato una prima pagina HTML e hai imparato il significato della sigla HTML: “HyperText Markup Language”.

Devi sapere che l’HTML fu inventato per rispondere a un’esigenza ben precisa: condividere informazioni.
Ormai ci siamo abituati all’esistenza di Internet e alla possibilità di interrogare un motore di ricerca come Google per trovare ogni tipo di risposta in una serie di pagine web, senza immaginare che alla base di tutto ciò vi è proprio il linguaggio HTML.

Entro la fine di questo secondo tutorial sarai in grado di sfruttare la potenza di HTML per scrivere un semplice ipertesto, sottoforma di pagina web, completo di titolo, paragrafi di testo e link (collegamenti) ad altre risorse.

Ti senti in debito per cotante informazioni gratuite? Non tenerti dentro una simile sofferenza, sdebitati subito con un tweet! ;-)

Ahhh, non ti senti meglio adesso?
Grazie mille!

I tag 

L’HTML usa i tag (etichette) per definire delle porzioni di contenuto.
Avrai già notato l'utilizzo dei simboli maggiore e minore: "<>".

I tag sono definiti dai simboli "<>" secondo la sintassi: “<nome-del-tag>” dove al posto di “nome-del-tag” compare ovviamente una stringa di testo che definisce il nome del tag. Come abbiamo già visto per i tag già incontrati: <b>, <i>, <html> e come vedrai per i successivi che incontreremo.

I tag sono quasi sempre in coppia: un tag di apertura e un tag di chiusura.

  • Esempio di tag di apertura: <html>
  • Esempio di tag di chiusura: </html>

Puoi pensare ai tag come a delle parentesi: ogni volta che ne apri una, devi anche ricordarti di chiuderla.
 
I tag possono anche essere annidati, ovvero contenuti uno dentro l’altro; in tal caso devi aprirli e chiuderli nel giusto ordine, esattamente come le parentesi delle espressioni matematiche. 

Esempio:

<primotag><secondotag>Un po' di testo</secondotag></primotag>

Sapendo quanto sopra, saresti capace di rendere un testo contemporaneamente in grassetto e italico?

Il precedente tutorial ci ha insegnato anche come impostare un file html.
Tutto quello che faremo adesso sarà compreso fra i tag <html> e </html> che servono, per l’appunto, a dichiarare che al proprio interno si trova il contenuto html.

Infine, come stiamo per vedere, esistono anche dei tag singoli, che non hanno bisogno del rispettivo tag di chiusura.

Per iniziare, innanzitutto devi aprire Atom.

La struttura della pagina HTML: head, title, body e paragrafi

Head e Title: intestazione e titolo della pagina HTML

Partiamo dal file “ciao-mondo.html” realizzato nel precedente tutorial:

 

Per prima cosa creiamo una cartella “lezione-1” cliccando col tasto destro sulla cartella “HTML” e scegliendo “New Folder”.
Devi ottenere questa struttura:

 

 

A questo punto duplichiamo il file ciao-mondo.html,il file realizzato nel corso del precedente tutorial, all’interno della cartella /HTML/lezione-1.
Puoi farlo in diversi modi, il procedimento più semplice consiste nel cliccare sul nome del file col tasto destro del mouse, scegliere “Copy” (copia), quindi cliccare col tasto destro sulla cartella “lezione-1” appena creata e scegliere “Paste” (incolla):

 

Ottenendo la seguente struttura di file e cartelle:

 

 

Per aiutarti a ritrovare in seguito gli argomenti che tratteremo, d’ora in avanti nomineremo i file a seconda dell’argomento in essi trattato.
Per questo motivo rinominiamo il file duplicato che si trova adesso nella cartella “lezione-1” sostituendo il nome “ciao-mondo-html con “1-head-e-title.html”. Puoi farlo cliccandoci sopra col tasto destro del mouse e scegliendo “Rename” (rinomina).

 

 

Ottenendo il seguente risultato:

Ora apri il file 1-head-e-title.html, appena creato, facendoci sopra un doppio click:

Il file ovviamente è identico al precedente, ma puoi notare che nella linguetta in alto è identificato dal nuovo nome.

Ogni file HTML è sempre suddiviso in due sezioni: head (testa) e body (corpo). 


La sezione head 

La sezione head si apre con il tag <head>, si chiude con il tag </head> e contiene importanti informazioni sulla pagina web, tra le quali anche il suo titolo.
Il titolo della pagina web è compreso tra i  tag <title> e </title>.


Esercizio n.1.1.1:

  • Aggiungi i tag <head> e </head> all’interno dei tag <html> e </html>
  • All’interno dei tag <head> e </head>, inserisci i tag <title> e </title>.
  • All’interno dei tag <title> e </title>, scrivi come titolo della tua pagina web: I tag ‘head’ e ‘title’. Potrai vederlo nel tab in cima alla finestra del tuo browser (più avanti ho inserito uno screnshot per mostrarti bene cosa intendo).

Ecco il risultato che devi ottenere:

Il titolo di questa pagina è “I tag ‘head’ e ‘title’”, ricordati di salvarla con Ctrl+S o Cmd+S.
Puoi visualizzare il file in anteprima come abbiamo fatto prima. Dal menu in alto vai al percorso: Packages > Markdown Preview > Toggle Preview

Lavorando offline, non abbiamo la possibilità di vedere effettivamente il risultato del tag <title>. Ma nel caso caricassimo online il file, nel browser verrebbe visualizzato in questo modo:

Il titolo apparirebbe nella linguetta in alto della finestra del tuo browser.

La sezione body e i paragrafi

Abbiamo già scritto i tag head e in essi abbiamo inserito il title, ora occorre definire il body (corpo) del documento html. 
Mentre la sezione head della pagina HTML contiene delle informazioni sulla pagina stessa (per ora solo il titolo, ma ne aggiungeremo presto delle altre) il body contiene tutto ciò che la pagina deve effettivamente mostrare al visitatore (testi, immagini, video e quant’altro).

Come puoi immaginare, il body è delimitato e definito dai tag <body> e </body>.

Esercizio n.1.1.2:

  1. Crea un nuovo file nella cartella “lezione-1” e chiamalo “2-body.html”;
  2. Definisci la struttura del file HTML vista finora con DOCTYPE, html, head e title;
  3. Completa la struttura del file HTML definendo la sezione body subito dopo la sezione head (attenzione: la sezione body dev’essere all’interno della sezione html ma all’esterno della sezione head!)

Ecco il risultato da ottenere:

Quello che hai appena realizzato, è il tuo primo file HTML con una struttura completa e corretta. Congratulazioni!
Nella figura qui sopra la riga 7 del file, leggermente evidenziata, rappresenta il contenuto della sezione body, attualmente vuoto. Anche il titolo della pagina, alla riga 4, è vuoto. 
Puoi riempirle entrambe le sezioni con un testo a piacere, come ho fatto io:

 

Nota che per evitare di utilizzare lettere accentate al posto di scrivere “è” ho scritto “e’”, utilizzando un apostrofo al posto dell’accento. Fra poco risolveremo questo inconveniente.
Salva il file e visualizzalo in anteprima come abbiamo fatto prima:

Nota bene: per riferirmi alla procedura di cui sopra (salvataggio del file e sua apertura in anteprima), d’ora in poi ti dirò solo “aprilo in anteprima”.

Avrai notato che il testo inserito nel body compare sempre su un’unica riga, come se fosse un singolo paragrafo, anche se contiene degli a capo. 

Questo perché nel linguaggio HTML gli spazi e gli a capo vengono ignorati, se vuoi andare a capo hai due possibilità: 

    1.    Definire un paragrafo utilizzando i tag di apertura e chiusura <p> e </p> (da paragraph, paragrafo);
    2.    Utilizzare il tag <br> (da break, che in inglese vuol dire ‘a capo’).

Nota bene: il tag <br> è il primo tag singolo che incontriamo. Non ha un tag di chiusura perché non deve contenere niente, è semplicemente un “a capo”. I tag singoli, per distinguerli più facilmente da quelli di apertura, puoi scriverli anche con la sintassi: “<nome-del-tag-singolo/>”, cioè aggiungendo uno slash “/” prima del simbolo “>”. Per esempio, il tag <br>, essendo un tag singolo, possiamo scriverlo anche come <br />, ed è così che faremo per distinguerlo più facilmente da un tag di apertura come, per esempio <b>.

Esercizio n.1.1.3

  1. Inserisci il testo che attualmente si trova all’interno del body in un unico paragrafo;
  2. Aggiungi un secondo paragrafo con del testo a piacere;

Esempio:

  1. Visualizza il file in anteprima e otterrai questo risultato:

Ed ecco che hai ottenuto due paragrafi.

  1. Ora prova ad andare a capo all’interno dello stesso paragrafo utilizzando il tag <br/>, per esempio così:

Aprilo in anteprima, ed ecco il risultato che otterrai:

Prima di continuare, rinominiamo il file e cambiamo il titolo contenuto tra i  tag <title>, perché ormai non tratta più solo del body.

Clicca sul file col tasto destro, scegli “Rename” e poi rinominalo in “2-body-paragrafi-e-br.html”, quindi cambia il title in “Body, paragrafi e a capo” come in figura.

Ricordati di salvare il file!

Le lettere accentate

E’ tempo di risolvere l’ultimo problema: la lettera accentata.
Il linguaggio HTML supporta di default (come impostazione predefinita) le sole lettere dell’alfabeto inglese e i semplici caratteri noti come codifica ASCII, che non contengono né le lettere accentate, né tutta una serie di altri simboli.

Affinché la pagina HTML supporti le lettere accentate è necessario specificare l’utilizzo di una codifica dei caratteri diversa dalla codifica ASCII. Tale codifica è nota col nome UTF-8

La trattazione di cosa siano le codifiche dei caratteri e la loro storia esula dagli scopi di questo tutorial. Se sei curioso puoi leggere questo articolo di approfondimento

Il succo del discorso è che, per utilizzare le lettere accentate, dobbiamo dichiarare all’interno della pagina HTML che vogliamo utilizzare la codifica UTF-8 al posto della codifica predefinita ASCII.  Tale dichiarazione si effettua con il tag:

<meta charset="utf-8" /> 

che prende il nome di “meta charset tag”.

Qui di seguito, alcune domande per controllare che tu abbia ben compreso alcuni concetti fondamentali (non sbirciare le risposte che seguino):

  1. In quale sezione della pagina andrà inserito il meta charset tag, head o body? perchè?
  2. E’ un tag composto da tag di apertura e chiusura o un tag unico?

 


SEGUE SOLUZIONE, NON SBIRCIARE! 


 

 

Procediamo all’inserimento del meta charset tag nella sezione head della pagina HTML e alla sostituzione degli apostrofi con veri accenti, come in figura.

In modalità anteprima su Atom avresti comunque visualizzato correttamente le lettere accentate, ma sul browser no. Applicando il meta charset tag, problema risolto. Aprendo il file su un browser, sarai in grado di visualizzare correttamente le lettere accentate.

Avrai notato che il file HTML presenta una struttura un po’ particolare per quanto riguarda gli spazi dall’inizio della riga. In particolare nell’esempio sopra riportato le righe 1, 2 e 17 cominciano senza nessuna spaziatura; le righe 3, 6, 7 e 16 cominciano dopo quattro spazi; le righe 4, 5, 8, 11, 12 e 15 cominciano dopo otto spazi e le restanti dopo dodici spazi; Questo tipo di organizzazione del codice HTML prende il nome di “indentazione”.

L’indentazione

Nello scrivere codice in qualsiasi linguaggio si incontrano presto due esigenze:

  1. Scrivere codice corretto che sarà quindi letto ed eseguito correttamente dai computer;
  2. Scrivere codice facilmente leggibile anche da ogni essere umano che debba lavorarci per correggerlo o modificarlo.

L’indentazione serve a rispondere a questa seconda esigenza.

Un paio di esempi valgono più di mille parole.
Come ti ho detto, il linguaggio HTML non considera né le spaziature né gli a capo. Questo significa che lo stesso file dell’esempio precedente potremmo scriverlo anche così:


O addirittura su un’unica riga, così:

In entrambi i casi, si tratta di un file sintatticamente corretto e quindi interpretato dal browser nello stesso identico modo, cioè, sempre così:


Tuttavia, se ti chiedessi di fare una modifica al secondo paragrafo, con quale versione del file ti troveresti più a tuo agio? Ovviamente con la prima versione, cioé quella composta da 17 righe e correttamente indentata!

Per indentare correttamente un file, e quindi renderlo più leggibile, basta seguire questa semplice regola aurea:

il contenuto va spaziato rispetto al contenitore.

Poi farlo manualmente utilizzando il tasto TAB.

Su Atom premere il tasto TAB equivale, di default, a inserire due spazi. Se preferisci modificare questa impostazione, puoi farlo cliccando dal menu in alto su Atom > Preferences

Si aprirà un tab, e alla sezione Settings troverai la voce “Tab Lenght”:


Puoi modificare la lunghezza a piacere. Io utilizzerò sempre un’indentazione di due spazi.

Per maggiori informazioni sull’indentazione puoi leggere questo articolo di Wikipedia.

A proposito, penso che sia tempo di insegnarti a creare dei link proprio come questo

I collegamenti ipertestuali o “link”

Come ricordato all'inizio di questo capitolo, l’HTML è un linguaggio per la definizione di ipertesti, cioè di testi con collegamenti ad altre parti dello stesso testo e/o ad altre pagine. E il web, altro non è che un GIGANTESCO ipertesto.
E’ per questi motivi che il tag che definisce i collegamenti ipertestuali o “link” è il più importante di tutti. Tanto è vero che gli è stata assegnata la prima lettera dell’alfabeto. 
I link si definiscono infatti con il tag <a>.
Ed ecco come funziona:

per prima cosa creiamo un file denominato “3-link.html” nella cartella “lezione-1”.

All’interno di questo nuovo file creiamo ancora una volta la struttura completa di un file HTML:

All’interno del body inseriamo un paragrafo e scriviamo la prima cosa che ci viene in mente, ovvero quanto sia bello e interessante questo tutorial, ovviamente!

A questo punto vogliamo che la Mamma possa cliccare su “Eccola qui” per andare direttamente all’introduzione di questa guida, che si trova all’indirizzo https://corsidia.com/materia/web-design/webmaster-tutorial.
In altre parole, vogliamo che “Eccola qui” diventi un link che punti all’indirizzo internet della guida di cui stiamo parlando.

La prima cosa da fare è inserire il testo che vogliamo trasformare in un link all’interno dei tag <a> ed </a>, così:

Tuttavia questo, ovviamente, non può bastare: stiamo dicendo al browser che “Eccola qui” è  un link, ma non stiamo specificando dove deve puntare o, in altre parole, a quale pagina deve rimandare il visitatore.

Per farlo dobbiamo aggiungere un attributo al tag <a>, tale attributo si chiama href  (da “hypertext reference”, riferimento ipertestuale). La sintessi degli attributi HTML è la seguente:

<nometag attributo1=”valore1” attributo2=”valore2”, attributo3=”valore3”>

e così via, i tag HTML possono contenere un numero indefinito di attributi.

Tornando al caso in questione, dobbiamo aggiungere l’attributo href al tag <a> e il valore di tale attributo è l’indirizzo internet della pagina a cui li link deve puntare: https://corsidia.com/materia/web-design/webmaster-tutorial

Vuoi provarci da solo? Fai pure.
 


SEGUE SOLUZIONE, NON SBIRCIARE! 


 

 

Aprendo il file in anteprima si può constatare che il link è presente.

Prova a cliccare sul link che hai appena creato. Cosa succede? Vieni rimandato all’introduzione di questo tutorial?

Ben fatto!

Tuttavia… ho l’impressione che a questa pagina manchi qualcosa.
Non sarebbe meglio se, oltre al title comparisse anche un bel titolone vero e proprio, all’interno della pagina?

Qualcosa di questo tipo insomma:


 
Per questo esistono i tag header e te ne parlerò, fra le altre cose, nel prossimo tutorial!

Esercizio n.1.1.4

Scrivi una pagina HTML per parlare della cosa che preferisci, la prima che ti viene in mente.
Ci hai pensato? 
Ehm... forse è meglio la seconda che ti viene in mente...

Appena hai trovato una cosa di cui vuoi scrivere (occhio che sei online), crea una pagina html col nome appropriato all’interno della cartella “lezione-1”, strutturala in modo corretto come abbiamo imparato e poi utilizza paragrafi, a capo, grassetti, italici e link.

Assicurati di utilizzare tutti i tag visti finora!


Concetti fondamentali

  • Nella sezione head del file HTML vanno le informazioni utili al browser (per esempio l'impostazione della codifica per visualizzare correttamente le lettere accentate) mentre nella sezione body vanno i contenuti che vedrà il visitatore.
  • Alcuni tag non hanno bisogno del rispettivo tag di chiusura perché non contengono testo, un esempio è il tag <br/> per andare a capo.
  • E' importante indentare correttamente il codice.
  • I tag possono contenere degli attributi, per esempio il tag <a> contiene l'attributo href.
  • La sintassi per creare link: <a href="url-della-pagina-destinazione">testo cliccabile</a>

Ora sei pronto a imparare come utilizzare gli altri tag HTML fondamentali, vedrai che non sono molti, e alla fine di questa prima sezione sull'HTML ti aspetta una bella sorpresa. Coraggio, ti manca poco per poter dire di conoscere l'HTML!

Nel prossimo tutorial imparerai l'utilizzo di titoli, liste, commenti e di uno strumento per controllare la validità del tuo codice HTML. Che aspetti?

Vorrai mica perderti altri articoli come questo?
Iscriviti per riceverne altri!

Scritto da

Duccio

Duccio Armenise

Corsidia Founder

Aiuto solo i migliori Maestri a trovare i loro prossimi Studenti. Come? Così! :)

Bio - uCV

Per

Corsidia logo

I tuoi prossimi Studenti ti stanno già cercando, tu ci sei?

Materie

Trova un altro corso