{"id":326,"date":"2014-04-06T21:40:33","date_gmt":"2014-04-06T19:40:33","guid":{"rendered":"http:\/\/geekcommunicant.com\/blog\/?p=326"},"modified":"2019-07-24T09:15:40","modified_gmt":"2019-07-24T07:15:40","slug":"comment-marche-le-web","status":"publish","type":"post","link":"https:\/\/geekcommunicant.com\/blog\/2014\/04\/06\/comment-marche-le-web\/","title":{"rendered":"Comment marche le Web ?"},"content":{"rendered":"<p>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&rsquo;avoir lu, vous serez incollables, ou presque, sur les technologies du Web.<\/p>\n<p><a href=\"https:\/\/geekcommunicant.com\/blog\/wp-content\/uploads\/logo_html5.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-327\" src=\"https:\/\/geekcommunicant.com\/blog\/wp-content\/uploads\/logo_html5-300x175.png\" alt=\"HTML, CSS, et JavaScript\" width=\"300\" height=\"175\" srcset=\"https:\/\/geekcommunicant.com\/blog\/wp-content\/uploads\/logo_html5-300x175.png 300w, https:\/\/geekcommunicant.com\/blog\/wp-content\/uploads\/logo_html5-500x292.png 500w, https:\/\/geekcommunicant.com\/blog\/wp-content\/uploads\/logo_html5.png 1024w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><!--more--><\/p>\n<h2>HTML et CSS<\/h2>\n<p>Le HTML est la base du Web. En effet, tout ce que vous visualisez dans votre navigateur pr\u00e9f\u00e9r\u00e9 (personnellement j&rsquo;utilise Firefox) est \u00e9crit en HTML. Le principal but du HTML est d&rsquo;<em>organiser l&rsquo;information<\/em>. M\u00eame si il est important le HTML ne travaille pas seul. Il travaille toujours de pair avec le CSS, qui permet de contr\u00f4ler l&rsquo;<em>affichage de l&rsquo;information<\/em> organis\u00e9e avec HTML.<\/p>\n<p><strong>Quelques informations suppl\u00e9mentaires<\/strong>: HTML en est actuellement \u00e0 sa 5\u00e8me version, CSS sa 3\u00e8me, HTML signifie HyperText Markup Language (langage de balisage hypertexte) et CSS Cascading Style Sheet (feuille de style en cascade).<\/p>\n<h2>Javascript<\/h2>\n<p>Javascript est tr\u00e8s important dans le Web 2.0 d&rsquo;aujourd&rsquo;hui. C&rsquo;est lui qui permet de <em>rendre dynamique une page Web<\/em>. Exemples de situations o\u00f9 JavaScript intervient: menus d\u00e9roulants, volets dynamiques, carrousels\/diaporamas&#8230;<\/p>\n<p>Comme l&rsquo;indique le \u00ab\u00a0script\u00a0\u00bb dans son nom, le JavaScript est un langage de programmation. Et comme beaucoup de langages, il devient rapidement complexe \u00e0 utiliser; c&rsquo;est pour cela qu&rsquo;ont \u00e9t\u00e9 cr\u00e9\u00e9s de nombreuses librairies qui simplifient l&rsquo;\u00e9criture des scripts. Parmis ces librairies on peut trouver <a title=\"jQuery\" href=\"https:\/\/jquery.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">jQuery<\/a>, <a title=\"The Dojo Toolkit\" href=\"https:\/\/dojotoolkit.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Dojo Toolkit<\/a>, ou encore <a title=\"MooTools\" href=\"https:\/\/mootools.net\/\" target=\"_blank\" rel=\"noopener noreferrer\">MooTools<\/a>.<\/p>\n<h2>PHP<\/h2>\n<p><a href=\"https:\/\/geekcommunicant.com\/blog\/wp-content\/uploads\/php-med-trans.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-329\" src=\"https:\/\/geekcommunicant.com\/blog\/wp-content\/uploads\/php-med-trans.png\" alt=\"Logo PHP\" width=\"95\" height=\"51\"><\/a><\/p>\n<p>Sans le savoir, vous avez d\u00e9j\u00e0 eu affaire \u00e0 PHP: sur ce blog, sur Facebook, et sur n&rsquo;importe quel site avec un espace membre. Nous avons vu pr\u00e9c\u00e9demment que le HTML permet d&rsquo;organiser l&rsquo;information, mais cela pour un seul fichier. Essayez d&rsquo;imaginer le travail que demanderai la cr\u00e9ation d&rsquo;une page diff\u00e9rente pour chaque membre d&rsquo;un site, ou pour chaque article d&rsquo;un blog&#8230;<\/p>\n<p>Prenons en exemple mon blog. Chaque article a la m\u00eame apparence, c&rsquo;est parce qu&rsquo;il suffit d&rsquo;un fichier HTML servant de squelette, pour que PHP g\u00e9n\u00e8re une page par article. PHP est l\u00e0 pour aller chercher l&rsquo;information demand\u00e9e par l&rsquo;utilisateur. C&rsquo;est aussi PHP qui intervient pour la gestion des commentaires. Pour simplifier, PHP est l\u00e0 pour <em>g\u00e9rer et tra\u00eeter l&rsquo;information<\/em>. PHP n&rsquo;est pas le seul langage de ce genre utilis\u00e9 sur le Web, mais c&rsquo;est le plus utilis\u00e9.<\/p>\n<p>Voil\u00e0 ! J&rsquo;esp\u00e8re que cet article vous aura permis de mieux comprendre le fonctionnement interne du Web.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&rsquo;avoir lu, vous serez incollables, ou presque, sur les &hellip; <a href=\"https:\/\/geekcommunicant.com\/blog\/2014\/04\/06\/comment-marche-le-web\/\">Continuer la lecture <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","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,31,32],"class_list":["post-326","post","type-post","status-publish","format-standard","hentry","category-pour-les-nuls","tag-css","tag-html","tag-javascript","tag-php"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2IoOb-5g","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":334,"url":"https:\/\/geekcommunicant.com\/blog\/2014\/04\/11\/comment-marche-html\/","url_meta":{"origin":326,"position":0},"title":"Comment marche le HTML ?","author":"geekc","date":"11\/04\/2014","format":false,"excerpt":"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 balise s'\u00e9crit \u00e0 l'aide de chevrons; exemple: <p>. En HTML,\u2026","rel":"","context":"Dans &quot;Pour les nuls&quot;","block_context":{"text":"Pour les nuls","link":"https:\/\/geekcommunicant.com\/blog\/category\/pour-les-nuls\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1085,"url":"https:\/\/geekcommunicant.com\/blog\/2023\/01\/27\/gloubi-tuto-texte-changeant-couleur\/","url_meta":{"origin":326,"position":1},"title":"Gloubi tuto &#8211; texte changeant de couleur","author":"geekc","date":"27\/01\/2023","format":false,"excerpt":"Cette fois-ci encore, j\u2019ai d\u00e9cid\u00e9 de m\u2019attaquer \u00e0 un autre gloubi script d\u2019effet sur texte, le texte changeant de couleur. Une fois de plus, d\u00fb \u00e0 l\u2019\u00e9volution des technologies, plus besoin de JavaScript pour obtenir un r\u00e9sultat identique (ou en tout cas tr\u00e8s proche). Fonctionnement du script On indique au\u2026","rel":"","context":"Dans &quot;CSS&quot;","block_context":{"text":"CSS","link":"https:\/\/geekcommunicant.com\/blog\/category\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1121,"url":"https:\/\/geekcommunicant.com\/blog\/2023\/02\/24\/gloubi-script-cadre-clignotant\/","url_meta":{"origin":326,"position":2},"title":"Gloubi script &#8211; un cadre clignotant","author":"geekc","date":"24\/02\/2023","format":false,"excerpt":"Aujourd\u2019hui, nous allons nous attaquer \u00e0 un script pr\u00e9sent\u00e9 chez notre gloubi rival qui pourra vous \u00eatre tr\u00e8s utile pour mettre en avant n\u2019importe quel contenu sur, par exemple, la magnifique page d\u2019accueil de votre tout aussi sublime site\u00a0: le cadre clignotant. Comme pour d\u2019autres gloubi scripts d\u00e9j\u00e0 pr\u00e9sent\u00e9s, il\u2026","rel":"","context":"Dans &quot;CSS&quot;","block_context":{"text":"CSS","link":"https:\/\/geekcommunicant.com\/blog\/category\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1233,"url":"https:\/\/geekcommunicant.com\/blog\/2024\/05\/07\/flip-card-css\/","url_meta":{"origin":326,"position":3},"title":"Une flip card en CSS","author":"geekc","date":"07\/05\/2024","format":false,"excerpt":"Vous avez toujours voulu savoir comment cr\u00e9er un effet de carte retourn\u00e9e (flip card en anglais) ? Cet article est ce qu\u2019il vous faut ! Le r\u00e9sultat final est disponible ici. Structure HTML Pour commencer, attaquons nous \u00e0 la structure HTML d\u2019une carte. Pour sch\u00e9matiser, une carte se d\u00e9compose comme\u2026","rel":"","context":"Dans &quot;CSS&quot;","block_context":{"text":"CSS","link":"https:\/\/geekcommunicant.com\/blog\/category\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":211,"url":"https:\/\/geekcommunicant.com\/blog\/2013\/08\/11\/amusons-nous-avec-les-canvas\/","url_meta":{"origin":326,"position":4},"title":"[JavaScript\/HTML5] Amusons-nous avec les canvas","author":"geekc","date":"11\/08\/2013","format":false,"excerpt":"Aujourd'hui nous allons voir comment ajouter du texte aux nouveaux \u00e9l\u00e9ments <canvas> du HTML5. Comme les plus attentifs d'entre-vous l'auront d\u00e9j\u00e0 remarqu\u00e9, le titre de l'article r\u00e9v\u00e8le d\u00e9j\u00e0 une partie du contenu de l'article ; effectivement, pour utiliser les canvas, il faut obligatoirement passer par JavaScript. Le HTML La d\u00e9claration\u2026","rel":"","context":"Dans &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":976,"url":"https:\/\/geekcommunicant.com\/blog\/2022\/12\/02\/gloubi-tuto-un-menu-interactif-hello-kitty\/","url_meta":{"origin":326,"position":5},"title":"Gloubi tuto &#8211; un menu interactif Hello Kitty","author":"geekc","date":"02\/12\/2022","format":false,"excerpt":"Bienvenue sur ce premier gloubi tuto (pour en savoir plus sur les gloubi tutos) qui concerne un menu interactif avec Hello Kitty. Pr\u00e9sentation et explication de l\u2019existant Pour voir la source du script actuel, RDV sur cette page du site de notre nouvel adversaire dans la guerre du gloubi. Le\u2026","rel":"","context":"Dans &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/326","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=326"}],"version-history":[{"count":0,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/326\/revisions"}],"wp:attachment":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/media?parent=326"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/categories?post=326"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/tags?post=326"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}