DEVELOPPEMENT WEB
INITIATION AU HTML/CSS

Introduction

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 :

Expérimenter

Page en HTML

<!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>

Analyse du programme

Elément de programmeDescription
<!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

Mise en forme en CSS

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>

Analyse du programme

Elément de programmeDescription
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

Liens hypertexte

Les liens se définissent en HTML avec les balises <a href="...">...</a>. Créer, dans le même dossier, les pages :

page1.html

<!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>

page2.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.

Programmer

Page en HTML

Insérer une liste

Une liste s'obtient avec les balises ouvrantes et fermante :

<ul>
  <li>...
  <li>...
</ul>

Créer la page index.html produisant l'affichage :

Ajouter une image

<img src="figure.jpg"> 

Mise en forme en CSS

Centrer l'image

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 :

Animations au passage de la souris

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 :

Transitions progressives

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; }

Liens hypertexte

Créer trois pages produisant les affichages ci-dessous :

index.html

page1.html

page2.html

Pour aller plus loin

Images qui se superposent

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>

Exemples d'images

Feuille de style dans un fichier externe

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>
...