Partie 1 : Créer une page web en HTML

Ce guide reproduit fidèlement tous les concepts, syntaxes, attributs, exemples et spécifications techniques de la première partie du document.

1. Concepts & Définitions

Web (World Wide Web, WWW) : Le principal service de partage et de recherche d'informations sur Internet. Il donne accès à des pages et documents (ressources) connectés par des liens hypertextes.
Ressource : Entité informatique sur le web, comme le texte, les images, les vidéos, etc. Chaque ressource a une adresse unique appelée URL.
URL (Uniform Resource Locator) : Adresse en ligne attribuée à chaque ressource sur le web.
Lien hypertexte (Hyperlien) : Moyen de connecter les ressources (pages, documents) entre elles.
Navigateur : Logiciel qui permet aux utilisateurs de visualiser les documents (ressources) récupérés sur le web. Son rôle est de :
- Récupérer le code (HTML, etc.) depuis un serveur.
- Interpréter et restituer ce code sous forme de page web graphique.
- Interpréter l'URL et gérer les requêtes client/serveur.
Document hypertexte : Document composé de texte et de liens hypertextes, écrit en langage HTML.
HTML (HyperText Markup Language) : Langage de balisage hypertexte utilisé pour écrire des documents hypertextes.
Mode Client-Serveur :
- Serveur : Programme informatique qui stocke et transmet des documents à d'autres ordinateurs sur le réseau.
- Client : Programme qui demande des documents à un serveur (le navigateur est un client).
W3C (World Wide Web Consortium) : Organisme international à but non lucratif qui définit les standards techniques du web pour assurer l'accessibilité, l'interopérabilité et la pérennité des documents.
Visual Studio Code (VS Code) : Logiciel gratuit pour l'édition, la correction et le débogage de code source dans de nombreux langages (HTML, CSS, JS, etc.).
Balise : Élément de texte encadré par < et >, correspondant à un objet ou une mise en forme dans une page web.
Encapsulation : Règle selon laquelle les balises doivent être correctement imbriquées (la dernière balise ouverte doit être la première fermée).
Élément de type bloc : S'étend en largeur pour remplir tout l'espace de son conteneur et commence sur une nouvelle ligne.
Élément de type inline : Se suivent en ligne et n'occupent que la largeur nécessaire à leur contenu.
Élément sémantique : Balise qui décrit clairement son sens au navigateur et au développeur (ex: <form>, <table>, <article>).
Élément non-sémantique : Balise qui ne dit rien sur son contenu (ex: <div>, <span>).

2. Syntaxes & Codes

Structure générale d'une balise HTML :
```
<balise attribut=valeur>Contenu</balise>
```
- Balise ouvrante : <balise attribut=valeur>
- Contenu : Texte ou autres éléments.
- Balise fermante : </balise>

Squelette minimal d'une page HTML5 :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Titre here</title>
    </head>
    <body>
        Page content goes here.
    </body>
</html>

Structure générale d'une page HTML (plus complète) :

<!DOCTYPE htlm>
<html>
    <head>
        <!-- en-tête du document -->
        <meta charset="UTF-8">
        <meta name="description" content="...........">
        <meta name="keywords" content="...........">
        <meta name="author" content="...........">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="refresh" content="30">
        <title>....</title>
    </head>
    <body>
        <!-- corps du document-->
    </body>
</html>

Structure arborescente (Encapsulation) :
- div (racine)
  - h1 (nœud)
  - h2 (nœud)
  - p (nœud)
    - em (feuille)
    - img (feuille)

3. Attributs & Propriétés

Balise	Attribut	Description et Valeurs Possibles
`<html>`	`lang`	Spécifie la langue du document. Ex: `lang="fr"`.
	`dir`	Spécifie l'orientation du texte. Ex: `dir="rtl"` (Right-to-Left).
`<meta>`	`charset`	Spécifie l'encodage des caractères. Ex: `charset="UTF-8"`.
	`name`	Spécifie le nom de la métadonnée. Valeurs : `description`, `keywords`, `author`, `viewport`.
	`content`	Spécifie la valeur de la métadonnée. Ex: `content="Cours web"`.
	`http-equiv`	Simule un en-tête de réponse HTTP. Ex: `http-equiv="refresh"`.
`<p>`	`title`	Affiche une infobulle au survol de la souris. Ex: `title="infobulle"`.
`<body>`	`bgcolor`	(Obsolète) Précise la couleur de fond. Ex: `bgcolor="#eab676"`, `bgcolor="rgb(234,182,118)"`.
`<font>`	`color`	(Obsolète) Précise la couleur du texte. Ex: `color="FF0000"`.
`<span>` / `<p>`	`style`	Applique un style CSS. Ex: `style="color:red"`.
`<ul>` / `<ol>`	`type`	Précise le type de puce ou de numérotation. Pour `<ul>`: `disc` (défaut), `circle`, `square`. Pour `<ol>`: `1` (défaut), `A`, `a`, `I`, `i`.
`<li>`	`value`	(Pour `<ol>`) Initialise le numéro de l'élément. Ex: `value="1"`.
`<a>`	`href`	Cible du lien (URL, ancre, email). Ex: `"cible.html"`, `"#haut"`, `"mailto:..."`.
	`title`	Affiche une infobulle sur le lien.
	`target`	Définit où ouvrir le lien. Valeurs : `_self` (défaut), `_blank` (nouvelle fenêtre), `_parent` (cadre parent), `_top` (fenêtre hôte).
`<img>`	`src`	Chemin de la source de l'image.
	`alt`	Texte alternatif si l'image ne s'affiche pas.
	`width` / `height`	Dimensions de l'image en pixels.
`<picture>`	-	Conteneur pour plusieurs sources d'images (`<source>`).
`<source>`	`srcset`	Chemin de l'image à utiliser.
	`media`	Condition (media query) pour utiliser cette source. Ex: `media="(min-width: 600px)"`.
`<audio>` / `<video>`	`controls`	Affiche les contrôles de lecture (play, stop, etc.).
	`autoplay`	Démarre la lecture automatiquement.
`<iframe>`	`src`	URL du contenu à intégrer.
	`width` / `height`	Dimensions du cadre.
`<object>`	`data`	URL de la ressource à intégrer (HTML, PDF...).
	`type`	Type MIME de la ressource. Ex: `"text/html"`, `"application/pdf"`.
`<table>`	`border`	Largeur de la bordure en pixels. Ex: `border="1"`.
	`cellspacing`	Espacement entre les cellules.
	`cellpadding`	Espacement entre le contenu et les bords de la cellule.
`<td>` / `<th>`	`colspan`	Fusionne la cellule sur plusieurs colonnes. Ex: `colspan="3"`.
	`rowspan`	Fusionne la cellule sur plusieurs lignes.
`<caption>`	`align`	Alignement de la légende. Ex: `align="bottom"`.

4. Exemples pratiques

Encapsulation Correcte vs. Incorrecte :

<!-- Correct -->
<p><b>Paragraphe</b></p>

<!-- Incorrect -->
<p><b>Paragraphe</p></b>

Listes Ordonnées et Non Ordonnées :

<!-- Liste non ordonnée -->
<ul>
  <li>Élément1</li>
  <li type="circle">Élément2</li>
  <li type="square">Élément3</li>
</ul>

<!-- Liste ordonnée -->
<ol>
  <li type="I">Élément1</li>
  <li type="i">Élément2</li>
  <li value="1">Élément3</li>
  <li>Élément4</li>
</ol>

Liste de Définition :

<dl>
  <dt>Langages</dt>
  <dd>C++</dd>
  <dd>Java</dd>
  <dt>SGBD</dt>
  <dd>MySQL</dd>
</dl>

Types de Liens :

<!-- Lien relatif -->
<a href="cible.html" title="Page cible">Cliquer ici</a>

<!-- Lien absolu vers une nouvelle fenêtre -->
<a href="https://www.ofppt.ma/" target="_blank">Site officiel</a>

<!-- Lien interne (ancre) -->
<h1 id="haut">Titre de la page</h1>
...
<a href="#haut">haut de la page</a>

<!-- Lien email -->
<a href="mailto:contact@ofppt.ma">Contactez-moi</a>

Élément <picture> pour images responsives :

<picture>
  <source srcset="../Photos/ofppt.jpg" media="(min-width: 600px)">
  <img src="../Photos/officeFP.jpg" alt="Pas d'image" width="200px" height="140px">
</picture>

Tableau avec fusion de cellules (colspan) :

<table width=60% border=1>
  <tr>
    <td colspan=3>cellule 1</td>
  </tr>
  <tr>
    <td width=33%>cellule 1</td>
    <td width=33%>cel 2</td>
    <td width=34%>3</td>
  </tr>
</table>

Structure sémantique avec <nav> :

<nav>
  <ul>
    <li><a href="index.html">Accueil</a></li>
    <li><a href="inscription.html">Inscription</a></li>
  </ul>
</nav>

5. Spécifications techniques

Chronologie du Web et de HTML :
- 1980 : Tim Berners-Lee propose un système de partage de documents au CERN.
- 1989 : Invention du WWW par Tim Berners-Lee.
- 1990 : Développement de HTML par Tim Berners-Lee et Robert Cailliau.
- 1991 : Lancement du premier site web.
- 1994 : Apports de Netscape Navigator (attributs de présentation).
- 1996 : Publication du langage CSS.
- 1997 : Publication de HTML 3.2 et HTML 4.0 par le W3C.
- 1998 : Lancement officiel de Google.
- 2000-2006 : Période de XHTML.
- 2007-présent : HTML5.
- 2010 : Apparition du terme "Responsive Web Design".
- 2015 : Déploiement de la mise à jour "mobile-friendly" par Google.
Normes W3C pour HTML :
1. Les balises <html>, <head>, <title>, et <body> sont obligatoires.
2. Les éléments doivent être correctement imbriqués.
3. Les éléments doivent toujours être fermés.
4. Les éléments HTML doivent être en minuscules.
5. Les documents HTML doivent avoir un élément racine (<html>).
6. Les noms d'attributs doivent être en minuscules.
7. Les valeurs des attributs doivent être indiquées (entre guillemets).
Liste complète des éléments de niveau bloc (page 30) :
<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <p>, <pre>, <section>, <table>, <tfoot>, <ul>, <video>.
Liste complète des éléments de niveau inline (page 30) :
<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <output>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var>.
Extensions VS Code mentionnées :
Bracket Pair Colorizer, Better Comments, Snippets, CSS Peak, Icons, GitLens, Import Cost.

6. Points critiques

Validation du code : Utiliser le W3C Validator à l'adresse http://validator.w3.org/ pour vérifier la conformité du code HTML.
Unicité de l'ID : Un attribut id doit être unique dans l'ensemble du document HTML.
Viewport Meta Tag : La balise <meta name="viewport" content="width=device-width, initial-scale=1.0"> est indispensable pour le design responsive, car elle indique au navigateur d'adapter la page à la largeur de l'écran de l'appareil.
Sémantique vs. Non-sémantique : Utiliser les balises sémantiques (<header>, <nav>, <article>, etc.) est une bonne pratique pour la clarté du code, l'accessibilité et le référencement, plutôt que de tout structurer avec des <div>.
Balises obsolètes : Des balises comme <font> et des attributs comme bgcolor sont obsolètes. La mise en forme doit être gérée avec CSS.
Rôle de l'attribut alt : L'attribut alt sur les images est crucial pour l'accessibilité (lecteurs d'écran) et s'affiche si l'image ne peut pas être chargée.

🔗 Navigation