[Service] HTML (HyperText Markup Language) - Cours

Zzouligan · 15 juin 2017

HTML (HyperText Markup Language)

a-guide-to-html5-and-css3-379x284.png.c78e57bea931a6183037832b836c1e71.png

I. Introduction

L'HyperText Markup Language est un language de balisage destiné au web. Diffusé dans les années 1990, il évolue rapidement vers sa version 5 (HTML5) qui est la version officielle de nos jours.

II. Principes de base

Les données du document sont placées entre des balises HTML. Celles-ci indiquent au navigateurs à quoi correspondent ces données. Les balises sont soit sémantiques (elles donnent du sens aux données qu'elles encadrent), soit fonctionnelles (elles créent un éléments non-textuels).

Une balise est contenue entre les symboles < >. Il existe trois types de balises :

Ouvrantes (<nom>)
Fermantes (</nom>)
Orphelines (<nom />)

En plus de son nom, une balise ouvrante contient parfois des attributs :

Classiquement, une donnée est encadrée par une balise ouvrante une balise fermante :

<balise> Donnée textuelle </balise>

Toutefois, certaines balises ne contiennent pas de données en dehors de ses attributs. Elles sont donc uniques (orphelines). Même si cela n'est pas strictement nécessaire en HTML5, il est fortement recommandé de fermer les balises orphelines, en précédent le > par une / :

Un couple de balise ouvrante/fermante peut contenir d'autres couples de balises. Si tel est le cas, les dernières balises ouvertes sont les premières à être fermées, comme s'il s'agissait de boites imbriquées :

III. Structure de base d'un fichier HTML 5

La structure standard d'un fichier HTML5 (extension .htm ou .html) est la suivante :

5942e84b9e531_Capturedcran2017-06-1521_50_03.png.e04b72999ccd8e79df2a2561595ff5dc.png

Tout document HTML5 commence par la mention DOCTYPE, qui annonce au navigateur le langage utilisé dans ce document. En HTML5, le DOCTYPE est très simple : <!DOCTYPE html>

Le contenu lui même est placé entre les balises <html></html>. Ce dernier se partage en deux parties principales, l'entête (head) et le corps (body). Les informations contenues dans l'entête sont principalement destinées au navigateur alors que celles contenues dans le corps sont pour l'utilisateur.

Les informations de l'entête (<head></head>) sont habituellement :

La déclaration de l'encodage du document (<meta charset="utf-8 />). Le jeu de caractère UTF-8 n'est pas le seul existant mais est le plus recommandé.
Le titre du document (<title>Titre</title>), affiché en dehors de la page par le navigateur et par les moteurs de recherche.
L'auteur du document, non affiché (<meta name=author content="nom">)

Les informations du corps (<body></body>) représentent le contenu visible pour l'utilisateur :

Des blocs de section : une entête (<head></head>),un corps (<section></section>), un pied de page (<footer></footer>). A noter qu'il existe d'autres balises et que celles-ci ne sont pas forcément utilisés. Il s'agit ici d'un exemple.
D'autres balises et du contenu, comme par exemple un titre : <h1>Titre affiché du document</h1>

IV. Première notions d'affichage/mise en page

Chaque navigateur attribue un style par défaut à chaque balise. Toutefois, les différents navigateurs n'utilisent pas forcement les mêmes styles. Devait, si l'on peut assurer une mise en page minimale correcte en utilisant seulement les balises HTML, le rendu changera d'un navigateur à l'autre et on sera toujours limité à une mise en page de haut en bas. La mise en page est donc l'affaire d'un autre langage, celui du CSS (Cascading Style Sheets). Toutefois, avant de se lancerons ce second langage, il est important de connaitre certaines subtilités du HTML et ses bonnes pratiques.

Une des différences entre HTML4 et HTML5, c'est l'ajout de nombreuses balises sémantiques de section. Dans HTML4, pour mettre en évidence une partie du texte ou le structurer, on utilisait généralement des balises génériques comme <div> ou <span> associées à une identité ou une classe pour leur attribuer du sens.

Comme il existe de nombreuses balises sémantiques en HTML5, leur bonne utilisation est théoriquement synonyme d'un meilleur référencement/utilisation par les moteurs de recherche et autres robots. Visuellement, il n'y a cependant aucune différence entre une balise ayant un sens (comme <header>) avec une balise qui en est dépourvue (comme <div>). Leur utilisation relève donc de la bonne pratique plutôt que d'une obligation.

Pour insérer un retour a la ligne on utilise la balise orpheline <br />. Un retour chariot n'est pas pris en compte dans un document HTML.

V. Détail des principales balises HTML5

A venir...

______________________________

Ce cours a été écris par mes soins grâce à mes connaissances personnelles, mes cours d'ISN de Terminale S et mes cours de première année de DUT Informatique. Il permet de faire un premier pas dans le monde du web, mais vous ne serez pas capable de faire de site internet tout de suite après ce cours. Vous aurez de solide connaissance qu'il faudra alimenter en s'exercent (c'est en forgeant que l'on devient forgeron). Si vous avez des questions n'hésitez pas !

Deux autres cours ayant pour sujet le CSS et le JavaScript paraîtrons par la suite !

Modifié 16 juin 2017 par Zzouligan