Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente Prochaine révisionLes deux révisions suivantes |
web:baseshtml [2020/09/14 19:54] – philippe | web:baseshtml [2022/09/16 17:19] – [2. Anatomie d'un élément HTML] phil |
---|
| [[web:accueilweb|{{ :iconemaison.jpg?nolink&25|Sommaire Web}}]] |
| |
| ==== WEB - Les bases du HTML ==== |
| |
| [Mise à jour le 11/8/2021] |
| |
| * **Source** |
| * <html><a href="https://developer.mozilla.org/fr/" target="_blank">MDN web doc</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> |
| |
| <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> |
| |
| === 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> |
| |
| === 2. Anatomie d'un élément HTML === |
| * **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> |
| |
| * Exemple |
| {{ :web:chat-grincheuxl.png?nolink&400 |}} |
| |
| * Les éléments peuvent avoir des "**attributs**" |
| {{ :web:attribut-chat-grincheux.png?nolink&400 |}} |
| |
| * Les éléments **vides** |
| <callout type="primary" icon="true">Certains éléments n'ont **pas de contenu**. Ces éléments sont appelés **éléments vides**.</callout> |
| |
| //Exemple// |
| <code html *.html> |
| <img src="images/firefox-icon.png" alt="Mon image test" /> |
| <!-- Cet élément contient deux attributs mais, les balises ouvrantes <img> et |
| fermante </img> sont remplacées par une balise autofermante <img /> et il |
| n'y a aucun contenu interne. --> |
| </code> |
| |
| === 3. Anatomie d'une page Web === |
| * **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> |
| |
| <code html *.html> |
| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>Ma page de test</title> |
| </head> |
| <body> |
| <img src="images/firefox-icon.png" alt="Mon image de test"> |
| </body> |
| </html> |
| </code> |
| |
| * **<!DOCTYPE html>** précise que la page est en HTML5. |
| * **<html></html>** encadre tout le contenu de la page. |
| * **<head></head>** contient les éléments qui ne sont pas du contenu (mots-clés, description de la page pour les moteurs de recherche, etc.). |
| * **<meta charset="utf-8">** définit le jeu de caractères utilisé par le document. |
| * **<title></title>** définit le titre de la page. |
| * **<body></body>** contient le contenu affiché sur la page. |
| |
| === 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. |
| |
| <callout type="warning" icon="true">**Règle 1** : écrire les **balises en minuscule**.</callout> |
| |
| //Exemple// |
| <code html *.html> |
| <!DOCTYPE html> |
| |
| <html> |
| <head> |
| <meta charset="UTF-8" /> |
| <title> Exemple de tableau </title> |
| </head> |
| <body> |
| |
| </body> |
| </html> |
| </code> |
| |
| <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// |
| <code html *.html> |
| <!-- Exemples de balises devant être fermées --> |
| <html></html> |
| <head></head> |
| |
| <!-- Exemples de balises uniques --> |
| <br> |
| <hr> |
| </code> |
| |
| <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. |
| |
| <code html .html> |
| <!-- Le développeur est responsable de l'imbrication --> |
| <!-- L'indentation est réalisée automatiquement par les IDE modernes tels que VSCode --> |
| <!-- Clic droit sur la page puis sélection de "Mettre le document en forme --> |
| <tr> |
| <td><h1> Le secret de la licorne </h1></td> |
| </tr> |
| </code> |
| |
| <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. |
| <code html .html> |
| <meta charset="UTF-8" /> |
| <table border = "1"> |
| </code> |
| |