Comprendre le code html et son environnement

Le langage de balisage HTML, HyperText Markup Language, est un format de données utilisé pour construire et représenter le contenu des pages web. C’est un langage informatique qui détermine la structure d’une page web à travers un « code ». Ce code est rédigé avec un éditeur de texte et ensuite affiché sur un écran par un programme, le navigateur web (Google Chrome, Internet Explorer, Firefox, Safari, Opera …). Il est en général utilisé conjointement avec le langage CSS, Cascading Style Sheets, puisque celui-ci permet de mettre en forme la page. Pour bien comprendre le HTML il faut poser les bases du web et de l’internet.

Cette partie d’introduction à pour but de vous éclairer sur l’environnement du web, nous rentrerons dans les détails seulement dans les chapitres suivants.

Distinguer le web de l’internet

Il est impératif de commencer par cette notion qui est encore confondue aujourd’hui. Internet a été conçu pour que les ordinateurs puissent échanger des données, on le distingue comme un concept de réseau. Le World Wide Web (toile d’araignée mondiale), communément appelé le web, permet de consulter des pages accessibles sur des sites via un navigateur. Il est imagé par une toile d’araignée car les ordinateurs sont connectés entre eux à travers internet.

Le web n’est qu’une application d’internet, on peut en retrouver d’autres comme la messagerie instantanée, les courriels, le partage de fichiers …

Nous avons donc internet,un réseau, qui englobe toutes les applications:

différence entre internet et web

Maintenant que les choses sont clarifiées, nous devons nous interroger sur le mécanisme de ces pages web.

Comprendre le HTML, du code dans la page web

Note: une histoire d'évolution

On parle aujourd’hui de HTML5 et CSS3 car à l’origine le HTML remonte à 1989-1992. Il a subi divers transformation en passant par HTML 2.0, HTML 3.2 et 4.0, puis le XHTML. Même sanction pour le CSS3 qui est l’héritier des niveaux 1 et 2.

L’élaboration du code HTML est rédigé dans un fichier avec une extension en html, comme ceci « fichier.html« , et a pour objectif d’être une page web au sein de l’arborescence d’un site stocké dans un serveur.

On retrouve ainsi trois parties distinctes:

  • Le serveur
  • Le site web
  • Les pages web

Le serveur

Le serveur est un dispositif matériel qui offre plusieurs services. Dans le cas présent le serveur est un ordinateur qui stockera le site web et ses pages.

Le site Web et les pages

Un site web est un ensemble de plusieurs pages web écrites dans un langage informatique, le langage HTML. Ces pages sont donc des fichiers codés en HTML et sont liés entre elles par des liens hypertexte.

La page web et son code source

La page web est la résultante d’une ou plusieurs ressources étant généralement un document écrit dans un langage informatique. Comme mentionné plus haut il s’agit donc du langage HTML qui permet de définir du texte et des ressources (comme des images, du son …).

étape d'affichage de la page web

En clair, une page web contient des informations ( texte, images, son … ) qui sont structurées et organisées par du code HTML. L’ensemble du code contenu dans la page web est ce que l’on appelle le code source.

Pourquoi quand je consulte des pages web sur internet je ne vois pas de code source ?

Grâce à un programme qui traduit le code source, le navigateur web.

Le navigateur web

Il existe plusieurs navigateurs web, dont:

  • Google chrome
  • Internet Explorer
  • Firefox
  • Safari
  • Opera

Le navigateur est un programme qui permet de traduire le code source des pages web et de les afficher à l’écran.

Dans le navigateur le code html n’est pas caché ou modifié, il est simplement utilisé par celui-ci pour afficher la page. D’ailleurs vous pouvez demander à votre navigateur d’afficher ce fameux code source.

code source de page web html
Voici un exemple de code source

Si vous voulez voir la même chose de votre côté il faut faire un clique droit sur la page est ensuite cliquer (suivant le navigateur) sur:

  • « Afficher le code source de la page » dans Google chrome ;
  • « Code source » dans Safari;
  • « Afficher la source » dans Internet Explorer;
  • « Code source de la page » pour Mozilla.

Les fichiers HTML et CSS

Pour rappel, cette partie d’introduction doit juste vous apporter une compréhension du mécanisme web, je rentrerai dans les détails dans le chapitre suivant où cela va très vite se clarifier.

Concentrons nous maintenant sur les fichiers qui permettent de construire les pages d’un site web.

Retenons, les langages informatiques HTML5 et CSS3 permettent de créer des sites web. Par ailleurs tous les sites sont basés sur ces langages qui représentent les fondations du web.

  • Langage HTML: il est inscrit dans un fichier avec l’extension .html et permet d’écrire et de structurer le contenu de la page (Titres, sous-titres, paragraphes …);
  • Langage CSS: il est inscrit dans un fichier avec l’extension .css et permet de mettre en forme la page (couleurs, dimensions, polices …).

Langage HTML

Voici un exemple de code HTML dans un fichier « index.html »:

comprendre le HTML

A titre informatif, les balises <balise_ouvrante> et </balise_fermante> permettent de dire au navigateur que le texte contenu entre ces balises html représentent un paragraphe ou un titre… Par exemple, la balise <p> indique un paragraphe, la <h1> un titre de niveau 1 (c’est à dire le titre du document, le plus important).

Enfin, le navigateur traduit le code source de la page et le retourne à l’utilisateur:

page html sans css - comprendre le html
Page web html « sans css » dans le navigateur Google chrome

Langage CSS

L’un des objectifs majeurs du CSS est de permettre la mise en forme hors des documents

Source Wikipédia

Cela se traduit par une séparation entre le HTML et le CSS, dans des fichiers séparés, afin améliorer l’accessibilité (différents supports, personnes handicapés, senior…), de simplifier la maintenance , et surtout de réduire la complexité de l’architecture.

Véritable atout design dans la conception d’un site web, les styles CSS permettent aussi de décliner une présentation selon que l’utilisateur se trouve sur un smartphone, une tablette ou un ordinateur.

Voici la même page web vu un peu plus haut mais cette fois avec l’ajout de styles CSS:

page web html et css
Un exemple de page HTML « AVEC CSS » oupss

L’éditeur de texte, l’outils pour concevoir du code

En fait, le logiciel « bloc note » fournit avec windows par défaut est une possibilité pour écrire du code. Cela dit je vous conseille de vous tourner vers des éditeur de texte (GRATUIT) comme :

Maintenant que vous comprenez un peu mieux comment fonctionne cette environnement web autour des langages html et css, il ne nous reste plus qu’à commencer à créer votre première page web.

Facebooktwittergoogle_plusredditpinterestlinkedinmail

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *