Il proprio spazio su Internet (parte II)
Cominciamo a creare. Prima le pagine .html, poi i collegamenti che le renderanno interattive. Semplicemente, con pochi elementi, nasce il nostro sito web, pronto ad ospitare idee, immagini, video e a farci comunicare con i nostri amici sparsi per il mondo.
Livello: base
Aprite quella porta
Il punto di partenza di qualunque sito internet è la pagina denominata index.html, tanto che senza questa pagina, in sede di pubblicazione, il browser non vedrà neanche le altre. E’ la porta di ingresso della nostra capanna, e, se non è aperta, nessuno può entrare. Aprire quella porta (in questo caso, a differenza del film, va fatto) vuol dire creare la pagina index.html. Che spesso è la home page del sito, sul quale si spende la maggior parte del tempo in sede di progettazione: la scelta dei menu, della posizione delle foto, dei link, per non parlare dei caratteri e dei colori da usare, equivale a dare uno stile al nostro intero sito, perchè le scelte fatte per la pagina “casa” verranno poi declinate a tutte le altre (non farlo, e di conseguenza non avere un sito coerente dal punto di vista grafico, significa rovinare l’intera opera).
Dunque, come si crea la pagina index.html? Apriamo il nostro editor di testo (per esempio il Blocco Note) e digitiamo il codice del nostro esempio della prima parte del tutorial:
<html>
<head>
<title>Il mio sito</title>
</head>
<body>
<p>Il mio sito</p>
</body>
</html>
salviamo il file scrivendo nello spazio del nome index.html e scegliendo nel menu sottostante “Salva come” l’ultima voce, “Tutti i file”. A questo punto il nostro file avrà già assunto le sembianze di una volpe infuocata e, al prossimo doppio clic, si aprirà nel browser predefinito, che terremo sempre aperto per controllare volta per volta l’effetto delle modifiche che faremo sull’aspetto globale dell’home page.
Gli elementi fondamentali
Il nostro programma preferito diventerà il Blocco Note, e il codice html la lingua con cui ci esprimeremo. Abbiamo già specificato che il primo tag di una pagina web è <html> (e l’ultimo </html>) e che la pagina è divisa nella testa, delimitata dai tag <head> e </head>, e il corpo, racchiuso da <body> e </body>. Nella testa sono presenti il titolo della pagina, che appare nella barra del titolo del browser, i metatag, che servono all’indicizzazione della pagina da parte dei motori di ricerca, i riferimenti allo stile della pagina, a cui dedicheremo una delle prossime puntate, e i link alle applicazioni in javascript eventualmente presenti nella pagina. Il titolo, come vediamo nel nostro esempio, va fra i tag <title> e </title>, e non è il caso di inserire una frase troppo lunga, anche qui la semplicità e la chiarezza saranno le nostre guide, pertanto useremo un titolo breve e specifico al contenuto della pagina.
Per ora la testa va bene così, passando al corpo inseriamo il tag <body>, all’interno del quale possiamo scegliere il colore dello sfondo della pagina, semplicemente scrivendo bgcolor (background color) e specificando il colore utilizzando il codice esadecimale, che è formato da sei caratteri alfanumerici. Il bianco si scrive FFFFFF, il nero 000000 (prima dei sei caratteri inseriamo il cancelletto #), variando le lettere e i numeri possiamo ottenere tutte le tonalità e dei colori davvero unici. Basta aprire un programma di fotoritocco (Photoshop andrà benissimo, visto che ci può tornare utile anche per modificare le foto da inserire nel sito) e dal selettore dei colori scegliere il colore preferito, in basso verrà visualizzato il codice esadecimale. Ad esempio scrivendo <body bgcolor=#D1CEF0> otterremo lo sfondo azzurro chiaro
E’ bene usare sfondi chiari, preferibilmente il bianco, ma sono da evitare a tutti i costi i colori forti, come il rosso fuoco o il blu scuro, che impediscono la lettura e danno fastidio agli occhi provocando la fuga degli internauti. In questo campo è meglio mettere un freno alla fantasia.
Il collegamento ipertestuale
E’ considerato il tag principale del codice Html, quello dall’effetto maggiore, è il tag che permette i collegamenti ipertestuali (e quindi il cuore stesso di Internet), è indicato dalla prima lettera dell’alfabeto: <a>. Ipotizziamo di avere già creato, dopo la nostra index.html, una seconda pagina, chisono.html, che in questo blog si chiama “lo staff”. Grazie a questo tag inseriamo tra di loro un link, che potremo posizionare dove vorremo, su una parola, una frase, una foto, un disegno. Allora, restando al nostro esempio, inseriamo il link nella frase “Il mio sito”, precisamente sulla parola mio, per rimandare alla pagina di presentazione in cui parleremo di noi e delle nostre esperienze. Il codice diventa:
<html>
<head>
<title>Il mio sito</title>
</head>
<body>
<p>Il <a href=”chisono.html” mce_href=”chisono.html”>mio</a> sito</p>
</body>
</html>
In questo modo, cliccando su mio, si aprirà la pagina chisono.html. L’oggetto su cui verrà posizionato il collegamento viene racchiuso nel tag <a>, ricordiamoci sempre di chiudere il tag alla fine della parola o della foto in oggetto. La formula esatta in html è <a href> a cui segue l’uguale e l’indirizzo della pagina web di destinazione racchiusa tra le virgolette. Nel caso in cui il link punti ad una pagina esterna al nostro sito indicheremo per esteso il nome della stessa; ad esempio <a href=”http://www.space4tutorial.com/” mce_href=”http://www.space4tutorial.com/”> crea un collegamento con l’home page di questo blog, e soprattutto fa entrare la nostra pagina a pieno titolo nel world wide web, nella rete mondiale di documenti interconnessi che formano il villaggio globale.
