{"id":6417,"date":"2024-02-01T14:35:12","date_gmt":"2024-02-01T13:35:12","guid":{"rendered":"https:\/\/www.swash-formation.fr\/?post_type=formation&#038;p=6417"},"modified":"2026-08-11T22:25:50","modified_gmt":"2026-08-11T20:25:50","slug":"html5-css3-reussir-sa-prise-en-main","status":"publish","type":"formation","link":"https:\/\/www.swash-formation.fr\/formation\/html5-css3-reussir-sa-prise-en-main\/","title":{"rendered":"HTML5 \/ CSS3&nbsp;: r\u00e9ussir sa prise en main"},"template":"","domaine":[12],"motcle":[23,364,22,365],"metier":[],"etiquette":[],"type_ra":[80],"logiciel":[],"class_list":["post-6417","formation","type-formation","status-publish","hentry","domaine-formation-ux-ui-webdesign","motcle-interface","motcle-newsletter","motcle-projet","motcle-site","type_ra-inter","no-post-thumbnail"],"acf":{"FOR_Format":"80","FOR_SousTitre":"Structurer, mettre en forme et publier des pages web responsive en HTML et CSS en respectant les bonnes pratiques d\u2019accessibilit\u00e9","FOR_Jours":2,"FOR_Heures":14,"FOR_Duree":"","FOR_DureeTxt":"2 jours \/ 14 heures","FOR_Prix":1500,"FOR_Ref":"W12","FOR_Niveau":"Initiation","FOR_PrixComplet":"1 500 euros HT %2F Soit 1 800 euros TTC","FOR_PrixCourt":"1 500 \u20ac HT","FOR_Support":"","FOR_ProgPdf":"","FOR_Intervenants":"","FOR_Comp":"<p class=\"PDq2pG_selectionAnchorContainer\" data-start=\"1966\" data-end=\"2198\">Cr\u00e9er, modifier et publier une page web simple en HTML et CSS en structurant correctement les contenus, en adaptant la mise en page aux diff\u00e9rents \u00e9crans et en appliquant les principaux standards d\u2019accessibilit\u00e9 et de qualit\u00e9 du Web<\/p>\r\n<p data-start=\"2200\" data-end=\"2213\">\u00a0<\/p>","FOR_Obj":"<ul>\r\n\t<li>Situer HTML, CSS et JavaScript dans l\u2019environnement de production Web<\/li>\r\n\t<li>Structurer une page HTML<\/li>\r\n\t<li>Mettre en forme une page et construire une mise en page responsive avec CSS<\/li>\r\n\t<li>Ajouter des effets visuels et comprendre le r\u00f4le de JavaScript dans l\u2019interactivit\u00e9<\/li>\r\n\t<li>Publier, tester et corriger une page Web<\/li>\r\n<\/ul>","FOR_Valider":"<ul>\r\n\t<li>votre projet et le contexte de votre demande pour co-construire le programme d\u00e9finitif<\/li>\r\n\t<li>le format\u00a0: pr\u00e9sentiel et\/ou distanciel<\/li>\r\n\t<li>le tarif\u00a0: calcul\u00e9 selon le temps de pr\u00e9paration, les moyens \u00e0 mobiliser, le nombre de jours, le lieu de la formation\u2026<\/li>\r\n\t<li>*la dur\u00e9e\u00a0: \u00e0 confirmer selon les pr\u00e9requis et les objectifs \u00e0 atteindre par les apprenants<\/li>\r\n<\/ul>","FOR_5Raisons":"","FOR_Public":"<p class=\"PDq2pG_selectionAnchorContainer\" data-start=\"2562\" data-end=\"2717\">Cette formation s\u2019adresse aux professionnels qui souhaitent comprendre et modifier le code d\u2019une page Web ou acqu\u00e9rir les bases de l\u2019int\u00e9gration HTML\/CSS :<\/p>\r\n<ul>\r\n\t<li data-start=\"2719\" data-end=\"2753\">Graphistes et designers graphiques<\/li>\r\n\t<li data-start=\"2719\" data-end=\"2753\">UI designers<\/li>\r\n\t<li data-start=\"2719\" data-end=\"2753\">Charg\u00e9s et responsables de communication digitale<\/li>\r\n\t<li data-start=\"2719\" data-end=\"2753\">Content managers et webmasters<\/li>\r\n\t<li data-start=\"2719\" data-end=\"2753\">Chefs de projet Web ou digital<\/li>\r\n\t<li data-start=\"2719\" data-end=\"2753\">Professionnels amen\u00e9s \u00e0 intervenir dans un CMS ou sur des contenus Web<\/li>\r\n\t<li data-start=\"2719\" data-end=\"2753\">Toute personne souhaitant acqu\u00e9rir les fondamentaux de l\u2019int\u00e9gration Web<\/li>\r\n<\/ul>\r\n<p data-start=\"3047\" data-end=\"3225\">Elle convient aux d\u00e9butants qui souhaitent comprendre la structure d\u2019une page Web ou intervenir sur du code existant.<\/p>","FOR_Prerequis":"<p>Aucune connaissance pr\u00e9alable de HTML, CSS ou JavaScript n\u2019est n\u00e9cessaire. \u00catre \u00e0 l\u2019aise avec l\u2019utilisation courante d\u2019un ordinateur, d\u2019un navigateur et la gestion de fichiers. Conna\u00eetre les principes \u00e9l\u00e9mentaires de navigation et le vocabulaire courant du Web<\/p>\r\n<p>En distanciel :<br \/>\r\n- Disposer d\u2019un navigateur r\u00e9cent et d\u2019un \u00e9diteur de code comme Visual Studio Code install\u00e9 avant la formation<\/p>","FOR_Programme":"<h3 class=\"chapitre\">Situer HTML, CSS et JavaScript dans l\u2019environnement de production Web<\/h3>\r\n<ul>\r\n\t<li class=\"PDq2pG_selectionAnchorContainer\" data-start=\"3719\" data-end=\"3806\">Identifier le r\u00f4le respectif de HTML, CSS et JavaScript dans la cr\u00e9ation d\u2019une page Web<\/li>\r\n\t<li class=\"PDq2pG_selectionAnchorContainer\" data-start=\"3719\" data-end=\"3806\">Comprendre la s\u00e9paration entre structure des contenus, pr\u00e9sentation graphique et comportements interactifs<\/li>\r\n\t<li class=\"PDq2pG_selectionAnchorContainer\" data-start=\"3719\" data-end=\"3806\">D\u00e9crire l\u2019organisation des fichiers d\u2019un site Web<\/li>\r\n\t<li class=\"PDq2pG_selectionAnchorContainer\" data-start=\"3719\" data-end=\"3806\">Comprendre les principes du Responsive Web Design et d\u2019une approche adapt\u00e9e aux diff\u00e9rentes tailles d\u2019\u00e9cran<\/li>\r\n\t<li class=\"PDq2pG_selectionAnchorContainer\" data-start=\"3719\" data-end=\"3806\">Identifier les premiers enjeux d\u2019accessibilit\u00e9 li\u00e9s \u00e0 la structure, \u00e0 la lisibilit\u00e9 et aux contenus<\/li>\r\n\t<li class=\"PDq2pG_selectionAnchorContainer\" data-start=\"3719\" data-end=\"3806\">D\u00e9couvrir le r\u00f4le d\u2019un \u00e9diteur de code et prendre en main Visual Studio Code<\/li>\r\n\t<li class=\"PDq2pG_selectionAnchorContainer\" data-start=\"3719\" data-end=\"3806\">Utiliser les outils de d\u00e9veloppement du navigateur pour observer la structure HTML et les styles CSS d\u2019une page<\/li>\r\n<\/ul>\r\n<div class=\"exo\"><em>\u2192 Activit\u00e9 : analyser plusieurs sites Web et identifier le r\u00f4le de HTML, CSS et JavaScript<\/em><\/div>\r\n<h3 class=\"chapitre\">Structurer une page HTML<\/h3>\r\n<ul>\r\n\t<li>Comprendre la structure g\u00e9n\u00e9rale d\u2019un document HTML<\/li>\r\n\t<li>Hi\u00e9rarchiser un contenu avec les titres, paragraphes et listes<\/li>\r\n\t<li>Distinguer la structure s\u00e9mantique du rendu graphique d\u2019un texte<\/li>\r\n\t<li>Utiliser les principales balises de structure comme header, nav, main, section, article et footer<\/li>\r\n\t<li>Comprendre le r\u00f4le de div lorsqu\u2019aucune balise s\u00e9mantique sp\u00e9cifique n\u2019est adapt\u00e9e<\/li>\r\n\t<li>Ajouter des images, liens et contenus multim\u00e9dias<\/li>\r\n\t<li>Utiliser les principaux attributs comme class, id, href, src et alt<\/li>\r\n\t<li>Structurer un tableau simple<\/li>\r\n\t<li>D\u00e9couvrir la structure d\u2019un formulaire et les \u00e9l\u00e9ments form, label et input<\/li>\r\n\t<li>Appliquer les premi\u00e8res bonnes pratiques d\u2019accessibilit\u00e9 : hi\u00e9rarchie des titres, textes alternatifs, intitul\u00e9s de liens et libell\u00e9s de formulaires<\/li>\r\n\t<li>Configurer la balise viewport pour permettre un affichage adapt\u00e9 sur les appareils mobiles<\/li>\r\n<\/ul>\r\n<div class=\"exo\"><em>\u2192 Exercice : structurer une premi\u00e8re page Web<\/em><\/div>\r\n<h3 class=\"chapitre\">Mettre en forme une page et construire une mise en page responsive avec CSS<\/h3>\r\n<ul>\r\n\t<li>Cr\u00e9er une feuille de styles CSS et la relier au document HTML<\/li>\r\n\t<li>Comprendre la syntaxe d\u2019une r\u00e8gle CSS<\/li>\r\n\t<li>Utiliser les s\u00e9lecteurs d\u2019\u00e9l\u00e9ments, de classes et d\u2019identifiants<\/li>\r\n\t<li>D\u00e9couvrir les principales pseudo-classes utiles aux interactions comme hover et focus<\/li>\r\n\t<li>Comprendre le mod\u00e8le de bo\u00eete : contenu, marges internes, bordures et marges externes<\/li>\r\n\t<li>Mettre en forme textes, couleurs, fonds et \u00e9l\u00e9ments graphiques<\/li>\r\n\t<li>G\u00e9rer les polices et la hi\u00e9rarchie typographique<\/li>\r\n\t<li>Utiliser l\u2019inspecteur du navigateur pour tester et corriger les styles<\/li>\r\n\t<li>Organiser les \u00e9l\u00e9ments d\u2019une interface avec Flexbox<\/li>\r\n\t<li>D\u00e9couvrir CSS Grid pour construire des mises en page en lignes et colonnes<\/li>\r\n\t<li>Utiliser des dimensions et espacements adapt\u00e9s \u00e0 une mise en page flexible<\/li>\r\n\t<li>Cr\u00e9er des points de rupture avec les Media Queries<\/li>\r\n\t<li>Adapter la pr\u00e9sentation \u00e0 plusieurs tailles d\u2019\u00e9cran selon une logique responsive<\/li>\r\n<\/ul>\r\n<div class=\"exo\"><em>\u2192 Exercice : mettre en forme la page r\u00e9alis\u00e9e puis adapter sa structure aux \u00e9crans desktop et mobile<\/em><\/div>\r\n<h3 class=\"chapitre\">Ajouter des effets visuels et comprendre le r\u00f4le de JavaScript dans l\u2019interactivit\u00e9<\/h3>\r\n<ul>\r\n\t<li>Utiliser les pseudo-classes pour cr\u00e9er des changements d\u2019\u00e9tat simples<\/li>\r\n\t<li>Ajouter des ombres, coins arrondis et autres effets CSS<\/li>\r\n\t<li>Cr\u00e9er des transitions entre plusieurs \u00e9tats<\/li>\r\n\t<li>Utiliser les transformations CSS pour produire des effets visuels simples<\/li>\r\n\t<li>Distinguer une interaction pouvant \u00eatre r\u00e9alis\u00e9e en HTML\/CSS d\u2019un comportement n\u00e9cessitant JavaScript<\/li>\r\n\t<li>Comprendre comment un fichier JavaScript est reli\u00e9 \u00e0 une page HTML<\/li>\r\n\t<li>Int\u00e9grer et tester un script fourni (sans entrer dans l\u2019apprentissage du langage JavaScript)<\/li>\r\n\t<li>Veiller \u00e0 conserver des interactions lisibles et accessibles au clavier<\/li>\r\n<\/ul>\r\n<div class=\"exo\"><em>\u2192 Exercice : enrichir un menu ou un composant avec des \u00e9tats interactifs et des transitions CSS<\/em><\/div>\r\n<h3 class=\"chapitre\">Publier, tester et corriger une page Web<\/h3>\r\n<ul>\r\n\t<li class=\"PDq2pG_selectionAnchorContainer\" data-start=\"7291\" data-end=\"7387\">Distinguer les r\u00f4les du navigateur, du client, du serveur, du nom de domaine et de l\u2019h\u00e9bergement<\/li>\r\n\t<li class=\"PDq2pG_selectionAnchorContainer\" data-start=\"7291\" data-end=\"7387\">Identifier les principaux fichiers n\u00e9cessaires \u00e0 la publication d\u2019un site<\/li>\r\n\t<li class=\"PDq2pG_selectionAnchorContainer\" data-start=\"7291\" data-end=\"7387\">Comprendre les diff\u00e9rents modes de mise en ligne selon l\u2019h\u00e9bergement<\/li>\r\n\t<li class=\"PDq2pG_selectionAnchorContainer\" data-start=\"7291\" data-end=\"7387\">Publier les fichiers par FTP ou \u00e0 l\u2019aide de l\u2019outil de d\u00e9ploiement propos\u00e9 par l\u2019h\u00e9bergeur<\/li>\r\n\t<li class=\"PDq2pG_selectionAnchorContainer\" data-start=\"7291\" data-end=\"7387\">Contr\u00f4ler les chemins des fichiers, images, feuilles de styles et scripts<\/li>\r\n\t<li class=\"PDq2pG_selectionAnchorContainer\" data-start=\"7291\" data-end=\"7387\">Tester l\u2019affichage sur plusieurs dimensions d\u2019\u00e9cran<\/li>\r\n\t<li class=\"PDq2pG_selectionAnchorContainer\" data-start=\"7291\" data-end=\"7387\">Rep\u00e9rer et corriger les principales erreurs \u00e0 l\u2019aide des outils de d\u00e9veloppement du navigateur<\/li>\r\n\t<li class=\"PDq2pG_selectionAnchorContainer\" data-start=\"7291\" data-end=\"7387\">V\u00e9rifier la structure HTML et les styles CSS avant diffusion<\/li>\r\n\t<li class=\"PDq2pG_selectionAnchorContainer\" data-start=\"7291\" data-end=\"7387\">Contr\u00f4ler le fonctionnement de la page apr\u00e8s sa publication<\/li>\r\n<\/ul>\r\n<div class=\"exo\"><em>\u2192 Exercice : publier la page r\u00e9alis\u00e9e, la tester puis corriger les \u00e9ventuelles erreurs<\/em><\/div>","FOR_Profil":"<p><span style=\"font-weight: 400;\">UI designer avec plus de 10 ans d\u2019exp\u00e9rience en animation de formation.<\/span><\/p>","FOR_Ressources":"<ul>\r\n\t<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Supports de cours d\u00e9mat\u00e9rialis\u00e9s<\/span><\/li>\r\n\t<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Abonnement de 3 mois \u00e0 <a href=\"https:\/\/fr.tuto.com\" target=\"_blank\" rel=\"noopener\">tuto.com<\/a><\/span><\/li>\r\n\t<li style=\"font-weight: 400;\">Acc\u00e8s illimit\u00e9 par mail \u00e0 la hotline Swash<\/li>\r\n<\/ul>","FOR_ModPres":"<h4><strong>Parcours p\u00e9dagogique\u00a0: <\/strong><\/h4>\r\n<p><span style=\"font-weight: 400;\">Quiz de positionnement <span class=\"flechD\">\u276f\u00a0<\/span>2 jours continus en pr\u00e9sentiel <span class=\"flechD\">\u276f <\/span><\/span><span class=\"s1\">\u00c9valuation des acquis<\/span><\/p>\r\n<h4><strong>M\u00e9thode p\u00e9dagogique : <\/strong><\/h4>\r\n<p><span style=\"font-weight: 400;\">Expositive + d\u00e9monstrative : expos\u00e9s th\u00e9oriques, d\u00e9monstrations, mise en pratique, feedbacks personnalis\u00e9s<\/span><\/p>\r\n<h4><strong>Moyens techniques : <\/strong><\/h4>\r\n<ul>\r\n\t<li><span style=\"font-weight: 400;\">1 poste par participant (Mac ou PC, selon votre choix)<\/span>, fourni par nos soins, \u00e9quip\u00e9 des logiciels utiles<\/li>\r\n\t<li>Poste de l\u2019intervenant reli\u00e9 \u00e0 un grand \u00e9cran ou vid\u00e9oprojecteur<\/li>\r\n<\/ul>","FOR_ModDist":"<h4>Parcours p\u00e9dagogique\u00a0:<\/h4>\r\n<p><span style=\"font-weight: 400;\">Quiz de positionnement <span class=\"flechD\">\u276f<\/span> 2 classes virtuelles discontinues (2 x 1 jour) <span class=\"flechD\">\u276f<\/span> <\/span><span class=\"s1\">\u00c9valuation des acquis<\/span><\/p>\r\n<h4>M\u00e9thode p\u00e9dagogique :<\/h4>\r\n<p><span style=\"font-weight: 400;\">Expositive + d\u00e9monstrative : expos\u00e9s th\u00e9oriques, d\u00e9monstrations, mise en pratique, travail individuel inter-sessions, feedbacks personnalis\u00e9s<\/span><\/p>\r\n<h4>Moyens techniques\u00a0:<\/h4>\r\n<ul>\r\n\t<li>Classe virtuelle cr\u00e9\u00e9e par nos soins\u00a0<\/li>\r\n\t<li>Chaque apprenant participe \u00e0 la session avec son ordinateur, connect\u00e9 \u00e0 Internet, et \u00e9quip\u00e9 :\r\n\r\n<ul>\r\n\t<li>d\u2019un micro et d\u2019une cam\u00e9ra<\/li>\r\n\t<li><span style=\"font-weight: 400;\">des outils \/ logiciels utiles (\u00e9diteurs gratuits \u00e0 installer en amont \/ informations pr\u00e9cis\u00e9es \u00e0 l\u2019inscription)<\/span><\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>","FOR_Eval":"<ul>\r\n\t<li><span style=\"font-weight: 400;\">Validation des acquis pendant la formation gr\u00e2ce \u00e0 des quiz et \u00e0 la r\u00e9alisation d\u2019exercices pratiques<\/span><\/li>\r\n\t<li>Suivi d'acquisition des objectifs p\u00e9dagogiques par l'intervenant<\/li>\r\n\t<li><span style=\"font-weight: 400;\"> \u00c9valuation \u00e0 chaud (remplie en fin de formation) et \u00e0 froid (\u00e0 60 jours)<\/span><\/li>\r\n<\/ul>","for_pourquoi":"","FOR_PlanCond":1,"FOR_PlanDist":[{"FOR_Dates":"les 14 et 21 f\u00e9vrier 2025","FOR_Mentorat":null,"FOR_DateOff":"20250214"},{"FOR_Dates":"les 5 et 12 d\u00e9cembre 2025","FOR_Mentorat":null,"FOR_DateOff":"20251205"},{"FOR_Dates":"les 23 et 30 novembre 2026","FOR_Mentorat":null,"FOR_DateOff":"20261123"},{"FOR_Dates":"les 19 et 26 avril 2027","FOR_Mentorat":null,"FOR_DateOff":"20270419"},{"FOR_Dates":"les 4 et 11 octobre 2027","FOR_Mentorat":null,"FOR_DateOff":"20271004"}],"FOR_PlanPres":[{"FOR_Dates":"les 17 et 18 mars 2025","FOR_Mentorat":null,"FOR_DateOff":"20250317"},{"FOR_Dates":"les 10 et 11 juin 2025","FOR_Mentorat":null,"FOR_DateOff":"20250610"},{"FOR_Dates":"les 29 et 30 septembre 2025","FOR_Mentorat":null,"FOR_DateOff":"20250929"},{"FOR_Dates":"les 24 et 25 novembre 2025","FOR_Mentorat":null,"FOR_DateOff":"20251124"},{"FOR_Dates":"les 19 et 20 f\u00e9vrier 2026","FOR_Mentorat":null,"FOR_DateOff":"20260219"},{"FOR_Dates":"les 14 et 15 septembre 2026","FOR_Mentorat":null,"FOR_DateOff":"20260914"},{"FOR_Dates":"les 21 et 22 d\u00e9cembre 2026","FOR_Mentorat":null,"FOR_DateOff":"20261221"},{"FOR_Dates":"les 1 et 2 f\u00e9vrier 2027","FOR_Mentorat":null,"FOR_DateOff":"20270201"},{"FOR_Dates":"les 10 et 11 mai 2027","FOR_Mentorat":null,"FOR_DateOff":"20270510"},{"FOR_Dates":"les 8 et 9 septembre 2027","FOR_Mentorat":null,"FOR_DateOff":"20270908"},{"FOR_Dates":"les 8 et 9 d\u00e9cembre 2027","FOR_Mentorat":null,"FOR_DateOff":"20271208"}],"for_tag-new":false,"for_tag-update":true},"_links":{"self":[{"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/formation\/6417","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/formation"}],"about":[{"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/types\/formation"}],"wp:attachment":[{"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/media?parent=6417"}],"wp:term":[{"taxonomy":"domaine","embeddable":true,"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/domaine?post=6417"},{"taxonomy":"motcle","embeddable":true,"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/motcle?post=6417"},{"taxonomy":"metier","embeddable":true,"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/metier?post=6417"},{"taxonomy":"etiquette","embeddable":true,"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/etiquette?post=6417"},{"taxonomy":"type_ra","embeddable":true,"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/type_ra?post=6417"},{"taxonomy":"logiciel","embeddable":true,"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/logiciel?post=6417"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}