Pagine Web: il linguaggio HTML
1. Introduzione
Il linguaggio HTML ed i fogli di stile CSS permettono di costruire pagine Web. In particolare
HTML si occupa del contenuto della pagina, mentre CSS regola il layout, cioè il modo in cui la
pagina viene visualizzata sullo schermo.
Per poter impartire al browser le istruzioni necessarie a creare un sito internet occorre utilizzare un
Editor di testo, come Blocco Note di Windows. Il file generato dovrà, poi, essere salvato sia in
formato testo, aggiungendo al nome scelto l'estensione .txt, che html, aggiungendo al nome
l'estensione .html. Avere a disposizione il file.txt consente di modificare il sito, mentre il file.html
permette di visualizzare sul browser la pagina ottenuta.
Le pagine Web contengono due tipi di oggetti:
•
•
testo del documento
marcatori o tag
I tag sono racchiusi tra parentesi angolari, ovvero tra i simboli di minore < e maggiore >. Per
scrivere correttamente una pagina HTML occorre che:
1. I tag siano scritti tra le parentesi angolari: <nome_tag> (tag di apertura)
2. Ogni tag aperto venga chiuso, per farlo si usa la seguente sintassi: </nome_tag> (tag di
chiusura).
Un marcatore può essere completato da uno o più attributi. Gli attributi estendono il significato e le
informazioni relative ad un determinato tag specificandone le proprietà. Questo viene scritto
all'interno delle parentesi angolari del tag, da esso separato da uno spazio, e possiede un valore
preceduto dal simbolo = (uguale) e delimitato da doppi apici, in sintesi:
<nome_tag
attributo=”valore”>
Oltre a questi tipi di tag, esistono marcatori con la seguente sintassi:
<nome_tag />
Ad essi non corrisponde alcun tag di chiusura.
Altri elementi utili sono i Commenti, questi non vengono visualizzati sulla pagina Web, così come i
tag, né vengono letti dal browser, ma consentono al progettista del sito di inserire note ed appunti.
La loro sintassi è la seguente:
<!-- commento -->
Esiste un metodo per verificare la correttezza del codice scritto con l'editor di testo, ovvero per
validare la pagina Web, basta andare sul sito http://validator.w3.org/:
cliccare su Validate by File Upload
inserire il percorso in cui è stato salvato il file.html usando il comando Sfoglia ed infine cliccare su
Check. Se non ci sono errori comparirà la seguente schermata:
Nel seguito è riportata la struttura base di un documento HTML (ho inserito dei commenti in modo
da chiarire il significato delle diverse istruzioni. Non inserite mai un commento prima
di <!doctype html> ):
<!doctype html>
<!-- Informa il browser che stiamo scrivendo un documento html -->
<html lang=”it”>
<!-- Tag html di apertura: tra questo marcatore ed il corrispondente
tag di chiusura, </html>, sono contenute tutte le istruzioni
necessarie a costruire la pagina Web. L'attributo lang specifica
la lingua con cui intendiamo scrivere il nostro sito,
ovvero it (italiano) -->
<head>
<!-- Tag head di apertura: tra questo marcatore ed il corrispondente
tag di chiusura, </head>, è possibile inserire
l'intestazione del documento-->
<meta charset=”windows-1252” />
<title> </title>
<!-- Tag della forma < nome tag />: ogni lingua,
per essere rappresentata nel browser, fa uso di un set di
caratteri (charset), una tabella in cui ad ogni lettera
o simbolo corrisponde un codice, il sistema di codifica
migliore è utf-8, ma in questo caso useremo
windows-1252 in quanto consente di visualizzare
correttamente tutti i simboli della nostra lingua1-->
<!-- Tra i tag di apertura e chiusura title va inserito il titolo della
pagina Web che sarà visualizzato nella barra
del titolo del browser -->
</head>
<body> </body>
<!-- Tra i tag di apertura e chiusura body va inserito il
contenuto vero e proprio della pagina Web,
ovvero testo, immagini, link, tabelle ecc. -->
</html>
Vi consiglio di preparare un file.txt con queste istruzioni e copiarne il contenuto ogni volta
vogliate costruire una pagina Web. Questo vi permetterà di non dover ricordare troppi
comandi e di concentravi solo sull'estetica ed il contenuto del sito ;).
1
Ad esempio se avessimo scelto come charset utf-8 per poter visualizzare su schermo la terza persona singolare del
verbo essere, è, avremmo dovuto scrivere nel body &egrave; piuttosto che è, e così per altri simboli. La scelta del
charset windows-1252 consente di evitare queste inutili complicazioni, ma fornisce in fase di validazione un
messaggio di warning (avvertimento), irrilevante per i nostri scopi.
2. Inserire Titoli e Sottotitoli
All'interno del blocco body è possibile inserire il contenuto vero e proprio della pagina Web.
Come prima cosa è opportuno inserire un titolo ed un sottotitolo, per farlo occorre utilizzare i tag di
apertura ,<hn>, e chiusura, </hn>, dove n è un numero intero da 1 a 6 che indica la dimensione del
carattere: <h1> visualizza un titolo molto grande in grassetto, mentre <h6> corrisponde ad un
sottotitolo di piccole dimensioni, come si può vedere dalla seguente figura:
Al tag <hn> possiamo applicare diversi attributi :
•
<hn style=”background:red”> Titolo </hn>: permette di inserire un colore allo sfondo, in
questo caso rosso.
•
<hn style=”color:red”>: permette di visualizzare un titolo colorato:
E' possibile associare ad uno stesso tag più di un attributo, la sintassi è la seguente:
< nome tag attributo=”valore1;valore2;...;valore10”>
Quindi se ad esempio volessimo un titolo rosso su sfondo blu dovremmo utilizzare entrambi gli
attributi elencati in precedenza e scrivere:
<h1 style="background:blue;color:red"> Benvenuti sul sito della IV I </h1>
Il risultato su schermo è:
Esistono anche altri attributi, ma, per motivi di semplicità, ci limiteremo a questi.
3. Inserire un paragrafo
Il tag di blocco <p> </p> inserisce un paragrafo che presenta una spaziatura prima e dopo:
Il tag <p> </p> ha gli stessi attributi del tag <hn> </hn>.
Come si può vedere dalla figura precedente, per andare a capo basta inserire i diversi paragrafi tra il
marcatore di apertura <p> e quello di chiusura </p>. Tuttavia, esiste il tag <br/> che permette di
mandare il testo alla riga successiva:
L'unico inconveniente è rappresentato dal fatto che per lasciare uno spazio tra le due righe occorre
aggiungere un ulteriore tag <br/>:
Per inserire, tra due paragrafi successivi, una linea orizzontale di separazione si usa il tag <hr/>:
Questo tag può essere utilizzato anche all'interno dello stesso paragrafo:
4. Elenchi puntati e numerati
I tag <ul></ul> (unordered list) e <ol></ol> (ordered list) inseriscono, rispettivamente, un elenco
puntato ed un elenco numerato. Per inserire le diverse voci di un elenco occorre usare all'interno di
questi, i tag <li></li> (list item).
La struttura di un elenco puntato è la seguente:
<ul>
<li>voce elenco 1</li>
<li>voce elenco 2</li>
<li>voce elenco 3</li>
</ul>
E fornisce su schermo il seguente risultato:
La struttura di un elenco numerato è:
<ol>
<li>voce elenco 1</li>
<li>voce elenco 2</li>
<li>voce elenco 3</li>
</ol>
E viene visualizzato sul browser come:
Per quanto riguarda un elenco ordinato è possibile inserire diversi attributi:
•
L'attributo start specifica il valore di partenza dell'elenco:
•
L'attributo type indica la tipologia di marcatore dell'elenco ordinato. I possibili valori sono:
A (lettere maiuscole: A, B, C)
a (lettere minuscole: a, b, c)
I (lettere maiuscole romane: I, II, III)
i (lettere minuscole romane: i, ii, iii)
Si possono creare elenchi complessi attraverso l'annidamento dei tag <ul> e <ol>, come
nell'esempio in figura: l'elenco ordinato <ol> contiene non solo il proprio testo all'interno dei tag
<li></li> (Space Oddity, Alladin Sane,...), ma anche il sotto elenco non ordinato <ul> con i relativi
elementi <li> (Traccia 1, Traccia 2, …).
E' possibile modificare il precedente elenco, ad esempio, come segue:
5. Inserire un'immagine
La sintassi corretta per inserire un'immagine è:
<img src=”percorso/foto.jpeg” />
dove l'attributo src specifica il percorso del file che contiene l'immagine da caricare nella pagina.
Per risalire al percorso del file basta cliccare il tasto destro del mouse e successivamente le voci
Proprietà, Dettagli e copiare ciò che compare alla voce Percorso cartella.
Per una gestione ordinata dei file è consuetudine raccogliere tutte le immagini del sito nella stessa
cartella in cui sono contenuti i file.txt e .html.
5. Inserire un link
Per creare un collegamento in una pagina si usa il seguente tag:
<a href=”indirizzo”> Nome associato al link </a>
Ad esempio il link alla pagina Google si rappresenta con il seguente codice HTML:
<a href=”http://www.google.it”> Google </a>
che produce su schermo il seguente risultato:
