cours1 min de lecture

Documentation HTML et CSS

Sept balises HTML et sept propriétés CSS, chacune avec un exemple modifiable et son rendu.

programme

Chaque entrée commence par un exemple. Le code se modifie : le rendu suit la frappe, ce qui permet d'essayer une autre valeur avant de l'écrire dans sa propre page. Les exemples portent sur d'autres pages que celle de l'activité : il faut les adapter.

HTML	CSS
Titre `<h1>` `<h2>`	Couleur du texte `color`
Paragraphe `<p>`	Couleur de fond `background-color`
Liste à puces `<ul>` `<li>`	Taille du texte `font-size`
Liste numérotée `<ol>` `<li>`	Italique `font-style`
Mise en valeur `<strong>` `<em>`	Alignement du texte `text-align`
Citation `<blockquote>`	Bordure `border`
Image `<img>`	Coins arrondis `border-radius`

HTML

Titre : `<h1>`, `<h2>`

exemple · modifiable

index.html

<h1>Le phare</h1>
<h2>Des nouvelles</h2>
<p>Ouvert le dimanche.</p>

rendu

À quoi ça sert. Un titre de page (<h1>, un seul par page) ou un sous-titre (<h2>).

Syntaxe. <h2>texte du sous-titre</h2>

Paragraphe : `<p>`

exemple · modifiable

index.html

<p>Ouvert le dimanche.</p>
<p>La visite dure une heure.</p>

rendu

À quoi ça sert. Un bloc de texte. Deux paragraphes sont séparés par un espace.

Syntaxe. <p>texte</p>

Liste à puces : `<ul>` et `<li>`

exemple · modifiable

index.html

<ul>
  <li>Inès</li>
  <li>Bastien</li>
  <li>Yao</li>
</ul>

rendu

À quoi ça sert. Une liste dont l'ordre ne compte pas. Chaque élément est précédé d'un point.

Syntaxe. <ul> ouvre la liste, chaque élément est dans un <li>, </ul> la ferme.

Liste numérotée : `<ol>` et `<li>`

exemple · modifiable

index.html

<ol>
  <li>Allumer le phare.</li>
  <li>Monter au sommet.</li>
</ol>

rendu

À quoi ça sert. Une liste dont l'ordre compte, comme les étapes d'une recette. Le navigateur numérote lui-même les éléments : il ne faut pas écrire les numéros.

Syntaxe. <ol> ouvre la liste, chaque élément est dans un <li>, </ol> la ferme.

Mise en valeur : `<strong>` et `<em>`

exemple · modifiable

index.html

<p>Entrée <strong>libre</strong>.</p>
<p>Un jeu <em>très</em> calme.</p>

rendu

À quoi ça sert. <strong> marque un mot important (affiché en gras), <em> un mot sur lequel on insiste (affiché en italique). Les deux s'écrivent à l'intérieur d'un texte.

Syntaxe. <strong>mot</strong>, <em>mot</em>

Citation : `<blockquote>`

exemple · modifiable

index.html

<p>Un visiteur a écrit :</p>
<blockquote>
  Le plus beau jeu du salon.
</blockquote>

rendu

À quoi ça sert. Un passage cité, écrit par quelqu'un d'autre. Le navigateur le décale vers la droite.

Syntaxe. <blockquote>texte cité</blockquote>

Image : `<img>`

exemple · modifiable

index.html

<img src="phare.png"
     alt="Un phare rouge et blanc">

rendu

À quoi ça sert. Afficher une image. La balise ne se ferme pas.

Syntaxe. <img src="adresse de l'image" alt="description de l'image">

Si l'adresse est fausse, le navigateur affiche la description à la place de l'image : remplacer phare.png par phare.jpg dans l'exemple pour le voir.

CSS

Une règle CSS s'écrit dans style.css : un sélecteur (à quels éléments la règle s'applique), puis, entre accolades, une propriété et sa valeur.

sélecteur {
  propriété: valeur;
}

Couleur du texte : `color`

exemple · modifiable

style.css

h2 {
  color: navy;
}

index.html

<h2>Des nouvelles</h2>
<p>Ouvert le dimanche.</p>

rendu

À quoi ça sert. Changer la couleur du texte.

Valeurs. Un nom de couleur en anglais : navy, red, green, gray…

Couleur de fond : `background-color`

exemple · modifiable

style.css

p {
  background-color: lightyellow;
}

index.html

<h2>Des nouvelles</h2>
<p>Ouvert le dimanche.</p>

rendu

À quoi ça sert. Changer la couleur derrière un élément.

Valeurs. Un nom de couleur en anglais : lightyellow, lightblue, white…

Taille du texte : `font-size`

exemple · modifiable

style.css

p {
  font-size: 18px;
}

index.html

<h2>Des nouvelles</h2>
<p>Ouvert le dimanche.</p>

rendu

À quoi ça sert. Agrandir ou réduire le texte.

Valeur. Une taille en pixels, par exemple 18px. Le texte d'un paragraphe fait 16px si rien ne le change.

Italique : `font-style`

exemple · modifiable

style.css

h2 {
  font-style: italic;
}

index.html

<h2>Des nouvelles</h2>
<p>Ouvert le dimanche.</p>

rendu

À quoi ça sert. Écrire un texte en italique, ou le remettre droit.

Valeurs. italic (italique), normal (droit).

Alignement du texte : `text-align`

exemple · modifiable

style.css

p {
  text-align: right;
}

index.html

<h2>Des nouvelles</h2>
<p>Ouvert le dimanche.</p>

rendu

À quoi ça sert. Placer le texte d'un élément à gauche, au centre ou à droite de la page.

Valeurs. left (à gauche), center (au centre), right (à droite).

Bordure : `border`

exemple · modifiable

style.css

h2 {
  border: 2px solid navy;
}

index.html

<h2>Des nouvelles</h2>
<p>Ouvert le dimanche.</p>

rendu

À quoi ça sert. Tracer un cadre autour d'un élément.

Valeur. L'épaisseur, le style du trait, la couleur : 2px solid navy. Le style du trait peut aussi être dashed (tirets) ou dotted (points).

Coins arrondis : `border-radius`

exemple · modifiable

style.css

p {
  background-color: lightyellow;
  border-radius: 10px;
}

index.html

<h2>Des nouvelles</h2>
<p>Ouvert le dimanche.</p>

rendu

À quoi ça sert. Arrondir les coins d'un élément : un cadre, un fond, une image. Plus la valeur est grande, plus l'arrondi est large.

Valeur. Une longueur, par exemple 10px.