Langage 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 sa dernière version 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.

Activité
  • Depuis le navigateur (Firefox, Chrome, …), faire Ctrl+U. Observer le code source de cette 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 ([itg-glossary glossary-id= »1291″]sémantique[/itg-glossary]) = « 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ée
  • 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="https://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 …

Activité
  • 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 :

AVERTISSEMENT
  • Titre de niveau 1
    • Titre de Niveau 2
<!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>

Exercice
  • Copier ce code dans un éditeur de texte avec coloration syntaxique (Notepad++ par exemple)
  • 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

 

Exercice
  • 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">

 

Exercice
  • 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="<i>nom_du_fichier</i>.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

 


Organisation des contenus

Depuis HTML5, le contenu d’une page web est doté de blocs dont les intitulés sont signifiants : <header> , <nav> , <arcticle> , <section> , <figure> , <audio> , <video> , <embed> , … des balises aux noms explicites, indiquant ce que signifie leur contenu :

  • <header> = entête, permet d’annoncer ce que contient la page,
  • <nav> = zone de navigation (menu, …), une liste de liens menant aux contenus du site,
  • <article> = article (message de forum, un article de presse, un billet de blog, …),
  • <aside> = contenu contextuel à un autre contenu

html5_structure

Les noms de ces blocs définissent le type de contenu, mais ne spécifie pas leur forme (position, dimension, couleurs, police de caractère, comportement, …). Pour cela, on utilisera des feuilles de style CSS.

Exercice
  • Créer une page web conforme à la structure décrite ci-dessus. Le contenu de chaque bloc sera le nom du bloc.

 

<header> : en-tête

Cet élément permet d’annoncer (titre, slogan, logo, …) ce que contient la page (ou un article, une section, …).

Il peut également contenir des liens de navigation, un sommaire, un formulaire de recherche, …

<nav> : éléments de navigation

L’élément <nav> contient les éléments de navigation du site (barre de navigation horizontale ou en menu latéral).

<article> : portion de document

La balise <article> délimite une portion du document. Ce peut être un message de forum, un article de presse, un billet de blog ou toute autre portion de contenu indépendant. Un article imbriqué dans un autre désignera une citation.

<section> :

Une section permet de subdiviser le contenu d’un document (paragraphes, blocs thématiques, …). Elle peut elle-même se subdiviser en plusieurs sections et être constituée d’un en-tête, d’un pied, et d’une navigation…

<aside> : élément contextuel

Cette balise contient les contenus contextuels, c’est-à-dire en relation thématique avec ce qui l’entoure (liens « sur le même thème », encadré dans un article, …).

<canvas> : zone de dessin

La balise <canvas> permet de créer une zone de dessin. On utilise ensuite du JavaScript pour la créer et l’animer :

<canvas id="myCanvas" width="300" height="140" style="border:1px solid #000000;" />
<script>
   var c = document.getElementById("myCanvas");
   var ctx = c.getContext("2d");
   ctx.beginPath();
   ctx.arc(95,50,40,0,2*Math.PI);
   ctx.stroke();
</script>

affiche :

<audio> : lecteur de fichier audio

La balise <audio> permet d’afficher un lecteur audio.

<audio src="monfichier.mp3" autoplay controls loop />

Les attributs autoplay , controls et loop sont facultatifs. Ils permettent respectivement de lancer automatiquement la lecture, d’afficher les boutons lecture/arrêt et de lire la piste en boucle.

<video> : lecteur de vidéo

La balise <video> s’utilise comme la balise <audio>, sauf qu’il faut préciser les dimensions de la vidéo, ainsi que le type MIME du fichier :

<video width="360" height="240">
   <source src="movie.ogv" type="video/ogg" />
</video>

 

<footer> : pieds de page

L’élément <footer> contient les informations de « pied de page » : auteur, droits de reproduction, etc. de la section à laquelle il est appliqué.

Remarques :

  • il peut être présent plusieurs fois dans la page (chaque section, article, …)
  • il ne se place pas nécessairement à la fin.

 


 

Exercice

Sans aucune mise en forme, mais en utilisant au mieux les balises HTML5 :

  • Créer une page web présentant votre CV.
    • Identité (avec photo !)
    • Formation
    • Expérience professionnelle
    • Compétences en informatiques
    • Langues pratiquées
    • Hobbies / Voyages
  • Créer une page web qui utilise toutes ces balises et résume une description de la mésange charbonnière, incluant, image, vidéo, chant, et liens vers toutes les pages source dans un menu. Aucune mise en forme !

 

 

 

Sources : http://romy.tetue.net/elements-html-5-de-structure
https://fr.wikipedia.org/wiki/Hypertext_Markup_Language
https://fr.wikibooks.org/wiki/Le_langage_HTML/HTML5

Vous aimerez aussi...

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *