Attention : Ce cours peut être obsolète, il concerne le langage HTML dans ses premières versions. Il est possible qu'il ne soit plus à jour, ou que les informations y figurant soient incomplètes. Il est conservé afin d'aider les personnes utilisant encore ce système ou ce type de langage. En attendant une mise à jour, n'hésitez pas à découvrir nos nouveaux articles de la section Programmation.

Les principes de base

La page que vous voyez actuellement est une page Web. Il ne s'agit en fait que d'un document texte interprété par votre navigateur (Intenet Explorer, Firefox, Opera...). On renomme souvent l'extension en .html (mais pas toujours, vous verrez cela dans les prochains cours). Le document texte associé à cette page Web est disponible en cliquant sue le texte du bouton droit et en sélectionnant 'Afficher la source'. Il y a deux différences fondamentales entre une page Web et le fichier texte associé :

  • Tout d'abord le fichier texte comporte des balises, entre < et >, elle sont ensuite interprété par votre navigateur puis supprimé dans la page Web.
  • La deuxième différence, qui découle de la première : le texte de la page Web est formaté contrairement au document texte. C'est à dire que vous pouvez voir des soulignement, de la couleur, du gras ou encore de l'italique. Ce formatage est généré par le navigateur grâce aux balises.

Pour créer une page Web, il va donc falloir éditer le document texte avec des balises, puis renommer le fichier en .html. Le navigateur se chargera ensuite de généré la page Web.

Créer sa page Web

Créez un nouveau document texte, pour ça cliquez du bouton droit dans un dossier ou sur le bureau et sélectionnez 'nouveau' puis 'Document texte'. Renommez votre fichier. Ensuite il va falloir en changer l'extension. Si vous voyez un '.txt' à la fin du nom, changez là en '.html'. Si l'extension n'est pas apparente, et selon votre système d'exploitation, il vous faudra afficher cette extension dans la configuration des fichiers.

Le fonctionnement des balises

Déjà si vous voulez voir à quoi ressemble le HTML, cliquez du bouton droit sur cette page et sélectionnez 'Afficher la source'. Vous vous trouvez alors face au code HTML. Glissez vers le milieu de la page, vous pouvez alors lire facilement le contenu, seul de temps en temps vous pouvez voir des mots bizzares entre < et >. Ces mots sont appellés des balises, elles donnent des informations à votre navigateur.

Le HTML est très logique : Si vous voulez écrire Bonjour, vous tapez Bonjour dans le code source et il apparaîtra Bonjour à l'écran. Si vous voulez écrire bonjour, un problème va se poser car vous ne pouvez taper que du texte "non-formaté" dans le code source, c'est à dire pas de soulignement, pas de couleur, pas de gras, pas d'italique ... RIEN sauf du texte, l'accentuation, la ponctuation et quelques caractères spéciaux.
Pour écrire Bonjour, il va donc falloir dire à votre navigateur que vous voulez écrire Bonjour souligné, mais sans le faire. C'est là qu'intervienne les balises. La balise pour dire que vous voulez souligné un mot est <u> (comme underline = souligné en anglais). Vous allez donc placé un <u> avant votre mot. Il va ensuite falloir dire au navigateur que vous voulez qu'il n'y est que Bonjour qui soit souligné, et pas ce qui suit, à la fin du mot Bonjour vous allez donc glissez un </u>, c'est la balises pour dire maintenant, plus de soulignement, jusqu'au prochain <u>.

Exemple d'utilisation d'une balise

Tout d'abord la logique des balises : elle entoure le mot ou le groupe de mot sur lequel porte un caractère spécial. On place <balise> devant le groupe de mot, puis </balise> derrière. On a vu que pour souligné, la balise était u. Nous allons donc écrire dans le code source :
<u>C'est écrit en souligné</u>

Il va alors s'afficher :

C'est écrit en souligné

Un cas particulier pour la balise <br> qui permet d'aller à la ligne : elle n'a pas de correspondant en </br>. Pour sauter une ligne, écrivez :

<br>

Espace: 

Programmation: 

Ajouter un commentaire

Plain text

  • Aucune balise HTML autorisée.
  • Les adresses de pages web et de courriels sont transformées en liens automatiquement.
  • Les lignes et les paragraphes vont à la ligne automatiquement.