In un documento html è importante inoltre specificare la codifica dei caratteri.
Questo serve al browser per interpretare correttamente tutti i caratteri utilizzati sulla pagina, in particolare le lettere accentate che a volte sono visualizzate con simboli strani proprio per motivi relativi a questo.
Puoi farlo aggiungendo un meta-tag del genere: <meta charset="utf-8">
Anche sul codice di Prill puoi notare una dichiarazione analoga
Chiaramente questa codifica deve corrispondere alla codifica caratteri del documento stesso. Dovrebbe essere possibile impostarla tra le opzioni dell'editor prima di salvare il documento.
Per completezza, riporto qui un modello base da cui si può partire per la creazione di un documento HTML5:
codice:
<!DOCTYPE HTML>
<html>
<head>
<title>Esempio</title>
<meta charset="utf-8">
<style type="text/css">
/* Regole CSS */
</style>
</head>
<body>
Lorem ipsum dolor sit amet...
</body>
</html>
Altro discorso sono le tabelle utilizzate in modo inappropriato per la creazione del layout.
Pratica che "fortunatamente" è quasi decaduta (a parte pochi che continuano ad abusarne).
Chiaramente non sto qui a farti la predica su questo argomento (cerca online se sei interessato).
Prendi per buono che le tabelle sono adatte a mostrare dati in modo tabellare e non andrebbero usate come elementi strutturali del layout di pagina. Per questo sarebbe meglio utilizzare degli elementi <div> (o altri elementi specifici, disponibili con HTML5) e dare al CSS il compito di impostarli sulla pagina e formattarli graficamente.
Un'altra buona regola è quella di separare nettamente i contenuti dall'aspetto puramente grafico.
Tutti gli elementi (come <font>, che è comunque deprecato) e attributi in linea (come bgcolor, align, lo stesso style, ecc.) dovrebbero essere rimpiazzati con una più pulita formattazione CSS. In questo caso potremmo riportare tutte le necessarie regole all'interno del tag <style> dichiarato nell'head.
Ancora. Per definire meglio le parti del documento si possono utilizzare opportuni elementi definiti "semantici". Ad esempio per il titolo principale della pagina puoi usare <h1>.
Puoi eventualmente formattare questi elementi tramite CSS.
Per concludere ti posto un esempio da cui puoi prendere spunto, nel quale ho riportato il tuo codice (rivisitato) all'interno del modello da me proposto. In questo caso ho aggiunto una parte di script jQuery/Ajax per gestire il caricamento dei contenuti in modo dinamico senza il caricamento delle intere pagine. Questo sistema ti permette di avere un unico file in cui c'è la struttura di base, e altri file (tanti quanti sono le pagine del sito) in cui saranno presenti solo i contenuti. Rispetto ad un sistema "statico" ti evita di riportare l'intera struttura su ogni singolo file/pagina. Ovviamente si hanno dei vantaggi notevoli nel caso di aggiornamenti o modifiche alla struttura, per cui capisci bene che non avrai bisogno di aggiornare la struttura sulla serie dei singoli file.
Per rendere funzionante questo esempio, puoi creare una cartella e inserire:
- un file index.html (quello che conterrà la struttura)
- il file jquery.js che conterrà la libreria jQuery (puoi scaricarlo da qui)
- tanti file dei contenuti quante sono le pagine del sito
Su index.html dovrai inserire questo codice:
codice HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Titolo tesina</title>
<meta charset="utf-8">
<script src="./jquery.js"></script>
<script type="text/javascript">
$(function(){
$(".navigation a").click(function(event){ // al click su qualsiasi link dell'elemento navigation
event.preventDefault(); // prevengo l'apertura del file linkato
$(".navigation a.active").removeClass("active"); // rimuovo la classe active dal link precedentemente selezionato
$(this).addClass("active"); // applico la classe active al nuovo link selezionato
$("#titolo-pagina").html($(this).attr("title")); // riporto il title del link come titolo dell'area contenuti
$("#contenuto-pagina").load($(this).attr("href"), // tramite AJAX carico i contenuti sull'area centrale
function( response, status, xhr ){ // callback del caricamento
if ( status == "error" ){ // se ci sono errori di caricamento
$(this).html("<p class='error'>Errore nel caricamento della pagina.</p>"); // visualizzo l'errore sull'area centrale
};
});
});
$(".navigation a.active").click(); // inizialmente "apro" il link che ha classe active
});
</script>
<style type="text/css">
body {
background: #dc9;
padding: 0;
margin: 0;
font-family: sans-serif;
}
.container {
margin: 10px;
padding: 10px;
background: #ffe;
}
.header {
padding: 15px 0;
background: #fe9;
text-align: center;
}
.header h1 {
margin: 0;
color: #006;
font-size: 30pt;
}
.header .subtitle {
color: #653;
font-size: 14pt;
}
.navigation {
width: 200px;
background: #fff5c5;
float: left;
}
.navigation h2 {
color: #900;
font-size: 16pt;
margin: 5px;
padding: 0 0 0 20px;
border:solid #dc9;
border-width: 1px 0;
}
.navigation ul {
color: #930;
}
.navigation a {
color: #930;
font-size: 12pt;
text-decoration: none;
}
.navigation a:hover,.navigation a.active {
color: red;
text-decoration: underline;
}
.main {
margin-left: 200px;
padding: 10px;
}
.main h2 {
color: #a50;
font-size: 18pt;
margin: 5px 0 8px;
padding: 0 0 4px 20px;
border-bottom: 1px solid #dc9;
}
.footer {
clear: both;
color: #653;
font-style: italic;
text-align: center;
padding-top: 10px;
border-top: 2px solid #dc9;
}
.error {
color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Titolo tesina</h1>
<span class="subtitle">Sottotitolo</span>
</div>
<div class="navigation">
<ul>
<li><a href="introduzione.html" title="Introduzione" class="active">HOME PAGE</a></li>
</ul>
<h2>Materie:</h2>
<ul id="materie">
<li><a href="storia.html" title="Storia">STORIA</a></li>
<li><a href="inglese.html" title="Inglese">INGLESE</a></li>
<li><a href="informatica.html" title="Informatica">INFORMATICA</a></li>
<li><a href="tecnica.html" title="Tecnica">TECNICA</a></li>
<li><a href="ragioneria.html" title="Ragioneria">RAGIONERIA</a></li>
<li><a href="matematica.html" title="Matematica">MATEMATICA</a></li>
<li><a href="italiano.html" title="Italiano">ITALIANO</a></li>
<li><a href="diritto.html" title="Diritto">DIRITTO</a></li>
<li><a href="finanze.html" title="Finanze">FINANZE</a></li>
</ul>
</div>
<div class="main">
<h2 id="titolo-pagina"> </h2>
<div id="contenuto-pagina">
</div>
</div>
<div class="footer">
Percorso multidisciplinare - ITC "Pinco Pallino"
<br>Mario Rossi - Classe 5 Z - Anno 2014
</div>
</div>
</body>
</html>
Sui file dei contenuti dovrai inserire normale testo con formattazione html5.
Ad esempio:
codice HTML:
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<img src="qualcheimmagine.jpg" alt="qualche immagine">
</p>
Ovviamente i miei vogliono essere solo dei consigli. Nessuno ti vieta di fare come meglio preferisci.
Rispondi quotando
), anche se, ripeto, se avessi avuto più tempo per lavorarci su e per avere più dimestichezza con i codici sicuramente avrei usato il tuo, KillerWorm.
