{"id":1398,"date":"2026-02-05T19:49:09","date_gmt":"2026-02-05T19:49:09","guid":{"rendered":"https:\/\/mytribu.fr\/cmopc\/?p=1398"},"modified":"2026-02-05T19:49:47","modified_gmt":"2026-02-05T19:49:47","slug":"decouverte-du-html","status":"publish","type":"post","link":"http:\/\/mytribu.fr\/cmopc\/decouverte-du-html\/","title":{"rendered":"D\u00e9couverte du HTML"},"content":{"rendered":"\n

D\u00e9couverte du HTML \u2013 S\u00e9ance 1 (1h)<\/h2>\n\n

Objectif de la s\u00e9ance<\/h3>\n

Cette s\u00e9ance a pour objectif de vous faire d\u00e9couvrir les bases du HTML<\/strong>, le langage utilis\u00e9 pour structurer le contenu des pages web. \u00c0 l\u2019issue de cette s\u00e9ance, vous serez capables de comprendre la structure minimale d\u2019une page HTML et de cr\u00e9er votre premi\u00e8re page web.<\/p>\n\n

\n\n

Qu\u2019est-ce que le HTML ?<\/h3>\n

Le HTML (HyperText Markup Language)<\/strong> est un langage qui permet de structurer le contenu<\/strong> d\u2019une page web.<\/p>\n

Il est utilis\u00e9 pour :<\/p>\n

    \n
  • organiser le texte (titres, paragraphes),<\/li>\n
  • cr\u00e9er des liens,<\/li>\n
  • ins\u00e9rer des images.<\/li>\n<\/ul>\n

    Le HTML ne g\u00e8re ni la mise en forme graphique<\/strong>, ni les interactions avanc\u00e9es. Il est interpr\u00e9t\u00e9 par un navigateur web<\/strong> (Chrome, Firefox, Edge, Safari\u2026).<\/p>\n\n

    \n\n

    Structure minimale d\u2019une page HTML<\/h3>\n

    Toute page HTML repose sur une structure fixe, indispensable \u00e0 son bon fonctionnement.<\/p>\n\n

    <html>\n  <head>\n    <title>Titre de la page<\/title>\n  <\/head>\n\n  <body>\n    Hello world !!!\n  <\/body>\n<\/html>\n<\/code><\/pre>\n\n
    R\u00f4le des balises principales<\/h4>\n
      \n  
    • <html><\/code> : d\u00e9limite le document HTML<\/li>\n  
    • <head><\/code> : contient les informations g\u00e9n\u00e9rales (non visibles)<\/li>\n  
    • <title><\/code> : titre affich\u00e9 dans l\u2019onglet du navigateur<\/li>\n  
    • <body><\/code> : contenu visible de la page<\/li>\n<\/ul>\n\n
      \n\n
      Premi\u00e8res balises de texte<\/h3>\n
      <strong>Hello World<\/strong><br>\n<i>Ceci est ma premi\u00e8re page<\/i>\n<\/code><\/pre>\n\n
        \n  
      • <strong><\/code> : met en valeur un texte important<\/li>\n  
      • <i><\/code> : affiche le texte en italique<\/li>\n  
      • <br><\/code> : retour \u00e0 la ligne<\/li>\n<\/ul>\n\n
        R\u00e8gle importante :<\/strong> la majorit\u00e9 des balises fonctionnent par paire : une balise ouvrante et une balise fermante.<\/p>\n\n
        \n\n
        Cr\u00e9er un fichier HTML<\/h3>\n
        \u00c9tapes \u00e0 suivre<\/h4>\n
          \n  
        1. Ouvrir un \u00e9diteur de texte (TextEdit sur Mac, Bloc-notes sur Windows)<\/li>\n  
        2. \u00c9crire le code HTML<\/li>\n  
        3. Enregistrer le fichier avec l\u2019extension .html<\/code> (ex. : index.html<\/code>)<\/li>\n  
        4. Ouvrir le fichier dans un navigateur web<\/li>\n<\/ol>\n\n
          \n\n
          Exemple complet fonctionnel<\/h3>\n
          <html>\n<head>\n  <title>Ma premi\u00e8re page HTML<\/title>\n<\/head>\n\n<body>\n  <h1>Bienvenue<\/h1>\n  <p>Ceci est une page HTML simple.<\/p>\n  <strong>Hello world<\/strong><br>\n  <i>Ceci est ma premi\u00e8re page HTML<\/i>\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n
          \n\n
          10 balises HTML \u00e0 tester<\/h3>\n\n
          Balises fonctionnant par paire<\/h4>\n
            \n  
          • <h1> ... <\/h1><\/code> : titre principal<\/li>\n  
          • <h2> ... <\/h2><\/code> : sous-titre<\/li>\n  
          • <p> ... <\/p><\/code> : paragraphe<\/li>\n  
          • <strong> ... <\/strong><\/code> : texte important<\/li>\n  
          • <i> ... <\/i><\/code> : italique<\/li>\n  
          • <a href=\"...\"> ... <\/a><\/code> : lien hypertexte<\/li>\n  
          • <ul> ... <\/ul><\/code> : liste non ordonn\u00e9e<\/li>\n  
          • <li> ... <\/li><\/code> : \u00e9l\u00e9ment de liste<\/li>\n<\/ul>\n\n
            Balises sans balise de fermeture<\/h4>\n
              \n  
            • <br><\/code> : retour \u00e0 la ligne<\/li>\n  
            • <img src=\"image.jpg\" alt=\"description\"><\/code> : image<\/li>\n<\/ul>\n\n
              Remarque :<\/strong> ces deux balises s\u2019\u00e9crivent en une seule fois<\/strong>.<\/p>\n\n
              \n\n
              \u00c0 retenir<\/h3>\n
                \n  
              • Le HTML structure le contenu d\u2019une page web<\/li>\n  
              • Une page web est un fichier texte avec l\u2019extension .html<\/code><\/li>\n  
              • Tout ce qui est visible se trouve dans <body><\/code><\/li>\n  
              • Certaines balises ne fonctionnent pas par paire<\/li>\n  
              • Le navigateur interpr\u00e8te automatiquement le code HTML<\/li>\n<\/ul>\n\n
                Pour aller plus loin<\/h3>\n
                Lors des prochaines s\u00e9ances, nous verrons : la structuration d\u2019un document (titres, sections), la cr\u00e9ation de liens entre pages, et l\u2019int\u00e9gration d\u2019images et de m\u00e9dias.<\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1398","post","type-post","status-publish","format-standard","hentry","category-non-classe","comments-off"],"_links":{"self":[{"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/posts\/1398","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/comments?post=1398"}],"version-history":[{"count":2,"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/posts\/1398\/revisions"}],"predecessor-version":[{"id":1400,"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/posts\/1398\/revisions\/1400"}],"wp:attachment":[{"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/media?parent=1398"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/categories?post=1398"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/tags?post=1398"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}