Comment écrire la partie html (partie entre <body> et </body>)

Ce bouton signale un lien vers une page avec des explications plus détaillées et des modèles.




Du mot en français à l'écriture du code html
La mise en forme du texte
Nom en français Nom de la balise Exemple
Les titres <h1> Titre principal </h1>
<h2> Titre secondaire </h2>
<h3>Sous-titre </h3>
<h4>     </h4>

Du titre le plus important (<h1>) au titre le moins important (<h5>).
Je peux définir sa taille, sa place (à gauche ou au centre) et sa couleur dans la partie CSS.

Exemple:
J'écris en html: <h2> Ceci est mon sous-titre </h2>


Sur la page, je vois:

Ceci est mon sous-titre

Un paragraphe <p> </p> <p> mon paragraphe </p>

Balise qui indique le début et la fin d'un paragraphe. Le paragraphe peut contenir du texte, des images, des vidéos.

Je peux préciser dans la partie CSS:
  • la taille du retrait (text-indent)
  • la police, la taille et la couleur du texte
  • la couleur du fond (avec background)
  • la position du paragraphe (centré, à gauche, à droite)
Retour à la ligne <br>

En html, j'écris:
<p> Il demanda:<br> - Quand arriverez-vous? <br> - Vers 18h, répondirent-elles. </p>

Ce que je vois sur la page:

Il demanda:
- Quand arriverez-vous?
- Vers 18h, répondirent-elles.

Un espace &nbsp;

J'écris:
Demain, c'est mon &nbsp; &nbsp; &nbsp; anniversaire !

Je vois:
Demain, c'est mon       anniversaire !

Un mot en gras <strong> </strong>

J'écris:
Apportez vos <strong>gants</strong> !

Je vois:
Apportez vos gants !

Je peux changer la taille et la couleur dans la partie CSS.

Un mot souligné <u> </u>

J'écris:
Apportez vos <u>gants</u> !

Je vois:
Apportez vos gants !

Je peux changer la taille et la couleur dans la partie CSS.

Texte en italiques <em> </em>

Peut être modifié en CSS

J'écris:
ce mot est en <em> italiques </em>
Je vois: ce mot est en italiques

Un mot surligné <mark> </mark>

J'écris:
Apportez vos <mark>gants</mark> !

Je vois:
Apportez vos gants !

Je peux changer la taille et la couleur dans la partie CSS.

Un mot barré <del> </del>

J'écris:
Ce mot est <del> barré </del>.

Je vois:
Ce mot est barré.
La mise en page
Attention, tout doit être stylé en CSS: position, taille,..
Nom en français Nom de la balise Exemple
L'en-tête <header> </header>
la barre de navigation <nav> </nav>
le pied-de-page <footer> </footer>
le contenu principal: la section <section> </section> Cette partie peut contenir une partie <header> </header> , des <article> </article> ou des informations supplémentaires avec <aside> </aside>
Information sur le contenu: <aside> </aside>
Article indépendant <article> </article>
Les liens
Les liens

 <a>     </a> <a href="     " > mot ou image qui déclenche le lien </a> Utilisé pour indiquer tous les liens:
  • vers une autre page html
  • vers une image ou une vidéo
  • vers une info-bulle
  • vers un mot, une image ou une vidéo dans la même page
Mon lien peut être:
  • un mot,
  • une phrase,
  • une image

Exemple 1:
<a href="../index.html"> Retour au sommaire </a>
Ce qui donne:
Retour au sommaire

Exemple 2:
<a href="../index.html"> <img src="images/lien-cible.png"/> </a>
Ce qui donne:

Les listes (à puce, numérotées,...)
Nom en français Nom de la balise Exemple
Liste à puce <ul>
<li>     </li>
</ul>		 Si je veux avoir:
"Pour faire une page web, j'ai besoin:
  • d'un ordinateur
  • d'un éditeur de texte
  • d'un navigateur"

Je dois écrire:
"Pour faire une page web, j'ai besoin:<ul>
<li> d'un ordinateur </li> <li> d'un éditeur de texte </li> <li> d'un navigateur </li> </ul>

Liste numérotée <ol> </ol> Cette balise permet de faire des listes numérotées:
chaque élément de la liste est placé entre <li> et </li>

Avant de partir en vacances, je dois :<ol>
<li>vérifier la voiture</li>
<li>faire les bagages</li>
<li>couper l'eau</li> </ol>

Avant de partir en vacances, je dois :
  1. vérifier la voiture
  2. faire les bagages
  3. couper l'eau
La vidéo
Video

<video> </video> 
  
<p> <video width="160" height="120" controls   >
<source src="video/breche.mp4" type="video/mp4" />
</video> </p>
Source d'une vidéo source src Attribut utilisé pour indiquer la source d'une vidéo:
  • indiquer dans quel dossier la vidéo est rangée
  • dire comment s'appelle la vidéo

Pour une vidéo appelée "verifier" et rangée dans mon dossier "video":

<p> <video controls >
<source src="video/verifier.mp4" type="video/mp4"/>
</video></p>
Les tableaux
Le tableau


 <table> </table> balises associées:
  • caption
  • tr
  • th
  • td
  • colspan
  • rowspan

La forme du tableau (taille, bordure, couleur,...) se définit dans la partie CSS.

Dans la partie html, pour un tableau à 2 colonnes, on écrit:

<table>
<caption> Titre de mon tableau </caption>
<tr>
<th>titre de la colonne 1  </th>
<th> titre de la colonne 2 </th></tr>
<tr>  
<td> cellule 1 de la colonne 1 </td>
<td>cellule 1 de la colonne 2  </td></tr>
</table>
Cela donne:
Titre de mon tableau
titre de la colonne 1 titre de la colonne 2
cellule 1 de la colonne 1 cellule 1 de la colonne 2
la ligne d'un tableau <tr> </tr> Les cellules d'un tableau (<td> </td> )doivent être écrites entre les balises de la ligne.
Je dois écrire :
<tr>   <td>       </td>   </tr>      ou :      <tr>   <th>       </th>   </tr>
La cellule de titre d'un tableau <th> </th> voir la balise "table"
La cellule d'un tableau <td> </td> voir la balise "table"
fusionner verticalement plusieurs cellules d'un tableau

 rowspan

Utilisé avec "th" ou "td" dans un tableau
<td rowspan="nombreindiquer le nombre de cellules à fusionner">

Exemple de code: 
<table>
<tr> <td> cellule 1 </td> 
<td rowspan="2"> cellule 2 et 5 fusionnées</td>
<td> cellule 3 </td>  </tr>
<tr> 
<td> cellule 4</td> 
<td> cellule 6 </td></tr>
</table>
Résultat:
cellule 1 cellule 2 et 5 fusionnées cellule 3
cellule 4 cellule 6

Les images
Les images

<img src=" "> <img src="image.jpg">

Il est possible de préciser la taille (largeur: width=" " et hauteur: height=" ") en pixel.
Exemple:
<img src="image.jpg" width="50" height="30">

Source d'une image src Attribut utilisé pour indiquer la source d'une image:
  • indiquer dans quel dossier l'image est rangée
  • dire comment s'appelle l'image

Pour une image appelée "jul.jpg" et rangée dans le dossier "images":
<img src="images/jul.jpg">

Créer une class en CSS et l'utiliser en html
Nom en français Nom de la balise Exemple
Créer une classe class=" " Exemple
1.Création de classes en CSS 
.bleu{background:#CEE9F9;}
.mauve{background:#F0E0F9;}
2. Ecriture de la partie html 
<p>J'aime écrire en <span class="bleu"> bleu </span>
et en <span class="mauve"> mauve </span>.</p>
3. Résultat:

J'aime écrire en bleu et en mauve .

Créer une classe unique

id=" "
 Un "id" n'apparait qu'une seule fois par page web: il est unique. Il est utilisé pour les liens (les ancres) par exemple.
Autres
Nom en français Nom de la balise Exemple
la largeur width Utilisé pour définir la largeur des images et des vidéos. Le mieux est que les images et les vidéos soient déjà au bon format. 
<p> <video width="160" height="120" controls  >
<source src="dossier/video.mp4" type="video/mp4"/>
</video> </p>
Image:
<img src="nom de l'image.jpg" alt="descriptif image" 
width="..." height="..."/>
titre rubrique
Nom en français Nom de la balise Exemple