1 - Tag Fondamentali

LINGUAGGIO HTML
Tag fondamentali
Linguaggio HTML - Tag fondamentali

Introduzione
Tratto da Wikipedia http://it.wikipedia.org/wiki/Html:
“HTML (acronimo per Hyper Text Mark-Up Language) è un linguaggio usato per descrivere i
documenti ipertestuali disponibili nel Web. Tutti i siti web presenti su Internet sono costituiti da
codice HTML, il codice che è letto ed elaborato dal browser, il quale genera la pagina come noi la
vediamo. L'HTML non è un linguaggio di programmazione, ma un linguaggio di markup, ossia
descrive il contenuto, testuale e non, di una pagina web. Punto HTML (.html) o punto HTM (.htm)
è anche l'estensione comune dei documenti HTML.”
In questo documento sono presentati, per completezza, anche elementi HTML deprecati. Questi
sono segnalati alla fine del documento stesso, in un’apposita sezione.
Tag: html, head, title, meta, body

Argomenti trattati
Struttura di una pagina html
Intestazione del documento
Editor html testuali
o Esempio 1: Creare una semplice pagina Web con un editor di testo
Attributi del tag body
o Esempio 2: Creare una pagina specificando il colore di sfondo e il colore del testo
o Esempio 3: Creare una pagina specificando una immagine di sfondo
Pathname di file
Elementi deprecati
Struttura di una pagina html

Una pagina html è costituita da semplice testo combinato con direttive di formattazione dette tag. I
tag sono racchiusi tra parentesi angolari (i simboli di minore “<” e maggiore “>”).
Convenzionalmente, in questo documento, i tag saranno di colore blu scuro, per distinguerli dal
testo normale. Osservate la figura seguente, che mostra la struttura di una pagina html.
<html>
<head>
INTESTAZIONE DEL DOCUMENTO
</head>
<body>
CORPO DEL DOCUMENTO
</body>
</html>
1
Autore: Bocchi Cinzia
Ultimo aggiornamento: 23/09/2008
LINGUAGGIO HTML
Tag fondamentali
Una pagina html deve obbligatoriamente contenere i tag html, head e body.
− Il tag html racchiude tutto il documento.
− Il tag head contiene l’intestazione del documento.
− Il tag body contiene il corpo del documento.
Una osservazione, prima di procedere:
I tag html, head e body sono “tag doppi”, nel senso che si usano in coppia. Il tag di chiusura
differisce dal tag di apertura solo per uno slash “/” iniziale. Nel seguito vedremo che esistono anche
tag singoli, privi del tag di chiusura.
Intestazione del documento

La sezione che rappresenta l’intestazione del documento, può contenere il titolo della pagina
(informazione fortemente consigliata) e altre informazioni opzionali, dette meta-informazioni, quali
l’autore del documento, l’editor utilizzato per scriverlo e così via.
<head>
<title>
TITOLO DEL DOCUMENTO
</title>


<meta name = "keywords" content = " parola 1, parola 2, ……, parola n ">


<meta name = "description" content = " descrizione ">


<meta name = "GENERATOR" content = " nome dell’editor ">


<meta name = "author" content = "Nome e Cognome dell’autore">
</head>
Altre meta-informazioni sono:
<meta http-equiv = "refresh" content = " x secondi">

Ricarica la pagina ogni x secondi.
<meta http-equiv = "refresh" content = " x secondi; url = http://…// nome_file.html ">
Dopo x secondi ricarica la pagina specificata.
<meta http-equiv = "refresh" content = " data">

Ricarica la pagina dopo la data indicata.
2
LINGUAGGIO HTML
Tag fondamentali
<meta name = "ROBOTS" content = " NOINDEX">

Se la pagina non deve essere indicizzata nei Motori di ricerca.
Osservazione
I tag html possono contenere degli attributi. Un attributo ha sempre la forma
nome_attributo = “valore_attributo”
Convenzionalmente, in questo documento, i nomi degli attributi saranno rappresentati in arancione.

Inoltre, quando il valore di un attributo non è completamente specificato o è generico (perché, per
esempio si sta proponendo un esempio) viene rappresentato in corsivo.
Editor html testuali

Esistono molti strumenti per creare pagine html, tuttavia è sufficiente anche un editor di testo come
Blocco Note di Windows. Vi rimando al sito HTML.it
http://download.html.it/categorie/start/114/windows/editor-html-testuali/ dove potete trovare
numerosi editor testuali freeware e shareware da scaricare. Io ve ne consiglio tre:
− Editplus http://download.html.it/software/vedi/1595/editplus/
− Notepad++ http://download.html.it/software/vedi/1871/notepad/
− Textpad http://download.html.it/software/vedi/2219/textpad/
Scegliete quello che vi aggrada maggiormente.
Dopo aver installato l’editor testuale, potete provare a copiare il codice dell’esempio1 e a
visualizzare la pagina creata.
Esempio 1: Creare una semplice pagina Web con un editor di testo

Documento creato con TextPad 4.4.0.
esempio1.html
<html>
<head>
<title> Esempio 1 </title>
<meta name="description" content="Esempio di codice html">
<meta name="GENERATOR" content="TextPad 4.4.0">
<meta name="author" content="Bocchi Cinzia">
</head>
<body>
Primo esempio di pagina Web.
</body>
</html>
Copiate questo codice e salvate il documento con estensione .html. Il documento salvato sarà
rappresentato con un’icona che dipenderà dal browser di default. Fate doppio clic sull’icona per
aprire il documento: vedrete la vostra prima pagina html.
3
LINGUAGGIO HTML
Tag fondamentali
Attributi del tag body

Il tag body può specificare i seguenti attributi:
- bgcolor, per impostare il colore di sfondo del documento;
- background, per impostare un’immagine come sfondo del documento;
- text, per impostare il colore del testo del documento;
- link, per impostare il colore dei link non visitati;
- alink, per impostare il colore dei link attivi;
- vlink, per impostare il colore dei link visitati.
• Impostazione del colore di sfondo <body bgcolor= “colore”>

Il colore può essere espresso in lingua inglese o in cifre esadecimali, in accordo con la seguente
tabella:
Nome del colore Codice esadecimale RGB

(in inglese)
aqua 00FFFF
black 000000
blue 0000FF
fuchsia FF00FF
gray 808080
green 008000
lime 00FF00
maroon 800000
navy 000080
olive 808000
purple 800080
red FF0000
silver C0C0C0
teal 008080
white FFFFFF
yellow FFFF00
se si utilizza il codice esadecimale occorre anteporre ad esso il simbolo cancelletto (#). Per esempio:
<body bgcolor=”blue”> oppure
<body bgcolor=”#000FF”>
• Impostazione dello sfondo a una immagine <body background= “pathname file”>

Il file deve contenere un’immagine in formato GIF o JPEG. Se si desidera che l’immagine di sfondo
non scorra con la pagina, si può utilizzare l’attributo bgproperties, nel modo seguente:
<body background= “pathname file” bgproperties= “fixed”>
• Impostazione del colore del testo <body text= “colore”>
• Impostazione del colore dei collegamenti ipertestuali <body link= “colore” alink=
“colore” vlink= “colore”>
4
LINGUAGGIO HTML
Tag fondamentali
Esempio 2: Creare una pagina specificando il colore di sfondo e il colore del

testo
esempio2.html
<html>
<head>
</head>
<body bgcolor="blue" text="white">
Secondo esempio di pagina Web.
</body>
</html>
Esempio 3: Creare una pagina specificando una immagine di sfondo

Esempio3.html
<html>
<head>
</head>
<body background="..\Immagini\BACKGRND.GIF">
Terzo esempio di pagina Web.
</body>
</html>
Pathname di file
Analizziamo il percorso del file specificato in
<body background="..\Immagini\BACKGRND.GIF">
Il file contenente l’immagine si trova nella cartella Immagini mentre il file html si trova nella
cartella Codice. Le due cartelle sono contenute, a loro volta, in una cartella di livello superiore di
nome Lezione 1.
Lezione 1
Codice Immagini 1- Tag fondamentali.doc
esempio3.html BACKGRND.GIF
5
LINGUAGGIO HTML
Tag fondamentali
Quando inseriamo il collegamento all’immagine nel file Esempio3.html, dobbiamo specificare

anche il percorso per arrivare a tale file. Il percorso è:
..\Immagini\BACKGRND.GIF
− I due punti iniziali indicano la cartella superiore rispetto a quella nella quale si trova il file
esempio3.html, cioè Lezione1.
− Immagini è la cartella che contiene l’immagine di sfondo.
− BACKGRND.GIF è il nome del file contenente l’immagine.
Tutti gli elementi del percorso (detto anche pathname) sono separati da un backslash “\” perché
stiamo operando in ambiente Windows. In altri ambienti unix-like come Linux, si usa lo slash “/”
per separare gli elementi di un pathname.
Un pathname può essere:
− assoluto se il percorso inizia dalla radice (es. l’unità C in Windows)
− relativo se il percorso inizia dalla cartella nella quale ci troviamo ad operare attualmente.
Il pathname dell’esempio è relativo.
Elementi deprecati (specifica HTML 4.01 del W3C)

Tutti gli attributi del tag body
bgcolor
background
link
alink
vlink
Vedremo in seguito come sia possible impostare tali proprietà del documento con i fogli di stile
(CSS).
Quest'opera è stata rilasciata sotto la licenza Creative Commons Attribuzione-Non commerciale 2.5 Italia. Per leggere una copia della
licenza visita il sito web http://creativecommons.org/licenses/by-nc/2.5/it/ o spedisci una lettera a Creative Commons, 171 Second
Street, Suite 300, San Francisco, California, 94105, USA.
6

1 - Tag Fondamentali

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

1 - Tag Fondamentali

Uploaded by

Copyright:

Available Formats

LINGUAGGIO HTML

Linguaggio HTML - Tag fondamentali

Tag: html, head, title, meta, body

Struttura di una pagina html

Intestazione del documento

Altre meta-informazioni sono:

<meta http-equiv = "refresh" content = " x secondi">

<meta http-equiv = "refresh" content = " data">

<meta name = "ROBOTS" content = " NOINDEX">

Convenzionalmente, in questo documento, i nomi degli attributi saranno rappresentati in arancione.

Editor html testuali

Esempio 1: Creare una semplice pagina Web con un editor di testo

Attributi del tag body

• Impostazione del colore di sfondo <body bgcolor= “colore”>

Nome del colore Codice esadecimale RGB

• Impostazione dello sfondo a una immagine <body background= “pathname file”>

• Impostazione del colore del testo <body text= “colore”>

Esempio 2: Creare una pagina specificando il colore di sfondo e il colore del

Esempio 3: Creare una pagina specificando una immagine di sfondo

Codice Immagini 1- Tag fondamentali.doc

Quando inseriamo il collegamento all’immagine nel file Esempio3.html, dobbiamo specificare

Elementi deprecati (specifica HTML 4.01 del W3C)

You might also like