* <html><a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML" target="_blank">Les bases de HTML</a></html>
* <html><a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML" target="_blank">Les bases de HTML</a></html>
-
=== REMARQUE PRÉALABLE ===
+
<callout type="primary" icon="true">"//Pour développer un site web, la première chose à faire est de maîtriser le langage structurant les pages, le HTML//((Apprendre le développement WEB au lycée - Cyprien Accard - ellipses))".</callout>
-
//"Pour développer un site web, la première chose à faire est de maîtriser le langage structurant les pages, le HTML//((Apprendre le développement WEB au lycée - Cyprien Accard - ellipses)).
+
=== 1. Définition ===
+
<callout type="primary" icon="true">**HyperText Markup Language** (HTML) est le code utilisé pour structurer une page web et son contenu.</callout>
-
==== 1. Définition ====
+
=== 2. Anatomie d'un élément HTML ===
-
<note>**HyperText Markup Language** (HTML) est le code utilisé pour structurer une page web et son contenu.</note>
+
-
+
-
==== 2. Anatomie d'un élément HTML ====
+
* **Source**
* **Source**
* <html><a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML" target="_blank">Les bases de HTML</a></html>
* <html><a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML" target="_blank">Les bases de HTML</a></html>
Ligne 28:
Ligne 26:
* Les éléments **vides**
* Les éléments **vides**
-
<note>Certains éléments n'ont **pas de contenu**. Ces éléments sont appelés **éléments vides**. </note>
+
<callout type="primary" icon="true">Certains éléments n'ont **pas de contenu**. Ces éléments sont appelés **éléments vides**.</callout>
<!-- Cet élément contient deux attributs mais, les balises ouvrantes <img> et
<!-- Cet élément contient deux attributs mais, les balises ouvrantes <img> et
Ligne 37:
Ligne 35:
n'y a aucun contenu interne. -->
n'y a aucun contenu interne. -->
</code>
</code>
-
==== 3. Anatomie d'une page Web ====
+
+
=== 3. Anatomie d'une page Web ===
* **Source**
* **Source**
* <html><a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML" target="_blank">Les bases de HTML</a></html>
* <html><a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML" target="_blank">Les bases de HTML</a></html>
Ligne 60:
Ligne 59:
* **<title></title>** définit le titre de la page.
* **<title></title>** définit le titre de la page.
* **<body></body>** contient le contenu affiché sur la page.
* **<body></body>** contient le contenu affiché sur la page.
-
==== 4. Le bon usage des balises (pour un document syntaxiquement bien formé) ====
+
+
=== 4. Le bon usage des balises (pour un document syntaxiquement bien formé) ===
Quelques règles simples sont à respecter lors de l’écriture des balises HTML.
Quelques règles simples sont à respecter lors de l’écriture des balises HTML.
-
<note important>**Règle 1** : écrire les **balises en minuscule**.</note>
+
<callout type="warning" icon="true">**Règle 1** : écrire les **balises en minuscule**.</callout>
//Exemple//
//Exemple//
Ligne 80:
Ligne 80:
</code>
</code>
-
<note important>**Règle 2** : toutes les balises ouvertes par //**<nom_balise>**// doivent être fermées par //**</nom_balise>**// sauf s’il s’agit d’une balise unique //**<balise_unique/>**// ou //**<balise_unique>**//.</note>
+
<callout type="warning" icon="true">**Règle 2** : toutes les balises ouvertes par //**<nom_balise>**// doivent être fermées par //**</nom_balise>**// sauf s’il s’agit d’une balise unique //**<balise_unique/>**// ou //**<balise_unique>**//.</callout>
//Exemple//
//Exemple//
Ligne 93:
Ligne 93:
</code>
</code>
-
<note important>**Règle 3** : Les **balises** doivent être correctement **imbriquées** et **indentées**.</note>
+
<callout type="warning" icon="true">**Règle 3** : Les **balises** doivent être correctement **imbriquées** et **indentées**.</callout>
//Exemple// \\ Dans le code ci-dessous, <h1></h1> est imbriquée avec <td></td>, <tr> et <td> sont indentées.
//Exemple// \\ Dans le code ci-dessous, <h1></h1> est imbriquée avec <td></td>, <tr> et <td> sont indentées.
Ligne 106:
Ligne 106:
</code>
</code>
-
<note important>**Règle 4** : les **valeurs** des **attributs** doivent toujours figurer entre des **guillemets**.</note>
+
<callout type="warning" icon="true">**Règle 4** : les **valeurs** des **attributs** doivent toujours figurer entre des **guillemets**.</callout>
//Exemple// : UTF-8 est la valeur attribuée à l'attribut charset.
//Exemple// : UTF-8 est la valeur attribuée à l'attribut charset.
Ligne 114:
Ligne 114:
</code>
</code>
+
=== 5. Chemins relatifs et chemins absolus ===
+
Voir : <html><a href="https://www.alsacreations.com/astuce/lire/78-Quelle-est-la-difference-entre-les-chemins-relatifs-et-absolus-.html" target="_blank">Quelle est la différence entre les chemins relatifs et absolus ?</a></html>
+
+
=== Pour aller plus loin ... ===
+
* <html><a href="https://espritweb.fr/liste-des-balises-html-faut-il-toutes-les-connaitre-la-reponse-est-non/" target="_blank">Les balises à connaître</a></html>
phil