[{"data":1,"prerenderedAt":706},["ShallowReactive",2],{"page-\u002Fhtml\u002Fune-page-web":3,"pieces-html":664,"autour-\u002Fhtml\u002Fune-page-web":689,"prerequis-\u002Fhtml\u002Fune-page-web":694,"plan-html":695},{"id":4,"title":5,"body":6,"description":635,"extension":636,"ligne":41,"meta":637,"motsCles":638,"navigation":642,"niveau":643,"path":644,"prerequis":645,"ressources":646,"seo":654,"sources":655,"stem":662,"__hash__":663},"docs\u002Fhtml\u002F01.une-page-web.md","Qu'est-ce que HTML ?",{"type":7,"value":8,"toc":623},"minimark",[9,14,27,31,35,198,206,217,221,224,279,282,286,289,306,320,341,352,356,433,444,448,467,482,489,493,499,527,534,540,544,571,577,583,587,590,596,600,619],[10,11,13],"h2",{"id":12},"ce-que-tu-vas-apprendre","Ce que tu vas apprendre",[15,16,17,21,24],"ul",{},[18,19,20],"li",{},"Ce qu'est une page web et ce que fait le navigateur avec un fichier HTML.",[18,22,23],{},"Reconnaître une balise, un élément et un attribut.",[18,25,26],{},"Créer et ouvrir ta toute première page.",[10,28,30],{"id":29},"une-page-web-est-un-fichier-texte","Une page web est un fichier texte",[32,33,34],"p",{},"Voici une page complète, la plus simple possible :",[36,37,43],"pre",{"className":38,"code":39,"filename":40,"language":41,"meta":42,"style":42},"language-html shiki shiki-themes github-light-default github-dark-default github-dark-default","\u003C!doctype html>\n\u003Chtml lang=\"fr\">\n  \u003Chead>\n    \u003Cmeta charset=\"utf-8\">\n    \u003Ctitle>Mes recettes\u003C\u002Ftitle>\n  \u003C\u002Fhead>\n  \u003Cbody>\n    \u003Ch1>Mes recettes\u003C\u002Fh1>\n    \u003Cp>Bienvenue sur mon site de cuisine.\u003C\u002Fp>\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\n","index.html","html","",[44,45,46,66,86,97,116,131,141,151,165,179,188],"code",{"__ignoreMap":42},[47,48,51,55,59,63],"span",{"class":49,"line":50},"line",1,[47,52,54],{"class":53},"scfrF","\u003C!",[47,56,58],{"class":57},"s5JFL","doctype",[47,60,62],{"class":61},"s5iOY"," html",[47,64,65],{"class":53},">\n",[47,67,69,72,74,77,80,84],{"class":49,"line":68},2,[47,70,71],{"class":53},"\u003C",[47,73,41],{"class":57},[47,75,76],{"class":61}," lang",[47,78,79],{"class":53},"=",[47,81,83],{"class":82},"shWOn","\"fr\"",[47,85,65],{"class":53},[47,87,89,92,95],{"class":49,"line":88},3,[47,90,91],{"class":53},"  \u003C",[47,93,94],{"class":57},"head",[47,96,65],{"class":53},[47,98,100,103,106,109,111,114],{"class":49,"line":99},4,[47,101,102],{"class":53},"    \u003C",[47,104,105],{"class":57},"meta",[47,107,108],{"class":61}," charset",[47,110,79],{"class":53},[47,112,113],{"class":82},"\"utf-8\"",[47,115,65],{"class":53},[47,117,119,121,124,127,129],{"class":49,"line":118},5,[47,120,102],{"class":53},[47,122,123],{"class":57},"title",[47,125,126],{"class":53},">Mes recettes\u003C\u002F",[47,128,123],{"class":57},[47,130,65],{"class":53},[47,132,134,137,139],{"class":49,"line":133},6,[47,135,136],{"class":53},"  \u003C\u002F",[47,138,94],{"class":57},[47,140,65],{"class":53},[47,142,144,146,149],{"class":49,"line":143},7,[47,145,91],{"class":53},[47,147,148],{"class":57},"body",[47,150,65],{"class":53},[47,152,154,156,159,161,163],{"class":49,"line":153},8,[47,155,102],{"class":53},[47,157,158],{"class":57},"h1",[47,160,126],{"class":53},[47,162,158],{"class":57},[47,164,65],{"class":53},[47,166,168,170,172,175,177],{"class":49,"line":167},9,[47,169,102],{"class":53},[47,171,32],{"class":57},[47,173,174],{"class":53},">Bienvenue sur mon site de cuisine.\u003C\u002F",[47,176,32],{"class":57},[47,178,65],{"class":53},[47,180,182,184,186],{"class":49,"line":181},10,[47,183,136],{"class":53},[47,185,148],{"class":57},[47,187,65],{"class":53},[47,189,191,194,196],{"class":49,"line":190},11,[47,192,193],{"class":53},"\u003C\u002F",[47,195,41],{"class":57},[47,197,65],{"class":53},[32,199,200,201,205],{},"Ce n'est que du texte. Un ",[202,203,204],"strong",{},"navigateur"," (Firefox, Chrome, Safari, Edge...) est un programme qui lit ce texte et en fait une page affichée à l'écran.",[32,207,208,211,212,216],{},[202,209,210],{},"HTML"," (",[213,214,215],"em",{},"HyperText Markup Language",", « langage de balises d'hypertexte ») est le langage dans lequel ce texte est écrit. Il décrit le sens de chaque morceau : ceci est un titre, ceci est un paragraphe.",[10,218,220],{"id":219},"que-fait-html-que-font-les-autres","Que fait HTML, que font les autres ?",[32,222,223],{},"Trois langages se partagent une page web :",[225,226,227,243],"table",{},[228,229,230],"thead",{},[231,232,233,237,240],"tr",{},[234,235,236],"th",{},"Langage",[234,238,239],{},"Rôle",[234,241,242],{},"Dans notre site de recettes",[244,245,246,257,268],"tbody",{},[231,247,248,251,254],{},[249,250,210],"td",{},[249,252,253],{},"La structure et le contenu",[249,255,256],{},"Le titre, la liste des ingrédients",[231,258,259,262,265],{},[249,260,261],{},"CSS",[249,263,264],{},"L'apparence",[249,266,267],{},"Les couleurs, la police",[231,269,270,273,276],{},[249,271,272],{},"JavaScript",[249,274,275],{},"Le comportement",[249,277,278],{},"Un bouton qui filtre les recettes",[32,280,281],{},"Ici, tu apprends le premier. Sans HTML, il n'y a pas de page : CSS et JavaScript viennent toujours s'y accrocher.",[10,283,285],{"id":284},"les-balises","Les balises",[32,287,288],{},"Regarde cette ligne :",[36,290,292],{"className":38,"code":291,"language":41,"meta":42,"style":42},"\u003Cp>Bienvenue sur mon site de cuisine.\u003C\u002Fp>\n",[44,293,294],{"__ignoreMap":42},[47,295,296,298,300,302,304],{"class":49,"line":50},[47,297,71],{"class":53},[47,299,32],{"class":57},[47,301,174],{"class":53},[47,303,32],{"class":57},[47,305,65],{"class":53},[32,307,308,309,312,313,315,316,319],{},"Une ",[202,310,311],{},"balise"," est un mot-clé entouré de chevrons ",[44,314,71],{}," et ",[44,317,318],{},">",". Il y en a deux ici :",[15,321,322,332],{},[18,323,324,327,328,331],{},[44,325,326],{},"\u003Cp>"," est la ",[202,329,330],{},"balise ouvrante"," : le paragraphe commence.",[18,333,334,327,337,340],{},[44,335,336],{},"\u003C\u002Fp>",[202,338,339],{},"balise fermante"," (avec une barre oblique) : le paragraphe se termine.",[32,342,343,344,347,348,351],{},"Le texte entre les deux est le ",[202,345,346],{},"contenu",". L'ensemble forme un ",[202,349,350],{},"élément"," : balise ouvrante, contenu, balise fermante.",[10,353,355],{"id":354},"quelques-éléments-à-connaître","Quelques éléments à connaître",[225,357,358,368],{},[228,359,360],{},[231,361,362,365],{},[234,363,364],{},"Élément",[234,366,367],{},"Signification",[244,369,370,384,393,403,413,423],{},[231,371,372,381],{},[249,373,374,377,378],{},[44,375,376],{},"\u003Ch1>"," à ",[44,379,380],{},"\u003Ch6>",[249,382,383],{},"Titres, du plus important au moins important",[231,385,386,390],{},[249,387,388],{},[44,389,326],{},[249,391,392],{},"Paragraphe",[231,394,395,400],{},[249,396,397],{},[44,398,399],{},"\u003Cstrong>",[249,401,402],{},"Texte important (affiché en gras)",[231,404,405,410],{},[249,406,407],{},[44,408,409],{},"\u003Cem>",[249,411,412],{},"Texte mis en valeur (affiché en italique)",[231,414,415,420],{},[249,416,417],{},[44,418,419],{},"\u003Cbr>",[249,421,422],{},"Retour à la ligne",[231,424,425,430],{},[249,426,427],{},[44,428,429],{},"\u003Chr>",[249,431,432],{},"Séparation thématique",[32,434,435,315,437,439,440,443],{},[44,436,419],{},[44,438,429],{}," n'ont pas de contenu. On les appelle des ",[202,441,442],{},"éléments vides"," : ils n'ont pas de balise fermante.",[10,445,447],{"id":446},"les-attributs","Les attributs",[36,449,451],{"className":38,"code":450,"language":41,"meta":42,"style":42},"\u003Chtml lang=\"fr\">\n",[44,452,453],{"__ignoreMap":42},[47,454,455,457,459,461,463,465],{"class":49,"line":50},[47,456,71],{"class":53},[47,458,41],{"class":57},[47,460,76],{"class":61},[47,462,79],{"class":53},[47,464,83],{"class":82},[47,466,65],{"class":53},[32,468,469,470,473,474,477,478,481],{},"Un ",[202,471,472],{},"attribut"," ajoute une information à un élément. Il s'écrit dans la balise ouvrante, sous la forme ",[44,475,476],{},"nom=\"valeur\"",". Ici, ",[44,479,480],{},"lang=\"fr\""," indique que la page est en français.",[32,483,484,485,488],{},"Un élément peut avoir plusieurs attributs, séparés par des espaces. Mets toujours la valeur entre guillemets droits ",[44,486,487],{},"\"",".",[10,490,492],{"id":491},"imbriquer-les-éléments","Imbriquer les éléments",[32,494,495,496,488],{},"Un élément peut en contenir d'autres. On dit qu'ils sont ",[202,497,498],{},"imbriqués",[36,500,502],{"className":38,"code":501,"language":41,"meta":42,"style":42},"\u003Cp>Cette tarte est \u003Cstrong>très\u003C\u002Fstrong> simple.\u003C\u002Fp>\n",[44,503,504],{"__ignoreMap":42},[47,505,506,508,510,513,515,518,520,523,525],{"class":49,"line":50},[47,507,71],{"class":53},[47,509,32],{"class":57},[47,511,512],{"class":53},">Cette tarte est \u003C",[47,514,202],{"class":57},[47,516,517],{"class":53},">très\u003C\u002F",[47,519,202],{"class":57},[47,521,522],{"class":53},"> simple.\u003C\u002F",[47,524,32],{"class":57},[47,526,65],{"class":53},[32,528,529,530,533],{},"La règle est de fermer dans l'ordre inverse de l'ouverture : le dernier ouvert est le premier fermé. Écrire ",[44,531,532],{},"\u003Cp>un \u003Cstrong>mot\u003C\u002Fp>\u003C\u002Fstrong>"," est une erreur.",[535,536,537],"note",{},[32,538,539],{},"Un navigateur est indulgent : il essaie d'afficher quelque chose même si ton code contient des erreurs. Une page qui s'affiche presque bien peut donc cacher des fautes. Prends l'habitude d'écrire proprement dès le début.",[10,541,543],{"id":542},"créer-ta-première-page","Créer ta première page",[545,546,547,554,557,560,568],"ol",{},[18,548,549,550,553],{},"Crée un dossier ",[44,551,552],{},"recettes"," sur ton ordinateur.",[18,555,556],{},"Ouvre un éditeur de texte pour le code, par exemple Visual Studio Code (gratuit). Évite un traitement de texte comme Word.",[18,558,559],{},"Copie la page d'exemple du début dans un nouveau fichier.",[18,561,562,563,565,566,488],{},"Enregistre-le sous le nom ",[44,564,40],{},", dans le dossier ",[44,567,552],{},[18,569,570],{},"Double-clique sur le fichier : il s'ouvre dans ton navigateur.",[32,572,573,574,576],{},"Le nom ",[44,575,40],{}," est une convention : sur un site, c'est la page d'accueil qu'un serveur envoie par défaut.",[32,578,579,580,582],{},"Modifie le texte du ",[44,581,376],{},", enregistre, puis recharge la page dans le navigateur (touche F5). Tu vois ton changement. Cette boucle « modifier, enregistrer, recharger » sera ton quotidien.",[10,584,586],{"id":585},"voir-le-code-dune-page-existante","Voir le code d'une page existante",[32,588,589],{},"Tu peux lire le HTML de n'importe quel site. Fais un clic droit sur une page, puis « Afficher le code source de la page » (ou appuie sur Ctrl+U). Pour inspecter un élément précis, choisis « Inspecter » : c'est l'outil de développement du navigateur, que tu utiliseras souvent.",[591,592,593],"tip",{},[32,594,595],{},"Au début, lis le code des pages simples. Les gros sites sont encombrés de code généré, difficile à suivre pour un débutant.",[10,597,599],{"id":598},"à-retenir","À retenir",[15,601,602,605,608,611,616],{},[18,603,604],{},"Une page web est un fichier texte en HTML, que le navigateur transforme en page affichée.",[18,606,607],{},"HTML décrit la structure et le contenu, CSS l'apparence, JavaScript le comportement.",[18,609,610],{},"Un élément se compose d'une balise ouvrante, d'un contenu et d'une balise fermante.",[18,612,613,614,488],{},"Un attribut s'écrit dans la balise ouvrante : ",[44,615,476],{},[18,617,618],{},"Les éléments s'imbriquent et se ferment dans l'ordre inverse de leur ouverture.",[620,621,622],"style",{},"html pre.shiki code .scfrF, html code.shiki .scfrF{--shiki-light:#1F2328;--shiki-default:#E6EDF3;--shiki-dark:#E6EDF3}html pre.shiki code .s5JFL, html code.shiki .s5JFL{--shiki-light:#116329;--shiki-default:#7EE787;--shiki-dark:#7EE787}html pre.shiki code .s5iOY, html code.shiki .s5iOY{--shiki-light:#0550AE;--shiki-default:#79C0FF;--shiki-dark:#79C0FF}html pre.shiki code .shWOn, html code.shiki .shWOn{--shiki-light:#0A3069;--shiki-default:#A5D6FF;--shiki-dark:#A5D6FF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":42,"searchDepth":68,"depth":88,"links":624},[625,626,627,628,629,630,631,632,633,634],{"id":12,"depth":68,"text":13},{"id":29,"depth":68,"text":30},{"id":219,"depth":68,"text":220},{"id":284,"depth":68,"text":285},{"id":354,"depth":68,"text":355},{"id":446,"depth":68,"text":447},{"id":491,"depth":68,"text":492},{"id":542,"depth":68,"text":543},{"id":585,"depth":68,"text":586},{"id":598,"depth":68,"text":599},"Une page web est un fichier texte écrit en HTML, un langage de balises que le navigateur lit pour afficher la page.","md",{},[210,639,204,311,350,472,640,40,641],"page web","éditeur de texte","imbrication",true,"debutant","\u002Fhtml\u002Fune-page-web",null,[647,651],{"nom":648,"url":649,"type":650},"MDN, Les bases de la syntaxe HTML","https:\u002F\u002Fdeveloper.mozilla.org\u002Ffr\u002Fdocs\u002FLearn_web_development\u002FCore\u002FStructuring_content\u002FBasic_HTML_syntax","cours",{"nom":652,"url":653,"type":650},"OpenClassrooms, Créez votre site web avec HTML5 et CSS3","https:\u002F\u002Fopenclassrooms.com\u002Ffr\u002Fcourses\u002F1603881-creez-votre-site-web-avec-html5-et-css3",{"title":5,"description":635},[656,659],{"nom":657,"url":658},"MDN, Apprendre le développement web, structurer le contenu","https:\u002F\u002Fdeveloper.mozilla.org\u002Ffr\u002Fdocs\u002FLearn_web_development\u002FCore\u002FStructuring_content",{"nom":660,"url":661},"Standard HTML du WHATWG (en anglais)","https:\u002F\u002Fhtml.spec.whatwg.org\u002Fmultipage\u002F","html\u002F01.une-page-web","0WmBZDv1RdMX-HZcz_4BWv6i5yKwMn6YUq0UB2hnAv4",[665,666,670,674,678,682,686],{"path":644,"title":5,"stem":662},{"path":667,"title":668,"stem":669},"\u002Fhtml\u002Fstructure-du-document","La structure d'un document","html\u002F02.structure-du-document",{"path":671,"title":672,"stem":673},"\u002Fhtml\u002Ftexte-liens-images","Texte, liens et images","html\u002F03.texte-liens-images",{"path":675,"title":676,"stem":677},"\u002Fhtml\u002Flistes-et-tableaux","Listes et tableaux","html\u002F04.listes-et-tableaux",{"path":679,"title":680,"stem":681},"\u002Fhtml\u002Fsemantique-et-accessibilite","Sémantique et accessibilité","html\u002F05.semantique-et-accessibilite",{"path":683,"title":684,"stem":685},"\u002Fhtml\u002Fformulaires-et-validation","Formulaires et validation","html\u002F06.formulaires-et-validation",{"path":687,"title":210,"stem":688},"\u002Fhtml","html\u002Findex",[690,692],{"title":210,"path":687,"stem":688,"description":691,"children":-1},"Le mémo de HTML : squelette de page, texte, liens, images, listes, tableaux, éléments sémantiques et formulaires.",{"title":668,"path":667,"stem":669,"description":693,"children":-1},"Le doctype, l'élément html, le head et le body forment le squelette de toute page HTML.",[],[696,697,698,699,701,702,704],{"path":644,"title":5,"niveau":643,"stem":662},{"path":667,"title":668,"niveau":643,"stem":669},{"path":671,"title":672,"niveau":643,"stem":673},{"path":675,"title":676,"niveau":700,"stem":677},"intermediaire",{"path":679,"title":680,"niveau":700,"stem":681},{"path":683,"title":684,"niveau":703,"stem":685},"avance",{"path":687,"title":210,"niveau":705,"stem":688},"memo",1794583441338]