Primo sito
Guida passo passo per un primo sito
Quando viene l'idea di costruire un primo sito per imparare l'html, ci si pone il problema di cosa metterci. Superato questo non piccolo scoglio, ci si domanda come presentare i nostri argomenti.Per entrambi i quesiti, il consiglio migliore è quello di "navigare" nel web in cerca di ispirazioni osservando attentamente come vengono suddivise le pagine, i bottoni usati, i richiami ecc..
Qualunque sia la scelta bisogna prima impratichirsi con i vari tag per, poi, arrivare a combinarli in modo da ottenere l'effetto voluto.
Questo sito è composto da diverse pagine, ognuna delle quali tocca un argomento di base:
"font" da informazioni su come gestire i testi, sceglire i caratteri ed i loro colori.
"collegamenti" spiega come, cliccando in un punto, si può ottenere un determinato effetto.
"tabelle" e "frame" spiegano come suddividere la pagina e come inserire dei contenuti.
"fogli CSS" descrive come impostare delle regole generali, consultatelo quando vi sentirete un pò esperti.
"grafica" indica come si manipolano le immagini,sia per lo sfondo che per la pagina.
"suggerimenti" contiene consigli vari, da come editare un codice html a cenni su linguaggi più avanzati.
Armatevi di pazienza e perseveranza; seguite passo passo questa pagina, e poi quelle successive, provando tutto ciò che viene presentato. Così, anche se non ricorderete la sintassi, vi ricorderete che si può ottenere un certo effetto, ed andrete a cercare.
Per prima cosa è importante prendere confidenza con l'uso dei tag.
Per questo, di seguito, sono riportati degli esempi da provare per "vedere l'effetto che fà".
Ovviamente scrivere questi codici ha un senso se essi vengono provati su browsers (o con Front Page) come indicato nelle pagine basi e suggerimenti.
Se si usa un editor per html, i tag <html> e </html>, <head> e </head>, <body> e </body>, normalmente, sono preimpostati e non devono essere scritti una seconda volta.
In ogni esempio le parti colorate in blu evidenziano le differenze con l'esempio precedente.
##### esempio 1 - tag fondamentali -
<html> <head> </head> <body> PRIMO SITO </body> </html>
Questo codice funziona, ma non è molto chiaro da leggere; il codice successivo è equivalente al precedente ma scritto in modo più leggibile.
<html>
<head>
</head>
<body>
PRIMO SITO
</body>
</html>
##### esempio 2 - tag di intestazione -
L'elemento h1 è illustrato alla pagina font
<html>
<head>
</head>
<body>
<h1> PRIMO SITO </h1>
</body>
</html>
##### esempio 3 - tag di allineamento -
L'elemento <h1 align="center"> è illustrato alla pagina font
<html>
<head>
</head>
<body>
<h1 align="center"> PRIMO SITO </h1>
</body>
</html>
##### esempio 4
Una prova particolare è quella di inserire nel blocco "HEAD", una riga con i tag <title> e </title> che inserisce, nella riga blù in alto del browser, il titolo della pagina.
<html>
<head>
<title> primo </title>
</head>
<body>
<h1 align="center"> PRIMO SITO </h1>
</body>
</html>
##### esempio 5 - tag di "a capo" -
L'elemento <br> è illustrato alla pagina font
<html>
<head>
<title> primo </title>
</head>
<body>
<br><br>
<h1 align="center"> PRIMO SITO </h1>
</body>
</html>
##### esempio 6 - inserimento di collegamenti per spostarsi su e giù in una pagina -
(per chi viene dalla pagina "collegamenti") ritorna
I nuovi elementi di quest'esempio sono illustrati ala pagina collegamenti
<html>
<head>
<title> primo </title>
</head>
<body>
<a name="pippo"> </a> (assegna, a questa posizione, il nome "pippo")
<br><br>
<h1 align="center"> PRIMO SITO </h1>
<a href="#pluto"> vai sotto</a> (indica il nome a cui spostarsi quando si clicca sul collegamento)
<br><br><br><br><br><br> <br><br><br><br><br><br>
<a href="#pippo" name="pluto" > vai sopra</a> (indica il nome a cui spostarsi e assegna un nome alla posizione)
##### esempio 7 - costruzione di una tabella -
Gli elementi evidenziati sono illustrati alla pagina tabelle
<html>
<head>
<title> primo </title>
</head>
<body>
<table border="1" width="100%" height="100%">
<td align="center" height="20%" colspan="2" bgcolor="FFFF00"> <font color="red"> <h1>Titolo del sito</h1> </font> </td>
<tr>
<td align="center" width="15%" bgcolor="pink">Spazio laterale</td>
<th align="center" bgcolor="00FFFF"> Questa suddivisione è <br> realizzata con una tabella. <br> Essa è statica, rimane come è. </th>
</tr>
</table>
</body>
</html>
#####
La suddivisione dinamica di una pagina (una scelta, effettuata nello spazio a sinistra, cambia il contenuto nello spazio a destra) è descritta alla pagina frame
Questi semplici codici dovrebbero sciogliere il giaccio del primo approccio; ora i neofiti di buona volontà possono leggere, in sequenza, le pagine successive e provare, prima di andare avanti, ogni parte che risulti nuova.