Télécharger le PDF du cours
On va ainsi expliquer ce qu’on peut faire et ce qu’on ne peut pas faire avec chacun de ces deux langages.
Le HTML : langage de balisage
Le HTML est un langage qui a été créé en 1991. Les sigles « HTML » sont l’abréviation de « HyperText Markup Language » ou « langage de balisage hypertexte » en français.
Le HTML est donc un langage de balisage, c’est-à-dire un langage qui va nous permettre de définir les différents contenus d’une page.
Pourquoi est-il si important de définir les différents contenus d’une page ? Pour répondre à cette question, il va avant tout falloir que vous compreniez ce qu’est un site internet et ce qu’il se passe lorsque vous essayez d’accéder à un site internet.
Ici, je vais essayer de rester le plus simple possible. Tout d’abord, qu’est-ce qu’un site internet ? Un site internet est un ensemble de fichiers de code et de medias (images, videos, etc.) liés entre eux et disponibles à tout moment via le web.
Pour que les différentes ressources constituant un site internet soient toujours accessibles, on les héberge généralement sur un serveur d’un hébergeur professionnel comme OVH par exemple.
Un serveur est un ordinateur plus ou moins comme les nôtres et qui stocke les différentes ressources d’un ou de plusieurs site internet. Les seules différences entre un serveur et nos ordinateurs est qu’un serveur est généralement beaucoup plus puissant que nos ordinateurs, qu’il est (normalement) toujours connecté à Internet et qu’il va posséder quelques logiciels supplémentaires lui permettant d’exécuter certains codes.
Notez ici qu’on appelle ces ordinateurs des « serveurs » car leur seul et unique rôle va être de « servir » (au sens de « fournir ») des pages dès que quelqu’un va le leur demander.
Comment accède-t-on à une page d’un site internet ? Pour répondre à cette deuxième question, je vais m’aider d’un exemple. Imaginons que l’on souhaite accéder à la page d’accueil de mon site. Pour cela, on va taper www.pierre-giraud.com dans la barre de notre navigateur.
Lorsqu’on demande à accéder à une page d’un site internet, nous sommes ce qu’on appelle des « clients ».
Notre navigateur va contacter le serveur sur lequel est hébergée la page à laquelle on souhaite accéder et lui demander de renvoyer les différents éléments de la page : la page sous forme de code HTML et potentiellement les différents médias intégrés dans la page (ce qu’il se passe est en pratique bien évidemment plus complexe mais encore une fois je simplifie volontairement ici).
Le navigateur va donc recevoir ces différents éléments et les afficher. Cependant, comment fait-il pour savoir ce qu’il doit afficher ? Il va bien évidemment utiliser le code HTML. En effet, le navigateur comprend bien les différentes balises HTML (le HTML utilise ce qu’on appelle des « balises » pour définir les contenus) et va donc « comprendre » de quoi est constituée notre page et ce qu’il doit afficher.
Le rôle du HTML est donc crucial puisqu’il va être notre langage privilégié pour indiquer aux navigateurs ce quoi est constituée chaque page et ce qu’ils doivent afficher. Grâce au HTML, on va par exemple pourvoir indiquer que tel contenu est un texte qui n’est qu’un paragraphe, que tel autre contenu est un texte qui est un titre de niveau 1 dans notre page, que tel autre contenu est une liste, un lien, etc.
En plus de cela, le HTML va également nous permettre d’insérer différents médias (images, vidéos, etc.) dans nos pages web en indiquant au navigateur » à cette place-là dans ma page, je veux que s’affiche cette image « . Notez que dans ce cas précis, pour que le navigateur affiche la bonne image, on va lui fournir l’adresse de l’image dans le code HTML.
Le CSS : langage de styles
Le CSS a été créé en 1996, soit 5 ans après le HTML. Les sigles « CSS » sont l’abréviation de « Cascading StyleSheets » ou « feuilles de styles en cascade » en français.
Le CSS vient résoudre un problème bien différent du HTML : en effet, le HTML sert à définir les différents éléments d’une page, à leur donner du sens. Le CSS, lui, va servir à mettre en forme les différents contenus définis par le HTML en leur appliquant des styles.
Le HTML va donc créer la structure des pages tandis que le CSS va nous permettre de modifier l’apparence des contenus de la page. On va ainsi par exemple pouvoir définir la taille, la couleur ou l’alignement de certains contenus HTML et notamment en l’occurrence de certains textes dans notre page.
Pour styliser le contenu lié à un élément HTML en CSS, nous allons pouvoir le cibler en nous basant sur l’élément HTML en question ou en utilisant d’autres procédés que nous verrons plus tard dans ce cours.
A retenir : n’utilisez pas le HTML pour mettre en forme vos contenus !
Voilà une chose que je vais vous répéter encore et encore au fil de ces premiers chapitres : vous ne devez jamais utiliser le HTML pour faire le travail du CSS.
En effet, si vous affichez la page en HTML créée ci-dessus dans votre navigateur sans y ajouter de CSS, vous pouvez remarquer que le contenu qui a été déclaré comme étant un titre s’affiche en grand et en gras, tandis que la taille du texte de notre paragraphe est plus petite et la police moins grasse.
Certains débutants en déduisent donc « pour mettre un texte en grand et en gras, il suffit d’utiliser une balise représentant un titre en HTML ». Sortez-vous cela immédiatement de la tête !
Le HTML est un langage qui a été créé pour structurer des pages et pour donner du sens au contenu. Le principe même du HTML est d’indiquer aux navigateurs que tel contenu est un texte qui doit être considéré comme un titre tandis que tel autre contenu est un texte qui doit être considéré comme un simple paragraphe et etc.
Si votre navigateur affiche par défaut les contenus textuels que vous avez déclaré comme des titres en HTML en grand et en gras et à l’inverse les paragraphes en plus petit c’est justement parce que chaque navigateur possède sa propre feuille de styles (c’est-à-dire son propre code CSS) qui sera utilisé si aucun code CSS n’a été précisé de notre côté.
Je répète ici car cela me semble très important : chaque navigateur a une feuille de style dans laquelle sont définis des styles pour chaque contenu HTML qui seront appliqués par défaut si aucun autre code CSS n’est fourni. Cela permet d’apporter une mise en forme minimale au contenu dans les cas rares où les styles CSS ne seraient pas définis ou si notre code CSS ne peut pas être chargé.
En fournissant nos styles CSS pour les différents contenus de notre page, nous allons donc pouvoir définir l’apparence de ceux-ci puisque les styles que nous allons fournir vont être considérés comme prioritaires par rapport à ceux du navigateur.
N’essayez pas forcément de comprendre comment fonctionne le code ci-dessus, ce n’est pas le but ici. La seule chose que vous devez comprendre est qu’on applique ici des styles CSS à notre premier contenu HTML placé entre les balises <h2> et </h2> (qui servent à définir un titre de niveau 2) mais pas au deuxième.
Pour notre premier titre de niveau 2, on indique qu’on veut une taille de texte de 16px et une couleur de texte orange et c’est donc ce que va afficher le navigateur. Comme on n’indique aucun style pour le deuxième titre de niveau 2, le navigateur va charger ses styles par défaut.
Note : Chaque version de chaque navigateur possède sa propre feuille de style, et c’est la raison pour laquelle une même page peut être rendue différemment d’un navigateur à un autre ou même d’une version d’un navigateur à une autre version de ce même navigateur ! Cependant, aujourd’hui, un véritable effort d’harmonisation a été fait et la plupart des navigateurs utilisent plus ou moins les mêmes styles par défaut.
En bref, retenez que vous ne devez jamais utiliser le HTML pour modifier l’apparence d’un contenu car cela est le rôle du CSS. Si vous faussez le tout en déclarant par exemple des titres qui n’en sont pas, vous pervertissez le rôle du HTML et cela va impacter fortement la qualité de votre page web, sa validité et votre référencement global.
