Introduction à l'HTML

INTRODUCTION A L’HTML

Qu’est-ce que l'HTML

Le HTML (HyperText Markup Language) est le langage de balisage standard utilisé pour créer les pages web.

Son rôle est de structurer le contenu : texte, images, liens, formulaires, tableaux, etc. Il ne s’occupe ni du design ni de la mise en page — ces aspects relèvent du CSS (Cascading Style Sheets).

Chaque page web que vous consultez, même la plus complexe, repose sur une structure HTML.

Des racines de la presse écrite et l'édition

Le HTML n’est pas apparu de nulle part.
Il hérite directement de pratiques utilisées dans la presse et l’édition traditionnelles.

Avant le Web, les imprimeurs et maquettistes utilisaient déjà des marques typographiques pour indiquer la structure d’un texte :

un titre,
un paragraphe,
une citation,
une image à insérer, etc.

Ces marques ont inspiré les langages de balisage informatiques comme GML (Generalized Markup Language) dans les années 1970, puis SGML (Standard Generalized Markup Language), dont le HTML est une simplification.

Les Balises : le cœur du HTML

Les balises se matérialisent par des symboles antilambda (< &>) A chaque balise correspond un élément visuel

<img/> correspond à une image
<ul> correspond à une liste non ordonnée (Unordonned List)
<h1/> correspond à un titre de Niveau 1 (Gros titre)

Chaque balise a une valeur sémantique :

<h1> à <h6> : titres de niveaux hiérarchiques
<<p> : paragraphe
<a> : lien hypertexte
<ul> / <ol> / <li> : listes
<img> : image
<article>, <section>, <nav> : structure sémantique (HTML5)

Il existe deux types de balises:

Balises isolées Elles correspondent souvent à des éléments visuels
- Images (<img>)
- Sauts de ligne (<br>)
- Champs de saisie (<input>)
- Ligne horizontale (<hr>)
Balises en couples Elles correspondent le plus souvent à des zones de définition (I.E. tout élément contenu entre ces balises sera affecté par la même définition)
- Mise en forme de texte (<font></font>)
- Liens hypertextuels (<a-></a>)
- Liste non ordonnée (<ul></ul>)
- Formulaires(<form></form>)
- label(<label></label>)

L'ossature d’une page

Tout document HTML doit respecter une ossature standard. Ainsi l'affichage sera optimisé pour l'ensemble des navigateurs

<html>
- <head>
  - <title>lci le titre</title>
- </head>
- <body>
  - Ici le contenu de la page
  </body>
</html>

html -> indique au navigateur que nous créons une page HTML
head->indique la zone dite d'entête qui permet de donner des informations au navigateur comme le titre du document, les feuilles de style, les balises métas...
title->Permet d'indiquer le titre du document qui apparaîtra dans l'entête
body->indique au navigateur le contenu effectif de la page