loader gif

Creare un sito Web – Parte 1

Da dove iniziare

Prima di tutto occorre avere un’idea del sito che si vuole realizzare, poi si progetta la struttura e i contenuti; nel nostro caso è abbastanza semplice, vogliamo realizzare un sito base di 2 pagine, Homepage e Contatti, che parli di aforismi poetici.
Creiamo una cartella e chiamiamola: www.aforismiweb.it
Apriamo HTML-Kit e creiamo un nuovo file vuoto.

Doctype, Head, meta tag importanti

Nella prima riga dichiariamo il tipo di documento, nel nostro caso stiamo creando un sito in HTML5 e il suo doctype è:

<!DOCTYPE html>
N.B.: Si tratta di un tag che non ha bisogno di chiusura e che ha il compito di fornire informazioni al server Web che ospita la pagina. Le informazioni fornite da DOCTYPE riguardano il tipo di documento visualizzato.

Andiamo a capo, creiamo la struttura del sito, html head e body:

<!DOCTYPE html>

<html>

 <head>
 </head>

 <body>
 </body>

</html>

Gli spazi che lasciamo sono fondamentali per incrementare la leggibilità del codice, è buona norma cominciare a utilizzare questa modalità di scrittura da subito.
All’interno della Head inseriamo i meta tag più importanti:

Meta Tag Title: usare questo tag solo una volta in una pagina, la lunghezza non deve superare i 65 caratteri, non deve contenere più di 15 parole;

Meta Tag Description: usare questo tag solo una volta in una pagina, deve contenere tutte le parole chiavi, la lunghezza non deve superare i 150 caratteri, non deve contenere più di 30 parole;

Meta Tag Keywords: Google ha da poco comunicato che questo campo è assolutamente ininfluente per il posizionamento di un sito. Il consiglio è comunque quello di compilarlo inserendo non più di 4/5 frasi o un po’ di parole separate da virgola;

Meta Tag Robots: è assolutamente fondamentale dichiarare questo tag per far capire al motore di ricerca come si deve comportare con la pagina web. I valori predefiniti sono “index, follow”, “noindex”: impedisce l’indicizzazione della pagina, “nofollow”: impedisce che Googlebot segua i link della pagina;

Meta Tag Content-Type: questo meta tag definisce il tipo di contenuto e il set di caratteri della pagina. Si consiglia UTF-8;

<!DOCTYPE html>

<html>

 <head>
  <title>Gli aforismi migliori del Web!</title>

  <meta name="description" content="Questo sito presenta le frasi, gli aforismi
  e le citazioni piu belle riscontrabili nel Web."/>

  &ltmeta name="keywords" content="aforismi migliori, citazioni, frasi belle da
  condividere, citazioni film"/>

  <meta name="robots" content="index,follow"/>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 </head>

 <body>
 </body>

</html>

Creiamo il contenuto, body

Prima di continuare è meglio salvare il file nella cartella che avevamo creato all’inizio dell’articolo (www.aforismiweb.it), clicchiamo su File/Save As, Nome file: index, selezioniamo Salva come: HTML Files (*.html; *.htm), clicchiamo Salva. Adesso abbiamo il file di nome index, e estensione .html, index.html che sarà l’Homepage.
Creiamo la struttura del body usando i divisori come segue:

 <body>
  <div class="contenitore">

   <div class="banner">
   </div>

   <div class="menu">
   </div>

   <div class="colonna_sinistra">
   </div>

   <div class="colonna_destra">
   </div>

  </div>

  <div class="footer">
  </div>
 </body>

Abbiamo assegnato ai divisori delle classi, contenitore, banner, menu ecc.. Il nome delle classi è essenziale per poter modificare la grafica del divisore a nostro piacimento utilizzando il foglio di stile (che vedremo più avanti).
Possiamo creare il menu come segue:

   <div class="menu">
    <ul id="menu">
     <li>Home</li>
     <li>Contatti</li>
    </ul>
   </div>

Procediamo inserendo parte del contenuto della colonna sinistra e destra utilizzando i tag:

– <h1> </h1> [solo 1 per pagina];

– <h2> </h2> [solo 3 per pagina];

<!DOCTYPE html>

<html>

 <head>
  <title>Gli aforismi migliori del Web!</title>

  <meta name="description" content="Questo sito presenta le frasi, gli aforismi
  e le citazioni piu belle riscontrabili nel Web."/>

  &ltmeta name="keywords" content="aforismi migliori, citazioni, frasi belle da
  condividere, citazioni film"/>

  <meta name="robots" content="index,follow"/>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 </head>

 <body>
  <div class="contenitore">

   <div class="banner">
   </div>

   <div class="menu">
    <ul id="menu">
     <li>Home</li>
     <li>Contatti</li>
    </ul>
   </div>

   <div class="colonna_sinistra">
    <h1>MIGLIORI AFORISMI</h1>
   </div>

   <div class="colonna_destra">
    <h2>AFORISMI VARI</h2>
   </div>

  </div>

  <div class="footer">
  </div>
 </body>

</html>

Continueremo con la seconda parte nel prossimo articolo.

Vai all’articolo precedente | Vai all’indice | Vai all’articolo successivo

 

Lascia un commento