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
Transitional, maggiormente tollerante è quella più largamente usata, anche questa guida fa uso di transitional.
Frameset, nel caso in cui il sito sia strutturato a frames
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:
<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>
<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.
<html lang="it">
la parte restante del documento
</html>
<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.
<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>
<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.
Dove nome del frame sarà il nome esatto che voi avrete deciso di assegnare al frame.
<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.
<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.
Su questo link potete trovarne un elenco completo.
<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>.
<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>
<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.
<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>
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.
Deprecato. Lo stesso esempio con una dichiarazione di style.
body {
background-image: url("sfondo.gif");
color: #0000ff;
margin: 2px;
}
</style>
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.
E' possibile richiamare l'immagine anche da altro sito, specificandone l'indirizzo completo (URL)
Entrambi deprecati a favore di una dichiarazione di style in linea, nella pagina o su foglio esterno:
body { background-image: url("nome_immagine.gif"); }
</style>
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.
Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno:
body { background-attachment: fixed; }
</style>
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.
oppure
Deprecati, meglio usare una dichiarazione di style, in linea o su foglio esterno:
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.
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.
oppure
Deprecati, meglio usare una dichiarazione di style, in linea o su foglio esterno:
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
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.
oppure
Deprecati, meglio usare una dichiarazione di style, in linea o su foglio esterno:
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
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.
oppure
Deprecati, meglio usare una dichiarazione di style, in linea o su foglio esterno:
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
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.
oppure
Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno:
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
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.
Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno:
body { margin: 30px 15px 25px 15px;}
</style>
Oppure dovendone modificare uno solo:
body { margin-top: 30px;}
</style>
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.
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;}
</style>
Se avete domande potete scrivere sul forum di supporto, gratuito e aperto a tutti.