{"id":21,"date":"2023-12-21T21:09:46","date_gmt":"2023-12-21T21:09:46","guid":{"rendered":"https:\/\/yzaz.net\/html\/?page_id=21"},"modified":"2024-11-03T09:55:04","modified_gmt":"2024-11-03T09:55:04","slug":"squelette","status":"publish","type":"page","link":"https:\/\/yzaz.net\/html\/squelette\/","title":{"rendered":"Squelette d’une page HTML"},"content":{"rendered":"

Les bases d’un code HTML5<\/strong> ressemblent beaucoup \u00e0 celles r\u00e9dig\u00e9es \u00e0 l’aide des versions pr\u00e9c\u00e9dentes HTML 4 et XHTML 1.x. On y retrouve un doctype<\/em> <\/strong>suivi des \u00e9l\u00e9ments : <html><\/strong><\/em>, <title><\/strong><\/em>, <head><\/strong><\/em>, <meta><\/strong><\/em>, <link><\/strong><\/em> et <body><\/strong><\/em>.<\/p>\n

1- Le Doctype (DTD)<\/h3>\n

Toute page HTML doit commencer par une d\u00e9claration de Document Type Definition (DTD), qui pr\u00e9cise au navigateur quelle version de HTML est utilis\u00e9e :<\/p>\n

HTML 5 (Recommand\u00e9)<\/h3>\n
\r\n<!DOCTYPE html>\r\n<\/pre>\n
Pour les anciennes versions de HTML: <\/strong><\/p>\n
XHTML 1.0 Strict<\/h4>\n
\r\n<!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 Strict\/\/EN" "http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-strict.dtd"> \r\n<\/pre>\n
XHTML 1.0 Transitional<\/h4>\n
\r\n<!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN" "http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd"&gt; \r\n<\/pre>\n
XHTML 1.1<\/h4>\n
\r\n<!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.1\/\/EN" "http:\/\/www.w3.org\/TR\/xhtml11\/DTD\/xhtml11.dtd">\r\n<\/pre>\n
HTML 4.01 Strict<\/h4>\n
\r\n<!DOCTYPE HTML PUBLIC "-\/\/W3C\/\/DTD HTML 4.01\/\/EN" "http:\/\/www.w3.org\/TR\/html4\/strict.dtd">\r\n<\/pre>\n
2. Le titre<\/h3>\n
Le titre est affich\u00e9 par les navigateurs dans la barre. Il est \u00e9galement utilis\u00e9 par les moteurs de recherche. Un bon titre est informatif, tout en restant relativement court. Il se d\u00e9clare dans l’\u00e9l\u00e9ment <title><\/strong>.<\/p>\n
\r\n<title> mon titre <\/title>\r\n<\/pre>\n
3. Langue de la page<\/h3>\n
fr<\/strong> pour le fran\u00e7ais, en<\/strong> pour l’anglais, es<\/strong> pour l’espagnol, ar<\/strong> pour l’arabe. D\u00e9clarer la langue utilis\u00e9e est utile pour les synth\u00e9tiseurs vocaux des navigateurs pour aveugles (qui en d\u00e9duisent comment prononcer). Et pour les navigateurs qui peuvent en d\u00e9duire s’il faut utiliser des guillemets anglo-saxons (“”) ou fran\u00e7ais (\u00ab \u00bb).
\nLa langue est souvant attribu\u00e9 \u00e0 la balise <html><\/strong>:<\/p>\n
\r\n<html lang="fr">\r\n<\/pre>\n
4. Les balises meta<\/h3>\n
Elles sont facultatives, mais importantes \u00e0 la fois pour le navigateur qui a des renseignements sur la mani\u00e8re dont afficher la page, et pour les moteurs de recherche, qui s’en servent pour indexer vos pages. Le r\u00f4le des en-t\u00eates dans une page HTML (comme dans un courrier \u00e9lectronique) est de donner des m\u00e9ta-informations plus ou moins importantes.
\nExp: l’identit\u00e9 de l’auteur, le titre de la page, l’encodage, la langue utilis\u00e9e, etc. Les en-t\u00eates sont d\u00e9clar\u00e9es \u00e0 l’int\u00e9rieur de l’\u00e9l\u00e9ment <head><\/strong>. <\/p>\n
4.1. Encodage de la page<\/h4>\n
La d\u00e9claration de l’encodage est importante pour le navigateur.
\nLe plus utilis\u00e9 est UTF-8.
\nUTF-8 est l’abr\u00e9viation de Universal Character Set Transformation Format – 8 bits<\/em>. C’est est l’encodage de caract\u00e8res informatiques con\u00e7u pour coder l\u2019ensemble des caract\u00e8res du r\u00e9pertoire universel de caract\u00e8res. Plus 95% des sites web au monde utilise cet encodage.<\/p>\n
\r\n<meta charset="utf-8">\r\n<\/pre>\n
4.2. Mots clefs<\/h4>\n
Cette balise meta est utilis\u00e9e par certains moteurs de recherche pour indexer les pages. Ne mettez que les mots-clefs les plus significatifs, les moteurs n’aiment pas les listes trop longues.<\/p>\n
\r\n<meta name="keywords" content=" mot-clef1, mot-clef2, mot-clef3" \/>\r\n<\/pre>\n
4.3. Description<\/h4>\n
Tr\u00e8s utile pour les moteurs de recherche.<\/p>\n
\r\n<meta name="description" content=" un texte de description de votre page" \/>\r\n<\/pre>\n
4.4. Auteur de la page<\/h4>\n
Vous pouvez d\u00e9clarer plusieurs auteurs en s\u00e9parant les noms par des virgules.<\/p>\n
\r\n<meta name="author" content="Ali Hamid"\u00a0\/>\r\n<\/pre>\n
5. Les r\u00e9f\u00e9rences externes<\/h3>\n
Elles sont utilis\u00e9es afin d’indiquer qu’un autre document est li\u00e9 au document en cours. Cela peut \u00eatre un script, une feuille de style ou encore un ic\u00f4ne. <\/p>\n
5.1. R\u00e9f\u00e9rence \u00e0 un script <\/h4>\n
Pour faire r\u00e9f\u00e9rence \u00e0 un script, il faut le lier \u00e0 votre page.<\/p>\n
 \r\n<script type="text\/javascript src=javascript\/mon_script.js"><\/script>\r\n<\/pre>\n
5.2. La balise link<\/h4>\n
La balise <link><\/strong> permet de faire r\u00e9f\u00e9rence \u00e0 de nombreux types de documents, mais les principaux sont les feuilles de style (CSS) et l\u2019ic\u00f4ne. <\/p>\n
\r\n<!--Pour un fichier CSS:-->\r\n<link rel="stylesheet" type="text\/css" href="css\/mon_fichier.css" \/>\r\n<!--Pour un ic\u00f4ne: -->\r\n<link rel="icon" type="image\/png" href="images\/icon.png" \/> \r\n<\/pre>\n
6. Le corps de la page<\/h3>\n
Le corps de la page est ce que le lecteur va voir via son navigateur.
\nIL est contenu entre balises <body><\/strong>. <\/p>\n
Exemple de squelette d’une page HTML<\/h3>\n
\r\n<!doctype html>\r\n<html lang="fr">\r\n<head>\r\n  <meta charset="utf-8">\r\n  <title>Titre de la page<\/title> <!-- mettez un titre significatif-->\r\n  <link rel="stylesheet" href="style.css"> <!-- Utilisez le chemain relatif au fichier CSS-->\r\n  <script src="script.js"><\/script> <!-- Ligne \u00e0 envelver s'il n'y a pas de script-->\r\n<\/head>\r\n<body>\r\n  ...\r\n  <!-- Contenu  de la page -->\r\n  ...\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
Les bases d’un code HTML5 ressemblent beaucoup \u00e0 celles r\u00e9dig\u00e9es \u00e0 l’aide des versions pr\u00e9c\u00e9dentes HTML 4 et XHTML 1.x. On y retrouve un doctype suivi des \u00e9l\u00e9ments : <html>, <title>, <head>, <meta>, <link> et <body>. 1- Le Doctype (DTD) Toute page HTML doit commencer par une d\u00e9claration de Document Type Definition (DTD), qui pr\u00e9cise au navigateur quelle version de<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":3,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/yzaz.net\/html\/wp-json\/wp\/v2\/pages\/21"}],"collection":[{"href":"https:\/\/yzaz.net\/html\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/yzaz.net\/html\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/yzaz.net\/html\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yzaz.net\/html\/wp-json\/wp\/v2\/comments?post=21"}],"version-history":[{"count":1,"href":"https:\/\/yzaz.net\/html\/wp-json\/wp\/v2\/pages\/21\/revisions"}],"predecessor-version":[{"id":22,"href":"https:\/\/yzaz.net\/html\/wp-json\/wp\/v2\/pages\/21\/revisions\/22"}],"wp:attachment":[{"href":"https:\/\/yzaz.net\/html\/wp-json\/wp\/v2\/media?parent=21"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}