Accueil 
Pour les nuls.
Le XHTML et le CSS pour les nuls.
Si vous trouvez une article intéressante, vous pouvez participer à sa diffusion en utilisant les boutons de partage situés ci-dessous.
| Résumé de la matière | Description |
|---|---|
| Pour les nuls. | Ne voyez rien de péjoratif dans le titre, tous les concepteurs ont été nuls... |
| Qu'est-ce que le XHTML ? | Une page web est affiché par le navigateur grâce à un « langage »... |
| Qu'est-ce que le CSS ? | Le contenu d'une page XHTML sans CSS, peut tout de même s'afficher... |
| Par où commencer ?. | Trouver le Bloc-notes de Windows... |
Le XHTML et le CSS pour les nuls.
Ne voyez rien de péjoratif dans le titre, tous les concepteurs ont été nuls un jour ou l'autre. J'aurais pu écrire « Le XHTML pour les débutants », mais le titre de la série « Pour les nuls » me paraissait approprié.
Notion de base.
Si vous pouvez « naviguer » sur internet, c'est grâce à un navigateur. Si vous êtes un néophyte, vous utilisez probablement Internet Explorer qui est fourni avec le système d'exploitation Windows, mais il y en a d'autre comme Firefox, Opera, Google Chrome et bien d'autres encore.
Google, Yahoo, Bing, etc. sont des moteurs de recherche. Ils affichent des résultats selon les arguments de recherche souhaités. Ces résultats viennent d'une base de données présente sur des serveurs où sont répertoriés des milliards de pages.
Qu'est-ce que le XHTML et le CSS ?
La page que vous consultez présentement est une « page web ». Une page web est affiché par le navigateur grâce à un « langage » qui lui est propre. Ces ce « langage », le XHTML, que nous étudierons ensemble dans ce tutoriel.
Votre traitement de texte avec lequel vous écrivez une lettre fait tout le travail pour vous. Vous n'avez qu'à taper sur votre clavier pour que le texte s'affiche sur l'écran sous forme de titre, de paragraphe, de liste, etc. Mais lorsque vous créer une page pour Internet, c'est vous qui devez indiquer si ce texte est un titre, un paragraphe, une liste, etc. Ces spécifications se nomment des balises (tags ang.).
Le XHTML est en fait un langage de balises qui doivent être ouvertes puis fermé et entre lesquelles il peut y avoir du texte, des liens, des images et autres médiats. C'est le langage évolué qui permet d'afficher une page sur internet.
Ses balises, représentées ici par deux cônes de rue, démontrent ce que vous avez le droit de faire entre ses balises. Dans notre exemple, vous avez le droit d'insérer un paragraphe.
Changez le p pour h1 par exemple, vous aurez un titre.
Une balise peut contenir d'autres balises comme un ou plusieurs liens pas exemple.
Le CSS
Une page sans CSS
Le contenu d'une page XHTML sans CSS, peut tout de même s'afficher, mais elle le sera avec les paramètres par défaut du navigateur hôte. Fond blanc, police 16 pixels de couleur noire et marge de 5 pixels sont généralement les attributs par défaut des navigateurs. Les images sont éditées selon leurs valeurs d'origines. Les liens sont bleus et soulignés. Bref, le contenu est affiché sans grande mise en forme.
Voyez un exemple de cette page, mais sans CSS en cliquant ici.
Avec le CSS vous pouvez personnaliser la police de caractères, sa taille, sa couleur et d'autres paramètres comme l'arrière-plan, les marges, etc. C'est avec le CSS que vous déterminez l'aspect de votre page XHTML.
Par où commencer ?
Cliqué sur Démarrer\ Tous les programmes\ Accessoires\ et trouver Bloc-notes. Ouvrez-le et écrivez ce qui suit.
Si vous ne savez pas où se trouvent certains caractères, faites Démarrer \Exécuter et écrivez osk puis Entrée . Utiliser les touches Ctrl + Alt pour trouver les symboles typographiques inférieures (<) et supérieur (>).
Enregistrer le tout sur le bureau de votre ordinateur en lui donnant le nom, test.html. Fermez Bloc-notes et voyez le résultat en cliquant sur l'icône test.html (L'icône est déterminé par le navigateur par défaut que vous avez, moi c'est Firefox).
Bravo ! Vous avez réussi votre première page web.
Bien que cette page fonctionne, elle est insuffisante pour un site devant être mis en ligne. Voici le code de base d'une page web, qui va servir de point de départ à chacune de nos pages :
Copier ce qui suit dans Notepad.
1
2
3
4
5
6
7
8
9
10
11
12
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Bienvenue sur mon site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<p>
Votre première vrais page XHTML.
</p>
</body>
</html>
|
Nous allons maintenant intégrer le CSS à cette page. Copier ce qui suit après la ligne 5 :
<link rel="stylesheet" media="screen" type="text/css" href="global.css" />
Ouvrez un nouveau document dans Bloc-notes et copier ce qui suit :
1
2
3
4
5
6
7
8
9
10
11
12
|
html{
background-color:#000000
}
body{
background-color:#ffffff;
min-height:300px;
margin:auto
}
p{
color:#ff0000;
text-align:center
}
|
Enregistrer la page en lui donnent le nom global.css.
- html - La couleur de l'arrière-plan est noir (#000000).
- body - La couleur de l'arrière-plan est blanc (#ffffff).
- La hauteur minimum est de 300 pixels (min-height:300px).
- La page est centré (margin:auto).
- La couleur du texte dans le paragraphe est rouge (color:#ff0000) et centré.
Sans le CSS, la page serait blanche avec le texte en noir, valeur par défaut des navigateurs.
Pour vous amusez, inter-changer les couleurs en remplacent les numéros de backgournd-color. C'est aussi simple que cela.
Vous apprendrez plus loin comment insérer d'autres éléments qui enrichiront votre page, mais je vous rassure, ce ne sera pas plus difficile.
Important : Bien que le Bloc-notes de Windows fasse l'affaire, je vous suggère cependant d'utiliser Notepad++ qui est gratuit, en français et mieux adapté à votre projet. Dans les exercices suivants, je tiendrais pour acquis que vous utilisiez Notepad++.
N'hésitez-pas à m'écrire si vous avez des questions.
Ajouter ce site à vos favoris
