Accueil > Initiation au Développement Web > Les balises HTML

Les balises HTML à connaître

Téléchargez gratuitement nos fiches pratiques, que ce soit pour préparer un examen, un entretien, ou simplement renforcer vos connaissances tech !

Cheat Sheet n°1 :
les balises HTML

Apprenez les bases du HTML avec notre fiche de révision détaillée. Cette ressource pratique vous offre des explications claires et des exemples concrets pour chaque balise HTML fondamentale. Parfaite pour les débutants ou ceux qui souhaitent rafraîchir leurs connaissances en développement web, cette fiche vous guidera pas à pas dans la maîtrise des éléments clés du HTML.

Notre fiche de révision couvre toutes les balises HTML importantes telles que <div>, <span>, <header>, <footer>, et bien plus encore. Téléchargez cette fiche indispensable pour réviser efficacement et renforcer vos compétences en HTML.

Un outil incontournable pour progresser rapidement et réussir dans le monde du développement web.

Mockup fiche pratique HTML

Obtenir la cheat sheet

Ces articles sont susceptibles de vous intéresser

- Développement Web
- Décryptage
14/03/2024 Temps de lecture 3 min

Pourquoi commencer le code par HTML et CSS ?
Lire l'article
(BlogPost: { "ab" : false, "abStatus" : null, "abTestId" : null, "abVariation" : false, "abVariationAutomated" : false, "absoluteUrl" : "https://www.wildcodeschool.com/fr-fr/blog/pourquoi-commence-t-on-le-code-par-html-et-css", "afterPostBody" : null, "aifeatures" : null, "allowedSlugConflict" : false, "analytics" : null, "analyticsPageId" : "158846848339", "analyticsPageType" : "blog-post", "approvalStatus" : null, "archived" : false, "archivedAt" : 0, "archivedInDashboard" : false, "areCommentsAllowed" : false, "attachedStylesheets" : [ ], "audienceAccess" : "PUBLIC", "author" : null, "authorName" : null, "authorUsername" : null, "blogAuthor" : { "avatar" : "https://2902314.fs1.hubspotusercontent-na1.net/hubfs/2902314/1643117199954.jpeg", "bio" : "", "cdnPurgeEmbargoTime" : null, "cosObjectType" : "BLOG_AUTHOR", "created" : 1689856442783, "deletedAt" : 0, "displayName" : "Amandine Durand", "email" : "", "facebook" : "", "fullName" : "Amandine Durand", "gravatarUrl" : null, "hasSocialProfiles" : true, "id" : 125596338103, "label" : "Amandine Durand", "language" : "fr-fr", "linkedin" : "https://www.linkedin.com/in/amandine-durand-scaling-content/", "name" : "Amandine Durand", "portalId" : 2902314, "slug" : "amandine-durand", "translatedFromId" : null, "translations" : { }, "twitter" : "", "twitterUsername" : "", "updated" : 1695630549678, "userId" : null, "username" : null, "website" : "" }, "blogAuthorId" : 125596338103, "blogPostAuthor" : { "avatar" : "https://2902314.fs1.hubspotusercontent-na1.net/hubfs/2902314/1643117199954.jpeg", "bio" : "", "cdnPurgeEmbargoTime" : null, "cosObjectType" : "BLOG_AUTHOR", "created" : 1689856442783, "deletedAt" : 0, "displayName" : "Amandine Durand", "email" : "", "facebook" : "", "fullName" : "Amandine Durand", "gravatarUrl" : null, "hasSocialProfiles" : true, "id" : 125596338103, "label" : "Amandine Durand", "language" : "fr-fr", "linkedin" : "https://www.linkedin.com/in/amandine-durand-scaling-content/", "name" : "Amandine Durand", "portalId" : 2902314, "slug" : "amandine-durand", "translatedFromId" : null, "translations" : { }, "twitter" : "", "twitterUsername" : "", "updated" : 1695630549678, "userId" : null, "username" : null, "website" : "" }, "blogPostScheduleTaskUid" : null, "blogPublishInstantEmailCampaignId" : null, "blogPublishInstantEmailRetryCount" : null, "blogPublishInstantEmailTaskUid" : null, "blogPublishToSocialMediaTask" : "DONE_NOT_SENT", "blueprintTypeId" : 0, "businessUnitId" : null, "campaign" : null, "campaignName" : null, "campaignUtm" : null, "category" : 3, "categoryId" : 3, "cdnPurgeEmbargoTime" : null, "checkPostLevelAudienceAccessFirst" : true, "clonedFrom" : null, "composeBody" : null, "compositionId" : 0, "contentAccessRuleIds" : [ ], "contentAccessRuleTypes" : [ ], "contentGroup" : 103175636270, "contentGroupId" : 103175636270, "contentTypeCategory" : 3, "contentTypeCategoryId" : 3, "contentTypeId" : null, "created" : 1709203899574, "createdByAgent" : null, "createdById" : 50704370, "createdTime" : 1709203899574, "crmObjectId" : null, "css" : { }, "cssText" : "", "ctaClicks" : null, "ctaViews" : null, "currentState" : "PUBLISHED", "currentlyPublished" : true, "deletedAt" : 0, "deletedBy" : null, "deletedByEmail" : null, "deletedById" : null, "domain" : "", "dynamicPageDataSourceId" : null, "dynamicPageDataSourceType" : null, "dynamicPageHubDbTableId" : null, "enableDomainStylesheets" : null, "enableGoogleAmpOutputOverride" : false, "enableLayoutStylesheets" : null, "errors" : [ ], "featuredImage" : "https://2902314.fs1.hubspotusercontent-na1.net/hubfs/2902314/2024-03-14_POURQUOI_COMMENCER_LE_CODE_PAR_HTML_ET_CSS.jpg", "featuredImageAltText" : "", "featuredImageHeight" : 1333, "featuredImageLength" : 0, "featuredImageWidth" : 2000, "flexAreas" : { }, "folderId" : null, "footerHtml" : null, "freezeDate" : 1710399600000, "generateJsonLdEnabledOverride" : true, "hasContentAccessRules" : false, "hasUserChanges" : true, "headHtml" : null, "header" : null, "htmlTitle" : "Pourquoi commencer le code par HTML et CSS ?", "id" : 158846848339, "includeDefaultCustomCss" : null, "isCaptchaRequired" : true, "isCrawlableByBots" : false, "isDraft" : false, "isInstanceLayoutPage" : false, "isInstantEmailEnabled" : false, "isPublished" : true, "isSocialPublishingEnabled" : false, "keywords" : [ ], "label" : "Pourquoi commencer le code par HTML et CSS ?", "language" : "fr-fr", "lastEditSessionId" : null, "lastEditUpdateId" : null, "layoutSections" : { }, "legacyBlogTabid" : null, "legacyId" : null, "legacyPostGuid" : null, "linkRelCanonicalUrl" : null, "listTemplate" : "", "liveDomain" : "www.wildcodeschool.com", "mab" : false, "mabExperimentId" : null, "mabMaster" : false, "mabVariant" : false, "meta" : { "post_body" : "<p><span style=\"color: #0d0d0d;\">L'histoire de HTML et CSS commence dans les premières années du web. HTML, inventé par Tim Berners-Lee en 1990, était initialement conçu pour répondre au besoin de partager des documents et des informations entre chercheurs dans un format universel. Parallèlement, CSS a été développé et introduit en 1996 pour répondre à la nécessité de séparer le contenu de la présentation sur les pages web. Ensemble, <span style=\"font-weight: bold;\">HTML et CSS ont jeté les bases du développement web tel que nous le connaissons aujourd'hui</span>.</span></p>\n<p> </p>\n<h2 style=\"font-size: 30px;\"><strong><span style=\"color: #000000;\">HTML : la structure de base</span></strong></h2>\n<p>HTML est le <span style=\"font-weight: bold;\">langage de balisage qui sert de fondation à tout le web</span>. Il permet de <span style=\"font-weight: bold;\">structurer le contenu </span>sur les pages web, offrant un squelette sur lequel le reste peut être construit. En utilisant des balises, HTML délimite différents types d'informations, tels que : les paragraphes (<p>), les titres (<h1> à <h6>), les liens (<a href=\"...\">), et les images (<img>), pour n'en citer que quelques-uns.</p>\n<h3 style=\"font-size: 20px;\"><strong><span style=\"color: #000000;\">Exemple : la création d’un blog</span></strong></h3>\n<p>Prenons l'exemple d'un blog. Avec HTML, vous pouvez définir la structure de votre article, incluant un titre avec <em><h1></em>, des sous-titres avec<em> <h2></em>, des paragraphes de texte avec <em><p></em>, et peut-être des images pour illustrer vos propos avec <em><img></em>. Cette structure de base est essentielle pour organiser le contenu de manière logique et accessible, tant pour les humains que pour les moteurs de recherche.</p>\n<p> </p>\n<h2 style=\"font-size: 30px;\"><strong><span style=\"color: #000000;\">CSS : le style visuel</span></strong></h2>\n<p>Une fois la structure de base en place grâce à HTML, CSS entre en jeu pour <span style=\"font-weight: bold;\">transformer cette structure en une page visuellement attrayante</span>. CSS est responsable de<span style=\"font-weight: bold;\"> la présentation visuelle des sites web</span>, permettant aux développeurs de styliser le texte, de définir les couleurs, de manipuler les espacements, de créer des mises en page complexes, et bien plus encore.</p>\n<h3 style=\"font-size: 20px;\"><strong><span style=\"color: #000000;\">Exemple : la personnalisation d'un blog</span></strong></h3>\n<p>Reprenant notre exemple de blog, CSS vous permettrait de personnaliser l'apparence de votre article. Vous pourriez définir une couleur de fond pour votre page, choisir les polices de caractères pour vos titres et paragraphes, espacer vos éléments pour une meilleure lisibilité, et même ajouter des effets au survol sur vos liens pour une interaction utilisateur améliorée. CSS transforme votre structure HTML en une expérience visuelle engageante.</p>\n<p> </p>\n<h2 style=\"font-size: 30px;\"><strong><span style=\"color: #000000;\">L'interaction entre HTML et CSS</span></strong></h2>\n<p>La synergie entre HTML et CSS est au cœur de la création des sites web. Cette interaction permet de séparer efficacement le contenu de la présentation.</p>\n<h3 style=\"font-size: 20px;\"><strong><span style=\"color: #000000;\">Exemple : un site de recettes de cuisine</span></strong></h3>\n<p>Avec HTML, vous structurez chaque recette avec un titre (<em><span style=\"font-size: 16px;\"><h1></span></em> pour le nom de la recette), des sous-titres pour les sections (<em><span style=\"font-size: 16px;\"><h2></span></em> pour les ingrédients et la préparation) et des paragraphes pour les instructions (<em><span style=\"font-size: 16px;\"><p></span></em>). Vous pouvez également inclure des images de chaque plat avec <em><span style=\"font-size: 16px;\"><img></span></em>.</p>\n<p>Avec CSS, vous embellissez cette structure. Vous définissez un style spécifique pour les titres des recettes : une taille police, une couleur à la charte de la marque... </p>\n<p>Cette interaction entre HTML et CSS offre plusieurs avantages:</p>\n<ul>\n<li aria-level=\"1\"><strong>Une maintenance facilitée</strong> : les modifications de style n'exigent des changements que dans les fichiers CSS sans altérer la structure HTML.</li>\n<li aria-level=\"1\"><strong>Des performances optimisées : </strong>la séparation permet aux navigateurs de charger le contenu (HTML) et la mise en page (CSS) de manière plus efficace.</li>\n</ul>\n<p> </p>\n<h2 style=\"font-size: 30px;\"><strong><span style=\"color: #000000;\">Les avantages de commencer par HTML et CSS</span></strong></h2>\n<p>Pour ceux qui débutent en développement web, l'apprentissage par HTML et CSS offre une fondation solide sur laquelle construire des compétences plus avancées.</p>\n<ul>\n<li aria-level=\"1\">\n<p><strong>La facilité d'apprentissage</strong></p>\n</li>\n</ul>\n<p>HTML et CSS sont relativement simples à comprendre et à utiliser. Ils permettent d'obtenir des résultats visuels rapidement, ce qui est souvent gratifiant pour les débutants. Cela aide à construire la confiance nécessaire pour explorer des concepts de programmation plus complexes par la suite.</p>\n<ul>\n<li aria-level=\"1\">\n<p><strong>Une applicabilité universelle</strong></p>\n</li>\n</ul>\n<p>Que vous envisagiez de devenir développeur front-end, back-end, ou full-stack, la connaissance de HTML et CSS est indispensable. Ces langages sont les briques fondamentales de tout le web, et leur maîtrise est une compétence recherchée dans le domaine du développement web.</p>\n<ul>\n<li aria-level=\"1\">\n<p><strong>Une porte d'entrée vers des technologies plus avancées</strong></p>\n</li>\n</ul>\n<p>Après avoir maîtrisé HTML et CSS, les développeurs sont mieux équipés pour apprendre le JavaScript, les bibliothèques et frameworks front-end (comme React ou Vue.js), ainsi que les concepts de développement back-end. Cela ouvre la porte à des projets web plus dynamiques et interactifs, comme les applications web progressives (PWA) ou les sites web à page unique (SPA).</p>\n<p> </p>\n<p>Commencer par HTML et CSS n'est donc pas seulement une tradition dans l'apprentissage du développement web ; c'est une approche pragmatique qui établit une base solide pour tout développeur. Cette fondation permet de naviguer avec confiance dans l'écosystème web en constante évolution tout en restant ancré dans les principes fondamentaux de la création web.</p>\n<p> </p>\n<p>Intéressé pour apprendre le développement web ? Lancez-vous avec <a href=\"/fr-fr/formations-developpement-web\" rel=\"noopener\"><span style=\"font-weight: bold;\">nos formations</span></a> en bootcamp (5 mois), en <a href=\"/fr-fr/formations-developpement-web/formation-developpeur-web-php-a-distance\" rel=\"noopener\"><span style=\"font-weight: bold;\">langage PHP</span></a> ou <a href=\"/fr-fr/formations-developpement-web/formation-developpeur-web-a-distance\" rel=\"noopener\"><span style=\"font-weight: bold;\">en Javascript</span></a>. </p>", "rss_summary" : "<p><span style=\"color: #0d0d0d;\">L'histoire de HTML et CSS commence dans les premières années du web. HTML, inventé par Tim Berners-Lee en 1990, était initialement conçu pour répondre au besoin de partager des documents et des informations entre chercheurs dans un format universel. Parallèlement, CSS a été développé et introduit en 1996 pour répondre à la nécessité de séparer le contenu de la présentation sur les pages web. Ensemble, <span style=\"font-weight: bold;\">HTML et CSS ont jeté les bases du développement web tel que nous le connaissons aujourd'hui</span>.</span></p>\n", "rss_body" : "<p><span style=\"color: #0d0d0d;\">L'histoire de HTML et CSS commence dans les premières années du web. HTML, inventé par Tim Berners-Lee en 1990, était initialement conçu pour répondre au besoin de partager des documents et des informations entre chercheurs dans un format universel. Parallèlement, CSS a été développé et introduit en 1996 pour répondre à la nécessité de séparer le contenu de la présentation sur les pages web. Ensemble, <span style=\"font-weight: bold;\">HTML et CSS ont jeté les bases du développement web tel que nous le connaissons aujourd'hui</span>.</span></p>\n<p> </p>\n<h2 style=\"font-size: 30px;\"><strong><span style=\"color: #000000;\">HTML : la structure de base</span></strong></h2>\n<p>HTML est le <span style=\"font-weight: bold;\">langage de balisage qui sert de fondation à tout le web</span>. Il permet de <span style=\"font-weight: bold;\">structurer le contenu </span>sur les pages web, offrant un squelette sur lequel le reste peut être construit. En utilisant des balises, HTML délimite différents types d'informations, tels que : les paragraphes (<p>), les titres (<h1> à <h6>), les liens (<a href=\"...\">), et les images (<img>), pour n'en citer que quelques-uns.</p>\n<h3 style=\"font-size: 20px;\"><strong><span style=\"color: #000000;\">Exemple : la création d’un blog</span></strong></h3>\n<p>Prenons l'exemple d'un blog. Avec HTML, vous pouvez définir la structure de votre article, incluant un titre avec <em><h1></em>, des sous-titres avec<em> <h2></em>, des paragraphes de texte avec <em><p></em>, et peut-être des images pour illustrer vos propos avec <em><img></em>. Cette structure de base est essentielle pour organiser le contenu de manière logique et accessible, tant pour les humains que pour les moteurs de recherche.</p>\n<p> </p>\n<h2 style=\"font-size: 30px;\"><strong><span style=\"color: #000000;\">CSS : le style visuel</span></strong></h2>\n<p>Une fois la structure de base en place grâce à HTML, CSS entre en jeu pour <span style=\"font-weight: bold;\">transformer cette structure en une page visuellement attrayante</span>. CSS est responsable de<span style=\"font-weight: bold;\"> la présentation visuelle des sites web</span>, permettant aux développeurs de styliser le texte, de définir les couleurs, de manipuler les espacements, de créer des mises en page complexes, et bien plus encore.</p>\n<h3 style=\"font-size: 20px;\"><strong><span style=\"color: #000000;\">Exemple : la personnalisation d'un blog</span></strong></h3>\n<p>Reprenant notre exemple de blog, CSS vous permettrait de personnaliser l'apparence de votre article. Vous pourriez définir une couleur de fond pour votre page, choisir les polices de caractères pour vos titres et paragraphes, espacer vos éléments pour une meilleure lisibilité, et même ajouter des effets au survol sur vos liens pour une interaction utilisateur améliorée. CSS transforme votre structure HTML en une expérience visuelle engageante.</p>\n<p> </p>\n<h2 style=\"font-size: 30px;\"><strong><span style=\"color: #000000;\">L'interaction entre HTML et CSS</span></strong></h2>\n<p>La synergie entre HTML et CSS est au cœur de la création des sites web. Cette interaction permet de séparer efficacement le contenu de la présentation.</p>\n<h3 style=\"font-size: 20px;\"><strong><span style=\"color: #000000;\">Exemple : un site de recettes de cuisine</span></strong></h3>\n<p>Avec HTML, vous structurez chaque recette avec un titre (<em><span style=\"font-size: 16px;\"><h1></span></em> pour le nom de la recette), des sous-titres pour les sections (<em><span style=\"font-size: 16px;\"><h2></span></em> pour les ingrédients et la préparation) et des paragraphes pour les instructions (<em><span style=\"font-size: 16px;\"><p></span></em>). Vous pouvez également inclure des images de chaque plat avec <em><span style=\"font-size: 16px;\"><img></span></em>.</p>\n<p>Avec CSS, vous embellissez cette structure. Vous définissez un style spécifique pour les titres des recettes : une taille police, une couleur à la charte de la marque... </p>\n<p>Cette interaction entre HTML et CSS offre plusieurs avantages:</p>\n<ul>\n<li aria-level=\"1\"><strong>Une maintenance facilitée</strong> : les modifications de style n'exigent des changements que dans les fichiers CSS sans altérer la structure HTML.</li>\n<li aria-level=\"1\"><strong>Des performances optimisées : </strong>la séparation permet aux navigateurs de charger le contenu (HTML) et la mise en page (CSS) de manière plus efficace.</li>\n</ul>\n<p> </p>\n<h2 style=\"font-size: 30px;\"><strong><span style=\"color: #000000;\">Les avantages de commencer par HTML et CSS</span></strong></h2>\n<p>Pour ceux qui débutent en développement web, l'apprentissage par HTML et CSS offre une fondation solide sur laquelle construire des compétences plus avancées.</p>\n<ul>\n<li aria-level=\"1\">\n<p><strong>La facilité d'apprentissage</strong></p>\n</li>\n</ul>\n<p>HTML et CSS sont relativement simples à comprendre et à utiliser. Ils permettent d'obtenir des résultats visuels rapidement, ce qui est souvent gratifiant pour les débutants. Cela aide à construire la confiance nécessaire pour explorer des concepts de programmation plus complexes par la suite.</p>\n<ul>\n<li aria-level=\"1\">\n<p><strong>Une applicabilité universelle</strong></p>\n</li>\n</ul>\n<p>Que vous envisagiez de devenir développeur front-end, back-end, ou full-stack, la connaissance de HTML et CSS est indispensable. Ces langages sont les briques fondamentales de tout le web, et leur maîtrise est une compétence recherchée dans le domaine du développement web.</p>\n<ul>\n<li aria-level=\"1\">\n<p><strong>Une porte d'entrée vers des technologies plus avancées</strong></p>\n</li>\n</ul>\n<p>Après avoir maîtrisé HTML et CSS, les développeurs sont mieux équipés pour apprendre le JavaScript, les bibliothèques et frameworks front-end (comme React ou Vue.js), ainsi que les concepts de développement back-end. Cela ouvre la porte à des projets web plus dynamiques et interactifs, comme les applications web progressives (PWA) ou les sites web à page unique (SPA).</p>\n<p> </p>\n<p>Commencer par HTML et CSS n'est donc pas seulement une tradition dans l'apprentissage du développement web ; c'est une approche pragmatique qui établit une base solide pour tout développeur. Cette fondation permet de naviguer avec confiance dans l'écosystème web en constante évolution tout en restant ancré dans les principes fondamentaux de la création web.</p>\n<p> </p>\n<p>Intéressé pour apprendre le développement web ? Lancez-vous avec <a href=\"/fr-fr/formations-developpement-web\" rel=\"noopener\"><span style=\"font-weight: bold;\">nos formations</span></a> en bootcamp (5 mois), en <a href=\"/fr-fr/formations-developpement-web/formation-developpeur-web-php-a-distance\" rel=\"noopener\"><span style=\"font-weight: bold;\">langage PHP</span></a> ou <a href=\"/fr-fr/formations-developpement-web/formation-developpeur-web-a-distance\" rel=\"noopener\"><span style=\"font-weight: bold;\">en Javascript</span></a>. </p>", "tag_ids" : [ 103173212304, 112529293687 ], "topic_ids" : [ 103173212304, 112529293687 ], "enable_google_amp_output_override" : false, "generate_json_ld_enabled" : true, "post_summary" : "<p><span style=\"color: #0d0d0d;\">L'histoire de HTML et CSS commence dans les premières années du web. HTML, inventé par Tim Berners-Lee en 1990, était initialement conçu pour répondre au besoin de partager des documents et des informations entre chercheurs dans un format universel. Parallèlement, CSS a été développé et introduit en 1996 pour répondre à la nécessité de séparer le contenu de la présentation sur les pages web. Ensemble, <span style=\"font-weight: bold;\">HTML et CSS ont jeté les bases du développement web tel que nous le connaissons aujourd'hui</span>.</span></p>\n", "blog_post_schedule_task_uid" : null, "blog_publish_to_social_media_task" : "DONE_NOT_SENT", "blog_publish_instant_email_task_uid" : null, "blog_publish_instant_email_campaign_id" : null, "blog_publish_instant_email_retry_count" : null, "keywords" : [ ], "html_title" : "Pourquoi commencer le code par HTML et CSS ?", "public_access_rules" : [ ], "public_access_rules_enabled" : false, "use_featured_image" : true, "composition_id" : 0, "is_crawlable_by_bots" : false, "head_html" : null, "footer_html" : null, "attached_stylesheets" : [ ], "enable_domain_stylesheets" : null, "include_default_custom_css" : null, "meta_description" : "L'apprentissage du développement web commence souvent par la maîtrise de deux technologies fondamentales : HTML (HyperText Markup Language) et CSS (Cascading Style Sheets). Cette progression pédagogique n'est pas le fruit du hasard mais une réflexion stratégique sur la manière dont le web est construit et comment il fonctionne. ", "meta_keywords" : null, "past_mab_experiment_ids" : [ ], "deleted_by" : null, "featured_image_alt_text" : "", "layout_sections" : { }, "enable_layout_stylesheets" : null, "tweet" : null, "tweet_at" : null, "campaign_name" : null, "campaign_utm" : null, "tweet_immediately" : false, "publish_immediately" : false, "security_state" : "NONE", "scheduled_update_date" : 0, "placement_guids" : [ ], "property_for_dynamic_page_title" : null, "property_for_dynamic_page_slug" : null, "property_for_dynamic_page_meta_description" : null, "property_for_dynamic_page_featured_image" : null, "property_for_dynamic_page_canonical_url" : null, "preview_image_src" : null, "legacy_blog_tabid" : null, "legacy_post_guid" : null, "performable_variation_letter" : null, "style_override_id" : null, "has_user_changes" : true, "css" : { }, "css_text" : "", "unpublished_at" : 1709289608944, "published_by_id" : 50704370, "allowed_slug_conflict" : false, "ai_features" : null, "link_rel_canonical_url" : null, "page_redirected" : false, "page_expiry_enabled" : null, "page_expiry_date" : null, "page_expiry_redirect_id" : null, "page_expiry_redirect_url" : null, "deleted_by_id" : null, "state_when_deleted" : null, "cloned_from" : null, "staged_from" : null, "personas" : [ ], "compose_body" : null, "featured_image" : "https://2902314.fs1.hubspotusercontent-na1.net/hubfs/2902314/2024-03-14_POURQUOI_COMMENCER_LE_CODE_PAR_HTML_ET_CSS.jpg", "featured_image_width" : 2000, "featured_image_height" : 1333, "publish_timezone_offset" : null, "theme_settings_values" : null, "password" : null, "header" : null, "published_at" : 1710399600989, "last_edit_session_id" : null, "last_edit_update_id" : null, "created_by_agent" : null }, "metaDescription" : "L'apprentissage du développement web commence souvent par la maîtrise de deux technologies fondamentales : HTML (HyperText Markup Language) et CSS (Cascading Style Sheets). Cette progression pédagogique n'est pas le fruit du hasard mais une réflexion stratégique sur la manière dont le web est construit et comment il fonctionne. ", "metaKeywords" : null, "name" : "Pourquoi commencer le code par HTML et CSS ?", "nextPostFeaturedImage" : "https://2902314.fs1.hubspotusercontent-na1.net/hubfs/2902314/2024-03-19_COMMENT_VALORISER_SA_RECONVERSION_DANS_SON_PARCOURS_DE_CANDIDATURE.jpg", "nextPostFeaturedImageAltText" : "", "nextPostName" : "Comment valoriser sa reconversion dans son parcours de candidature ?", "nextPostSlug" : "fr-fr/blog/comment-valoriser-sa-reconversion-dans-son-parcours-de-candidature", "pageExpiryDate" : null, "pageExpiryEnabled" : null, "pageExpiryRedirectId" : null, "pageExpiryRedirectUrl" : null, "pageRedirected" : false, "pageTitle" : "Pourquoi commencer le code par HTML et CSS ?", "parentBlog" : { "absoluteUrl" : "https://www.wildcodeschool.com/fr-fr/blog", "allowComments" : false, "ampBodyColor" : "#404040", "ampBodyFont" : "'Helvetica Neue', Helvetica, Arial, sans-serif", "ampBodyFontSize" : "18", "ampCustomCss" : "", "ampHeaderBackgroundColor" : "#ffffff", "ampHeaderColor" : "#1e1e1e", "ampHeaderFont" : "'Helvetica Neue', Helvetica, Arial, sans-serif", "ampHeaderFontSize" : "36", "ampLinkColor" : "#416bb3", "ampLogoAlt" : "", "ampLogoHeight" : 0, "ampLogoSrc" : "", "ampLogoWidth" : 0, "analyticsPageId" : 103175636270, "attachedStylesheets" : [ ], "audienceAccess" : "PUBLIC", "businessUnitId" : null, "captchaAfterDays" : 7, "captchaAlways" : false, "categoryId" : 3, "cdnPurgeEmbargoTime" : null, "closeCommentsOlder" : 0, "commentDateFormat" : "medium", "commentFormGuid" : "c7bc1329-e868-4cf0-9b1c-23d0a756caa6", "commentMaxThreadDepth" : 1, "commentModeration" : false, "commentNotificationEmails" : [ ], "commentShouldCreateContact" : false, "commentVerificationText" : "", "cosObjectType" : "BLOG", "created" : 1676891663653, "createdDateTime" : 1676891663653, "dailyNotificationEmailId" : null, "dateFormattingLanguage" : null, "defaultGroupStyleId" : "", "defaultNotificationFromName" : "", "defaultNotificationReplyTo" : "", "deletedAt" : 0, "description" : "Faites le plein d'informations liées aux métiers de la tech.", "domain" : "", "domainWhenPublished" : "www.wildcodeschool.com", "emailApiSubscriptionId" : null, "enableGoogleAmpOutput" : true, "enableSocialAutoPublishing" : false, "generateJsonLdEnabled" : true, "header" : null, "htmlFooter" : "", "htmlFooterIsShared" : true, "htmlHead" : "", "htmlHeadIsShared" : true, "htmlKeywords" : [ ], "htmlTitle" : "Le blog de la Wild Code School - Wild Code School", "id" : 103175636270, "ilsSubscriptionListsByType" : { }, "instantNotificationEmailId" : null, "itemLayoutId" : null, "itemTemplateIsShared" : false, "itemTemplatePath" : "MarkentivexWCS/templates/blog-post.html", "label" : "Blog", "language" : "fr-fr", "legacyGuid" : null, "legacyModuleId" : null, "legacyTabId" : null, "listingLayoutId" : null, "listingPageId" : 103175636271, "listingTemplatePath" : "", "liveDomain" : "www.wildcodeschool.com", "monthFilterFormat" : "MMMM yyyy", "monthlyNotificationEmailId" : null, "name" : "Blog", "parentBlogUpdateTaskId" : null, "portalId" : 2902314, "postHtmlFooter" : "", "postHtmlHead" : "", "postsPerListingPage" : 9, "postsPerRssFeed" : 10, "publicAccessRules" : [ ], "publicAccessRulesEnabled" : false, "publicTitle" : "Blog", "publishDateFormat" : "dd/MM/YYYY", "resolvedDomain" : "www.wildcodeschool.com", "rootUrl" : "https://www.wildcodeschool.com/fr-fr/blog", "rssCustomFeed" : null, "rssDescription" : null, "rssItemFooter" : null, "rssItemHeader" : null, "settingsOverrides" : { "itemLayoutId" : false, "itemTemplatePath" : false, "itemTemplateIsShared" : false, "listingLayoutId" : false, "listingTemplatePath" : false, "postsPerListingPage" : false, "showSummaryInListing" : false, "useFeaturedImageInSummary" : false, "htmlHead" : false, "postHtmlHead" : false, "htmlHeadIsShared" : false, "htmlFooter" : false, "listingPageHtmlFooter" : false, "postHtmlFooter" : false, "htmlFooterIsShared" : false, "attachedStylesheets" : false, "postsPerRssFeed" : false, "showSummaryInRss" : false, "showSummaryInEmails" : false, "showSummariesInEmails" : false, "allowComments" : false, "commentShouldCreateContact" : false, "commentModeration" : false, "closeCommentsOlder" : false, "commentNotificationEmails" : false, "commentMaxThreadDepth" : false, "commentVerificationText" : false, "socialAccountTwitter" : false, "showSocialLinkTwitter" : false, "showSocialLinkLinkedin" : false, "showSocialLinkFacebook" : false, "enableGoogleAmpOutput" : false, "ampLogoSrc" : false, "ampLogoHeight" : false, "ampLogoWidth" : false, "ampLogoAlt" : false, "ampHeaderFont" : false, "ampHeaderFontSize" : false, "ampHeaderColor" : false, "ampHeaderBackgroundColor" : false, "ampBodyFont" : false, "ampBodyFontSize" : false, "ampBodyColor" : false, "ampLinkColor" : false, "generateJsonLdEnabled" : false }, "showSocialLinkFacebook" : true, "showSocialLinkLinkedin" : true, "showSocialLinkTwitter" : true, "showSummaryInEmails" : true, "showSummaryInListing" : true, "showSummaryInRss" : true, "siteId" : null, "slug" : "fr-fr/blog", "socialAccountTwitter" : "", "state" : null, "subscriptionContactsProperty" : null, "subscriptionEmailType" : null, "subscriptionFormGuid" : null, "subscriptionListsByType" : { }, "title" : null, "translatedFromId" : null, "translations" : { "de-de" : { "absoluteUrl" : "https://www.wildcodeschool.com/de-de/blog", "id" : 103176710277, "language" : "de-de", "masterId" : 103175636270, "name" : "Blog", "publicAccessRules" : [ ], "publicAccessRulesEnabled" : false, "slug" : "de-de/blog" }, "en-gb" : { "absoluteUrl" : "https://www.wildcodeschool.com/en-gb/blog", "id" : 103176710275, "language" : "en-gb", "masterId" : 103175636270, "name" : "Blog", "publicAccessRules" : [ ], "publicAccessRulesEnabled" : false, "slug" : "en-gb/blog" }, "es-es" : { "absoluteUrl" : "https://www.wildcodeschool.com/es-es/blog", "id" : 103176710278, "language" : "es-es", "masterId" : 103175636270, "name" : "Blog", "publicAccessRules" : [ ], "publicAccessRulesEnabled" : false, "slug" : "es-es/blog" }, "pt-pt" : { "absoluteUrl" : "https://www.wildcodeschool.com/pt-pt/blog", "id" : 103176710276, "language" : "pt-pt", "masterId" : 103175636270, "name" : "Blog", "publicAccessRules" : [ ], "publicAccessRulesEnabled" : false, "slug" : "pt-pt/blog" } }, "updated" : 1726755591366, "updatedDateTime" : 1726755591366, "urlBase" : "www.wildcodeschool.com/fr-fr/blog", "urlSegments" : { "all" : "all", "archive" : "archive", "author" : "author", "page" : "page", "tag" : "tag" }, "useFeaturedImageInSummary" : true, "usesDefaultTemplate" : false, "weeklyNotificationEmailId" : null }, "password" : null, "pastMabExperimentIds" : [ ], "performableGuid" : null, "performableVariationLetter" : null, "personas" : [ ], "placementGuids" : [ ], "portableKey" : null, "portalId" : 2902314, "position" : null, "postBody" : "<p><span style=\"color: #0d0d0d;\">L'histoire de HTML et CSS commence dans les premières années du web. HTML, inventé par Tim Berners-Lee en 1990, était initialement conçu pour répondre au besoin de partager des documents et des informations entre chercheurs dans un format universel. Parallèlement, CSS a été développé et introduit en 1996 pour répondre à la nécessité de séparer le contenu de la présentation sur les pages web. Ensemble, <span style=\"font-weight: bold;\">HTML et CSS ont jeté les bases du développement web tel que nous le connaissons aujourd'hui</span>.</span></p>\n<p> </p>\n<h2 style=\"font-size: 30px;\"><strong><span style=\"color: #000000;\">HTML : la structure de base</span></strong></h2>\n<p>HTML est le <span style=\"font-weight: bold;\">langage de balisage qui sert de fondation à tout le web</span>. Il permet de <span style=\"font-weight: bold;\">structurer le contenu </span>sur les pages web, offrant un squelette sur lequel le reste peut être construit. En utilisant des balises, HTML délimite différents types d'informations, tels que : les paragraphes (<p>), les titres (<h1> à <h6>), les liens (<a href=\"...\">), et les images (<img>), pour n'en citer que quelques-uns.</p>\n<h3 style=\"font-size: 20px;\"><strong><span style=\"color: #000000;\">Exemple : la création d’un blog</span></strong></h3>\n<p>Prenons l'exemple d'un blog. Avec HTML, vous pouvez définir la structure de votre article, incluant un titre avec <em><h1></em>, des sous-titres avec<em> <h2></em>, des paragraphes de texte avec <em><p></em>, et peut-être des images pour illustrer vos propos avec <em><img></em>. Cette structure de base est essentielle pour organiser le contenu de manière logique et accessible, tant pour les humains que pour les moteurs de recherche.</p>\n<p> </p>\n<h2 style=\"font-size: 30px;\"><strong><span style=\"color: #000000;\">CSS : le style visuel</span></strong></h2>\n<p>Une fois la structure de base en place grâce à HTML, CSS entre en jeu pour <span style=\"font-weight: bold;\">transformer cette structure en une page visuellement attrayante</span>. CSS est responsable de<span style=\"font-weight: bold;\"> la présentation visuelle des sites web</span>, permettant aux développeurs de styliser le texte, de définir les couleurs, de manipuler les espacements, de créer des mises en page complexes, et bien plus encore.</p>\n<h3 style=\"font-size: 20px;\"><strong><span style=\"color: #000000;\">Exemple : la personnalisation d'un blog</span></strong></h3>\n<p>Reprenant notre exemple de blog, CSS vous permettrait de personnaliser l'apparence de votre article. Vous pourriez définir une couleur de fond pour votre page, choisir les polices de caractères pour vos titres et paragraphes, espacer vos éléments pour une meilleure lisibilité, et même ajouter des effets au survol sur vos liens pour une interaction utilisateur améliorée. CSS transforme votre structure HTML en une expérience visuelle engageante.</p>\n<p> </p>\n<h2 style=\"font-size: 30px;\"><strong><span style=\"color: #000000;\">L'interaction entre HTML et CSS</span></strong></h2>\n<p>La synergie entre HTML et CSS est au cœur de la création des sites web. Cette interaction permet de séparer efficacement le contenu de la présentation.</p>\n<h3 style=\"font-size: 20px;\"><strong><span style=\"color: #000000;\">Exemple : un site de recettes de cuisine</span></strong></h3>\n<p>Avec HTML, vous structurez chaque recette avec un titre (<em><span style=\"font-size: 16px;\"><h1></span></em> pour le nom de la recette), des sous-titres pour les sections (<em><span style=\"font-size: 16px;\"><h2></span></em> pour les ingrédients et la préparation) et des paragraphes pour les instructions (<em><span style=\"font-size: 16px;\"><p></span></em>). Vous pouvez également inclure des images de chaque plat avec <em><span style=\"font-size: 16px;\"><img></span></em>.</p>\n<p>Avec CSS, vous embellissez cette structure. Vous définissez un style spécifique pour les titres des recettes : une taille police, une couleur à la charte de la marque... </p>\n<p>Cette interaction entre HTML et CSS offre plusieurs avantages:</p>\n<ul>\n<li aria-level=\"1\"><strong>Une maintenance facilitée</strong> : les modifications de style n'exigent des changements que dans les fichiers CSS sans altérer la structure HTML.</li>\n<li aria-level=\"1\"><strong>Des performances optimisées : </strong>la séparation permet aux navigateurs de charger le contenu (HTML) et la mise en page (CSS) de manière plus efficace.</li>\n</ul>\n<p> </p>\n<h2 style=\"font-size: 30px;\"><strong><span style=\"color: #000000;\">Les avantages de commencer par HTML et CSS</span></strong></h2>\n<p>Pour ceux qui débutent en développement web, l'apprentissage par HTML et CSS offre une fondation solide sur laquelle construire des compétences plus avancées.</p>\n<ul>\n<li aria-level=\"1\">\n<p><strong>La facilité d'apprentissage</strong></p>\n</li>\n</ul>\n<p>HTML et CSS sont relativement simples à comprendre et à utiliser. Ils permettent d'obtenir des résultats visuels rapidement, ce qui est souvent gratifiant pour les débutants. Cela aide à construire la confiance nécessaire pour explorer des concepts de programmation plus complexes par la suite.</p>\n<ul>\n<li aria-level=\"1\">\n<p><strong>Une applicabilité universelle</strong></p>\n</li>\n</ul>\n<p>Que vous envisagiez de devenir développeur front-end, back-end, ou full-stack, la connaissance de HTML et CSS est indispensable. Ces langages sont les briques fondamentales de tout le web, et leur maîtrise est une compétence recherchée dans le domaine du développement web.</p>\n<ul>\n<li aria-level=\"1\">\n<p><strong>Une porte d'entrée vers des technologies plus avancées</strong></p>\n</li>\n</ul>\n<p>Après avoir maîtrisé HTML et CSS, les développeurs sont mieux équipés pour apprendre le JavaScript, les bibliothèques et frameworks front-end (comme React ou Vue.js), ainsi que les concepts de développement back-end. Cela ouvre la porte à des projets web plus dynamiques et interactifs, comme les applications web progressives (PWA) ou les sites web à page unique (SPA).</p>\n<p> </p>\n<p>Commencer par HTML et CSS n'est donc pas seulement une tradition dans l'apprentissage du développement web ; c'est une approche pragmatique qui établit une base solide pour tout développeur. Cette fondation permet de naviguer avec confiance dans l'écosystème web en constante évolution tout en restant ancré dans les principes fondamentaux de la création web.</p>\n<p> </p>\n<p>Intéressé pour apprendre le développement web ? Lancez-vous avec <a href=\"/fr-fr/formations-developpement-web\" rel=\"noopener\"><span style=\"font-weight: bold;\">nos formations</span></a> en bootcamp (5 mois), en <a href=\"/fr-fr/formations-developpement-web/formation-developpeur-web-php-a-distance\" rel=\"noopener\"><span style=\"font-weight: bold;\">langage PHP</span></a> ou <a href=\"/fr-fr/formations-developpement-web/formation-developpeur-web-a-distance\" rel=\"noopener\"><span style=\"font-weight: bold;\">en Javascript</span></a>. </p>", "postBodyRss" : "<p><span style=\"color: #0d0d0d;\">L'histoire de HTML et CSS commence dans les premières années du web. HTML, inventé par Tim Berners-Lee en 1990, était initialement conçu pour répondre au besoin de partager des documents et des informations entre chercheurs dans un format universel. Parallèlement, CSS a été développé et introduit en 1996 pour répondre à la nécessité de séparer le contenu de la présentation sur les pages web. Ensemble, <span style=\"font-weight: bold;\">HTML et CSS ont jeté les bases du développement web tel que nous le connaissons aujourd'hui</span>.</span></p>\n<p> </p>\n<h2 style=\"font-size: 30px;\"><strong><span style=\"color: #000000;\">HTML : la structure de base</span></strong></h2>\n<p>HTML est le <span style=\"font-weight: bold;\">langage de balisage qui sert de fondation à tout le web</span>. Il permet de <span style=\"font-weight: bold;\">structurer le contenu </span>sur les pages web, offrant un squelette sur lequel le reste peut être construit. En utilisant des balises, HTML délimite différents types d'informations, tels que : les paragraphes (<p>), les titres (<h1> à <h6>), les liens (<a href=\"...\">), et les images (<img>), pour n'en citer que quelques-uns.</p>\n<h3 style=\"font-size: 20px;\"><strong><span style=\"color: #000000;\">Exemple : la création d’un blog</span></strong></h3>\n<p>Prenons l'exemple d'un blog. Avec HTML, vous pouvez définir la structure de votre article, incluant un titre avec <em><h1></em>, des sous-titres avec<em> <h2></em>, des paragraphes de texte avec <em><p></em>, et peut-être des images pour illustrer vos propos avec <em><img></em>. Cette structure de base est essentielle pour organiser le contenu de manière logique et accessible, tant pour les humains que pour les moteurs de recherche.</p>\n<p> </p>\n<h2 style=\"font-size: 30px;\"><strong><span style=\"color: #000000;\">CSS : le style visuel</span></strong></h2>\n<p>Une fois la structure de base en place grâce à HTML, CSS entre en jeu pour <span style=\"font-weight: bold;\">transformer cette structure en une page visuellement attrayante</span>. CSS est responsable de<span style=\"font-weight: bold;\"> la présentation visuelle des sites web</span>, permettant aux développeurs de styliser le texte, de définir les couleurs, de manipuler les espacements, de créer des mises en page complexes, et bien plus encore.</p>\n<h3 style=\"font-size: 20px;\"><strong><span style=\"color: #000000;\">Exemple : la personnalisation d'un blog</span></strong></h3>\n<p>Reprenant notre exemple de blog, CSS vous permettrait de personnaliser l'apparence de votre article. Vous pourriez définir une couleur de fond pour votre page, choisir les polices de caractères pour vos titres et paragraphes, espacer vos éléments pour une meilleure lisibilité, et même ajouter des effets au survol sur vos liens pour une interaction utilisateur améliorée. CSS transforme votre structure HTML en une expérience visuelle engageante.</p>\n<p> </p>\n<h2 style=\"font-size: 30px;\"><strong><span style=\"color: #000000;\">L'interaction entre HTML et CSS</span></strong></h2>\n<p>La synergie entre HTML et CSS est au cœur de la création des sites web. Cette interaction permet de séparer efficacement le contenu de la présentation.</p>\n<h3 style=\"font-size: 20px;\"><strong><span style=\"color: #000000;\">Exemple : un site de recettes de cuisine</span></strong></h3>\n<p>Avec HTML, vous structurez chaque recette avec un titre (<em><span style=\"font-size: 16px;\"><h1></span></em> pour le nom de la recette), des sous-titres pour les sections (<em><span style=\"font-size: 16px;\"><h2></span></em> pour les ingrédients et la préparation) et des paragraphes pour les instructions (<em><span style=\"font-size: 16px;\"><p></span></em>). Vous pouvez également inclure des images de chaque plat avec <em><span style=\"font-size: 16px;\"><img></span></em>.</p>\n<p>Avec CSS, vous embellissez cette structure. Vous définissez un style spécifique pour les titres des recettes : une taille police, une couleur à la charte de la marque... </p>\n<p>Cette interaction entre HTML et CSS offre plusieurs avantages:</p>\n<ul>\n<li aria-level=\"1\"><strong>Une maintenance facilitée</strong> : les modifications de style n'exigent des changements que dans les fichiers CSS sans altérer la structure HTML.</li>\n<li aria-level=\"1\"><strong>Des performances optimisées : </strong>la séparation permet aux navigateurs de charger le contenu (HTML) et la mise en page (CSS) de manière plus efficace.</li>\n</ul>\n<p> </p>\n<h2 style=\"font-size: 30px;\"><strong><span style=\"color: #000000;\">Les avantages de commencer par HTML et CSS</span></strong></h2>\n<p>Pour ceux qui débutent en développement web, l'apprentissage par HTML et CSS offre une fondation solide sur laquelle construire des compétences plus avancées.</p>\n<ul>\n<li aria-level=\"1\">\n<p><strong>La facilité d'apprentissage</strong></p>\n</li>\n</ul>\n<p>HTML et CSS sont relativement simples à comprendre et à utiliser. Ils permettent d'obtenir des résultats visuels rapidement, ce qui est souvent gratifiant pour les débutants. Cela aide à construire la confiance nécessaire pour explorer des concepts de programmation plus complexes par la suite.</p>\n<ul>\n<li aria-level=\"1\">\n<p><strong>Une applicabilité universelle</strong></p>\n</li>\n</ul>\n<p>Que vous envisagiez de devenir développeur front-end, back-end, ou full-stack, la connaissance de HTML et CSS est indispensable. Ces langages sont les briques fondamentales de tout le web, et leur maîtrise est une compétence recherchée dans le domaine du développement web.</p>\n<ul>\n<li aria-level=\"1\">\n<p><strong>Une porte d'entrée vers des technologies plus avancées</strong></p>\n</li>\n</ul>\n<p>Après avoir maîtrisé HTML et CSS, les développeurs sont mieux équipés pour apprendre le JavaScript, les bibliothèques et frameworks front-end (comme React ou Vue.js), ainsi que les concepts de développement back-end. Cela ouvre la porte à des projets web plus dynamiques et interactifs, comme les applications web progressives (PWA) ou les sites web à page unique (SPA).</p>\n<p> </p>\n<p>Commencer par HTML et CSS n'est donc pas seulement une tradition dans l'apprentissage du développement web ; c'est une approche pragmatique qui établit une base solide pour tout développeur. Cette fondation permet de naviguer avec confiance dans l'écosystème web en constante évolution tout en restant ancré dans les principes fondamentaux de la création web.</p>\n<p> </p>\n<p>Intéressé pour apprendre le développement web ? Lancez-vous avec <a href=\"/fr-fr/formations-developpement-web\" rel=\"noopener\"><span style=\"font-weight: bold;\">nos formations</span></a> en bootcamp (5 mois), en <a href=\"/fr-fr/formations-developpement-web/formation-developpeur-web-php-a-distance\" rel=\"noopener\"><span style=\"font-weight: bold;\">langage PHP</span></a> ou <a href=\"/fr-fr/formations-developpement-web/formation-developpeur-web-a-distance\" rel=\"noopener\"><span style=\"font-weight: bold;\">en Javascript</span></a>. </p>", "postEmailContent" : "<p><span style=\"color: #0d0d0d;\">L'histoire de HTML et CSS commence dans les premières années du web. HTML, inventé par Tim Berners-Lee en 1990, était initialement conçu pour répondre au besoin de partager des documents et des informations entre chercheurs dans un format universel. Parallèlement, CSS a été développé et introduit en 1996 pour répondre à la nécessité de séparer le contenu de la présentation sur les pages web. Ensemble, <span style=\"font-weight: bold;\">HTML et CSS ont jeté les bases du développement web tel que nous le connaissons aujourd'hui</span>.</span></p>", "postFeaturedImageIfEnabled" : "https://2902314.fs1.hubspotusercontent-na1.net/hubfs/2902314/2024-03-14_POURQUOI_COMMENCER_LE_CODE_PAR_HTML_ET_CSS.jpg", "postListContent" : "<p><span style=\"color: #0d0d0d;\">L'histoire de HTML et CSS commence dans les premières années du web. HTML, inventé par Tim Berners-Lee en 1990, était initialement conçu pour répondre au besoin de partager des documents et des informations entre chercheurs dans un format universel. Parallèlement, CSS a été développé et introduit en 1996 pour répondre à la nécessité de séparer le contenu de la présentation sur les pages web. Ensemble, <span style=\"font-weight: bold;\">HTML et CSS ont jeté les bases du développement web tel que nous le connaissons aujourd'hui</span>.</span></p>", "postListSummaryFeaturedImage" : "https://2902314.fs1.hubspotusercontent-na1.net/hubfs/2902314/2024-03-14_POURQUOI_COMMENCER_LE_CODE_PAR_HTML_ET_CSS.jpg", "postRssContent" : "<p><span style=\"color: #0d0d0d;\">L'histoire de HTML et CSS commence dans les premières années du web. HTML, inventé par Tim Berners-Lee en 1990, était initialement conçu pour répondre au besoin de partager des documents et des informations entre chercheurs dans un format universel. Parallèlement, CSS a été développé et introduit en 1996 pour répondre à la nécessité de séparer le contenu de la présentation sur les pages web. Ensemble, <span style=\"font-weight: bold;\">HTML et CSS ont jeté les bases du développement web tel que nous le connaissons aujourd'hui</span>.</span></p>", "postRssSummaryFeaturedImage" : "https://2902314.fs1.hubspotusercontent-na1.net/hubfs/2902314/2024-03-14_POURQUOI_COMMENCER_LE_CODE_PAR_HTML_ET_CSS.jpg", "postSummary" : "<p><span style=\"color: #0d0d0d;\">L'histoire de HTML et CSS commence dans les premières années du web. HTML, inventé par Tim Berners-Lee en 1990, était initialement conçu pour répondre au besoin de partager des documents et des informations entre chercheurs dans un format universel. Parallèlement, CSS a été développé et introduit en 1996 pour répondre à la nécessité de séparer le contenu de la présentation sur les pages web. Ensemble, <span style=\"font-weight: bold;\">HTML et CSS ont jeté les bases du développement web tel que nous le connaissons aujourd'hui</span>.</span></p>\n", "postSummaryRss" : "<p><span style=\"color: #0d0d0d;\">L'histoire de HTML et CSS commence dans les premières années du web. HTML, inventé par Tim Berners-Lee en 1990, était initialement conçu pour répondre au besoin de partager des documents et des informations entre chercheurs dans un format universel. Parallèlement, CSS a été développé et introduit en 1996 pour répondre à la nécessité de séparer le contenu de la présentation sur les pages web. Ensemble, <span style=\"font-weight: bold;\">HTML et CSS ont jeté les bases du développement web tel que nous le connaissons aujourd'hui</span>.</span></p>", "postTemplate" : "MarkentivexWCS/templates/blog-post.html", "previewImageSrc" : null, "previewKey" : "FwPFDynP", "previousPostFeaturedImage" : "https://2902314.fs1.hubspotusercontent-na1.net/hubfs/2902314/2024-03-12_IA_FORTE_IA_FAIBLE_QUELLES_DIFFRENCES.jpg", "previousPostFeaturedImageAltText" : "", "previousPostName" : "IA forte, IA faible : quelles différences ?", "previousPostSlug" : "fr-fr/blog/ia-forte-ia-faible-quelles-différences", "processingStatus" : "PUBLISHED", "propertyForDynamicPageCanonicalUrl" : null, "propertyForDynamicPageFeaturedImage" : null, "propertyForDynamicPageMetaDescription" : null, "propertyForDynamicPageSlug" : null, "propertyForDynamicPageTitle" : null, "publicAccessRules" : [ ], "publicAccessRulesEnabled" : false, "publishDate" : 1710399600000, "publishDateLocalTime" : 1710399600000, "publishDateLocalized" : { "date" : 1710399600000, "format" : "dd/MM/YYYY", "language" : null }, "publishImmediately" : false, "publishTimezoneOffset" : null, "publishedAt" : 1710399600989, "publishedByEmail" : null, "publishedById" : 50704370, "publishedByName" : null, "publishedUrl" : "https://www.wildcodeschool.com/fr-fr/blog/pourquoi-commence-t-on-le-code-par-html-et-css", "resolvedDomain" : "www.wildcodeschool.com", "resolvedLanguage" : null, "rssBody" : "<p><span style=\"color: #0d0d0d;\">L'histoire de HTML et CSS commence dans les premières années du web. HTML, inventé par Tim Berners-Lee en 1990, était initialement conçu pour répondre au besoin de partager des documents et des informations entre chercheurs dans un format universel. Parallèlement, CSS a été développé et introduit en 1996 pour répondre à la nécessité de séparer le contenu de la présentation sur les pages web. Ensemble, <span style=\"font-weight: bold;\">HTML et CSS ont jeté les bases du développement web tel que nous le connaissons aujourd'hui</span>.</span></p>\n<p> </p>\n<h2 style=\"font-size: 30px;\"><strong><span style=\"color: #000000;\">HTML : la structure de base</span></strong></h2>\n<p>HTML est le <span style=\"font-weight: bold;\">langage de balisage qui sert de fondation à tout le web</span>. Il permet de <span style=\"font-weight: bold;\">structurer le contenu </span>sur les pages web, offrant un squelette sur lequel le reste peut être construit. En utilisant des balises, HTML délimite différents types d'informations, tels que : les paragraphes (<p>), les titres (<h1> à <h6>), les liens (<a href=\"...\">), et les images (<img>), pour n'en citer que quelques-uns.</p>\n<h3 style=\"font-size: 20px;\"><strong><span style=\"color: #000000;\">Exemple : la création d’un blog</span></strong></h3>\n<p>Prenons l'exemple d'un blog. Avec HTML, vous pouvez définir la structure de votre article, incluant un titre avec <em><h1></em>, des sous-titres avec<em> <h2></em>, des paragraphes de texte avec <em><p></em>, et peut-être des images pour illustrer vos propos avec <em><img></em>. Cette structure de base est essentielle pour organiser le contenu de manière logique et accessible, tant pour les humains que pour les moteurs de recherche.</p>\n<p> </p>\n<h2 style=\"font-size: 30px;\"><strong><span style=\"color: #000000;\">CSS : le style visuel</span></strong></h2>\n<p>Une fois la structure de base en place grâce à HTML, CSS entre en jeu pour <span style=\"font-weight: bold;\">transformer cette structure en une page visuellement attrayante</span>. CSS est responsable de<span style=\"font-weight: bold;\"> la présentation visuelle des sites web</span>, permettant aux développeurs de styliser le texte, de définir les couleurs, de manipuler les espacements, de créer des mises en page complexes, et bien plus encore.</p>\n<h3 style=\"font-size: 20px;\"><strong><span style=\"color: #000000;\">Exemple : la personnalisation d'un blog</span></strong></h3>\n<p>Reprenant notre exemple de blog, CSS vous permettrait de personnaliser l'apparence de votre article. Vous pourriez définir une couleur de fond pour votre page, choisir les polices de caractères pour vos titres et paragraphes, espacer vos éléments pour une meilleure lisibilité, et même ajouter des effets au survol sur vos liens pour une interaction utilisateur améliorée. CSS transforme votre structure HTML en une expérience visuelle engageante.</p>\n<p> </p>\n<h2 style=\"font-size: 30px;\"><strong><span style=\"color: #000000;\">L'interaction entre HTML et CSS</span></strong></h2>\n<p>La synergie entre HTML et CSS est au cœur de la création des sites web. Cette interaction permet de séparer efficacement le contenu de la présentation.</p>\n<h3 style=\"font-size: 20px;\"><strong><span style=\"color: #000000;\">Exemple : un site de recettes de cuisine</span></strong></h3>\n<p>Avec HTML, vous structurez chaque recette avec un titre (<em><span style=\"font-size: 16px;\"><h1></span></em> pour le nom de la recette), des sous-titres pour les sections (<em><span style=\"font-size: 16px;\"><h2></span></em> pour les ingrédients et la préparation) et des paragraphes pour les instructions (<em><span style=\"font-size: 16px;\"><p></span></em>). Vous pouvez également inclure des images de chaque plat avec <em><span style=\"font-size: 16px;\"><img></span></em>.</p>\n<p>Avec CSS, vous embellissez cette structure. Vous définissez un style spécifique pour les titres des recettes : une taille police, une couleur à la charte de la marque... </p>\n<p>Cette interaction entre HTML et CSS offre plusieurs avantages:</p>\n<ul>\n<li aria-level=\"1\"><strong>Une maintenance facilitée</strong> : les modifications de style n'exigent des changements que dans les fichiers CSS sans altérer la structure HTML.</li>\n<li aria-level=\"1\"><strong>Des performances optimisées : </strong>la séparation permet aux navigateurs de charger le contenu (HTML) et la mise en page (CSS) de manière plus efficace.</li>\n</ul>\n<p> </p>\n<h2 style=\"font-size: 30px;\"><strong><span style=\"color: #000000;\">Les avantages de commencer par HTML et CSS</span></strong></h2>\n<p>Pour ceux qui débutent en développement web, l'apprentissage par HTML et CSS offre une fondation solide sur laquelle construire des compétences plus avancées.</p>\n<ul>\n<li aria-level=\"1\">\n<p><strong>La facilité d'apprentissage</strong></p>\n</li>\n</ul>\n<p>HTML et CSS sont relativement simples à comprendre et à utiliser. Ils permettent d'obtenir des résultats visuels rapidement, ce qui est souvent gratifiant pour les débutants. Cela aide à construire la confiance nécessaire pour explorer des concepts de programmation plus complexes par la suite.</p>\n<ul>\n<li aria-level=\"1\">\n<p><strong>Une applicabilité universelle</strong></p>\n</li>\n</ul>\n<p>Que vous envisagiez de devenir développeur front-end, back-end, ou full-stack, la connaissance de HTML et CSS est indispensable. Ces langages sont les briques fondamentales de tout le web, et leur maîtrise est une compétence recherchée dans le domaine du développement web.</p>\n<ul>\n<li aria-level=\"1\">\n<p><strong>Une porte d'entrée vers des technologies plus avancées</strong></p>\n</li>\n</ul>\n<p>Après avoir maîtrisé HTML et CSS, les développeurs sont mieux équipés pour apprendre le JavaScript, les bibliothèques et frameworks front-end (comme React ou Vue.js), ainsi que les concepts de développement back-end. Cela ouvre la porte à des projets web plus dynamiques et interactifs, comme les applications web progressives (PWA) ou les sites web à page unique (SPA).</p>\n<p> </p>\n<p>Commencer par HTML et CSS n'est donc pas seulement une tradition dans l'apprentissage du développement web ; c'est une approche pragmatique qui établit une base solide pour tout développeur. Cette fondation permet de naviguer avec confiance dans l'écosystème web en constante évolution tout en restant ancré dans les principes fondamentaux de la création web.</p>\n<p> </p>\n<p>Intéressé pour apprendre le développement web ? Lancez-vous avec <a href=\"/fr-fr/formations-developpement-web\" rel=\"noopener\"><span style=\"font-weight: bold;\">nos formations</span></a> en bootcamp (5 mois), en <a href=\"/fr-fr/formations-developpement-web/formation-developpeur-web-php-a-distance\" rel=\"noopener\"><span style=\"font-weight: bold;\">langage PHP</span></a> ou <a href=\"/fr-fr/formations-developpement-web/formation-developpeur-web-a-distance\" rel=\"noopener\"><span style=\"font-weight: bold;\">en Javascript</span></a>. </p>", "rssSummary" : "<p><span style=\"color: #0d0d0d;\">L'histoire de HTML et CSS commence dans les premières années du web. HTML, inventé par Tim Berners-Lee en 1990, était initialement conçu pour répondre au besoin de partager des documents et des informations entre chercheurs dans un format universel. Parallèlement, CSS a été développé et introduit en 1996 pour répondre à la nécessité de séparer le contenu de la présentation sur les pages web. Ensemble, <span style=\"font-weight: bold;\">HTML et CSS ont jeté les bases du développement web tel que nous le connaissons aujourd'hui</span>.</span></p>\n", "rssSummaryFeaturedImage" : "https://2902314.fs1.hubspotusercontent-na1.net/hubfs/2902314/2024-03-14_POURQUOI_COMMENCER_LE_CODE_PAR_HTML_ET_CSS.jpg", "scheduledUpdateDate" : 0, "screenshotPreviewTakenAt" : 1731913201922, "screenshotPreviewUrl" : "https://cdn1.hubspot.net/hubshotv3/prod/e/0/fe41ed6b-4fe5-4531-bba9-e433060aef4f.png", "sections" : { }, "securityState" : "NONE", "siteId" : null, "slug" : "fr-fr/blog/pourquoi-commence-t-on-le-code-par-html-et-css", "stagedFrom" : null, "state" : "PUBLISHED", "stateWhenDeleted" : null, "structuredContentPageType" : null, "structuredContentType" : null, "styleOverrideId" : null, "subcategory" : "normal_blog_post", "syncedWithBlogRoot" : true, "tagIds" : [ 103173212304, 112529293687 ], "tagList" : [ { "categoryId" : 3, "cdnPurgeEmbargoTime" : null, "contentIds" : [ ], "cosObjectType" : "TAG", "created" : 1676890094328, "deletedAt" : 0, "description" : "", "id" : 103173212304, "label" : "Developpement Web", "language" : "fr-fr", "name" : "Developpement Web", "portalId" : 2902314, "slug" : "developpement-web", "translatedFromId" : null, "translations" : { }, "updated" : 1676892318798 }, { "categoryId" : 3, "cdnPurgeEmbargoTime" : null, "contentIds" : [ ], "cosObjectType" : "TAG", "created" : 1682323659406, "deletedAt" : 0, "description" : "", "id" : 112529293687, "label" : "Décryptage", "language" : "fr-fr", "name" : "Décryptage", "portalId" : 2902314, "slug" : "décryptage", "translatedFromId" : null, "translations" : { }, "updated" : 1689243063828 } ], "tagNames" : [ "Developpement Web", "Décryptage" ], "teamPerms" : [ ], "templatePath" : "", "templatePathForRender" : "MarkentivexWCS/templates/blog-post.html", "textToAudioFileId" : null, "textToAudioGenerationRequestId" : null, "themePath" : null, "themeSettingsValues" : null, "title" : "Pourquoi commencer le code par HTML et CSS ?", "tmsId" : null, "topicIds" : [ 103173212304, 112529293687 ], "topicList" : [ { "categoryId" : 3, "cdnPurgeEmbargoTime" : null, "contentIds" : [ ], "cosObjectType" : "TAG", "created" : 1676890094328, "deletedAt" : 0, "description" : "", "id" : 103173212304, "label" : "Developpement Web", "language" : "fr-fr", "name" : "Developpement Web", "portalId" : 2902314, "slug" : "developpement-web", "translatedFromId" : null, "translations" : { }, "updated" : 1676892318798 }, { "categoryId" : 3, "cdnPurgeEmbargoTime" : null, "contentIds" : [ ], "cosObjectType" : "TAG", "created" : 1682323659406, "deletedAt" : 0, "description" : "", "id" : 112529293687, "label" : "Décryptage", "language" : "fr-fr", "name" : "Décryptage", "portalId" : 2902314, "slug" : "décryptage", "translatedFromId" : null, "translations" : { }, "updated" : 1689243063828 } ], "topicNames" : [ "Developpement Web", "Décryptage" ], "topics" : [ 103173212304, 112529293687 ], "translatedContent" : { }, "translatedFromId" : null, "translations" : { }, "tweet" : null, "tweetAt" : null, "tweetImmediately" : false, "unpublishedAt" : 1709289608944, "updated" : 1710399600994, "updatedById" : 50704370, "upsizeFeaturedImage" : false, "url" : "https://www.wildcodeschool.com/fr-fr/blog/pourquoi-commence-t-on-le-code-par-html-et-css", "useFeaturedImage" : true, "userPerms" : [ ], "views" : 0, "visibleToAll" : null, "widgetContainers" : { }, "widgetcontainers" : { }, "widgets" : { } })
- Développement Web
- Tips
20/05/2024 Temps de lecture 3 min

Faire ses premiers pas en HTML
Lire l'article
(BlogPost: { "ab" : false, "abStatus" : null, "abTestId" : null, "abVariation" : false, "abVariationAutomated" : false, "absoluteUrl" : "https://www.wildcodeschool.com/fr-fr/blog/faire-ses-premiers-pas-en-html", "afterPostBody" : null, "aifeatures" : null, "allowedSlugConflict" : false, "analytics" : null, "analyticsPageId" : "166317099375", "analyticsPageType" : "blog-post", "approvalStatus" : null, "archived" : false, "archivedAt" : 0, "archivedInDashboard" : false, "areCommentsAllowed" : false, "attachedStylesheets" : [ ], "audienceAccess" : "PUBLIC", "author" : null, "authorName" : null, "authorUsername" : null, "blogAuthor" : { "avatar" : "", "bio" : "Formateur Javascprit - Wild Code School", "cdnPurgeEmbargoTime" : null, "cosObjectType" : "BLOG_AUTHOR", "created" : 1714747661828, "deletedAt" : 0, "displayName" : "Julien Richard", "email" : null, "facebook" : "", "fullName" : "Julien Richard", "gravatarUrl" : null, "hasSocialProfiles" : false, "id" : 166317636735, "label" : "Julien Richard", "language" : "fr-fr", "linkedin" : "", "name" : "Julien Richard", "portalId" : 2902314, "slug" : "julien-richard", "translatedFromId" : null, "translations" : { }, "twitter" : "", "twitterUsername" : "", "updated" : 1714747661828, "userId" : null, "username" : null, "website" : "" }, "blogAuthorId" : 166317636735, "blogPostAuthor" : { "avatar" : "", "bio" : "Formateur Javascprit - Wild Code School", "cdnPurgeEmbargoTime" : null, "cosObjectType" : "BLOG_AUTHOR", "created" : 1714747661828, "deletedAt" : 0, "displayName" : "Julien Richard", "email" : null, "facebook" : "", "fullName" : "Julien Richard", "gravatarUrl" : null, "hasSocialProfiles" : false, "id" : 166317636735, "label" : "Julien Richard", "language" : "fr-fr", "linkedin" : "", "name" : "Julien Richard", "portalId" : 2902314, "slug" : "julien-richard", "translatedFromId" : null, "translations" : { }, "twitter" : "", "twitterUsername" : "", "updated" : 1714747661828, "userId" : null, "username" : null, "website" : "" }, "blogPostScheduleTaskUid" : null, "blogPublishInstantEmailCampaignId" : null, "blogPublishInstantEmailRetryCount" : null, "blogPublishInstantEmailTaskUid" : null, "blogPublishToSocialMediaTask" : "DONE_NOT_SENT", "blueprintTypeId" : 0, "businessUnitId" : null, "campaign" : null, "campaignName" : null, "campaignUtm" : null, "category" : 3, "categoryId" : 3, "cdnPurgeEmbargoTime" : null, "checkPostLevelAudienceAccessFirst" : true, "clonedFrom" : null, "composeBody" : null, "compositionId" : 0, "contentAccessRuleIds" : [ ], "contentAccessRuleTypes" : [ ], "contentGroup" : 103175636270, "contentGroupId" : 103175636270, "contentTypeCategory" : 3, "contentTypeCategoryId" : 3, "contentTypeId" : null, "created" : 1714747614710, "createdByAgent" : null, "createdById" : 50704370, "createdTime" : 1714747614710, "crmObjectId" : null, "css" : { }, "cssText" : "", "ctaClicks" : null, "ctaViews" : null, "currentState" : "PUBLISHED", "currentlyPublished" : true, "deletedAt" : 0, "deletedBy" : null, "deletedByEmail" : null, "deletedById" : null, "domain" : "", "dynamicPageDataSourceId" : null, "dynamicPageDataSourceType" : null, "dynamicPageHubDbTableId" : null, "enableDomainStylesheets" : null, "enableGoogleAmpOutputOverride" : false, "enableLayoutStylesheets" : null, "errors" : [ ], "featuredImage" : "https://2902314.fs1.hubspotusercontent-na1.net/hubfs/2902314/2024-05-06_COMBIEN_COTE_UNE_FORMATION_DE_DVELOPPEUR_WEB.jpg", "featuredImageAltText" : "Deux jeunes femmes regardent leur écran d'ordinateur et leur premiers pas en HTML", "featuredImageHeight" : 1333, "featuredImageLength" : 0, "featuredImageWidth" : 2000, "flexAreas" : { }, "folderId" : null, "footerHtml" : null, "freezeDate" : 1716207852000, "generateJsonLdEnabledOverride" : true, "hasContentAccessRules" : false, "hasUserChanges" : true, "headHtml" : null, "header" : null, "htmlTitle" : "Faire ses premiers pas en HTML", "id" : 166317099375, "includeDefaultCustomCss" : null, "isCaptchaRequired" : true, "isCrawlableByBots" : false, "isDraft" : false, "isInstanceLayoutPage" : false, "isInstantEmailEnabled" : false, "isPublished" : true, "isSocialPublishingEnabled" : false, "keywords" : [ ], "label" : "Faire ses premiers pas en HTML", "language" : "fr-fr", "lastEditSessionId" : null, "lastEditUpdateId" : null, "layoutSections" : { }, "legacyBlogTabid" : null, "legacyId" : null, "legacyPostGuid" : null, "linkRelCanonicalUrl" : "", "listTemplate" : "", "liveDomain" : "www.wildcodeschool.com", "mab" : false, "mabExperimentId" : null, "mabMaster" : false, "mabVariant" : false, "meta" : { "public_access_rules" : [ ], "public_access_rules_enabled" : false, "html_title" : "Faire ses premiers pas en HTML", "tag_ids" : [ 103173212304, 116313955723 ], "topic_ids" : [ 103173212304, 116313955723 ], "enable_google_amp_output_override" : false, "generate_json_ld_enabled" : true, "use_featured_image" : true, "post_summary" : "<p>Si vous êtes décidés à apprendre le vaste univers du développement web, la création de l’interface est souvent le meilleur point de départ. La page web ! Mais comment est-elle constituée ? Pour donner la structure à notre page, à notre contenu (textes, images,...), un langage est incontournable : <a href=\"/fr-fr/blog/apprendre-le-html\" rel=\"noopener\"><span style=\"font-weight: bold;\">le HTML</span></a>.</p>\n", "post_body" : "<p>Si vous êtes décidés à apprendre le vaste univers du développement web, la création de l’interface est souvent le meilleur point de départ. La page web ! Mais comment est-elle constituée ? Pour donner la structure à notre page, à notre contenu (textes, images,...), un langage est incontournable : <a href=\"/fr-fr/blog/apprendre-le-html\" rel=\"noopener\"><span style=\"font-weight: bold;\">le HTML</span></a>.</p>\n<p>Un site web a souvent pour raison l’affichage d’un contenu. Que ce soient du texte, des images, des liens, de la vidéo... <a href=\"/fr-fr/blog/pourquoi-commence-t-on-le-code-par-html-et-css\" rel=\"noopener\"><span style=\"font-weight: bold;\">Le HTML</span></a> (HyperText Markup Language) intervient pour nous permettre de structurer ces différents contenus dans notre page. C’est lui qui donne l’architecture sur laquelle tout va reposer ensuite.</p>\n<p> </p>\n<h2 style=\"font-size: 30px;\">Les balises</h2>\n<p>Le HTML est donc composé de <strong>balises</strong>. Une balise est un bout de code composé d’un chevron ouvrant “<span style=\"font-weight: bold;\"><</span>”, du nom de la balise, suivi d’un chevron fermant “<span style=\"font-weight: bold;\">></span>”. Toute balise ouvrante devra avoir une balise fermante. La balise fermante se distingue de sa sœur par l’ajout d’un “<span style=\"font-weight: bold;\">/</span>” après le premier chevron.</p>\n<p>En voici un exemple : <span style=\"font-weight: bold;\"><article></span> -----Ceci est mon contenu —-- <span style=\"font-weight: bold;\"></article></span></p>\n<p>Attention, lorsqu’on débute, on n’accorde souvent pas assez d’attention à l’ordre d’ouverture et de fermeture de nos balises. Cela a pour conséquence de casser la structure de notre page et de croiser nos contenus. Mieux vaut prendre le temps de vérifier nos lignes de HTML avant d’avancer trop dans notre page.</p>\n<p> </p>\n<h2 style=\"font-size: 30px;\">Structure de la page</h2>\n<p>Maintenant, que nous savons ce qu’est une balise, nous entrons dans la structure plus globale de notre page. Nous allons ainsi distinguer deux niveaux dans notre page, le <strong>Head </strong>et le <strong>Body</strong>.</p>\n<p style=\"padding-left: 40px;\"><em>Astuce : pour créer une page web, rien de plus simple. Il faut créer un fichier index.html, puis double-cliquer dessus pour l’ouvrir dans le navigateur. La page est blanche, c’est normal, notre fichier est vide. Ouvrons-le avec un éditeur de texte (Bloc-note si nous n’avons pas d’éditeur spécifique). Ensuite, continuons notre découverte.</em></p>\n<p style=\"padding-left: 40px;\"> </p>\n<h2 style=\"font-size: 20px;\"><strong><Head> vs <Body> : une vision simplifiée</strong></h2>\n<p>De manière générale, une page web est composée de 2 parties principales : la tête (<span style=\"font-weight: bold;\"><head></span>) et le corps (<body>). La première partie (head) sert aux informations globales de notre page (son titre, sa favicon, sa langue…). La seconde partie comprend tous les éléments visibles pour notre utilisateur. C’est dans cette partie que nous mettons en place notre affichage. Voici un exemple de code de base pour créer une page :</p>\n{% module_block module \"widget_0a7665ff-9867-4729-8ea7-335a810757c9\" %}{% module_attribute \"child_css\" is_json=\"true\" %}{% raw %}null{% end_module_attribute %}{% module_attribute \"css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"label\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"layout\" is_json=\"true\" %}\"classic\"{% end_module_attribute %}{% module_attribute \"module_id\" is_json=\"true\" %}104375928356{% end_module_attribute %}{% module_attribute \"schema_version\" is_json=\"true\" %}2{% end_module_attribute %}{% module_attribute \"tag\" is_json=\"true\" %}\"module\"{% end_module_attribute %}{% end_module_block %}\n{% module_block module \"widget_5cf34282-434d-4145-bc1a-979f69aec98a\" %}{% module_attribute \"child_css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"label\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"module_id\" is_json=\"true\" %}105436309545{% end_module_attribute %}{% module_attribute \"schema_version\" is_json=\"true\" %}2{% end_module_attribute %}{% module_attribute \"tag\" is_json=\"true\" %}\"module\"{% end_module_attribute %}{% end_module_block %}\n{% module_block module \"widget_2ebb0900-abab-431e-9c83-e9adcd86a1f2\" %}{% module_attribute \"child_css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"label\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"module_id\" is_json=\"true\" %}118485470617{% end_module_attribute %}{% module_attribute \"schema_version\" is_json=\"true\" %}2{% end_module_attribute %}{% module_attribute \"tag\" is_json=\"true\" %}\"module\"{% end_module_attribute %}{% end_module_block %}\n{% module_block module \"widget_03ec47b5-527a-4150-937f-3f04c55751dd\" %}{% module_attribute \"child_css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"label\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"module_id\" is_json=\"true\" %}119200723003{% end_module_attribute %}{% module_attribute \"richtext_card_caption\" is_json=\"true\" %}\"<div style=\\\"line-height: 1.25;\\\"><code><!DOCTYPE html></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code><html lang=\\\"fr\\\"></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code><head></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code>  <meta charset=\\\"UTF-8\\\"></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code>  <meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code>  <title>Document</title></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code></head></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code><body></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code>   <h1>Bienvenue à la wild</h1></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code></body></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code></html></code></div>\"{% end_module_attribute %}{% module_attribute \"schema_version\" is_json=\"true\" %}2{% end_module_attribute %}{% module_attribute \"switch_to_dark_card\" is_json=\"true\" %}true{% end_module_attribute %}{% module_attribute \"tag\" is_json=\"true\" %}\"module\"{% end_module_attribute %}{% end_module_block %}\n<p><strong style=\"font-size: var(--body_font_font_size); color: var(--body_font_color);\">Revenons ligne par ligne :</strong></p>\n<p><strong><!DOCTYPE html> :</strong> Cette ligne déclare la version du langage HTML utilisée dans le document. En l'occurrence, <!DOCTYPE html> indique que c'est un document HTML5.</p>\n<p><strong><html lang=\"fr\"> : </strong>Cela marque le début du document HTML. Le langage utilisé est défini comme le français (fr), mais nous pouvons changer la langue si nécessaire.</p>\n<p><strong><head> : </strong>Cette balise ouvre la section d'en-tête du document. L'en-tête contient des informations sur le document lui-même, comme le titre, les métadonnées, les liens vers des feuilles de style, des scripts, etc.</p>\n<p><strong><meta charset=\"UTF-8\"> : </strong>Ceci spécifie l'encodage des caractères utilisé dans le document, qui est UTF-8. Cela garantit que le texte sera correctement interprété quel que soit le caractère utilisé.</p>\n<p><strong><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> : </strong>Cette balise fournit des informations de visualisation pour les navigateurs. Elle indique au navigateur qu'il doit définir la largeur de l'écran de manière égale à la largeur de l'appareil et qu'il doit initialement zoomer à un facteur de 1.0. Cela aide à créer des pages web réactives et adaptées aux appareils mobiles.</p>\n<p><strong><title>Document</title> : </strong>Cette balise définit le titre du document qui sera affiché dans la barre de titre du navigateur ou dans l'onglet du navigateur. Dans ce cas, le titre est simplement \"Document\".</p>\n<p><strong></head> : </strong>Ceci marque la fin de la section d'en-tête.</p>\n<p><strong><body> : </strong>C'est la balise d'ouverture du corps du document. Le corps contient tout le contenu visible de la page web.</p>\n<p><strong><h1>Bienvenue à la wild</h1> : </strong>Cela définit un titre de niveau 1 dans le corps du document. Dans ce cas, il s'agit de \"Bienvenue à la wild\". Les titres de niveau 1 sont généralement utilisés pour les titres principaux de la page.</p>\n<p><strong></body> :</strong> Cette balise marque la fin du corps du document.</p>\n<p><strong></html> : </strong>Ceci marque la fin du document HTML.</p>\n<p> </p>\n<h2 style=\"font-size: 20px;\"><strong>Comment organiser nos balises dans notre <body> ?</strong></h2>\n<p>Pour organiser nos balises dans notre corps, il faut imaginer notre interface web (notre page) comme un ensemble de boîtes imbriquées les unes dans les autres.</p>\n<p>Voici un exemple possible de découpage de la page d’accueil de la Wild Code School.</p>\n<p><img src=\"https://lh7-us.googleusercontent.com/SgB5AKQZnt1j0DbKbFnlwxXRcmEi4a3zaE6RS27UawPlpsTm0PJ2Ds2IWraGcpkPufVuw_VpcyZAMSlB-AjrsOTqUoBifZ-1TIOAfMWfDhMAangb5TWtnXIZnAOSECqe9fan-tyxEkezGW_NQ9o_G2A\" width=\"566\" height=\"477\" loading=\"lazy\" style=\"margin-left: auto; margin-right: auto; display: block; width: 566px; height: auto; max-width: 100%;\"></p>\n<p> </p>\n<p>En HTML, pour mettre en place ces différentes boîtes, nous avons accès à un ensemble de balises (<header>, <footer>,<main>, <section>, <article>, <div>). Fondamentalement, lorsque nous débutons, aucune n’est vraiment mauvaise pour faire notre mise en page. Certaines ont cependant plus de sens que d’autres.</p>\n<p>Dans notre cas, cela pourrait donner ceci :</p>\n{% module_block module \"widget_f21be41d-381f-43fb-8420-033d79c57453\" %}{% module_attribute \"child_css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"label\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"module_id\" is_json=\"true\" %}119200723003{% end_module_attribute %}{% module_attribute \"richtext_card_caption\" is_json=\"true\" %}\"<div style=\\\"line-height: 1.25;\\\"><code><body></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 40px;\\\"><code> <header></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 80px;\\\"><code> Nous retrouverons ici notre barre de navigation</code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 40px;\\\"><code> </header></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 40px;\\\"><code><main></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 80px;\\\"><code><section></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 120px;\\\"><code> Nous trouverons ici Notre espace titre Into the Wild</code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 80px;\\\"><code></section></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 80px;\\\"><code><section></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 120px;\\\"><code> <div></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 160px;\\\"><code> <article></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 200px;\\\"><code> Le contenu de notre article de gauche</code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 160px;\\\"><code> </article></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 120px;\\\"><code> </div></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 120px;\\\"><code><div></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 160px;\\\"><code> <article></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 200px;\\\"><code> Le contenu de notre premier article de droite</code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 160px;\\\"><code> </article></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 160px;\\\"><code><article></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 200px;\\\"><code> Le contenu de notre second article de droite</code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 160px;\\\"><code> </article></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 160px;\\\"><code><article></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 200px;\\\"><code> Le contenu de notre troisième article de droite</code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 160px;\\\"><code></article></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 120px;\\\"><code></div></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 80px;\\\"><code></section></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 40px;\\\"><code></main></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code></body></code></div>\"{% end_module_attribute %}{% module_attribute \"schema_version\" is_json=\"true\" %}2{% end_module_attribute %}{% module_attribute \"switch_to_dark_card\" is_json=\"true\" %}true{% end_module_attribute %}{% module_attribute \"tag\" is_json=\"true\" %}\"module\"{% end_module_attribute %}{% end_module_block %}\n<p>Nous avons imbriqué nos boîtes (balises) pour mettre en place notre structure HTML. Pas d’inquiétude si cela ne ressemble en rien à notre modèle. Le HTML ne gère pas la mise en page, seulement la structure. Il faudra dans un second temps découvrir et y associer du style (le CSS).</p>\n<p> </p>\n<h2 style=\"font-size: 20px;\"><strong>Comment intégrer du contenu à notre HTML ?</strong></h2>\n<p>Si on entre dans le détails… Dans notre boite <article>, nous allons maintenant chercher à intégrer notre contenu. Voici une proposition de découpage possible.</p>\n<p><img src=\"https://lh7-us.googleusercontent.com/LyoaxDZNh3aj2NbaxNdPxwuXk1yDb1u6SkMyTlCzFbQ1kQEHRN7wiVfT4bhn6DK523zFEIi6JMtmO2mL48wxkh5CVmBqApVnvnBQ9kX0RsGjSrlJ534S3j66p7UOUqwY33mkm3oJbrqZ6pK02sqK9Fc\" width=\"530\" height=\"600\" loading=\"lazy\" style=\"margin-left: auto; margin-right: auto; display: block; width: 530px; height: auto; max-width: 100%;\"></p>\n<p> </p>\n<p>Dans un premier temps, nous trouvons une image <img />, puis une boite avec deux mots séparés, un titre <h1> et un bouton de navigation <a>. Voilà nous y sommes presque...</p>\n<p> </p>\n{% module_block module \"widget_9ad47cf8-ba19-448a-ba3e-62607b8ea24c\" %}{% module_attribute \"child_css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"label\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"module_id\" is_json=\"true\" %}119200723003{% end_module_attribute %}{% module_attribute \"richtext_card_caption\" is_json=\"true\" %}\"<div style=\\\"line-height: 1.15;\\\"><code><article></code></div>\\n<p style=\\\"padding-left: 40px; line-height: 1.15;\\\"><code><span style=\\\"color: #000000;\\\"> </span><img<span style=\\\"color: #000000;\\\"> </span>src=\\\"https://www.wildcodeschool.com/hubfs/2024-01-26_Les_salaires_de_lIT_quelles_tendances_en_2024.jpg\\\"<span style=\\\"color: #000000;\\\"> </span>alt=\\\"Article,<span style=\\\"color: #000000;\\\"> </span>salaire<span style=\\\"color: #000000;\\\"> </span>IT\\\"<span style=\\\"color: #000000;\\\"> </span>/></code></p>\\n<p style=\\\"padding-left: 40px; line-height: 1.15;\\\"><code><span style=\\\"color: #000000;\\\"> </span><div></code></p>\\n<p style=\\\"padding-left: 80px; line-height: 1.15;\\\"><code><span style=\\\"color: #000000;\\\"> </span><span style=\\\"color: #000000;\\\"> </span><h4>Tech</h4></code></p>\\n<p style=\\\"padding-left: 80px; line-height: 1.15;\\\"><code><span style=\\\"color: #000000;\\\"> </span><span style=\\\"color: #000000;\\\"> </span><h4>Décryptage</h4></code></p>\\n<p style=\\\"padding-left: 40px; line-height: 1.15;\\\"><code><span style=\\\"color: #000000;\\\"> </span></div></code></p>\\n<p style=\\\"padding-left: 40px; line-height: 1.15;\\\"><code><span style=\\\"color: #000000;\\\"> </span><h2>LES<span style=\\\"color: #000000;\\\"> </span>SALAIRES<span style=\\\"color: #000000;\\\"> </span>DE<span style=\\\"color: #000000;\\\"> </span>L’IT<span style=\\\"color: #000000;\\\"> </span>:<span style=\\\"color: #000000;\\\"> </span>QUELLES<span style=\\\"color: #000000;\\\"> </span>TENDANCES<span style=\\\"color: #000000;\\\"> </span>EN<span style=\\\"color: #000000;\\\"> </span>2024<span style=\\\"color: #000000;\\\"> </span>?</h2></code></p>\\n<p style=\\\"line-height: 1.15;\\\"><code><span style=\\\"color: #000000;\\\"> </span><a<span style=\\\"color: #000000;\\\"> </span>href=\\\"https://www.wildcodeschool.com/fr-fr/blog/les-salaires-de-lit-quelles-tendances-en-2024\\\"<span style=\\\"color: #000000;\\\"> </span>target=\\\"_blank\\\">Lire<span style=\\\"color: #000000;\\\"> </span>l’article</a></code></p>\\n<p style=\\\"line-height: 1.15;\\\"><code></article></code></p>\"{% end_module_attribute %}{% module_attribute \"schema_version\" is_json=\"true\" %}2{% end_module_attribute %}{% module_attribute \"switch_to_dark_card\" is_json=\"true\" %}true{% end_module_attribute %}{% module_attribute \"tag\" is_json=\"true\" %}\"module\"{% end_module_attribute %}{% end_module_block %}\n<p><strong>En résumé, </strong>Le code HTML nous permet de structurer nos éléments dans notre page. Il faut l’imaginer comme un imbriquement de boîtes dans des boîtes qui finalement contiennent notre contenu.</p>\n<p> </p>\n<p>Ces premiers pas en HTML vous ont donné envie d'en apprendre davantage ? <span>Lancez-vous avec </span><a href=\"https://www.wildcodeschool.com/fr-fr/formations-developpement-web/formation-developpeur-web-a-distance?hsLang=fr-fr\" style=\"font-weight: bold;\">notre bootcamp en développement web.</a><span> Cette formation intensive de 5 mois peut-être suivie sur l'un de nos campus ou à distance. </span></p>", "rss_summary" : "<p>Si vous êtes décidés à apprendre le vaste univers du développement web, la création de l’interface est souvent le meilleur point de départ. La page web ! Mais comment est-elle constituée ? Pour donner la structure à notre page, à notre contenu (textes, images,...), un langage est incontournable : <a href=\"/fr-fr/blog/apprendre-le-html\" rel=\"noopener\"><span style=\"font-weight: bold;\">le HTML</span></a>.</p>\n", "rss_body" : "<p>Si vous êtes décidés à apprendre le vaste univers du développement web, la création de l’interface est souvent le meilleur point de départ. La page web ! Mais comment est-elle constituée ? Pour donner la structure à notre page, à notre contenu (textes, images,...), un langage est incontournable : <a href=\"/fr-fr/blog/apprendre-le-html\" rel=\"noopener\"><span style=\"font-weight: bold;\">le HTML</span></a>.</p>\n<p>Un site web a souvent pour raison l’affichage d’un contenu. Que ce soient du texte, des images, des liens, de la vidéo... <a href=\"/fr-fr/blog/pourquoi-commence-t-on-le-code-par-html-et-css\" rel=\"noopener\"><span style=\"font-weight: bold;\">Le HTML</span></a> (HyperText Markup Language) intervient pour nous permettre de structurer ces différents contenus dans notre page. C’est lui qui donne l’architecture sur laquelle tout va reposer ensuite.</p>\n<p> </p>\n<h2 style=\"font-size: 30px;\">Les balises</h2>\n<p>Le HTML est donc composé de <strong>balises</strong>. Une balise est un bout de code composé d’un chevron ouvrant “<span style=\"font-weight: bold;\"><</span>”, du nom de la balise, suivi d’un chevron fermant “<span style=\"font-weight: bold;\">></span>”. Toute balise ouvrante devra avoir une balise fermante. La balise fermante se distingue de sa sœur par l’ajout d’un “<span style=\"font-weight: bold;\">/</span>” après le premier chevron.</p>\n<p>En voici un exemple : <span style=\"font-weight: bold;\"><article></span> -----Ceci est mon contenu —-- <span style=\"font-weight: bold;\"></article></span></p>\n<p>Attention, lorsqu’on débute, on n’accorde souvent pas assez d’attention à l’ordre d’ouverture et de fermeture de nos balises. Cela a pour conséquence de casser la structure de notre page et de croiser nos contenus. Mieux vaut prendre le temps de vérifier nos lignes de HTML avant d’avancer trop dans notre page.</p>\n<p> </p>\n<h2 style=\"font-size: 30px;\">Structure de la page</h2>\n<p>Maintenant, que nous savons ce qu’est une balise, nous entrons dans la structure plus globale de notre page. Nous allons ainsi distinguer deux niveaux dans notre page, le <strong>Head </strong>et le <strong>Body</strong>.</p>\n<p style=\"padding-left: 40px;\"><em>Astuce : pour créer une page web, rien de plus simple. Il faut créer un fichier index.html, puis double-cliquer dessus pour l’ouvrir dans le navigateur. La page est blanche, c’est normal, notre fichier est vide. Ouvrons-le avec un éditeur de texte (Bloc-note si nous n’avons pas d’éditeur spécifique). Ensuite, continuons notre découverte.</em></p>\n<p style=\"padding-left: 40px;\"> </p>\n<h2 style=\"font-size: 20px;\"><strong><Head> vs <Body> : une vision simplifiée</strong></h2>\n<p>De manière générale, une page web est composée de 2 parties principales : la tête (<span style=\"font-weight: bold;\"><head></span>) et le corps (<body>). La première partie (head) sert aux informations globales de notre page (son titre, sa favicon, sa langue…). La seconde partie comprend tous les éléments visibles pour notre utilisateur. C’est dans cette partie que nous mettons en place notre affichage. Voici un exemple de code de base pour créer une page :</p>\n{% module_block module \"widget_0a7665ff-9867-4729-8ea7-335a810757c9\" %}{% module_attribute \"child_css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"label\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"layout\" is_json=\"true\" %}\"classic\"{% end_module_attribute %}{% module_attribute \"module_id\" is_json=\"true\" %}104375928356{% end_module_attribute %}{% module_attribute \"schema_version\" is_json=\"true\" %}2{% end_module_attribute %}{% module_attribute \"tag\" is_json=\"true\" %}\"module\"{% end_module_attribute %}{% end_module_block %}\n{% module_block module \"widget_5cf34282-434d-4145-bc1a-979f69aec98a\" %}{% module_attribute \"child_css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"label\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"module_id\" is_json=\"true\" %}105436309545{% end_module_attribute %}{% module_attribute \"schema_version\" is_json=\"true\" %}2{% end_module_attribute %}{% module_attribute \"tag\" is_json=\"true\" %}\"module\"{% end_module_attribute %}{% end_module_block %}\n{% module_block module \"widget_2ebb0900-abab-431e-9c83-e9adcd86a1f2\" %}{% module_attribute \"child_css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"label\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"module_id\" is_json=\"true\" %}118485470617{% end_module_attribute %}{% module_attribute \"schema_version\" is_json=\"true\" %}2{% end_module_attribute %}{% module_attribute \"tag\" is_json=\"true\" %}\"module\"{% end_module_attribute %}{% end_module_block %}\n{% module_block module \"widget_03ec47b5-527a-4150-937f-3f04c55751dd\" %}{% module_attribute \"child_css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"label\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"module_id\" is_json=\"true\" %}119200723003{% end_module_attribute %}{% module_attribute \"richtext_card_caption\" is_json=\"true\" %}\"<div style=\\\"line-height: 1.25;\\\"><code><!DOCTYPE html></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code><html lang=\\\"fr\\\"></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code><head></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code>  <meta charset=\\\"UTF-8\\\"></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code>  <meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code>  <title>Document</title></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code></head></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code><body></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code>   <h1>Bienvenue à la wild</h1></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code></body></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code></html></code></div>\"{% end_module_attribute %}{% module_attribute \"schema_version\" is_json=\"true\" %}2{% end_module_attribute %}{% module_attribute \"switch_to_dark_card\" is_json=\"true\" %}true{% end_module_attribute %}{% module_attribute \"tag\" is_json=\"true\" %}\"module\"{% end_module_attribute %}{% end_module_block %}\n<p><strong style=\"font-size: var(--body_font_font_size); color: var(--body_font_color);\">Revenons ligne par ligne :</strong></p>\n<p><strong><!DOCTYPE html> :</strong> Cette ligne déclare la version du langage HTML utilisée dans le document. En l'occurrence, <!DOCTYPE html> indique que c'est un document HTML5.</p>\n<p><strong><html lang=\"fr\"> : </strong>Cela marque le début du document HTML. Le langage utilisé est défini comme le français (fr), mais nous pouvons changer la langue si nécessaire.</p>\n<p><strong><head> : </strong>Cette balise ouvre la section d'en-tête du document. L'en-tête contient des informations sur le document lui-même, comme le titre, les métadonnées, les liens vers des feuilles de style, des scripts, etc.</p>\n<p><strong><meta charset=\"UTF-8\"> : </strong>Ceci spécifie l'encodage des caractères utilisé dans le document, qui est UTF-8. Cela garantit que le texte sera correctement interprété quel que soit le caractère utilisé.</p>\n<p><strong><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> : </strong>Cette balise fournit des informations de visualisation pour les navigateurs. Elle indique au navigateur qu'il doit définir la largeur de l'écran de manière égale à la largeur de l'appareil et qu'il doit initialement zoomer à un facteur de 1.0. Cela aide à créer des pages web réactives et adaptées aux appareils mobiles.</p>\n<p><strong><title>Document</title> : </strong>Cette balise définit le titre du document qui sera affiché dans la barre de titre du navigateur ou dans l'onglet du navigateur. Dans ce cas, le titre est simplement \"Document\".</p>\n<p><strong></head> : </strong>Ceci marque la fin de la section d'en-tête.</p>\n<p><strong><body> : </strong>C'est la balise d'ouverture du corps du document. Le corps contient tout le contenu visible de la page web.</p>\n<p><strong><h1>Bienvenue à la wild</h1> : </strong>Cela définit un titre de niveau 1 dans le corps du document. Dans ce cas, il s'agit de \"Bienvenue à la wild\". Les titres de niveau 1 sont généralement utilisés pour les titres principaux de la page.</p>\n<p><strong></body> :</strong> Cette balise marque la fin du corps du document.</p>\n<p><strong></html> : </strong>Ceci marque la fin du document HTML.</p>\n<p> </p>\n<h2 style=\"font-size: 20px;\"><strong>Comment organiser nos balises dans notre <body> ?</strong></h2>\n<p>Pour organiser nos balises dans notre corps, il faut imaginer notre interface web (notre page) comme un ensemble de boîtes imbriquées les unes dans les autres.</p>\n<p>Voici un exemple possible de découpage de la page d’accueil de la Wild Code School.</p>\n<p><img src=\"https://lh7-us.googleusercontent.com/SgB5AKQZnt1j0DbKbFnlwxXRcmEi4a3zaE6RS27UawPlpsTm0PJ2Ds2IWraGcpkPufVuw_VpcyZAMSlB-AjrsOTqUoBifZ-1TIOAfMWfDhMAangb5TWtnXIZnAOSECqe9fan-tyxEkezGW_NQ9o_G2A\" width=\"566\" height=\"477\" loading=\"lazy\" style=\"margin-left: auto; margin-right: auto; display: block; width: 566px; height: auto; max-width: 100%;\"></p>\n<p> </p>\n<p>En HTML, pour mettre en place ces différentes boîtes, nous avons accès à un ensemble de balises (<header>, <footer>,<main>, <section>, <article>, <div>). Fondamentalement, lorsque nous débutons, aucune n’est vraiment mauvaise pour faire notre mise en page. Certaines ont cependant plus de sens que d’autres.</p>\n<p>Dans notre cas, cela pourrait donner ceci :</p>\n{% module_block module \"widget_f21be41d-381f-43fb-8420-033d79c57453\" %}{% module_attribute \"child_css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"label\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"module_id\" is_json=\"true\" %}119200723003{% end_module_attribute %}{% module_attribute \"richtext_card_caption\" is_json=\"true\" %}\"<div style=\\\"line-height: 1.25;\\\"><code><body></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 40px;\\\"><code> <header></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 80px;\\\"><code> Nous retrouverons ici notre barre de navigation</code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 40px;\\\"><code> </header></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 40px;\\\"><code><main></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 80px;\\\"><code><section></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 120px;\\\"><code> Nous trouverons ici Notre espace titre Into the Wild</code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 80px;\\\"><code></section></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 80px;\\\"><code><section></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 120px;\\\"><code> <div></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 160px;\\\"><code> <article></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 200px;\\\"><code> Le contenu de notre article de gauche</code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 160px;\\\"><code> </article></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 120px;\\\"><code> </div></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 120px;\\\"><code><div></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 160px;\\\"><code> <article></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 200px;\\\"><code> Le contenu de notre premier article de droite</code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 160px;\\\"><code> </article></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 160px;\\\"><code><article></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 200px;\\\"><code> Le contenu de notre second article de droite</code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 160px;\\\"><code> </article></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 160px;\\\"><code><article></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 200px;\\\"><code> Le contenu de notre troisième article de droite</code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 160px;\\\"><code></article></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 120px;\\\"><code></div></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 80px;\\\"><code></section></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 40px;\\\"><code></main></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code></body></code></div>\"{% end_module_attribute %}{% module_attribute \"schema_version\" is_json=\"true\" %}2{% end_module_attribute %}{% module_attribute \"switch_to_dark_card\" is_json=\"true\" %}true{% end_module_attribute %}{% module_attribute \"tag\" is_json=\"true\" %}\"module\"{% end_module_attribute %}{% end_module_block %}\n<p>Nous avons imbriqué nos boîtes (balises) pour mettre en place notre structure HTML. Pas d’inquiétude si cela ne ressemble en rien à notre modèle. Le HTML ne gère pas la mise en page, seulement la structure. Il faudra dans un second temps découvrir et y associer du style (le CSS).</p>\n<p> </p>\n<h2 style=\"font-size: 20px;\"><strong>Comment intégrer du contenu à notre HTML ?</strong></h2>\n<p>Si on entre dans le détails… Dans notre boite <article>, nous allons maintenant chercher à intégrer notre contenu. Voici une proposition de découpage possible.</p>\n<p><img src=\"https://lh7-us.googleusercontent.com/LyoaxDZNh3aj2NbaxNdPxwuXk1yDb1u6SkMyTlCzFbQ1kQEHRN7wiVfT4bhn6DK523zFEIi6JMtmO2mL48wxkh5CVmBqApVnvnBQ9kX0RsGjSrlJ534S3j66p7UOUqwY33mkm3oJbrqZ6pK02sqK9Fc\" width=\"530\" height=\"600\" loading=\"lazy\" style=\"margin-left: auto; margin-right: auto; display: block; width: 530px; height: auto; max-width: 100%;\"></p>\n<p> </p>\n<p>Dans un premier temps, nous trouvons une image <img />, puis une boite avec deux mots séparés, un titre <h1> et un bouton de navigation <a>. Voilà nous y sommes presque...</p>\n<p> </p>\n{% module_block module \"widget_9ad47cf8-ba19-448a-ba3e-62607b8ea24c\" %}{% module_attribute \"child_css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"label\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"module_id\" is_json=\"true\" %}119200723003{% end_module_attribute %}{% module_attribute \"richtext_card_caption\" is_json=\"true\" %}\"<div style=\\\"line-height: 1.15;\\\"><code><article></code></div>\\n<p style=\\\"padding-left: 40px; line-height: 1.15;\\\"><code><span style=\\\"color: #000000;\\\"> </span><img<span style=\\\"color: #000000;\\\"> </span>src=\\\"https://www.wildcodeschool.com/hubfs/2024-01-26_Les_salaires_de_lIT_quelles_tendances_en_2024.jpg\\\"<span style=\\\"color: #000000;\\\"> </span>alt=\\\"Article,<span style=\\\"color: #000000;\\\"> </span>salaire<span style=\\\"color: #000000;\\\"> </span>IT\\\"<span style=\\\"color: #000000;\\\"> </span>/></code></p>\\n<p style=\\\"padding-left: 40px; line-height: 1.15;\\\"><code><span style=\\\"color: #000000;\\\"> </span><div></code></p>\\n<p style=\\\"padding-left: 80px; line-height: 1.15;\\\"><code><span style=\\\"color: #000000;\\\"> </span><span style=\\\"color: #000000;\\\"> </span><h4>Tech</h4></code></p>\\n<p style=\\\"padding-left: 80px; line-height: 1.15;\\\"><code><span style=\\\"color: #000000;\\\"> </span><span style=\\\"color: #000000;\\\"> </span><h4>Décryptage</h4></code></p>\\n<p style=\\\"padding-left: 40px; line-height: 1.15;\\\"><code><span style=\\\"color: #000000;\\\"> </span></div></code></p>\\n<p style=\\\"padding-left: 40px; line-height: 1.15;\\\"><code><span style=\\\"color: #000000;\\\"> </span><h2>LES<span style=\\\"color: #000000;\\\"> </span>SALAIRES<span style=\\\"color: #000000;\\\"> </span>DE<span style=\\\"color: #000000;\\\"> </span>L’IT<span style=\\\"color: #000000;\\\"> </span>:<span style=\\\"color: #000000;\\\"> </span>QUELLES<span style=\\\"color: #000000;\\\"> </span>TENDANCES<span style=\\\"color: #000000;\\\"> </span>EN<span style=\\\"color: #000000;\\\"> </span>2024<span style=\\\"color: #000000;\\\"> </span>?</h2></code></p>\\n<p style=\\\"line-height: 1.15;\\\"><code><span style=\\\"color: #000000;\\\"> </span><a<span style=\\\"color: #000000;\\\"> </span>href=\\\"https://www.wildcodeschool.com/fr-fr/blog/les-salaires-de-lit-quelles-tendances-en-2024\\\"<span style=\\\"color: #000000;\\\"> </span>target=\\\"_blank\\\">Lire<span style=\\\"color: #000000;\\\"> </span>l’article</a></code></p>\\n<p style=\\\"line-height: 1.15;\\\"><code></article></code></p>\"{% end_module_attribute %}{% module_attribute \"schema_version\" is_json=\"true\" %}2{% end_module_attribute %}{% module_attribute \"switch_to_dark_card\" is_json=\"true\" %}true{% end_module_attribute %}{% module_attribute \"tag\" is_json=\"true\" %}\"module\"{% end_module_attribute %}{% end_module_block %}\n<p><strong>En résumé, </strong>Le code HTML nous permet de structurer nos éléments dans notre page. Il faut l’imaginer comme un imbriquement de boîtes dans des boîtes qui finalement contiennent notre contenu.</p>\n<p> </p>\n<p>Ces premiers pas en HTML vous ont donné envie d'en apprendre davantage ? <span>Lancez-vous avec </span><a href=\"https://www.wildcodeschool.com/fr-fr/formations-developpement-web/formation-developpeur-web-a-distance?hsLang=fr-fr\" style=\"font-weight: bold;\">notre bootcamp en développement web.</a><span> Cette formation intensive de 5 mois peut-être suivie sur l'un de nos campus ou à distance. </span></p>", "blog_post_schedule_task_uid" : null, "blog_publish_to_social_media_task" : "DONE_NOT_SENT", "blog_publish_instant_email_task_uid" : null, "blog_publish_instant_email_campaign_id" : null, "blog_publish_instant_email_retry_count" : null, "keywords" : [ ], "composition_id" : 0, "is_crawlable_by_bots" : false, "published_at" : 1727261617198, "head_html" : null, "footer_html" : null, "attached_stylesheets" : [ ], "enable_domain_stylesheets" : null, "include_default_custom_css" : null, "layout_sections" : { }, "meta_description" : "Lorsque nous parlons de développement web, de site web ou d’application web, il y a des choses dont nous ne pouvons pas nous passer. Le langage HTML (HyperText Markup Language) fait partie de ces incontournables qu'il faut appréhender. On vous explique son rôle, ses bases et peut-être même un peu plus !", "meta_keywords" : null, "past_mab_experiment_ids" : [ ], "deleted_by" : null, "featured_image_alt_text" : "Deux jeunes femmes regardent leur écran d'ordinateur et leur premiers pas en HTML", "enable_layout_stylesheets" : null, "tweet" : null, "tweet_at" : null, "campaign_name" : null, "campaign_utm" : null, "tweet_immediately" : false, "publish_immediately" : true, "security_state" : "NONE", "scheduled_update_date" : 0, "placement_guids" : [ ], "property_for_dynamic_page_title" : null, "property_for_dynamic_page_slug" : null, "property_for_dynamic_page_meta_description" : null, "property_for_dynamic_page_featured_image" : null, "property_for_dynamic_page_canonical_url" : null, "preview_image_src" : null, "legacy_blog_tabid" : null, "legacy_post_guid" : null, "performable_variation_letter" : null, "style_override_id" : null, "has_user_changes" : true, "css" : { }, "css_text" : "", "unpublished_at" : 0, "published_by_id" : 50704370, "allowed_slug_conflict" : false, "ai_features" : null, "link_rel_canonical_url" : "", "page_redirected" : false, "page_expiry_enabled" : null, "page_expiry_date" : null, "page_expiry_redirect_id" : null, "page_expiry_redirect_url" : null, "deleted_by_id" : null, "state_when_deleted" : null, "cloned_from" : null, "staged_from" : null, "personas" : [ ], "compose_body" : null, "featured_image" : "https://2902314.fs1.hubspotusercontent-na1.net/hubfs/2902314/2024-05-06_COMBIEN_COTE_UNE_FORMATION_DE_DVELOPPEUR_WEB.jpg", "featured_image_width" : 2000, "featured_image_height" : 1333, "publish_timezone_offset" : null, "theme_settings_values" : null, "password" : null, "header" : null, "last_edit_session_id" : null, "last_edit_update_id" : null, "created_by_agent" : null }, "metaDescription" : "Lorsque nous parlons de développement web, de site web ou d’application web, il y a des choses dont nous ne pouvons pas nous passer. Le langage HTML (HyperText Markup Language) fait partie de ces incontournables qu'il faut appréhender. On vous explique son rôle, ses bases et peut-être même un peu plus !", "metaKeywords" : null, "name" : "Faire ses premiers pas en HTML", "nextPostFeaturedImage" : "https://2902314.fs1.hubspotusercontent-na1.net/hubfs/2902314/2024-05-17_MARKETING%206%20RAISONS%20DE%20VOUS%20FORMER%20%C3%80%20LA%20BUSINESS%20INTELLIGENCE.jpg", "nextPostFeaturedImageAltText" : "", "nextPostName" : "Marketing : 6 raisons de vous former à la Business Intelligence", "nextPostSlug" : "fr-fr/blog/marketing-6-raisons-de-vous-former-a-la-business-intelligence", "pageExpiryDate" : null, "pageExpiryEnabled" : null, "pageExpiryRedirectId" : null, "pageExpiryRedirectUrl" : null, "pageRedirected" : false, "pageTitle" : "Faire ses premiers pas en HTML", "parentBlog" : { "absoluteUrl" : "https://www.wildcodeschool.com/fr-fr/blog", "allowComments" : false, "ampBodyColor" : "#404040", "ampBodyFont" : "'Helvetica Neue', Helvetica, Arial, sans-serif", "ampBodyFontSize" : "18", "ampCustomCss" : "", "ampHeaderBackgroundColor" : "#ffffff", "ampHeaderColor" : "#1e1e1e", "ampHeaderFont" : "'Helvetica Neue', Helvetica, Arial, sans-serif", "ampHeaderFontSize" : "36", "ampLinkColor" : "#416bb3", "ampLogoAlt" : "", "ampLogoHeight" : 0, "ampLogoSrc" : "", "ampLogoWidth" : 0, "analyticsPageId" : 103175636270, "attachedStylesheets" : [ ], "audienceAccess" : "PUBLIC", "businessUnitId" : null, "captchaAfterDays" : 7, "captchaAlways" : false, "categoryId" : 3, "cdnPurgeEmbargoTime" : null, "closeCommentsOlder" : 0, "commentDateFormat" : "medium", "commentFormGuid" : "c7bc1329-e868-4cf0-9b1c-23d0a756caa6", "commentMaxThreadDepth" : 1, "commentModeration" : false, "commentNotificationEmails" : [ ], "commentShouldCreateContact" : false, "commentVerificationText" : "", "cosObjectType" : "BLOG", "created" : 1676891663653, "createdDateTime" : 1676891663653, "dailyNotificationEmailId" : null, "dateFormattingLanguage" : null, "defaultGroupStyleId" : "", "defaultNotificationFromName" : "", "defaultNotificationReplyTo" : "", "deletedAt" : 0, "description" : "Faites le plein d'informations liées aux métiers de la tech.", "domain" : "", "domainWhenPublished" : "www.wildcodeschool.com", "emailApiSubscriptionId" : null, "enableGoogleAmpOutput" : true, "enableSocialAutoPublishing" : false, "generateJsonLdEnabled" : true, "header" : null, "htmlFooter" : "", "htmlFooterIsShared" : true, "htmlHead" : "", "htmlHeadIsShared" : true, "htmlKeywords" : [ ], "htmlTitle" : "Le blog de la Wild Code School - Wild Code School", "id" : 103175636270, "ilsSubscriptionListsByType" : { }, "instantNotificationEmailId" : null, "itemLayoutId" : null, "itemTemplateIsShared" : false, "itemTemplatePath" : "MarkentivexWCS/templates/blog-post.html", "label" : "Blog", "language" : "fr-fr", "legacyGuid" : null, "legacyModuleId" : null, "legacyTabId" : null, "listingLayoutId" : null, "listingPageId" : 103175636271, "listingTemplatePath" : "", "liveDomain" : "www.wildcodeschool.com", "monthFilterFormat" : "MMMM yyyy", "monthlyNotificationEmailId" : null, "name" : "Blog", "parentBlogUpdateTaskId" : null, "portalId" : 2902314, "postHtmlFooter" : "", "postHtmlHead" : "", "postsPerListingPage" : 9, "postsPerRssFeed" : 10, "publicAccessRules" : [ ], "publicAccessRulesEnabled" : false, "publicTitle" : "Blog", "publishDateFormat" : "dd/MM/YYYY", "resolvedDomain" : "www.wildcodeschool.com", "rootUrl" : "https://www.wildcodeschool.com/fr-fr/blog", "rssCustomFeed" : null, "rssDescription" : null, "rssItemFooter" : null, "rssItemHeader" : null, "settingsOverrides" : { "itemLayoutId" : false, "itemTemplatePath" : false, "itemTemplateIsShared" : false, "listingLayoutId" : false, "listingTemplatePath" : false, "postsPerListingPage" : false, "showSummaryInListing" : false, "useFeaturedImageInSummary" : false, "htmlHead" : false, "postHtmlHead" : false, "htmlHeadIsShared" : false, "htmlFooter" : false, "listingPageHtmlFooter" : false, "postHtmlFooter" : false, "htmlFooterIsShared" : false, "attachedStylesheets" : false, "postsPerRssFeed" : false, "showSummaryInRss" : false, "showSummaryInEmails" : false, "showSummariesInEmails" : false, "allowComments" : false, "commentShouldCreateContact" : false, "commentModeration" : false, "closeCommentsOlder" : false, "commentNotificationEmails" : false, "commentMaxThreadDepth" : false, "commentVerificationText" : false, "socialAccountTwitter" : false, "showSocialLinkTwitter" : false, "showSocialLinkLinkedin" : false, "showSocialLinkFacebook" : false, "enableGoogleAmpOutput" : false, "ampLogoSrc" : false, "ampLogoHeight" : false, "ampLogoWidth" : false, "ampLogoAlt" : false, "ampHeaderFont" : false, "ampHeaderFontSize" : false, "ampHeaderColor" : false, "ampHeaderBackgroundColor" : false, "ampBodyFont" : false, "ampBodyFontSize" : false, "ampBodyColor" : false, "ampLinkColor" : false, "generateJsonLdEnabled" : false }, "showSocialLinkFacebook" : true, "showSocialLinkLinkedin" : true, "showSocialLinkTwitter" : true, "showSummaryInEmails" : true, "showSummaryInListing" : true, "showSummaryInRss" : true, "siteId" : null, "slug" : "fr-fr/blog", "socialAccountTwitter" : "", "state" : null, "subscriptionContactsProperty" : null, "subscriptionEmailType" : null, "subscriptionFormGuid" : null, "subscriptionListsByType" : { }, "title" : null, "translatedFromId" : null, "translations" : { "de-de" : { "absoluteUrl" : "https://www.wildcodeschool.com/de-de/blog", "id" : 103176710277, "language" : "de-de", "masterId" : 103175636270, "name" : "Blog", "publicAccessRules" : [ ], "publicAccessRulesEnabled" : false, "slug" : "de-de/blog" }, "en-gb" : { "absoluteUrl" : "https://www.wildcodeschool.com/en-gb/blog", "id" : 103176710275, "language" : "en-gb", "masterId" : 103175636270, "name" : "Blog", "publicAccessRules" : [ ], "publicAccessRulesEnabled" : false, "slug" : "en-gb/blog" }, "es-es" : { "absoluteUrl" : "https://www.wildcodeschool.com/es-es/blog", "id" : 103176710278, "language" : "es-es", "masterId" : 103175636270, "name" : "Blog", "publicAccessRules" : [ ], "publicAccessRulesEnabled" : false, "slug" : "es-es/blog" }, "pt-pt" : { "absoluteUrl" : "https://www.wildcodeschool.com/pt-pt/blog", "id" : 103176710276, "language" : "pt-pt", "masterId" : 103175636270, "name" : "Blog", "publicAccessRules" : [ ], "publicAccessRulesEnabled" : false, "slug" : "pt-pt/blog" } }, "updated" : 1726755591366, "updatedDateTime" : 1726755591366, "urlBase" : "www.wildcodeschool.com/fr-fr/blog", "urlSegments" : { "all" : "all", "archive" : "archive", "author" : "author", "page" : "page", "tag" : "tag" }, "useFeaturedImageInSummary" : true, "usesDefaultTemplate" : false, "weeklyNotificationEmailId" : null }, "password" : null, "pastMabExperimentIds" : [ ], "performableGuid" : null, "performableVariationLetter" : null, "personas" : [ ], "placementGuids" : [ ], "portableKey" : null, "portalId" : 2902314, "position" : null, "postBody" : "<p>Si vous êtes décidés à apprendre le vaste univers du développement web, la création de l’interface est souvent le meilleur point de départ. La page web ! Mais comment est-elle constituée ? Pour donner la structure à notre page, à notre contenu (textes, images,...), un langage est incontournable : <a href=\"/fr-fr/blog/apprendre-le-html\" rel=\"noopener\"><span style=\"font-weight: bold;\">le HTML</span></a>.</p>\n<p>Un site web a souvent pour raison l’affichage d’un contenu. Que ce soient du texte, des images, des liens, de la vidéo... <a href=\"/fr-fr/blog/pourquoi-commence-t-on-le-code-par-html-et-css\" rel=\"noopener\"><span style=\"font-weight: bold;\">Le HTML</span></a> (HyperText Markup Language) intervient pour nous permettre de structurer ces différents contenus dans notre page. C’est lui qui donne l’architecture sur laquelle tout va reposer ensuite.</p>\n<p> </p>\n<h2 style=\"font-size: 30px;\">Les balises</h2>\n<p>Le HTML est donc composé de <strong>balises</strong>. Une balise est un bout de code composé d’un chevron ouvrant “<span style=\"font-weight: bold;\"><</span>”, du nom de la balise, suivi d’un chevron fermant “<span style=\"font-weight: bold;\">></span>”. Toute balise ouvrante devra avoir une balise fermante. La balise fermante se distingue de sa sœur par l’ajout d’un “<span style=\"font-weight: bold;\">/</span>” après le premier chevron.</p>\n<p>En voici un exemple : <span style=\"font-weight: bold;\"><article></span> -----Ceci est mon contenu —-- <span style=\"font-weight: bold;\"></article></span></p>\n<p>Attention, lorsqu’on débute, on n’accorde souvent pas assez d’attention à l’ordre d’ouverture et de fermeture de nos balises. Cela a pour conséquence de casser la structure de notre page et de croiser nos contenus. Mieux vaut prendre le temps de vérifier nos lignes de HTML avant d’avancer trop dans notre page.</p>\n<p> </p>\n<h2 style=\"font-size: 30px;\">Structure de la page</h2>\n<p>Maintenant, que nous savons ce qu’est une balise, nous entrons dans la structure plus globale de notre page. Nous allons ainsi distinguer deux niveaux dans notre page, le <strong>Head </strong>et le <strong>Body</strong>.</p>\n<p style=\"padding-left: 40px;\"><em>Astuce : pour créer une page web, rien de plus simple. Il faut créer un fichier index.html, puis double-cliquer dessus pour l’ouvrir dans le navigateur. La page est blanche, c’est normal, notre fichier est vide. Ouvrons-le avec un éditeur de texte (Bloc-note si nous n’avons pas d’éditeur spécifique). Ensuite, continuons notre découverte.</em></p>\n<p style=\"padding-left: 40px;\"> </p>\n<h2 style=\"font-size: 20px;\"><strong><Head> vs <Body> : une vision simplifiée</strong></h2>\n<p>De manière générale, une page web est composée de 2 parties principales : la tête (<span style=\"font-weight: bold;\"><head></span>) et le corps (<body>). La première partie (head) sert aux informations globales de notre page (son titre, sa favicon, sa langue…). La seconde partie comprend tous les éléments visibles pour notre utilisateur. C’est dans cette partie que nous mettons en place notre affichage. Voici un exemple de code de base pour créer une page :</p>\n{% module_block module \"widget_0a7665ff-9867-4729-8ea7-335a810757c9\" %}{% module_attribute \"child_css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"label\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"layout\" is_json=\"true\" %}\"classic\"{% end_module_attribute %}{% module_attribute \"module_id\" is_json=\"true\" %}104375928356{% end_module_attribute %}{% module_attribute \"schema_version\" is_json=\"true\" %}2{% end_module_attribute %}{% module_attribute \"tag\" is_json=\"true\" %}\"module\"{% end_module_attribute %}{% end_module_block %}\n{% module_block module \"widget_5cf34282-434d-4145-bc1a-979f69aec98a\" %}{% module_attribute \"child_css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"label\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"module_id\" is_json=\"true\" %}105436309545{% end_module_attribute %}{% module_attribute \"schema_version\" is_json=\"true\" %}2{% end_module_attribute %}{% module_attribute \"tag\" is_json=\"true\" %}\"module\"{% end_module_attribute %}{% end_module_block %}\n{% module_block module \"widget_2ebb0900-abab-431e-9c83-e9adcd86a1f2\" %}{% module_attribute \"child_css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"label\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"module_id\" is_json=\"true\" %}118485470617{% end_module_attribute %}{% module_attribute \"schema_version\" is_json=\"true\" %}2{% end_module_attribute %}{% module_attribute \"tag\" is_json=\"true\" %}\"module\"{% end_module_attribute %}{% end_module_block %}\n{% module_block module \"widget_03ec47b5-527a-4150-937f-3f04c55751dd\" %}{% module_attribute \"child_css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"label\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"module_id\" is_json=\"true\" %}119200723003{% end_module_attribute %}{% module_attribute \"richtext_card_caption\" is_json=\"true\" %}\"<div style=\\\"line-height: 1.25;\\\"><code><!DOCTYPE html></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code><html lang=\\\"fr\\\"></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code><head></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code>  <meta charset=\\\"UTF-8\\\"></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code>  <meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code>  <title>Document</title></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code></head></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code><body></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code>   <h1>Bienvenue à la wild</h1></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code></body></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code></html></code></div>\"{% end_module_attribute %}{% module_attribute \"schema_version\" is_json=\"true\" %}2{% end_module_attribute %}{% module_attribute \"switch_to_dark_card\" is_json=\"true\" %}true{% end_module_attribute %}{% module_attribute \"tag\" is_json=\"true\" %}\"module\"{% end_module_attribute %}{% end_module_block %}\n<p><strong style=\"font-size: var(--body_font_font_size); color: var(--body_font_color);\">Revenons ligne par ligne :</strong></p>\n<p><strong><!DOCTYPE html> :</strong> Cette ligne déclare la version du langage HTML utilisée dans le document. En l'occurrence, <!DOCTYPE html> indique que c'est un document HTML5.</p>\n<p><strong><html lang=\"fr\"> : </strong>Cela marque le début du document HTML. Le langage utilisé est défini comme le français (fr), mais nous pouvons changer la langue si nécessaire.</p>\n<p><strong><head> : </strong>Cette balise ouvre la section d'en-tête du document. L'en-tête contient des informations sur le document lui-même, comme le titre, les métadonnées, les liens vers des feuilles de style, des scripts, etc.</p>\n<p><strong><meta charset=\"UTF-8\"> : </strong>Ceci spécifie l'encodage des caractères utilisé dans le document, qui est UTF-8. Cela garantit que le texte sera correctement interprété quel que soit le caractère utilisé.</p>\n<p><strong><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> : </strong>Cette balise fournit des informations de visualisation pour les navigateurs. Elle indique au navigateur qu'il doit définir la largeur de l'écran de manière égale à la largeur de l'appareil et qu'il doit initialement zoomer à un facteur de 1.0. Cela aide à créer des pages web réactives et adaptées aux appareils mobiles.</p>\n<p><strong><title>Document</title> : </strong>Cette balise définit le titre du document qui sera affiché dans la barre de titre du navigateur ou dans l'onglet du navigateur. Dans ce cas, le titre est simplement \"Document\".</p>\n<p><strong></head> : </strong>Ceci marque la fin de la section d'en-tête.</p>\n<p><strong><body> : </strong>C'est la balise d'ouverture du corps du document. Le corps contient tout le contenu visible de la page web.</p>\n<p><strong><h1>Bienvenue à la wild</h1> : </strong>Cela définit un titre de niveau 1 dans le corps du document. Dans ce cas, il s'agit de \"Bienvenue à la wild\". Les titres de niveau 1 sont généralement utilisés pour les titres principaux de la page.</p>\n<p><strong></body> :</strong> Cette balise marque la fin du corps du document.</p>\n<p><strong></html> : </strong>Ceci marque la fin du document HTML.</p>\n<p> </p>\n<h2 style=\"font-size: 20px;\"><strong>Comment organiser nos balises dans notre <body> ?</strong></h2>\n<p>Pour organiser nos balises dans notre corps, il faut imaginer notre interface web (notre page) comme un ensemble de boîtes imbriquées les unes dans les autres.</p>\n<p>Voici un exemple possible de découpage de la page d’accueil de la Wild Code School.</p>\n<p><img src=\"https://lh7-us.googleusercontent.com/SgB5AKQZnt1j0DbKbFnlwxXRcmEi4a3zaE6RS27UawPlpsTm0PJ2Ds2IWraGcpkPufVuw_VpcyZAMSlB-AjrsOTqUoBifZ-1TIOAfMWfDhMAangb5TWtnXIZnAOSECqe9fan-tyxEkezGW_NQ9o_G2A\" width=\"566\" height=\"477\" loading=\"lazy\" style=\"margin-left: auto; margin-right: auto; display: block; width: 566px; height: auto; max-width: 100%;\"></p>\n<p> </p>\n<p>En HTML, pour mettre en place ces différentes boîtes, nous avons accès à un ensemble de balises (<header>, <footer>,<main>, <section>, <article>, <div>). Fondamentalement, lorsque nous débutons, aucune n’est vraiment mauvaise pour faire notre mise en page. Certaines ont cependant plus de sens que d’autres.</p>\n<p>Dans notre cas, cela pourrait donner ceci :</p>\n{% module_block module \"widget_f21be41d-381f-43fb-8420-033d79c57453\" %}{% module_attribute \"child_css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"label\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"module_id\" is_json=\"true\" %}119200723003{% end_module_attribute %}{% module_attribute \"richtext_card_caption\" is_json=\"true\" %}\"<div style=\\\"line-height: 1.25;\\\"><code><body></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 40px;\\\"><code> <header></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 80px;\\\"><code> Nous retrouverons ici notre barre de navigation</code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 40px;\\\"><code> </header></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 40px;\\\"><code><main></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 80px;\\\"><code><section></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 120px;\\\"><code> Nous trouverons ici Notre espace titre Into the Wild</code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 80px;\\\"><code></section></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 80px;\\\"><code><section></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 120px;\\\"><code> <div></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 160px;\\\"><code> <article></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 200px;\\\"><code> Le contenu de notre article de gauche</code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 160px;\\\"><code> </article></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 120px;\\\"><code> </div></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 120px;\\\"><code><div></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 160px;\\\"><code> <article></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 200px;\\\"><code> Le contenu de notre premier article de droite</code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 160px;\\\"><code> </article></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 160px;\\\"><code><article></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 200px;\\\"><code> Le contenu de notre second article de droite</code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 160px;\\\"><code> </article></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 160px;\\\"><code><article></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 200px;\\\"><code> Le contenu de notre troisième article de droite</code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 160px;\\\"><code></article></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 120px;\\\"><code></div></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 80px;\\\"><code></section></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 40px;\\\"><code></main></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code></body></code></div>\"{% end_module_attribute %}{% module_attribute \"schema_version\" is_json=\"true\" %}2{% end_module_attribute %}{% module_attribute \"switch_to_dark_card\" is_json=\"true\" %}true{% end_module_attribute %}{% module_attribute \"tag\" is_json=\"true\" %}\"module\"{% end_module_attribute %}{% end_module_block %}\n<p>Nous avons imbriqué nos boîtes (balises) pour mettre en place notre structure HTML. Pas d’inquiétude si cela ne ressemble en rien à notre modèle. Le HTML ne gère pas la mise en page, seulement la structure. Il faudra dans un second temps découvrir et y associer du style (le CSS).</p>\n<p> </p>\n<h2 style=\"font-size: 20px;\"><strong>Comment intégrer du contenu à notre HTML ?</strong></h2>\n<p>Si on entre dans le détails… Dans notre boite <article>, nous allons maintenant chercher à intégrer notre contenu. Voici une proposition de découpage possible.</p>\n<p><img src=\"https://lh7-us.googleusercontent.com/LyoaxDZNh3aj2NbaxNdPxwuXk1yDb1u6SkMyTlCzFbQ1kQEHRN7wiVfT4bhn6DK523zFEIi6JMtmO2mL48wxkh5CVmBqApVnvnBQ9kX0RsGjSrlJ534S3j66p7UOUqwY33mkm3oJbrqZ6pK02sqK9Fc\" width=\"530\" height=\"600\" loading=\"lazy\" style=\"margin-left: auto; margin-right: auto; display: block; width: 530px; height: auto; max-width: 100%;\"></p>\n<p> </p>\n<p>Dans un premier temps, nous trouvons une image <img />, puis une boite avec deux mots séparés, un titre <h1> et un bouton de navigation <a>. Voilà nous y sommes presque...</p>\n<p> </p>\n{% module_block module \"widget_9ad47cf8-ba19-448a-ba3e-62607b8ea24c\" %}{% module_attribute \"child_css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"label\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"module_id\" is_json=\"true\" %}119200723003{% end_module_attribute %}{% module_attribute \"richtext_card_caption\" is_json=\"true\" %}\"<div style=\\\"line-height: 1.15;\\\"><code><article></code></div>\\n<p style=\\\"padding-left: 40px; line-height: 1.15;\\\"><code><span style=\\\"color: #000000;\\\"> </span><img<span style=\\\"color: #000000;\\\"> </span>src=\\\"https://www.wildcodeschool.com/hubfs/2024-01-26_Les_salaires_de_lIT_quelles_tendances_en_2024.jpg\\\"<span style=\\\"color: #000000;\\\"> </span>alt=\\\"Article,<span style=\\\"color: #000000;\\\"> </span>salaire<span style=\\\"color: #000000;\\\"> </span>IT\\\"<span style=\\\"color: #000000;\\\"> </span>/></code></p>\\n<p style=\\\"padding-left: 40px; line-height: 1.15;\\\"><code><span style=\\\"color: #000000;\\\"> </span><div></code></p>\\n<p style=\\\"padding-left: 80px; line-height: 1.15;\\\"><code><span style=\\\"color: #000000;\\\"> </span><span style=\\\"color: #000000;\\\"> </span><h4>Tech</h4></code></p>\\n<p style=\\\"padding-left: 80px; line-height: 1.15;\\\"><code><span style=\\\"color: #000000;\\\"> </span><span style=\\\"color: #000000;\\\"> </span><h4>Décryptage</h4></code></p>\\n<p style=\\\"padding-left: 40px; line-height: 1.15;\\\"><code><span style=\\\"color: #000000;\\\"> </span></div></code></p>\\n<p style=\\\"padding-left: 40px; line-height: 1.15;\\\"><code><span style=\\\"color: #000000;\\\"> </span><h2>LES<span style=\\\"color: #000000;\\\"> </span>SALAIRES<span style=\\\"color: #000000;\\\"> </span>DE<span style=\\\"color: #000000;\\\"> </span>L’IT<span style=\\\"color: #000000;\\\"> </span>:<span style=\\\"color: #000000;\\\"> </span>QUELLES<span style=\\\"color: #000000;\\\"> </span>TENDANCES<span style=\\\"color: #000000;\\\"> </span>EN<span style=\\\"color: #000000;\\\"> </span>2024<span style=\\\"color: #000000;\\\"> </span>?</h2></code></p>\\n<p style=\\\"line-height: 1.15;\\\"><code><span style=\\\"color: #000000;\\\"> </span><a<span style=\\\"color: #000000;\\\"> </span>href=\\\"https://www.wildcodeschool.com/fr-fr/blog/les-salaires-de-lit-quelles-tendances-en-2024\\\"<span style=\\\"color: #000000;\\\"> </span>target=\\\"_blank\\\">Lire<span style=\\\"color: #000000;\\\"> </span>l’article</a></code></p>\\n<p style=\\\"line-height: 1.15;\\\"><code></article></code></p>\"{% end_module_attribute %}{% module_attribute \"schema_version\" is_json=\"true\" %}2{% end_module_attribute %}{% module_attribute \"switch_to_dark_card\" is_json=\"true\" %}true{% end_module_attribute %}{% module_attribute \"tag\" is_json=\"true\" %}\"module\"{% end_module_attribute %}{% end_module_block %}\n<p><strong>En résumé, </strong>Le code HTML nous permet de structurer nos éléments dans notre page. Il faut l’imaginer comme un imbriquement de boîtes dans des boîtes qui finalement contiennent notre contenu.</p>\n<p> </p>\n<p>Ces premiers pas en HTML vous ont donné envie d'en apprendre davantage ? <span>Lancez-vous avec </span><a href=\"https://www.wildcodeschool.com/fr-fr/formations-developpement-web/formation-developpeur-web-a-distance?hsLang=fr-fr\" style=\"font-weight: bold;\">notre bootcamp en développement web.</a><span> Cette formation intensive de 5 mois peut-être suivie sur l'un de nos campus ou à distance. </span></p>", "postBodyRss" : "<p>Si vous êtes décidés à apprendre le vaste univers du développement web, la création de l’interface est souvent le meilleur point de départ. La page web ! Mais comment est-elle constituée ? Pour donner la structure à notre page, à notre contenu (textes, images,...), un langage est incontournable : <a href=\"/fr-fr/blog/apprendre-le-html\" rel=\"noopener\"><span style=\"font-weight: bold;\">le HTML</span></a>.</p>\n<p>Un site web a souvent pour raison l’affichage d’un contenu. Que ce soient du texte, des images, des liens, de la vidéo... <a href=\"/fr-fr/blog/pourquoi-commence-t-on-le-code-par-html-et-css\" rel=\"noopener\"><span style=\"font-weight: bold;\">Le HTML</span></a> (HyperText Markup Language) intervient pour nous permettre de structurer ces différents contenus dans notre page. C’est lui qui donne l’architecture sur laquelle tout va reposer ensuite.</p>\n<p> </p>\n<h2 style=\"font-size: 30px;\">Les balises</h2>\n<p>Le HTML est donc composé de <strong>balises</strong>. Une balise est un bout de code composé d’un chevron ouvrant “<span style=\"font-weight: bold;\"><</span>”, du nom de la balise, suivi d’un chevron fermant “<span style=\"font-weight: bold;\">></span>”. Toute balise ouvrante devra avoir une balise fermante. La balise fermante se distingue de sa sœur par l’ajout d’un “<span style=\"font-weight: bold;\">/</span>” après le premier chevron.</p>\n<p>En voici un exemple : <span style=\"font-weight: bold;\"><article></span> -----Ceci est mon contenu —-- <span style=\"font-weight: bold;\"></article></span></p>\n<p>Attention, lorsqu’on débute, on n’accorde souvent pas assez d’attention à l’ordre d’ouverture et de fermeture de nos balises. Cela a pour conséquence de casser la structure de notre page et de croiser nos contenus. Mieux vaut prendre le temps de vérifier nos lignes de HTML avant d’avancer trop dans notre page.</p>\n<p> </p>\n<h2 style=\"font-size: 30px;\">Structure de la page</h2>\n<p>Maintenant, que nous savons ce qu’est une balise, nous entrons dans la structure plus globale de notre page. Nous allons ainsi distinguer deux niveaux dans notre page, le <strong>Head </strong>et le <strong>Body</strong>.</p>\n<p style=\"padding-left: 40px;\"><em>Astuce : pour créer une page web, rien de plus simple. Il faut créer un fichier index.html, puis double-cliquer dessus pour l’ouvrir dans le navigateur. La page est blanche, c’est normal, notre fichier est vide. Ouvrons-le avec un éditeur de texte (Bloc-note si nous n’avons pas d’éditeur spécifique). Ensuite, continuons notre découverte.</em></p>\n<p style=\"padding-left: 40px;\"> </p>\n<h2 style=\"font-size: 20px;\"><strong><Head> vs <Body> : une vision simplifiée</strong></h2>\n<p>De manière générale, une page web est composée de 2 parties principales : la tête (<span style=\"font-weight: bold;\"><head></span>) et le corps (<body>). La première partie (head) sert aux informations globales de notre page (son titre, sa favicon, sa langue…). La seconde partie comprend tous les éléments visibles pour notre utilisateur. C’est dans cette partie que nous mettons en place notre affichage. Voici un exemple de code de base pour créer une page :</p>\n{% module_block module \"widget_0a7665ff-9867-4729-8ea7-335a810757c9\" %}{% module_attribute \"child_css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"label\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"layout\" is_json=\"true\" %}\"classic\"{% end_module_attribute %}{% module_attribute \"module_id\" is_json=\"true\" %}104375928356{% end_module_attribute %}{% module_attribute \"schema_version\" is_json=\"true\" %}2{% end_module_attribute %}{% module_attribute \"tag\" is_json=\"true\" %}\"module\"{% end_module_attribute %}{% end_module_block %}\n{% module_block module \"widget_5cf34282-434d-4145-bc1a-979f69aec98a\" %}{% module_attribute \"child_css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"label\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"module_id\" is_json=\"true\" %}105436309545{% end_module_attribute %}{% module_attribute \"schema_version\" is_json=\"true\" %}2{% end_module_attribute %}{% module_attribute \"tag\" is_json=\"true\" %}\"module\"{% end_module_attribute %}{% end_module_block %}\n{% module_block module \"widget_2ebb0900-abab-431e-9c83-e9adcd86a1f2\" %}{% module_attribute \"child_css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"label\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"module_id\" is_json=\"true\" %}118485470617{% end_module_attribute %}{% module_attribute \"schema_version\" is_json=\"true\" %}2{% end_module_attribute %}{% module_attribute \"tag\" is_json=\"true\" %}\"module\"{% end_module_attribute %}{% end_module_block %}\n{% module_block module \"widget_03ec47b5-527a-4150-937f-3f04c55751dd\" %}{% module_attribute \"child_css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"label\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"module_id\" is_json=\"true\" %}119200723003{% end_module_attribute %}{% module_attribute \"richtext_card_caption\" is_json=\"true\" %}\"<div style=\\\"line-height: 1.25;\\\"><code><!DOCTYPE html></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code><html lang=\\\"fr\\\"></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code><head></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code>  <meta charset=\\\"UTF-8\\\"></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code>  <meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code>  <title>Document</title></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code></head></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code><body></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code>   <h1>Bienvenue à la wild</h1></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code></body></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code></html></code></div>\"{% end_module_attribute %}{% module_attribute \"schema_version\" is_json=\"true\" %}2{% end_module_attribute %}{% module_attribute \"switch_to_dark_card\" is_json=\"true\" %}true{% end_module_attribute %}{% module_attribute \"tag\" is_json=\"true\" %}\"module\"{% end_module_attribute %}{% end_module_block %}\n<p><strong style=\"font-size: var(--body_font_font_size); color: var(--body_font_color);\">Revenons ligne par ligne :</strong></p>\n<p><strong><!DOCTYPE html> :</strong> Cette ligne déclare la version du langage HTML utilisée dans le document. En l'occurrence, <!DOCTYPE html> indique que c'est un document HTML5.</p>\n<p><strong><html lang=\"fr\"> : </strong>Cela marque le début du document HTML. Le langage utilisé est défini comme le français (fr), mais nous pouvons changer la langue si nécessaire.</p>\n<p><strong><head> : </strong>Cette balise ouvre la section d'en-tête du document. L'en-tête contient des informations sur le document lui-même, comme le titre, les métadonnées, les liens vers des feuilles de style, des scripts, etc.</p>\n<p><strong><meta charset=\"UTF-8\"> : </strong>Ceci spécifie l'encodage des caractères utilisé dans le document, qui est UTF-8. Cela garantit que le texte sera correctement interprété quel que soit le caractère utilisé.</p>\n<p><strong><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> : </strong>Cette balise fournit des informations de visualisation pour les navigateurs. Elle indique au navigateur qu'il doit définir la largeur de l'écran de manière égale à la largeur de l'appareil et qu'il doit initialement zoomer à un facteur de 1.0. Cela aide à créer des pages web réactives et adaptées aux appareils mobiles.</p>\n<p><strong><title>Document</title> : </strong>Cette balise définit le titre du document qui sera affiché dans la barre de titre du navigateur ou dans l'onglet du navigateur. Dans ce cas, le titre est simplement \"Document\".</p>\n<p><strong></head> : </strong>Ceci marque la fin de la section d'en-tête.</p>\n<p><strong><body> : </strong>C'est la balise d'ouverture du corps du document. Le corps contient tout le contenu visible de la page web.</p>\n<p><strong><h1>Bienvenue à la wild</h1> : </strong>Cela définit un titre de niveau 1 dans le corps du document. Dans ce cas, il s'agit de \"Bienvenue à la wild\". Les titres de niveau 1 sont généralement utilisés pour les titres principaux de la page.</p>\n<p><strong></body> :</strong> Cette balise marque la fin du corps du document.</p>\n<p><strong></html> : </strong>Ceci marque la fin du document HTML.</p>\n<p> </p>\n<h2 style=\"font-size: 20px;\"><strong>Comment organiser nos balises dans notre <body> ?</strong></h2>\n<p>Pour organiser nos balises dans notre corps, il faut imaginer notre interface web (notre page) comme un ensemble de boîtes imbriquées les unes dans les autres.</p>\n<p>Voici un exemple possible de découpage de la page d’accueil de la Wild Code School.</p>\n<p><img src=\"https://lh7-us.googleusercontent.com/SgB5AKQZnt1j0DbKbFnlwxXRcmEi4a3zaE6RS27UawPlpsTm0PJ2Ds2IWraGcpkPufVuw_VpcyZAMSlB-AjrsOTqUoBifZ-1TIOAfMWfDhMAangb5TWtnXIZnAOSECqe9fan-tyxEkezGW_NQ9o_G2A\" width=\"566\" height=\"477\" loading=\"lazy\" style=\"margin-left: auto; margin-right: auto; display: block; width: 566px; height: auto; max-width: 100%;\"></p>\n<p> </p>\n<p>En HTML, pour mettre en place ces différentes boîtes, nous avons accès à un ensemble de balises (<header>, <footer>,<main>, <section>, <article>, <div>). Fondamentalement, lorsque nous débutons, aucune n’est vraiment mauvaise pour faire notre mise en page. Certaines ont cependant plus de sens que d’autres.</p>\n<p>Dans notre cas, cela pourrait donner ceci :</p>\n{% module_block module \"widget_f21be41d-381f-43fb-8420-033d79c57453\" %}{% module_attribute \"child_css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"label\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"module_id\" is_json=\"true\" %}119200723003{% end_module_attribute %}{% module_attribute \"richtext_card_caption\" is_json=\"true\" %}\"<div style=\\\"line-height: 1.25;\\\"><code><body></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 40px;\\\"><code> <header></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 80px;\\\"><code> Nous retrouverons ici notre barre de navigation</code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 40px;\\\"><code> </header></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 40px;\\\"><code><main></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 80px;\\\"><code><section></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 120px;\\\"><code> Nous trouverons ici Notre espace titre Into the Wild</code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 80px;\\\"><code></section></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 80px;\\\"><code><section></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 120px;\\\"><code> <div></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 160px;\\\"><code> <article></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 200px;\\\"><code> Le contenu de notre article de gauche</code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 160px;\\\"><code> </article></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 120px;\\\"><code> </div></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 120px;\\\"><code><div></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 160px;\\\"><code> <article></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 200px;\\\"><code> Le contenu de notre premier article de droite</code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 160px;\\\"><code> </article></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 160px;\\\"><code><article></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 200px;\\\"><code> Le contenu de notre second article de droite</code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 160px;\\\"><code> </article></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 160px;\\\"><code><article></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 200px;\\\"><code> Le contenu de notre troisième article de droite</code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 160px;\\\"><code></article></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 120px;\\\"><code></div></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 80px;\\\"><code></section></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 40px;\\\"><code></main></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code></body></code></div>\"{% end_module_attribute %}{% module_attribute \"schema_version\" is_json=\"true\" %}2{% end_module_attribute %}{% module_attribute \"switch_to_dark_card\" is_json=\"true\" %}true{% end_module_attribute %}{% module_attribute \"tag\" is_json=\"true\" %}\"module\"{% end_module_attribute %}{% end_module_block %}\n<p>Nous avons imbriqué nos boîtes (balises) pour mettre en place notre structure HTML. Pas d’inquiétude si cela ne ressemble en rien à notre modèle. Le HTML ne gère pas la mise en page, seulement la structure. Il faudra dans un second temps découvrir et y associer du style (le CSS).</p>\n<p> </p>\n<h2 style=\"font-size: 20px;\"><strong>Comment intégrer du contenu à notre HTML ?</strong></h2>\n<p>Si on entre dans le détails… Dans notre boite <article>, nous allons maintenant chercher à intégrer notre contenu. Voici une proposition de découpage possible.</p>\n<p><img src=\"https://lh7-us.googleusercontent.com/LyoaxDZNh3aj2NbaxNdPxwuXk1yDb1u6SkMyTlCzFbQ1kQEHRN7wiVfT4bhn6DK523zFEIi6JMtmO2mL48wxkh5CVmBqApVnvnBQ9kX0RsGjSrlJ534S3j66p7UOUqwY33mkm3oJbrqZ6pK02sqK9Fc\" width=\"530\" height=\"600\" loading=\"lazy\" style=\"margin-left: auto; margin-right: auto; display: block; width: 530px; height: auto; max-width: 100%;\"></p>\n<p> </p>\n<p>Dans un premier temps, nous trouvons une image <img />, puis une boite avec deux mots séparés, un titre <h1> et un bouton de navigation <a>. Voilà nous y sommes presque...</p>\n<p> </p>\n{% module_block module \"widget_9ad47cf8-ba19-448a-ba3e-62607b8ea24c\" %}{% module_attribute \"child_css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"label\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"module_id\" is_json=\"true\" %}119200723003{% end_module_attribute %}{% module_attribute \"richtext_card_caption\" is_json=\"true\" %}\"<div style=\\\"line-height: 1.15;\\\"><code><article></code></div>\\n<p style=\\\"padding-left: 40px; line-height: 1.15;\\\"><code><span style=\\\"color: #000000;\\\"> </span><img<span style=\\\"color: #000000;\\\"> </span>src=\\\"https://www.wildcodeschool.com/hubfs/2024-01-26_Les_salaires_de_lIT_quelles_tendances_en_2024.jpg\\\"<span style=\\\"color: #000000;\\\"> </span>alt=\\\"Article,<span style=\\\"color: #000000;\\\"> </span>salaire<span style=\\\"color: #000000;\\\"> </span>IT\\\"<span style=\\\"color: #000000;\\\"> </span>/></code></p>\\n<p style=\\\"padding-left: 40px; line-height: 1.15;\\\"><code><span style=\\\"color: #000000;\\\"> </span><div></code></p>\\n<p style=\\\"padding-left: 80px; line-height: 1.15;\\\"><code><span style=\\\"color: #000000;\\\"> </span><span style=\\\"color: #000000;\\\"> </span><h4>Tech</h4></code></p>\\n<p style=\\\"padding-left: 80px; line-height: 1.15;\\\"><code><span style=\\\"color: #000000;\\\"> </span><span style=\\\"color: #000000;\\\"> </span><h4>Décryptage</h4></code></p>\\n<p style=\\\"padding-left: 40px; line-height: 1.15;\\\"><code><span style=\\\"color: #000000;\\\"> </span></div></code></p>\\n<p style=\\\"padding-left: 40px; line-height: 1.15;\\\"><code><span style=\\\"color: #000000;\\\"> </span><h2>LES<span style=\\\"color: #000000;\\\"> </span>SALAIRES<span style=\\\"color: #000000;\\\"> </span>DE<span style=\\\"color: #000000;\\\"> </span>L’IT<span style=\\\"color: #000000;\\\"> </span>:<span style=\\\"color: #000000;\\\"> </span>QUELLES<span style=\\\"color: #000000;\\\"> </span>TENDANCES<span style=\\\"color: #000000;\\\"> </span>EN<span style=\\\"color: #000000;\\\"> </span>2024<span style=\\\"color: #000000;\\\"> </span>?</h2></code></p>\\n<p style=\\\"line-height: 1.15;\\\"><code><span style=\\\"color: #000000;\\\"> </span><a<span style=\\\"color: #000000;\\\"> </span>href=\\\"https://www.wildcodeschool.com/fr-fr/blog/les-salaires-de-lit-quelles-tendances-en-2024\\\"<span style=\\\"color: #000000;\\\"> </span>target=\\\"_blank\\\">Lire<span style=\\\"color: #000000;\\\"> </span>l’article</a></code></p>\\n<p style=\\\"line-height: 1.15;\\\"><code></article></code></p>\"{% end_module_attribute %}{% module_attribute \"schema_version\" is_json=\"true\" %}2{% end_module_attribute %}{% module_attribute \"switch_to_dark_card\" is_json=\"true\" %}true{% end_module_attribute %}{% module_attribute \"tag\" is_json=\"true\" %}\"module\"{% end_module_attribute %}{% end_module_block %}\n<p><strong>En résumé, </strong>Le code HTML nous permet de structurer nos éléments dans notre page. Il faut l’imaginer comme un imbriquement de boîtes dans des boîtes qui finalement contiennent notre contenu.</p>\n<p> </p>\n<p>Ces premiers pas en HTML vous ont donné envie d'en apprendre davantage ? <span>Lancez-vous avec </span><a href=\"https://www.wildcodeschool.com/fr-fr/formations-developpement-web/formation-developpeur-web-a-distance?hsLang=fr-fr\" style=\"font-weight: bold;\">notre bootcamp en développement web.</a><span> Cette formation intensive de 5 mois peut-être suivie sur l'un de nos campus ou à distance. </span></p>", "postEmailContent" : "<p>Si vous êtes décidés à apprendre le vaste univers du développement web, la création de l’interface est souvent le meilleur point de départ. La page web ! Mais comment est-elle constituée ? Pour donner la structure à notre page, à notre contenu (textes, images,...), un langage est incontournable : <a href=\"/fr-fr/blog/apprendre-le-html\" rel=\"noopener\"><span style=\"font-weight: bold;\">le HTML</span></a>.</p>", "postFeaturedImageIfEnabled" : "https://2902314.fs1.hubspotusercontent-na1.net/hubfs/2902314/2024-05-06_COMBIEN_COTE_UNE_FORMATION_DE_DVELOPPEUR_WEB.jpg", "postListContent" : "<p>Si vous êtes décidés à apprendre le vaste univers du développement web, la création de l’interface est souvent le meilleur point de départ. La page web ! Mais comment est-elle constituée ? Pour donner la structure à notre page, à notre contenu (textes, images,...), un langage est incontournable : <a href=\"/fr-fr/blog/apprendre-le-html\" rel=\"noopener\"><span style=\"font-weight: bold;\">le HTML</span></a>.</p>", "postListSummaryFeaturedImage" : "https://2902314.fs1.hubspotusercontent-na1.net/hubfs/2902314/2024-05-06_COMBIEN_COTE_UNE_FORMATION_DE_DVELOPPEUR_WEB.jpg", "postRssContent" : "<p>Si vous êtes décidés à apprendre le vaste univers du développement web, la création de l’interface est souvent le meilleur point de départ. La page web ! Mais comment est-elle constituée ? Pour donner la structure à notre page, à notre contenu (textes, images,...), un langage est incontournable : <a href=\"/fr-fr/blog/apprendre-le-html\" rel=\"noopener\"><span style=\"font-weight: bold;\">le HTML</span></a>.</p>", "postRssSummaryFeaturedImage" : "https://2902314.fs1.hubspotusercontent-na1.net/hubfs/2902314/2024-05-06_COMBIEN_COTE_UNE_FORMATION_DE_DVELOPPEUR_WEB.jpg", "postSummary" : "<p>Si vous êtes décidés à apprendre le vaste univers du développement web, la création de l’interface est souvent le meilleur point de départ. La page web ! Mais comment est-elle constituée ? Pour donner la structure à notre page, à notre contenu (textes, images,...), un langage est incontournable : <a href=\"/fr-fr/blog/apprendre-le-html\" rel=\"noopener\"><span style=\"font-weight: bold;\">le HTML</span></a>.</p>\n", "postSummaryRss" : "<p>Si vous êtes décidés à apprendre le vaste univers du développement web, la création de l’interface est souvent le meilleur point de départ. La page web ! Mais comment est-elle constituée ? Pour donner la structure à notre page, à notre contenu (textes, images,...), un langage est incontournable : <a href=\"/fr-fr/blog/apprendre-le-html\" rel=\"noopener\"><span style=\"font-weight: bold;\">le HTML</span></a>.</p>", "postTemplate" : "MarkentivexWCS/templates/blog-post.html", "previewImageSrc" : null, "previewKey" : "bzkOcpDd", "previousPostFeaturedImage" : "https://2902314.fs1.hubspotusercontent-na1.net/hubfs/2902314/image-blog-3-1.png", "previousPostFeaturedImageAltText" : "meilleur-outil-dataviz", "previousPostName" : "Les outils de la datavisualisation", "previousPostSlug" : "fr-fr/blog/les-outils-de-la-datavisualisation", "processingStatus" : "PUBLISHED", "propertyForDynamicPageCanonicalUrl" : null, "propertyForDynamicPageFeaturedImage" : null, "propertyForDynamicPageMetaDescription" : null, "propertyForDynamicPageSlug" : null, "propertyForDynamicPageTitle" : null, "publicAccessRules" : [ ], "publicAccessRulesEnabled" : false, "publishDate" : 1716207852000, "publishDateLocalTime" : 1716207852000, "publishDateLocalized" : { "date" : 1716207852000, "format" : "dd/MM/YYYY", "language" : null }, "publishImmediately" : true, "publishTimezoneOffset" : null, "publishedAt" : 1727261617198, "publishedByEmail" : null, "publishedById" : 50704370, "publishedByName" : null, "publishedUrl" : "https://www.wildcodeschool.com/fr-fr/blog/faire-ses-premiers-pas-en-html", "resolvedDomain" : "www.wildcodeschool.com", "resolvedLanguage" : null, "rssBody" : "<p>Si vous êtes décidés à apprendre le vaste univers du développement web, la création de l’interface est souvent le meilleur point de départ. La page web ! Mais comment est-elle constituée ? Pour donner la structure à notre page, à notre contenu (textes, images,...), un langage est incontournable : <a href=\"/fr-fr/blog/apprendre-le-html\" rel=\"noopener\"><span style=\"font-weight: bold;\">le HTML</span></a>.</p>\n<p>Un site web a souvent pour raison l’affichage d’un contenu. Que ce soient du texte, des images, des liens, de la vidéo... <a href=\"/fr-fr/blog/pourquoi-commence-t-on-le-code-par-html-et-css\" rel=\"noopener\"><span style=\"font-weight: bold;\">Le HTML</span></a> (HyperText Markup Language) intervient pour nous permettre de structurer ces différents contenus dans notre page. C’est lui qui donne l’architecture sur laquelle tout va reposer ensuite.</p>\n<p> </p>\n<h2 style=\"font-size: 30px;\">Les balises</h2>\n<p>Le HTML est donc composé de <strong>balises</strong>. Une balise est un bout de code composé d’un chevron ouvrant “<span style=\"font-weight: bold;\"><</span>”, du nom de la balise, suivi d’un chevron fermant “<span style=\"font-weight: bold;\">></span>”. Toute balise ouvrante devra avoir une balise fermante. La balise fermante se distingue de sa sœur par l’ajout d’un “<span style=\"font-weight: bold;\">/</span>” après le premier chevron.</p>\n<p>En voici un exemple : <span style=\"font-weight: bold;\"><article></span> -----Ceci est mon contenu —-- <span style=\"font-weight: bold;\"></article></span></p>\n<p>Attention, lorsqu’on débute, on n’accorde souvent pas assez d’attention à l’ordre d’ouverture et de fermeture de nos balises. Cela a pour conséquence de casser la structure de notre page et de croiser nos contenus. Mieux vaut prendre le temps de vérifier nos lignes de HTML avant d’avancer trop dans notre page.</p>\n<p> </p>\n<h2 style=\"font-size: 30px;\">Structure de la page</h2>\n<p>Maintenant, que nous savons ce qu’est une balise, nous entrons dans la structure plus globale de notre page. Nous allons ainsi distinguer deux niveaux dans notre page, le <strong>Head </strong>et le <strong>Body</strong>.</p>\n<p style=\"padding-left: 40px;\"><em>Astuce : pour créer une page web, rien de plus simple. Il faut créer un fichier index.html, puis double-cliquer dessus pour l’ouvrir dans le navigateur. La page est blanche, c’est normal, notre fichier est vide. Ouvrons-le avec un éditeur de texte (Bloc-note si nous n’avons pas d’éditeur spécifique). Ensuite, continuons notre découverte.</em></p>\n<p style=\"padding-left: 40px;\"> </p>\n<h2 style=\"font-size: 20px;\"><strong><Head> vs <Body> : une vision simplifiée</strong></h2>\n<p>De manière générale, une page web est composée de 2 parties principales : la tête (<span style=\"font-weight: bold;\"><head></span>) et le corps (<body>). La première partie (head) sert aux informations globales de notre page (son titre, sa favicon, sa langue…). La seconde partie comprend tous les éléments visibles pour notre utilisateur. C’est dans cette partie que nous mettons en place notre affichage. Voici un exemple de code de base pour créer une page :</p>\n{% module_block module \"widget_0a7665ff-9867-4729-8ea7-335a810757c9\" %}{% module_attribute \"child_css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"label\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"layout\" is_json=\"true\" %}\"classic\"{% end_module_attribute %}{% module_attribute \"module_id\" is_json=\"true\" %}104375928356{% end_module_attribute %}{% module_attribute \"schema_version\" is_json=\"true\" %}2{% end_module_attribute %}{% module_attribute \"tag\" is_json=\"true\" %}\"module\"{% end_module_attribute %}{% end_module_block %}\n{% module_block module \"widget_5cf34282-434d-4145-bc1a-979f69aec98a\" %}{% module_attribute \"child_css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"label\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"module_id\" is_json=\"true\" %}105436309545{% end_module_attribute %}{% module_attribute \"schema_version\" is_json=\"true\" %}2{% end_module_attribute %}{% module_attribute \"tag\" is_json=\"true\" %}\"module\"{% end_module_attribute %}{% end_module_block %}\n{% module_block module \"widget_2ebb0900-abab-431e-9c83-e9adcd86a1f2\" %}{% module_attribute \"child_css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"label\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"module_id\" is_json=\"true\" %}118485470617{% end_module_attribute %}{% module_attribute \"schema_version\" is_json=\"true\" %}2{% end_module_attribute %}{% module_attribute \"tag\" is_json=\"true\" %}\"module\"{% end_module_attribute %}{% end_module_block %}\n{% module_block module \"widget_03ec47b5-527a-4150-937f-3f04c55751dd\" %}{% module_attribute \"child_css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"label\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"module_id\" is_json=\"true\" %}119200723003{% end_module_attribute %}{% module_attribute \"richtext_card_caption\" is_json=\"true\" %}\"<div style=\\\"line-height: 1.25;\\\"><code><!DOCTYPE html></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code><html lang=\\\"fr\\\"></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code><head></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code>  <meta charset=\\\"UTF-8\\\"></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code>  <meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code>  <title>Document</title></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code></head></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code><body></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code>   <h1>Bienvenue à la wild</h1></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code></body></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code></html></code></div>\"{% end_module_attribute %}{% module_attribute \"schema_version\" is_json=\"true\" %}2{% end_module_attribute %}{% module_attribute \"switch_to_dark_card\" is_json=\"true\" %}true{% end_module_attribute %}{% module_attribute \"tag\" is_json=\"true\" %}\"module\"{% end_module_attribute %}{% end_module_block %}\n<p><strong style=\"font-size: var(--body_font_font_size); color: var(--body_font_color);\">Revenons ligne par ligne :</strong></p>\n<p><strong><!DOCTYPE html> :</strong> Cette ligne déclare la version du langage HTML utilisée dans le document. En l'occurrence, <!DOCTYPE html> indique que c'est un document HTML5.</p>\n<p><strong><html lang=\"fr\"> : </strong>Cela marque le début du document HTML. Le langage utilisé est défini comme le français (fr), mais nous pouvons changer la langue si nécessaire.</p>\n<p><strong><head> : </strong>Cette balise ouvre la section d'en-tête du document. L'en-tête contient des informations sur le document lui-même, comme le titre, les métadonnées, les liens vers des feuilles de style, des scripts, etc.</p>\n<p><strong><meta charset=\"UTF-8\"> : </strong>Ceci spécifie l'encodage des caractères utilisé dans le document, qui est UTF-8. Cela garantit que le texte sera correctement interprété quel que soit le caractère utilisé.</p>\n<p><strong><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> : </strong>Cette balise fournit des informations de visualisation pour les navigateurs. Elle indique au navigateur qu'il doit définir la largeur de l'écran de manière égale à la largeur de l'appareil et qu'il doit initialement zoomer à un facteur de 1.0. Cela aide à créer des pages web réactives et adaptées aux appareils mobiles.</p>\n<p><strong><title>Document</title> : </strong>Cette balise définit le titre du document qui sera affiché dans la barre de titre du navigateur ou dans l'onglet du navigateur. Dans ce cas, le titre est simplement \"Document\".</p>\n<p><strong></head> : </strong>Ceci marque la fin de la section d'en-tête.</p>\n<p><strong><body> : </strong>C'est la balise d'ouverture du corps du document. Le corps contient tout le contenu visible de la page web.</p>\n<p><strong><h1>Bienvenue à la wild</h1> : </strong>Cela définit un titre de niveau 1 dans le corps du document. Dans ce cas, il s'agit de \"Bienvenue à la wild\". Les titres de niveau 1 sont généralement utilisés pour les titres principaux de la page.</p>\n<p><strong></body> :</strong> Cette balise marque la fin du corps du document.</p>\n<p><strong></html> : </strong>Ceci marque la fin du document HTML.</p>\n<p> </p>\n<h2 style=\"font-size: 20px;\"><strong>Comment organiser nos balises dans notre <body> ?</strong></h2>\n<p>Pour organiser nos balises dans notre corps, il faut imaginer notre interface web (notre page) comme un ensemble de boîtes imbriquées les unes dans les autres.</p>\n<p>Voici un exemple possible de découpage de la page d’accueil de la Wild Code School.</p>\n<p><img src=\"https://lh7-us.googleusercontent.com/SgB5AKQZnt1j0DbKbFnlwxXRcmEi4a3zaE6RS27UawPlpsTm0PJ2Ds2IWraGcpkPufVuw_VpcyZAMSlB-AjrsOTqUoBifZ-1TIOAfMWfDhMAangb5TWtnXIZnAOSECqe9fan-tyxEkezGW_NQ9o_G2A\" width=\"566\" height=\"477\" loading=\"lazy\" style=\"margin-left: auto; margin-right: auto; display: block; width: 566px; height: auto; max-width: 100%;\"></p>\n<p> </p>\n<p>En HTML, pour mettre en place ces différentes boîtes, nous avons accès à un ensemble de balises (<header>, <footer>,<main>, <section>, <article>, <div>). Fondamentalement, lorsque nous débutons, aucune n’est vraiment mauvaise pour faire notre mise en page. Certaines ont cependant plus de sens que d’autres.</p>\n<p>Dans notre cas, cela pourrait donner ceci :</p>\n{% module_block module \"widget_f21be41d-381f-43fb-8420-033d79c57453\" %}{% module_attribute \"child_css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"label\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"module_id\" is_json=\"true\" %}119200723003{% end_module_attribute %}{% module_attribute \"richtext_card_caption\" is_json=\"true\" %}\"<div style=\\\"line-height: 1.25;\\\"><code><body></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 40px;\\\"><code> <header></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 80px;\\\"><code> Nous retrouverons ici notre barre de navigation</code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 40px;\\\"><code> </header></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 40px;\\\"><code><main></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 80px;\\\"><code><section></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 120px;\\\"><code> Nous trouverons ici Notre espace titre Into the Wild</code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 80px;\\\"><code></section></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 80px;\\\"><code><section></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 120px;\\\"><code> <div></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 160px;\\\"><code> <article></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 200px;\\\"><code> Le contenu de notre article de gauche</code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 160px;\\\"><code> </article></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 120px;\\\"><code> </div></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 120px;\\\"><code><div></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 160px;\\\"><code> <article></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 200px;\\\"><code> Le contenu de notre premier article de droite</code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 160px;\\\"><code> </article></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 160px;\\\"><code><article></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 200px;\\\"><code> Le contenu de notre second article de droite</code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 160px;\\\"><code> </article></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 160px;\\\"><code><article></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 200px;\\\"><code> Le contenu de notre troisième article de droite</code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 160px;\\\"><code></article></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 120px;\\\"><code></div></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 80px;\\\"><code></section></code></div>\\n<div style=\\\"line-height: 1.25; padding-left: 40px;\\\"><code></main></code></div>\\n<div style=\\\"line-height: 1.25;\\\"><code></body></code></div>\"{% end_module_attribute %}{% module_attribute \"schema_version\" is_json=\"true\" %}2{% end_module_attribute %}{% module_attribute \"switch_to_dark_card\" is_json=\"true\" %}true{% end_module_attribute %}{% module_attribute \"tag\" is_json=\"true\" %}\"module\"{% end_module_attribute %}{% end_module_block %}\n<p>Nous avons imbriqué nos boîtes (balises) pour mettre en place notre structure HTML. Pas d’inquiétude si cela ne ressemble en rien à notre modèle. Le HTML ne gère pas la mise en page, seulement la structure. Il faudra dans un second temps découvrir et y associer du style (le CSS).</p>\n<p> </p>\n<h2 style=\"font-size: 20px;\"><strong>Comment intégrer du contenu à notre HTML ?</strong></h2>\n<p>Si on entre dans le détails… Dans notre boite <article>, nous allons maintenant chercher à intégrer notre contenu. Voici une proposition de découpage possible.</p>\n<p><img src=\"https://lh7-us.googleusercontent.com/LyoaxDZNh3aj2NbaxNdPxwuXk1yDb1u6SkMyTlCzFbQ1kQEHRN7wiVfT4bhn6DK523zFEIi6JMtmO2mL48wxkh5CVmBqApVnvnBQ9kX0RsGjSrlJ534S3j66p7UOUqwY33mkm3oJbrqZ6pK02sqK9Fc\" width=\"530\" height=\"600\" loading=\"lazy\" style=\"margin-left: auto; margin-right: auto; display: block; width: 530px; height: auto; max-width: 100%;\"></p>\n<p> </p>\n<p>Dans un premier temps, nous trouvons une image <img />, puis une boite avec deux mots séparés, un titre <h1> et un bouton de navigation <a>. Voilà nous y sommes presque...</p>\n<p> </p>\n{% module_block module \"widget_9ad47cf8-ba19-448a-ba3e-62607b8ea24c\" %}{% module_attribute \"child_css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"css\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"label\" is_json=\"true\" %}null{% end_module_attribute %}{% module_attribute \"module_id\" is_json=\"true\" %}119200723003{% end_module_attribute %}{% module_attribute \"richtext_card_caption\" is_json=\"true\" %}\"<div style=\\\"line-height: 1.15;\\\"><code><article></code></div>\\n<p style=\\\"padding-left: 40px; line-height: 1.15;\\\"><code><span style=\\\"color: #000000;\\\"> </span><img<span style=\\\"color: #000000;\\\"> </span>src=\\\"https://www.wildcodeschool.com/hubfs/2024-01-26_Les_salaires_de_lIT_quelles_tendances_en_2024.jpg\\\"<span style=\\\"color: #000000;\\\"> </span>alt=\\\"Article,<span style=\\\"color: #000000;\\\"> </span>salaire<span style=\\\"color: #000000;\\\"> </span>IT\\\"<span style=\\\"color: #000000;\\\"> </span>/></code></p>\\n<p style=\\\"padding-left: 40px; line-height: 1.15;\\\"><code><span style=\\\"color: #000000;\\\"> </span><div></code></p>\\n<p style=\\\"padding-left: 80px; line-height: 1.15;\\\"><code><span style=\\\"color: #000000;\\\"> </span><span style=\\\"color: #000000;\\\"> </span><h4>Tech</h4></code></p>\\n<p style=\\\"padding-left: 80px; line-height: 1.15;\\\"><code><span style=\\\"color: #000000;\\\"> </span><span style=\\\"color: #000000;\\\"> </span><h4>Décryptage</h4></code></p>\\n<p style=\\\"padding-left: 40px; line-height: 1.15;\\\"><code><span style=\\\"color: #000000;\\\"> </span></div></code></p>\\n<p style=\\\"padding-left: 40px; line-height: 1.15;\\\"><code><span style=\\\"color: #000000;\\\"> </span><h2>LES<span style=\\\"color: #000000;\\\"> </span>SALAIRES<span style=\\\"color: #000000;\\\"> </span>DE<span style=\\\"color: #000000;\\\"> </span>L’IT<span style=\\\"color: #000000;\\\"> </span>:<span style=\\\"color: #000000;\\\"> </span>QUELLES<span style=\\\"color: #000000;\\\"> </span>TENDANCES<span style=\\\"color: #000000;\\\"> </span>EN<span style=\\\"color: #000000;\\\"> </span>2024<span style=\\\"color: #000000;\\\"> </span>?</h2></code></p>\\n<p style=\\\"line-height: 1.15;\\\"><code><span style=\\\"color: #000000;\\\"> </span><a<span style=\\\"color: #000000;\\\"> </span>href=\\\"https://www.wildcodeschool.com/fr-fr/blog/les-salaires-de-lit-quelles-tendances-en-2024\\\"<span style=\\\"color: #000000;\\\"> </span>target=\\\"_blank\\\">Lire<span style=\\\"color: #000000;\\\"> </span>l’article</a></code></p>\\n<p style=\\\"line-height: 1.15;\\\"><code></article></code></p>\"{% end_module_attribute %}{% module_attribute \"schema_version\" is_json=\"true\" %}2{% end_module_attribute %}{% module_attribute \"switch_to_dark_card\" is_json=\"true\" %}true{% end_module_attribute %}{% module_attribute \"tag\" is_json=\"true\" %}\"module\"{% end_module_attribute %}{% end_module_block %}\n<p><strong>En résumé, </strong>Le code HTML nous permet de structurer nos éléments dans notre page. Il faut l’imaginer comme un imbriquement de boîtes dans des boîtes qui finalement contiennent notre contenu.</p>\n<p> </p>\n<p>Ces premiers pas en HTML vous ont donné envie d'en apprendre davantage ? <span>Lancez-vous avec </span><a href=\"https://www.wildcodeschool.com/fr-fr/formations-developpement-web/formation-developpeur-web-a-distance?hsLang=fr-fr\" style=\"font-weight: bold;\">notre bootcamp en développement web.</a><span> Cette formation intensive de 5 mois peut-être suivie sur l'un de nos campus ou à distance. </span></p>", "rssSummary" : "<p>Si vous êtes décidés à apprendre le vaste univers du développement web, la création de l’interface est souvent le meilleur point de départ. La page web ! Mais comment est-elle constituée ? Pour donner la structure à notre page, à notre contenu (textes, images,...), un langage est incontournable : <a href=\"/fr-fr/blog/apprendre-le-html\" rel=\"noopener\"><span style=\"font-weight: bold;\">le HTML</span></a>.</p>\n", "rssSummaryFeaturedImage" : "https://2902314.fs1.hubspotusercontent-na1.net/hubfs/2902314/2024-05-06_COMBIEN_COTE_UNE_FORMATION_DE_DVELOPPEUR_WEB.jpg", "scheduledUpdateDate" : 0, "screenshotPreviewTakenAt" : 1734432818332, "screenshotPreviewUrl" : "https://cdn1.hubspot.net/hubshotv3/prod/e/0/5783ff8a-9a16-4470-b256-1ee14bde6831.png", "sections" : { }, "securityState" : "NONE", "siteId" : null, "slug" : "fr-fr/blog/faire-ses-premiers-pas-en-html", "stagedFrom" : null, "state" : "PUBLISHED", "stateWhenDeleted" : null, "structuredContentPageType" : null, "structuredContentType" : null, "styleOverrideId" : null, "subcategory" : "normal_blog_post", "syncedWithBlogRoot" : true, "tagIds" : [ 103173212304, 116313955723 ], "tagList" : [ { "categoryId" : 3, "cdnPurgeEmbargoTime" : null, "contentIds" : [ ], "cosObjectType" : "TAG", "created" : 1676890094328, "deletedAt" : 0, "description" : "", "id" : 103173212304, "label" : "Developpement Web", "language" : "fr-fr", "name" : "Developpement Web", "portalId" : 2902314, "slug" : "developpement-web", "translatedFromId" : null, "translations" : { }, "updated" : 1676892318798 }, { "categoryId" : 3, "cdnPurgeEmbargoTime" : null, "contentIds" : [ ], "cosObjectType" : "TAG", "created" : 1684509994814, "deletedAt" : 0, "description" : "", "id" : 116313955723, "label" : "Tips", "language" : "fr-fr", "name" : "Tips", "portalId" : 2902314, "slug" : "tips", "translatedFromId" : null, "translations" : { }, "updated" : 1684509994814 } ], "tagNames" : [ "Developpement Web", "Tips" ], "teamPerms" : [ ], "templatePath" : "", "templatePathForRender" : "MarkentivexWCS/templates/blog-post.html", "textToAudioFileId" : null, "textToAudioGenerationRequestId" : null, "themePath" : null, "themeSettingsValues" : null, "title" : "Faire ses premiers pas en HTML", "tmsId" : null, "topicIds" : [ 103173212304, 116313955723 ], "topicList" : [ { "categoryId" : 3, "cdnPurgeEmbargoTime" : null, "contentIds" : [ ], "cosObjectType" : "TAG", "created" : 1676890094328, "deletedAt" : 0, "description" : "", "id" : 103173212304, "label" : "Developpement Web", "language" : "fr-fr", "name" : "Developpement Web", "portalId" : 2902314, "slug" : "developpement-web", "translatedFromId" : null, "translations" : { }, "updated" : 1676892318798 }, { "categoryId" : 3, "cdnPurgeEmbargoTime" : null, "contentIds" : [ ], "cosObjectType" : "TAG", "created" : 1684509994814, "deletedAt" : 0, "description" : "", "id" : 116313955723, "label" : "Tips", "language" : "fr-fr", "name" : "Tips", "portalId" : 2902314, "slug" : "tips", "translatedFromId" : null, "translations" : { }, "updated" : 1684509994814 } ], "topicNames" : [ "Developpement Web", "Tips" ], "topics" : [ 103173212304, 116313955723 ], "translatedContent" : { }, "translatedFromId" : null, "translations" : { }, "tweet" : null, "tweetAt" : null, "tweetImmediately" : false, "unpublishedAt" : 0, "updated" : 1727261617202, "updatedById" : 50704370, "upsizeFeaturedImage" : false, "url" : "https://www.wildcodeschool.com/fr-fr/blog/faire-ses-premiers-pas-en-html", "useFeaturedImage" : true, "userPerms" : [ ], "views" : 0, "visibleToAll" : null, "widgetContainers" : { }, "widgetcontainers" : { }, "widgets" : { } }){% endraw %}
- Développement Web
- Tips
11/10/2023 Temps de lecture 3 min

Apprendre le HTML
Lire l'article
(BlogPost: { "ab" : false, "abStatus" : null, "abTestId" : null, "abVariation" : false, "abVariationAutomated" : false, "absoluteUrl" : "https://www.wildcodeschool.com/fr-fr/blog/apprendre-le-html", "afterPostBody" : null, "aifeatures" : null, "allowedSlugConflict" : false, "analytics" : null, "analyticsPageId" : "136063275898", "analyticsPageType" : "blog-post", "approvalStatus" : null, "archived" : false, "archivedAt" : 0, "archivedInDashboard" : false, "areCommentsAllowed" : false, "attachedStylesheets" : [ ], "audienceAccess" : "PUBLIC", "author" : null, "authorName" : null, "authorUsername" : null, "blogAuthor" : { "avatar" : "https://2902314.fs1.hubspotusercontent-na1.net/hubfs/2902314/1643117199954.jpeg", "bio" : "", "cdnPurgeEmbargoTime" : null, "cosObjectType" : "BLOG_AUTHOR", "created" : 1689856442783, "deletedAt" : 0, "displayName" : "Amandine Durand", "email" : "", "facebook" : "", "fullName" : "Amandine Durand", "gravatarUrl" : null, "hasSocialProfiles" : true, "id" : 125596338103, "label" : "Amandine Durand", "language" : "fr-fr", "linkedin" : "https://www.linkedin.com/in/amandine-durand-scaling-content/", "name" : "Amandine Durand", "portalId" : 2902314, "slug" : "amandine-durand", "translatedFromId" : null, "translations" : { }, "twitter" : "", "twitterUsername" : "", "updated" : 1695630549678, "userId" : null, "username" : null, "website" : "" }, "blogAuthorId" : 125596338103, "blogPostAuthor" : { "avatar" : "https://2902314.fs1.hubspotusercontent-na1.net/hubfs/2902314/1643117199954.jpeg", "bio" : "", "cdnPurgeEmbargoTime" : null, "cosObjectType" : "BLOG_AUTHOR", "created" : 1689856442783, "deletedAt" : 0, "displayName" : "Amandine Durand", "email" : "", "facebook" : "", "fullName" : "Amandine Durand", "gravatarUrl" : null, "hasSocialProfiles" : true, "id" : 125596338103, "label" : "Amandine Durand", "language" : "fr-fr", "linkedin" : "https://www.linkedin.com/in/amandine-durand-scaling-content/", "name" : "Amandine Durand", "portalId" : 2902314, "slug" : "amandine-durand", "translatedFromId" : null, "translations" : { }, "twitter" : "", "twitterUsername" : "", "updated" : 1695630549678, "userId" : null, "username" : null, "website" : "" }, "blogPostScheduleTaskUid" : null, "blogPublishInstantEmailCampaignId" : null, "blogPublishInstantEmailRetryCount" : null, "blogPublishInstantEmailTaskUid" : null, "blogPublishToSocialMediaTask" : "DONE_NOT_SENT", "blueprintTypeId" : 0, "businessUnitId" : null, "campaign" : null, "campaignName" : null, "campaignUtm" : null, "category" : 3, "categoryId" : 3, "cdnPurgeEmbargoTime" : null, "checkPostLevelAudienceAccessFirst" : true, "clonedFrom" : null, "composeBody" : null, "compositionId" : 0, "contentAccessRuleIds" : [ ], "contentAccessRuleTypes" : [ ], "contentGroup" : 103175636270, "contentGroupId" : 103175636270, "contentTypeCategory" : 3, "contentTypeCategoryId" : 3, "contentTypeId" : null, "created" : 1695371931070, "createdByAgent" : null, "createdById" : 50704370, "createdTime" : 1695371931070, "crmObjectId" : null, "css" : { }, "cssText" : "", "ctaClicks" : null, "ctaViews" : null, "currentState" : "PUBLISHED", "currentlyPublished" : true, "deletedAt" : 0, "deletedBy" : null, "deletedByEmail" : null, "deletedById" : null, "domain" : "", "dynamicPageDataSourceId" : null, "dynamicPageDataSourceType" : null, "dynamicPageHubDbTableId" : null, "enableDomainStylesheets" : null, "enableGoogleAmpOutputOverride" : false, "enableLayoutStylesheets" : null, "errors" : [ ], "featuredImage" : "https://2902314.fs1.hubspotusercontent-na1.net/hubfs/2902314/APPRENDRE%20LE%20HTML.png", "featuredImageAltText" : "", "featuredImageHeight" : 5333, "featuredImageLength" : 0, "featuredImageWidth" : 8000, "flexAreas" : { }, "folderId" : null, "footerHtml" : null, "freezeDate" : 1697004000000, "generateJsonLdEnabledOverride" : true, "hasContentAccessRules" : false, "hasUserChanges" : true, "headHtml" : null, "header" : null, "htmlTitle" : "Apprendre le HTML", "id" : 136063275898, "includeDefaultCustomCss" : null, "isCaptchaRequired" : true, "isCrawlableByBots" : false, "isDraft" : false, "isInstanceLayoutPage" : false, "isInstantEmailEnabled" : false, "isPublished" : true, "isSocialPublishingEnabled" : false, "keywords" : [ ], "label" : "Apprendre le HTML", "language" : "fr-fr", "lastEditSessionId" : null, "lastEditUpdateId" : null, "layoutSections" : { }, "legacyBlogTabid" : null, "legacyId" : null, "legacyPostGuid" : null, "linkRelCanonicalUrl" : null, "listTemplate" : "", "liveDomain" : "www.wildcodeschool.com", "mab" : false, "mabExperimentId" : null, "mabMaster" : false, "mabVariant" : false, "meta" : { "public_access_rules" : [ ], "public_access_rules_enabled" : false, "use_featured_image" : true, "html_title" : "Apprendre le HTML", "enable_google_amp_output_override" : false, "generate_json_ld_enabled" : true, "composition_id" : 0, "is_crawlable_by_bots" : false, "post_summary" : "<p>Introduit en 1989 par Tim Berners-Lee, le pionnier du World Wide Web, il a été rendu public en 1991 et s'est rapidement imposé comme<span style=\"font-weight: bold;\"> le pilier de la création de sites web</span>. Avec la montée en puissance d'Internet et la nécessité pour les entreprises d'avoir une présence en ligne, la maîtrise du HTML est devenue indispensable pour les concepteurs web, les blogueurs, les marketeurs et de nombreuses autres professions.</p>\n", "post_body" : "<p>Introduit en 1989 par Tim Berners-Lee, le pionnier du World Wide Web, il a été rendu public en 1991 et s'est rapidement imposé comme<span style=\"font-weight: bold;\"> le pilier de la création de sites web</span>. Avec la montée en puissance d'Internet et la nécessité pour les entreprises d'avoir une présence en ligne, la maîtrise du HTML est devenue indispensable pour les concepteurs web, les blogueurs, les marketeurs et de nombreuses autres professions.</p>\n\n<p> </p>\n<h2 style=\"font-size: 32px;\"><strong><span style=\"color: #000000;\">HTML : la brique élémentaire d’Internet</span></strong></h2>\n<p>Le HTML, souvent décrit comme le <span style=\"font-weight: bold;\">squelette du web</span>, constitue la fondation sur laquelle repose Internet. En tant que <span style=\"font-weight: bold;\">brique élémentaire</span>, il façonne la structure et le contenu des sites web, rendant l'information accessible et organisée pour les utilisateurs.</p>\n<p>Le HTML se distingue par <span style=\"font-weight: bold;\">son universalité</span>. Tous les navigateurs web, qu'il s'agisse de Chrome, Firefox, Safari ou d'autres, reconnaissent et interprètent le HTML comme le langage standard pour afficher le contenu. De plus, contrairement à d'autres langages de programmation plus complexes, le HTML est relativement <span style=\"font-weight: bold;\">simple et direct</span>. Il repose sur l'utilisation de balises, comme <h1> pour les titres principaux, <p> pour les paragraphes, ou <a> pour les liens, qui déterminent comment le contenu doit être structuré sur une page. </p>\n<p>Une autre caractéristique essentielle du HTML est <span style=\"font-weight: bold;\">sa flexibilité</span>. Il permet d'intégrer divers types de contenus, tels que des images, des vidéos et des scripts interactifs. De plus, le HTML est extensible, ce qui signifie que <span style=\"font-weight: bold;\">les développeurs peuvent créer leurs propres balises et attributs</span> pour répondre à des besoins spécifiques.</p>\n<p> </p>\n<h2 style=\"font-size: 32px;\"><strong><span style=\"color: #000000;\">Évolution du HTML : l'avènement du HTML5</span></strong></h2>\n<p>Depuis sa création, le HTML a connu plusieurs versions, chacune apportant son lot d'améliorations et de fonctionnalités façonnant la manière dont le contenu est présenté. Par exemple, des balises simples comme <h1> sont utilisées pour les titres, <p> pour les paragraphes ou encore <img> pour les images. Ce sont des éléments fondamentaux qui ont été utilisés depuis les premières versions du HTML et continuent d'être essentiels dans la conception web moderne.</p>\n<p>En 1995, HTML 2.0 a marqué la première standardisation du HTML. En 1999, HTML 4 a apporté des améliorations significatives en encourageant l'utilisation du CSS pour la mise en forme. Enfin, la mise à jour la plus significative et actuellement utilisée, <span style=\"font-weight: bold;\">HTML5</span> a apporté une multitude de <span style=\"font-weight: bold;\">nouvelles fonctionnalités </span>et d'améliorations. Les développeurs ont désormais accès à des balises sémantiques telles que <article>, <section>, et <nav>, qui offrent une meilleure structuration du contenu. </p>\n<p>De plus, HTML5 a introduit des fonctionnalités natives pour l'intégration de vidéos et d'audio avec les balises <video> et <audio>, éliminant le besoin de plugins tiers. Il a également renforcé la prise en charge des applications web interactives grâce à des éléments comme le dessin en 2D avec la balise <canvas> et l'introduction de formulaires améliorés. Ces innovations ont rendu le web plus interactif, accessible et uniforme sur différentes plateformes.</p>\n<p> </p>\n<h2 style=\"font-size: 32px;\"><strong><span style=\"color: #000000;\">Une intégration harmonieuse avec d'autres technologies</span></strong></h2>\n<p>Le HTML est conçu pour fonctionner en harmonie avec d'autres technologies. Il s'intègre parfaitement avec le CSS, qui est utilisé pour styliser le contenu, et le JavaScript, qui ajoute des fonctionnalités interactives. Cette combinaison, souvent appelée la trinité de la conception web, permet de créer des sites web riches et engageants.</p>\n<p> </p>\n<h2 style=\"font-size: 32px;\"><strong><span style=\"color: #000000;\">Comment maîtriser le HTML ?</span></strong></h2>\n<p>Si vous envisagez d'apprendre le HTML, les <span style=\"font-weight: bold;\">ressources sont nombreuses</span>. C’est généralement le tout premier langage que l’on apprend lorsqu’on souhaite développer. Des sites web tels que <a href=\"https://developer.mozilla.org/fr/\" rel=\"noopener\">MDN Web Docs</a>, maintenu par la communauté de développeurs Mozilla, offrent des guides détaillés adaptés aux débutants. </p>\n<p>De nombreuses plateformes d'apprentissage en ligne proposent des cours interactifs. Cependant, la clé de la maîtrise réside dans <span style=\"font-weight: bold;\">la pratique régulière</span>. Des communautés en ligne, comme Stack Overflow, offrent une plateforme pour échanger, poser des questions et apprendre des experts du domaine.</p>\n<p> </p>\n<h2 style=\"font-size: 32px;\"><strong><span style=\"color: #000000;\">Combien de temps pour maîtriser le HTML ?</span></strong></h2>\n<p>L'apprentissage du HTML est souvent considéré comme l'une des étapes les plus accessibles. Grâce à sa <span style=\"font-weight: bold;\">structure claire et à sa syntaxe intuitive</span>, de nombreux débutants sont agréablement surpris par la rapidité avec laquelle ils peuvent saisir les concepts de base et les appliquer. En seulement quelques heures d'étude, il est tout à fait possible de comprendre les balises fondamentales et de créer des pages web simples.</p>\n<p>Pour ceux qui souhaitent aller plus loin et maîtriser des structures de page plus complexes, quelques semaines de pratique régulière peuvent suffire. En investissant du temps dans des projets personnels ou en suivant des cours en ligne interactifs, vous pouvez rapidement progresser et gagner en confiance.</p>\n<p>Si votre ambition est d'atteindre un niveau d'expertise, en intégrant des techniques avancées et en combinant le HTML avec d'autres technologies comme le CSS et le JavaScript, prévoyez quelques mois d'engagement. Mais rappelez-vous, chaque heure passée à pratiquer vous rapproche de la maîtrise.</p>\n<p> </p>\n<h2 style=\"font-size: 32px;\"><span style=\"color: #000000;\">Se former professionnellement</span></h2>\n<p>Pour ceux qui sont convaincus de l'importance du HTML, il existe de nombreuses formations, dont certaines sont intensives et entièrement en ligne, qui vous prépareront à devenir un concepteur web professionnel avec une solide maîtrise du HTML. <strong>Il est recommandé de rechercher des formations reconnues et accréditées pour garantir une éducation de qualité.</strong></p>\n<p> </p>\n<h2 style=\"font-size: 32px;\"><span style=\"color: #000000;\"><strong>L'avis de l'expert SUR HTML</strong></span></h2>\n<blockquote>\n<p><em><span style=\"color: #222222;\">Le HTML est littéralement à la base du développement web puisque c'est lui qui permet de structurer un site internet à l'aide de balises. On l'appelle communément langage de balisage et non de programmation. C'est lui qui vous permettra de construire vos blocs, sections, formulaires, tableaux, etc... C'est un langage délimité, facile d'accès et qu'il faudra connaître pour réaliser tout document web.\"</span></em></p>\n<p style=\"font-weight: bold;\"><span style=\"font-size: var(--body_font_font_size); color: var(--body_font_color);\">Louis Dupas, Head of Devs à la Wild Code School</span></p>\n</blockquote>\n<p> </p>\n<div class=\"hs-embed-wrapper\" data-service=\"youtube\" data-responsive=\"true\" style=\"position: relative; overflow: hidden; width: 100%; height: auto; padding: 0px; max-width: 400px; min-width: 256px; display: block; margin: auto 10px auto 0px; float: left;\"><div class=\"hs-embed-content-wrapper\"><div style=\"position: relative; overflow: hidden; max-width: 100%; padding-bottom: 56.5%; margin: 0px;\"><iframe width=\"200\" height=\"113\" src=\"https://www.youtube.com/embed/YZCNAAf7fUk?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen title=\"Comment devenir développeur web en 2023 ?\" style=\"position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: none;\"></iframe></div></div></div>\n<p> </p>\n<p><span style=\"color: #303f4b;\">Convaincu ? Lancez-vous avec <a href=\"https://www.wildcodeschool.com/fr-fr/formations-developpement-web/formation-developpeur-web-a-distance\" style=\"font-weight: bold;\">le bootcamp de la Wild Code School</a><span style=\"font-weight: bold;\">.</span> Cette formation intensive de 5 mois peut-être suivie à distance. Elle ouvre la voie à une reconversion professionnelle solide pour devenir développeur web.</span></p>\n<p> </p>", "rss_summary" : "<p>Introduit en 1989 par Tim Berners-Lee, le pionnier du World Wide Web, il a été rendu public en 1991 et s'est rapidement imposé comme<span style=\"font-weight: bold;\"> le pilier de la création de sites web</span>. Avec la montée en puissance d'Internet et la nécessité pour les entreprises d'avoir une présence en ligne, la maîtrise du HTML est devenue indispensable pour les concepteurs web, les blogueurs, les marketeurs et de nombreuses autres professions.</p>\n", "rss_body" : "<p>Introduit en 1989 par Tim Berners-Lee, le pionnier du World Wide Web, il a été rendu public en 1991 et s'est rapidement imposé comme<span style=\"font-weight: bold;\"> le pilier de la création de sites web</span>. Avec la montée en puissance d'Internet et la nécessité pour les entreprises d'avoir une présence en ligne, la maîtrise du HTML est devenue indispensable pour les concepteurs web, les blogueurs, les marketeurs et de nombreuses autres professions.</p>\n\n<p> </p>\n<h2 style=\"font-size: 32px;\"><strong><span style=\"color: #000000;\">HTML : la brique élémentaire d’Internet</span></strong></h2>\n<p>Le HTML, souvent décrit comme le <span style=\"font-weight: bold;\">squelette du web</span>, constitue la fondation sur laquelle repose Internet. En tant que <span style=\"font-weight: bold;\">brique élémentaire</span>, il façonne la structure et le contenu des sites web, rendant l'information accessible et organisée pour les utilisateurs.</p>\n<p>Le HTML se distingue par <span style=\"font-weight: bold;\">son universalité</span>. Tous les navigateurs web, qu'il s'agisse de Chrome, Firefox, Safari ou d'autres, reconnaissent et interprètent le HTML comme le langage standard pour afficher le contenu. De plus, contrairement à d'autres langages de programmation plus complexes, le HTML est relativement <span style=\"font-weight: bold;\">simple et direct</span>. Il repose sur l'utilisation de balises, comme <h1> pour les titres principaux, <p> pour les paragraphes, ou <a> pour les liens, qui déterminent comment le contenu doit être structuré sur une page. </p>\n<p>Une autre caractéristique essentielle du HTML est <span style=\"font-weight: bold;\">sa flexibilité</span>. Il permet d'intégrer divers types de contenus, tels que des images, des vidéos et des scripts interactifs. De plus, le HTML est extensible, ce qui signifie que <span style=\"font-weight: bold;\">les développeurs peuvent créer leurs propres balises et attributs</span> pour répondre à des besoins spécifiques.</p>\n<p> </p>\n<h2 style=\"font-size: 32px;\"><strong><span style=\"color: #000000;\">Évolution du HTML : l'avènement du HTML5</span></strong></h2>\n<p>Depuis sa création, le HTML a connu plusieurs versions, chacune apportant son lot d'améliorations et de fonctionnalités façonnant la manière dont le contenu est présenté. Par exemple, des balises simples comme <h1> sont utilisées pour les titres, <p> pour les paragraphes ou encore <img> pour les images. Ce sont des éléments fondamentaux qui ont été utilisés depuis les premières versions du HTML et continuent d'être essentiels dans la conception web moderne.</p>\n<p>En 1995, HTML 2.0 a marqué la première standardisation du HTML. En 1999, HTML 4 a apporté des améliorations significatives en encourageant l'utilisation du CSS pour la mise en forme. Enfin, la mise à jour la plus significative et actuellement utilisée, <span style=\"font-weight: bold;\">HTML5</span> a apporté une multitude de <span style=\"font-weight: bold;\">nouvelles fonctionnalités </span>et d'améliorations. Les développeurs ont désormais accès à des balises sémantiques telles que <article>, <section>, et <nav>, qui offrent une meilleure structuration du contenu. </p>\n<p>De plus, HTML5 a introduit des fonctionnalités natives pour l'intégration de vidéos et d'audio avec les balises <video> et <audio>, éliminant le besoin de plugins tiers. Il a également renforcé la prise en charge des applications web interactives grâce à des éléments comme le dessin en 2D avec la balise <canvas> et l'introduction de formulaires améliorés. Ces innovations ont rendu le web plus interactif, accessible et uniforme sur différentes plateformes.</p>\n<p> </p>\n<h2 style=\"font-size: 32px;\"><strong><span style=\"color: #000000;\">Une intégration harmonieuse avec d'autres technologies</span></strong></h2>\n<p>Le HTML est conçu pour fonctionner en harmonie avec d'autres technologies. Il s'intègre parfaitement avec le CSS, qui est utilisé pour styliser le contenu, et le JavaScript, qui ajoute des fonctionnalités interactives. Cette combinaison, souvent appelée la trinité de la conception web, permet de créer des sites web riches et engageants.</p>\n<p> </p>\n<h2 style=\"font-size: 32px;\"><strong><span style=\"color: #000000;\">Comment maîtriser le HTML ?</span></strong></h2>\n<p>Si vous envisagez d'apprendre le HTML, les <span style=\"font-weight: bold;\">ressources sont nombreuses</span>. C’est généralement le tout premier langage que l’on apprend lorsqu’on souhaite développer. Des sites web tels que <a href=\"https://developer.mozilla.org/fr/\" rel=\"noopener\">MDN Web Docs</a>, maintenu par la communauté de développeurs Mozilla, offrent des guides détaillés adaptés aux débutants. </p>\n<p>De nombreuses plateformes d'apprentissage en ligne proposent des cours interactifs. Cependant, la clé de la maîtrise réside dans <span style=\"font-weight: bold;\">la pratique régulière</span>. Des communautés en ligne, comme Stack Overflow, offrent une plateforme pour échanger, poser des questions et apprendre des experts du domaine.</p>\n<p> </p>\n<h2 style=\"font-size: 32px;\"><strong><span style=\"color: #000000;\">Combien de temps pour maîtriser le HTML ?</span></strong></h2>\n<p>L'apprentissage du HTML est souvent considéré comme l'une des étapes les plus accessibles. Grâce à sa <span style=\"font-weight: bold;\">structure claire et à sa syntaxe intuitive</span>, de nombreux débutants sont agréablement surpris par la rapidité avec laquelle ils peuvent saisir les concepts de base et les appliquer. En seulement quelques heures d'étude, il est tout à fait possible de comprendre les balises fondamentales et de créer des pages web simples.</p>\n<p>Pour ceux qui souhaitent aller plus loin et maîtriser des structures de page plus complexes, quelques semaines de pratique régulière peuvent suffire. En investissant du temps dans des projets personnels ou en suivant des cours en ligne interactifs, vous pouvez rapidement progresser et gagner en confiance.</p>\n<p>Si votre ambition est d'atteindre un niveau d'expertise, en intégrant des techniques avancées et en combinant le HTML avec d'autres technologies comme le CSS et le JavaScript, prévoyez quelques mois d'engagement. Mais rappelez-vous, chaque heure passée à pratiquer vous rapproche de la maîtrise.</p>\n<p> </p>\n<h2 style=\"font-size: 32px;\"><span style=\"color: #000000;\">Se former professionnellement</span></h2>\n<p>Pour ceux qui sont convaincus de l'importance du HTML, il existe de nombreuses formations, dont certaines sont intensives et entièrement en ligne, qui vous prépareront à devenir un concepteur web professionnel avec une solide maîtrise du HTML. <strong>Il est recommandé de rechercher des formations reconnues et accréditées pour garantir une éducation de qualité.</strong></p>\n<p> </p>\n<h2 style=\"font-size: 32px;\"><span style=\"color: #000000;\"><strong>L'avis de l'expert SUR HTML</strong></span></h2>\n<blockquote>\n<p><em><span style=\"color: #222222;\">Le HTML est littéralement à la base du développement web puisque c'est lui qui permet de structurer un site internet à l'aide de balises. On l'appelle communément langage de balisage et non de programmation. C'est lui qui vous permettra de construire vos blocs, sections, formulaires, tableaux, etc... C'est un langage délimité, facile d'accès et qu'il faudra connaître pour réaliser tout document web.\"</span></em></p>\n<p style=\"font-weight: bold;\"><span style=\"font-size: var(--body_font_font_size); color: var(--body_font_color);\">Louis Dupas, Head of Devs à la Wild Code School</span></p>\n</blockquote>\n<p> </p>\n<div class=\"hs-embed-wrapper\" data-service=\"youtube\" data-responsive=\"true\" style=\"position: relative; overflow: hidden; width: 100%; height: auto; padding: 0px; max-width: 400px; min-width: 256px; display: block; margin: auto 10px auto 0px; float: left;\"><div class=\"hs-embed-content-wrapper\"><div style=\"position: relative; overflow: hidden; max-width: 100%; padding-bottom: 56.5%; margin: 0px;\"><iframe width=\"200\" height=\"113\" src=\"https://www.youtube.com/embed/YZCNAAf7fUk?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen title=\"Comment devenir développeur web en 2023 ?\" style=\"position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: none;\"></iframe></div></div></div>\n<p> </p>\n<p><span style=\"color: #303f4b;\">Convaincu ? Lancez-vous avec <a href=\"https://www.wildcodeschool.com/fr-fr/formations-developpement-web/formation-developpeur-web-a-distance\" style=\"font-weight: bold;\">le bootcamp de la Wild Code School</a><span style=\"font-weight: bold;\">.</span> Cette formation intensive de 5 mois peut-être suivie à distance. Elle ouvre la voie à une reconversion professionnelle solide pour devenir développeur web.</span></p>\n<p> </p>", "tag_ids" : [ 103173212304, 116313955723 ], "topic_ids" : [ 103173212304, 116313955723 ], "blog_post_schedule_task_uid" : null, "blog_publish_to_social_media_task" : "DONE_NOT_SENT", "blog_publish_instant_email_task_uid" : null, "blog_publish_instant_email_campaign_id" : null, "blog_publish_instant_email_retry_count" : null, "keywords" : [ ], "published_at" : 1705595092497, "layout_sections" : { }, "past_mab_experiment_ids" : [ ], "deleted_by" : null, "featured_image_alt_text" : "", "enable_layout_stylesheets" : null, "tweet" : null, "tweet_at" : null, "campaign_name" : null, "campaign_utm" : null, "meta_keywords" : null, "meta_description" : "Le HTML, acronyme de \"HyperText Markup Language\", est le langage de balisage standard utilisé pour la création et la conception de pages web. Il est principalement utilisé pour structurer le contenu sur le web.", "tweet_immediately" : false, "publish_immediately" : true, "security_state" : "NONE", "scheduled_update_date" : 0, "placement_guids" : [ ], "property_for_dynamic_page_title" : null, "property_for_dynamic_page_slug" : null, "property_for_dynamic_page_meta_description" : null, "property_for_dynamic_page_featured_image" : null, "property_for_dynamic_page_canonical_url" : null, "preview_image_src" : null, "legacy_blog_tabid" : null, "legacy_post_guid" : null, "performable_variation_letter" : null, "style_override_id" : null, "has_user_changes" : true, "css" : { }, "css_text" : "", "unpublished_at" : 0, "published_by_id" : 50704370, "allowed_slug_conflict" : false, "ai_features" : null, "link_rel_canonical_url" : null, "page_redirected" : false, "page_expiry_enabled" : null, "page_expiry_date" : null, "page_expiry_redirect_id" : null, "page_expiry_redirect_url" : null, "deleted_by_id" : null, "state_when_deleted" : null, "cloned_from" : null, "staged_from" : null, "personas" : [ ], "compose_body" : null, "featured_image" : "https://2902314.fs1.hubspotusercontent-na1.net/hubfs/2902314/APPRENDRE%20LE%20HTML.png", "footer_html" : null, "attached_stylesheets" : [ ], "enable_domain_stylesheets" : null, "include_default_custom_css" : null, "featured_image_width" : 8000, "featured_image_height" : 5333, "publish_timezone_offset" : null, "theme_settings_values" : null, "head_html" : null, "header" : null, "password" : null, "last_edit_session_id" : null, "last_edit_update_id" : null, "created_by_agent" : null }, "metaDescription" : "Le HTML, acronyme de \"HyperText Markup Language\", est le langage de balisage standard utilisé pour la création et la conception de pages web. Il est principalement utilisé pour structurer le contenu sur le web.", "metaKeywords" : null, "name" : "Apprendre le HTML", "nextPostFeaturedImage" : "https://2902314.fs1.hubspotusercontent-na1.net/hubfs/2902314/APPRENDRE%20PHP.png", "nextPostFeaturedImageAltText" : "", "nextPostName" : "Apprendre PHP", "nextPostSlug" : "fr-fr/blog/apprendre-php", "pageExpiryDate" : null, "pageExpiryEnabled" : null, "pageExpiryRedirectId" : null, "pageExpiryRedirectUrl" : null, "pageRedirected" : false, "pageTitle" : "Apprendre le HTML", "parentBlog" : { "absoluteUrl" : "https://www.wildcodeschool.com/fr-fr/blog", "allowComments" : false, "ampBodyColor" : "#404040", "ampBodyFont" : "'Helvetica Neue', Helvetica, Arial, sans-serif", "ampBodyFontSize" : "18", "ampCustomCss" : "", "ampHeaderBackgroundColor" : "#ffffff", "ampHeaderColor" : "#1e1e1e", "ampHeaderFont" : "'Helvetica Neue', Helvetica, Arial, sans-serif", "ampHeaderFontSize" : "36", "ampLinkColor" : "#416bb3", "ampLogoAlt" : "", "ampLogoHeight" : 0, "ampLogoSrc" : "", "ampLogoWidth" : 0, "analyticsPageId" : 103175636270, "attachedStylesheets" : [ ], "audienceAccess" : "PUBLIC", "businessUnitId" : null, "captchaAfterDays" : 7, "captchaAlways" : false, "categoryId" : 3, "cdnPurgeEmbargoTime" : null, "closeCommentsOlder" : 0, "commentDateFormat" : "medium", "commentFormGuid" : "c7bc1329-e868-4cf0-9b1c-23d0a756caa6", "commentMaxThreadDepth" : 1, "commentModeration" : false, "commentNotificationEmails" : [ ], "commentShouldCreateContact" : false, "commentVerificationText" : "", "cosObjectType" : "BLOG", "created" : 1676891663653, "createdDateTime" : 1676891663653, "dailyNotificationEmailId" : null, "dateFormattingLanguage" : null, "defaultGroupStyleId" : "", "defaultNotificationFromName" : "", "defaultNotificationReplyTo" : "", "deletedAt" : 0, "description" : "Faites le plein d'informations liées aux métiers de la tech.", "domain" : "", "domainWhenPublished" : "www.wildcodeschool.com", "emailApiSubscriptionId" : null, "enableGoogleAmpOutput" : true, "enableSocialAutoPublishing" : false, "generateJsonLdEnabled" : true, "header" : null, "htmlFooter" : "", "htmlFooterIsShared" : true, "htmlHead" : "", "htmlHeadIsShared" : true, "htmlKeywords" : [ ], "htmlTitle" : "Le blog de la Wild Code School - Wild Code School", "id" : 103175636270, "ilsSubscriptionListsByType" : { }, "instantNotificationEmailId" : null, "itemLayoutId" : null, "itemTemplateIsShared" : false, "itemTemplatePath" : "MarkentivexWCS/templates/blog-post.html", "label" : "Blog", "language" : "fr-fr", "legacyGuid" : null, "legacyModuleId" : null, "legacyTabId" : null, "listingLayoutId" : null, "listingPageId" : 103175636271, "listingTemplatePath" : "", "liveDomain" : "www.wildcodeschool.com", "monthFilterFormat" : "MMMM yyyy", "monthlyNotificationEmailId" : null, "name" : "Blog", "parentBlogUpdateTaskId" : null, "portalId" : 2902314, "postHtmlFooter" : "", "postHtmlHead" : "", "postsPerListingPage" : 9, "postsPerRssFeed" : 10, "publicAccessRules" : [ ], "publicAccessRulesEnabled" : false, "publicTitle" : "Blog", "publishDateFormat" : "dd/MM/YYYY", "resolvedDomain" : "www.wildcodeschool.com", "rootUrl" : "https://www.wildcodeschool.com/fr-fr/blog", "rssCustomFeed" : null, "rssDescription" : null, "rssItemFooter" : null, "rssItemHeader" : null, "settingsOverrides" : { "itemLayoutId" : false, "itemTemplatePath" : false, "itemTemplateIsShared" : false, "listingLayoutId" : false, "listingTemplatePath" : false, "postsPerListingPage" : false, "showSummaryInListing" : false, "useFeaturedImageInSummary" : false, "htmlHead" : false, "postHtmlHead" : false, "htmlHeadIsShared" : false, "htmlFooter" : false, "listingPageHtmlFooter" : false, "postHtmlFooter" : false, "htmlFooterIsShared" : false, "attachedStylesheets" : false, "postsPerRssFeed" : false, "showSummaryInRss" : false, "showSummaryInEmails" : false, "showSummariesInEmails" : false, "allowComments" : false, "commentShouldCreateContact" : false, "commentModeration" : false, "closeCommentsOlder" : false, "commentNotificationEmails" : false, "commentMaxThreadDepth" : false, "commentVerificationText" : false, "socialAccountTwitter" : false, "showSocialLinkTwitter" : false, "showSocialLinkLinkedin" : false, "showSocialLinkFacebook" : false, "enableGoogleAmpOutput" : false, "ampLogoSrc" : false, "ampLogoHeight" : false, "ampLogoWidth" : false, "ampLogoAlt" : false, "ampHeaderFont" : false, "ampHeaderFontSize" : false, "ampHeaderColor" : false, "ampHeaderBackgroundColor" : false, "ampBodyFont" : false, "ampBodyFontSize" : false, "ampBodyColor" : false, "ampLinkColor" : false, "generateJsonLdEnabled" : false }, "showSocialLinkFacebook" : true, "showSocialLinkLinkedin" : true, "showSocialLinkTwitter" : true, "showSummaryInEmails" : true, "showSummaryInListing" : true, "showSummaryInRss" : true, "siteId" : null, "slug" : "fr-fr/blog", "socialAccountTwitter" : "", "state" : null, "subscriptionContactsProperty" : null, "subscriptionEmailType" : null, "subscriptionFormGuid" : null, "subscriptionListsByType" : { }, "title" : null, "translatedFromId" : null, "translations" : { "de-de" : { "absoluteUrl" : "https://www.wildcodeschool.com/de-de/blog", "id" : 103176710277, "language" : "de-de", "masterId" : 103175636270, "name" : "Blog", "publicAccessRules" : [ ], "publicAccessRulesEnabled" : false, "slug" : "de-de/blog" }, "en-gb" : { "absoluteUrl" : "https://www.wildcodeschool.com/en-gb/blog", "id" : 103176710275, "language" : "en-gb", "masterId" : 103175636270, "name" : "Blog", "publicAccessRules" : [ ], "publicAccessRulesEnabled" : false, "slug" : "en-gb/blog" }, "es-es" : { "absoluteUrl" : "https://www.wildcodeschool.com/es-es/blog", "id" : 103176710278, "language" : "es-es", "masterId" : 103175636270, "name" : "Blog", "publicAccessRules" : [ ], "publicAccessRulesEnabled" : false, "slug" : "es-es/blog" }, "pt-pt" : { "absoluteUrl" : "https://www.wildcodeschool.com/pt-pt/blog", "id" : 103176710276, "language" : "pt-pt", "masterId" : 103175636270, "name" : "Blog", "publicAccessRules" : [ ], "publicAccessRulesEnabled" : false, "slug" : "pt-pt/blog" } }, "updated" : 1726755591366, "updatedDateTime" : 1726755591366, "urlBase" : "www.wildcodeschool.com/fr-fr/blog", "urlSegments" : { "all" : "all", "archive" : "archive", "author" : "author", "page" : "page", "tag" : "tag" }, "useFeaturedImageInSummary" : true, "usesDefaultTemplate" : false, "weeklyNotificationEmailId" : null }, "password" : null, "pastMabExperimentIds" : [ ], "performableGuid" : null, "performableVariationLetter" : null, "personas" : [ ], "placementGuids" : [ ], "portableKey" : null, "portalId" : 2902314, "position" : null, "postBody" : "<p>Introduit en 1989 par Tim Berners-Lee, le pionnier du World Wide Web, il a été rendu public en 1991 et s'est rapidement imposé comme<span style=\"font-weight: bold;\"> le pilier de la création de sites web</span>. Avec la montée en puissance d'Internet et la nécessité pour les entreprises d'avoir une présence en ligne, la maîtrise du HTML est devenue indispensable pour les concepteurs web, les blogueurs, les marketeurs et de nombreuses autres professions.</p>\n\n<p> </p>\n<h2 style=\"font-size: 32px;\"><strong><span style=\"color: #000000;\">HTML : la brique élémentaire d’Internet</span></strong></h2>\n<p>Le HTML, souvent décrit comme le <span style=\"font-weight: bold;\">squelette du web</span>, constitue la fondation sur laquelle repose Internet. En tant que <span style=\"font-weight: bold;\">brique élémentaire</span>, il façonne la structure et le contenu des sites web, rendant l'information accessible et organisée pour les utilisateurs.</p>\n<p>Le HTML se distingue par <span style=\"font-weight: bold;\">son universalité</span>. Tous les navigateurs web, qu'il s'agisse de Chrome, Firefox, Safari ou d'autres, reconnaissent et interprètent le HTML comme le langage standard pour afficher le contenu. De plus, contrairement à d'autres langages de programmation plus complexes, le HTML est relativement <span style=\"font-weight: bold;\">simple et direct</span>. Il repose sur l'utilisation de balises, comme <h1> pour les titres principaux, <p> pour les paragraphes, ou <a> pour les liens, qui déterminent comment le contenu doit être structuré sur une page. </p>\n<p>Une autre caractéristique essentielle du HTML est <span style=\"font-weight: bold;\">sa flexibilité</span>. Il permet d'intégrer divers types de contenus, tels que des images, des vidéos et des scripts interactifs. De plus, le HTML est extensible, ce qui signifie que <span style=\"font-weight: bold;\">les développeurs peuvent créer leurs propres balises et attributs</span> pour répondre à des besoins spécifiques.</p>\n<p> </p>\n<h2 style=\"font-size: 32px;\"><strong><span style=\"color: #000000;\">Évolution du HTML : l'avènement du HTML5</span></strong></h2>\n<p>Depuis sa création, le HTML a connu plusieurs versions, chacune apportant son lot d'améliorations et de fonctionnalités façonnant la manière dont le contenu est présenté. Par exemple, des balises simples comme <h1> sont utilisées pour les titres, <p> pour les paragraphes ou encore <img> pour les images. Ce sont des éléments fondamentaux qui ont été utilisés depuis les premières versions du HTML et continuent d'être essentiels dans la conception web moderne.</p>\n<p>En 1995, HTML 2.0 a marqué la première standardisation du HTML. En 1999, HTML 4 a apporté des améliorations significatives en encourageant l'utilisation du CSS pour la mise en forme. Enfin, la mise à jour la plus significative et actuellement utilisée, <span style=\"font-weight: bold;\">HTML5</span> a apporté une multitude de <span style=\"font-weight: bold;\">nouvelles fonctionnalités </span>et d'améliorations. Les développeurs ont désormais accès à des balises sémantiques telles que <article>, <section>, et <nav>, qui offrent une meilleure structuration du contenu. </p>\n<p>De plus, HTML5 a introduit des fonctionnalités natives pour l'intégration de vidéos et d'audio avec les balises <video> et <audio>, éliminant le besoin de plugins tiers. Il a également renforcé la prise en charge des applications web interactives grâce à des éléments comme le dessin en 2D avec la balise <canvas> et l'introduction de formulaires améliorés. Ces innovations ont rendu le web plus interactif, accessible et uniforme sur différentes plateformes.</p>\n<p> </p>\n<h2 style=\"font-size: 32px;\"><strong><span style=\"color: #000000;\">Une intégration harmonieuse avec d'autres technologies</span></strong></h2>\n<p>Le HTML est conçu pour fonctionner en harmonie avec d'autres technologies. Il s'intègre parfaitement avec le CSS, qui est utilisé pour styliser le contenu, et le JavaScript, qui ajoute des fonctionnalités interactives. Cette combinaison, souvent appelée la trinité de la conception web, permet de créer des sites web riches et engageants.</p>\n<p> </p>\n<h2 style=\"font-size: 32px;\"><strong><span style=\"color: #000000;\">Comment maîtriser le HTML ?</span></strong></h2>\n<p>Si vous envisagez d'apprendre le HTML, les <span style=\"font-weight: bold;\">ressources sont nombreuses</span>. C’est généralement le tout premier langage que l’on apprend lorsqu’on souhaite développer. Des sites web tels que <a href=\"https://developer.mozilla.org/fr/\" rel=\"noopener\">MDN Web Docs</a>, maintenu par la communauté de développeurs Mozilla, offrent des guides détaillés adaptés aux débutants. </p>\n<p>De nombreuses plateformes d'apprentissage en ligne proposent des cours interactifs. Cependant, la clé de la maîtrise réside dans <span style=\"font-weight: bold;\">la pratique régulière</span>. Des communautés en ligne, comme Stack Overflow, offrent une plateforme pour échanger, poser des questions et apprendre des experts du domaine.</p>\n<p> </p>\n<h2 style=\"font-size: 32px;\"><strong><span style=\"color: #000000;\">Combien de temps pour maîtriser le HTML ?</span></strong></h2>\n<p>L'apprentissage du HTML est souvent considéré comme l'une des étapes les plus accessibles. Grâce à sa <span style=\"font-weight: bold;\">structure claire et à sa syntaxe intuitive</span>, de nombreux débutants sont agréablement surpris par la rapidité avec laquelle ils peuvent saisir les concepts de base et les appliquer. En seulement quelques heures d'étude, il est tout à fait possible de comprendre les balises fondamentales et de créer des pages web simples.</p>\n<p>Pour ceux qui souhaitent aller plus loin et maîtriser des structures de page plus complexes, quelques semaines de pratique régulière peuvent suffire. En investissant du temps dans des projets personnels ou en suivant des cours en ligne interactifs, vous pouvez rapidement progresser et gagner en confiance.</p>\n<p>Si votre ambition est d'atteindre un niveau d'expertise, en intégrant des techniques avancées et en combinant le HTML avec d'autres technologies comme le CSS et le JavaScript, prévoyez quelques mois d'engagement. Mais rappelez-vous, chaque heure passée à pratiquer vous rapproche de la maîtrise.</p>\n<p> </p>\n<h2 style=\"font-size: 32px;\"><span style=\"color: #000000;\">Se former professionnellement</span></h2>\n<p>Pour ceux qui sont convaincus de l'importance du HTML, il existe de nombreuses formations, dont certaines sont intensives et entièrement en ligne, qui vous prépareront à devenir un concepteur web professionnel avec une solide maîtrise du HTML. <strong>Il est recommandé de rechercher des formations reconnues et accréditées pour garantir une éducation de qualité.</strong></p>\n<p> </p>\n<h2 style=\"font-size: 32px;\"><span style=\"color: #000000;\"><strong>L'avis de l'expert SUR HTML</strong></span></h2>\n<blockquote>\n<p><em><span style=\"color: #222222;\">Le HTML est littéralement à la base du développement web puisque c'est lui qui permet de structurer un site internet à l'aide de balises. On l'appelle communément langage de balisage et non de programmation. C'est lui qui vous permettra de construire vos blocs, sections, formulaires, tableaux, etc... C'est un langage délimité, facile d'accès et qu'il faudra connaître pour réaliser tout document web.\"</span></em></p>\n<p style=\"font-weight: bold;\"><span style=\"font-size: var(--body_font_font_size); color: var(--body_font_color);\">Louis Dupas, Head of Devs à la Wild Code School</span></p>\n</blockquote>\n<p> </p>\n<div class=\"hs-embed-wrapper\" data-service=\"youtube\" data-responsive=\"true\" style=\"position: relative; overflow: hidden; width: 100%; height: auto; padding: 0px; max-width: 400px; min-width: 256px; display: block; margin: auto 10px auto 0px; float: left;\"><div class=\"hs-embed-content-wrapper\"><div style=\"position: relative; overflow: hidden; max-width: 100%; padding-bottom: 56.5%; margin: 0px;\"><iframe width=\"200\" height=\"113\" src=\"https://www.youtube.com/embed/YZCNAAf7fUk?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen title=\"Comment devenir développeur web en 2023 ?\" style=\"position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: none;\"></iframe></div></div></div>\n<p> </p>\n<p><span style=\"color: #303f4b;\">Convaincu ? Lancez-vous avec <a href=\"https://www.wildcodeschool.com/fr-fr/formations-developpement-web/formation-developpeur-web-a-distance\" style=\"font-weight: bold;\">le bootcamp de la Wild Code School</a><span style=\"font-weight: bold;\">.</span> Cette formation intensive de 5 mois peut-être suivie à distance. Elle ouvre la voie à une reconversion professionnelle solide pour devenir développeur web.</span></p>\n<p> </p>", "postBodyRss" : "<p>Introduit en 1989 par Tim Berners-Lee, le pionnier du World Wide Web, il a été rendu public en 1991 et s'est rapidement imposé comme<span style=\"font-weight: bold;\"> le pilier de la création de sites web</span>. Avec la montée en puissance d'Internet et la nécessité pour les entreprises d'avoir une présence en ligne, la maîtrise du HTML est devenue indispensable pour les concepteurs web, les blogueurs, les marketeurs et de nombreuses autres professions.</p>\n\n<p> </p>\n<h2 style=\"font-size: 32px;\"><strong><span style=\"color: #000000;\">HTML : la brique élémentaire d’Internet</span></strong></h2>\n<p>Le HTML, souvent décrit comme le <span style=\"font-weight: bold;\">squelette du web</span>, constitue la fondation sur laquelle repose Internet. En tant que <span style=\"font-weight: bold;\">brique élémentaire</span>, il façonne la structure et le contenu des sites web, rendant l'information accessible et organisée pour les utilisateurs.</p>\n<p>Le HTML se distingue par <span style=\"font-weight: bold;\">son universalité</span>. Tous les navigateurs web, qu'il s'agisse de Chrome, Firefox, Safari ou d'autres, reconnaissent et interprètent le HTML comme le langage standard pour afficher le contenu. De plus, contrairement à d'autres langages de programmation plus complexes, le HTML est relativement <span style=\"font-weight: bold;\">simple et direct</span>. Il repose sur l'utilisation de balises, comme <h1> pour les titres principaux, <p> pour les paragraphes, ou <a> pour les liens, qui déterminent comment le contenu doit être structuré sur une page. </p>\n<p>Une autre caractéristique essentielle du HTML est <span style=\"font-weight: bold;\">sa flexibilité</span>. Il permet d'intégrer divers types de contenus, tels que des images, des vidéos et des scripts interactifs. De plus, le HTML est extensible, ce qui signifie que <span style=\"font-weight: bold;\">les développeurs peuvent créer leurs propres balises et attributs</span> pour répondre à des besoins spécifiques.</p>\n<p> </p>\n<h2 style=\"font-size: 32px;\"><strong><span style=\"color: #000000;\">Évolution du HTML : l'avènement du HTML5</span></strong></h2>\n<p>Depuis sa création, le HTML a connu plusieurs versions, chacune apportant son lot d'améliorations et de fonctionnalités façonnant la manière dont le contenu est présenté. Par exemple, des balises simples comme <h1> sont utilisées pour les titres, <p> pour les paragraphes ou encore <img> pour les images. Ce sont des éléments fondamentaux qui ont été utilisés depuis les premières versions du HTML et continuent d'être essentiels dans la conception web moderne.</p>\n<p>En 1995, HTML 2.0 a marqué la première standardisation du HTML. En 1999, HTML 4 a apporté des améliorations significatives en encourageant l'utilisation du CSS pour la mise en forme. Enfin, la mise à jour la plus significative et actuellement utilisée, <span style=\"font-weight: bold;\">HTML5</span> a apporté une multitude de <span style=\"font-weight: bold;\">nouvelles fonctionnalités </span>et d'améliorations. Les développeurs ont désormais accès à des balises sémantiques telles que <article>, <section>, et <nav>, qui offrent une meilleure structuration du contenu. </p>\n<p>De plus, HTML5 a introduit des fonctionnalités natives pour l'intégration de vidéos et d'audio avec les balises <video> et <audio>, éliminant le besoin de plugins tiers. Il a également renforcé la prise en charge des applications web interactives grâce à des éléments comme le dessin en 2D avec la balise <canvas> et l'introduction de formulaires améliorés. Ces innovations ont rendu le web plus interactif, accessible et uniforme sur différentes plateformes.</p>\n<p> </p>\n<h2 style=\"font-size: 32px;\"><strong><span style=\"color: #000000;\">Une intégration harmonieuse avec d'autres technologies</span></strong></h2>\n<p>Le HTML est conçu pour fonctionner en harmonie avec d'autres technologies. Il s'intègre parfaitement avec le CSS, qui est utilisé pour styliser le contenu, et le JavaScript, qui ajoute des fonctionnalités interactives. Cette combinaison, souvent appelée la trinité de la conception web, permet de créer des sites web riches et engageants.</p>\n<p> </p>\n<h2 style=\"font-size: 32px;\"><strong><span style=\"color: #000000;\">Comment maîtriser le HTML ?</span></strong></h2>\n<p>Si vous envisagez d'apprendre le HTML, les <span style=\"font-weight: bold;\">ressources sont nombreuses</span>. C’est généralement le tout premier langage que l’on apprend lorsqu’on souhaite développer. Des sites web tels que <a href=\"https://developer.mozilla.org/fr/\" rel=\"noopener\">MDN Web Docs</a>, maintenu par la communauté de développeurs Mozilla, offrent des guides détaillés adaptés aux débutants. </p>\n<p>De nombreuses plateformes d'apprentissage en ligne proposent des cours interactifs. Cependant, la clé de la maîtrise réside dans <span style=\"font-weight: bold;\">la pratique régulière</span>. Des communautés en ligne, comme Stack Overflow, offrent une plateforme pour échanger, poser des questions et apprendre des experts du domaine.</p>\n<p> </p>\n<h2 style=\"font-size: 32px;\"><strong><span style=\"color: #000000;\">Combien de temps pour maîtriser le HTML ?</span></strong></h2>\n<p>L'apprentissage du HTML est souvent considéré comme l'une des étapes les plus accessibles. Grâce à sa <span style=\"font-weight: bold;\">structure claire et à sa syntaxe intuitive</span>, de nombreux débutants sont agréablement surpris par la rapidité avec laquelle ils peuvent saisir les concepts de base et les appliquer. En seulement quelques heures d'étude, il est tout à fait possible de comprendre les balises fondamentales et de créer des pages web simples.</p>\n<p>Pour ceux qui souhaitent aller plus loin et maîtriser des structures de page plus complexes, quelques semaines de pratique régulière peuvent suffire. En investissant du temps dans des projets personnels ou en suivant des cours en ligne interactifs, vous pouvez rapidement progresser et gagner en confiance.</p>\n<p>Si votre ambition est d'atteindre un niveau d'expertise, en intégrant des techniques avancées et en combinant le HTML avec d'autres technologies comme le CSS et le JavaScript, prévoyez quelques mois d'engagement. Mais rappelez-vous, chaque heure passée à pratiquer vous rapproche de la maîtrise.</p>\n<p> </p>\n<h2 style=\"font-size: 32px;\"><span style=\"color: #000000;\">Se former professionnellement</span></h2>\n<p>Pour ceux qui sont convaincus de l'importance du HTML, il existe de nombreuses formations, dont certaines sont intensives et entièrement en ligne, qui vous prépareront à devenir un concepteur web professionnel avec une solide maîtrise du HTML. <strong>Il est recommandé de rechercher des formations reconnues et accréditées pour garantir une éducation de qualité.</strong></p>\n<p> </p>\n<h2 style=\"font-size: 32px;\"><span style=\"color: #000000;\"><strong>L'avis de l'expert SUR HTML</strong></span></h2>\n<blockquote>\n<p><em><span style=\"color: #222222;\">Le HTML est littéralement à la base du développement web puisque c'est lui qui permet de structurer un site internet à l'aide de balises. On l'appelle communément langage de balisage et non de programmation. C'est lui qui vous permettra de construire vos blocs, sections, formulaires, tableaux, etc... C'est un langage délimité, facile d'accès et qu'il faudra connaître pour réaliser tout document web.\"</span></em></p>\n<p style=\"font-weight: bold;\"><span style=\"font-size: var(--body_font_font_size); color: var(--body_font_color);\">Louis Dupas, Head of Devs à la Wild Code School</span></p>\n</blockquote>\n<p> </p>\n<div class=\"hs-embed-wrapper\" data-service=\"youtube\" data-responsive=\"true\" style=\"position: relative; overflow: hidden; width: 100%; height: auto; padding: 0px; max-width: 400px; min-width: 256px; display: block; margin: auto 10px auto 0px; float: left;\"><div class=\"hs-embed-content-wrapper\"><div style=\"position: relative; overflow: hidden; max-width: 100%; padding-bottom: 56.5%; margin: 0px;\"><iframe width=\"200\" height=\"113\" src=\"https://www.youtube.com/embed/YZCNAAf7fUk?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen title=\"Comment devenir développeur web en 2023 ?\" style=\"position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: none;\"></iframe></div></div></div>\n<p> </p>\n<p><span style=\"color: #303f4b;\">Convaincu ? Lancez-vous avec <a href=\"https://www.wildcodeschool.com/fr-fr/formations-developpement-web/formation-developpeur-web-a-distance\" style=\"font-weight: bold;\">le bootcamp de la Wild Code School</a><span style=\"font-weight: bold;\">.</span> Cette formation intensive de 5 mois peut-être suivie à distance. Elle ouvre la voie à une reconversion professionnelle solide pour devenir développeur web.</span></p>\n<p> </p>", "postEmailContent" : "<p>Introduit en 1989 par Tim Berners-Lee, le pionnier du World Wide Web, il a été rendu public en 1991 et s'est rapidement imposé comme<span style=\"font-weight: bold;\"> le pilier de la création de sites web</span>. Avec la montée en puissance d'Internet et la nécessité pour les entreprises d'avoir une présence en ligne, la maîtrise du HTML est devenue indispensable pour les concepteurs web, les blogueurs, les marketeurs et de nombreuses autres professions.</p>", "postFeaturedImageIfEnabled" : "https://2902314.fs1.hubspotusercontent-na1.net/hubfs/2902314/APPRENDRE%20LE%20HTML.png", "postListContent" : "<p>Introduit en 1989 par Tim Berners-Lee, le pionnier du World Wide Web, il a été rendu public en 1991 et s'est rapidement imposé comme<span style=\"font-weight: bold;\"> le pilier de la création de sites web</span>. Avec la montée en puissance d'Internet et la nécessité pour les entreprises d'avoir une présence en ligne, la maîtrise du HTML est devenue indispensable pour les concepteurs web, les blogueurs, les marketeurs et de nombreuses autres professions.</p>", "postListSummaryFeaturedImage" : "https://2902314.fs1.hubspotusercontent-na1.net/hubfs/2902314/APPRENDRE%20LE%20HTML.png", "postRssContent" : "<p>Introduit en 1989 par Tim Berners-Lee, le pionnier du World Wide Web, il a été rendu public en 1991 et s'est rapidement imposé comme<span style=\"font-weight: bold;\"> le pilier de la création de sites web</span>. Avec la montée en puissance d'Internet et la nécessité pour les entreprises d'avoir une présence en ligne, la maîtrise du HTML est devenue indispensable pour les concepteurs web, les blogueurs, les marketeurs et de nombreuses autres professions.</p>", "postRssSummaryFeaturedImage" : "https://2902314.fs1.hubspotusercontent-na1.net/hubfs/2902314/APPRENDRE%20LE%20HTML.png", "postSummary" : "<p>Introduit en 1989 par Tim Berners-Lee, le pionnier du World Wide Web, il a été rendu public en 1991 et s'est rapidement imposé comme<span style=\"font-weight: bold;\"> le pilier de la création de sites web</span>. Avec la montée en puissance d'Internet et la nécessité pour les entreprises d'avoir une présence en ligne, la maîtrise du HTML est devenue indispensable pour les concepteurs web, les blogueurs, les marketeurs et de nombreuses autres professions.</p>\n", "postSummaryRss" : "<p>Introduit en 1989 par Tim Berners-Lee, le pionnier du World Wide Web, il a été rendu public en 1991 et s'est rapidement imposé comme<span style=\"font-weight: bold;\"> le pilier de la création de sites web</span>. Avec la montée en puissance d'Internet et la nécessité pour les entreprises d'avoir une présence en ligne, la maîtrise du HTML est devenue indispensable pour les concepteurs web, les blogueurs, les marketeurs et de nombreuses autres professions.</p>", "postTemplate" : "MarkentivexWCS/templates/blog-post.html", "previewImageSrc" : null, "previewKey" : "vZLISCQO", "previousPostFeaturedImage" : "https://2902314.fs1.hubspotusercontent-na1.net/hubfs/2902314/09-10-2023_QUELLE%20FORMATION%20POUR%20DEVENIR%20DEVELOPPEUR%20WEB.jpg", "previousPostFeaturedImageAltText" : "", "previousPostName" : "Quelle formation pour devenir développeur web ?", "previousPostSlug" : "fr-fr/blog/quelle-formation-pour-devenir-développeur-web", "processingStatus" : "PUBLISHED", "propertyForDynamicPageCanonicalUrl" : null, "propertyForDynamicPageFeaturedImage" : null, "propertyForDynamicPageMetaDescription" : null, "propertyForDynamicPageSlug" : null, "propertyForDynamicPageTitle" : null, "publicAccessRules" : [ ], "publicAccessRulesEnabled" : false, "publishDate" : 1697004000000, "publishDateLocalTime" : 1697004000000, "publishDateLocalized" : { "date" : 1697004000000, "format" : "dd/MM/YYYY", "language" : null }, "publishImmediately" : true, "publishTimezoneOffset" : null, "publishedAt" : 1705595092497, "publishedByEmail" : null, "publishedById" : 50704370, "publishedByName" : null, "publishedUrl" : "https://www.wildcodeschool.com/fr-fr/blog/apprendre-le-html", "resolvedDomain" : "www.wildcodeschool.com", "resolvedLanguage" : null, "rssBody" : "<p>Introduit en 1989 par Tim Berners-Lee, le pionnier du World Wide Web, il a été rendu public en 1991 et s'est rapidement imposé comme<span style=\"font-weight: bold;\"> le pilier de la création de sites web</span>. Avec la montée en puissance d'Internet et la nécessité pour les entreprises d'avoir une présence en ligne, la maîtrise du HTML est devenue indispensable pour les concepteurs web, les blogueurs, les marketeurs et de nombreuses autres professions.</p>\n\n<p> </p>\n<h2 style=\"font-size: 32px;\"><strong><span style=\"color: #000000;\">HTML : la brique élémentaire d’Internet</span></strong></h2>\n<p>Le HTML, souvent décrit comme le <span style=\"font-weight: bold;\">squelette du web</span>, constitue la fondation sur laquelle repose Internet. En tant que <span style=\"font-weight: bold;\">brique élémentaire</span>, il façonne la structure et le contenu des sites web, rendant l'information accessible et organisée pour les utilisateurs.</p>\n<p>Le HTML se distingue par <span style=\"font-weight: bold;\">son universalité</span>. Tous les navigateurs web, qu'il s'agisse de Chrome, Firefox, Safari ou d'autres, reconnaissent et interprètent le HTML comme le langage standard pour afficher le contenu. De plus, contrairement à d'autres langages de programmation plus complexes, le HTML est relativement <span style=\"font-weight: bold;\">simple et direct</span>. Il repose sur l'utilisation de balises, comme <h1> pour les titres principaux, <p> pour les paragraphes, ou <a> pour les liens, qui déterminent comment le contenu doit être structuré sur une page. </p>\n<p>Une autre caractéristique essentielle du HTML est <span style=\"font-weight: bold;\">sa flexibilité</span>. Il permet d'intégrer divers types de contenus, tels que des images, des vidéos et des scripts interactifs. De plus, le HTML est extensible, ce qui signifie que <span style=\"font-weight: bold;\">les développeurs peuvent créer leurs propres balises et attributs</span> pour répondre à des besoins spécifiques.</p>\n<p> </p>\n<h2 style=\"font-size: 32px;\"><strong><span style=\"color: #000000;\">Évolution du HTML : l'avènement du HTML5</span></strong></h2>\n<p>Depuis sa création, le HTML a connu plusieurs versions, chacune apportant son lot d'améliorations et de fonctionnalités façonnant la manière dont le contenu est présenté. Par exemple, des balises simples comme <h1> sont utilisées pour les titres, <p> pour les paragraphes ou encore <img> pour les images. Ce sont des éléments fondamentaux qui ont été utilisés depuis les premières versions du HTML et continuent d'être essentiels dans la conception web moderne.</p>\n<p>En 1995, HTML 2.0 a marqué la première standardisation du HTML. En 1999, HTML 4 a apporté des améliorations significatives en encourageant l'utilisation du CSS pour la mise en forme. Enfin, la mise à jour la plus significative et actuellement utilisée, <span style=\"font-weight: bold;\">HTML5</span> a apporté une multitude de <span style=\"font-weight: bold;\">nouvelles fonctionnalités </span>et d'améliorations. Les développeurs ont désormais accès à des balises sémantiques telles que <article>, <section>, et <nav>, qui offrent une meilleure structuration du contenu. </p>\n<p>De plus, HTML5 a introduit des fonctionnalités natives pour l'intégration de vidéos et d'audio avec les balises <video> et <audio>, éliminant le besoin de plugins tiers. Il a également renforcé la prise en charge des applications web interactives grâce à des éléments comme le dessin en 2D avec la balise <canvas> et l'introduction de formulaires améliorés. Ces innovations ont rendu le web plus interactif, accessible et uniforme sur différentes plateformes.</p>\n<p> </p>\n<h2 style=\"font-size: 32px;\"><strong><span style=\"color: #000000;\">Une intégration harmonieuse avec d'autres technologies</span></strong></h2>\n<p>Le HTML est conçu pour fonctionner en harmonie avec d'autres technologies. Il s'intègre parfaitement avec le CSS, qui est utilisé pour styliser le contenu, et le JavaScript, qui ajoute des fonctionnalités interactives. Cette combinaison, souvent appelée la trinité de la conception web, permet de créer des sites web riches et engageants.</p>\n<p> </p>\n<h2 style=\"font-size: 32px;\"><strong><span style=\"color: #000000;\">Comment maîtriser le HTML ?</span></strong></h2>\n<p>Si vous envisagez d'apprendre le HTML, les <span style=\"font-weight: bold;\">ressources sont nombreuses</span>. C’est généralement le tout premier langage que l’on apprend lorsqu’on souhaite développer. Des sites web tels que <a href=\"https://developer.mozilla.org/fr/\" rel=\"noopener\">MDN Web Docs</a>, maintenu par la communauté de développeurs Mozilla, offrent des guides détaillés adaptés aux débutants. </p>\n<p>De nombreuses plateformes d'apprentissage en ligne proposent des cours interactifs. Cependant, la clé de la maîtrise réside dans <span style=\"font-weight: bold;\">la pratique régulière</span>. Des communautés en ligne, comme Stack Overflow, offrent une plateforme pour échanger, poser des questions et apprendre des experts du domaine.</p>\n<p> </p>\n<h2 style=\"font-size: 32px;\"><strong><span style=\"color: #000000;\">Combien de temps pour maîtriser le HTML ?</span></strong></h2>\n<p>L'apprentissage du HTML est souvent considéré comme l'une des étapes les plus accessibles. Grâce à sa <span style=\"font-weight: bold;\">structure claire et à sa syntaxe intuitive</span>, de nombreux débutants sont agréablement surpris par la rapidité avec laquelle ils peuvent saisir les concepts de base et les appliquer. En seulement quelques heures d'étude, il est tout à fait possible de comprendre les balises fondamentales et de créer des pages web simples.</p>\n<p>Pour ceux qui souhaitent aller plus loin et maîtriser des structures de page plus complexes, quelques semaines de pratique régulière peuvent suffire. En investissant du temps dans des projets personnels ou en suivant des cours en ligne interactifs, vous pouvez rapidement progresser et gagner en confiance.</p>\n<p>Si votre ambition est d'atteindre un niveau d'expertise, en intégrant des techniques avancées et en combinant le HTML avec d'autres technologies comme le CSS et le JavaScript, prévoyez quelques mois d'engagement. Mais rappelez-vous, chaque heure passée à pratiquer vous rapproche de la maîtrise.</p>\n<p> </p>\n<h2 style=\"font-size: 32px;\"><span style=\"color: #000000;\">Se former professionnellement</span></h2>\n<p>Pour ceux qui sont convaincus de l'importance du HTML, il existe de nombreuses formations, dont certaines sont intensives et entièrement en ligne, qui vous prépareront à devenir un concepteur web professionnel avec une solide maîtrise du HTML. <strong>Il est recommandé de rechercher des formations reconnues et accréditées pour garantir une éducation de qualité.</strong></p>\n<p> </p>\n<h2 style=\"font-size: 32px;\"><span style=\"color: #000000;\"><strong>L'avis de l'expert SUR HTML</strong></span></h2>\n<blockquote>\n<p><em><span style=\"color: #222222;\">Le HTML est littéralement à la base du développement web puisque c'est lui qui permet de structurer un site internet à l'aide de balises. On l'appelle communément langage de balisage et non de programmation. C'est lui qui vous permettra de construire vos blocs, sections, formulaires, tableaux, etc... C'est un langage délimité, facile d'accès et qu'il faudra connaître pour réaliser tout document web.\"</span></em></p>\n<p style=\"font-weight: bold;\"><span style=\"font-size: var(--body_font_font_size); color: var(--body_font_color);\">Louis Dupas, Head of Devs à la Wild Code School</span></p>\n</blockquote>\n<p> </p>\n<div class=\"hs-embed-wrapper\" data-service=\"youtube\" data-responsive=\"true\" style=\"position: relative; overflow: hidden; width: 100%; height: auto; padding: 0px; max-width: 400px; min-width: 256px; display: block; margin: auto 10px auto 0px; float: left;\"><div class=\"hs-embed-content-wrapper\"><div style=\"position: relative; overflow: hidden; max-width: 100%; padding-bottom: 56.5%; margin: 0px;\"><iframe width=\"200\" height=\"113\" src=\"https://www.youtube.com/embed/YZCNAAf7fUk?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen title=\"Comment devenir développeur web en 2023 ?\" style=\"position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: none;\"></iframe></div></div></div>\n<p> </p>\n<p><span style=\"color: #303f4b;\">Convaincu ? Lancez-vous avec <a href=\"https://www.wildcodeschool.com/fr-fr/formations-developpement-web/formation-developpeur-web-a-distance\" style=\"font-weight: bold;\">le bootcamp de la Wild Code School</a><span style=\"font-weight: bold;\">.</span> Cette formation intensive de 5 mois peut-être suivie à distance. Elle ouvre la voie à une reconversion professionnelle solide pour devenir développeur web.</span></p>\n<p> </p>", "rssSummary" : "<p>Introduit en 1989 par Tim Berners-Lee, le pionnier du World Wide Web, il a été rendu public en 1991 et s'est rapidement imposé comme<span style=\"font-weight: bold;\"> le pilier de la création de sites web</span>. Avec la montée en puissance d'Internet et la nécessité pour les entreprises d'avoir une présence en ligne, la maîtrise du HTML est devenue indispensable pour les concepteurs web, les blogueurs, les marketeurs et de nombreuses autres professions.</p>\n", "rssSummaryFeaturedImage" : "https://2902314.fs1.hubspotusercontent-na1.net/hubfs/2902314/APPRENDRE%20LE%20HTML.png", "scheduledUpdateDate" : 0, "screenshotPreviewTakenAt" : 1734279892116, "screenshotPreviewUrl" : "https://cdn1.hubspot.net/hubshotv3/prod/e/0/493c729f-165c-4250-ba76-177390a92779.png", "sections" : { }, "securityState" : "NONE", "siteId" : null, "slug" : "fr-fr/blog/apprendre-le-html", "stagedFrom" : null, "state" : "PUBLISHED", "stateWhenDeleted" : null, "structuredContentPageType" : null, "structuredContentType" : null, "styleOverrideId" : null, "subcategory" : "normal_blog_post", "syncedWithBlogRoot" : true, "tagIds" : [ 103173212304, 116313955723 ], "tagList" : [ { "categoryId" : 3, "cdnPurgeEmbargoTime" : null, "contentIds" : [ ], "cosObjectType" : "TAG", "created" : 1676890094328, "deletedAt" : 0, "description" : "", "id" : 103173212304, "label" : "Developpement Web", "language" : "fr-fr", "name" : "Developpement Web", "portalId" : 2902314, "slug" : "developpement-web", "translatedFromId" : null, "translations" : { }, "updated" : 1676892318798 }, { "categoryId" : 3, "cdnPurgeEmbargoTime" : null, "contentIds" : [ ], "cosObjectType" : "TAG", "created" : 1684509994814, "deletedAt" : 0, "description" : "", "id" : 116313955723, "label" : "Tips", "language" : "fr-fr", "name" : "Tips", "portalId" : 2902314, "slug" : "tips", "translatedFromId" : null, "translations" : { }, "updated" : 1684509994814 } ], "tagNames" : [ "Developpement Web", "Tips" ], "teamPerms" : [ ], "templatePath" : "", "templatePathForRender" : "MarkentivexWCS/templates/blog-post.html", "textToAudioFileId" : null, "textToAudioGenerationRequestId" : null, "themePath" : null, "themeSettingsValues" : null, "title" : "Apprendre le HTML", "tmsId" : null, "topicIds" : [ 103173212304, 116313955723 ], "topicList" : [ { "categoryId" : 3, "cdnPurgeEmbargoTime" : null, "contentIds" : [ ], "cosObjectType" : "TAG", "created" : 1676890094328, "deletedAt" : 0, "description" : "", "id" : 103173212304, "label" : "Developpement Web", "language" : "fr-fr", "name" : "Developpement Web", "portalId" : 2902314, "slug" : "developpement-web", "translatedFromId" : null, "translations" : { }, "updated" : 1676892318798 }, { "categoryId" : 3, "cdnPurgeEmbargoTime" : null, "contentIds" : [ ], "cosObjectType" : "TAG", "created" : 1684509994814, "deletedAt" : 0, "description" : "", "id" : 116313955723, "label" : "Tips", "language" : "fr-fr", "name" : "Tips", "portalId" : 2902314, "slug" : "tips", "translatedFromId" : null, "translations" : { }, "updated" : 1684509994814 } ], "topicNames" : [ "Developpement Web", "Tips" ], "topics" : [ 103173212304, 116313955723 ], "translatedContent" : { }, "translatedFromId" : null, "translations" : { }, "tweet" : null, "tweetAt" : null, "tweetImmediately" : false, "unpublishedAt" : 0, "updated" : 1705595092503, "updatedById" : 50704370, "upsizeFeaturedImage" : false, "url" : "https://www.wildcodeschool.com/fr-fr/blog/apprendre-le-html", "useFeaturedImage" : true, "userPerms" : [ ], "views" : 0, "visibleToAll" : null, "widgetContainers" : { }, "widgetcontainers" : { }, "widgets" : { } })

Formations Intensives

Formations en alternance

Formations courtes en ligne

Cours gratuits

Formations Intensives

Formations en alternance

Formations courtes en ligne

Cours gratuits

Formations Intensives

Formations en alternance

Cours gratuits

Formations Intensives

Formations en alternance

Formations Intensives

Développement Web

Data & IA

Design

IT & Cybersécurité

Gestion de projet

Se former en alternance

Recruter des alternant•es

Découvrez nos Skill courses

Sessions d’informations en ligne

Journées portes ouvertes

Ateliers en ligne gratuits

Les balises HTML à connaître

Cheat Sheet n°1 :
les balises HTML

Obtenir la cheat sheet

Formations Intensives

Formations en alternance

Formations courtes en ligne

Cours gratuits

Formations Intensives

Formations en alternance

Formations courtes en ligne

Cours gratuits

Formations Intensives

Formations en alternance

Cours gratuits

Formations Intensives

Formations en alternance

Formations Intensives

Se former en alternance

Recruter des alternant•es

Sessions d’informations en ligne

Journées portes ouvertes

Ateliers en ligne gratuits

Les balises HTML à connaître

Cheat Sheet n°1 :les balises HTML

Obtenir la cheat sheet

Ces articles sont susceptibles de vous intéresser

Pourquoi commencer le code par HTML et CSS ?

Faire ses premiers pas en HTML

Apprendre le HTML

Cheat Sheet n°1 :
les balises HTML