Inizia a realizzare il tuo sito web

Nel corso dell’ultima “lezione”, ci eravamo lasciati che stavi disegnando il layout grafico del tuo sito web.
Ora, finita questa fase di progettazione, passa subito alla fase di realizzazione delle pagine web.

Per avere il controllo di quello stai per realizzare, ti sconsiglio di ricorrere ai famosi programmi d’impaginazione stile FrontPage, piuttosto dovresti imparare un minimo di HTML e servirti di un buon editor di testo.

Niente panico, l’html non è un vero e proprio linguaggio di programmazione ma è un semplice linguaggio di markup che chiunque può imparare in poco tempo e senza sforzo!

Su internet puoi trovare delle guide facili, immediate e soprattutto gratuite.
Alcune potrebbero essere:

html.it: il sito numero uno per quanto riguarda il mondo della programmazione web.
webmasterpoint: a mio parere si attesta subito sotto il precedente.
risorse.net: ottimo sito anche se non al livello dei precedenti.

Una volta presa dimestichezza con il linguaggio HTML potrai scrivere il codice delle tue pagine e salvarli in file di testo con estensione html o htm.

Tali file vengono creati in locale sul tuo pc e possono essere testati direttamente col tuo browser facendo doppio clic su di essi.
La home page del tuo sito dovresti denominarla index.html o index.htm o index.php, ecc…

Un esempio di pagina html potrebbe essere questo:

<html>
  <head>
    <title>La mia prima pagina web</title>
  </head>
  <body>
    <p>Ciao Mondo!</a>
  </body>
</html>

Come puoi notare le pagine web iniziano e terminano col tag che delimita il contenuto dell’intera pagina.
All’interno di questo tag vi sono che rappresenta l’intestazione della tua pagina web dove verranno inseriti il titolo, i meta tag per l’indicizzazione del sito, gli script javascript, i link ai fogli di stile CSS e tanto altro (tutte cose che imparerai più avanti).

Scarica l’ebook per approfondire questi argomenti e imparare da subito a costruire il tuo sito web!

Infine c’è il tag che è il vero e proprio corpo (appunto) della tua pagina e dove all’interno inserirai tutto ciò che verrà visualizzato a video.

A questo punto le pagine web del tuo sito sono visibili solo sul tuo pc ma per renderle accessibili a tutto il web dovrai effettuarne l’upload su uno spazio hosting acquistato presso un provider.

Per trasferire i file sul server che li ospiterà è necessario un programma di FTP (ti consiglio il noto FileZilla), cioè un programma che permetta il File Transfer Protocol, un Protocollo per la trasmissione di dati tra host.

Senza che sto qui ad annoiarti con queste cose, ti basterà sapere che con questo programma potrai trasferire file html, immagini e tutto ciò compone il tuo sito web sull’host di destinazione.

E’ consigliabile organizzare i file nel tuo hosting in modo ragionato, evitando di buttare pagine html, immagini e quant’altro nella root principale.

Aggiungiamo un po’ di stile

Una buona gestione delle pagine web passa attraverso i fogli di stile CSS, un linguaggio che permette di gestire aspetto, posizionamento, colore, bordi, margini degli elementi presenti nelle pagine web.

Qualcuno osa inserire gli stili del testo o delle immagini direttamente nel file html ma io ti “proibisco” severamente di adottare questa abitudine.
Immagina questa situazione: decidi che il testo dei paragrafi che tuo sito sarà di colore rosso e scegli la font Comic Sans, per cui decidi di inserire in ogni pagina web il seguente codice:

p { color: #F00; font-family: 'Comic Sans'; }

Bene, dopo un po’ ti accordi che il rosso non è un colore ideale perchè inizia a dar fastidio agli occhi, per cui decidi di virare verso il nero, per di più vorresti cambiare anche la font per dare un tono più serioso al tuo sito web.

Ti accorgi però che il tuo sito web è composto da 10 pagine web per cui ora sei costretto a cambiare lo stile dei paragrafi in tutte le pagine e riscrivere quanto segue:

p { color: #000; font-family: 'Arial'; }

Per ovviare a tale problema sarebbe molto meglio gestire la formattazione del testo delle tua pagine in un unico file esterno e non ripetuta su tutte le pagine.
Per questo motivo si vengono utilizzati i file CSS che vengono richiamati nelle pagine web con una stringa del tipo:

<link rel="stylesheet" href="stile.css">

Io direi che per oggi possiamo fermarci qui, ti lascio con qualche riga di esempio di codice CSS per farti render conto di quanto sia semplice e intuitivo personalizzare le tue pagine attraverso questo linguaggio.

html {
    background-color: #e6e9e9;
}

body {
    margin: 0 auto;
    padding: 2em 2em 4em;
    max-width: 800px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5em;
    color: #545454;
    background-color: #ffffff;
}

h1 {
    color: #222;
    font-weight: 600;
    line-height: 1.3em;
}

h2 {
    margin-top: 1em;
}

a {
    color: #0083e8;
}

img {
    background: transparent;
    border: 10px solid #CCC;
    border-radius: 4px;
    display: block;
    margin: 0;
}