Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente |
web:baseshtml [2022/09/16 17:14] – [1. Définition] phil | web:baseshtml [2022/11/14 07:54] (Version actuelle) – [Pour aller plus loin ...] phil |
---|
==== WEB - Les bases du HTML ==== | ==== WEB - Les bases du HTML ==== |
| |
[Mise à jour le 11/8/2021] | [Mise à jour le 29/9/2022] |
| |
* **Source** | * **Source** |
| |
* 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> |
| |
//Exemple// | //Exemple// |
<code html *.htm> | <code html *.html> |
<img src="images/firefox-icon.png" alt="Mon image test" /> | <img src="images/firefox-icon.png" alt="Mon image test" /> |
<!-- Cet élément contient deux attributs mais, les balises ouvrantes <img> et | <!-- Cet élément contient deux attributs mais, les balises ouvrantes <img> et |
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// |
</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// |
</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. |
</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. |
</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> |