Elementi della Struttura
<!DOCTYPE...>
Affinché un documento sia identificato come HTML esso deve iniziare con il suo identificatore di prologo: <!DOCTYPE...
HTML 4.01 prevede tre tipi di DTD e 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, è solitamente generata in modo automatico dall'editor che adoperate per la stesura del codice html, visuale o testuale che sia. Non è obbligatoria anche se molto consigliata, specialmente in caso di validazione del documento 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
<html>...</html>
L'elemento <html> identifica un documento che contiene elementi HTML, esso dovrebbe seguire l'identificatore di prologo e circondare tutto il testo restante, inclusi tutti gli altri elementi o tags.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
la parte restante del documento
</html>
|
<head>...</head>
L'elemento <head> viene utilizzato per fornire 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.
Notare che tutto ciò che si trova all'interno della struttura head non sarà visualizzato, ma interpretato dal browser, quindi una zona destinata ad uso esclusivo dei soli comandi che impartiscono direttive ben specifiche.
<base>
Consente di specificare la destinazione per tutti i link della pagina, qualora questa fosse strutturata in frames:
|
<base target="nome_del_frame_sul_quale_aprire_i_links">
|
<link>
Ha diverse funzioni ma la più adoperata è il richiamo a fogli di style esterni:
|
<link rel="stylesheet href="weblink.css" type="text/css">
|
<meta>
Sono davvero molti i Meta Comandi che si possono inserire:
<style>...</style>
Dichiarazione di uno stile interno alla pagina che contiene la dichiarazione:
|
<style type="text/css"...">
|
<title>...</title>
Il titolo da assegnare alla pagina.
|
<title>Web-Link - Tutto per la costruzione delle tue pagine web </title>
|
<script>...</script>
Inserimento di funzioni, effetti, controlli e molto altro sotto forma di script (linguaggio di programmazione lato client):
|
<script type="text/javascript">......</script>
|
<body>...</body>
L'elemento <body> contiene la pagina vera e propria, quello che si vedrà a video: testo, immagini e tutti gli elementi che forniscono il controllo e la formattazione della pagina stessa. I possibili attributi sono: background, bgcolor, link, vlink, alink, text.
Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno:
body{
background-image: url("sfondo.gif");
background-attachment: fixed;
background-color: #ff00ff;
color: #000066;
margin-left: 2px;
}
|
background
Permette di adoperare un'immagine come sfondo della pagina, immagine che dovrà essere di tipo .gif .jpg o .png. Indipendentemente dalle dimensioni verrà usata a riempimento di tutta la finestra del browser, qualunque sia la sua 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.weblink.altervista.org/nome_immagine.gif">
|
Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno:
body{
background-image: url("nome_immagine.gif");
}
|
bgproperties
L'immagine adoperata a riempimento può essere tenuta ferma durante lo spostamento verticale (scrolling) sulla pagina, dando l'impressione di scivolare con le immagini e i testi sullo sfondo.
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:
body{
background-attachment: fixed;
}
|
bgcolor
Si adopera questo attributo per colorare lo sfondo della pagina di una tinta unita, il colore può essere espresso sia col nome inglese che nel relativo codice esadecimale. 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">
|
La notazione esadecimale è da preferirsi, in quanto permette con estrema semplicità di poter scegliere fra una tavolozza di ben 16 Mil. di colori.
Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno:
body{
background-color: #006600;
}
|
link
Si adopera questo attributo per decidere il colore di tutti i 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.
|
<body link="green">
|
oppure |
|
<body link="#006600">
|
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
Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno:
a:link{
color: #006600;
}
|
vlink
Si adopera questo attributo per decidere il colore di tutti i links, dopo che questi sono stati visitati, può essere espresso sia col nome inglese che col relativo codice esadecimale. A questo proposito su questa pagina è possibile vedere 140 colori di base.
|
<body vlink="green">
|
oppure |
|
<body vlink="#006600">
|
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
Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno:
a:visited{
color: #800080;
}
|
alink
Si adopera questo attributo per decidere il colore di tutti i links attivi, colore che cambierà 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.
|
<body alink="green">
|
oppure |
|
<body alink="#006600">
|
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
Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno:
a:active{
color: #800080;
}
|
text
Si adopera questo attributo per decidere il colore di tutto il 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.
|
<body text="green">
|
oppure |
|
<body text="#006600">
|
La notazione esadecimale è da preferirsi, in quanto permette con estrema semplicità di poter scegliere fra una tavolozza di ben 16 Mil. di colori. Fate attenzione a non assegnare colori assomiglianti allo sfondo, scelta che renderebbe il testo quasi invisibile.
Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno:
body{
color: #006600;
}
|
MARGINI
topmargin, bottommargin, leftmargin, rightmargin sono i quattro attributi per definire la distanza in pixel rispettivamente da: 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">
|
|
<body bottommargin="30">
|
|
<body leftmargin="30">
|
|
<body rightmargin="30">
|
Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno:
body {
margin-bottom: 30px;
margin-top: 30px;
margin-left: 30px;
margin-right: 30px;
}
|
ESEMPIO
Riassumendo, questa potrebbe essere una definizione del corpo (body), di una pagina che abbia uno sfondo come riempimento, e questo 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:
body {
background-image: url("nome_immagine.gif");
background-attachment: fixed;
color: black;
margin: 50px;
}
a:link { color: red; }
a:visited { color: green;}
|
Home ·
Primi Passi ·
PP Style ·
Guida HTML ·
Guida CSS ·
XHTML con Style ·
F.A.Q. ·
Scripting ·
Applets ·
Grafica Web ·
Forum ·
Comunicazioni 
per stampare questa pagina
Home Page ·
Aggiungi ai preferiti ·
Segnala il sito ai tuoi amici ·
