HTML

 

Les bases du langage HTML

L’HyperText Markup Language (HTML), est le format de données conçu pour représenter les pages web. C’est un langage de balisage (markup en anglais) permettant d’écrire de l’hypertexte, d’où son nom.

HTML , surtout depuis HTML5, permet également de structurer sémantiquement et de mettre en forme le contenu des pages, d’inclure des ressources multimédias dont des images, des formulaires de saisie, et des programmes informatiques. Il est souvent utilisé conjointement avec des langages de programmation (JavaScript, Python, PHP, …) et des formats de présentation (CSS).

 

Ce langage est normalisé : l’interprétation du code HTML est confié aux navigateurs (Firefox, Chrome, IE, …), qui sont sensés donner la même représentation d’une même page HTML.

 

Depuis le navigateur (Firefox, Chrome, …), faire Ctrl+U. Observer le code source de cette page.

Afin d’avoir encore plus d’informations, toujours depuis cette même âge, via le menu accéder à Développement web/Inspecteur… et passer le curseur de la souris sur les éléments de la page.

 

Les balises (tag)

Le contenu d’une page HTML est défini grâce à des balises :

  • elles encadrent le contenu de la page = le texte qui sera affiché
  • elles indiquent la nature ou ce que signifie le contenu (sémantique) = « titre de la page », « image », « paragraphe », « liste », …
  • elles peuvent préciser la forme de ce qui sera affiché = couleur, police de caractère, alignement du texte, … (mais il est préférable d’utiliser des feuilles de style CSS pour cela)

Syntaxe d’une balise : <nom_de_la_balise>

 

Il y a deux types de balises :

Les balises en paire

Elle permettent d’encadrer du texte entre une balise ouvrante et une balise fermante, de même nature :

<title>Ceci est un titre</title>

Remarque : pour ce type de balise, si cette structure n’est pas respectée, le navigateur produira une erreur.

 

Les balises orphelines

Ces balises n’encadrent pas de texte, elles n’ont donc pas de structure ouverture/fermeture.

Elle servent à insérer un élément qu’il n’est pas nécessaire de délimiter, par exemple une image :

<img src="mon_image.jpg">

Remarque : il est parfois recommandé de rajouter un /  à la fin de la balise pour ne pas la confondre avec une balise qui s’utilise en paire.

Dans le cas de balises qui doivent afficher du contenu, celui-ci n’étant pas encadré par la structure ouverture/fermeture, il doit être déclaré dans les attributs.

 

Les attributs (attribute)

Les attributs sont en quelque sorte les options des balises. Ils contiennent des informations sur :

  • le contenu qui n’est pas directement dans le code HTML (un fichier ou un lien) : image, vidéo, lien, …
  • la forme (ou le style) pour son affichage: dimension, encadrement, alignement, …

La syntaxe générale est la suivante :

<balise attribut1="valeur1" attribut2="valeur2" ... >

Par exemple, pour  une balise <img>, on peut spécifier les attributs suivants :

  • src  : l’URL de l’image = chemin menant au fichier image
  • alt : texte alternatif pour le cas où l’image n’a pas pu être affiché.
  • style : styles d’affichage CSS = dimensions, position, comportement, …
  • … et beaucoup d’autres encore …

Par exemple :

<img style="width: 141px; height: 141px; display: block; margin: 0 auto;" src="http://info.blaisepascal.fr/wp-content/uploads/2016/10/Coco.png" alt="coco" />

affichera une image centrée, de dimensions 141 x 141 pixels :
coco

Remarque : pour les balises fonctionnant par paire, on met les attributs dans la balise ouvrante (et pas dans la balise fermante).

Testez vous-même avec une image du web !

 

Structure d’une page HTML

Le minimum du minimum

<!DOCTYPE html> 
<html> 
  Ma première page 
</html>

 

Essayez vous même !

Description :

  1. <!DOCTYPE html>  : Pour indiquer au navigateur qu’il faut interpréter un document de type HTML.
  2. Ouverture de la balise <html>
  3. Le contenu de la page : ce qui va s’afficher
  4. Fermeture de la balise </html>

Sur cette page, il n’y a aucune information sur l’encodage du texte : peu de chance qu’elle puisse affichée correctement dans hors de l’Europe !

Pas d’information sur le sens de ce qui est écrit : un simple texte ! « Est-ce un titre ?  un paragraphe ? une légende ? un texte important ou une simple note ? … »

Pas de mise en forme …

Depuis le Tryit Editor, créer une simple page web intégrant toutes les balises vues précédemment.

 

Page avec des titres

Les titres d’un document possèdent une hiérarchie :

Titre

  • Titre de niveau 1
    • Titre de Niveau 2
      • …

Copier le code ci dessous dans un éditeur de texte avec coloration syntaxique (Notepad++ par exemple)

<!DOCTYPE html> 
<html> 
   <head> 
      <title>Titre de la page</title> 
   </head> 
<body> 
   <h1>1er titre de niveau 1</h1> 
   <p>Texte d'un paragraphe</p> 
   <h2>Un titre de niveau 2 (un sous titre)</h2> 
   <p>Texte d'un autre paragraphe</p> 
   <h3>Un titre de niveau 3 (un sous-sous titre)</h3> <p>Et encore un paragraphe,</p> 
   <p>et puis un autre.</p> 
</body> 
</html>

 

L’enregistrer avec l’extension .html

L’ouvrir avec un navigateur (Firefox, Chrome, …)

Cette fois-ci, le contenu contient du sens : le niveau hiérarchique de l’information.

Remarque : l’indentation proposée dans les exemples n’est pas obligatoire, mais elle facilite très sensiblement la lecture du code …

 

Des listes

Listes non ordonnées

<ul>
  <li>Riri</li> 
  <li>Fifi</li>
  <li>Loulou</li> 
</ul>
  • Riri
  • Fifi
  • Loulou

Listes ordonnées

<ol> 
  <li>Riri</li> 
  <li>Fifi</li> 
  <li>Loulou</li> 
</ol>
  1. Riri
  2. Fifi
  3. Loulou

Listes de description

<dl> 
  <dt>Riri</dt> 
    <dd>un canard</dd> 
  <dt>Fifi</dt> 
    <dd>un autre canard</dd> 
</dl>
Riri
un canard
Fifi
un autre canard

 

A l’aide de la documentation officielle sur les listes, créer une page HTML contenant le sommaire de cette page, affiché sous forme de listes non ordonnées, puis de listes ordonnées et enfin sous forme de listes de descriptions.

 

 

En tête

L’en-tête contient des informations sur la page elle-même (méta-données) : titre, auteur, description du contenu de la page, mots-clefs, où feuille(s) de style à utiliser…

Elle doit être placée entre les balises <!DOCTYPE html>  et <html>, et contenue par une balise <head>…</head>.

Titre

Le titre est compris entre les balises <title>…</title>titre_site.

Le titre de la page est affiché dans l’étiquette des onglets du navigateur.
Cet élément est obligatoire.

 

Encodage

Le navigateur doit connaitre le jeu de caractères codés (charset encoding) pour afficher correctement la page depuis n’importe quel pays.

On le spécifie par un attribut d’une balise <meta />.

<meta charset="UTF-8">

 

Ajouter un titre et les informations d’encodage à la page créée lors de l’exercice précédent.

 

 

Feuille de style

La mise en forme des éléments de la page peut être intégralement gérée par une feuille de style CSS …

<link rel= "stylesheet" type = "text/css" href="nom_du_fichier.css">

 

Autres informations

On peut également spécifier :

  • le nom de l’auteur : <meta name = "author" content = "C. FAURY" >
  • une description de la page : <meta name = "description" content = "phrase de description" >
  • …

 

Des liens

Pour placer sur la page web un lien hypertexte (interne ou externe), il faut employer la balise <a> ... </a>, avec la syntaxe suivante :

<a href="http://info.blaisepascal.fr">L'informatique, c'est fantastique !</a>

 

Testez vous-même !

 

 

 

 

sources : https://fr.wikipedia.org/wiki/Hypertext_Markup_Language
https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/votre-premiere-page-web-en-html
https://fr.wikibooks.org/wiki/Le_langage_HTML