Una pagina Html è costituita da un testo, che può essere scritto con un editor come word pad o write che vengono dati in dotazione con Windows. Quando questo testo viene caricato in un browser (ad esempio Netscape o Explorer) ecco che appare la pagina WEB.

Questo testo è costituito:

1-dal testo vero e proprio (le scritte che appariranno sulla pagina)

2-da dei “tag”, ovvero dei comandi. Essi sono naturalmente “fatti” di testo, ma questo testo non apparirà nella pagina grafica. Cosa distingue il testo che apparirà sulla pagina dal testo che forma un “tag”? In genere, i comandi (o “tag”) sono compresi tra due parentesi angolari,
ovvero tra il segno < e il segno >.

Quando il programma incontra del testo dentro queste parentesi, non lo visualizza ma lo interpreta come un comando. Ad esempio: se scrivo “h2 <h3>”, la parola “h2” apparirà nella pagina grafica, “h3” no, perchè viene vista dal browser come un comando.

LA STRUTTURA

Il testo di una pagina HTML è sempre compreso tra due tag: <html> e </html>. Il primo tag, ovvero <html>, indica che inizia la pagina; il secondo che finisce. Molti avranno già indovinato che è proprio la barra che sta ad indicare che la pagina è finita. La pagina può essere considerata suddivisa in due parti: 1-una intestazione e 2-il corpo

1-L'intestazione inizia con <head> e finisce con </head> (anche qui, come in quasi tutto il lingguaggio HTML, la barra indica che finisce l'effetto del tag). Dentro questa intestazione, si mette un titolo, che inizia con <title> e finisce con </title>.

2-Il corpo inizia con <body> e finisce con </body>. Proviamo a formare una pagina HTML molto semplice:

<html>

<head> <title>ciao</title> </head>

<body>

<img src = “pietro.jpg”>

questo è S.Pietro <a href=”ciao2.htm”> al prossimo traguardo</a>

</body>

</html>

All'inizio e alla fine abbiamo messo il nostro tag html, abbiamo messo i tag che delimitano l'intestazione e il body, e quelli che delimitano il titolo e il titolo. Oltre a queste "formalità burocratiche", abbiamo incluso (finalmente) l'oggetto della nostra pagina.

1-La prima riga del body inserisce una figura. Dovete sempre scrivere <img srch="x"> e al posto della x mettere il nome dell'immagine che volete che appaia.
Tutto qui: non è difficile, vero? Nel nostro caso l'immagine si chiama "pietro.jpg".

2-la seconda riga del body è un testo normalissimo. E qui non c'è alcun problema: la scritta apparirà così com'è.

3-la terza riga del body è un link. Se (quando la nostra pagina sarà caricata nel browser) cliccheremo sulle parole :"al prossimo traguardo", ecco che al posto della pagian presente apparirà la pagina salvata come "ciao2.htm".
Basta ricordare questa sintassi così com'è: tra le due prime virgolette va il nome della pagina da chiamare, e tra la parentesi angolata e il tag </a> va messo il testo che apparirà sulla pagina, e che (premuto mediante il mouse) farà apparire la pagina chiesta.

La nostra prima pagina è fatta, e possiamo salvare il file con il comando "salva come" del nostro programma di scrittura. Salviamolo come testo puro (non come file di Word, per intenderci) e diamogli l'estensione .htm.
Nel nostro caso, chiamiamolo "ciao.htm".
Se volete potete scaricarlo già fatto dal sito di cui vi dò l'indirizzo, ma vi suggerisco di copiarlo sul vostro computer dalla rivista di carta, perchè scrivendolo lettera per lettera si prende confidenza con i comandi e si comprende ancora meglio la struttura della pagina.
Se carichiamo questa pagina nel nostro browser (ad esempio Netscape) con il comando "apri", ecco che apparirà un'immagine come in figura 1.

Qui si vi consiglio di andare a vederla sul sito, e di rendervi conto di come è nella realtà.
Per molti potrebbe essere una delusione: tutto il testo è solo su una riga. Infatti, nel linguaggio HTML per fare andare a capo il testo in modo obbligatorio non basta un "a capo" nel testo composto nell'editor, ma bisogna introdurre un appasito tag, il "break", che si scrive: <br>. Proviamo a rifare il nostro file aggiungendo questi <br>.

SECONDO PASSO
Già che ci siamo, complichiamo un po' (ma solo un po') la nostra pagina mettendo anche delle dimensioni obbligate all'immagine. Mettiamo il valore di 100 come larghezza (widt), 130 come altezza (height) e (udite udite) mettiamo un bel bordo (border) di 15.Cosa sono questi valori? Il numero di pixel. Il bordo nel nostro caso risulta orribile, e lo toglieremo. In altre circostanze invece sarà utile.

<html> <head> <title>ciao</title> </head>

<img src = “pietro.jpg” width=100 height=130 border=15>

<br> questo è S.Pietro</a>

<br> <a href=”ciao3.htm”>al prossimo traguardo</a>

<p> </body> </html>

TERZO PASSO
Passiamo ora al terzo passo, che riguarda l'allineamento sia delle immagini che del testo. Aggiungiamo la coppia di tag <center> e </center>.
Quello che si trova tra questi due tag viene messo al centro dello schermo. Potremmo anche usare i tag <left> e /left> per allineare immagini e testo a sinistra, e i tag <right> e </right> per allineare il tutto a destra.
nota: da qui in poi non dirò più che il secondo tag (quello con la barra / ) termina l'effetto del primo.

<html> <head>

<title>ciao</title> </head>

<center><img src = “pietro.jpg” width=150 height=180 border=0>

<br> questo è S.Pietro</a>

<br> <a href=”ciao4.htm”>al prossimo traguardo</a><p>

</center>

</body>

</html>

QUARTO PASSO
Il quarto passo è un altro esercizio sull'allineamento: proviamo a sdoppiare il contenuto della pagina due parti: la prima parte centrata, al seconda allineata a sinistra. Per facilitare le cose aumentiamo un po' il contenuto della pagina aggiungendo due nuovi link a due pagine inesistenti: una ipotetica pagina n. 2 e n.3. Attenzione però: se prendiamo due pagine html qualsiasi e le "salviamo come" "pag2.htm" e/o "pag3.htm", ecco al meraviglia: nel cliccare sulle parole "pagina" esse compaiono! Bene, vediamo la nostra pagina così arricchita:

<html> <head> <title>ciao</title>

</head> <body> <center>

<img src = “pietro.jpg” width=150 height=180 border=0>

<br> questo è S.Pietro</a>

<br> </center> <a href=”ciao5.htm”>al prossimo traguardo</a>

<br> <a href=”pag2.htm”>alla pagina n.2</a>

<br> <a href=”pag3.htm”>alla pagina n.3</a>

<br> </body> </html>

QUINTO PASSO
Il quinto passo è invece un esercizio sul dimensionamento del testo. E' possibile ingrandire o rimpicciolire il testo in più modi, qui vediamo il più semplice: lo si fa introducendo dei tag con un h seguito da un numero da 1 a 5. In pratica, <h1></h1>, <h2></h2>, e così via decrescendo. Proviamo con <h1> </h1> e <h3></h3>, e vi renderete conto di cosa succede:

html> <head> <title>ciao</title> </head> <center>

<img src = “pietro.jpg” width=150 height=180 border=0>

<h1> questo è S.Pietro</a> </h1>

<br> <h3> <a href=”ciao6.htm”>al prossimo traguardo</a>

<br>cliccando qui sopra <br>andrete alla pagina “ciao6.htm”

<br> <a href=”pag2.htm”>alla pagina n.2</a>

<br> <a href=”pag3.htm”>alla pagina n.3</a>

</h3> </body> </html>

Notate anche che si può aggiungere testo a piacimento, io ho messo la frase: "cliccando qui sopra..." . Ricordate che lo si obbliga ad andare a capo con i famosi <br>.

SESTO PASSO
Passiamo ora ad un altro esercizio, che consiste nell'aggiunta di alcuni tag molto semplici: sono i tag <hr>, che introducono delle righe. Avrete notato che i tag <hr> (come del resto i <br>) non hanno bisogno del tag di chiusura </hr> o <br> perchè in questi casi non avrebbe senso.

< html> <head> <title>ciao</title> </head> <body> <center>

<img src = “pietro.jpg” width=120 height=150 border=0>

<h2> questo è S.Pietro</a> </h2> <br>

<h3> <hr> <a href=”ciao7.htm”>al prossimo traguardo</a>

<br> <hr> <a href=”pag2.htm”>alla pagina n.2</a>

<br> <hr> <a href=”pag3.htm”>alla pagina n.3</a> <br>

<hr>

</h3> </body> </html>

SETTIMO PASSO

La prossima pagina ci porterà ad una serie di sorprese.
Innanzitutto, iniziamo a colorare il tutto.
Posso scrivere un bel color=# seguito da sei cifre. Se le cifre sono sei zeri siamo al nero, se sono sei "f" siamo al bianco, alterandole possiamo trovare colori differenti. Si tratta di tre paia di cifre, ciascuna delle quali esprime in esadecimale il livello di rosso, verde e blu.
Se avrò spazio riporterò una tabella con un po' di colori, per questo esercizio ci basta a permetterci di colorare il testo normale e i link.
Per i link e i link visitati (ovvero quelli su cui è già stato cliccato) uso un altro sistema: al posto degli zero uso dei colori prestabiliti: red (rosso) e green (verde).
Un'arlecchinata?
Boh, sapete, è solo un esercizio...

2-Ma ecco la ciliegina sulla torta. Metto la parola magica "bkground" seguita dal nome di un'immagine, in questo caso "fond1.jpg".
Se provate a caricare il file nel browser, ecco il miracolo: il fondo viene sostituito da una texture, ovvero un'immagine (che io ho chiamato fond1) che viene ripetuta per tutto lo schermo.
Ho tratto questa immagine appoggiando sul piano dello scanner una agendina di pelle marrone, e poi gli ho dato il colore verde.
Se sapessi di fare una cosa utile, metterei in linea un po' di sfondi vari, ottenuti con i sistemi più disparati. Ma vi sono in rete vari siti che vi offrono sfondi gratis e non sarò certo io ad aumentarne la disponibilità.
Provo tuttavia amettere nel sito qualche sfondo ottenuto così, per fare degli esempi: ho messo nello scanner un lembo di tessuto, un connettore per il mouse...

Potete ricorrere a qualunque oggetto, raccomando tuttavia di trasformare le immagini portandole a dimensioni molto piccole, tanto vanno ripetute per tutto lo schermo. In una home page gratuita ho provato a mettere degli sfondi molto "forti" (http://www.geocities.com/HotSprings/1792/imago1.htm), mentre in altri casi ho provato a mettere sfondi molto tenui (allo stesso indirizzo, le pagine dedicate alla dieta e al diabete). E se invece si preferisce un semplice colore di fondo, cosa si deve fare? Dopo "body" mettete al posto di "Bkground" la parola "Bgcolor" seguita dal colore desiderato.
E' quello che faremo nel nostro ultimo passo, dove setterò il
colore di sfondo a 000000, ovvero al nero.
Ricordate la sintassi esatta: Bgcolor="#000000"

<HTML> <HEAD> <TITLE>ciao</TITLE> </HEAD>

<BODY TEXT="#000000" LINK=red VLINK=green BACKGROUND="fond1.jpg">

<CENTER><IMG SRC="pietro.jpg" HEIGHT=180 WIDTH=150>

<H2>questo è S.Pietro <hr>

<CENTER><h2><A HREF="ciao8.htm"> alla prossima...

</A> </h2><BR>

</BODY> </HTML>

OTTAVO PASSO
Eccoci all'ultimo passo. Qui la chicca è data dall'immagine. Cosa ha di strano questa GIF? Provate a caricare il file nel browser e (meraviglia!) vedrete il mappamondo che gira. Siamo arrivati alle leggendarie gif animate! Si mettono nella pagine esattamente come le altre e (come le altre) si possono bordare o dimensionare.

LE LINEE -A proprosito di dimensioni, qui abbiamo dato una dimensione anche alle righe (hr)Abbiamo infatti definito lo spessore e sopratutto la loro larghezza , che viene espressa in percentuale rispetto alla larghezza dello schermo. Qui ho voluto dar loro un valore di 40%.

IL CARATTERE - Ma vi è anche un'altra cosa molto interessante: ho voluto cambiare font, ovvero tipo di carattere. L'ho fatto con il tag <font face="x"> dove x è il tipo di carattere prescelto. Perchè l'utente possa vedere questo carattere, deve averlo installato sul suo computer. Questo significa che più scegliamo un carattere raro e ricercato, più è probabile che molti utenti non lo vedano.

1-Quindi, si deve cercare di usare caratteri molto comuni.

2-Vi è la possibilità di specificarne più d'uno. Ad esempio, se scrivo "arial, helvetica", significa che il browser cercherà di caricare l'arial. Se non lo trova, proverà con l'herlvetica.

3-E se su un computer non trova nè il primo nè il secondo? Niente paura: per fortuna è sempre in agguato il font di default, il vecchio buon times che non tradisce mai... Quindi, se non vi è il font indicato il testo viene visulizzato come quello di default.

CONCLUSIONI

Alla fine del nostro percorso, abbamo costruito qualcosa che (nella sua semplicità) potrebbe già essere una home page, e una home page dotata di link ipertestuali, di icone animate, di font diversi, se lo volessimo perfino di sfondi creativi tratti dalla copertina della mia (o dalla vostra) agenda...
Per essere una home page ragionevole basta qualche aggiustamento grafico, un riequilibrio generale e una foto bella, magari affascinante, magari che sfuma nel colore di fondo. Ma sopratutto, ci manca un indirizzo e-mail.

E allora ce lo metto: con quella sintassi, cliccando si apre un form con già il mio indirizzo preimpostato, in modo che si possa mandare una bella letterina.

La parola magica è "mailto:" seguita dall'indirizzo e-mail.
Se realizzate la vostra pagina con uno schema come questo, vi raccomando di mettere il vostro indirizzo al posto di web@serenoeditore.com, altrimenti arriveranno a me tutte le lettere indirizzate a voi...
Non lo dico perchè sottovaluto la vostra intelligenza,
ma solo perche' temo che per pura dimenticanza...mi arrivino le vostre confidenze! Bene, si potrebbe andare avanti ancora per molto, parlando sopratutto di musica e di altri ornamenti, e sopratutto introducendo il discorso sulle tabelle e sui frames. Ma lo scopo di questo discorso è già raggiunto: con queste nozioni e con solo le cose descritte si possono già realizzare delle cose del tutto ragionevoli, basandosi più sul buon gusto che sugli equilibrismi tecnologici.
Un ultimo suggerimento: quando salvate le vostre pagine, ricordate di provare a visualizzarle con più browser, perchè lo stesso file visto con Netscape o con Explorer possono dare risultati differenti.
Passo dunque a salutarvi presentando il risultato dei nostri otto esercizi:

<HTML> <HEAD><TITLE>ciao</TITLE></HEAD> <BODY TEXT="#00FFFF" BGCOLOR="#000000" LINK="#FF0000">

<CENTER><IMG SRC="globo.gif" HEIGHT=60 WIDTH=60>

<FONT FACE="Arial,Helvetica"> <H1> <FONT FACE="Arial,Helvetica">questo è il mondo</FONT> </H1>

<CENTER> <HR SIZE=2 WIDTH="40%"> <FONT FACE="times"> <A HREF="ciao1.htm">all'inizio?</A>

<HR SIZE=2 WIDTH="40%"><A HREF="pag2.htm">alla pagina n.2</A> <HR SIZE=2 WIDTH="40%"><A HREF="pag3.htm">alla pagina n.3</A> </FONT> <HR SIZE=2 WIDTH="40%"></P></CENTER>

<CENTER><P><B><I><FONT FACE="times"><A HREF="mailto:"web@serenoeditore.com"">vuoi scrivere una e-mail?</A> </FONT></I></B></P></CENTER>

</BODY> </HTML>

 nota:
 nel testo
a fianco
sono state adottate le seguenti convenzioni:

i codici html
sono in rosso.

I nuovi
tag che
vengono
aggiunti
ad ogni
passo
sono in blu.

Il testo
principale
invece è in marrone
scuro...

CLICCA QUI PER INVIARE UNA E-MAIL A LORENZO FRATTI
FINE PAGINA