Istituto Tecnico Industriale Statale

“Conte Michele Maria Milano” Polistena

Classe: 4 D - a. s. 2013/2014

HTML
Guida base al linguaggio

Prof. Rocco Ciurleo 1

Cos’è l’HTML
HTML è l'acronimo di Hypertext Markup Language ("Linguaggio di
contrassegno per gli Ipertesti") e non è un linguaggio di
programmazione ( C, C++, Pascal, Cobol, Java …)

Si tratta invece di un linguaggio di contrassegno (o 'di marcatura'),

che permette di indicare come disporre gli elementi all'interno di una
pagina: le indicazioni vengono date attraverso degli appositi marcatori,
detti "tag".

Ciò significa che l'HTML non ha meccanismi che consentono di

prendere delle decisioni ("in questa situazione fai questo, in
quest'altra fai quest'altro"), e non è in grado di compiere delle iterazioni
("ripeti questa cosa, finché non succede questo"), né ha altri costrutti
propri della programmazione.

Prof. Rocco Ciurleo 2

Lo standard HTML
L’organizzazione che si occupa di standardizzare la sintassi del
linguaggio HTML (il W3C: World Wide Web Consortium) ha
rilasciato diverse versioni di questo linguaggio (HTML 2.0, HTML
3.2, HTML 4.0); e – da un certo punto in poi – l’HTML si è evoluto
in XHTML (si tratta dell’HTML riformulato come linguaggio XML –
ne sono già state rilasciate due versioni).
Anche se abbiamo detto che l’HTML si è evoluto in XHTML ci sono
delle ottime ragioni per incominciare a studiare l’HTML e non
l’XHTML:

Prof. Rocco Ciurleo 3

Gli editor HTML
Editor AD OGGETTI (o WYSIWYG)
"WYSIWYG" è l'acronimo di "What You See Is What
You Get", che tradotto in italiano significa "Quello che
vedi è ciò che ottieni". Utilizzando questo tipo di
programmi non ci si trova a lavorare direttamente sul
codice HTML ma sugli oggetti (testo e immagini) che
costituiscono la pagina web. La disposizione degli
oggetti sulla pagina avviene semplicemente
spostandoli e trascinandoli col mouse. Il tempo di
apprendimento per questi programmi è molto breve.
Ovviamente anche le nozioni HTML necessarie per
utilizzare questo tipo di programmi vengono ridotte al
minimo indispensabile.
Prof. Rocco Ciurleo 4
Gli editor HTML
Editor TESTUALI
•

Sono programmi che consentono la scrittura (e la

modifica) diretta del codice HTML. Solitamente questi
programmi sono utilizzati da persone già esperte o da
chi vuol imparare il linguaggio HTML partendo da
zero e ha molto tempo da dedicare a questo
obiettivo. Utilizzando questo tipo di programmi,
almeno all'inizio, si impiega più tempo a realizzare
una pagina web rispetto agli editor WYSIWYG. Ma
con l'andare del tempo la scrittura e correzione
diretta del codice velocizzerà parecchio il lavoro.

Prof. Rocco Ciurleo 5

Struttura di un tag
All’interno di ogni pagina è presente una serie di marcatori (i TAG), a cui
viene affidata la visualizzazione e che hanno differenti nomi a seconda
della loro funzione.
I tag vanno inseriti tra parentesi angolari (<TAG>), la chiusura del tag
viene indicata con una “/” (è il simbolo comunemente detto “slash”.
Quindi: </TAG>). Il contenuto va inserito tra l’apertura e la chiusura del
tag medesimo, secondo questa forma:
<TAG attributi>contenuto</TAG>
Ecco un esempio, con una sintassi che serve a disporre un testo
giustificato a destra:
<P align="right">testo</P>
dall’esempio è evidente che la struttura di un attributo è:
attributo="valore". Quindi in definita la struttura di un tag sarà:
<TAG attributo_1="valore1"
attributo_2="valore2">contenuto</TAG>

Prof. Rocco Ciurleo 6

leggibilità
E’ una buona norma utilizzare dei caratteri di tabulazione (il
tasto tab a sinistra della lettera Q) per far rientrare il testo ogni
volta che ci troviamo in presenza di un annidamento e man mano
che entriamo più in profondità nel documento.

Un’altra strategia importante, per rendere il nostro codice più

leggibile è quella di inserire dei “commenti” nei punti più
significativi: si tratta di indicazioni significative per il webmaster,
ma invisibili al browser. Inserendo i commenti in punti specifici del
documento ci permette di mantenere l’orientamento anche in file
molto complessi e lunghi. La sintassi è la seguente:
<!-- questo è un commento -->

Prof. Rocco Ciurleo 7

Tag di base
La struttura base di una pagina HTML è composta da un codice
simile al seguente:

<HTML>
<HEAD>
< TITLE> Titolo della pagina </TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000">
Testo
</BODY>
</HTML>

Le parole comprese tra i segni " < " e " > " sono chiamati TAG
o marcatori in quanto marcano (definiscono) delle proprietà agli
oggetti che vengono inseriti al loro interno.

Prof. Rocco Ciurleo 8

 TAG: caratteristiche
- I tag vengono (a parte alcuni casi) sempre chiusi anteponendo al nome del tag il
segno " / ".
- I tag non sono case sensitive quindi possono essere scritti indifferentemente in
minuscolo o maiuscolo.
<HTML>
Viene sempre inserito all’inizio e alla fine del documento per consentire al browser
di capire che tutto ciò che è contenuto all’interno di questo tag è codice HTML
<HEAD>
Al suo interno viene inserita l’intestazione del documento ovvero le informazioni
necessarie ai browser ed ai motori di ricerca.
Al suo interno vengono solitamente inseriti:
- il titolo (<TITLE> … </TITLE>)
- i meta tag (<META … … … … >)
- i javascript
A parte il titolo le informazioni presenti all’interno del tag HEAD non vengono
visualizzate dal browser.

Prof. Rocco Ciurleo 9

TAG: caratteristiche
<BODY>
La funzione del tag BODY è quella di mostrare gli oggetti (testo,
immagini, suoni, applet, ecc) della pagina.
Il tag BODY è utilizzato sia per fornire al browser indicazioni sulla
posizione degli oggetti nel documento sia per impostare vari attributi di
visualizzazione per il documento come, ad esempio, il colore di sfondo
o il colore del testo.
La sintassi del tag può assumere la forma:
<BODY BGCOLOR="valore" TEXT="valore" LINK="valore"> che indica
rispettivamente il colore di sfondo della pagina, il colore dei caratteri, il
colore dei link.
Nel caso in cui questi campi fossero omessi il browser visualizzerà tutti i
particolari con caratteri e colori standard.

Prof. Rocco Ciurleo 10

Il titolo nella pagina
Mentre si compila una pagina c'è la possibilità
di decidere quale sarà il titolo che il browser
visualizzerà nella finestra. Il tag da usare per
l'inserimento del titolo è <TITLE> che dovrà
essere inserito all'interno del tag <HEAD>.
La sintassi corretta da utilizzare è:

<TITLE>titolo della pagina</TITLE>

Ecco un esempio:
<TITLE>Home Page 2 E-F </TITLE>

Prof. Rocco Ciurleo 11

Il sito sui motori di ricerca
Per quanto riguarda i motori di ricerca esistono tre logiche di funzionamento:
La prima si basa su un'iscrizione che come risultato alla ricerca richiama i dati immessi
durante l'iscrizione al motore di ricerca.
La seconda si basa sulla lettura del contenuto della prima pagina del sito e la
comparazione con i parametri di ricerca inseriti.
La terza si basa sulla lettura delle keywords inserite nell'intestazione della pagina e la
comparazione con i parametri di ricerca inseriti.
E' quindi buona regola iscriversi a quanti più motori di ricerca possibile, inserire nella
prima pagina una descrizione dei contenuti del sito quanto più dettagliata possibile e
inserire le keywords che altro non sono che semplici parole chiave.
Le keywords vanno inserite nella testa dello script con la seguente sintassi:

<HTML>
<HEAD>
<TITLE></TITLE>
<META name="KEYWORDS" content="scrivete qui le keywords">

Possiamo inserire più keywords separandole l'una dall'altra da una virgola ed uno spazio:
<META name="KEYWORDS" content=“itis, Polistena, scuola, informatica">
Per evitare un risultato opposto a quello sperato è consigliabile inserire solo parole
strettamente attinenti al contenuto del sito che si stà creando. E' bene ricordare che il tag
META non necessita di una chiusura.
Prof. Rocco Ciurleo 12
 Carattere: dimensione e colore
La scelta del carattere col quale scrivere il testo che compone il sito non sempre è
un semplice affare.
Il colore dei caratteri non dev'essere troppo acceso e deve avere il maggior
contrasto possibile rispetto al colore di sfondo in maniera tale da non disturbare
durante la lettura.
Per un sito commerciale o dedicato ad un'azienda è consigliabile usare sempre il
nero con lo sfondo delle pagine in bianco.
La dimensione del carattere è strettamente legata al gusto della persona che crea il
sito comunque sarà sufficiente usare misure nè troppo grandi nè troppo piccole.
Per impostare le caratteristiche del carattere si usa il tag <FONT> con la seguente
sintassi:
<FONT FACE="nome del carattere" SIZE="valore da 1 a 7" COLOR="codice del
colore"> Testo </FONT>

Per quanto riguarda il carattere è possibile inserirne più di uno separando i loro
nomi da una virgola.
Esempio: ... FACE="Arial, Verdana, Optima"...
Nel caso in cui nessuno di questi parametri sia impostato oppure nessuno dei
caratteri è presente nel computer del visitatore, verranno visualizzati i caratteri
standard.

Prof. Rocco Ciurleo 13

Formattare il testo
<B>, <I>, <U> sono tre dei più usati tag di formattazione fisica dell'HTML. Tutti vanno
aperti e successivamente richiusi:

<B> Testo grassetto </B>

Il testo compreso tra questi tag è trasformato in grassetto (la B sta per BOLD).

<I> Testo corsivo </I>

Il testo compreso tra questi tag è formattato in corsivo (la I sta per ITALIC)

<U> Testo sottolineato </U>

Il testo compreso tra questi tag è sottolineato pur non essendo un link (la U sta per
UNDERLINE).

Si possono applicare più attributi però bisogna nidificare ogni gruppo di tag all’interno di
quello seguente, così:
<B><I><U> classe 4 A </U></I></B>
Non è importante quale gruppo di tag si trovi nel livello più esterno, l’essenziale è che
la nidificazione sia simmetrica

Prof. Rocco Ciurleo 14

 Sfondo: colori e immagini
Durante la costruzione di un sito è possibile scegliere il colore di sfondo delle pagine
oppure è possibile scegliere se inserire un'immagine.
Il colore di sfondo viene definito nella riga del tag <BODY>, prima dell'inizio della
compilazione del contenuto vero e proprio.
La sintassi corretta da usare è:

<BODY BGCOLOR="codice del colore">

esempio: <BODY BGCOLOR="FF0000">

Prima di inserire un'immagine come sfondo bisogna prendere qualche piccola

precauzione.
Prima di tutto l'immagine dovrà essere sfumata perché altrimenti renderà difficile la
lettura del testo.
Seconda cosa, se l'immagine ha dimensioni minori dello schermo verrà ripetuta più volte
fino a ricoprire l'intera dimensione della pagina visualizzata.
Per questo motivo è sconsigliabile scegliere questa opzione, a meno che l'immagine non
si inserisca come sfondo in una tabella.
Per inserire un'immagine come sfondo si deve usare la seguente sintassi:
<BODY BACKGROUND="percorso della cartella nella quale è salvata e nome
dell’immagine">
Esempio: <BODY BACKGROUND=“/documenti/web/sfondo.gif”>
Prof. Rocco Ciurleo 15
Paragrafi e giustificazione
Creare paragrafi con <P>
Il tag <P> definisce un nuovo paragrafo del testo indicando al browser che lo
stesso deve rimanere su una nuova riga ed essere posizionato a destra, a
sinistra o al centro. Se non specificato oltre, il tag <P> allinea il testo di default
sulla sinistra. Per indicare altri tipi di posizionamento esistono attributi specifici:

<P ALIGN=left> testo</p>

Definisce un paragrafo e allinea sulla sinistra (left).
<P ALIGN=right> testo</p>
Definisce un paragrafo e allinea sulla destra (right).
<P ALIGN=center> testo</p>
Definisce un paragrafo ed allinea al centro (center).
<P ALIGN=justify> testo</p>
Definisce un paragrafo giustificato
Andare a capo con <BR>
<BR> è un tag di interruzione di riga. Ha un funzionamento simile al paragrafo
visto in precedenza, ma se ne discosta perchè non inizia un nuovo paragrafo.
In altri termini la sua funzione è simile alla pressione del tasto "invio" della
tastiera.
Va usato singolarmente senza tag di chiusura.

Prof. Rocco Ciurleo 16

Elenchi Numerati
Gli elenchi ordinati (numerati) sono costituiti da un singolo tag di
apertura e chiusura <OL></OL> e tanti tag di apertura per quante sono
le voci di menu <LI>. Questa è la corretta sintassi per creare elenchi
ordinati:
<OL>
<LI> Prima voce di menu
<LI> Seconda voce di menu
<LI> Terza voce di menu
</OL>

Indicizzazione alfabetica maiuscola: Indicizzazione con numeri romani maiuscoli:

<OL TYPE=A> <OL TYPE=I>
…… ,,,,,,,
Indicizzazione alfabetica minuscola: Indicizzazione con numeri romani minuscoli:
<OL TYPE=a> <OL TYPE=i>
………. …….

Prof. Rocco Ciurleo 17

Elenchi Puntati
Gli elenchi non ordinati (o puntati) si compongono di un tag
unico di apertura e chiusura <UL></UL> e tanti tag di elenco
per quante sono le voci da indicizzare <LI>. La corretta sintassi
per definire un elenco puntato è la seguente:

<UL>
<LI> Prima voce di menu
<LI> Seconda voce di menu
<LI> Terza voce di menu
</UL>
I pallini pieni sono ottenibili con disc: L'attributo square imposta elenchi
<UL TYPE=disc> definiti da quadratini pieni:
…….. <UL TYPE=square>
L'attributo circle imposta pallini vuoti ……
all'interno:
<UL TYPE=circle>
……..

Prof. Rocco Ciurleo 18

Immagini
La sintassi corretta per inserire un'immagine in una pagina html è:

<IMG SRC="percorso e nome dell'immagine con estensione" WIDTH="larghezza

dell'immagine" HEIGHT="altezza dell'immagine">

Supponiamo che l'immagine che dobbiamo inserire sia stata salvata col nome di " 5a.gif
", dimensioni pari a 25x50 pixel e sia residente nella cartella " immagini ". In questo
caso la sintassi diverrà:
<IMG SRC="immagini/4a.gif" WIDTH="25" HEIGHT="50">

I due formati grafici più usati sul web sono i formati GIF e JPG.
Formato GIF
Il formato GIF gestisce un massimo di 256 colori compreso il trasparente.
Le immagini non vengono compresse, per ridurre il peso si usa la riduzione del numero di colori usati.
Le immagini in formato GIF vengono usate prevalentemente per pulsanti, titoli, animazioni.
Formato JPG
Il formato JPG gestisce un numero illimitato di colori ad eccezione del trasparente.
La riduzione del peso dell'immagine viene ottenuta con una compressione della stessa, a discapito della qualita di
visualizzazione.
Le immagini in formato JPG vengono usate prevalentemente per immagini complesse e molte tonalità di colore
(come, ad esempio, scansioni).

Prof. Rocco Ciurleo 19

Collegamenti ipertestuali (link)
I collegamenti tra le pagine o tra i siti assumono il nome di link.
La creazione di un link non comporta niente di particolarmente
difficile ma solo tanta attenzione.
L'inserimento di una lettera sbagliata o inserire una lettera
maiuscola anziché minuscola potrebbe generare un link ad una
pagina inesistente e di conseguenza la visualizzazione della
pagina d'errore.
I link sono identificati dal tag <A HREF="indirizzo della
pagina"> parola o frase da linkare </A>.
Mettiamo il caso che siamo interessati a creare un collegamento
alla pagina chiamata pagina_2.html.
Nel caso in cui ci sia una frase tipo:
"pag successiva"
il link assumerebbe la sintassi:

<A HREF="pagina_2.html">pag successiva</A>

Prof. Rocco Ciurleo 20

Collegamenti ipertestuali (link)
Nel caso in cui si debba effettuare il link ad un sito esterno basterà inserire il suo
indirizzo per esteso all'interno del comando "a href" e niente altro, seguendo la
sintassi successiva:

<A HREF="http://www.nomesito.it">frase o parola</A>

Durante la compilazione del codice è anche possibile decidere se la pagina richiamata

dal link verrà visualizzata all'interno della stessa pagina oppure se verrà richiamata
un'altra finestra del browser semplicemente aggiungendo il comando TARGET=" "
all'interno della stringa precedente.

<A HREF="pagina_2.html" TARGET="_blank">pagina successiva</A>

Allo stesso modo dei link con le pagine web anche i collegamenti con le caselle di
posta elettronica non presentano particolari difficoltà, richiedono solo tanta
attenzione perché se dovessimo sbagliare l'indirizzo di posta al quale eseguiamo il
collegamento nel migliore dei casi la mail non sarà recapitata a nessuno.
Il collegamento alle caselle di posta elettronica avviene tramite il comando MAILTO
e la sintassi è:

<A HTML="MAILTO:indirizzo_e-mail">frase o parola</A>

<A HTML="MAILTO:[email protected]">scrivi a rocco ciurleo</A>
Prof. Rocco Ciurleo 21
 Link interni o ancore
È possibile anche creare un indice interno al documento, utilizzando le àncore. Ciascuna àncora
può avere infatti un nome:
<a name=”primo”>Capitolo primo</a>
Da notare che in mancanza dell’attributo che indica il collegamento (href) le àncore non
vengono viste come link, ma la loro formattazione è indistinguibile dal “normale” testo.
In un ipotetico indice è allora possibile far riferimento all’àncora presente all’interno del
documento attraverso un link che punti ad essa:
<a href=”#primo”>vai al primo paragrafo Capitolo primo</a>
il cancelletto indica che il collegamento deve cercare un àncora chiamata “primo” all’interno
della pagina stessa.
Se non si specifica il nome dell’àncora a cui si vuol puntare, viene comunque creato un link che
punta ad inizio pagina (viene cercata un’àncora il cui nome non è specificato). Questo infatti è
un ottimo escamotage per creare link “vuoti” (in alcuni casi vi occorreranno). Ad esempio:
<a href=”#”>link vuoto</a>
Per creare un indice interno alla pagina si procede dunque in due fasi distinte:
creazione dell’ancora a cui puntare (<a name=”mioNome”>)
creazione del collegamento all’ancora appena creata e riferimento
attraverso il cancelletto (<a href=”#mioNome”>)

Prof. Rocco Ciurleo 22

Tabelle
Le tabelle sono degli strumenti che aiutano ad organizzare le pagine web in
modo più ordinato e pulito
Le tabelle implicano l'inserimento di più tag che indicano al browser la
conformazione della stessa, il numero di colonne e righe nonché la dimensione
delle varie parti che la compongono
Per inserire una tabella formata da due righe e due colonne si dovrà inserire il
seguente codice:
<TABLE WIDTH="250" BORDER="1" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD WIDTH="125">&nbsp;</TD>
<TD WIDTH="125">&nbsp;</TD>
</TR>
<TR>
<TD WIDTH="125">&nbsp;</TD>
<TD WIDTH="125">&nbsp;</TD>
</TR>
</TABLE>

Prof. Rocco Ciurleo 23

 Tabelle
L'apertura del codice inizia con:
<TABLE WIDTH="xxx" BORDER="0" CELLSPACING="0" CELLPADDING="0">
TABLE indica al browser che in quel punto dovrà iniziare a disegnare una tabella,
WIDTH indica la larghezza della tabella e può essere espressa in pixel e in percentuale
BORDER indica lo spessore dei bordi della tabella espresso in pixel
CELLSPACING indica la distanza tra le celle espresso in pixel
CELLPADDING indica il bordo interno della cella espresso in pixel.
</TABLE> indica la chiusura della tabella.
Passando alla seconda riga è possibile notare che ci sono due parti che si ripetono:
<TR>
<TD WIDTH="xxx">&nbsp;</TD>
<TD WIDTH="xxx">&nbsp;</TD>
</TR>

<TR> </TR> indicano rispettivamente l'inizio e la fine di una riga

<TD WIDTH="xxx"> </TD> indicano rispettivamente l'apertura e la chiusura di una
colonna. Ogni <TD> indica una colonna.
WIDTH indica la larghezza della colonna espresso in pixel
&nbsp; sono dei caratteri che si inseriscono nelle celle vuote per evitare che vengano
schiacciate, al posto di questi caratteri andranno inseriti i contenuti come se fosse una
parte qualsiasi del codice.
Prof. Rocco Ciurleo 24