Tutorial: creare un sito da zero – Parte 2

  • 0

Tutorial: creare un sito da zero – Parte 2

Category : Tutorial

Benvenuti a questa seconda lezione per creare un sito da zero. Possiamo farlo con un programma di come Dreamweaver ma ne esistono anche moltissimi gratuiti… magari con meno funzioni ma in realtà in questo corso ci addentreremo nel codice quindi potreste utilizzare addirittura il Blocco Note di Windows…

Io personalmente Utilizzo notePad++ che è una verisone evoluta del Blocco Note di windows e che potete scaricare da qui 

Cominciamo con la struttura base di una pagina web:

 <html>
  <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>TITOLO MAX 70 CARATTERI</title>
   <meta name="description" content="DESCRIZIONE MAX 160 CARATTERI" />
   <meta name="keywords" content="MAX D10 PAROLE CHIAVE SEPARATE DA UNA VIRGOLA" />
  </head>
  <body>
   CONTENUTO DEL SITO
  </body>
</html>

Analizziamo un po’ quanto detto… all’interno dei tag <head></head> (intestazione) ci sono le informazioni utili ai motori di ricerca e le chiamate a file esterni che vedremo dopo. Il sito vero e proprio andrà invece scritto tra i tag <body></body> (corpo del sito).

All’interno dell’intestazione ho inserito, per il momento solo i campi principali: titolo, descrizione e keywords (anche se quest’ultimo ormai non è più tanto utile)… è importante che il numero di caratteri indicati non vengano superati per consentire una visualizzazione ottimale del sito nei risultati dei motori di ricerca.

Ma adesso passiamo alla creazione, all’interno del corpo del sito, della struttura vista nel capitolo precedente.

Nel precedente articolo vi dissi che si poteva creare anche con una tabella… ma ormai questo metodo non è più utilizzato a causa della forte crescita dei dispositivi mobili che accedono al web… di conseguenza lavoreremo con i DIV… un div è un contenitore al quale possiamo dare una misura, un colore, e una posizione… misura e posizione possono variare in funzione della grandezza dello schermo che lo visualizza… creiamo quindi la seguente struttura:layout-sito-internet

L’immagine a destra sarà quella che visualizzeremo su schermi grandi come pc e tablet, l’immagine di sinistra invece la vedremo sui cellulari. Come potete vedere il “layout” del nostro sito, cioè la struttura, è composta da 4 div che possiamo immaginare contenuti in un div più grande che chiameremo contenitore… la struttura sarà quindi la seguente:

<body>
   <div class=”contenitore”>
      <div class=”header”>HEADER</div>
      <div class=”menu”>MENU</div>
      <div class=”contenuto”>CONTENUTO</div>
      <div class=”footer”>FOOTER</div>
   </div>
</body>

Vedi l’esempio

<style>
*{
margin:0; padding:0;
}
.contenitore{
width:80%;
display:block;
  margin: 0 auto;
}
header, .footer{
width:98%;
padding:1%;
display:block;
background-color:#666;
color:#fff;
}
.menu{
width:23%;
  padding:1%;
display:inline-block;
  background-color:#09F;
  color:#fff;
  float:left;
}
.contenuto{
  width:73%;
  padding:1%;
  display:inline-block;
  background-color:#6CF;
color:#333;
}
</style>

So benissimo che non ci avete capito nulla…. ma analizziamo riga per riga: innanzi tutto troviamo alla riga 8 quell’asterisco seguito dalle parentesi graffe che contengono delle proprieta meglio note come regole di stile… vuol dire che le proprietà contenute tra quelle parentesi sono valide per tutti gli elementi del sito. Nello specifico margin=0 indica che il margine di spazio tra un elemento e l’altro è nullo… potremo anche inserire una misura in percentuale (come vedremo più avanti) o in pixel, padding=0 invece indica la spaziatura interna dell’elemento (nel caso del div ad esempio è la distanza tra il suo bordo e il suo contenuto).

Dopo questa piccola premessa definiamo la dimensione del contenitore, io per comodità e per fare in modo che si adatti a tutti gli schermi, l’ho espressa in percentuale, ma se volete potete utilizzare anche una notazione più precisa parlando di pixel… ad esempio dicendo width:960px; o width:60em; (che è un’altra unita di misura corrispondente a 60px) io di solito uso o le percentuali o gli EM perchè restano più o meno uguali su tutti i browser. Quindi width abbiamo capito che indica la larghezza del nostro div, poi dichiariamo che display:block; vuol dire che il nostro div deve essere un blocco unico e che a destra e sinistra non deve esserci nulla… poi dico anche che margin:0 auto; questa proprietà va a sovrascrivere la dichiarazione fatta sui margini precedentemente ma questa volta solo sul div selezionato quindi, e in alto continua ad essere zero a destra e a sinistra sarà automatico…. questo centrerà il nostro div nello schermo!

Andiamo avanti dichiarando le regole di stile per l’header e il footer (intestazione e piedipagina) poichè vogliamo che siano uguali possiamo dichiararle insieme. Vogliamo che occupino tutta la superifice ma anche che l’interno sia distanziato dell1% dal bordo quindi definiremo il padding… NOTA BENE: la dimensione effettiva del div sarà data dalla sue lunghezza più due volte il padding di conseguenza se vogliamo ottenere una lunghezza del 100% con una spaziatura interna del 1% bisogna impostare  width a 98% e padding a 1%: (98+1+1)%=100%!!! Questa volta compaiono due nuove proprietà il colore di sfondobackground-color e il colore del testo color i cui valori possono essere espressi in esadecimale come ho fatto io oppure in rgb tipobackgorund-color:rgb(255,123,98);

Adesso andiamo ad analizzare le proprietà del div menu e contestualmente quello del contenitore… notiamo che il campo display è diventato inline-block e  che compare la proprietà float:left; cosa vuol dire? Il primo ci dice che questi div devono essere posti sulla stessa linea se la somma delle loro lunghezze è inferiore a 100, il secondo indica che devono essere allineati a sinistra. Semplice no?

Di seguito vi lascio un esempio completo di commenti che potrete scaricare e nella prossima lezione trasformeremo questa struttura in una struttura responsiva!!!

<html>
   <head> <!– INTESTAZIONE SITO CON INFORMAZIONI IMPORTANTI –>
      <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
      <title>TITOLO MAX 70 CARATTERI</title> <!– TITOLO CHE COMPARE SUI MOTORI DI RICERCA –>
     <meta name=”description” content=”DESCRIZIONE MAX 160 CARATTERI” /> <!– DESCRIZIONE CHE COMPARE SUI MOTORI DI RICERCA –>
     <meta name=”keywords” content=”MAX D10 PAROLE CHIAVE SEPARATE DA UNA VIRGOLA” />  <!– ELENCO DI PAROLE CON CUI GLI UTENTI POTREBBERO TROVARVI –>
      <style>
       *{
margin:0; padding:0; /* AZZERIAMO MARGINI E SPAZIATURA PER TUTTI GLI ELEMENTI */
}
  .contenitore{
width:80%; /* IMPOSTO LA GRANDEZZA DEL CONTENITORE */
display:block;
margin: 0 auto; /* LO CENTRO ORIZZONTALMENTE NELLO SCHERMO */
}
.header, .footer{
width:98%; /* DEFINISCO LA GRANDEZZA DEL DIV */
padding:1%; /* DEFINISCO LA SPAZIATURA INTERNA DEL DIV */
display:block;
background-color:#666; /* COLORO LO SFONDO DEL DIV */
color:#fff;/* DEFINISCO IL COLORE DEI CARATTERI */
}
.menu{
width:23%;
padding:1%;
display:inline-block; /* IL DIV ADESSO SI ALLINEA A QUELLI SUCCESSIVI SE LA GRANDEZZA LO CONSENTE */
background-color:#09F;
color:#fff;
float:left; /* IL DIV SI ALLINEA A SINISTRA */
}
.contenuto{
width:73%;
padding:1%;
display:inline-block;
background-color:#6CF;
color:#333;
}
  </style>
   </head>
   <body> <!– CORPO DEL SITO –>
        <div class=”contenitore”> <!– POSIZIONO IL CONTENITORE PRINCIPALE –>
            <div class=”header”>HEADER</div> <!– POSIZIONO I CONTENUTI –>
            <div class=”menu”>MENU</div>
            <div class=”contenuto”>CONTENUTO</div>
            <div class=”footer”>FOOTER</div>
        </div>
    </body>
</html>

VEDI L’ESEMPIO COMPLETO


Acquista il mio ebook

Contattaci su Facebook