Narciso Motore Di Ricerca Gay&Lesbo

Menu principale:

costruire pagina Html

Livello 2

Un’introduzione al linguaggio HTML e alla creazione di una pagina Web
Appunti per il corso di Informatica (idoneità) N-R
a.a. 2001-2002
Stefania Funari
Dipartimento di Matematica Applicata
Università Ca’ Foscari di Venezia
funari@unive.it
Premessa
Con il diffondersi del World Wide Web (cui spesso ci si riferisce usando la nota sigla
WWW), una delle più diffuse applicazioni disponibili sulla rete Internet, si è sviluppato anche
uno speciale linguaggio denominato Hypertext Markup Language (HTML) utilizzato per
costruire i documenti presenti nel Web.
Poiché HTML rientra nella categoria dei linguaggi a marcatori, esso è costituito da un insieme
di istruzioni (dette marcatori, o tag), che servono a descrivere la struttura del documento. Ciò
che si richiede quindi per scrivere un documento in HTML è la conoscenza della sintassi con
cui i marcatori vengono introdotti all’interno del documento.
Oggi esistono comunque dei programmi che permettono di creare ed aggiornare pagine Web
anche senza scrivere direttamente in linguaggio HTML. Alcuni di questi si usano come
semplici programmi di videoscrittura e salvano i documenti direttamente in formato HTML.
Fra gli editor HTML troviamo ad esempio Netscape Composer, incluso nel pacchetto di
Netscape Communicator, Microsoft FrontPage e Macromedia Dreamweaver; anche con le
ultime versioni di Microsoft Word è possibile creare una nuova pagina Web a partire da un
documento di Word ed usare numerosi modelli che rappresentano i tipi più comuni di pagine
Web.
Se quindi viene data la possibilità di creare in via immediata documenti più o meno complessi
da pubblicare nel Web anche all’utente non conoscitore della sintassi del linguaggio HTML,
d’altro lato è comunque importante conoscere il linguaggio formale o perlomeno i suoi
rudimenti, in quanto spesso gli editor consentono di visualizzare direttamente il codice HTML
che sta dietro alla costruzione delle pagine Web e può quindi essere molto utile saper
modificare direttamente il codice sorgente.

I tag sono racchiusi tra parentesi angolari < > e controllano il modo in cui il documento viene
strutturato e visualizzato da un browser Web. In particolare:
· il tag <HTML> posto all’inizio del documento e il tag </HTML> posto alla fine indicano
al browser che l’intero documento è scritto in HTML;
· il titolo del documento viene indicato dal tag <TITLE> che marca l’inizio del titolo e dal
tag </TITLE> che marca la fine del titolo;
· i tag <HEAD> e </HEAD> definiscono l’intestazione del documento e servono come
contenitore per altri tag di intestazione, quali ad esempio <TITLE>;
· i tag <BODY> e </BODY> delimitano l’inizio e la fine del contenuto della pagina Web.
Fra questi tag è compreso tutto il testo che compare nella pagina Web, inclusi i vari
collegamenti.
È possibile riassumere alcune caratteristiche dei tag.
· I nomi dei tag sono generalmente un’abbreviazione della funzione stessa svolta dai tag e
possono essere scritti indifferentemente con lettere maiuscole o minuscole; ad esempio
<TITLE> e <title> rappresentano lo stesso tag; per una migliore leggibilità si scriveranno
i nomi dei tag in maiuscolo.
· Affinché i tag non siano ignorati occorre che i caratteri che compongono il nome siano
contigui e quindi occorre non inserire spazi nei tag o fra le parentesi angolari e il nome dei
tag. Ad esempio i seguenti tag < HEAD>, </ HEAD> verrebbero ignorati.
· Spesso esiste un tag di apertura ed un tag di chiusura aventi lo stesso nome. Nel tag di
chiusura il nome del marcatore è preceduto da “/” (esempio </TITLE>).
· Per visualizzare una pagina Web scritta in HTML si utilizza un browser, cioè un
programma che interpreta e visualizza pagine Web2. Quando il browser visualizza il
documento i tag non appaiono; invece il testo scritto fra il tag di apertura ed il tag di
chiusura seguirà le istruzioni del tag nella visualizzazione del documento con il browser.
Ad esempio se scriviamo:
 Corso di idoneità di informatica ,
il risultato sarà il testo “Corso di idoneità di informatica” scritto in grassetto.
Se scriviamo:
2 I due browser più diffusi sono Microsoft Internet Explorer e Netscape Navigator. Quest’ultimo prende il nome
di Communicator qualora sia integrato da programmi per la gestione della posta elettronica e newsgroup. Nelle
pagine che seguono si impiegherà per la visualizzazione delle pagine Web il browser Netscape Communicator.

<CENTER> Corso di idoneità di informatica </CENTER>,
il risultato sarà il testo “Corso di idoneità di informatica” scritto centrato nella riga.
· É anche possibile usare tag multipli (nidificati) con effetto su un singolo testo. Ad
esempio la scrittura
<CENTER> Corso di idoneità di informatica </CENTER>
avrà l‘effetto di visualizzare il testo “Corso di idoneità di informatica” in grassetto e in
centro alla riga. Quando si predispongono tag nidificati occorre chiudere prima il tag che
si è aperto per ultimo (nell’esempio si chiude prima e poi </CENTER>).
In una pagina scritta con linguaggio HTML è possibile inserire dei commenti, che non
saranno poi visualizzati. A questo fine basta scrivere il commento fra i marcatori <!- e ->. Ad
esempio <!- questa è una frase di commento ->
2. Costruzione di una pagina Web
Vogliamo utilizzare lo schema precedente per costruire e visualizzare una pagina Web molto
semplice dal titolo: “Nostra Pagina” ed il cui contenuto sia costituito solamente dal testo:
“Corso di idoneità di informatica” scritto in grassetto e centrato nella prima riga della pagina.
Vogliamo cioè ottenere la pagina Web di figura 1.
Per digitare il testo e i marcatori che descrivono il documento, si può usare un qualsiasi editor
di testi, in questo lavoro si userà Blocco note3. La costruzione della pagina avviene come
segue.
- Nel menu Start di Windows 98 scegliere Programmi, Accessori, Blocco note.
- Digitare quanto segue:
<HTML>
<HEAD>
<TITLE> Nostra Pagina </TITLE>
</HEAD>
<BODY>
<CENTER> Corso di idoneità di informatica </CENTER>
</BODY>
3 Qualora si usi un qualsiasi word processor per creare un documento HTML, occorre salvare il file in formato
“solo testo” e non usare il formato predisposto dal particolare word processor impiegato.
5
</HTML>
- Dal menu File del Blocco note scegliere Salva con nome e salvare, nel disco locale C, il
file con il nome: pagina.html.
- Avviare il browser Netscape. Dal menu File di Netscape scegliere Open Page. Si apre la
finestra di dialogo Open Page. Nello spazio previsto per la digitazione del file locale che
si desidera aprire, scrivere: C:\pagina.html. Verrà visualizzata la nostra pagina Web.
Figura 1 Visualizzazione col browser Netscape della pagina Web dal titolo “Nostra Pagina”
Si osservi che il testo “Nostra Pagina” compreso fra i tag <TITLE> e </TITLE> compare
nella barra del titolo della finestra di Netscape. La posizione del file HTML che stiamo
vedendo, C:\pagina.html appare nella casella Location di Netscape, fra la barra degli
strumenti e l’area di visualizzazione.
3. Inserimento di uno sfondo pagina e di un’immagine
Vogliamo adesso apportare delle modifiche alla nostra pagina Web, in particolare vogliamo:
- specificare un colore giallo per lo sfondo della pagina,
- inserire un’immagine, il logo di Ca’ Foscari, che disponiamo nel file C:\unive_logo.gi

- ingrandire il testo “Corso di idoneità informatica”,
- inserire una linea orizzontale sotto la scritta “Corso di idoneità informatica”,
- scrivere il testo “Descrizione del corso” in corsivo, sotto la linea orizzontale.
Si vuole ottenere una pagina Web come quella evidenziata in figura 2:
Figura 2 Visualizzazione col browser Netscape della pagina Web dal titolo “Nostra Pagina”, dopo
l’inserimento di un’immagine e la formattazione del testo
Si proceda come segue:
i) Si apportino le modifiche al file pagina.html usando l’editor di testo Blocco note. Il
documento HTML si presenta come segue:
<HTML>
<HEAD>
<TITLE> Nostra Pagina </TITLE>
</HEAD>
<BODY BGCOLOR="#FFFF99">
<IMG SRC="unive_logo.gif">
<CENTER> Corso di idoneità di informatica 
</CENTER>
7
<HR>
 Descrizione del corso 
</BODY>
</HTML>
Sono necessari alcuni chiarimenti.
· Spesso i tag consentono la presenza di uno o più attributi che servono ad estendere o
modificare le azioni del tag. Così al tag <BODY> si possono assegnare degli attributi.
Uno di questi è BGCOLOR, che specifica il colore dello sfondo della pagina. Gli attributi
vanno scritti entro le parentesi angolari a seguito del nome del tag. Spesso gli attributi
assumono un valore, incluso fra doppie virgolette, che segue il segno di uguale (=).
Nell’esempio, il tag <BODY>, comprensivo dell’attributo per la specificazione del colore
giallo dello sfondo, assume la seguente forma:
<BODY BGCOLOR="#FFFF99">
Qualora si disponga di un’immagine e si voglia usare questa immagine come sfondo
pagina, si usa un altro attributo associato al tag <BODY>. L’attributo è
BACKGROUND=URL, che ha la funzione di puntare alla posizione dell’immagine da
usare come sfondo. Ad esempio, se si dispone di un’immagine chiamata “sfondo.gif”, che
si trova nella stessa directory in cui si è salvata la pagina Web, si può inserirla come
sfondo pagina semplicemente scrivendo:
<BODY BACKGROUND ="sfondo.gif">
· Il tag <IMG> (Inline image) è usato per inserire in una pagina elementi grafici. La
maggior parte dei browser accetta immagini in formato “gif” e “jpeg”. <IMG> è un tag
individuale, nel senso che non possiede tag di chiusura. L’attributo SRC (source) specifica
il file in cui si trova l’immagine grafica. Nel nostro esempio il file unive_logo.gif si trova
nella stessa directory in cui si è salvata la pagina Web. La forma del tag <IMG>
comprensivo dell’attributo per la specificazione della fonte dell’immagine è il seguente:
<IMG SRC="unive_logo.gif">
É possibile anche specificare le dimensioni con le quali deve essere visualizzata
l’immagine. A questo fine si possono usare gli attributi HEIGHT = pixel, WIDTH = pixel.
Esempio:
<IMG SRC="unive_logo.gif" WIDTH="100" HEIGHT="100">

· I tag e impostano la dimensione e il tipo di carattere. L’attributo SIZE
specifica la dimensione del font ed è un numero compreso fra 1 e 7. Poiché la dimensione
normale è 3, per ingrandire il font occorre usare gli indici 4, 5, 6 o 7, mentre usando gli
indici 1 e 2 si ottiene un font ridotto rispetto al testo normale. Il tag ,
comprensivo dell’attributo per l’ingrandimento del testo è:
 Corso di idoneità di informatica 
Volendo ingrandire il testo, mantenendolo centrato e in grassetto, si possono usare i tre tag
<CENTER>, , nidificati.
· Il tag <HR> (Horizontal rule) aggiunge una linea orizzontale nella pagina. Non possiede
tag di chiusura.
· I tag e (Italic text) scrivono il testo in corsivo.
ii) Dopo aver inserito le modifiche al file pagina.html con l’editor di testo Blocco note, si
salvi il file (dal menu File di Blocco note scegliere il comando Salva).
iii) Se in Netscape è ancora visualizzata la pagina Web “Nostra Pagina”, si può usare il
pulsante Reload nella barra degli strumenti di Netscape, per aggiornare la visualizzazione.
Altrimenti nel menu File di Netscape si scelga Open Page e si apra il file pagina.html. Si
ottiene il risultato cercato.
4. Inserimento di un collegamento
Si vuole ora apportare un ulteriore miglioramento alla pagina Web appena creata, disponendo
un collegamento ad un documento contenente una sintetica descrizione del corso di
informatica. A questo fine l’obiettivo è la creazione di un nuovo documento HTML che
contiene una breve descrizione del corso e poi, in “Nostra Pagina”, l’inserimento di un
collegamento a tale documento.
i) Creazione di un nuovo documento HTML
Per creare un nuovo documento HTML contenente la descrizione del corso si proceda come
segue:
- Nel menu Start di Windows si scelga Programmi, Accessori, Blocco note.
- Si digiti quanto segue
9
<HTML>
<HEAD>
<BODY BGCOLOR="#FFFF99">
<TITLE> Descrizione del corso </TITLE>
</HEAD>
<BODY>
<CENTER>
 Descrizione del corso 
</CENTER>
Il corso si propone di fornire alcune nozioni informatiche elementari, con particolare
riferimento all’utilizzo di software per word-processing, fogli elettronici, calcolo
matematico e tecnologie di comunicazione via Internet. Si riportano qui di seguito
alcuni argomenti del corso:
<UL>
<LI> Nozioni informatiche di base
<LI> Uso di Microsoft Word
<LI> Uso di Microsoft Excel
<LI> Uso di Maple
</UL>
</BODY>
</HTML>
- Dal menu File di Blocco note si scelga Salva con nome e si salvi nel disco locale C il
file con il nome: descrizione.html.
- Per controllare la visualizzazione del documento appena creato, dal menu File di
Netscape si scelga Open Page e si apra il file C:\descrizione.html. Verrà visualizzata
la pagina Web di descrizione del corso, come in figura 3:

Figura 3 Visualizzazione col browser Netscape della pagina Web dal titolo “Descrizione del corso”
Si osservi che per definire il seguente elenco puntato:
· Nozioni informatiche di base
· Uso di Microsoft Word
· Uso di Microsoft Excel
· Uso di Maple
si sono impiegati i tag <UL> (unordered list) e <LI> (list item), inseriti con il seguente
codice:
<UL>
<LI> Nozioni informatiche di base
<LI> Uso di Microsoft Word
<LI> Uso di Microsoft Excel
<LI> Uso di Maple
</UL>
In particolare, il tag <UL>, insieme al suo tag di chiusura </UL> definisce una lista non
ordinata. Il tag <LI> serve per costruire gli elementi della lista. Se si volesse modificare lo
stile dell’elenco (ad esempio se si volesse usare il simbolo del quadrato anziché del cerchio
11
all’inizio di ogni elemento dell’elenco, si usa il tag <LI> comprensivo dell’attributo TYPE,
cioè:
<LI TYPE=SQUARE>
Se si volesse invece definire un elenco numerato, si dovrebbe usare il tag <OL> (ordered
list), unitamente al tag <LI>. Ad esempio se volessimo ottenere il seguente elenco:
1. Nozioni informatiche di base
2. Uso di Microsoft Word
3. Uso di Microsoft Excel
4. Uso di Maple
si dovrebbe scrivere il seguente codice HTML
<OL>
<LI> Nozioni informatiche di base
<LI> Uso di Microsoft Word
<LI> Uso di Microsoft Excel
<LI> Uso di Maple
</OL>
Usando l’attributo VALUE=numero associato al tag <LI> si può specificare il valore iniziale
dell’elenco.
ii) Inserimento di un collegamento
Per creare in “Nostra Pagina” un collegamento al documento creato al passo i), si proceda
come segue:
- Nel menu File di Blocco note si selezioni Apri e si scelga il file: pagina.html.
- Si modifichi il documento HTML nel seguente modo (le modifiche sono state evidenziate
in un riquadro):
<HTML>
<HEAD>
<TITLE> Nostra Pagina </TITLE>
</HEAD>
<BODY BGCOLOR="#FFFF99">
<IMG SRC="unive_logo.gif">

<CENTER> Corso di idoneità di informatica 
</CENTER>
<HR>
 <A HREF="descrizione.html"> Descrizione del corso </A> 
</BODY>
</HTML>
I tag <A> e </A> definiscono un ancoraggio e possono essere usati per costruire un
collegamento ad un altro documento HTML. L’attributo HREF è impiegato per definire il
documento a cui si punta.
- Nel menu File di Blocco note si selezioni Salva.
- Se in Netscape è visualizzata la pagina Web “Nostra Pagina”, si può usare il pulsante
Reload nella barra degli strumenti per aggiornare la pagina. Altrimenti nel menu File di
Netscape si scelga Open Page e si apra il file C:\pagina.html. Si ottiene come risultato la
pagina Web rappresentata in figura 4.
Si osservi che ora il testo “Descrizione del corso” risulta sottolineato, indicando la presenza di
un collegamento; i metodi usati per rappresentare i collegamenti variano comunque da
browser a browser. Passando il puntatore del mouse sul testo “Descrizione del corso” si
osservi che il puntatore cambia aspetto (trasformandosi in una manina); facendo clic su di
esso con il tasto sinistro del mouse si richiama la pagina Web che ci dà informazioni sul
contenuto del corso.
È possibile anche far sì che un’immagine predisponga un collegamento. Ad esempio potrebbe
essere utile fare clic sul logo di Ca’ Foscari e collegarsi alla pagina principale dell’Università
di Venezia. Il seguente codice HTML può essere impiegato a tale scopo:
<A HREF="http://www.unive.it"><IMG SRC="unive_logo.gif"></A>
Si osservi che questo è un collegamento assoluto, in quanto, richiamando una risorsa esterna,
si punta direttamente alla risorsa a cui ci si voglia collegare.
Invece, il collegamento
<A HREF="descrizione.html"> Descrizione del corso </A>
è un collegamento relativo in quanto fa riferimento ad un file che si trova nella stessa
directory del file corrente che contiene la pagina Web che richiama il riferimento.
13
Figura 4 Visualizzazione col browser Netscape della pagina Web dal titolo “Nostra Pagina”, dopo
l’inserimento di un collegamento
5. Riepilogo
Per riassumere, il processo di creazione di una pagina Web avviene secondo le seguenti fasi.
1. Digitazione del testo che si vuole comunicare e di alcuni marcatori che descrivono il
documento. A questo fine si può usare un qualsiasi editor di testi (ad esempio Blocco
note).
2. Salvataggio del file con estensione “html” o “htm”. I file con estensione “html” possono
essere utilizzati sui server Web che utilizzano un sistema operativo che gestisce nomi di
file estesi, in caso contrario occorre usare l’estensione “htm”.
3. Apertuta di un browser Web (ad esempio Netscape) per vedere il risultato. A questo fine
dal menu File di Netscape si sceglie Open Page e si seleziona il nome del file “html” o
“htm” precedentemente salvato.
4. Se non vi sono modifiche da fare, si passa alla fase 5, altrimenti si modifica il file con
l’editor di testo, si salva il file e si usa il pulsante Reload nella barra degli strumenti di
Netscape per aggiornare la visualizzazione.

5. Fase di pubblicazione della pagina Web. Le pagine Web sono memorizzate su un server
Web, messo a disposizione dai fornitori di accesso a Internet. Si chiama pubblicazione
delle pagine Web la copia dei file “html” e “htm” e dei file di grafica, dal disco locale ad
una directory accessibile dal Web sul computer del fornitore di accesso ad Internet. I file
si trasferiscono tramite l’impiego di FTP (File Transfer Protocol), protocollo per la
trasmissione di file in Internet. Le pagine Web possono essere visualizzate dagli utenti di
Internet solamente dopo la loro fase di pubblicazione.
Si noti, infine, che occorre strutturare il sito Web che si vuole costruire in modo che siano
evitati errori di caricamento da parte del browser degli utenti; a questo scopo occorre
attribuire alla pagina principale del sito un nome che coincide con il nome del documento
principale predefinito dal server Web. Fra i nomi più comuni troviamo index.html e
default.html. Per sapere quale è il nome corretto da usare conviene chiedere al proprio
fornitore d’accesso a Internet.
6. Creazione di pagine Web tramite l’uso di un editor HTML
Si vuole mostrare in questo paragrafo come costruire un documento ipertestuale simile a
quello di figura 4, senza scrivere direttamente in linguaggio HTML ma usando l’editor
Composer di Netscape Communicator.
Una volta creato il documento sarà comunque possibile vedere il suo codice in HTML tramite
il menu View di Netscape, selezionando la voce Page Source.
Per prima cosa si avvii Netscape. La finestra principale presenta gli elementi tipici
dell’interfaccia utente; oltre alla barra del titolo in cui è visualizzato il titolo del documento, si
trovano la barra dei menu, la barra dei pulsanti che contiene alcuni comandi fondamentali per
la navigazione (Back, Forward, Reload, Home, Search,…), la barra che mostra l’indirizzo del
documento visualizzato ed una barra dei siti Web di uso frequente.
Per creare un nuovo documento ipertestuale occorre aprire una pagina bianca su cui si andrà a
scrivere. A questo fine, dal menu File di Netscape si scelga New e poi si selezioni Blank
Page. Viene aperta una nuova pagina in Netscape Composer, ottenendo la finestra del
browser come evidenziata in figura 5:
15
Figura 5 Netscape Composer. Uso di un editor HTML per la costruzione di pagine Web
Si osservi che ora le barre degli strumenti contengono i pulsanti con i quali si attivano in
modo veloce alcune funzioni tipiche dei programmi di videoscrittura (copia, incolla, grassetto,
corsivo, sottolineato,…).
Per ottenere una pagina Web simile a quella di figura 4 si proceda come segue.
- (Inserimento del logo di Ca’ Foscari). Per inserire un’immagine con formato “gif” o
“jpeg” ci si posizioni nel posto della pagina in cui si desideri inserire l’immagine. Dal
menu Insert si scelga Image. Si apre la finestra di dialogo Image Properties che consente
di specificare il file che contiene l’immagine e di confermare o meno le sue impostazioni.
Si prema il pulsante Choose File e si scelga il file unive_logo.gif all’interno dell’area in
cui è stato memorizzato.
- (Inserimento e formattazione del testo). Si digiti il testo: Corso di idoneità di informatica
e, andando a capo, si digiti il testo: Descrizione del corso.
Per formattarlo, si evidenzi il testo “Corso di idoneità di informatica”. Dal menu Format
si selezioni Size e si scelga 14, quale dimensione da assegnare ai caratteri. Sempre dal
menu Format si selezioni Style e si scelga Bold, allo scopo di scrivere il testo in grassetto.
Per centrare il testo, dal menu Format si selezioni Align e si scelga Center. In alternativa,
è possibile impostare la dimensione del carattere, lo stile e l’allineamento, direttamente
nella finestra di dialogo Character Properties del menu Format.

Si evidenzi ora il testo “Descrizione del corso”. Dal menu Format si selezioni Style e si
scelga Italic.
- (Inserimento di una linea orizzontale). Per inserire una linea orizzontale, si posizioni il
cursore nella posizione in cui si vuole inserire la linea. Dal menu Insert si scelga
Horizontal Line. Per specificare l’altezza, l’ampiezza e l’allineamento della riga si faccia
doppio clic sulla stessa. Compare la finestra di dialogo Horizontal Line Properties che
permette di modificare le impostazioni della linea.
- (Creazione di un collegamento). Per disporre un collegamento al documento:
descrizione.html, in precedenza creato, si selezioni il testo “Descrizione del corso”. Dal
menu Insert si scelga Link; si apre la finestra di dialogo Character Properties. Nella
scheda Link si prema il pulsante Choose File e si scelga il file descrizione.html all’interno
dell’area in cui è stato memorizzato.
- Per salvare il documento, dal menu File si selezioni Salva con nome e si dia un nome alla
pagina, ad esempio “NostraPagina2”.
- Se dal menu View si seleziona Page Source, sarà possibile vedere il codice HTML
sottostante il documento appena creato.
- Per chiudere il documento, si selezioni Close dal menu File, mentre se si volesse aprire
nuovamente con il browser il documento appena creato, eventualmente per apportare
qualche modifica alla pagina, occorre selezionare Open Page dal menu File e premere
Choose File per scegliere il file NostraPagina2.
- Per modificare la pagina è possibile trasferirla automaticamente all’editor Composer,
scegliendo la voce Edit Page dal menu File. A questo punto è possibile apportare dei
miglioramenti alla pagina appena creata, ad esempio è possibile inserire uno sfondo
pagina.
- (Inserimento di uno sfondo pagina). Se si dispone di un file sfondo.gif che contiene uno
sfondo colorato, è possibile usare tale immagine come sfondo pagina. A questo scopo, dal
menu Format si selezioni la voce Page Color and Properties. Si apre la finestra di dialogo
Page Properties. Nella scheda Background Image, premere Choose File e selezionare il
file sfondo.gif all’interno dell’area in cui è stato memorizzato.
- Si esca dall’editor Composer selezionando Close dal menu File e si aggiorni la
visualizzazione del browser premendo il pulsante Reload.
17
APPENDICE: ALCUNI TAG
<A>…</A> (anchor)
Forniscono un collegamento.
Alcuni attributi:
HREF=”URL”
L’attributo HREF serve per definire la destinazione del collegamento. URL è l’acronimo di Uniform
Resource Locator e indica la posizione di qualsiasi tipo di risorsa Internet.
NAME=”testo”
Questo attributo contrassegna la destinazione di un collegamento ipertestuale in un documento. Può
essere usato per creare in una pagina un sommario, con i relativi collegamenti.
<ABBR>…</ABBR> (abbreviation)
Il testo delimitato da questi tag viene identificato come abbreviazione.
Alcuni attributi:
TITLE=”testo”
Fornisce l’espressione estesa dell’abbreviazione.
Esempio: <ABBR TITLE=”Massachussets”>Mass.</ABBR>.
<ACRONYM>…</ACRONYM>
Il testo delimitato da questi tag viene identificato come un acronimo.
Alcuni attributi:
TITLE=”testo”
Fornisce l’espressione estesa dell’acronimo.
Esempio: <ACRONYM TITLE=”World Wide Web”>WWW</ACRONYM>.
<ADDRESS>…</ADDRESS> (address)
Contengono la formattazione per il testo che elenca le informazioni sull’autore del documento HTML.
Generalmente le informazioni sull’autore (nome, cognome, indirizzo) vengono scritte in corsivo.
… (bold text)
Il testo delimitato da questi tag viene visualizzato in grassetto.
18

<BODY>…</BODY> (document body)
Identificano il corpo del documento, racchiudendone il contenuto.
Alcuni attributi:
BACKGROUND=”URL”
Tale attributo permette di puntare ad un’immagine che viene usata come sfondo del documento.
BGCOLOR=”#RRGGBB”
Tale attributo imposta il colore per lo sfondo della pagina.
 (break)
Definisce un’interruzione di riga, quindi interrompe un testo e inizia una nuova linea.
Alcuni attributi:
CLEAR=(LEFT|ALL|RIGHT)
Tale attributo, se è uguale a LEFT inserisce spazio che allinea il testo che segue al margine sinistro
direttamente sotto un’immagine flottante allineata a sinistra; se è uguale ad ALL pone il testo che
segue dopo tutte le immagini flottanti; se è uguale a RIGHT inserisce spazio che allinea il testo che
segue al margine destro direttamente sotto un’immagine flottante allineata a destra.
<BIG>…</BIG> (big text)
Il testo delimitato da questi tag viene ingrandito di una unità rispetto all’impostazione. É equivalente a
.
<BLINK>…</BLINK>
Il testo delimitato da questi tag appare e scompare.
<BLOCKQUOTE>…</BLOCKQUOTE> (quote style)
Delimitano una citazione che viene generalmente visualizzata con un rientro del paragrafo e con spazi
al di sopra e al di sotto del paragrafo.
<CENTER>…</CENTER> (centered text)
Il testo delimitato da questi tag viene centrato orizzontalmente nella pagina, allo stesso modo di <DIV
ALIGN=CENTER>.
<DIV>…</DIV> (logical division)
Indicano le divisioni di un documento, cioè delimitano l’inizio e la fine della divisione della pagina.
Alcuni attributi:
19
ALIGN=CENTER|LEFT|RIGHT
Specifica l’allineamento del testo (centrato, a sinistra, a destra).
… (emphasis)
Pone tipograficamente in rilievo, solitamente utilizzando il corsivo, il testo che delimita.
… (font)
Impostano la dimensione, il tipo di carattere, ed il colore del testo che delimitano.
Alcuni attributi:
COLOR=”(#rrggbb|nomecolore)”
Imposta il colore del font
FACE=”typeface” (or list of typefaces)
Imposta il tipo di carattere. É possibile specificare un elenco di nomi di font
SIZE=”value”
Imposta la dimensione del carattere. Value è un numero compreso fra 1 e 7 (dove 7 corrisponde alla
dimensione maggiore). Un segno più o meno prima del numero indica che la dimensione è relativa
all’impostazione corrente del font.
<HEAD>…</HEAD> (document head block)
Il tag <HEAD> è posto all’inizio del documento e serve per dare informazioni sul documento HTML,
incluso il titolo del documento. Infatti il tag <TITLE> è usato all’interno dei tag <HEAD> e
</HEAD>.
<Hn>…</Hn> (heading level)
Indicano che il testo da essi delimitato è un’intestazione. Esistono sei diversi livelli di intestazione, da
<H1> a <H6>, la dimensione del testo diminuisce mano a mano che sale il livello, così un’intestazione
di livello 2 è più piccola di un’intestazione di livello 1.
Alcuni attributi:
ALIGN=CENTER|LEFT|RIGHT
Specifica l’allineamento del testo dell’intestazione (centrato, a sinistra, a destra)
<HR> (horizontal rule)
Disegna una riga orizzontale.
Alcuni attributi:
ALIGN=LEFT|CENTER|RIGHT

Tale attributo consente di tracciare la riga allineata a sinistra, al centro oppure a destra.
SIZE=numero
Tale attributo consente di impostare l’altezza (in pixel) della riga
WIDTH=numero|”%”
Tale attributo consente di impostare la lunghezza (in pixel o come percentuale della larghezza della
finestra) della riga. Nel caso si specifichi una percentuale il numero deve terminare con il carattere %.
<HTML>…</HTML> (HTML document)
Delimitano l’intero documento HTML. Non possono essere usati all’interno di altri tag e
rappresentano il livello più alto della struttura del documento.
… (italic text)
Il testo delimitato da questi tag viene visualizzato in corsivo.
<IMG> (inline image)
Tale tag è usato per inserire un’immagine nel documento.
Alcuni attributi:
ALT=”testo”
Tale attributo permette di visualizzare una stringa di testo alternativa all’immagine qualora il browser
non sia in grado di visualizzare l’immagine.
ALIGN=LEFT|RIGHT|TOP|MIDDLE|BOTTOM
Tale attributo imposta l’immagine e l’allineamento del testo. Se si usa LEFT l’immagine viene
allineata a sinistra ed il testo scorre attorno ad essa. Se si usa RIGHT l’immagine viene allineata a
destra e il testo scorre attorno ad essa. Se si usa TOP l’estremità superiore del testo che circonda
l’immagine è allineato con l’estremità superiore dell’immagine. Se si usa MIDDLE la linea base del
testo che circonda l’immagine è allineata con la parte centrale dell’immagine. Se si usa BOTTOM la
linea base del testo che circonda l’immagine è allineata con l’estremità inferiore dell’immagine.
HEIGHT=pixel; WEIGHT=pixel
Tali attributi specificano le dimensioni con le quali si desidera visualizzare l’immagine.
SRC=”URL”
Tale attributo è indispensabile e specifica la posizione del file che contiene l’immagine.
<LI> (list item)
Definisce un elemento di una lista. Si usa all’interno dei tag di lista <OL> e <UL>.
21
Quando si usa un elenco numerato <OL>, l’elemento <LI> verrà visualizzato con un numero. Si può
modificare l’aspetto con l’attributo TYPE. Quando si usa un elenco puntato <UL> si può controllare il
tipo di simbolo usando sempre l’attributo TYPE.
Alcuni attributi:
TYPE=formato
Gestisce il formato dei numeri o dei simboli usati nell’elenco.
Se viene usato in una lista non ordinata (<UL>) l’attributo viene usato per specificare lo stile:
TYPE=(DISC|SQUARE|CIRCLE)
Si hanno i seguenti tipi di forma:
DISC usa un pallino tondo e pieno
SQUARE usa un pallino quadrato e pieno
CIRCLE usa un pallino tondo e vuoto
Se viene usato in una lista ordinata (<OL>) l’attributo viene usato per specificare lo stile numerico:
TYPE=(1|a|A|i|I)
1: numerazione con numeri arabi
a: numerazione mediante lettere minuscole
A: numerazione mediante lettere maiuscole
i: numerazione mediante lettere romane minuscole
I: numerazione mediante lettere romane maiuscole
VALUE=numero
L’attributo VALUE del tag <LI> permette di specificare il valore iniziale dell’elenco, nel caso di una
lista ordinata.
<OL>…</OL> (ordered list)
Formano un elenco numerato. Gli elementi dell’elenco sono numerati nell’ordine in cui appaiono.
Alcuni attributi:
TYPE=(1|a|A|i|I)
Gestisce lo stile numerico della lista.
START=”valore”
Indica il numero di numerazione iniziale.
… (paragraph)
Denotano l’inizio e la fine di un paragrafo. In corrispondenza di questi tag si verifica un’interruzione
di riga.

Alcuni attributi:
ALIGN=CENTER|LEFT|RIGHT
Specifica l’allineamento del testo del paragrafo (centrato, a sinistra, a destra).
… (small text)
Il testo delimitato da questi tag viene rimpicciolito rispetto all’impostazione. É equivalente a .
<STRIKE>…</STRIKE> (strikethrough)
Il testo delimitato da questi tag viene visualizzato in stile barrato.
… (strong emphasis)
Attribuisce enfasi marcata (solitamente in grassetto) a parole o frasi da essi delimitate.
… (subscript)
Il testo delimitato da questi tag viene visualizzato in pedice.
… (superscript)
Il testo delimitato da questi tag viene visualizzato in apice
<TITLE>…</TITLE> (document title)
Delimitano il titolo del documento; il titolo del documento appare nella barra del titolo della finestra
del browser impiegato per la visualizzazione del documento. Qualora non si specifichi il titolo, il
browser usa un titolo predefinito che è solitamente il nome del file html oppure il nome stesso del
browser.
… (underlined text)
Il testo delimitato da questi tag viene visualizzato sottolineato.
<UL>…</UL> (unordered list)
Formano un elenco puntato.
Alcuni attributi:
TYPE=(DISC|SQUARE|CIRCLE)
Gestisce la forma dell’elenco puntato: DISC disegna un pallino pieno, SQUARE disegna un
quadratino pieno e CIRCLE disegna un pallino vuoto.

Motore Di Rricerca Gay | Livello 1 | Livello 2 | Mappa del sito

nicola@mondogayclub.com