{"id":286,"date":"2026-05-26T00:26:08","date_gmt":"2026-05-25T22:26:08","guid":{"rendered":"https:\/\/cours.artecom.studio\/nepduweb\/?p=286"},"modified":"2026-05-26T00:26:08","modified_gmt":"2026-05-25T22:26:08","slug":"mementos-2","status":"publish","type":"post","link":"https:\/\/cours.artecom.studio\/nepduweb\/2026\/05\/26\/mementos-2\/","title":{"rendered":"M\u00e9mentos"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong><a href=\"http:\/\/www.allocine.fr\/film\/fichefilm_gen_cfilm=25744.html\" target=\"_blank\" rel=\"noreferrer noopener\">Memento<\/a><\/strong>, c&rsquo;est le titre d&rsquo;un film assez m\u00e9connu de Christopher Nolan (avant qu&rsquo;il ne devienne hyper c\u00e9l\u00e8bre avec <strong>Batman Begins<\/strong>), o\u00f9 le personnage principal a perdu la m\u00e9moire et note tout sur divers supports pour se souvenir de ce qu&rsquo;il a fait quelques minutes auparavant. Pour \u00e9crire du code web, quand on n&rsquo;a pas une formation d&rsquo;ing\u00e9nieur informatique, il vaut mieux faire comme lui : avoir toujours sur\u00a0 soi ses m\u00e9mentos HTML et CSS\u2026<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"150\" height=\"150\" class=\"wp-image-448\" style=\"width: 150px;\" src=\"https:\/\/i0.wp.com\/cours.artecom.studio\/nepduweb\/wp-content\/uploads\/sites\/2\/2026\/05\/memento-affiche-de-film-120x160-cm-2000-guy-pearce-christopher-nolan.jpg?resize=150%2C150&#038;ssl=1\" alt=\"\" srcset=\"https:\/\/i0.wp.com\/cours.artecom.studio\/nepduweb\/wp-content\/uploads\/sites\/2\/2026\/05\/memento-affiche-de-film-120x160-cm-2000-guy-pearce-christopher-nolan.jpg?w=835&amp;ssl=1 835w, https:\/\/i0.wp.com\/cours.artecom.studio\/nepduweb\/wp-content\/uploads\/sites\/2\/2026\/05\/memento-affiche-de-film-120x160-cm-2000-guy-pearce-christopher-nolan.jpg?resize=300%2C300&amp;ssl=1 300w, https:\/\/i0.wp.com\/cours.artecom.studio\/nepduweb\/wp-content\/uploads\/sites\/2\/2026\/05\/memento-affiche-de-film-120x160-cm-2000-guy-pearce-christopher-nolan.jpg?resize=150%2C150&amp;ssl=1 150w, https:\/\/i0.wp.com\/cours.artecom.studio\/nepduweb\/wp-content\/uploads\/sites\/2\/2026\/05\/memento-affiche-de-film-120x160-cm-2000-guy-pearce-christopher-nolan.jpg?resize=768%2C768&amp;ssl=1 768w, https:\/\/i0.wp.com\/cours.artecom.studio\/nepduweb\/wp-content\/uploads\/sites\/2\/2026\/05\/memento-affiche-de-film-120x160-cm-2000-guy-pearce-christopher-nolan.jpg?resize=200%2C200&amp;ssl=1 200w, https:\/\/i0.wp.com\/cours.artecom.studio\/nepduweb\/wp-content\/uploads\/sites\/2\/2026\/05\/memento-affiche-de-film-120x160-cm-2000-guy-pearce-christopher-nolan.jpg?resize=520%2C520&amp;ssl=1 520w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/><br><a href=\"http:\/\/www.allocine.fr\/video\/player_gen_cmedia=19446082&amp;cfilm=25744.html\"><strong>Memento<\/strong> Bande-annonce <\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Des r\u00e9f\u00e9rences, en ligne ou \u00e0 t\u00e9l\u00e9charger<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Les sites de r\u00e9f\u00e9rence du W3C<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Pour nous rem\u00e9morer en permanence <em>toutes <\/em>les balises HTML et les propri\u00e9t\u00e9s des CSS, nous utiliserons les sites de r\u00e9f\u00e9rence du W3C:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"http:\/\/www.w3schools.com\/tags\/default.asp\" target=\"_blank\" rel=\"noreferrer noopener\">HTML reference<\/a><\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignright is-resized\"><img decoding=\"async\" src=\"https:\/\/s14-eu5.startpage.com\/cgi-bin\/serveimage?url=https%3A%2F%2Fcamo.githubusercontent.com%2F62043de0c3dec54f8a7fcc46e515dc7574a62ef7%2F68747470733a2f2f73332d75732d776573742d322e616d617a6f6e6177732e636f6d2f7465737464726976656e6c6561726e696e676275636b65742f68746d6c6373732e6a7067&amp;sp=728dfc2c6734313cc8e193626806cd6d\" alt=\"\" style=\"width:163px;height:108px\"\/><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"http:\/\/www.w3schools.com\/cssref\/default.asp\" target=\"_blank\" rel=\"noreferrer noopener\">CSS reference<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Ce ne sont pas \u00e0 proprement parler des m\u00e9mentos (des glossaires, en quelque sorte), mais plut\u00f4t des dictionnaires exhaustifs. On y trouve m\u00eame&nbsp; les balises les plus exotiques, et les moins usit\u00e9es.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Vous pouvez les mettre en onglets permanents de votre navigateur (ajoutez-y le <a href=\"https:\/\/validator.w3.org\/unicorn\/\" target=\"_blank\" rel=\"noreferrer noopener\">validateur HTML et CSS<\/a>, tant que vous y \u00eates, il nous sera tr\u00e8s utile !)<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Les m\u00e9mentos d&rsquo;OpenClassrooms<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/openclassrooms.com\/courses\/apprenez-a-creer-votre-site-web-avec-html5-et-css3\/memento-des-balises-html\" target=\"_blank\" rel=\"noreferrer noopener\">m\u00e9mento des balises HTML<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/openclassrooms.com\/courses\/apprenez-a-creer-votre-site-web-avec-html5-et-css3\/memento-des-proprietes-css\" target=\"_blank\" rel=\"noreferrer noopener\">m\u00e9mento des propri\u00e9t\u00e9s CSS<\/a><\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignright is-resized\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/blog.openclassrooms.com\/wp-content\/uploads\/2018\/04\/logo_oc_BtoC_512.png?w=740\" alt=\"\" style=\"width:165px;height:101px\"\/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Pratiques, parce restreints \u00e0 l&rsquo;essentiel, vous y trouverez toujours les balises et les propri\u00e9t\u00e9s essentielles. <br><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">et le <a href=\"http:\/\/www.eric-bellot.fr\/node\/32\" target=\"_blank\" rel=\"noreferrer noopener\">m\u00e9mento des feuilles CSS 2.1<\/a> et le <a href=\"http:\/\/www.eric-bellot.fr\/node\/44\" target=\"_blank\" rel=\"noreferrer noopener\">m\u00e9mento des balises HTML<\/a> propos\u00e9s par <a href=\"http:\/\/www.eric-bellot.fr\/\" target=\"_blank\" rel=\"noreferrer noopener\">Eric Bellot<\/a>, lesquels, bien qu&rsquo;un peu anciens, ont le m\u00e9rite d&rsquo;\u00eatre t\u00e9l\u00e9chargeables (<a href=\"http:\/\/www.eric-bellot.fr\/sites\/default\/files\/memento_css.pdf\" target=\"_blank\" rel=\"noreferrer noopener\">ici<\/a> et <a href=\"http:\/\/www.eric-bellot.fr\/sites\/default\/files\/memento_xhtml_0.pdf\" target=\"_blank\" rel=\"noreferrer noopener\">l\u00e0<\/a>) et taill\u00e9s pour une impression papier.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Les plus pratiques \u00e0 imprimer<\/h3>\n\n\n\n<p class=\"has-very-light-gray-background-color has-background wp-block-paragraph\">Le <a href=\"http:\/\/www.eric-bellot.fr\/node\/32\" target=\"_blank\" rel=\"noreferrer noopener\">m\u00e9mento des feuilles CSS 2.1<\/a> et le <a href=\"http:\/\/www.eric-bellot.fr\/node\/44\" target=\"_blank\" rel=\"noreferrer noopener\">m\u00e9mento des balises HTML<\/a> propos\u00e9s par <a href=\"http:\/\/www.eric-bellot.fr\/\" target=\"_blank\" rel=\"noreferrer noopener\">Eric Bellot<\/a>, datent un peu (XHTML et CSS 2.1) mais sont certainement les plus pratiques pour l&rsquo;impression, et contiennent suffisamment d&rsquo;infos pour \u00e9crire une page web correcte encore aujourd&rsquo;hui<em>.<\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Les plus pratiques \u00e0 consulter en ligne<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Les deux m\u00e9mentos d&rsquo;<strong>Open Classrooms<\/strong> (HTML5 et CSS3) sont non seulement \u00e0 jour, mais pratique \u00e0 consulter en ligne, parce qu&rsquo;ils sont volontairement limit\u00e9s aux balises et aux d\u00e9clarations les plus utiles.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Cot\u00e9 HTML, <a href=\"https:\/\/jaetheme.com\/balises-html5\/\">la liste compl\u00e8te des balises HTML<\/a> de <a href=\"https:\/\/jaetheme.com\" target=\"_blank\" rel=\"noreferrer noopener\">Ja\u00e9Th\u00e8me<\/a> est tr\u00e8s pratique \u00e0 consulter en ligne.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Mais gardez \u00e0 l&rsquo;esprit que les r\u00e9f\u00e9rentiels les plus exhaustifs sont <strong><a href=\"https:\/\/www.w3schools.com\/cssref\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Mais gardez \u00e0 l'esprit que les r\u00e9f\u00e9rentiels les plus exhaustifs sont sur le site du W3C. (ouverture dans un nouvel onglet)\">sur le site du W3C<\/a><\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Et pourquoi pas \u00e0 emporter ?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">J&rsquo;y pense\u2026 \u00e0 l&rsquo;\u00e8re du num\u00e9rique embarqu\u00e9, pourquoi s&rsquo;encombrer encore d&rsquo;une version papier? Pourquoi ne pas toujours avoir ses r\u00e9f\u00e9rences HTML et CSS dans la poche?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Voici une s\u00e9lection d&rsquo;applications pour smartphones pour Android et iOS\u2026 Attention, petit \u00e0 petit, vous devenez <em>web dev<\/em> (\u00e7a s&rsquo;attrape et c&rsquo;est tr\u00e8s contagieux)\u2026<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Pour Android<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"http:\/\/appcrawlr.com\/android\/css3-reference\" target=\"_blank\" rel=\"noreferrer noopener\">CSS3 Reference<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"http:\/\/appcrawlr.com\/android\/html5-reference-2\" target=\"_blank\" rel=\"noreferrer noopener\">HTML5 Reference<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Pour iOS<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/itunes.apple.com\/us\/app\/css-quick-reference\/id397775784?mt=8\" target=\"_blank\" rel=\"noreferrer noopener\">CSS Quick Reference<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/itunes.apple.com\/us\/app\/html-pro-quick-guide\/id395125721?mt=8\" target=\"_blank\" rel=\"noreferrer noopener\">HTML Pro Quick Guide FREE<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Vous voil\u00e0 pr\u00eat(e) \u00e0 coder \u00e0 tout heure et en tout temps ! <br><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Memento, c&rsquo;est le titre d&rsquo;un film assez m\u00e9connu de Christopher Nolan (avant qu&rsquo;il ne devienne hyper c\u00e9l\u00e8bre avec Batman Begins), o\u00f9 le personnage principal a perdu la m\u00e9moire et note&#46;&#46;&#46;<\/p>\n","protected":false},"author":2,"featured_media":108,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[45,11,13,16,48],"tags":[49,43,51,52],"class_list":["post-286","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-a-faire","category-a-lire","category-en-ligne","category-mode-demploi","category-pratique-du-web","tag-cheatsheet","tag-css","tag-html5","tag-memento"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/posts\/286","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/comments?post=286"}],"version-history":[{"count":1,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/posts\/286\/revisions"}],"predecessor-version":[{"id":449,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/posts\/286\/revisions\/449"}],"wp:attachment":[{"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/media?parent=286"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/categories?post=286"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/tags?post=286"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}