Au début des années 1990 naissait le HTML, principal langage pour le Web. Dix ans plus tard, le CSS devenait opérationnel. Il permet de séparer le document en deux parties :
Le code en HTML est basé sur des balises, dont la plupart fonctionnent par paires. Le code en CSS peut se placer en divers endroits de la page HTML :
style.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <h1>Définitions</h1> <p>L'informatique est le domaine d'activité scientifique, technique et industriel concernant le traitement de l'information par ordinateur.</p> <p>L'ordinateur est une machine qui effectue des calculs sur des données numériques en suivant les instructions d'un programme.</p> </body> </html>
| Elément de programme | Description |
|---|---|
| <!DOCTYPE html> | Prologue indiquant la version du HTML, ici la version 5. |
| <head> ... </head> | En-tête, contenant des informations qui ne s'affichent pas dans la page |
| <meta charset="utf-8"> | Encodage utilisé pour la sauvegarde du fichier |
| <body> ... </body> | Corps, contenant tout ce qui s'affiche dans la page |
| <h1>...</h1> | Définit un titre |
| <p>...</p> | Définit un paragraphe |
Le code en CSS, inclus au sein du code en HTML, sert à la présentation en définissant deux sortes de propriétés :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
margin: 30px;
background-color: #aaccbb;
}
h1 {
text-align: center;
font-style: italic;
}
p { color: #227711; }
</style>
</head>
<body>
<h1>Définitions</h1>
<p>L'informatique est ...</p>
<p>Un ordinateur est ...</p>
</body>
</html>
| Elément de programme | Description |
|---|---|
| background-color: #aaccbb; | Définit la couleur de l'arrière-plan |
| margin: 30px; | Définit une marge en pixels |
| text-align: center; | Centre le texte dans la page |
| color: #227711; | Définit la couleur du texte |
Les liens se définissent en HTML avec les balises <a href="...">...</a>. Créer, dans le même dossier, les pages :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <h1>C'est la page 1!</h1> <a href="page2.html">Lien vers la page 2</a> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <h1>C'est la page 2!!</h1> <a href="page1.html">Lien vers la page 1</a> </body> </html>
Tester, avec un navigateur, le passage d'une page à l'autre.
Une liste s'obtient avec les balises ouvrantes et fermante :
<ul> <li>... <li>... </ul>
Créer la page index.html produisant l'affichage :
figure.jpg(par exemple).
<img src="figure.jpg">
Une solution consiste à placer l'image dans un conteneur générique de type bloc (<div> ... </div>) et à centrer les éléments qu'il contient.
<style>
...
div { text-align: center; }
</style>
...
<div><img src="figure.jpg"></div>
...
La page index.html doit ainsi afficher :
Ajouter les lignes de codes ci-dessous puis tester.
h1:hover { color: #dd2030; }
li:hover { font-size: 1.5em; }
img:hover { transform: rotate(30deg) scale(0.6); }
Terminologie :
Lorsqu'elles ne sont pas définies, les transitions sont instantanées. Les lignes suivantes les rendent progressives.
h1 {
text-align: center;
font-style: italic;
transition: 1.5s;
}
li { transition: 0.5s; }
img { transition: 1s; }
Pour des transitions de durées identiques, écrire plus simplement :
h1, li, img { transition: 1s; }
Créer trois pages produisant les affichages ci-dessous :
Une image peut se placer au sein de la page ou en image de fond. Pour changer d'image au passage de la souris, une solution consiste à placer une image par dessus une image de fond.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p { background: no-repeat url(image2.jpg); }
img { transition: 2s; }
img:hover { opacity: 0; }
</style>
</head>
<body>
<p><img src="image1.jpg"></p>
</body>
</html>
Créer une feuille de style unique, dans un fichier à part, pour les trois pages index.html, page1.html et page2.html. Nommée par exemple style.css, on écrit :
... </head> ... <link rel="stylesheet" href="style.css"> </head> ...