Creiamo la nostra prima pagina web

Supponiamo di avere a disposizione tutti gli strumenti necessari indicati nella pagina introduttiva alla creazione di siti web. Ecco la procedura passo passo per creare la nostra prima pagina.

  1. Apri il Blocco note di Windows.
  2. Scrivi nella pagina il codice seguente:
    <!DOCTYPE html>
    <html>
     <head>
      <title>Prima pagina web</title>
     </head>
     <body>
      <h1>La mia prima pagina web</h1>
      <p>Questa è la mia prima pagina web,
      che sto scrivendo per cominciare
      a prendere confidenza con i primi tag
      del linguaggio html.</p>
     </body>
    </html>
  3. Salva il file con il nome primapagina.html all'interno della tua cartella personale.
  4. Utilizzando Esplora risorse di Windows, vai nella tua cartella personale e controlla che il file sia rappresentato con l'icona del browser predefinito (Internet Explorer, Mozilla Firefox, Google Chrome, Opera o Safari). Se così non è, ricontrolla di aver salvato il file con il nome corretto.
  5. Fai doppio clik sul file: se hai fatto tutto correttamente, si dovrebbe aprire all'interno del browser predefinito.
    Come vedi, la pagina è molto (forse troppo) semplice. In effetti, nel file html che abbiamo creato non abbiamo inserito indicazioni riguardanti la formattazione, ossia l'aspetto della pagina e del testo che abbiamo scritto. Per questo l'aspetto è molto "povero". L'unica indicazione contenuta nel file è che "La mia prima pagina web" è un titolo, mentre "Questa è la mia prima pagina web, che sto scrivendo..." è il corpo del testo.
  6. Per agire sul formato della pagina e dei testi, occorre creare un foglio di stile, ossia un file css.
    Per fare ciò, apri un nuovo file nel Blocco note di Windows.
  7. Scrivi nella pagina il codice seguente:
    body {
     background-color: green;
     font-family: Tahoma;
    }
    h1, p {
     color: white;
     background-color: red;
     border: solid 2px white;
     width: 35%;
     margin-left: 300px;
     padding: 20px;
    }
  8. Salva il file con il nome stile.css all'interno della tua cartella personale (la stessa in cui avevi salvato il file html).
  9. Ora bisogna inserire nel file primapagina.html (che abbiamo creato prima) il link a questo foglio di stile: in questo modo il browser, al momento di visualizzare la pagina web, saprà che dovrà utilizzare gli stili descritti in esso.
    Per fare ciò apri di nuovo con il Blocco note di Windows il file primapagina.html e inserisci, subito dopo la riga
    <title>Prima pagina web</title>,
    questa riga:
    <link rel="stylesheet" href="stile.css" />
  10. Salva il file html e prova ad aprirlo facendo doppio clik sulla sua icona, verificando che la visualizzazione è cambiata in seguito alla creazione del file css.

Dalla pagina al sito: i contenuti...

A questo punto non ti rimane altro da fare che cimentarti con la creazione di un sito web!

Innanzitutto, però, hai bisogno di un'idea sui contenuti da inserire nel sito. Qui puoi trovare un elenco utile dei contenuti più comuni per un sito personale. Altrimenti, un'alternativa interessante al sito personale è la realizzazione del sito web della scuola.

Attenzione! I contenuti devono essere sempre al centro del nostro progetto; tutto il resto è funzionale ad essi. Il nostro sito serve a trasmettere quei contenuti. E' inutile pensare ad un sito bellissimo graficamente, se non abbiamo nulla da comunicare.

Per questo, dedica il tempo necessario alla definizione dei contenuti e alla loro articolazione nelle varie sezioni del sito.

...e il design grafico

Dopo aver definito precisamente i contenuti e la loro articolazione, dovrai occuparti del design grafico del sito web: layout, colori, caratteri, ecc. Non è qualcosa che si possa imparare in poche lezioni, quindi conviene ispirarsi a quello che esiste già nel web. Qui troverai alcuni esempi di interessanti siti web di scuole e università. Potrai ispirarti ad uno di essi se deciderai di creare il sito web della scuola. Alcuni di essi, comunque, sono adattabili anche ad un sito web personale.