{"id":334,"date":"2014-04-11T11:48:31","date_gmt":"2014-04-11T09:48:31","guid":{"rendered":"http:\/\/geekcommunicant.com\/blog\/?p=334"},"modified":"2019-04-20T18:03:18","modified_gmt":"2019-04-20T16:03:18","slug":"comment-marche-html","status":"publish","type":"post","link":"https:\/\/geekcommunicant.com\/blog\/2014\/04\/11\/comment-marche-html\/","title":{"rendered":"Comment marche le HTML ?"},"content":{"rendered":"\n

Comme vu pr\u00e9c\u00e9demment<\/a> le HTML est un des piliers du Web. Nous allons voir ici comment \u00e7a marche.<\/p>\n\n\n\n

Les balises<\/h2>\n\n\n\n

La base du HTML est le principe de balises<\/em>. Une balise est l\u00e0 pour d\u00e9limiter une zone. en HTML, une balise s’\u00e9crit \u00e0 l’aide de chevrons; exemple: <p><\/code>.<\/p>\n\n\n\n

En HTML, sauf exception, les balises fonctionnent par paire: une balise ouvrante<\/em>, et une balise fermante<\/em>; exemple: <p><\/p><\/code>.<\/p>\n\n\n\n\n\n\n\n

La structure d’un document HTML<\/h2>\n\n\n\n

Voici le moment tant attendu, la d\u00e9couverte de la v\u00e9ritable apparence d’un fichier HTML:<\/p>\n\n\n

\n<!DOCTYPE html>\n<head lang="fr">\n    <meta charset="UTF-8">\n    <title>Mon premier fichier HTML<\/title>\n<\/head>\n<body>\n    <p>Bonjour le monde !<\/p>\n<\/body>\n<\/html>\n<\/pre><\/div>\n\n\n
Dans cet exemple extr\u00eament simple, nous distingons les trois zones importante d’un fichier HTML:<\/p>\n\n\n\n
  1. la zone d\u00e9limit\u00e9e par <html><\/code> et <\/html><\/code>, elle correspond tout simplement \u00e0 tout notre document, sans elle, pas de fichier<\/li>
  2. ensuite vient la zone d’ent\u00eate, d\u00e9limit\u00e9e par <head><\/code> et <\/head><\/code> ; cette zone contient des \u00e9l\u00e9ments n’\u00e9tant pas affich\u00e9s dans la zone principale du navigateur, comme le titre (<title><\/code><\/title><\/code>) de la page, qui apparait dans l’onglet<\/li>
  3. ensuite vient la partie principale de notre document, le corps (body<\/em> en anglais).<\/li><\/ol>\n\n\n\n
    Les attributs<\/h2>\n\n\n
    \n<p id="par01" class="par">Blablabla<\/p>\n<\/pre><\/div>\n\n\n
    Dans l’exemple ci-dessus, id<\/em> et class<\/em> sont ce qu’on appelle des attributs. Ils permettent de pr\u00e9ciser quelques param\u00e8tres.<\/p>\n\n\n\n
    id<\/em> et class<\/em> sont deux attributs tr\u00e8s importants pour le CSS et le Javascript. id<\/em> permet de distinguer un \u00e9l\u00e9ment de la page unique, class<\/em> permet de distinguer un ensemble d’\u00e9l\u00e9ments. Exemple avec des balises fictives:<\/p>\n\n\n
    \n<voiture class="renault" id="clio"><\/voiture>\n<voiture class="renault" id="m\u00e9gane"><\/voiture>\n<voiture class="renault" id="espace"><\/voiture>\n<voiture class="peugeot" id="408"><\/voiture>\n<voiture class="peugeot" id="208"><\/voiture>\n<\/pre><\/div>\n\n\n
    Comment rendre \u00e7a plus beau<\/h2>\n\n\n\n
    Copiez mon premier exemple de code, collez le dans Notepad, et enregistez le avec l’extension .html<\/em>, puis ouvrez le avec votre navigateur.<\/p>\n\n\n\n
    C’est fait ? Alors, que pensez-vous du r\u00e9sultat ? C’est vraiment pas beau… Et c’est normal, car pour g\u00e9rer l’affichage de vos site, HTML ne travaille pas seul ; en effet, il est aid\u00e9 par son compagnon de toujours, CSS.<\/p>\n\n\n\n
    Avant de vous expliquer le principe, laissez moi vous montrer un extrait de fichier CSS:<\/p>\n\n\n
    \np {\n    margin-left: 15px;\n}\n\n#wrapper {\n    width: 900px;\n    margin-left: auto;\n    margin-right: auto;\n}\n\n.tile {\n    float: left;\n}\n<\/pre><\/div>\n\n\n
    Le principe est simple: on pr\u00e9cise l’\u00e9l\u00e9ment ou l’ensemble d’\u00e9l\u00e9ments sur lequel agir, puis entre accolades on pr\u00e9cise les propri\u00e9t\u00e9s sur lesquelles on veut agir. Dans cet exemple on peut voir trois fa\u00e7ons de d\u00e9signer un \u00e9l\u00e9ment ou un ensemble d’\u00e9l\u00e9ments:<\/p>\n\n\n\n
    1. toutes les balises d’un certain type (ici, les balises de paragraphe <p><\/p><\/code><\/li>
    2. une balise avec un id<\/em> pr\u00e9cis (ici, l’\u00e9l\u00e9ment avec l’id<\/em> \u00ab\u00a0wrapper\u00a0\u00bb)<\/li>
    3. toutes les balises avec une classe pr\u00e9cise (ici, la classe \u00ab\u00a0tile\u00a0\u00bb)<\/li><\/ol>\n","protected":false},"excerpt":{"rendered":"
      Comme vu pr\u00e9c\u00e9demment le HTML est un des piliers du Web. Nous allons voir ici comment \u00e7a marche. Les balises La base du HTML est le principe de balises. Une balise est l\u00e0 pour d\u00e9limiter une zone. en HTML, une … Continuer la lecture →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[28],"tags":[30,29],"class_list":["post-334","post","type-post","status-publish","format-standard","hentry","category-pour-les-nuls","tag-css","tag-html"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2IoOb-5o","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":785,"url":"https:\/\/geekcommunicant.com\/blog\/2019\/05\/27\/corriger-titres-yoast-seo\/","url_meta":{"origin":334,"position":0},"title":"Corriger les titres Yoast SEO","author":"geekc","date":"27\/05\/2019","format":false,"excerpt":"Si vous utilisez Yoast SEO sur votre site WordPress pour g\u00e9rer les balises n\u00e9cessaires au bon r\u00e9f\u00e9rencement de vos contenus, vous pouvez rencontrer ce genre de probl\u00e8me\u00a0: Quels que soient les r\u00e9glages que vous choisissez pour votre titre, des \u00e9l\u00e9ments non voulus apparaissent \u00e0 la fin de celui-ci. Yoast serait-il\u2026","rel":"","context":"Dans "PHP"","block_context":{"text":"PHP","link":"https:\/\/geekcommunicant.com\/blog\/category\/php\/"},"img":{"alt_text":"Mauvais titre SEO","src":"https:\/\/i0.wp.com\/geekcommunicant.com\/blog\/wp-content\/uploads\/mauvais_titre_seo.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/geekcommunicant.com\/blog\/wp-content\/uploads\/mauvais_titre_seo.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/geekcommunicant.com\/blog\/wp-content\/uploads\/mauvais_titre_seo.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":778,"url":"https:\/\/geekcommunicant.com\/blog\/2019\/05\/13\/enlever-meta-generator-wordpress\/","url_meta":{"origin":334,"position":1},"title":"Enlever la balise meta \u00ab\u00a0generator\u00a0\u00bb sur votre site WordPress","author":"geekc","date":"13\/05\/2019","format":false,"excerpt":"Je sais qu\u2019il y a quelque temps, j\u2019avais fait un article sur comment rajouter une balise meta \u00ab\u00a0generator\u00a0\u00bb \u00e0 un site MODX, mais cette balise peut remettre en question la s\u00e9curit\u00e9 de votre site. Une faille de s\u00e9curit\u00e9\u00a0? Conna\u00eetre le CMS derri\u00e8re un site peut faciliter la vie \u00e0 toute\u2026","rel":"","context":"Dans "PHP"","block_context":{"text":"PHP","link":"https:\/\/geekcommunicant.com\/blog\/category\/php\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":790,"url":"https:\/\/geekcommunicant.com\/blog\/2019\/05\/20\/carte-interactive-svg-tooltip\/","url_meta":{"origin":334,"position":2},"title":"Carte interactive en SVG avec tooltip","author":"geekc","date":"20\/05\/2019","format":false,"excerpt":"Apr\u00e8s la premi\u00e8re version de ma carte interactive (voir ici), j\u2019en ai cr\u00e9\u00e9 une deuxi\u00e8me \u00e0 l\u2019aide de la librairie OpenLayers. Cette solution fonctionne, mais c\u2019est comme disposer d'un outil multifonction mais d'en n'utiliser qu'une ou deux, OpenLayers \u00e9tant une librairie permettant de faire beaucoup plus. Une autre solution un\u2026","rel":"","context":"Dans "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/geekcommunicant.com\/blog\/wp-content\/uploads\/svg-map-style.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":1096,"url":"https:\/\/geekcommunicant.com\/blog\/2023\/02\/03\/fenetre-modale-javascript-natif\/","url_meta":{"origin":334,"position":3},"title":"Une fen\u00eatre modale en JavaScript natif","author":"geekc","date":"03\/02\/2023","format":false,"excerpt":"Aujourd\u2019hui, nouveau retour sur un de mes anciens tutoriels qui a rencontr\u00e9 un certain succ\u00e8s, mon tutoriel sur comment faire une fen\u00eatre modale avec jQuery. Depuis maintenant \u00e0 peu pr\u00e8s un an, tous les navigateurs majeurs supportent la balise 
       qui permet de cr\u00e9er des fen\u00eatres modales (\u00e7a \u00e7a tombe\u2026","rel":"","context":"Dans "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":370,"url":"https:\/\/geekcommunicant.com\/blog\/2014\/07\/07\/ajouter-meta-generator-modx-revolution\/","url_meta":{"origin":334,"position":4},"title":"Ajouter une m\u00e9ta \u00ab\u00a0generator\u00a0\u00bb \u00e0 MODX Revolution","author":"geekc","date":"07\/07\/2014","format":false,"excerpt":"J'ai longtemps cherch\u00e9 \u00e0 rajouter la balise m\u00e9ta \"generator\" \u00e0 mon MODX Revolution, et en fouillant la foisonnante doc de MODX j'ai enfin trouv\u00e9 une solution. Ma solution utilise un snippet (pour aller chercher le num\u00e9ro de version), et un chunk (pour mettre le tout en HTML). Le snippet Le\u2026","rel":"","context":"Dans "MODX"","block_context":{"text":"MODX","link":"https:\/\/geekcommunicant.com\/blog\/category\/modx\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":326,"url":"https:\/\/geekcommunicant.com\/blog\/2014\/04\/06\/comment-marche-le-web\/","url_meta":{"origin":334,"position":5},"title":"Comment marche le Web ?","author":"geekc","date":"06\/04\/2014","format":false,"excerpt":"Vous vous \u00eates toujours demand\u00e9 quelle diff\u00e9rence il pouvait y avoir entre le HTML et le PHP, entre le CSS et le JavaScript ? Cet article est fait pour vous. Apr\u00e8s l'avoir lu, vous serez incollables, ou presque, sur les technologies du Web. HTML et CSS Le HTML est la\u2026","rel":"","context":"Dans "Pour les nuls"","block_context":{"text":"Pour les nuls","link":"https:\/\/geekcommunicant.com\/blog\/category\/pour-les-nuls\/"},"img":{"alt_text":"HTML, CSS, et JavaScript","src":"https:\/\/i0.wp.com\/geekcommunicant.com\/blog\/wp-content\/uploads\/logo_html5-300x175.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/334","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/comments?post=334"}],"version-history":[{"count":0,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/334\/revisions"}],"wp:attachment":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/media?parent=334"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/categories?post=334"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/tags?post=334"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}