Aperçu des sections

  • Initiation à l'HTML

    Des exemples pratiques à toutes les étapes...

    Ce cours d'initiation au HTML rassemble des centaines d'exemples concrets. Nous avons privilégié la pratique aux exposés théoriques.

    Pour vous familiariser avec le code, nous nous invitons à reproduire les exemples, et donc à fuir, autant que possible, le copier-coller. Sous Windows, installez un simple éditeur de texte tel que Notepad ou tout autre éditeur de votre choix. Sous Mac, installez par exemple Gedit. Donnez un nom à votre document et enregistrez-le dans un dossier sur votre bureau en veillant à ce que le nom du fichier se termine par l'extension .html

    Ouvrez le document dans votre navigateur et contemplez votre travail. Vous êtes déjà un développeur Web. Vous pouvez aussi tester notre code en cliquant sur le lien au bas de chaque exemple. Il ne vous sera cependant pas possible d'éditer le code à votre convenance.


    Exemple

    <!DOCTYPE html>
    <html>
    <body>

    <h1>Mon premier titre</h1>

    <p>Mon premier paragraphe.</p>

    </body>
    </html>

    Testez le code !

    • Qu'est-ce que le HTML ?

      Le HTML est un langage à balises qui sert à structurer les documents Web (pages web). 

      • L'acronyme HTML désigne, en anglais, Hyper Text Markup Language
      • Un langage à balises est naturellement composé d'une collection de balises, tags.
      • Les documents en HTML sont ainsi composés de tags HTML
      • Chaque tag désigne un élément spécifique du document.


      Exemple

      <!DOCTYPE html>
      <html>
      <body>

      <h1>Mon premier titre</h1>

      <p>Mon premier paragraphe.</p>

      </body>
      </html>

      Testez le code !


      Explication de l'exemple

      • La première ligne, DOCTYPE, informe le navigateur sur le type de document qu'il aura à traiter: html.
      • Le texte entre les balises <html> et </html> décrit le document web.
      • Le texte entre les balises <body> et </body> (corps du document), décrit le contenu visible à l'écran.
      • Le texte entre les balises <h1> et </h1> décrit un titre.
      • Le texte entre les balises <p> et </p> décrit un paragraphe.
      Ce balisage permet ainsi au navigateur d'afficher à l'écran un document web comportant un titre et un paragraphe.


      Les balises HTML

      Les balises HTML sont des mots-clés (les noms des balises) entourés de <...>

      <balise>contenu</balise>

      • Les balises HTML apparaissent généralement par paire : <p> et </p>
      • La première balise du couple est la balise d'ouverture, la deuxième, la balise de fin. 
      • La deuxième balise est identique à la première à l'exception du slash avant le nom de la balise.


      Les navigateurs Web

      La fonction des navigateurs ( Chrome, IE, Firefox, Safari) est de lire les documents HTML et de les afficher à l'écran.

      Le navigateur n'affiche pas les balises HTML; il les utilises comme repères pour déterminer comment le document doit s'afficher à l'écran.



      Structure d'une page HTML

      Voici la structure de base d'une page HTML

      Structure page web

      Les différentes versions de HTML

      Depuis les premiers jours du web jusqu'à maintenant, il y a eu beaucoup de version du HTML

      dates du HTML


      Le <!DOCTYPE>

      Cette déclaration aide le navigateur à afficher correctement une page web. Il y a tant de documents disponibles sur le web qu'il est nécessaire de préciser au navigateur quel type de document il aura à traiter et la version HTML à utiliser.

      La déclaration doctype est insensible à la casse, ce qui fait que toutes les formes sont acceptables: 

      <!DOCTYPE html>
      <!DOCTYPE HTML>
      <!doctype html>
      <!Doctype Html>

      Déclarations courantes 


      HTML 5

      <!DOCTYPE html>


      HTML 4.01

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/html4/loose.dtd">

      XHTML 1.0

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

      Tous nos cours et exemples utilisent le HTML 5