logo
.

Introduction

Le HTML (HyperText Mark-Up Language) est un langage dit de « marquage » (de structuration) dont le rôle est de formaliser l'écriture.

Le langage HTML est un standard du web. Il est donc le support de l'information sur le web et peut être de ce fait utilisé sur n'importe qu'elle système.

Il se compose de balises délimitées par les symboles < et > qui permettent d'indiquer la façon dont doit être présenté le document et les liens qu'il établit avec d'autres documents. Le HTML est interprété côté client grâce aux navigateurs web.

Le Web est ainsi une énorme archive vivante composée d’un ensemble de sites web proposant des pages web pouvant contenir du texte mis en forme, des images, des sons, des vidéos, etc.

Objectif

Avec un navigateur, allez à l’adresse http://mathartung.xyz/nsi/media/ihmweb

Que représente l'endroit où vous êtes arrivé ? (Une page web que vous pouvez simuler une valeur approchée de π avec la méthode Monte Carlo).

Faites un clic droit puis faites « afficher le code source de la page », que remarquez-vous ? (un ensemble de balises HTML, toute page web est constituée de ce type de code, c'est le navigateur web qui l'interprète afin d'afficher des informations bien structurées).

Historique

HTML est une des trois inventions à la base du World Wide Web, avec le Hypertext Transfer Protocol liant les différentes ressources d'Internet avec des hyperliens. Aujourd'hui, ces documents sont appelés « page web » (HTML, Protocol et Hypertext).

Il est créé en 1989 par Tim Berners-Lee pour pouvoir écrire des documents hypertextuels liant les différentes ressources d'Internet avec des hyperliens.

De cette date à nos jours, il a été en constante évolution afin de répondre aux attentes des développeurs de navigateurs web. On utilise encore le HTML4.0, mais depuis 2011 les créateurs de site internet sont invités à utiliser le HTML5.

Code minimal

<!doctype html>
<html lang="fr"> <!--Ceci est le début d'un document de type HTML.-->
	<head> <!--Ceci est le début de la zone d'en-tête-->
		<meta charset="utf-8">
		<title>Titre de la page</title>
	</head> <!--Ceci est la fin de la zone  d'en-tête.-->
	<body> <!--Ceci est le début du document proprement dit.-->
		test
		...

	</body> <!--Ceci est la fin du document proprement dit.-->
</html> <!--Ceci est la fin d'un document de type HTML.-->
Code minimum pour une page en HTML

Le doctype

Il permet de préciser le type de document :
En tout début de fichier, placer: <!doctype html> Indique que la page web est en HTML5

Paramètre de la balise <html>

Il est possible d’ajouter des paramètres afin de préciser la langue : Dans la balise HTML : 

<html lang="fr">

Paramètre de la balise <body>

<body bgcolor="…"> : couleur de fond en code HTML ou en anglais.

<body text="…"> : couleur de texte.

<body link="…"> : couleur des liens.

<body vlink="…"> : couleur des liens visités.

<body alink="…"> : couleur d’un lien actif.

La balise <meta>

Pour la gestion des caractères accentués, l’encodage des pages web est dépendant de la table ascii utilisée. En général, afin d’éviter tout problème d’encodage de caractère (caractère accentué mal affiché) :
dans la zone du contenu header placer : 

<head>
	<meta charset="utf-8">
</head>
Il y a d’autres balises <meta>. La syntaxe globale est : 
<meta name="…" content="…">

Des exemples pour Name (nom du paramètre) :

Contenu de flux

Balises

Ces balises permettent de construire la structure en arbre des pages web, on appelle cette structure le DOM (Document Object Model).

Avant HTML5, le développeur qui voulait organiser sa page n'avait pas à sa disposition des balises identifiant clairement ses groupes. La solution adoptée était d'organiser grâce aux bloc « div » et de les identifier par des id ou des classes (Ces notions seront définies plus loin dans le cours). HTML5 apporte des balises spécifiques pour pallier ce manque. Elles apportent de la clarté dans la lecture du code source.

Ces deux images montrent les balises utilisées avant HTML5 (image de gauche) et avec HTML5 (image de droite) pour organiser son contenu.

Quelques balises

Une balise est un élément de texte (un nom) encadré par le caractère inférieur (<) et le caractère supérieur (>). Par exemple « <B> ».

Elles sont insensibles à la casse.

Elles encadrent l'élément sur lequel elles agissent, en résumé, toute balise ouverte doit être refermée. Une balise fermante est précédée du caractère /.

Exemple : 

<marqueur> Votre texte formaté </marqueur>

Il existe deux types de balises :

Dans ce contexte deux balises sont souvent utilisées afin d’y ajouter des paramètres de formatage :
La balise <div> et la balise <span>.

L’utilisation des paramètres sera expliquée lors de la présentation des CSS3. Quelques balises standard :

Ces balises ne sont là que pour illustrer, elle ne structure pas le document.

Ces trois dernières balises apportent une connaissance sémantique au document.

Les titres

Il y a 6 niveaux de titres :

Il est possible de définir un groupe de titre avec la balise <hgroup> (définition de plan ou de table des matières).

Les listes

Les balises pour définir des listes :

Voici un exemple : 

<ul>
  <li> cas 1</li>
  <li> cas 2</li>
  <li> cas 3</li>
  <li> cas 4</li>
</ul>

Les liens

Les liens permettent à la suite d’un clic sur un mot ou une image de se rendre :

Syntaxe : 

<a href="adresse ou URL (Uniforme Ressource Location">Données (balisées ou non)</a>

Lien externe => http://google.fr 

<a href="http://google.fr">Aller sur Google</a>

Lien interne => chemin vers le fichier HTML dans le répertoire. Lien au sein de la page.
Exemple :

  1. Placer le point d’ancrage par exemple en haut de la page :
     <h1 name="debut">Début du document</h1> ou <h1 id="debut">Début du document</h1>
  2. Placer le lien vers l’ancre au bas de la page: 
     <a href="#debut">Aller au début</a>
  3. Lien vers l’ancre d’une autre page : <a href=’’URL#...’’>…</a>

Option des liens : 
<a href="…" option>…</a>

Exemples d'options (attribut) :

Les images

Voici le code qui permet d’afficher une image : 

<img src="http://mathartung.xyz/nsi/img/prof.png" />

Exemples d'option (attribut) : 

<img src="http://mathartung.xyz/nsi/img/prof.png" alt="image indisponible" title="prof" />
image indisponible

On peur aussi habiller l'image avec les balises : 

<figure>
<img src="http://mathartung.xyz/nsi/img/prof.png" alt="image indisponible" title="prof" />
<figcaption>mon prof</figcaption>
</figure>
image indisponible
mon prof
On a la possibilité de placer plusieurs images dans la balise figure.

On peut aussi créer ces propres images avec <canvas> (non abordé dans ce cours, car nécessite l’utilisation de script JavaScript).

Format privilégié :

Les tableaux

Un tableau est composé de ligne et de colonnes qui forment les cellules. Il commence par le balise :

<table> : déclaration du tableau.

Exemples d'option (attributs) :

On utilise les balises suivantes :

Une cellule peut contenir du texte, des images, des liens ou encore un tableau. On peut aussi y ajouter une couleur d'arrière-plan (bgcolor).

On a la possibilité de fusionner des cellules : horizontalement : colspan=''X''. verticalement : rowspan=''X''. X représente le nombre de cellules que l'on souhaite fusionner.

Autres attributs :

Structurer le tableau :

Voici le code d'un tableau : 

<table>
  <caption>inventeurs du html</caption>
  <thead>
    <tr>
      <th>Noms</th>
      <th>Prénoms</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Berners</td>
      <td>Tim</td>
    </tr>
    <tr>
      <td>Connolly</td>
      <td>Dan</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Smith</td>
      <td>Michael</td>
    </tr>
  </tfoot>
</table>

Les médias

On peut insérer des sons (musique, commentaire audio, etc.) ou des vidéos dans une page web.

<audio> : permet la gestion du son.

Voici le code pour insérer un son : 

<audio src=’’chemin’’></audio>

Exemples de paramètres :

S’il y a plusieurs propositions de source : 

<audio controls>
	<source src="son.mp3"></source>
	<source src="son.ogg"></source>
</audio>


<video> : permet de gérer les vidéos.

Voici le code pour insérer une vidéo : 

<video src=’’chemin’’></video>

Exemples de paramètres :

  • poster : image à afficher à la place de la vidéo tant que celle-ci n'est pas lancée. Par défaut, le navigateur prend la première image de la vidéo.
  • controls : pour ajouter les boutons « Lecture », « Pause » et la barre de défilement.
  • width="..." : pour modifier la largeur de la vidéo.
  • height="..." : pour modifier la hauteur de la vidéo.
  • loop : la vidéo sera jouée en boucle.
  • autoplay : la vidéo sera jouée dès le chargement de la page.
  • preload : indique si la vidéo peut être préchargée dès le chargement de la page ou non

    S’il y a plusieurs propositions de source : 

    <video controls width="500">
	<source src="video.mp4" />
	<source src="sintel.ogv" />
</video>