<-  Documents numériques
->  Cours CSS
Rappel succinct des points évoqués en cours sur le langage HTML et en particulier les nouveautés amenées par HTML5.
 
Sommaire

Principes généraux

Motivation initiale

La motivation initiale est de pouvoir échanger des documents sur Internet en utilisant le protocole HTTP (HyperText Tranfer Protocol).

La solution proposée a été le langage HTML (HyperText Markup Language). Celui-ci est indépendant de la machine et ouvert.

Il ne s'agit pas d'un langage de programmation : HTML permet uniquement de structurer un document.

Un fichier HTML est un simple fichier texte que l'on peut ouvrir et modifier avec un éditeur quelconque. Outre le texte du document, le fichier contient des balises qui vont préciser la structure ou l'apparence du document.

Balises et attributs

Une balise peut prendre trois formes.

  • La première, la plus simple, un simple nom de balise encadré par les signes inférieur et supérieur : 
      <nom_de_balise>
    Ce sera le cas des balises BR ou HR
  • Dans un deuxième temps, la balise peut porter sur une partie précise du document, auquel cas, elle doit s'ouvrir et se refermer : 
      <nom_de_balise>texte concerné</nom_de_balise>
    Le signe / annonce la balise fermante. Voir par exemple la balise B qui met le texte encapsulé en gras.
  • Enfin, il peut être nécessaire de préciser le comportement de la balise, cela se fait avec des attributs, selon la syntaxe suivante : 
      <nom_de_balise liste_attributs>texte concerné</nom_de_balise>
    Un attribut étant défini comme ceci : 
      nom_attribut="valeur"
    Ainsi, un paragraphe étant défini par la balise P, l'attribut ALIGN précisera sa justification.
 
Sommaire

Structure d'un document

Le squelette de base que l'on retrouvera dans tout document HTML est le suivant : 

<HTML>
<HEAD>

    en-tête du document

</HEAD>
<BODY>

    corps du document

</BODY>
</HTML>

Dans l'en-tête, on définira obligatoirement un titre à l'aide de la balise TITLE.

Voir également les attributs de la balise BODY pour la définition des couleurs du document et d'une éventuelle image de fond.

Pour être plus rigoureux, la première ligne d'un document HTML doit mentionner un DOCTYPE, c'est-à-dire le langage HTML que l'on va utiliser dans la suite. Les variations possibles sont :

  • respecter ou pas les contraintes d'un langage XML : si oui, il s'agit de XHTML, sinon de HTML 4.01 ;
  • se restreindre aux balises purement sémantiques ou s'autoriser les balises de mise en forme : dans le premier cas on fait du Strict, sinon du Transitional.

Une autre précision important est l'encodage utilisé pour les caractères : il pourrait s'agir de latin1, d'utf8, etc.

Finalement, si l'on fait le choix d'un HTML avec contraintes XML, balises de mise en forme et codage des caractères en UTF8, le squelette du document devient : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    en-tête du document avec un title

</head>
<body>

    corps du document

</body>
</html>
 
Sommaire

Éléments, balises et attributs

Balises de base

B gras
I italique
U souligné
S barré
TT machine à écrire
BIG plus gros
SMALL plus petit
FONT changement de police, taille et couleur
H1 titre de niveau 1
EM mettre du texte en avant
center pour centrer
PRE du texte déjà mis en page
SUB un indice
SUP un exposant
BR passage à la ligne
P paragraphe
HR tirer un trait
IMG insérer une image

Liens hypertextes

Une seule balise, la balise A, permet à partir d'un document de pointer sur un autre. C'est cette balise qui tisse les fils du web.

Cette balise permet également de créer des liens à l'intérieur d'un document ou encore de proposer l'envoi d'un mail.

Listes

Il est possible en HTML de définir différents types de listes :

  • des listes non ordonnées (balise UL) ;
  • des listes ordonnées (balise OL) ;
  • des listes de définition (balise DL).

Il est naturellement possible d'imbriquer plusieurs listes, qu'elles soient de même type ou pas.

Caractères spéciaux et réservés

Les entités permettent d'obtenir des caractères qui ne sont pas toujours accessibles depuis une combinaison de touches au clavier, ou des caractères qui sont déjà réservés par le langage HTML.

Une entité est un code encadré par une esperluette (&) et un point-virgule (;). Quelques exemples :

&Eacute;É
&oelig; œ
&Agrave;À
&copy; ©
&ucirc; û
&ccedil;ç
&lt; <
&gt; >
&amp; &
... ...
 

Tableaux

Quatre balises pour définir des tableaux :

  • TABLE pour la définition du tableau ;
  • TR pour définir une ligne ;
  • TH pour une case de titre ;
  • TD pour une case de données, c'est-à-dire une case quelconque.

Images réactives

La base est une image quelconque insérée avec la balise IMG en précisant, à l'aide de l'attribut USEMAP qu'une carte est associée à l'image.

Les balises MAP et AREA permettent ensuite de définir des régions dans l'image et d'associer des adresses à chacune de ces régions.

En cas de superposition de deux zones, c'est la première définie qui sera activée si l'utilisateur vient à cliquer dans la partie commune aux deux zones.

Frames

Définition de frames

Inconvénients de frames

  • difficulté pour les moteurs de recherche d'indexer correctement un site utilisant des frames ;
  • impossibilité pour un utilisateur de poser des favoris sur les pages internes d'un tel site.

C'est pourquoi les frames ne sont plus utilisées sur Internet. Cependant, elles peuvent être utilisées lorsque les deux inconvénients deviennent négligeables, par exemple pour aider à la navigation sur un CD-ROM contenant des documents HTML.

 

Formulaires

Une première balise permet de délimiter le formulaire et de préciser le traitement qui devra être effectué sur les données recueillies : FORM.

La majorité des entrées (texte et boutons) peuvent être réalisées avec la balise INPUT.

Si l'on a besoin d'une saisie de texte s'étendant sur plusieurs lignes, on utilisera la balise TEXTAREA.

Pour une liste déroulante, il s'agira de la balise SELECT associée à la balise OPTION pour définir chacun des items de la liste.

Vous pouvez tester vos propres formulaires en suivant les instructions de cette page.

 
Sommaire

Nouveautés HTML5

On décrit ici les nouveautés HTML5 (simplications, nouvelles balises sémantiques et microdata) qui ne concernant pas les aspects dynamiques. Pour les questions de canvas et de programmation Javascript, on se reportera à la page des TP Javascript.

Simplications

HTML5 introduit des simplifications du début des fichiers HTML, en particulier la première ligne de DOCTYPE, la déclaration du codage des caractères utilisé et le lien vers la feuille de style.

Ainsi, le squelette général d'une page HTML5 sera : 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />

    en-tête du document avec un title

</head>
<body>

    corps du document

</body>
</html>

Nouvelles balises sémantiques

Liste non exhaustive :

article
Permet de définir un tout cohérent pouvant être extrait du document et resté autonome.
section
Identifie un bloc de contenu qui est lié au reste du document et qui par conséquent ne justifie une existence propre.
aside
Décrit un contenu sans rapport direct avec le contenu du document (publicités, archives du site, etc.).
header
Spécifie l'en-tête du bloc concerné, ce bloc pouvant être le document lui-même, un article ou une section.
footer
Idem pour le pied de page du bloc concerné.
nav
Délimite une partie du document dédiée à un rassemblement de liens internes au site.
figure
Encadre une ou plusieurs images accompagnées d’une légende.
figcaption
Précise la légende au sein d'une figure.
mark
Attire l'attention du lecteur sur une portion de texte.
video
Permet d'insérer un contenu vidéo.
audio
Permet d'insérer un contenu audio.

Les microdata

les différents vocabulaires http://www.data-vocabulary.org/

trois nouveaux attributs en HTML5

itemscope
itemtype
itemprop

La valeur est le texte sauf pour A (HREF) et IMG (SRC)

Exemple pour une personne :

 
Sommaire

Conclusion

HTML reste aujourd'hui le langage de publication sur le web par excellence. Cependant, on note l'abandon des balises de pure mise en page, celles-ci étant avantageusement remplacées par les feuilles de style. Ainsi, il est recommandé de ne plus utiliser de balises comme FONT, B, I, etc.

De manière générale, les balises HTML ne doivent être utilisées que pour structurer le document, et non plus pour préciser son apparence.

Voir aussi...

<-  Documents numériques
->  Cours CSS