Ecco le basi per realizzare un ottimo sito web
Nel mondo internet ci sono diversi approcci per sviluppare un sito web. In funzione della scelta adottata sono richieste competenze specifiche, noi inizieremo dall’aspetto più semplice ma essenziale per fornire un sito performante e interessante.
Statico o dinamico?
Per prima cosa capiamo cosa vogliamo diventi il nostro sito web. Sicuramente se lo impostiamo separando nettamente front-end (quello che vedono gli utenti quando aprono la homepage sui loro browser) e il back-end (quello che sta dietro il sito web e che lo fa “girare”) dobbiamo chiederci se ne vale la pena. Una scelta di questo tipo comporta competenze specifiche di programmazione, in PHP o in Asp.NET, oltre che saper lavorare con i Data Base (mySql, Access, T-SQL o Oracle): il vantaggio è produrre un sito web dinamico, controllabile da un CMS (Content Menagement System) su cui possiamo cambiare i contenuti quando vogliamo, aggiungere menù e sotto menù, caricare immagini e video.
Per la trattazione che vogliamo fare qui ci “accontenteremo” di sviluppare un sito statico. Questo vuol dire conoscenza di base di HTML 5 e poco altro.
La nostra HomePage
Iniziamo con analizzare il tag <head></head>. Questo tag racchiude le informazioni principali della nostra pagina web come il titolo, le parole chiave per i motori di ricerca e la descrizione della pagina che andremo a popolare con i contenuti.
Apriamo quindi notepad (anche se in rete ci sono dei programmi visuali per la creazione di siti come Dreamweaver) e incolliamo il codice che trovate di seguito:
-
-
-
-
Qui va il titolo di pagina
Tralasciamo le prime due righe che servono per qualificare la tipologia di documento che stiamo utilizzando, in questo caso un XHTML Transitional.
Concentriamoci invece su quello che c’è scritto tra i tag head: il primo meta non lo tocchiamo, serve a far capire al browser i set di caratteri utilizzati nella stesura dei contenuti, ma vediamo che c’è un tag <title></title> e proprio qui in mezzo andremo a posizionare il titolo della nostra pagina. Di seguito troviamo il meta description che serve a descrivere ai motori di ricerca il contenuto della pagina, il testo andrà posto tra gli apici del content e dovrà essere congruente con il testo della nostra pagina, se parliamo di cucina ma nella description parliamo di macchine è completamente inutile scriverlo! Di seguito troviamo il meta keywords, come per il passaggio precedente anche qui dobbiamo tener presente sia il testo scritto che la description così da porre parole o frasi pertinenti separate da virgola e scritte tutte in minuscolo sempre tra gli apici del content.
Il corpo della pagina: il tag <body>
In questa sezione c’è la vera e propria struttura della pagina: andremo ad analizzare esclusivamente un paio di tag rimandando la trattazione dell’impaginazione vera e propria ad un articolo che verrà scritto successivamente.
il primo tag che andiamo ad analizzare è <p></p> che definisce un paragrafo, al suo interno è possibile nidificare altri tag quali <strong></strong> per il grassetto nelle parole racchiuse al suo interno e il tag <em></em> per il corsivo. Quindi possiamo andare a scrivere una cosa del genere:
Ciao a tutti gli amici che stanno leggendo
Per vedere l’effetto salviamo il file come index.html e lo apriamo con il nostro browser.
Oltre a questo un altro tag utilissimo è <a></a> che serve per creare link ad altre pagine, vediamo come si utilizza:
-
</pre>
-
in questo caso la parola "Webinfinity" viene sottolineata e se cliccata rimanda alla home di questo sito web ma visto che abbiamo aggiunto anche <em>target="blank"</em> alla sua pressione si aprirà un'altra scheda di navigazione, se lo omettiamo useremo la scheda di navigazione corrente.
-
Ultimo tag interessante per un sito è <em><img></em>, questo ci permette di caricare immagini prese in locale nella directory di pubblicazione del nostro sito web oppure a link di immagini sulla rete. Vediamo come si utilizza:
-
<pre lang="html"><img src="http://wallpaperart.altervista.org/Immagini/arcobaleno-1280×800.JPG" alt="arcobaleno" />
come si vede l’immagine “punta” ad un sito che nulla a che vedere con il nostro ma verrà caricata comunque, l’attributo alt invece specifica un testo alternativo all’immagine se nn dovesse essere caricata.
Per approfondire
In rete c sono tantissime risorse di approfondimento del codice HTML ma la migliore e più completa, anche se in inglese, per me è questa.
A questo punto non vi resta che sperimentare e imparare le fondamenta dell’HTML in attesa del prossimo articolo in cui tratteremo l’utilizzo dei layer per impaginare il nostro sito web.
