Le basi di HTML

Struttura tipo di baseSi potrebbe decidere quali elementi (tags) adoperare a seconda di quello che abbiamo intenzione di fare. Questo linguaggio infatti non ha variabili da dichiarare, non esegue operazioni aritmetiche e non prende decisioni. Ha però delle regole da rispettare, la più importante è la struttura all'interno della quale vanno collocati tutti i singoli elementi (tags). Questa struttura dovrà essere sempre presente su ogni pagina che andremo a creare. Vediamo come e da cosa è composta la struttura tipo di base:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
<title>la mia prima pagina web</title>
  </head>  <body>
<p>Ecco la mia prima pagina in html destinata al web.</p>
  </body></html>

 

Di tutto il codice scritto sopra, noi vedremo soltanto ciò che è stato scritto nel corpo (body) del listato; quindi fra gli elementi <body> e </body>:

Ecco la mia prima pagina in html destinata al web.


Ogni pagina html, indipendentemente dal suo contenuto, dovrà obbligatoriamente avere:il tag di prologo <!doctype>
i due tags di definizione <html></html>
i due tags per la testata <head></head>,
un tag per il titolo <title></title>
ed i due tags per il corpo <body></body>,

Vediamo in dettaglio tutti questi elementi:

Questa prima riga chiamata "prologo" è solitamente generata in modo automatico dall'editor html (visuale o testuale che sia), ha il compito di informare il browser che si tratta di un documento html relativo a determinate specifiche dettate dal W3C, in questo caso versione 4.01 Transitional, è molto importante perchè predispone i vari browser ad una corretta interpretazione del codice che andrà a seguire.

  • <html>

Inizio codice html vero e proprio, tutto ciò che sarà posto all'interno di questo elemento e fino al relativo tag di chiusura sarà inteso come struttura di un documento in html

 

  • <head>

Testata o head del documento, in questa sezione trovano posto tutti quei tags che impartiscono direttive al browser quali: titolo, Meta Tags o meta comandi, richiami ai fogli di stile, scripts, ed altro ancora. Tutto ciò che si trova all'interno della struttura head non viene visualizzato nella pagina ma interpretato dal browser, una zona destinata ad uso esclusivo dei soli comandi che impartiscono direttive ben specifiche.

  • </head>
  • <body>

Corpo o body del documento, è in questa sezione che lavoreremo maggiormente ed è proprio qui che andranno inseriti tutti i tags di html: immagini, suoni, filmati, testo, form, tabelle, links e quant'altro faccia parte di html.

  • </body>
  • </html>

Chiusura dei vari elementi (tags), da non dimenticare mai, solo così potremo avere la certezza di una giusta e corretta interpretazione da parte di tutti i browser.I tags possono essere scritti indifferentemente sia in minuscolo che in maiuscolo, xhtml considera un errore il maiuscolo per cui sarebbe meglio abituarsi fin da subito ad usare solo il minuscolo. Gli spazi vuoti lasciati fra un tag e l'altro e fra una parola e l'altra, così come i ritorni a capo generati dal tasto invio, saranno ignorati durante la visualizzazione.Maggiori informazioni sulla struttura e metodi per creare pagine web sono reperibili sulla guidaprimi passi HTML. Chi accede e consulta direttamente questa guida dovrà almeno conoscere le basi.

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 stilescript 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,linkvlinkalinktext

Evidenziati in giallo gli attributi proprietari di singoli browser dei quali se ne sconsiglia l'utilizzo:
bgpropertiestopmarginbottommarginleftmarginrightmargin.

</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>