Dans ce TP, nous allons (re)voir les bases des outils qui permettent de créer des sites web. On peut lister les outils principaux:
Le langage HTML n'est pas à proprement parler un langage de programmation, mais un langage de description. Il sert à décrire le contenu d'une page à l'aide de balises qui indiquent le début et la fin de la zone concernée par la balise.
Exemple: la balise strong permet de renforcer du texte (généralement en le mettant en gras). Le code HTML suivant renforce le texte "tout":
Bonjour <strong>tout</strong> le monde.
Ce qui donne en général l'apparence suivante: Bonjour tout le monde.
Le code HTML d'une page est censé contenir la structure et le contenu de la page, pas les informations relatives à son style, son apparence, qui seront plutôt dans un fichier CSS.
Tout fichier HTML doit contenir au moins les éléments suivants.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
...
<!-- Le reste du contenu -->
...
</body>
</html>
La première ligne indique le type du document (qui est ici "html").
Toute la page web est contenue à l'intérieur de la balise html, c'est à dire entre <html> et </html>.
Une page web est constitué de deux parties:
head.body.Les en-têtes décrivent le document: son titre, les fichiers de style qu'il faut y intégrer, etc. Nous déraillerons plus tard.
Le corps contient le contenu du document. C'est généralement cette partie du code que vous allez modifier.
À vous
votre_prenom.html dans un éditeur de texte (comme Notepad++).Que s'affiche-t-il pour le corps du document?
Où pouvez-vous retrouver le titre du document, qui est indiqué dans la balise head?
Un document texte bien construit est découpé en parties et sous-parties, qui sont identifiées par des titres. En anglais, un titre de partie se dit heading, et il existe plusieurs niveaux de titres qui sont numérotés et commencent tous par "h" pour heading:
À vous
Nous allons écrire un curriculum vitae pour présenter la vie de quelqu'un. Vous pouvez faire votre propre CV, celui d'un personnage historique, ou même d'un personnage fictif.
Dans le fichier HTML que vous avez créé, ajoutez un titre de niveau 1 (h1) qui contient
Curriculum Vitae de ....
Ensuite, créez les titres de niveau 2 dont vous aurez besoin pour le CV, par exemple:
Vous pouvez ajouter des sous-sous-parties (titres de niveau 3, 4...) si vous en avez besoin, par exemple si vous voulez détailler:
Vous aurez un code comme ceci
<body>
<h1>Curriculum Vitae de Batman</h1>
<h2>Équipement de super-héros</h2>
<h3>Bat-cave</h3>
<h3>Bat-mobile</h3>
<h3>Bat-tenue</h3>
<h2>Loisirs</h2>
</body>
Attention: c'est un exemple, je ne vous demande pas de faire le CV de Batman, je vous demande de choisir un autre personnage.
Quand vous avez ajouté les titres de parties et sous-parties, rechargez la page dans votre navigateur pour voir le changement.
Pour définir un paragraphe de texte, utilisez la balise p. À l'intérieur de la balise
p, vous pouvez taper votre texte normalement, avec quelques contraintes quand même:
br, qui s'utilise
sans balise fermante, c'est à dire que c'est juste <br>, pas <br></br>.À vous
Dans les sous-parties définies précédemment, ajoutez quelques paragraphes de texte pour détailler le CV de la personne choisie.
Vérifiez bien que ça s'affiche comme vous le voulez dans le navigateur
Nous allons ajouter une image au CV.
En HTML, on utilise la balise img pour insérer une image. En réalité, on n'insère pas vraiment l'image dans le document, on met un lien vers l'image. Pour l'instant, on supposera que l'image est présente dans le même dossier que le fichier HTML.
Si l'image s'appelle "toto.png", alors le code de la balise sera:
<img src="toto.png">
C'est l'occasion d'introduire la notion d'attribut. Ici, "src" est un attribut de la balise img, et sa valeur représente l'emplacement de l'image, sa source (src = source).
Les balises HTML peuvent comporter de nombreux attributs, que nous verrons progressivement. Par exemple, la balise img pourrait aussi avoir ces attributs:
width: la largeur que l'on veut pour l'image (en pixels, en pourcentage...)height: la hauteur que l'on veut pour l'imagealt: la description textuelle de l'image, pour les aveugles ou si l'image ne se charge pas.À vous
Toujours dans le même fichier
Dans un CV, on a souvent envie de faire des listes. En HTML, on peut faire des listes à puces ou des listes numérotées.
Voici une liste à puces, avec la balise <ul> (pour unordered list). Chaque élément de la liste est défini par une balise <li> (pour list item):
Le code correspondant est donc:
<ul>
<li>un item</li>
<li>un autre item</li>
</ul>
Pour faire une liste numérotée, à la place de <ul> on utilise <ol> (pour ordered list), et ça donne:
On peut aussi faire des listes dans des listes:
À vous
Un autre élément important: les tables, ou tableaux. Un tableau est composé de rangées (rows) et de colonnes. En général, la première rangée du tableau indique les titres des colonnes:
| Nom | Prénom | Moyenne | Appréciation |
|---|---|---|---|
| Dugenou | Jean-Kévin | 8.5 | Peut mieux faire |
| Flageolet | Hortense | 14 | Bon travail, continue |
Pour créer une table, on utilise la balise... <table>. Chaque rangée est
définie par une balise <tr> (table row), et chaque colonne dans la rangée
par une balise <td>. Mais si on veut indiquer que la case est un titre de colonne, à la place de <td> on utilise <th> (table header).
Ainsi, le code de la table ci-dessus est:
<table>
<tr>
<th>Nom</th>
<th>Prénom</th>
<th>Moyenne</th>
<th>Appréciation</th>
</tr>
<tr>
<td>Dugenou</td>
<td>Jean-Kévin</td>
<td>8.5</td>
<td>Peut mieux faire</td>
</tr>
</table>
À vous
Les CSS (Cascading Style Sheets) sont une manière de décrire et de personnaliser l'apparence de votre site dans un fichier séparé. C'est un sujet complexe, nous n'allons que le survoler. Pour en apprendre plus, vous pouvez aller à cette adresse.
Les CSS permettent de changer l'apparence donnée aux balises que vous avez utilisées, mais elles permettent aussi de faire des sites complexes, avec des éléments positionnés comme vous voulez, et de faire des animations.
Au début de votre fichier HTML, dans la partie head vous devez avoir cette ligne:
<link rel="stylesheet" href="style.css">Ça signifie que vos CSS sont écrites dans un fichier "style.css" placé au même endroit que votre fichier HTML. C'est ce fichier "style.css" que vous allez créer et modifier.
Pour commencer, nous allons modifier l'apparence des balises que nous avons utilisées. Pour modifier une balise, on doit écrire ceci dans le fichier CSS:
balise {
propriété1: valeur;
propriété2: valeur;
}
Par exemple, modifions la couleur et la taille du texte pour les titres:
h1 {
color: red;
font-size: 42pt;
}
h2 {
color: green;
font-size: 60pt;
}
Essayez sur votre fichier CSS, et rechargez le fichier HTML dans le navigateur. Le résultat ne devrait pas être très beau.
Voici quelques propriétés CSS que vous pouvez essayer de modifier:
| Propriété | Effet | Valeurs possibles |
|---|---|---|
| color | Change la couleur du texte | red, blue, green, black, #ff25ee, #ff1 |
| background-color | Change la couleur du fond | pareil que color |
| font-size | Change la taille du texte | 12px, 12pt, 1.5em |
| font-family | Change la police de caractère | Arial, Verdana, "Times New Roman", sans-serif, serif |
| font-weight | Change le "gras" du texte | normal, bold |
| text-align | Change l'alignement du texte | left, center, right |
| margin-top | Change la taille de la marge au dessus | 10px, 10pt, 1.2em |
| margin-top | Change la taille de la marge au dessus | 10px, 10pt, 1.2em |
| margin-bottom | Change la taille de la marge en dessous | pareil |
| margin-left | Change la taille de la marge à gauche | pareil |
Au sujet des unités
Vous avez vu que quand on parle de taille (taille de la police, taille de la marge...), on peut utiliser plusieurs unités: px, pt, em, et encore d'autres. Qu'est-ce que ça signifie?
Que doit-on utiliser? On pourrait se dire que donner les unités en pixels permet d'être plus précis. Cependant, aujourd'hui, les gens vont sur le Web avec plein d'outils différents: téléphone, ordinateur, tablette... Tous ces objets ont des écrans de tailles très différentes. Si on mesure tout en pixels, ça ne va pas bien s'afficher sur tous les appareils. On essaye autant que possible d'utiliser des tailles relatives.
À vous
Le résultat devrait ressembler à ça (avec votre texte):
Parfois, on n'a pas envie de modifier le style de toutes les balises, mais juste certains d'entre-elles. Peut-être que je veux que mes paragraphes soient sur fond blanc, mais que les paragraphes très importants soient très visibles.
Pour ça, on a deux méthodes. On peut définir une classe ou nommer un élément (lui donner un identifiant).
Par exemple, je peux définir la classe "bons_eleves". J'ai potentiellement (j'espère) plusieurs bons élèves, et je veux que chacun d'eux s'affiche sur fond doré avec des étoiles qui brillent.
Ou alors je peux définir l'identifiant "meilleur_eleve". Il n'y en a qu'un seul.
Pour donner un identifiant à une balise, on lui donne l'attribut id="nom_de_l_identifiant".
Par exemple, si j'ai plein de balises p (paragraphe), mais qu'il y en a une qui est très importante, je peux écrire
<p id="tres_important">
blablabla
</p>
Il ne peut y en avoir qu'un seul avec ce nom, cet identifiant.
Et un élément ne peut avoir qu'un seul identifiant.
En CSS, je peux changer le style de l'élément qui porte un identifiant:
#tres_important {
background-color: yellow;
color: red;
font-size: 1.2em;
}
Les classes fonctionnent comme les identifiants, mais il peut y avoir plusieurs balises avec la même classe. Au lieu de id, on utilise class, et dans le code CSS au lieu du # on utilise un point. De plus, un élément peut appartenir à plusieurs classes.
<p class="tres_important">
blablabla
</p>
Dans le CSS:
.tres_important {
background-color: yellow;
color: red;
font-size: 1.2em;
}
Pourquoi avoir classes ET identifiants?
Tant que nous faisons des pages très simples, il est difficile de comprendre l'intérêt de toutes ces choses. Ça se clarifiera (peut-être) lors de projets plus conséquents.
L'intérêt des classes et des identifiants, c'est qu'on peut combiner les deux. Par exemple, on peut dire que:
Et ensuite on peut avoir un élément qui combine classes et éléments, par exemple:
<p class="fond_noir gros_texte" id="toto">
blablabla
</p>
Aura du texte TRÈS GRAND, blanc sur fond noir, souligné en rouge, aux coordonnées (10, 12).
Je n'ai pas compris
Faisons une analogie avec les chiens. La classe, c'est la race du chien, et l'identifiant, c'est son nom.
À vous
Dans votre fichier HTML, ajoutez les classe "important" aux éléments qui sont importants (d'après vous)
Dans votre fichier CSS, changez le style de la classe "important" pour que le texte s'affiche en un peu plus grand, et en gras.
Dans votre fichier HTML, donnez l'identifiant "partie1" au premier élément h2
Dans votre fichier CSS, affichez en rouge l'élément nommé "partie1"
À vous
Enregistrez vos fichiers (le HTML, le CSS et l'image) dans un fichier zip nommé "votre_nom.zip", et rendez-le sur Pronote.
Vous avez fini en avance? Appuyez sur F12 (sur firefox) et explorez le code HTML de cette page dans les outils de développement de votre navigateur. Dans l'outil appelé Inspecteur, essayez de comprendre comment la page est structurée, et essayez d'en modifier des parties.