Introduction au langage HTML et son évolution

La création de pages web nécessite une structure claire et une présentation esthétique.

Sans une bonne connaissance de HTML et CSS, les pages peuvent apparaître désorganisées et peu attrayantes.

Cet article explore le langage HTML et son évolution, ainsi que l’importance du CSS pour améliorer l’apparence des pages.

Table de matière

Langage HTML : Introduction HTML : Écriture et Interprétation Balises HTML : Composition Imbrication des Balises HTML FAQ Conclusion

Formation HTML et CSS : Le Guide du Débutant

Lancez votre carrière de développeur web avec une formation pratique.

Langage HTML : Introduction

Dans cette partie nous allons explorer les bases du développement web, en commençant par HTML et son rôle centrale dans la construction des pages web, ainsi que son évolution à travers des différentes versions, pour nous adapter aux besoins changeants du web. Puis nous allons découvrir le CSS pour mettre en forme les pages web, pour offrir une présentation esthétique.

C'est quoi HTML ?

HTML : Hyper Text Markup Language est développé en 1991 par Tim Berners Lee

C’est un langage de balisage qui permet de mettre en forme des pages html :apparence et présentation.
Les documents disponibles sur le Web sont écrits en langage HTML.
Un document est dit hypertexte lorsqu’il permet d’accéder à d’autres documents

au moyen d’un simple clic de souris sur une partie de son texte.

Un document HTML peut incorporer du texte, des images, de l’animation et du son

Evolution HTML

Depuis sa création, HTML, a connu différentes versions. Chacune apportant des fonctionnalités améliorées, des normes plus strictes et un support pour des nouvelles technologies .

HTML 1.0 :Texte de base, images, liens hypertextes
HTML 2.0 :Formulaires de saisie
HTML 3.2 :Justification (gauche, centre, droite) , Tableaux , Equations mathématiques
HTML 4.0 :Feuilles de style
HTML 5 :Intégration des vidéos, meilleur agencement du contenu, de nouvelles fonctionnalités pour les formulaires ….

C'est quoi CSS ?

CSS signifie Cascading Style Sheet que nous pouvons traduire par Feuille de Style en cascade.

Mets en forme le HTML afin de le rendre visuellement plus joli dans le navigateur
Le langage CSS est lu et interprété par un navigateur. (Hedge, Chrome, Safari, Mozilla.)
Tout comme langage HTML, le langage CSS N’EST PAS un langage de programmation.

Pour mieux comprendre le rôle du CSS dans la création d’une page web, On va prendre comme exemple un fichier HTML, index.html, qui est déjà préparé puis l’ouvrir dans un navigateur :

Nous allons lier cette page a un code CSS, on obtient le résultat suivant :

Pour conclure sur cette présentation du langage HTML mais également du langage CSS, nous dirons que ce sont des langages complémentaires.

HTML : Écriture et Interprétation

Une page HTML est un fichier texte qui se compose de deux éléments : Le contenu de la page à visualiser par le navigateur, et une série de commandes, appelés balises ou tags, qui est interpréter par le navigateur pour structurer et formater le contenu de la page de manière cohérente.

De quoi on a besoin pour créer des pages HTML ?

Un éditeur de texte :tout simple comme par exemple le Bloc-notes ou Notepad de Windows ou tout autre éditeur équivalent.
Un navigateur :Google chrome, Safari, Mozilla Firefox ,Opera,…

Le schéma ci-dessous montre le processus de la création, de traitement et d’affichage de pages HTML. On a besoin d’un ordinateur, pour faire appel à un navigateur qui va nous lire les codes HTML et CSS, qui vont être écris dans un éditeur de code IDE.

Balises HTML : Composition

Comme indiqué précédemment, HTML est un langage de balisage qui utilise des balises et des éléments clés pour organiser le contenu d’une page. Hiérarchiser les textes, introduire des titres, des images, des vidéos, des liens, ainsi que tout autre élément servant à la mise en forme du texte.

Une balise HTML est entourée de deux chevrons angulaire < >. Entre ces chevrons, on retrouve le nom de l’élément de la page web (un paragraphe, une image, une vidéo, une liste à puces, un encadré, etc.) et un attribut src si besoin.

Voici un exemple de fichier HTML déjà préparé, exemple.html, qui montre comment le contenu de la page est structuré dans des balises :

Dans HTML, on peut distinguer entre deux types de balises : les balises paires (d’ouverture et fermetures) et les balises impaires (auto-fermantes).

Les balises paires :Sont composées de la balise d’ouverture avec le nom de cette balise entre les deux chevrons < >. Par exemple<p>.Et la balise de fermeture, qui inclus une barre oblique (/) avant le nom de la balise.</p>.
Les balises impaires :Ces balises n’ont pas besoin de balise fermante, ils sont utilisés pour les éléments qui n’ont pas de contenu interne. Elle s’écrit soit entre < > ou entre < />

Comme la balise < br > ou < br /> pour le saut de la ligne

Les attributs HTML sont utilisés pour fournir des informations supplémentaires sur Les éléments HTML. Ils sont inclus dans la balise d’ouverture suivi d’un signe égal (=) et d’une valeur placée entre guillemets (« »). Une balise peut avoir un ou plusieurs attributs.

Syntaxe : <balise nom_attribut1= »valeur_attribut1″ nom_attribut2= »valeur_attribut2″>

Il y’a des cas ou l’inclusion des attributs est obligatoire pour les balises qui nous permettent de faire des liens : avec l’attribut « href » pour spécifier la destination du lien.

Par exemple on veut faire un lien qui va nous diriger vers Google. On va rajouter le lien de Google a l’intérieur de href .

On obtient le résultat suivant, lorsque l’utilisateur va cliquer sur le lien il va être rediriger vers google.com :

Imbrication des Balises HTML

Comme nous avons déjà cite avant, HTML est une histoire de balise que l’on ouvre et que l’on ferme.

Syntaxe : <balise> contenu </balise>

En observant attentivement le code ci-dessous, vous devriez forcément remarquer que toute balise ouverte doit être refermée à un moment ou un autre. La balise ouvrante et la balise fermante peuvent être sur la même ligne ou pas, cela n’a aucune espèce d’importance, la seule question à se poser ici est : ai-je bien refermé toutes les balises que

Enfin pour résumer avec les généralités sur les balises, une structure de ce type est incorrect, la balise 2 a été ouverte après la balise 1 , et doit être refermée avant la balise 1 :

En revanche, l’enchaînement suivant est correct :

Pour résumer, HTML est un langage de balisage essentiel pour construire des pages web. A partir de la mise en forme et l’organisation de la structure du contenu. Son avancée vers HTML 5 a augmenté les fonctionnalités disponibles.

Formez-vous gratuitement avec Alphorm !

Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.

FAQ

Qu'est-ce que le langage HTML ?

Le langage HTML, ou Hyper Text Markup Language, est un langage de balisage utilisé pour structurer et présenter le contenu des pages web. Développé en 1991 par Tim Berners-Lee, il permet d’intégrer du texte, des images, des liens hypertextes et d’autres éléments multimédias. HTML est essentiel pour créer des documents hypertexte accessibles via un simple clic, permettant de naviguer facilement entre les pages grâce à des liens intégrés.

Comment HTML a-t-il évolué au fil du temps ?

Depuis sa création, HTML a évolué avec plusieurs versions améliorant ses fonctionnalités. HTML 1.0 a introduit des éléments de base comme le texte et les images, tandis que HTML 2.0 a ajouté des formulaires. HTML 3.2 a permis la justification du texte et l’utilisation de tableaux. HTML 4.0 a intégré les feuilles de style pour une meilleure mise en forme, et HTML 5 a révolutionné le web avec l’intégration de vidéos et un agencement amélioré du contenu.

Quel est le rôle du CSS dans le développement web ?

CSS, ou Cascading Style Sheets, joue un rôle crucial dans le développement web en définissant l’apparence visuelle des pages HTML. Contrairement à HTML qui structure le contenu, CSS s’occupe de la présentation, rendant les pages web esthétiques et attrayantes. Il permet de contrôler les polices, les couleurs, la disposition et d’autres aspects visuels, rendant le contenu plus agréable à lire et à naviguer dans les navigateurs comme Chrome, Safari ou Firefox.

Quelles sont les composantes d'une balise HTML ?

Une balise HTML est entourée de chevrons et inclut un nom d’élément, comme un paragraphe ou une image. Elle peut être paire, avec une balise d’ouverture et de fermeture, ou impaire, auto-fermante. Des attributs peuvent être ajoutés pour fournir des informations supplémentaires, comme ‘href’ pour les liens. Les balises organisent le contenu en hiérarchisant les textes, introduisant des titres, images et autres éléments de mise en forme.

Comment bien structurer le code HTML avec les balises ?

La structure HTML repose sur l’imbrication correcte des balises. Chaque balise ouverte doit être refermée, et les balises doivent être correctement imbriquées pour éviter des erreurs de code. Par exemple, une balise ouverte à l’intérieur d’une autre doit être fermée avant de fermer la balise extérieure. Une bonne pratique est de toujours vérifier que toutes les balises ouvertes sont bien fermées pour assurer un affichage correct du contenu.

Conclusion

En conclusion, HTML et CSS sont des outils fondamentaux dans le développement web, chacun jouant un rôle distinct mais complémentaire. HTML structure le contenu, tandis que CSS améliore son apparence visuelle. Quelle est selon vous la prochaine étape dans l’évolution des technologies web ?

Présentation du langage HTML et son évolution