Lezione 1 - Sito passo per passo

1. Cos'è l'Html?

In questo primo ed importante Step introdurremo il linguaggio html lasciando però alla guida completa tutti gli approfondimenti e tutte le altre lezioni inerenti all'html. In questa breve lezione inizieremo a parlare dell'Hyper Text Markup Language (html) ma lasceremo al manuale svelare tutti i segreti.

HTML è l'acronimo di Hyper Text Markup Language ed è il linguaggio che dà vita al Web. Il codice Html viene compilato attraverso degli editors cioè programmi che consentono di scrivere in modo semplice e veloce righe di comando.

Gli editors si dividono in due categorie:

- Visuali: molto semplici, simili ai programmi di grafica, permettono di disegnare/creare quello che serve all'interno dell'ambiente web. In automatico gli editors generano codice html.

- Testuali: bisogna scrivere il codice, quindi conoscerlo. Offrono gli strumenti giusti con suggerimenti necessari alle varie esigenze, si ha il pieno controllo della situazione superando quelli che spesso sono i limiti degli editors visuali.

HTML è un insieme di istruzioni: <TAGS> ,che il browser legge in maniera sequenziale, dall'alto verso il basso, da sinistra verso destra, esattamente come avviene la normale lettura di un testo per noi.

Queste istruzioni, o meglio questi elementi (tags), sono racchiusi fra parentesi angolari: <queste> ogni elemento (tag) ha un compito preciso e termina con lo stesso elemento preceduto da una barra /: </queste>

Non sono poi molti gli elementi che compongono tale linguaggio, per una questione di tempo e di utilità mi limiterò quindi ad illustrare soltanto quelli che possono realmente essere utili.

.::Elementi di una pagina::.

Identificatore di prologo

Affinchè un documento sia identificato come HTML, esso deve iniziare con il prologo: !DOCTYPE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Questo tipo di riga chiamata prologo, è solitamente generata in modo automatico dall'editor che adoperate, visuale o testuale che sia. Non è obbligatoria ed ha il solo compito di informare il browser che si tratta di un documento html relativo a 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. Include tutti i tags di una pagina web.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head>
elementi di informazione quali:	<BASE> <LINK> <META> <STYLE> <TITLE> <SCRIPT>
</head> la parte restante del documento </html>

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

<META HTTP EQUIV="esempio">

<STYLE>...</STYLE>

Sono molti gli attributi di style che si possono inserire:

<STYLE TYPE="text/css"esempio">

<TITLE>...</TITLE>

Il titolo da assegnare alla pagina.

<Title>Cento% - Tutto per i webmaster</Title>

<SCRIPT>...</SCRIPT>

Inserimento di funzioni o altro, sotto forma di script:

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

<BODY>...</BODY>

L'elemento <BODY> contiene la pagina vera e propria, o almeno quello che si vedrà a video. Quindi il testo, le immagini e tutti gli elementi che forniscono il controllo e la formattazione della pagina stessa. I possibili attributo sono : Background, Bgcolors, Bgproperties, Link, Vlink, Alink, Text, Topmargin, Bottommargin, Leftmargin, Rightmargin

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <Title> la mia prima pagina web </Title> </head> <body>
Molti gli attributi associabili a questo tag:	BACKGROUND BGPROPERTIES BGCOLOR LINK VLINK ALINK TEXT TOPMARGIN BOTTOMMARGIN LEFTMARGIN RIGHTMARGIN
la parte restante del documento </body> </html>

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:

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

<bodybackground="http://sito.com/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, operazione per altro possibile soltanto con i browser IE

BGCOLOR

Questo attributo si utilizza per colorare lo sfondo della pagina di una tinta unita, il colore può essere espresso sia col nome inglese che nel relativo codice esadecimale.

oppure

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

LINK

Questo attributo viene utilizzato per decidere il colore di tutti i links facenti parte della pagina, può essere espresso sia col nome inglese che col relativo codice esadecimale.

oppure

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 è blù (blue) #0000FF.

VLINK

Si utilizza 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.

oppure

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

Questo attributo viene utilizzato per decidere il colore di tutti i links attivi, colore che cammbierà nel moneto del clik su di esso, può essere espresso sia col nome inglese che col relativo codice esadecimale.

oppure

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

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.

oppure

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.

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.

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.

Step: 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13 - 14 - 15