Cours développement web ESILV

# Introduction au HTML

# Qu'est-ce que le HTML

Hypertext Markup Language (HTML) Il s'agit d'un langage de balisage basé sur SGML (un autre langage de balisage), et il est conçu pour représenter les pages web.

Hypertext veut dire que des pages peuvent être liées entre elles.

La première version de ce langage date de 1992.

C'est un format ouvert et standardisé par le W3C (opens new window) et le WHATWG (opens new window).

# Le squelette d'une page HTML

Une page html bien formée commence par le DOCTYPE. Aujourd'hui, on écrit simplement <!DOCTYPE html> pour signaler qu'il s'agit de HTML5.

On trouvera ensuite la balise <html> qui est l'élément racine du document. à l'intérieur, deux balises très importantes : <head> qui contiendra le titre (dans la balise <title>), les meta-données (dans des balises <meta>), et d'autres informations (comme les feuilles de style, dans des balises <style> ou <link>, cf. CSS) et la balise <body>, qui contiendra la partie visible du document, et donc le contenu principal.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titre de la page (Apparaît sur l'onglet du navigateur)</title>
</head>
<body>
    Contenu visible de la page
</body>
</html>

# Une page plus complète

<!DOCTYPE html>

 <!-- Balise html : Noeud racine du document HTML -->
<html lang="fr">

  <!-- Balise head :
       pour le titre du document,
       les meta-données,
       et les fichiers annexes (surtout CSS) -->
  <head>

    <!-- Jeu de caractère utilisé dans
         l'éditeur de texte ayant édité ce fichier -->
    <meta charset="utf-8" />

    <!-- Compatibilité pour les navigateur IE -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <!-- Titre du document -->
    <title>Titre apparaissant dans l'onglet</title> 

    <!-- Gestion du zoom du document -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Association d'une feuille de style -->
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />

    <!-- Association d'un fichier JavaScript
         /!\ selon la spec HTML il doit être ici... -->
    <script src="main.js"></script>
  </head>

  <!-- Balise body : partie du document visible dans le navigateur -->
  <body>

    <!-- Association d'un fichier JavaScript
         /!\ selon la spec HTML il NE doit PAS être ici, mais en pratique, si... -->
    <script src="main.js"></script>
  </body>
</html>

# Les balises importantes

# Les balises sémantiques

Il s'agit des balises dont le nom indique un sens quant à son contenu. Il est recommandé de les utiliser au maximum.

# Les balises structurante de la page

  • <nav> (seulement la nav de haut niveau)
  • <main> (1 seul par page)
  • <header> Il peut y en avoir plusieurs par page, notamment une par <body>, une par <section> et une par <article>
  • <footer> idem
  • <section> Contient une section de la page
  • <article> Contient par exemple un billet de blog, ou un commentaire
  • <aside> Dédié à une partie complètement indépendante du contenu de la page
  • <p> Pour paragraphe
  • <blockquote> Utilisée pour une citation d'une autre source

Toutes ces balises ont par défaut un display de type block (cf. CSS), ce qui signifie qu'avant et après la balise, si aucun style n'est ajouté à l'élément ni à son parent, il y aura un saut de ligne avant et un saut de ligne après.

# Les balises de listes

Il existe plusieurs types de listes :

  • <ol> et ses <li> pour une liste ordonnée (ordered list)
  • <ul> et ses <li> Liste non-ordonnée (unordered list)
  • <dl> son <dt> et son ou ses <dd> Liste de définition (definition list, definition term et definition description)

# Les tableaux

La balise <table> permet de faire des tableaux. À l'intérieur, la balise <thead> contiendra une ou plusieurs lignes avec les en-têtes du tableau (les titres des colonnes). Puis viendra <tbody> puis éventuellement la balise <tfoot>.

Chaque ligne sera marquée par une balise <tr> (table row), et chaque ligne contiendra une ou plusieurs <th> (table header cell) et/ou <td> (table data cell).

La balise <table> doit être utilisée pour afficher des données tabulaires, et en aucun cas pour de la mise en page.

# Les balises de formulaires

Un ensemble très important de balises concerne les formulaires, qui permettent des interactions avec l'utilisateur.

  • <form> Pour signaler un formulaire
  • <input type="text|checkbox|radio|number|date|color..." Permet à l'utilisateur de saisir des informations
  • <select> et ses balises enfants <option> pour une liste de choix
  • <textarea> pour permettre une saisie de texte plus long (un commentaire, par exemple)

# Les balises inline

  • <a> Définit un hyperlien, c'est-à-dire une liaison entre deux pages
  • <em> (emphasis - emphase, en français) Par défaut, les navigateurs mettent en italique le contenu de cette balise, et elle est utilisée pour quelque chose à prononcer différemment ;
  • <strong> (strong importance) Par défaut, les navigateurs mettent en gras le contenu de cette balise, et elle est utilisée pour signifier l'importance de son contenu (cf. html5doctor (opens new window)) ;
  • <img src="lien/vers/image.jpg"> Balise qui affichera une image ;
  • <button> Un bouton.

# Autres balises importantes à connaître

  • <video>
  • <audio>
  • <figure>

# Les balises non sémantiques

  • <div> et <span> sont des balises qui n'informent en rien de ce qu'elles contiennent, elles sont donc non sémantiques.

La balise <div> a pour display par défaut block (cf. CSS).

Au contraire, la balise <span> a pour display par défaut inline (cf. CSS), ce qui signifie qu'il n'y aura ni saut de ligne avant ni saut de ligne après la balise.

  • <i> (Initialement italique) Les navigateurs mettent en italique le contenu de cette balise, et elle est utilisée pour les mots techniques ou traduits, les lecteurs d'écran sont censé utilisés une voix alternative pour le contenu.
  • <b> (Initialement bold, c'est-à-dire à police grasse) Les navigateurs mettent en gras le contenu de cette balise, et elle est utilisée pour les mots-clés

# Les balises de <head>

  • <meta> Permet d'ajouter des méta-information sur la page
  • <script> Permet d'ajouter des scripts JavaScript
  • <style> Permet d'ajouter du style CSS
  • <link rel="stylesheet" src="chemin/vers/fichier.css"> Permet de lier un fichier CSS

# Les attributs des balises

Presque toutes les balises acceptent des attributs. Ils permettent d'ajouter des informations très importantes soit directement pour l'utilisateur (href="page-liee.html" pour les balises <a> ou type="password" pour les champs de saisie <input>), soit pour les moteurs de recherche, soit pour les lecteurs d'écran, soit pour l'aspect uniquement visuel (CSS).

← Introduction aux CSS →