Il sito per imparare gratuitamente a fare pagine Web

Guida HTML

Questa guida è stampabile in modo agevole dalla versione off-line scaricabile dal menù laterale: Download.zip
 


Elementi della Struttura


Elementi o Tags:
Attributi:

Andrea Bianchi © www.web-link.it  Guida HTML 4.01 - Ver. 7.0.1  

Elementi o Tags di Html
Questi sotto una serie di elementi che si usano per definire la struttura della pagina web.

 

<!DOCTYPE...>

L'elemento !DOCTYPE è la prima delle dichiarazioni che una pagina web può contenere. Affinché un documento sia identificato come HTML esso deve iniziare con il suo identificatore di prologo: <!DOCTYPE... Questo è il solo tag che deve essere scritto in maiuscolo. Questo tag non necessita del relativo tag di chiusura ma prevede, nel caso del nostro esempio: HTML 4.01, tre tipi di DTD (dichiarazioni) che sono rispettivamente:


Strict, la più rigida che prevede l'abolizione dei tag deprecati a favore dei CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


Transitional, maggiormente tollerante è quella più largamente usata, anche questa guida fa uso di transitional.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


Frameset, nel caso in cui il sito sia strutturato a frames

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Questo tipo di riga è chiamata prologo ed è solitamente generata in modo automatico dall'editor che adoperate per la stesura del codice html, visuale o testuale che sia. Non era obbligatoria nelle prime versioni di html ma lo è diventata nella sua evoluzione, specialmente se vogliamo un documento validato da parte del W3C. Ha il compito di informare il browser che si tratta di un documento html relativo a quelle determinate specifiche, in mancanza di questa dichiarazione il documento sarà identificato come rispondente alla specifica HTML 2.0 che oserei definire obsoleta.

HTML5 ha ridotto ed unificato questo prologo ad una sola ed unica riga, questa:

<!DOCTYPE html>


Torna su
 

<html>...</html>

L'elemento <html> identifica un documento che contiene elementi HTML, esso dovrebbe essere inserito subito dopo l'identificatore di prologo DOCTYPE e racchiudere tutto il restante codice html. Questo tag necessita del relativo tag di chiusura: </html>

<!DOCTYPE ...>
<html>
  la parte restante del documento
</html>
 

lang L'attributo lang usato con l'elemento <html> non è obbligatorio, se adoperato specifica il linguaggio usato all'interno del documento, nel nostro caso it indica italiano.

<!DOCTYPE ...>
<html lang="it">
  la parte restante del documento
</html>


Torna su
 

<head>...</head>

L'elemento <head> viene utilizzato per ospitare i tags che forniscono informazioni sul documento, in questa sezione trovano posto tutti quei tags che impartiscono direttive ai browser quali: titolo, Meta comandi, richiami ai fogli di stile, script Questo tag necessita del relativo tag di chiusura: </head>.

Notare che tutto ciò che si trova all'interno della struttura head non apparirà nella pagina ma sarà letto ed interpretato dal browser, quindi una zona destinata ad uso esclusivo dei soli comandi che impartiscono comandi e direttive ben specifiche.

<!DOCTYPE HTML...>
<html>
<head>

elementi quali: <base> <link> <meta> <style> <title> <script>

</head>
la parte restante del documento
</html>

All'interno di head trovano posto una serie di altri tags:
<base> <link> <meta> <style> <title> <script>



Torna su
 

<base>

L'elemento <base> consente di specificare facendo uso di target la destinazione base per tutti i links presenti in quella pagina, ha un senso qualora questa fosse strutturata a frames, ovvero suddivisa in più finestre. Questo tag non necessita del relativo tag di chiusura.

<base target="nome_del_frame">

Dove nome del frame sarà il nome esatto che voi avrete deciso di assegnare al frame.



Torna su
 

<link>

L'elemento <link ha diverse funzioni ma la più adoperata è il richiamo di fogli di style esterni. Questo tag non necessita del relativo tag di chiusura.

<link rel="stylesheet" href="weblink.css" type="text/css">


Torna su
 

<meta>

L'elemento <meta> abbreviazione di metacomando racchiude informazioni per i server on line. Sono davvero molti i MetaComandi che si possono inserire ed ognuno ha una funzione diversa. Questo tag non necessita del relativo tag di chiusura.

<meta name="author" content="web-link">

Su questo link potete trovarne un elenco completo.



Torna su
 

<style>...</style>

L'elemento <style> serve per definire una dichiarazione di stile interna relativa alla sola pagina che contiene la dichiarazione stessa. Questo tag necessita del relativo tag di chiusura </style>.

<style type="text/css"> dichiarazioni </style>


Torna su
 

<title>...</title>

L'elemento <title> serve per assegnare un titolo alla pagina. Si raccomanda un titolo significativo dal momento che i motori di ricerca ne faranno uso mostrandolo come risultato. Questo tag necessita del relativo tag di chiusura </title>

<title>Web-Link - Tutto per la costruzione delle tue pagine web </title>


Torna su
 

<script>...</script>

L'elemento <script> serve per inserire codice di programmazione grazie al quale ottenere effetti grafici, controlli sui moduli e molto altro. Di solito si adopera JavaScript (linguaggio di programmazione lato client). Questo tag necessita del relativo tag di chiusura </script> e può essere inserito sia all'interno di <head> che di <body> dipende soltanto da quello che deve fare e dalle specifiche di chi ha programmato lo script.

<script type="text/javascript"> ... </script>


Torna su
 

<body>...</body>

L'elemento <body> (corpo) demarca la pagina vera e propria, praticamente tutto quello che si vedrà a video: testi, immagini e tutto quello che serve per il controllo e la formattazione della pagina stessa. I possibili attributi sono: background, bgcolor, link, vlink, alink e text. Ve ne sono anche altri ma di esclusiva interpretazione di singoli browser e sono: bgproperties, topmargin, bottommargin, leftmargin e rightmargin. Per tutti quanti vi sconsiglio di adoperarli direttamente nel tag body a favore di una semplice e più versatile dichiarazione di style. Questo tag necessita del relativo tag di chiusura </body>

<body>

Molti gli attributi associabili a questo tag:background,bgcolor,link, vlink, alink, text

Evidenziati in giallo gli attributi proprietari di singoli browser dei quali se ne sconsiglia l'utilizzo:
bgproperties, topmargin, bottommargin, leftmargin, rightmargin.

</body

Si inseriscono lasciando uno spazio vuoto fra la scritta body e la sua chiusura  >  Gli attributi possono essere più di uno e specificati uno di seguito all'altro.

Un esempio di dichiarazione dell'intero body con attributi ad esso associabili.

<body background="sfondo.gif" text="#0000ff" marginwidth="2">

Deprecato. Lo stesso esempio con una dichiarazione di style.

<style type="text/css">

body {
background-image: url("sfondo.gif");
color: #0000ff;
margin: 2px;
}

</style>


Torna su
 

background

L'attributo background permette di adoperare un'immagine grafica come sfondo della pagina. Questa immagine dovrà essere di tipo .gif .jpg o .png. Indipendentemente dalle dimensioni verrà usata a riempimento di tutta la finestra del browser a prescindere dalla dimensione e risoluzione del video.

<body background="nome_immagine.gif">

E' possibile richiamare l'immagine anche da altro sito, specificandone l'indirizzo completo (URL)

<body background="http://www.nome_sito.it/nome_immagine.gif">

Entrambi deprecati a favore di una dichiarazione di style in linea, nella pagina o su foglio esterno:

<style type="text/css">

body { background-image: url("nome_immagine.gif"); }

</style>


Torna su
 

bgproperties

L'attributo bgproperties fissa l'immagine (fixed) adoperata come sfondo, in pratica questa resta ferma durante lo spostamento verticale (scrolling) della pagina, dando l'impressione di far scivolare sullo sfondo le immagini ed i testi. Attributo proprietario di alcuni browser non riconosciuto dal W3C.

<body background="nome_immagine.gif" bgproperties="fixed">

Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno:

<style type="text/css">

body { background-attachment: fixed; }

</style>


Torna su
 

bgcolor

L'attributo bgcolor si adopera per colorare lo sfondo della pagina con una tinta unita, il colore può essere espresso col nome inglese o con il codice esadecimale corrispondente. A questo proposito su questa pagina è possibile vedere 140 colori di base con relativo nome e codice esadecimale.

<body bgcolor="green">

oppure

<body bgcolor="#006600">

Deprecati, meglio usare una dichiarazione di style, in linea o su foglio esterno:

<style type="text/css">

body { background-color: #006600;}

</style>

La notazione esadecimale # è da preferirsi, in quanto permette con estrema semplicità di poter scegliere fra una tavolozza di ben 16 Mil. di colori.



Torna su
 

link

L'attributo link si adopera per assegnare il colore dei links facenti parte della pagina, può essere espresso sia col nome inglese che col relativo codice esadecimale. A questo proposito su questa pagina è possibile vedere 140 colori di base con relativo nome e codice esadecimale.

<body link="green">

oppure

<body link="#006600">

Deprecati, meglio usare una dichiarazione di style, in linea o su foglio esterno:

<style type="text/css">

a:link { color: #006600; }

</style>

La notazione esadecimale è da preferirsi, in quanto permette con estrema semplicità di poter scegliere fra una tavolozza di ben 16 Mil. di colori. Per default questo colore è blu (blue) #0000ff



Torna su
 

vlink

L'attributo vlink si adopera per assegnare il colore dei links già visitati all'interno della stessa pagina, può essere espresso sia col nome inglese che col relativo codice esadecimale. A questo proposito su questa pagina è possibile vedere 140 colori di base con relativo nome e codice esadecimale.

<body vlink="red">

oppure

<body vlink="#ff0000">

Deprecati, meglio usare una dichiarazione di style, in linea o su foglio esterno:

<style type="text/css">

a:visited { color: #ff0000; }

</style>

La notazione esadecimale è da preferirsi, in quanto permette con estrema semplicità di poter scegliere fra una tavolozza di ben 16 Mil. di colori. Per default questo colore è porpora (purple) #800080



Torna su
 

alink

L'attributo alink si adopera per assegnare il colore dei links attivi, colore che cambia nel momento del click su di esso, può essere espresso sia col nome inglese che col relativo codice esadecimale. A questo proposito su questa pagina è possibile vedere 140 colori di base con relativo nome e codice esadecimale.

<body alink="green">

oppure

<body alink="#006600">

Deprecati, meglio usare una dichiarazione di style, in linea o su foglio esterno:

<style type="text/css">

a:active { color: #006600; }

</style>

La notazione esadecimale è da preferirsi, in quanto permette con estrema semplicità di poter scegliere fra una tavolozza di ben 16 Mil. di colori. Per default questo colore è rosso (red) #ff0000



Torna su
 

text

L'attributo text si adopera per assegnare il colore del testo nella pagina, può essere espresso sia col nome inglese che col relativo codice esadecimale. A questo proposito su questa pagina è possibile vedere 140 colori di base con relativo nome e codice esadecimale.

<body text="green">

oppure

<body text="#006600">

Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno:

<style type="text/css">

body { color: #006600; }

</style>

La notazione esadecimale è da preferirsi, in quanto permette con estrema semplicità di poter scegliere fra una tavolozza di ben 16 Mil. di colori. Per default questo colore è rosso (red) #ff0000



Torna su
    

xxxmargin

Gli attributi: topmargin, bottommargin, leftmargin, rightmargin servono per definire la distanza in pixel dei contenuti rispetto ai margini della pagina e si riferiscono rispettivamente dal: margine superiore, margine inferiore, margine sinistro e margine destro. Un margine uguale a zero farà si che il testo inizi praticamente sul bordo della finestra del browser.
Attributo proprietario di alcuni browser non riconosciuto dal W3C.

<body topmargin="30" bottommargin="25" leftmargin="15" rightmargin="15">

Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno:

<style type="text/css">

body { margin: 30px 15px 25px 15px;}

</style>

Oppure dovendone modificare uno solo:

<style type="text/css">

body { margin-top: 30px;}

</style>


Torna su

ESEMPIO

Riassumendo, questa sotto potrebbe essere una definizione tipo del corpo (body), di una pagina che abbia uno sfondo come riempimento che resti fisso durante le operazioni di spostamento (scrolling), con un testo di colore nero, i links di colore rosso, i links visitati di colore verde, il tutto con una distanza dai quattro margini di 50 pixel.

<body background="nome_immagine.gif" bgproperties="fixed" text="black" link="red" vlink="green" topmargin="50" bottommargin="50" leftmargin="50" rightmargin="50">

Deprecato!, meglio usare una dichiarazione di style, in linea o su foglio esterno:

<style type="text/css">

body {
background-image: url("nome_immagine.gif");
background-attachment: fixed;
color: black;
margin: 50px;
}

a:link { color: red; }
a:visited { color: green;}

</style>


Torna su

Se avete domande potete scrivere sul forum di supporto, gratuito e aperto a tutti.

forum


Andrea Bianchi