{"id":44505,"date":"2023-06-11T19:00:48","date_gmt":"2023-06-11T23:00:48","guid":{"rendered":"https:\/\/cimbcc.org\/test2\/?p=44505"},"modified":"2023-10-16T22:10:25","modified_gmt":"2023-10-17T02:10:25","slug":"comment-ca-marche-une-page-web","status":"publish","type":"post","link":"https:\/\/cimbcc.org\/test2\/comment-ca-marche-une-page-web\/","title":{"rendered":"Comment \u00e7a marche une page web ?"},"content":{"rendered":"
\"\"
mnm<\/span>Robert Lapointe<\/figcaption><\/figure>\n

Le pr\u00e9sent article est destin\u00e9 \u00e0 toute personne curieuse d\u00e9sirant d\u00e9mystifier le fonctionnement d’une page web afin d’obtenir une compr\u00e9hension simple de ce qu\u2019elle repr\u00e9sente techniquement.<\/p>\n

Il faut d\u2019abord cr\u00e9er cette page en langage de programmation HTML<\/a> (HyperText Markup Language)<\/em>. On peut obtenir plus de fonctionnalit\u00e9s avanc\u00e9es en ajoutant du codage CSS,<\/a> Java<\/a>, JavaScript<\/a> et PHP<\/a>. Ainsi, on obtient un site web avec des pages soutenant le mode r\u00e9actif (responsive)<\/em> qui permet l\u2019adaptation selon le type d\u2019appareil utilis\u00e9, PC, Mac, iPad, tablette, iPhone ou smartphone.<\/p>\n

<\/p>\n

Il est possible de cr\u00e9er le codage HTML \u00e0 la mitaine, mais m\u00eame les pros et les amateurs modernes ne font pas ceci pour des raisons de performance. Des logiciels de cr\u00e9ation de sites web et \u00e9diteurs avanc\u00e9s co\u00fbteux, comme Dreamweaver<\/a> sur PC Windows ou MacOS, sont utilis\u00e9s par les pros. De m\u00eame pour \u00a0WordPress<\/a>, un logiciel infonuagique puissant, libre et gratuit sur serveur qui facilite la cr\u00e9ation de pages web ainsi que beaucoup de fonctions int\u00e9ressantes, notamment l\u2019int\u00e9gration de vid\u00e9os, des menus, des rubriques, des bases de donn\u00e9es, etc. Il y a une foule d\u2019autres logiciels disponibles sur une multitude de plateformes tels que Joomla!<\/a> et Drupal<\/a>.<\/p>\n

Il y a en plus des logiciels WYSIWYG<\/a> (What You See Is What You Get)<\/em> dits faciles, comme Lauyan ToWeb<\/a> pour Windows ou MacOS. Ceux-ci existent pour les personnes qui, comme moi, ne veulent pas se pr\u00e9occuper des codages HTML, CSS, JAVA et PHP. Il est possible de cr\u00e9er facilement un site web simple, dit une vitrine<\/em>, un site multilingue ou un site plus \u00e9volu\u00e9 poss\u00e9dant une base de donn\u00e9es de produits \u00e0 vendre en ligne avec un panier d\u2019achats en mode eCommerce<\/a>.<\/p>\n

Ainsi, une page web contient du codage HTML, mais d\u2019autres codages additionnels peuvent s\u2019ajouter comme du CSS, du Java ou une page web cod\u00e9e en PHP ! Un codage source<\/em> est cr\u00e9\u00e9 dans un ordinateur personnel ou sur serveur infonuagique pour \u00eatre par la suite publi\u00e9 dans l\u2019espace web du serveur.<\/p>\n

Contrairement aux codages COBOL<\/a>, Fortran<\/a> et autres langages semblables qui doivent \u00eatre compil\u00e9s<\/a> dans les ordinateurs principaux (mainframes<\/a>)<\/em>, le code HTML n\u2019a pas \u00e0 \u00eatre compil\u00e9 en codage machine binaire dans les serveurs. C\u2019est le r\u00f4le du navigateur web (browser)<\/em> d\u2019interpr\u00e9ter<\/a> le code HTML transmis par le site serveur. Les navigateurs web<\/a> sont capables d\u2019interpr\u00e9ter les codages HTML, CSS et JAVA. Dans le cas du codage en PHP d\u2019une page, celui-ci doit \u00eatre interpr\u00e9t\u00e9 par le serveur lors de la requ\u00eate et le tout transmis en HTML vers le navigateur web.<\/p>\n

\"\"<\/p>\n

Les pr\u00e9requis pour un site web sont de s\u2019assurer d\u2019\u00eatre titulaire d\u2019un nom de domaine<\/a> d\u2019un registraire autoris\u00e9 et, ensuite, de louer un espace de stockage et de service chez un h\u00e9bergeur web<\/a>.<\/p>\n

Est-ce facile de faire tout ceci ? Disons que oui, mais cela exige des efforts et une certaine aisance avec les techniques. En principe, tout un chacun peut le faire ! Parfois \u00e0 co\u00fbt modique, comme dans mon cas pour une modique somme de 75 $ par ann\u00e9e ! Et en prime, il est facile de cr\u00e9er sa propre adresse courriel sans co\u00fbt additionnel.<\/p>\n

Concevoir un site web n\u2019exige pas uniquement quelques connaissances techniques, mais aussi trois autres choses :<\/p>\n

    \n
  1. un sens artistique,<\/li>\n
  2. du contenu informatif et int\u00e9ressant,<\/li>\n
  3. de la convivialit\u00e9.<\/li>\n<\/ol>\n

    En 2023, tout site web s\u00e9rieux doit assurer sa configuration de s\u00e9curit\u00e9 en mode HyperText Transfer Protocol Secure\u00a0 (HTTPS<\/a>)<\/em>. Ceci est un premier signe du s\u00e9rieux du site par son implantation d\u2019une communication s\u00e9curis\u00e9e. L\u2019h\u00f4te web des fournisseurs d’h\u00e9bergement web propose de nos jours cette option de configuration HTTPS. Sinon, on peut demander un certificat SSL\/TLS<\/a> aupr\u00e8s d’une autorit\u00e9 de certification et l’installer soi-m\u00eame. Mais attention, un site HTTPS n\u2019est pas une garantie absolue contre la malfaisance ou l\u2019arnaque. HTTPS tente d\u2019assurer la confidentialit\u00e9 et la s\u00e9curit\u00e9 entre les deux parties.<\/p>\n

    Avant tout, l\u2019utilisateur doit aller naviguer sur un site ayant un nom de domaine pr\u00e9cis, connu et de bonne r\u00e9f\u00e9rence. Il faut notamment se m\u00e9fier des noms de domaine ayant une ressemblance avec un domaine connu pouvant leurrer l\u2019utilisateur. Il faut porter attention lorsque la r\u00e9f\u00e9rence \u00e0 un site web est offerte via un bouton ou un lien titr\u00e9. Dans ce cas, il faut examiner l\u2019adresse URL<\/a> dans la barre d\u2019adresse du navigateur avant de poursuivre.<\/p>\n

    J\u2019ai appris les bases du codage en langage HTML en programmant \u00e0 la mitaine ma premi\u00e8re page HTML lors d\u2019un cours d\u2019une \u00e9cole priv\u00e9e un bon samedi de 1995 \u00e0 Montr\u00e9al. Par la suite, au courant des ann\u00e9es, je me suis initi\u00e9 \u00e0 FrontPage<\/a> et Dreamweaver<\/a>. Par apr\u00e8s, j\u2019ai introduit en 1999 et 2003 mes deux sites web commerciaux. En 2008, j\u2019ai commenc\u00e9 \u00e0 cr\u00e9er b\u00e9n\u00e9volement des sites web pour mes amis et organismes OBNL avec ToWeb<\/a> de Lauyan Software. Mais, il faut noter que j\u2019ai fait carri\u00e8re en technologie de l\u2019information, en r\u00e9seaux de grandes port\u00e9es et en r\u00e9seaux TCP\/IP<\/a>. J\u2019ai en plus \u0153uvr\u00e9 dans de multiples autres domaines et fonctions.<\/p>\n

    Illustrons simplement la cr\u00e9ation d\u2019une page HTML. De nos jours, elle est normalement cr\u00e9\u00e9e par des logiciels d\u2019\u00e9diteurs sp\u00e9cialis\u00e9s. Mais pour fin d\u2019illustrer simplement le code HTML, il est possible de cr\u00e9er une page web simple en utilisant un logiciel gratuit simple KompoZer<\/a>.<\/p>\n

    Ci-dessous, voici la conception d\u2019une page qui contient \u00ab Hello World \u00bb comme texte ainsi qu\u2019une image int\u00e9gr\u00e9e sur un fond de page en couleur dans KompoZer.<\/p>\n

    \"\"<\/a>
    Cliquez sur l’image pour l’agrandir<\/figcaption><\/figure>\n

    Voici maintenant le codage HTML r\u00e9sultant :<\/p>\n

    <html><\/strong><\/span>
    \n<head><\/span>
    \n<meta content=\u00a0\u00bbtext\/html; charset=ISO-8859-1″<\/span>
    \nhttp-equiv=\u00a0\u00bbcontent-type\u00a0\u00bb><\/span>
    \n<title>HTML Hello World<\/strong><\/title><\/span>
    \n<\/head><\/span>
    \n<body style=\u00a0\u00bbcolor: rgb(0, 0, 0); background-color<\/strong>: rgb(255, 255, 255);\u00a0\u00bb<\/span>
    \nalink=\u00a0\u00bb#000099″ link=\u00a0\u00bb#000099″ vlink=\u00a0\u00bb#990099″><\/span>
    \n<div style=\u00a0\u00bbtext-align: center; background-color: rgb(51, 255, 255);\u00a0\u00bb><br><\/span>
    \n<br><\/span>
    \n<big style=\u00a0\u00bbcolor: rgb(153, 0, 0);\u00a0\u00bb><big><big>HELLO WORLD !<br><\/span>
    \n<br><\/span>
    \n<\/big><\/big><\/big><br><\/span>
    \n<img style=\u00a0\u00bbwidth: 1260px; height: 240px;\u00a0\u00bb alt=\u00a0\u00bbImage 1″<\/span>
    \nsrc=\u00a0\u00bb..\/..\/..\/image_entete_cimbcc_2020.jpg<\/strong>\u00ab\u00a0><br><\/span>
    \n<br><\/span>
    \n<br><\/span>
    \n<br><\/span>
    \n<\/div><\/span>
    \n<\/body><\/span>
    \n<\/html><\/strong><\/span><\/p>\n

    Si vous cliquez ici<\/a>, vous verrez une courte vid\u00e9o de 5 minutes pour vous montrer comment nous pouvons examiner le codage HTML complexe de toute page web en cliquant CRTL U dans la fen\u00eatre du navigateur. J\u2019examine trois sites, dont le site web du CIMBCC, mon site web personnel et celui de la Fondation PGL (Pierre G\u00e9rin-Lajoie).<\/p>\n

    Vous pouvez visualiser les pages HTML de mon site web personnel https:\/\/robertlapointe.ca<\/a> qui fut con\u00e7u et r\u00e9alis\u00e9 gr\u00e2ce au logiciel ToWeb version 11 de Lauyan Software de France. Tout ceci sans que je n\u2019aie \u00e0 cr\u00e9er aucune ligne de code HTML (ToWeb s\u2019en charge) en utilisant un des mod\u00e8les de choix de site web fournis que je personnalise et simplement en ajoutant du contenu.<\/p>\n

    Je compte pr\u00e9senter bient\u00f4t en vid\u00e9o ce logiciel ToWeb pour PC ou Mac, son fonctionnement, ses possibilit\u00e9s, ses limitations et avantages par rapport \u00e0 la solution infonuagique WordPress.<\/p>\n

    Finalement, est-ce facile de programmer un site web ou une page web ? OUI et NON. La r\u00e9ponse : rien n\u2019est compl\u00e8tement facile et il faut \u00eatre motiv\u00e9 !<\/p>\n

    J\u2019esp\u00e8re que cette publication vous aidera \u00e0 comprendre et vous fournira un aper\u00e7u \u00e9clairant sur le sujet.<\/p>\n

    Robert Lapointe<\/p>\n","protected":false},"excerpt":{"rendered":"

    Le pr\u00e9sent article est destin\u00e9 \u00e0 toute personne curieuse d\u00e9sirant d\u00e9mystifier le fonctionnement d’une page web afin d’obtenir une compr\u00e9hension simple de ce qu\u2019elle repr\u00e9sente techniquement. Il faut d\u2019abord cr\u00e9er cette page en langage de programmation HTML (HyperText Markup Language). On peut obtenir plus de fonctionnalit\u00e9s avanc\u00e9es en ajoutant du codage CSS, Java, JavaScript et … Continuer la lecture de Comment \u00e7a marche une page web ?<\/span> →<\/span><\/a><\/p>\n","protected":false},"author":43,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1594],"tags":[1852,1851,1828,1853,1854,1857,1859,575,1855,1856],"class_list":["post-44505","post","type-post","status-publish","format-standard","hentry","category-chronique-technique","tag-css","tag-html","tag-https","tag-java","tag-javascript","tag-kompozer","tag-lauyan-software","tag-page-web","tag-php","tag-toweb"],"_links":{"self":[{"href":"https:\/\/cimbcc.org\/test2\/wp-json\/wp\/v2\/posts\/44505","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cimbcc.org\/test2\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cimbcc.org\/test2\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cimbcc.org\/test2\/wp-json\/wp\/v2\/users\/43"}],"replies":[{"embeddable":true,"href":"https:\/\/cimbcc.org\/test2\/wp-json\/wp\/v2\/comments?post=44505"}],"version-history":[{"count":16,"href":"https:\/\/cimbcc.org\/test2\/wp-json\/wp\/v2\/posts\/44505\/revisions"}],"predecessor-version":[{"id":44538,"href":"https:\/\/cimbcc.org\/test2\/wp-json\/wp\/v2\/posts\/44505\/revisions\/44538"}],"wp:attachment":[{"href":"https:\/\/cimbcc.org\/test2\/wp-json\/wp\/v2\/media?parent=44505"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cimbcc.org\/test2\/wp-json\/wp\/v2\/categories?post=44505"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cimbcc.org\/test2\/wp-json\/wp\/v2\/tags?post=44505"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}