CodeGym /Cours Java /Frontend SELF FR /Introduction à HTML

Introduction à HTML

Frontend SELF FR
Niveau 1 , Leçon 1
Disponible

1. Document HTML

Comme tu le sais probablement déjà, tous les sites sur Internet sont composés de pages web. On les appelle aussi des pages HTML. Mais alors, c'est quoi exactement ?

Un document HTML — c'est un fichier texte qui contient du texte et des balises. Les balises ont été inventées dans les années 70 pour permettre aux gens de ajouter des infos techniques dans les documents pour les logiciels qui les traitent.

Une balise — c'est un mot clé (technique), généralement en anglais, qui est encadré par des chevrons (les symboles 'plus grand que' et 'plus petit que') pour que les logiciels ne confondent pas les balises avec des mots ordinaires.

Exemple :


<img>

Une balise peut aussi contenir diverses infos techniques utiles au logiciel traitant le document.

2. Exemple de document HTML

Le programme le plus populaire pour travailler avec des balises — c'est le navigateur. Tout ce que ton navigateur affiche — c'est le résultat du traitement des balises insérées dans un document HTML.

Supposons que ton navigateur affiche cette page :

Manul

Le Manul — un mammifère prédateur de la famille des félins. Il ressemble par son apparence et sa taille à un chat domestique, mais se distingue par un corps et des pattes plus courts et massifs, des pupilles rondes, de petites oreilles basses, et une fourrure longue et épaisse.

Voici à quoi ressemble son document HTML :

HTML
      
<h1>Manul</h1>
<p> Le Manul — un mammifère prédateur de la famille des félins. Il ressemble par son apparence et sa taille à 
<a href="#">un chat domestique</a>, mais se distingue par un corps et des pattes plus courts et massifs, des pupilles rondes, 
de petites oreilles basses, et une fourrure longue et épaisse. </p>
<img src="manul.jpg">
      
    

Dans cet exemple, on voit le texte et les balises : h1, p, a et img. Le navigateur a reconnu les balises, et a transformé le texte à l'intérieur des balises en titre, en lien, et a ajouté une image en bas du texte. C'est carrément magique !

Commentaires
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION