Computer Sciences
Les trucs du prof d'info
Computer Sciences
Les trucs du prof d'info

01 – Fonctionnement Fondamental des Sites Web

Web & HTML – Fonctionnement Fondamental des Sites Web

Module 1: Introduction au Fonctionnement des Sites Web

Introduction

Bonjour et bienvenue à toutes et à tous !
Voici donc le premier chapitre de ce cours, qui va vous apprendre à créer votre site web !
Nous allons passer un certain temps ensemble, tout dépendra de la vitesse à laquelle vous apprendrez.
Je vous propose de commencer par la question la plus simple mais aussi la plus importante :
Comment fonctionnent les sites web ?

Utilisation

Non, n’ayez pas peur de poser des questions, même si vous pensez qu’elles sont «bêtes». Il est très important que nous en parlions un peu avant de nous lancer à fond dans la création de sites !
Je suis certain que vous consultez des sites web tous les jours. Pour cela, vous lancez un programme appelé le navigateur web, en cliquant sur l’une des icônes représentées à la figure suivante.

file

Imaginez que chaque site web est comme une pièce unique dans une immense bibliothèque en ligne. Chaque pièce a sa propre histoire à raconter et ses propres caractéristiques.

Explications

Les sites web sont comme des espaces virtuels où l’information est stockée et présentée de manière organisée. Ils sont construits à l’aide de langages de programmation tels que HTML, CSS et JavaScript. Si le web était une maison, ces langages seraient les briques, la peinture et les mécanismes qui la rendent fonctionnelle et attrayante.

Définitions

  • Site Web: Un ensemble de pages web liées entre elles, accessible via une adresse URL.
  • HTML: Langage de balisage utilisé pour créer la structure d’une page web.
  • CSS: Langage de style permettant de définir l’apparence des éléments d’une page web.
  • JavaScript: Langage de programmation utilisé pour rendre les pages web interactives.

Exemple

Exemple : Pensez à un site web que vous visitez fréquemment. Imaginez-vous comme un explorateur virtuel naviguant à travers ses pages.

Exercice : Essayez de lister les différentes sections ou pages que vous trouvez sur ce site et réfléchissez à la manière dont elles sont organisées.

\pagebreak

Module 2: Architecture d’un Site Web

Introduction

Maintenant que nous avons exploré les bases, plongeons-nous dans la structure même d’un site web. Imaginez-le comme une maison virtuelle avec ses fondations, ses murs et sa décoration.

Utilisation

Pensez à un site web comme à une maison. La structure, les couleurs et les décorations reflètent la personnalité du propriétaire.

Explications

Un site web est construit avec différentes langues, chacune ayant un rôle spécifique. HTML crée la structure, CSS donne du style, et JavaScript ajoute de l’interactivité. C’est comme si vous construisiez une maison avec des plans, des couleurs et des interrupteurs intelligents.

Avec le navigateur, vous pouvez consulter n’importe quel site web. Voici par exemple un navigateur affichant le célèbre site web Wikipédia :
file

Je suis sûr que vous avez l’habitude d’utiliser un navigateur web ! Aujourd’hui, tout le monde sait aller sur le Web… mais qui sait vraiment comment le Web fonctionne ? Comment créer des sites web comme celui-ci ?
J’ai entendu parler de HTML, de CSS, est-ce que cela a un rapport avec le fonctionnement des sites web ?

Tout à fait !

Il s’agit de langages informatiques qui permettent de créer des sites web. Tous les sites web sont basés sur ces langages, ils sont incontournables et universels aujourd’hui. Ils sont la base même du Web. Le langage HTML a été inventé par un certain Tim Berners-Lee en 1991…

Tim Berners-Lee suit encore aujourd’hui avec attention l’évolution du Web. Il a créé le World Wide Web Consortium (W3C), qui définit les nouvelles versions des langages liés au Web. Il a par ailleurs créé plus récemment la World Wide Web Foundation, qui analyse et suit l’évolution du Web.
De nombreuses personnes confondent (à tort) Internet et le Web. Il faut savoir que le Web fait partie d’Internet.
Internet est un grand ensemble qui comprend, entre autres : le Web, les e-mails, la messagerie instantanée, etc.

Tim Berners-Lee n’est donc pas l’inventeur d’Internet, c’est « seulement » l’inventeur du Web.
Les langages HTML et CSS sont à la base du fonctionnement de tous les sites web. Quand vous consultez un site avec votre navigateur, il faut savoir que, en coulisses, des rouages s’activent pour permettre au site web de s’afficher. L’ordinateur se base sur ce qu’on lui a expliqué en HTML et CSS pour savoir ce qu’il doit afficher, comme le montre la figure suivante.

file

HTML et CSS sont deux « langues » qu’il faut savoir parler pour créer des sites web. C’est le navigateur web qui fera la traduction entre ces langages informatiques et ce que vous verrez s’afficher à l’écran.

Vous vous demandez sûrement pourquoi il faut connaître deux langages pour créer des sites web ? Je vous réponds sans plus tarder !

HTML et CSS : deux langages pour créer un site web

Pour créer un site web, on doit donner des instructions à l’ordinateur. Il ne suffit pas simplement de taper le texte qui devra figurer dans le site (comme on le ferait dans un traitement de texte Word, par exemple), il faut aussi indiquer où placer ce texte, insérer des images, faire des liens entre les pages, etc.

Les rôles de HTML et CSS

Pour expliquer à l’ordinateur ce que vous voulez faire, il va falloir utiliser un langage qu’il comprend. Et c’est là que les choses se corsent, parce qu’il va falloir apprendre deux langages !
Pourquoi avoir créé deux langages ? Un seul aurait suffi, non ?
Vous devez vous dire que manipuler deux langages va être deux fois plus complexe et deux fois plus long à apprendre… mais ce n’est pas le cas ! Je vous rassure, s’il y a deux langages c’est, au contraire, pour faciliter les choses. Nous allons avoir affaire à deux langages qui se complètent car ils ont des rôles différents :

HTML (HyperText Markup Language) : il a fait son apparition dès 1991 lors du lancement du Web. Son rôle est de gérer et organiser le contenu. C’est donc en HTML que vous écrirez ce qui doit être affiché sur la page : du texte, des liens, des images… Vous direz par exemple : « Ceci est mon titre, ceci est mon menu, voici le texte principal de la page, voici une image à afficher, etc. »

CSS (Cascading Style Sheets, aussi appelées feuilles de style) : le rôle du CSS est de gérer l’apparence de la page web (agencement, positionnement, décoration, couleurs, taille du texte…). Ce langage est venu compléter le HTML en 1996.

Vous avez peut-être aussi entendu parler du langage XHTML. Il s’agit d’une variante du HTML qui se veut plus rigoureuse et qui est donc un peu plus délicate à manipuler. Elle n’est plus vraiment utilisée aujourd’hui.
Dans ce cours, nous allons travailler sur la dernière version de HTML (HTML5) qui est aujourd’hui le langage d’avenir que tout le monde est incité à utiliser.
Vous pouvez très bien créer un site web uniquement en HTML, mais celui-ci ne sera pas très beau : l’information apparaîtra « brute ». C’est pour cela que le langage CSS vient toujours le compléter.
Pour vous donner une idée, la figure suivante montre ce que donne la même page sans CSS, puis avec le CSS.

file

Le HTML définit le contenu (comme vous pouvez le voir, c’est brut de décoffrage !). Le CSS permet, lui, d’arranger le contenu et de définir la présentation : couleurs, image de fond, marges, taille du texte…
Comme vous vous en doutez, le CSS a besoin d’une page HTML pour fonctionner. C’est pour cela que nous allons d’abord apprendre les bases du HTML avant de nous occuper de la décoration en CSS.
Vos premières pages ne seront donc pas les plus esthétiques, mais qu’importe ! Cela ne durera pas longtemps.

Les différentes versions de HTML et CSS

Au fil du temps, les langages HTML et CSS ont beaucoup évolué. Dans la toute première version de HTML (HTML 1.0), il n’était même pas possible d’afficher des images !
Voici un très bref historique de ces langages pour votre culture générale.
Les versions de HTML

  • HTML 1 : c’est la toute première version créée par Tim Berners-Lee en 1991.
  • HTML 2 : la deuxième version du HTML apparaît en 1994 et prend fin en 1996 avec l’apparition du HTML 3.0. C’est cette version qui posera en fait les bases des versions suivantes du HTML. Les règles et le fonctionnement de cette version sont donnés par le W3C (tandis que la première version avait été créée par un seul homme).
  • HTML 3 : apparue en 1996, cette nouvelle version du HTML ajoute de nombreuses possibilités au langage, comme les tableaux, les applets, les scripts, le positionnement du texte autour des images, etc.
    HTML 4 : cette version aura été utilisée un long moment durant les années 2000. Elle apparaît pour la première fois en 1998 et propose l’utilisation de frames (qui découpent une page web en plusieurs parties), des tableaux plus complexes, des améliorations sur les formulaires, etc. Mais surtout, cette version permet pour la première fois d’exploiter des feuilles de style, notre fameux CSS !
  • HTML 5 : c’est LA dernière version. De plus en plus répandue, elle fait beaucoup parler d’elle car elle apporte de nombreuses améliorations, comme la possibilité d’inclure facilement des vidéos, un meilleur agencement du contenu, de nouvelles fonctionnalités pour les formulaires, etc. C’est cette version que nous allons découvrir ensemble.
    Les versions de CSS
  • CSS 1 : dès 1996, on dispose de la première version du CSS. Elle pose les bases de ce langage qui permet de présenter sa page web, comme les couleurs, les marges, les polices de caractères, etc.
  • CSS 2 : apparue en 1999 puis complétée par CSS 2.1, cette nouvelle version de CSS ajoute de nombreuses options. On peut désormais utiliser des techniques de positionnement très précises, qui nous permettent d’afficher des éléments où on le souhaite sur la page.
  • CSS 3 : c’est la dernière version, qui apporte des fonctionnalités particulièrement attendues comme les bordures arrondies, les dégradés, les ombres, etc.

Définitions

  • Structure d’un Site Web: La manière dont les pages, les images et les éléments sont organisés.
  • HTML, CSS, JavaScript: Langages utilisés pour respectivement la structure, le style et l’interactivité d’un site web.
  • Navigateur: Programme permettant de visualiser les pages web.

Exemple

Exemple : Imaginez que vous êtes un architecte qui conçoit la structure d’une maison. Chaque pièce correspond à une page web, et chaque couleur représente le style.

Exercice : Dessinez un schéma simple de la structure de votre maison idéale et imaginez comment cela pourrait être transposé à un site web.

\pagebreak

Module 3: Le Rôle du Code Source HTML

Introduction

Plongeons-nous maintenant dans le langage HTML, qui est comme le plan de construction d’une page web. Comprenez son rôle et comment il donne vie à ce que vous voyez dans votre navigateur.

Utilisation

Imaginez que le code HTML est le plan détaillé de votre maison virtuelle. Chaque élément est soigneusement disposé pour créer une expérience cohérente.

Explications

HTML (HyperText Markup Language) est un langage qui structure le contenu d’une page web. C’est comme si vous écriviez les plans détaillés d’une pièce, indiquant où se trouvent les fenêtres, les portes et les meubles.

HTML EST UN LANGAGE DE STRUCTURE
(et non de mise en page ! La mise en page que vous verrez en écrivant vos premiers fichiers HTML n’est qu’une interprétation par défaut des navigateurs)

De quel logiciel vais-je avoir besoin pour créer mon site web ?
Vais-je devoir casser ma tirelire pour acheter un logiciel très complexe que je vais mettre des mois à comprendre ?
Il existe effectivement de nombreux logiciels dédiés à la création de sites web. Mais, je vous rassure, vous n’aurez pas à débourser un seul centime. Pourquoi aller chercher un logiciel payant et compliqué, alors que vous avez déjà tout ce qu’il faut chez vous ?
Eh oui, accrochez-vous bien parce qu’il suffit de… Bloc-Notes !

file

Incroyable mais vrai : on peut tout à fait créer un site web uniquement avec Bloc-Notes, le logiciel d’édition de texte intégré par défaut à Windows. D’ailleurs, j’avoue, c’est comme cela que j’ai commencé moi-même il y a quelques années.
Il y a cependant des logiciels plus puissants aujourd’hui et personne n’utilise vraiment Bloc-Notes.

On peut classer ces logiciels de création de site web en deux catégories :

  • les WYSIWYG (What You See Is What You Get – "ce que vous voyez est ce que vous obtenez") : ce sont des programmes qui se veulent très faciles d’emploi, ils permettent de créer des sites web sans apprendre de langage particulier. Parmi les plus connus d’entre eux : Mozilla Composer, Microsoft Expression Web, Dreamweaver… et même Word ! Leur principal défaut est la qualité souvent assez mauvaise du code HTML et CSS qui est automatiquement généré par ces outils. Un bon créateur de site web doit tôt ou tard connaître HTML et CSS ; c’est pourquoi je ne recommande pas l’usage de ces outils ;
  • les éditeurs de texte : ce sont des programmes dédiés à l’écriture de code. On peut en général les utiliser pour de multiples langages, pas seulement HTML et CSS. Ils se révèlent être de puissants alliés pour les créateurs de sites web !
    \pagebreak

Vous l’aurez compris, je vais vous inviter à utiliser un éditeur de texte dans ce cours.
De nombreux éditeurs de texte fonctionnent, que vous soyez sous Windows, Mac OSX, Linux ou ChromeOS (ils sont disponibles partout).

Sous Windows
Voici quelques logiciels que vous pouvez essayer sous Windows si vous voulez en tester plusieurs :

Sous Mac OS X
Je recommande la plupart des mêmes logiciels car ils sont multiplateformes. Voici une petite sélection :

Sous Linux
Les éditeurs de texte sont légion sous Linux. Certains d’entre eux sont installés par défaut, d’autres peuvent être téléchargés facilement via le centre de téléchargement (sous Ubuntu notamment), ou au moyen de commandes comme apt-get et aptitude . Voici quelques logiciels que vous pouvez tester :

Sous ChromeOS
Le simple éditeur de texte intégré à ChromeOS suffit. Toutefois, vous avez accès à tous les éditeurs et IDE en ligne:

  • VScode ;
  • CodePen ;
  • …
    \pagebreak

Définitions

  • HTML (HyperText Markup Language): Langage de balisage pour structurer le contenu d’une page web.
  • Balisage: Utilisation de balises pour définir différentes parties d’une page web.

Exemple

Exemple : Pensez à une page web que vous aimez. Imaginez-la sans mise en page ni structure. C’est ce à quoi ressemblerait une page sans HTML.

Exercice : Prenez une page web que vous appréciez et essayez d’imaginer à quoi elle ressemblerait sans le code HTML.

\pagebreak

Module 4: Conclusion et Récapitulation

Introduction

Félicitations pour avoir exploré les fondements des sites web! Résumons maintenant ce que nous avons appris et évaluons vos nouvelles connaissances.

Utilisation

Imaginez que vous êtes le chef d’orchestre d’un ensemble musical. Chaque instrument (langage de programmation) contribue à créer une harmonie exceptionnelle.

Explications

Nous avons découvert comment les sites web sont comme des maisons virtuelles, construites avec du code source HTML, habillées avec du CSS, et rendues interactives avec JavaScript. C’est comme si vous aviez appris les notes de base pour jouer une mélodie en ligne.

Définitions

  • Chef d’Orchestre: Vous, maintenant! Maîtrisez la coordination des langages pour créer des expériences web harmonieuses.

Exemple

Exemple : Imaginez que vous êtes le chef d’orchestre d’un groupe musical. Vous dirigez chaque instrument (langage) pour créer une symphonie unique.

Exercice : Prenez un moment pour réfléchir à votre propre métaphore du web. Comment décririez-vous maintenant son fonctionnement?

Bravo pour avoir complété cette séquence de cours! Continuez à explorer le monde fascinant du web et à créer vos propres compositions en ligne. Vous avez maintenant les bases pour construire et comprendre les sites web. Bonne continuation!

↵ retour vers: WEB & HTML

Pour accéder au contenu réservé aux enseignants, contactez david@goprof.be.