{"id":6299,"date":"2017-04-20T09:00:03","date_gmt":"2017-04-20T07:00:03","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=6299"},"modified":"2023-07-11T09:03:52","modified_gmt":"2023-07-11T07:03:52","slug":"cours-initiation-html-css","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/cours-initiation-html-css\/","title":{"rendered":"Cours d\u2019Initiation HTML et CSS – Apprendre les bases du langage pour cr\u00e9er des sites web"},"content":{"rendered":"
Il y a 5 ans je proposais le PDF de mon cours de HTML\/CSS. Il n’est plus vraiment \u00e0 jours sur la partie CSS (pas de flexbox ni de grid layout). A la place je vous proposer plusieurs ressources pour apprendre le HTML\/CSS, gratuitement, en ligne et en fran\u00e7ais.<\/p>\n
Je ne mets plus \u00e0 disposition le PDF de ces cours sur mon site car ils datent de 2017. La partie HTML est encore plus ou moins \u00e0 jours. Mais la partie CSS ne fais mention ni de flexbox, ni de grid layout. <\/strong><\/p>\n Je vous propose \u00e0 la place d’aller voir les ressources suivantes si vous voulez vous former en fran\u00e7ais:<\/p>\n Enfin, si l’anglais ne vous fait pas peur, vous pouvez \u00e9galement trouver deux cours chez Google Web Dev : Learn HTML<\/a> et Learn CSS<\/a><\/p>\n Si vous avez un cours de qualit\u00e9 et souhaitez \u00eatre mentionn\u00e9s ici, contactez moi !<\/em><\/p>\n La communaut\u00e9 web foisonne de ressources sur les derni\u00e8res propri\u00e9t\u00e9s CSS3 et API HTML5 tendances, pourtant, il semble encore difficile de trouver des ressources fiables et faciles d’acc\u00e8s pour les d\u00e9butants.<\/p>\n Partant de ce constat, cela fait plus de 5 ans maintenant que j\u2019interviens dans diff\u00e9rentes structures, \u00e9coles et universit\u00e9s pour donner des formations d\u2019introduction au HTML et CSS<\/strong>. Le public est souvent des \u00e9tudiants et \u00e9tudiantes d\u00e9butantes <\/strong>de fili\u00e8res se destinant \u00e0 travailler dans les m\u00e9tiers du web plus tard (chefs de projets, designers, marketing et communication) mais sans pour autant forc\u00e9ment devenir des int\u00e9grateurs ou des d\u00e9veloppeurs front ou des personnes amen\u00e9es \u00e0 c\u00f4toyer du HTML et CSS sans toujours pour autant le pratiquer assid\u00fbment ou le comprendre (futurs r\u00e9dacteurs webs, community managers, etc.)<\/p>\n Le but de ce cours d\u2019initiation n\u2019est donc pas de faire d\u2019eux des d\u00e9veloppeurs et d\u00e9veloppeuses chevronn\u00e9es, mais de leur permettre de comprendre les bases des langages HTML et CSS<\/strong> pour les aider \u00e0 construire en toute autonomie des pages web simples<\/strong> sans forc\u00e9ment avoir besoin de passer par des \u00e9diteurs WYSIWYG.<\/p>\n Si vous \u00eates int\u00e9gratrice chevronn\u00e9e, vous n\u2019allez effectivement pas apprendre grand chose :D<\/p>\n Dans ces cours je distingue la partie HTML de la partie CSS.<\/p>\n Dans la premi\u00e8re partie d\u00e9di\u00e9e au HTML, nous abordons tout d\u2019abord des g\u00e9n\u00e9ralit\u00e9s sur le langage, la syntaxe<\/strong> des balises<\/strong>, \u00e9l\u00e9ments<\/strong> et attributs<\/strong>, le doctype<\/strong>, balise body<\/strong> et structure d\u2019un document valide ainsi que les balises meta utiles. Nous nous int\u00e9ressons ensuite aux \u00e9l\u00e9ments de structuration du contenu<\/strong> (div, p, titres h1, etc), les liens hypertextes<\/strong>, la mise en forme de texte<\/strong> (strong, em, etc.), les \u00e9l\u00e9ments de liste\u00a0<\/strong>(ul, ol, li), l\u2019ajout d\u2019images<\/strong> et de m\u00e9dias<\/strong> dans une page web pour finir par une petite introduction aux tableaux HTML<\/strong> et aux formulaires HTML<\/strong>. J\u2019essaie \u00e9galement de sensibiliser les \u00e9tudiants et personnes form\u00e9es aux probl\u00e9matiques d’accessibilit\u00e9<\/strong> tout au long de cette partie.<\/p>\n <\/p>\n Dans la partie de formation d\u00e9di\u00e9e au CSS, nous commen\u00e7ons encore une fois par une introduction aux notions de base<\/strong> pour ensuite voir la syntaxe CSS<\/strong>, la g\u00e9n\u00e9alogie, DOM<\/strong> et (une partie des) diff\u00e9rents types de s\u00e9lecteurs<\/strong>, les couleurs<\/strong> et unit\u00e9s CSS<\/strong>, les propri\u00e9t\u00e9s de typographie<\/strong>, polices<\/strong> et puces<\/strong> pour nous int\u00e9resser ensuite aux bordures<\/strong> et arri\u00e8res plans<\/strong>. Une section est ensuite d\u00e9di\u00e9e aux dimensions, margin et padding<\/strong>\u00a0puis aux alignements d’image gr\u00e2ce aux flottants<\/strong>, propri\u00e9t\u00e9\u00a0display<\/strong>, au positionnement relative, absolute et fixed<\/strong> et une petite introduction \u00e0 flexbox, grid-layout et un avant go\u00fbt du responsive<\/strong> pour aller plus loin avec des liens et une bibliographie.<\/p>\n <\/p>\n Encore une fois, le but est vraiment de faire l\u00e0 une introduction, sorte de tutoriel de ce \u00e0 quoi des \u00e9l\u00e8ves d\u00e9butants risquent d’\u00eatre confront\u00e9s<\/strong>, sans pour autant devenir des front-d\u00e9veloppeurs. L\u2019id\u00e9e est de poser des bases, le cours pouvant ensuite \u00eatre compl\u00e9t\u00e9 par des cours plus avanc\u00e9s lors de leur formation.<\/p>\n","protected":false},"excerpt":{"rendered":" Il y a 5 ans je proposais le PDF de mon cours de HTML\/CSS. Il n’est plus vraiment \u00e0 jours sur la partie CSS (pas de flexbox ni de grid layout). A la place je vous proposer plusieurs ressources pour apprendre le HTML\/CSS, gratuitement, en ligne et en fran\u00e7ais.<\/p>\n","protected":false},"author":3,"featured_media":6301,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[31],"tags":[],"yoast_head":"\n\n
2017 – Mon (ancien) cours d’introduction aux langages HTML et au CSS pour les d\u00e9butants<\/h2>\n
Le programme du cours<\/h2>\n
Le cours de HTML<\/h3>\n
Le cours de CSS<\/h3>\n