Bjr,
D'abord tu oublies pour un temps DreamWeaver (ce soft est très bien qd on connait déjà HTML) et utilise le BlocNote au départ pour apprendre : ca va te forcer à tapez le code HTML (c'est ce que je fais tout le tps)
Ensuite commence par construire une page statique sans aucun code JavaScript : tu pourrras en ajouter autant que tu veux lorsque ta page s'affichera correctement.
La structure d'une page HTML :
souris.htm :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>- Des créations en tous genres pour mon plaisir et le votre... </title>
</head>
<body>
<p>© unesourisetmoi (site officiel) - Tirages personnalisés - Fonds d'écran - gratuits - Créations de sites <br />
- Téléchargements - Photos - Référencement de sites - Expositions et commande de Posters - (Bonus et plus !).
</p>
</body>
</html>
La même page mais en utilisant une feuille de styles intégrées :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>- Des créations en tous genres pour mon plaisir et le votre... </title>
<style type="text/css">
<!--
body
{
background-color : #000000;
color : #FFFFFF;
}
*.titre
{
color : #FFFFFF;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10pt;
text-align : center;
}
// -->
</style>
</head>
<body>
<p class="titre">© unesourisetmoi (site officiel) - Tirages personnalisés - Fonds d'écran - gratuits - Créations de sites <br />
- Téléchargements - Photos - Référencement de sites - Expositions et commande de Posters - (Bonus et plus !).
</p>
</body>
</html>
Rem : tu noteras que chaque style porte un nom ex "body" ou encore "*.titre" : il s'agit d'un sélecteur. Il indique sur quels types d'éléments HTML s'applique le style.
Ensuite dans la partie qui se trouve entres accolades on définit des propriétés ou formats CSS
Si tu utilises un nom de sélecteur correspondant à une balise HTML ex body, alors le format s'applique directement à la balise de même nom.
Pour spécifier un sélecteur spécifique il faut utiliser l'attribut class dans la balise : ainsi dans la balise <p> ... </p> qui délimite un paragraphe j'ai ajouté <p class="titre"> pour que le paragraphe utilise le sélecteur nommé *.titre : l'étoile signifie que le sélecteur peut s'appliquer à n'importe quel élément HTML
A retenir : en HTML les balises sont imbriquées les unes dans les autres et les éléments récupèrent souvent les propriétés CSS définies dans leurs éléments parents : c'est pourquoi ici il n'est pas nécessaire de préciser "background-color : #000000;" dans le sélecteur *.titre.
En effet le paragraphe hérite du fond noir du fait que la balise <p> est imbriquée dans la balise <body> (En fait pratiquement toutes les balises sont imbriquées dans la balise <body>)
C'est très condensé : les formats offres des possibilités très très vastes...
Pour tout savoir sur les formats :
http://fr.selfhtml.org/css/formats/global.htm
La même page mais avec une feuille de style CSS externe :
le fichier souris.htm :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>- Des créations en tous genres pour mon plaisir et le votre... </title>
<link rel="stylesheet" href="souris.css" type="text/css">
</head>
<body>
<p class="titre">© unesourisetmoi (site officiel) - Tirages personnalisés - Fonds d'écran - gratuits - Créations de sites <br />
- Téléchargements - Photos - Référencement de sites - Expositions et commande de Posters - (Bonus et plus !).
</p>
</body>
</html>
Rem : note comment on indique la feuille de style externe "souris.css" à utiliser grâce à la balise <link>
la feuille de style séparée (qu'il faut mettre en ligne sur ton site)
fichier souris.css :
body
{
background-color : #000000;
color : #FFFFFF;
}
*.titre
{
color : #FFFFFF;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10pt;
text-align : center;
}
Ok ?
A suivre ...
PhP 
bg62
