loader gif

Creare un sito Web – Parte 2

Il tag <p> e le classi CSS

Andremo a inserire degli aforismi testuali racchiusi tra i tag <p> </p>, successivamente andremo a vedere come inserire nella head il foglio di stile .css e come formattare i contenuti per una visione “più piacevole” del sito, tengo a evidenziare il fatto che la grafica è modificabile già sul file html, tuttavia questa parte la salto perchè non conviene più trattare sullo stesso file html la parte grafica, lavorare con i .css da molti più vantaggi, inoltre vi posso trasmettere una competenza maggiore :). Riprendiamo dal body:

 <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>
    
    <p>
    "Quello che mi sorprende degli uomini e' che perdono la salute per fare i soldi 
    e poi perdono i soldi per recuperare la salute. Pensano tanto al futuro
    che dimenticano di vivere il presente in tale maniera che non riescono
    a vivere ne' il presente ne' il futuro. Vivono come se non dovessero 
    morire mai e muoiono come se non avessero mai vissuto."<br/&gt
     - Dalai Lama
    </p>

    <p>
     "La compassione e l'empatia per il piu' piccolo degli animali e' una
     delle piu' nobili virtu' che un uomo possa ricevere in dono."<br/&gt
     - Charles Darwin
    </p>

    <p>
     "E' un grave errore teorizzare prima di avere dati certi. Si finisce per
     distorcere i fatti, per adattarli alle teorie, invece di adattare le
     teorie ai fatti."<br/&gt
     - Sherlock Holmes
    </p>

    <p>
    "Non c'e' nulla di piu' sfuggente dell'ovvio."<br/&gt
     - Sherlock Holmes
    </p>
    
   </div>

   <div class="colonna_destra">
    <h2>AFORISMI VARI</h2>
    
    <p>
    "L'uomo nella sua arroganza si crede un'opera grande, meritevole di una 
    creazione divina. Piu' umile, io credo sia piu' giusto considerarlo discendente
    degli animali."<br/&gt
     - Charles Darwin
    </p>

    <p>
    "Eliminato l'impossibile, cio' che resta, per improbabile che sia, deve 
     essere la verita'."<br/&gt
     - Sherlock Holmes
    </p>

    <p>
    "Il modo migliore per recitare una parte e' quello di viverla."<br/&gt
     - Sherlock Holmes
    </p>

    <p>
    "Il tocco supremo dell'artista, sapere quando fermarsi."<br/&gt
     - Sherlock Holmes
    </p>
    
   </div>

  </div>

  <div class="footer">
   RACCOLTA AFORISMI A CURA DI ALESSANDRO LE MURA 2014
  </div>
 </body>

Ora inseriamo i link (forma breve “index.html”, forma lunga “http://www.aforismiweb.it/index.html”) nei tasti HOME e CONTATTI:

   <div class="menu">
    <ul id="menu">
     <li><a href="index.html" title="Home Aforismi">Home</a></li>
     <li><a href="contatti.html" title="Contatti Aforismi">Contatti</a></li>
    </ul>
   </div>

Come inserire il foglio di stile nella head?

Andiamo nella cartella www.aforismiweb.it precedentemente creata, creiamo una cartella col nome “css”, apriamo HTML-Kit, new file, cancelliamo il contenuto, Save As o salva con nome “css_principale” e estensione Style Sheets (.css), clicchiamo salva. Ecco i risultati:

visualizza cartella

Ecco come deve apparire il contenuto della cartella www.aforismiweb.it nella prima immagine, e come deve apparire il contenuto della cartella css nella seconda immagine. E’ essenziale che le cose siano messe in questa maniera o i link non funzioneranno; diamo un’occhiata ai risultati finora ottenuti in questo link SITO WEB SENZA CSS e poi andiamo a modificare il file css_principale.css come segue:

body { /* Body = contenitore <body> dell'html, le modifiche tra parentesi graffe */
background-color: #F5F6CE; /* COLORE SFONDO */
color: #610B21; /* COLORE DEL TESTO */
}

div.contenitore { /* Classe contenitore (file html = <div class="contenitore"> */
width: 1000px; /* Dimensione del contenitore, larghezza 1000 pixel */
margin-left: auto; /* Margine esterno sinistro automatico (centrare contenuto) */
margin-right: auto; /* Margine esterno destro automatico (centrare contenuto) */
padding: 20px; /* Spazio tra i bordi del contenitore e il suo contenuto */
background-color: #F2F2F2;
border: 2px double #610B21; /* Spessore bordo, tipo bordo, colore bordo */
}

div.menu { /* Formattazione contenitore menu (html = <div class="menu">) */
width: 1000px;
height: 40px; /* Altezza contenitore menu in pixel */
}

div.menu ul { /* Modifichiamo la lista ul contenuta dentro menu (<ul>) */
font-family: Verdana, sans-serif; /* Il font, lo stile di scrittura */
font-size: 12px; /* Le dimensioni della scrittura in pixel */
margin: 0;
padding: 0;
list-style: none; /* Stile lista senza numeri o trattini */
}
  
div.menu li { /* Gli elementi dentro la lista ul si chiamano li (tag <li>) */
background-color: #FF831C;
border-bottom: 5px solid #54BAE2; /* Bordo inferiore */
display: block;
width: 150px;
height: 30px;
margin: 2px;
float: left; /* Elementi su singola riga, da sinistra a destra orizzontale */
}
  
div.menu a {/*Definiamo lo stile dei link contenuti dentro menu (home e contatti)*/
color: #ffffff;
display: block;
font-weight: bold; /* Testo in grassetto */
text-decoration: none; /* Testo senza sottolineature o altri effetti */
width: 150px;
height: 30px;
text-align: center; /* Allineamento testo */
}
  
div.menu li a:hover { /* comportamento del link quando lo indichiamo col mouse */
background-color: #54BAE2;
border-bottom: 5px solid #FF831C;
}

Non credo ci sia altro da aggiungere perche’ il codice l’ho commentato riga dopo riga, ogni classe che definiamo e’ riferita alle classi del file index.html, per questo e’ importante che il nome delle classi sia identico. Passiamo al file index.html e colleghiamo il foglio di stile nella head:

 <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"/>
  <link href="css/css_principale.css" rel="stylesheet" type="text/css"/>
 </head>

Possiamo adesso caricare il contenuto della cartella www.aforismiweb.it nella directory principale del dominio altervista a cui vi siete registrati, avevo spiegato in questo articolo come fare: articolo di riferimento. Se avete eseguito le istruzioni in maniera corretta il risultato dovrebbe essere questo.
La guida HTML base finisce qui, nella guida intermedia si parlerà dei form e di alcuni approfondimenti; per quanto riguarda il creare un sito Web questo articolo non finisce qui, continua nella parte 3 che troverete nella Guida CSS.

Vai all’articolo precedente | Vai all’indice

 

Lascia un commento