Capitolo 4 :primo esempio html 5

Introduzione

Dopo aver acquisito le nozioni basilari del linguaggio HTML, prepariamoci per un primo esercizio.
Prima di iniziare decidiamo [democraticamente] di utilizzare la struttura seguente:

Inseriamo la colonna sinistra e quella centrale dentro un grande blocco (rettangolo rosso), come in questa figura:

I blocchi (block level)

Armiamoci e partite!
Traduciamo la struttura a due colonne della figura precedente nei relativi elementi HTML.
Sono dunque 5 rettangoli;rappresentiamoli ognuno con un tag div ed un identificativo a nostro piacimento, cioè anziché "testata" possiamo scrivere una parola qualunque, meglio se mnemonica, ecco perché io la chiamo 'testata', ma potevo scrivere anche 'intestazione' o 'uno' oppure 'pippo' ; l'importante è che sia un nome univoco in tutto il documento ( servirà ad individuare il blocco nelle regole css per la presentazione e grafica), come segue:


<div id="testata"> testo che volete (es. Cecchina multimediale) </div>
<div id="contenitore">
<div id="col_sx"> testo che volete nella colonna sinistra </div>
<div id="col_cx"> testo che volete nella colonna centrale</div>
<div id="piepagina">testo piede pagina </div>
</div>

Il testo che inserite in questi vari elementi ovviamente deve essere racchiuso con il tag p, mentre per un titolo bisogna usare uno dei tag da h1 ad h6.
Vedremo un esempio più in dettaglio nella prossima pagina.

Documento completo

Questo sarà il codice completo del documento HTML.
Copiatelo integralmente nel vostro editor, cambiate solo il mio testo con il vostro e salvate in formato html e fate sapere come è andata.

Buon Lavoro!!!

<!DOCTYPE html >
<html lang="it">
<head>
<title>Corso HTML: lezione4_01</title>
<meta charset="utf-8" >
<style>
</style>
</head>
<body>
<div id="testata"> <h3>limagolf.it</h3> </div>
<div id="contenitore">
<div id="col_sx">
<h5>Menù navigazione</h5>
<p>Home, corsista 1, corsista 2, corsista 3, corsista 4, corsista 5, corsista 6, corsista 7, corsista 8, contatti </p>
</div>
<div id="col_cx">
<h5>Contenuto principale</h5>
<p> Questa è la parte principale della pagina. Attenzione a quello che mettete qui. Ci va ovviamente la notizia principale; per esempio la novità del sito o l'annuncio di un evento prossimo, o il sunto di una attività che magari proseguirà nei dettagli in un'altra pagina del sito, eccetera. </p>
</div>
</div>
<div id="piepagina"> <h4>Giancarlo, copyleft - ultimo aggiornamento: 8/11/2018</h4> </div>
</body>
</html>