Sei sulla pagina 1di 5

INTRODUZIONE ALL'HTML1

Quando guardi una pagina web in un browser vedi delle parole. Queste parole solitamente hanno
alcune caratteristiche di stile, come ad esempio caratteri di differenti grandezze e colori. In molti casi
una pagina presenta anche immagini o video. A volte pu esserci un form dove puoi inserire (o
ricercare) informazioni, oppure personalizzare la visualizzazione secondo il tuo gradimento. Spesso
una pagina contiene animazioni e contenuti che cambiano mentre il resto della pagina rimane uguale.
Diverse tecnologie (come CSS e JavaScript) possono essere usate per definire gli elementi di una
pagina web. Tuttavia, di base, una pagina web definita usando l'HTML (HyperText Markup
Language), letteralmente "Linguaggio di contrassegno per gli Ipertesti". Senza HTML, non esiste una
pagina web.
Una breve storia dell'HTML
Alla fine degli anni 80, Tim Berners-Lee stava lavorando come fisico al CERN (l'Organizzazione
europea per la ricerca sul nucleare). Egli escogit un sistema che permettesse agli scienziati di
condividere documenti su internet. Prima della sua invenzione, la comunicazione via internet era
limitata al testo base, usando tecnologie come email, FTP (Protocollo di Trasferimento File) e schede di
discussione. L'invenzione dell'HTML consent l'uso di un modello in base al quale i contenuti
memorizzati in un server centrale potessero essere trasferiti e visualizzati in una postazione di lavoro
locale per mezzo di un browser.
Che cos' l'HTML?
L' HTML un linguaggio di contrassegno. Esso "dice" al browser come visualizzare i contenuti. L'HTML
separa il "contenuto" (parole, immagini, audio, video, ecc.) dalla "presentazione" (la definizione del tipo
di contenuto e le istruzioni per come quel tipo di contenuto debba essere visualizzato). L'HTML usa un
set di elementi predefiniti per identificare il tipo di contenuto.
Per esempio, l'elemento paragrafo formato dal tag iniziale "<p>" e del tag di chiusura "</p>".
L'esempio di seguito mostra un paragrafo contenuto nel corrispondente elemento HTML:
<p>Il mio cane ha mangiato tutti i miei compiti.</p>
Il browser usa i tag come indicatori di come visualizzare il contenuto di questi ultimi. Gli elementi che
includono contenuto possono solitamente contenere a loro volta altri elementi. Per esempio, l'elemento
enfatizzato ("<em>") pu essere inserito nell'elemento paragrafo:
<p>Il mio cane ha mangiato <em>tutti</em> i miei compiti.</p>
Alcuni elementi non ne contengono altri. Per esempio, il tag immagine ("<img>") specifica
semplicemente il nome del file del contenuto (un immagine appunto) come un attributo:

<img src="smileyface.jpg" />


Spesso una barra viene inserita prima del simbolo di maggiore per indicare la fine del tag quando esso
non ha del contenuto all'interno (anche se ci sono delle eccezioni).
Elementi I blocchi costruttori di base
1 Liberamente tratto da Introduzione all'HTML (https://developer.mozilla.org/it/docs/HTML/Introduzione)

L'HTML consiste in una serie di elementi. Tali elementi definiscono il significato del loro contenuto. Gli
elementi includono tutto ci che contenuto tra i tag di apertura e chiusura, inclusi i tag stessi. Per
esempio, l'elemento "<p>" indica un paragrafo; l'elemento "<img>" indica un immagine.
Alcuni elementi hanno un significato ben preciso, come "questa un immagine", "questa una testata"
(<h1>...<h6>), oppure "questa una lista ordinata" (<ol>). Altri sono meno specifici, come "questo
parte del testo" (<span>). Altri ancora sono usati per ragioni tecniche, come "questa una
informazione identificativa della pagina che non dovrebbe essere visualizzata" (<head>, <link>).
La maggior parte degli elementi possono contenerne altri, formando una struttura gerarchica. Una
pagina web molto semplice ma completa potrebbe essere questa:
<html>
<head>
<title>Sample document</title>
</head>
<body>
<p>
Il mio cane ha mangiato <em>tutti</em> i miei compiti.
</p>
</body>
</html>
Come potete vedere, gli elementi <html> inglobano il resto del documento, e l'elemento <body>
include il contenuto della pagina. Questa struttura spesso rappresentata come un albero con i suoi
rami (in questo caso, gli elementi <body> e <p>) che nascono dal tronco (<html>).
Tag
I documenti HTML sono scritti in testo comune. Essi possono essere scritti in qualunque editor di testo
che consente di salvare come testo (anche se la maggior parte degli autori di HTML preferisce usare un
editor specializzato che evidenzia la sintassi). I nomi dei tag possono essere scritti indifferentemente in
minuscolo o maiuscolo. Tuttavia, il W3C (il consorzio globale che si occupa degli standard HTML)
raccomanda l' uso del minuscolo.
L'HTML attribuisce un significato speciale a qualunque cosa inizi col simbolo minore ("<") e finisca col
simbolo maggiore (">"). Questo contrassegno viene chiamato tag. Di seguito un semplice esempio:
<p>Questo testo all'interno di un paragrafo.</p>
In questo esempio presente un tag di inizio e un tag di chiusura. I tag di chiusura sono identici a quelli
di inizio ma contengono anche una barra immediatamente dopo il simbolo di minore. La maggior parte
degli elementi in HTML sono scritti usando sia il tag di apertura che il tag di chiusura. I tag di inizio e
fine dovrebbero essere opportunamente nidificati, cio i tag di chiusura dovrebbero essere scritti in
ordine opposto rispetto a quelli di apertura. Una corretta nidificazione costituisce una regola che deve
essere rispettata al fine di scrivere del codice che sia valido secondo il W3C.
Questo un esempio di codice valido:
<em>Io voglio <strong>davvero</strong> uscire</em>.
Questo un esempio di codice non valido:

<em>Io voglio <strong>davvero</em> uscire</strong>.


Notate come nell'esempio di codice valido, il tag di chiusura per l'elemento interno viene posizionato
prima del tag di chiusura dell'elemento contenitore.
Attributi
Il tag di inizio pu contenere informazioni addizionali: tale informazione viene chiamata attributo. Gli
attributi solitamente sono composti da 2 parti:
Un nome dell'attributo.
Un valore dell'attributo.
I valori degli attributi che consistono in una singola parola o un singolo numero possono essere scritti
come sono, ma quando ci sono due o pi stringhe di caratteri nel valore, devono essere scritti tra apici.
Sono permessi sia gli apici (') che le virgolette ("). Molti sviluppatori preferiscono usare sempre usare le
virgolette (o gli apici) per rendere il codice meno ambiguo alla vista e evitare errori.
Di seguito un errore:
<p class=foo bar>
In questo esempio il valore doveva essere "foo bar" ma, visto che non erano presenti le virgolette, il
codice viene interpretato come se fosse stato scritto cos:
<p class="foo" bar="">
Riferimenti nominali a caratteri
I Riferimenti nominali a caratteri sono usati per stampare caratteri che hanno un particolare significato
in HTML. Per esempio, HTML interpreta i simboli di minore e maggiore come delimitatori di tag.
Quando vogliamo visualizzare un simbolo di maggiore ne testo, possiamo usare un riferimento
nominale al carattere. Ci sono quattro riferimenti nominali a caratteri che si devono conoscere:
&gt; denota il simbolo di maggiore (>)

&lt; denota il simbolo di minore (<)


&amp; denota la e commerciale (&), chiamata anche ampersand
&quot; denota le virgolette (")

Ci sono molte altre entit, ma queste quattro sono le pi importanti poich rappresentano caratteri che
hanno un significato speciale in HTML.
Commenti
L'HTML ha un meccanismo per inserire commenti che non sono mostrati quando la pagina viene
caricata dal browser. Questo utile per spiegare una sezione del codice, oppure per lasciare note per
altre persone che potrebbero lavorare sulla pagina, oppure per lasciare dei promemoria per se stessi. I
commenti HTML sono racchiusi in simboli come segue:
<!-- Questo un commento -->

Principali tag visti a lezione e il loro funzionamento


Abbiamo visto come ogni tag non rappresenti un elemento visivo, ma semplicemente indichi al browser
la presenza di un determinato elemento strutturale. Come detto in precedenza, un documento HTML
sempre composto da un elemento <html>, che funge da contenitore per tutti gli altri elementi.
All'interno troviamo il tag <head> e il tag <body>, che hanno rispettivamente il ruolo di contenitori per le
informazioni sulla pagina (collegamenti ad altri file, titolo della pagina, ecc.) e di contenitore principale
per gli elementi che verrano visualizzati.
All'interno del <body> troviamo poi i tag per marcare le varie componenti della pagina:
<h1>...<h6> sono i tag header, che identificano il titolo (di una pagina, oppure di un
paragrafo, ecc.)
<p>

il tag che identifica un paragrafo di testo

<ol>...<ul> sono i tag che segnano un elenco ordinato (numeri o lettere) o non ordinato
(puntini o altri simboli). Ognuno di essi pu contenere uno o pi tag
<li>

che identificano i singoli elementi della lista

<strong>

identifica zone di testo che vengono rese pi importanti rispetto al resto del testo
(normalmente vengono poste in grassetto)

<em>

identifica zone di testo che vengono enfatizzate (tipicamente in corsivo) rispetto


al resto del testo

<i><b><u>

sono tag ormai abbandonati, dopo l'avvento dei CSS. Servivano a mettere il
testo in corsivo, grassetto o sottolineato

Evidenziamo in particolare i tag <img> e <a>, che servono ad inserire le immagini o a creare
collegamenti.
<img>

serve ad inserire un'immagine all'interno della pagina: il riferimento all'immagine


va inserito attraverso l'attributo src

<a>

serve a creare un collegamento tra due pagine, utilizzando l'attributo href

I collegamenti e i riferimenti a file o immagini vanno inseriti usando il percorso relativo, cio a partire
dalla cartella in cui si trova il file html. La cartella corrente identificata dalla sequenza ./, senza le
virgolette; a partire da questa (che si pu omettere ma sempre buona prassi inserire) si pu andare in
una sottocartella scrivendone il nome oppure alla cartella precedente usando la sequenza ../
Ad esempio, un file koala.jpg contenuto nella stessa cartella del file html, avr questo tag:
<img src=./koala.jpg />
Se l'immagine fosse, invece, in una cartella immagini contenuta nella stessa cartella del file html, il tag
sarebbe:
<img src=./immagini/koala.jpg />

Se la cartella immagini, infine, fosse una cartella parallela a quella che contiene il file html, il tag
diventerebbe:
<img src=./../immagini/koala.jpg />