[{"data":1,"prerenderedAt":874},["ShallowReactive",2],{"page-\u002Fhtml\u002Ftexte-liens-images":3,"pieces-html":831,"autour-\u002Fhtml\u002Ftexte-liens-images":856,"prerequis-\u002Fhtml\u002Ftexte-liens-images":861,"plan-html":863},{"id":4,"title":5,"body":6,"description":802,"extension":803,"ligne":41,"meta":804,"motsCles":805,"navigation":809,"niveau":810,"path":811,"prerequis":812,"ressources":814,"seo":825,"sources":826,"stem":829,"__hash__":830},"docs\u002Fhtml\u002F03.texte-liens-images.md","Texte, liens et images",{"type":7,"value":8,"toc":789},"minimark",[9,14,32,36,109,120,123,146,150,212,252,255,259,266,296,310,313,317,323,405,411,415,425,476,481,485,492,524,530,534,581,587,615,619,625,635,639,710,720,727,740,744,785],[10,11,13],"h2",{"id":12},"ce-que-tu-vas-apprendre","Ce que tu vas apprendre",[15,16,17,21,29],"ul",{},[18,19,20],"li",{},"Organiser un texte avec des titres et des paragraphes.",[18,22,23,24,28],{},"Relier des pages avec l'élément ",[25,26,27],"code",{},"\u003Ca>"," et ses chemins.",[18,30,31],{},"Insérer une image avec un texte alternatif.",[10,33,35],{"id":34},"titres-et-paragraphes","Titres et paragraphes",[37,38,43],"pre",{"className":39,"code":40,"language":41,"meta":42,"style":42},"language-html shiki shiki-themes github-light-default github-dark-default github-dark-default","\u003Ch1>Tarte aux pommes\u003C\u002Fh1>\n\u003Cp>Une recette simple, prête en une heure.\u003C\u002Fp>\n\u003Ch2>Ingrédients\u003C\u002Fh2>\n\u003Cp>Pour six personnes.\u003C\u002Fp>\n","html","",[25,44,45,66,81,95],{"__ignoreMap":42},[46,47,50,54,58,61,63],"span",{"class":48,"line":49},"line",1,[46,51,53],{"class":52},"scfrF","\u003C",[46,55,57],{"class":56},"s5JFL","h1",[46,59,60],{"class":52},">Tarte aux pommes\u003C\u002F",[46,62,57],{"class":56},[46,64,65],{"class":52},">\n",[46,67,69,71,74,77,79],{"class":48,"line":68},2,[46,70,53],{"class":52},[46,72,73],{"class":56},"p",[46,75,76],{"class":52},">Une recette simple, prête en une heure.\u003C\u002F",[46,78,73],{"class":56},[46,80,65],{"class":52},[46,82,84,86,88,91,93],{"class":48,"line":83},3,[46,85,53],{"class":52},[46,87,10],{"class":56},[46,89,90],{"class":52},">Ingrédients\u003C\u002F",[46,92,10],{"class":56},[46,94,65],{"class":52},[46,96,98,100,102,105,107],{"class":48,"line":97},4,[46,99,53],{"class":52},[46,101,73],{"class":56},[46,103,104],{"class":52},">Pour six personnes.\u003C\u002F",[46,106,73],{"class":56},[46,108,65],{"class":52},[73,110,111,112,115,116,119],{},"Les six niveaux de titres vont de ",[25,113,114],{},"\u003Ch1>"," (le plus important) à ",[25,117,118],{},"\u003Ch6>",". Un titre n'est pas là pour grossir le texte : il annonce un sujet. La taille se règle en CSS.",[73,121,122],{},"Deux règles simples :",[15,124,125,131],{},[18,126,127,128,130],{},"Un seul ",[25,129,114],{}," par page, qui donne son sujet principal.",[18,132,133,134,137,138,141,142,145],{},"Ne saute pas de niveau : après un ",[25,135,136],{},"\u003Ch2>",", descends vers un ",[25,139,140],{},"\u003Ch3>",", pas vers un ",[25,143,144],{},"\u003Ch5>",".",[10,147,149],{"id":148},"mettre-un-mot-en-valeur","Mettre un mot en valeur",[151,152,153,169],"table",{},[154,155,156],"thead",{},[157,158,159,163,166],"tr",{},[160,161,162],"th",{},"Élément",[160,164,165],{},"Sens",[160,167,168],{},"Affichage habituel",[170,171,172,186,199],"tbody",{},[157,173,174,180,183],{},[175,176,177],"td",{},[25,178,179],{},"\u003Cstrong>",[175,181,182],{},"Importance forte",[175,184,185],{},"Gras",[157,187,188,193,196],{},[175,189,190],{},[25,191,192],{},"\u003Cem>",[175,194,195],{},"Accent, insistance",[175,197,198],{},"Italique",[157,200,201,206,209],{},[175,202,203],{},[25,204,205],{},"\u003Ccode>",[175,207,208],{},"Du code informatique",[175,210,211],{},"Police à chasse fixe",[37,213,215],{"className":39,"code":214,"language":41,"meta":42,"style":42},"\u003Cp>Préchauffe le four à \u003Cstrong>180 °C\u003C\u002Fstrong>, \u003Cem>jamais\u003C\u002Fem> plus.\u003C\u002Fp>\n",[25,216,217],{"__ignoreMap":42},[46,218,219,221,223,226,229,232,234,237,240,243,245,248,250],{"class":48,"line":49},[46,220,53],{"class":52},[46,222,73],{"class":56},[46,224,225],{"class":52},">Préchauffe le four à \u003C",[46,227,228],{"class":56},"strong",[46,230,231],{"class":52},">180 °C\u003C\u002F",[46,233,228],{"class":56},[46,235,236],{"class":52},">, \u003C",[46,238,239],{"class":56},"em",[46,241,242],{"class":52},">jamais\u003C\u002F",[46,244,239],{"class":56},[46,246,247],{"class":52},"> plus.\u003C\u002F",[46,249,73],{"class":56},[46,251,65],{"class":52},[73,253,254],{},"Choisis l'élément selon le sens, pas selon l'effet visuel voulu. Si tu veux seulement un texte en gras sans importance particulière, c'est un travail pour le CSS.",[10,256,258],{"id":257},"les-liens","Les liens",[73,260,261,262,265],{},"Un ",[228,263,264],{},"lien"," (ou hyperlien) emmène vers une autre page. C'est ce qui fait la force du web.",[37,267,269],{"className":39,"code":268,"language":41,"meta":42,"style":42},"\u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Ffr\u002F\">Documentation MDN\u003C\u002Fa>\n",[25,270,271],{"__ignoreMap":42},[46,272,273,275,278,282,285,289,292,294],{"class":48,"line":49},[46,274,53],{"class":52},[46,276,277],{"class":56},"a",[46,279,281],{"class":280},"s5iOY"," href",[46,283,284],{"class":52},"=",[46,286,288],{"class":287},"shWOn","\"https:\u002F\u002Fdeveloper.mozilla.org\u002Ffr\u002F\"",[46,290,291],{"class":52},">Documentation MDN\u003C\u002F",[46,293,277],{"class":56},[46,295,65],{"class":52},[73,297,298,299,301,302,305,306,309],{},"L'élément ",[25,300,27],{}," (",[239,303,304],{},"anchor",", « ancre ») entoure le texte cliquable. Son attribut ",[25,307,308],{},"href"," contient la destination.",[73,311,312],{},"Un lien qui dit « cliquez ici » ne sert à rien pour quelqu'un qui parcourt la page avec un lecteur d'écran. Écris un texte qui décrit la destination : « Voir la recette de la tarte ».",[10,314,316],{"id":315},"les-chemins","Les chemins",[73,318,319,320,322],{},"La valeur de ",[25,321,308],{}," peut prendre plusieurs formes :",[151,324,325,338],{},[154,326,327],{},[157,328,329,332,335],{},[160,330,331],{},"Forme",[160,333,334],{},"Exemple",[160,336,337],{},"Destination",[170,339,340,353,366,379,392],{},[157,341,342,345,350],{},[175,343,344],{},"Adresse complète",[175,346,347],{},[25,348,349],{},"https:\u002F\u002Fexemple.fr\u002F",[175,351,352],{},"Un autre site",[157,354,355,358,363],{},[175,356,357],{},"Chemin relatif",[175,359,360],{},[25,361,362],{},"recettes.html",[175,364,365],{},"Un fichier dans le même dossier",[157,367,368,371,376],{},[175,369,370],{},"Sous-dossier",[175,372,373],{},[25,374,375],{},"recettes\u002Ftarte.html",[175,377,378],{},"Un fichier dans un dossier voisin",[157,380,381,384,389],{},[175,382,383],{},"Dossier parent",[175,385,386],{},[25,387,388],{},"..\u002Findex.html",[175,390,391],{},"Un fichier un niveau plus haut",[157,393,394,397,402],{},[175,395,396],{},"Ancre",[175,398,399],{},[25,400,401],{},"#ingredients",[175,403,404],{},"Un endroit de la même page",[73,406,261,407,410],{},[228,408,409],{},"chemin relatif"," part du fichier actuel. Il te permet de déplacer tout le dossier du site sans casser les liens.",[10,412,414],{"id":413},"lier-vers-un-endroit-de-la-page","Lier vers un endroit de la page",[73,416,417,418,421,422,145],{},"Une ",[228,419,420],{},"ancre"," pointe vers un élément précis, repéré par son attribut ",[25,423,424],{},"id",[37,426,428],{"className":39,"code":427,"language":41,"meta":42,"style":42},"\u003Ca href=\"#preparation\">Aller à la préparation\u003C\u002Fa>\n...\n\u003Ch2 id=\"preparation\">Préparation\u003C\u002Fh2>\n",[25,429,430,450,455],{"__ignoreMap":42},[46,431,432,434,436,438,440,443,446,448],{"class":48,"line":49},[46,433,53],{"class":52},[46,435,277],{"class":56},[46,437,281],{"class":280},[46,439,284],{"class":52},[46,441,442],{"class":287},"\"#preparation\"",[46,444,445],{"class":52},">Aller à la préparation\u003C\u002F",[46,447,277],{"class":56},[46,449,65],{"class":52},[46,451,452],{"class":48,"line":68},[46,453,454],{"class":52},"...\n",[46,456,457,459,461,464,466,469,472,474],{"class":48,"line":83},[46,458,53],{"class":52},[46,460,10],{"class":56},[46,462,463],{"class":280}," id",[46,465,284],{"class":52},[46,467,468],{"class":287},"\"preparation\"",[46,470,471],{"class":52},">Préparation\u003C\u002F",[46,473,10],{"class":56},[46,475,65],{"class":52},[73,477,261,478,480],{},[25,479,424],{}," doit être unique dans la page, sans espace. Cliquer sur le lien fait défiler la page jusqu'au titre.",[10,482,484],{"id":483},"les-liens-externes","Les liens externes",[73,486,487,488,491],{},"Pour ouvrir un lien dans un nouvel onglet, ajoute ",[25,489,490],{},"target=\"_blank\""," :",[37,493,495],{"className":39,"code":494,"language":41,"meta":42,"style":42},"\u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Ffr\u002F\" target=\"_blank\">MDN\u003C\u002Fa>\n",[25,496,497],{"__ignoreMap":42},[46,498,499,501,503,505,507,509,512,514,517,520,522],{"class":48,"line":49},[46,500,53],{"class":52},[46,502,277],{"class":56},[46,504,281],{"class":280},[46,506,284],{"class":52},[46,508,288],{"class":287},[46,510,511],{"class":280}," target",[46,513,284],{"class":52},[46,515,516],{"class":287},"\"_blank\"",[46,518,519],{"class":52},">MDN\u003C\u002F",[46,521,277],{"class":56},[46,523,65],{"class":52},[525,526,527],"warning",{},[73,528,529],{},"Ouvrir un nouvel onglet surprend l'utilisateur et casse le bouton « retour ». Réserve-le aux cas utiles, et préviens-le dans le texte du lien, par exemple « MDN (nouvel onglet) ».",[10,531,533],{"id":532},"les-images","Les images",[37,535,538],{"className":39,"code":536,"filename":537,"language":41,"meta":42,"style":42},"\u003Cimg src=\"images\u002Ftarte.jpg\" alt=\"Tarte aux pommes dorée sur un plat\" width=\"600\" height=\"400\">\n","index.html",[25,539,540],{"__ignoreMap":42},[46,541,542,544,547,550,552,555,558,560,563,566,568,571,574,576,579],{"class":48,"line":49},[46,543,53],{"class":52},[46,545,546],{"class":56},"img",[46,548,549],{"class":280}," src",[46,551,284],{"class":52},[46,553,554],{"class":287},"\"images\u002Ftarte.jpg\"",[46,556,557],{"class":280}," alt",[46,559,284],{"class":52},[46,561,562],{"class":287},"\"Tarte aux pommes dorée sur un plat\"",[46,564,565],{"class":280}," width",[46,567,284],{"class":52},[46,569,570],{"class":287},"\"600\"",[46,572,573],{"class":280}," height",[46,575,284],{"class":52},[46,577,578],{"class":287},"\"400\"",[46,580,65],{"class":52},[73,582,583,586],{},[25,584,585],{},"\u003Cimg>"," est un élément vide : pas de balise fermante. Ses attributs importants :",[15,588,589,595,605],{},[18,590,591,594],{},[25,592,593],{},"src"," : le chemin du fichier image, exprimé comme pour un lien.",[18,596,597,600,601,604],{},[25,598,599],{},"alt"," : le ",[228,602,603],{},"texte alternatif",", lu à la place de l'image.",[18,606,607,610,611,614],{},[25,608,609],{},"width"," et ",[25,612,613],{},"height"," : les dimensions en pixels, pour que le navigateur réserve la place avant le chargement.",[10,616,618],{"id":617},"écrire-un-bon-texte-alternatif","Écrire un bon texte alternatif",[73,620,621,622,624],{},"Le texte ",[25,623,599],{}," s'affiche si l'image ne charge pas, et il est lu par les lecteurs d'écran. Décris ce que l'image apporte à la page, en une phrase courte.",[73,626,627,628,630,631,634],{},"Si l'image est purement décorative, écris un ",[25,629,599],{}," vide : ",[25,632,633],{},"alt=\"\"",". Le lecteur d'écran l'ignore alors. N'omets jamais l'attribut : sans lui, certains lecteurs lisent le nom du fichier.",[10,636,638],{"id":637},"légender-une-image","Légender une image",[37,640,642],{"className":39,"code":641,"language":41,"meta":42,"style":42},"\u003Cfigure>\n  \u003Cimg src=\"images\u002Ftarte.jpg\" alt=\"Tarte aux pommes dorée\" width=\"600\" height=\"400\">\n  \u003Cfigcaption>Ma tarte, à la sortie du four.\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n",[25,643,644,653,687,701],{"__ignoreMap":42},[46,645,646,648,651],{"class":48,"line":49},[46,647,53],{"class":52},[46,649,650],{"class":56},"figure",[46,652,65],{"class":52},[46,654,655,658,660,662,664,666,668,670,673,675,677,679,681,683,685],{"class":48,"line":68},[46,656,657],{"class":52},"  \u003C",[46,659,546],{"class":56},[46,661,549],{"class":280},[46,663,284],{"class":52},[46,665,554],{"class":287},[46,667,557],{"class":280},[46,669,284],{"class":52},[46,671,672],{"class":287},"\"Tarte aux pommes dorée\"",[46,674,565],{"class":280},[46,676,284],{"class":52},[46,678,570],{"class":287},[46,680,573],{"class":280},[46,682,284],{"class":52},[46,684,578],{"class":287},[46,686,65],{"class":52},[46,688,689,691,694,697,699],{"class":48,"line":83},[46,690,657],{"class":52},[46,692,693],{"class":56},"figcaption",[46,695,696],{"class":52},">Ma tarte, à la sortie du four.\u003C\u002F",[46,698,693],{"class":56},[46,700,65],{"class":52},[46,702,703,706,708],{"class":48,"line":97},[46,704,705],{"class":52},"\u003C\u002F",[46,707,650],{"class":56},[46,709,65],{"class":52},[73,711,712,715,716,719],{},[25,713,714],{},"\u003Cfigure>"," regroupe une illustration et sa légende ",[25,717,718],{},"\u003Cfigcaption>",". Utilise-le quand la légende fait partie du contenu.",[73,721,722,723,726],{},"Pour une page avec beaucoup d'images, ajoute ",[25,724,725],{},"loading=\"lazy\""," à celles qui sont plus bas : le navigateur les charge seulement quand on s'en approche.",[728,729,730],"tip",{},[73,731,732,733,736,737,145],{},"Mets tes images dans un dossier ",[25,734,735],{},"images\u002F"," et donne-leur des noms clairs, en minuscules et sans espace : ",[25,738,739],{},"tarte-pommes.jpg",[10,741,743],{"id":742},"à-retenir","À retenir",[15,745,746,758,765,772,779],{},[18,747,748,749,751,752,754,755,757],{},"Les titres ",[25,750,114],{}," à ",[25,753,118],{}," décrivent le plan de la page : un seul ",[25,756,114],{},", sans sauter de niveau.",[18,759,760,610,762,764],{},[25,761,179],{},[25,763,192],{}," expriment un sens, pas seulement un style.",[18,766,767,768,771],{},"Un lien s'écrit ",[25,769,770],{},"\u003Ca href=\"...\">texte\u003C\u002Fa>",", avec un texte qui décrit la destination.",[18,773,774,775,778],{},"Un chemin relatif part du fichier actuel, et une ancre ",[25,776,777],{},"#id"," mène à un endroit de la page.",[18,780,781,782,784],{},"Toute image a un ",[25,783,599],{}," : descriptif, ou vide si elle est purement décorative.",[786,787,788],"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 .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);}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}",{"title":42,"searchDepth":68,"depth":83,"links":790},[791,792,793,794,795,796,797,798,799,800,801],{"id":12,"depth":68,"text":13},{"id":34,"depth":68,"text":35},{"id":148,"depth":68,"text":149},{"id":257,"depth":68,"text":258},{"id":315,"depth":68,"text":316},{"id":413,"depth":68,"text":414},{"id":483,"depth":68,"text":484},{"id":532,"depth":68,"text":533},{"id":617,"depth":68,"text":618},{"id":637,"depth":68,"text":638},{"id":742,"depth":68,"text":743},"Structurer du texte avec des titres et des paragraphes, créer des liens entre pages et insérer des images.","md",{},[806,807,264,308,409,420,546,599,650,808],"titres","paragraphe","loading lazy",true,"debutant","\u002Fhtml\u002Ftexte-liens-images",[813],"\u002Fhtml\u002Fstructure-du-document",[815,819,822],{"nom":816,"url":817,"type":818},"MDN, Titres et paragraphes","https:\u002F\u002Fdeveloper.mozilla.org\u002Ffr\u002Fdocs\u002FLearn_web_development\u002FCore\u002FStructuring_content\u002FHeadings_and_paragraphs","cours",{"nom":820,"url":821,"type":818},"MDN, Créer des liens","https:\u002F\u002Fdeveloper.mozilla.org\u002Ffr\u002Fdocs\u002FLearn_web_development\u002FCore\u002FStructuring_content\u002FCreating_links",{"nom":823,"url":824,"type":818},"MDN, Images en HTML","https:\u002F\u002Fdeveloper.mozilla.org\u002Ffr\u002Fdocs\u002FLearn_web_development\u002FCore\u002FStructuring_content\u002FHTML_images",{"title":5,"description":802},[827,828],{"nom":820,"url":821},{"nom":823,"url":824},"html\u002F03.texte-liens-images","yhA9yH5MNzO2Qosuzyon-SbM331crkaT8dJkF3Gc09w",[832,836,839,840,844,848,852],{"path":833,"title":834,"stem":835},"\u002Fhtml\u002Fune-page-web","Qu'est-ce que HTML ?","html\u002F01.une-page-web",{"path":813,"title":837,"stem":838},"La structure d'un document","html\u002F02.structure-du-document",{"path":811,"title":5,"stem":829},{"path":841,"title":842,"stem":843},"\u002Fhtml\u002Flistes-et-tableaux","Listes et tableaux","html\u002F04.listes-et-tableaux",{"path":845,"title":846,"stem":847},"\u002Fhtml\u002Fsemantique-et-accessibilite","Sémantique et accessibilité","html\u002F05.semantique-et-accessibilite",{"path":849,"title":850,"stem":851},"\u002Fhtml\u002Fformulaires-et-validation","Formulaires et validation","html\u002F06.formulaires-et-validation",{"path":853,"title":854,"stem":855},"\u002Fhtml","HTML","html\u002Findex",[857,859],{"title":837,"path":813,"stem":838,"description":858,"children":-1},"Le doctype, l'élément html, le head et le body forment le squelette de toute page HTML.",{"title":842,"path":841,"stem":843,"description":860,"children":-1},"Présenter des ingrédients et des étapes avec des listes, et des données chiffrées avec des tableaux accessibles.",[862],{"path":813,"title":837,"ligne":41},[864,865,866,867,869,870,872],{"path":833,"title":834,"niveau":810,"stem":835},{"path":813,"title":837,"niveau":810,"stem":838},{"path":811,"title":5,"niveau":810,"stem":829},{"path":841,"title":842,"niveau":868,"stem":843},"intermediaire",{"path":845,"title":846,"niveau":868,"stem":847},{"path":849,"title":850,"niveau":871,"stem":851},"avance",{"path":853,"title":854,"niveau":873,"stem":855},"memo",1794583441997]