Link utili
XHTML, HTML, CSS, tutorial, lista tag, spiegazioni attributi e altro (in inglese).
Elenco colori web (in inglese).
Doctypes
HTML 4.01 (a scelta Transitional può essere Strict o Frameset)
- Codice: Seleziona tutto
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
XHTML 1.0
- Codice: Seleziona tutto
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Controllo conformità del codice
(X)HTML
CSS (qualsiasi versione)
Uno sguardo al futuro (XHTML 2.0)
Poche parole per dare consigli concreti su XHTML 2.0 (ancora in sviluppo).
XHTML 2.0 probabilmente non avrà retrocompatibilità per tutti i tag e attributi quindi è bene scegliere fin da ora che tipo di tag usare e come scrivere il codice.
Alcuni esempi:
il tab <b> (bold) non è previsto da XHTML 2.0 bensì è solo supportato <strong>, già presente in XHTML 1.0 e HTML 4.0x, si consiglia vivamente di utilizzare la seconda soluzione.
Parimenti <i> è sostituito da <em> mentre <u> è abolito e non ha rimpiazzi quindi sarà necessario usare CSS per lo scopo
- Codice: Seleziona tutto
<span style="text-decoration: underline;">testo</span>
XHTML 2.0 come XHTML 1.0 prevede solo tag ed attributi in lowercase, mentre il valore dell'attributo non rientra in questa restrizione.
Il tag <a> (ancora o link) non è più strettamente necessario per collegamenti ipertestuali poiché tutti i tag in XHTML 2.0 supporteranno l'attributo href per detti collegamenti, il tag <a> tuttavia viene inserito nella sintassi per retrocompatibilità.
Come inserire un foglio stile in una pagina
Ecco tre comode alternative.
1. tag <link> da posizionare nel tag <head>
- Codice: Seleziona tutto
<link rel="stylesheet" type="text/css" href=".stilecss" />
2. tag <style> da posizionare nell'head
- Codice: Seleziona tutto
<style type="text/css">
il tuo foglio stile qui.
</style>
3. tag <style> con richiamo esterno.
- Codice: Seleziona tutto
<style type="text/css">
@import "stile.css";
</style>
CSS
CSS prevede tre versioni: 1.0, 2.x e 3.0
Di queste si può affermare che solo CSS 1 è universalmente supportato da tutti i browser, per questo motivo è conveniente limitarsi nell'uso di elementi CSS 2.0 (come z-index) o di CSS 3 (come text-shadow, per altro esclusivamente supportato da Safari).
Colori in CSS
Ci sono quattro modi di dichiarare un colore in CSS.
- nome del colore color: black; sarà quindi nero.
- rgb in decimale: color: rgb(0,0,255); sarà quindi blu.
- rgb in percentuale: color: rgb(100%, 0%, 0%); sarà quindi rosso.
- rgb in esadecimale: color: #00ff00; sarà quindi verde.
Template tipo per XHTML 1.0 Strict
- Codice: Seleziona tutto
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html dir="ltr">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="language" content="en-us" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href=".css" />
</head>
<body>
</body>
</html>
PHP e inclusione file
Questo è un trucco che uso nei miei siti per includere le varie pagine nell'index mantenendo così i vari tag meta ed il foglio stile. Nei commenti è spiegato tutto quello di cui c'è bisogno. Ovviamente necessita un host con un motore php.
- Codice: Seleziona tutto
<?php $page = $_GET['page']; //shortcut per non dover usare $_GET['page'] in ogni link ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html dir="ltr">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!-- iso-8859-1 -->
<meta name="language" content="en-us" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href=".css" />
</head>
<body>
<a href="index.php?page=prima">La mia prima pagina</a> <!-- link tipo, richiama prima.php -->
<?php //semplice funzione per includere la pagina passata dalla variabile.
//Qualora non sia definita richiama home.php che sarà la vostra pagina principale
if(!isset($page)){include "home.php";}else{include "$page.php";} ?>
</body>
</html>
Fatto questo le varie pagine conterranno solo il codice da immettere nel tag <body>.