web:baseshtml

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision		 Révision précédente
web:baseshtml [2025/06/11 19:46] – mnoweb:baseshtml [2025/06/19 20:02] (Version actuelle) – mno
Ligne 1: Ligne 1:
 +[[web:accueilweb|{{ :iconemaison.jpg?nolink&25|Sommaire Web}}]]
  
 +===== WEB - Les bases du HTML =====
 +
 +[Mise à jour le 19/6/2025]
 +
 +  * **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>
 +
 +==== 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 ... HTML5 ====
 +  * <html><a href="https://www.alsacreations.com/article/lire/1376-html5-section-article-nav-header-footer-aside.html" target="_blank">HTML5 : Nouveaux éléments de structures</a></html>