II. Les langages HTML et CSS

Cours

I. Le HTML

Le HTML est un langage de balises. Elles servent à délimiter les différents types de contenus.

Exemple

Code HTML

<h1>Titre 1</h1>
<p>Voici mon paragraphe.</p>

• h1 et p sont des balises : h1 sert à entrer un titre dit "de niveau 1", et p à entrer un paragraphe.
• <h1> est une balise ouvrante, c'est-à-dire que le titre commence juste après cette balise. </h1> est une balise fermante, c'est-à-dire que le titre se termine juste avant cette balise.
• De la même façon, le contenu du paragraphe commence juste avant le V de Voici et se termine juste après le ., soit entre la balise ouvrante <p> et la balise fermante </p>.

Il existe beaucoup d'autres balises, par exemple :

Balise	Type de contenu
h1, h2, h3, jusqu'à h6	Titre dont l'importance est décroissante (h1 s'affichera en plus grand que h6)
p	Paragraphe
ul et li	Liste et éléments d'une liste
img	Image
a	Lien hypertexte

Exercice : Ecrire un code HTML permettant d'afficher :
- un titre de niveau 2 : "Les langages du Web"
- un paragraphe : "Les principaux langages du Web sont HTML et CSS."
- un 2ème titre de niveau 2 : "Le web interactif"
- un 2ème paragraphe : "Pour rendre la page interactive, il faut ajouter du Javascript."

Code

II. Le CSS

Le CSS est un langage fait pour la mise en page. Il utilise les balises définies dans le code HTML, et des attributs pour changer certaines propriétés d'affichage.

Exemple

Code CSS

h1 {
    color: blue;
    font-family: Verdana;
}

p {
    font-size: 14px;
}

Ce code met tous les titres de niveau 1 en bleu et en police Verdana, et les paragraphes en taille 14px (pixels). Les attributs utilisés sont color, font-family et font-size.

Exercice : Ecrire un code CSS permettant de mettre tous les titres de niveau 2 en rouge et en taille 22px, et les paragraphes en noir et en police Arial.

Code

---

TP1 : Modification de page web

Se connecter à l'ENT, aller dans les applications puis dans Capytale, et entrer le code e94c-2172699

Suivre les consignes pour modifier la page Web. Son code s'affiche dans les parties de code HTML et CSS, et le rendu de la page est visible tout en bas.

TP2 : Création de page web

Se connecter à l'ENT, aller dans les applications puis dans Capytale, et entrer le code aafe-2172803

Suivre les consignes pour créer une page Web en écrivant son code HTML et CSS.