Chapitre 1 : Introduction

ISN 2015/2016

Lors de votre navigation dans la page, pour revenir au menu, cliquez sur le titre de la section ou du paragraphe.

Le langage HTML


  1. Présentation

    Le standard de base de représentation des données dans une page Web est le langage HTML. Il a été introduit en 1991 comme les URL, les adresses web, par Tim-Berners Lee le père fondateur du Web. Il ne faut pas confondre Internet, le réseau informatique planétaire, développé par les Etats-Unis depuis les années 60 et le Web qui est une application de l'internet consistant en l'échange de pages web en HTML entre des machines hôtes, des serveurs, et des machines clients, des ordinateurs personnels. Le protocole d'échange de pages web s'appelle HTTP et chaque page web est référencée de façon unique par son URL .

    Le langage HTML est développé depuis le début des années 90 par le consortium W3C présidé par Tim-Berners Lee. C'est un lange de balisage qui permet de structurer le contenu des pages web dans différents élements appelés balises dont la liste est fixée. L'ensemble des balises et leurs régles d'agencement constituent la grammaire HTML, qui précise l'ensemble des codes HTML syntaxiquement corrects. Certaines balises HTML comme < div > sont des conteneurs universels qui n'ont pas de sens particulier, d'autres comme < nav > (pour les menus) ont une sémantique reconnue par les navigateurs ou les robots qui explorent les pages web. Il est recommandé d'utiliser des balises avec une sémantique adaptée au contenu lorsqu'elles existent .

    De plus on peut personnaliser le rendu d'une page HTML en redéfinissant l'affichage des balises dans des feuilles de style CSS . Ainsi pour créer des pages web, il faut maîtriser HTML pour le contenu et CSS pour la forme. Pour obtenir le code HTML d'une page web (celle-ci par exemple), il suffit de l'ouvrir avec un navigateur, de faire un clic droit à un endroit quelconque de la page et de sélectionner Voir le code source. Pour voir le code HTML et le code de la feuille de style CSS reliée, on peut sélectionner Inspect Element with Firebug si on utilise Firefox et que le module Firebug est installé dans le navigateur.

    Selon le navigateur (Internet Explorer, Firefox ...) et les versions de HTML et CSS employées, les pages HTML peuvent être affichées différemment, certaines fonctionnalités récentes n'étant pas prises en charge par les navigateurs anciens. Pour régler les problèmes de compatibilité, on pourra consulter le site caniuse.

    Tout contenu HTML doit être enfermé dans un élément du langage (une balise). On peut personnaliser chaque élément en associant des valeurs à des des propriétés (ou attributs), les attributs sont toujours spécifiés dans la balise d'ouverture. Il existe deux types d'éléments :

    • ceux constitués d'une balise ouvrante et d'une balise fermante qui entourent le contenu ainsi :
      <nom_element attribut1="valeur1" attribut2="valeur2"> contenu </nom_element>

    • ceux constitués d'une balise orpheline, le contenu étant une valeur de l'un de ses attributs :
      <nom_element attribut1="valeur1" attribut2="valeur2" />

    La spécification actuelle de HTML est HTML5, pour plus d'informations sur l'histoire des différentes versions d'HTML, on peut consulter cette page .
    A la fin des années 90, le W3C a défini une première version de XML, un langage de balisages plus général et plus strict, où l'utilisateur peut définir ses propres balises. XHTML a été introduit en 2000, c'est une version stricte de HTML définie comme une spécification de XML pour le Web. D'autres spécifications XML existent comme MathML pour la création de formules mathématiques, SVG pour le dessin vectoriel et les formats Doc de Windows et OpenDocument s'appuient sur XML.
    Actuellement on peut écrire des pages HTML en HTML5 (version plus souple que nous utiliserons) ou en XHTML (plus rigoureuse et mieux adaptée aux navigateurs moins puissants des appareils embarqués qui ne savent pas interpréter le mauvais code HTML).

    Les balises HTML peuvent être imbriquées mais toute balise ouverte doit être refermée dans l'ordre correspondant à son ouverture. Tout chevauchement est interdit ! Le code ci-dessous est correct, la balise <p> est la balise parente de la balise <em> qui est une balise fille de <p> :

     <p> Ce paragraphe contient un mot  <em> important  </em>   </p>      

    Mais le code suivant est incorrect :

     <p>  Ce paragraphe contient un mot  <em> important  </p>   </em>      

    Les commentaires (code non interprété) sont insérés ainsi :

    		 <!-- Ceci est un commentaire -->     

    Le contenu minimal d'une page HTML est le suivant (si la balise body n'a pas de balise fille, rien ne s'affiche) :

    <!DOCTYPE html >
    <html>
    <head>
    <title>Contenu minimal d'une page HTYML </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    </head>
     <body>
       <!-- Ici le contenu de la page, ceci est un commentaire -->
     </body>
    </html>    

    • La déclaration DOCTYPE est une balise spéciale qui précise le type de document qui va être créé
    • L'élément html est la racine du document, le parent de tous les autres
    • L'élément head contient des meta-données qui seront invisibles (à part le contenu de title qui apparaît dans l'onglet) : le titre de la page, l'encodage (valeur de l'attribut charset ) ...
    • l'élément body va contenir le corps du document, l'ensemble des éléments visibles lors de l'affichage du contenu de la page par un navigateur.

    Ainsi un document HTML peut se représenter sous la forme d'un arbre de racine la balise html qui a pour filles head et body etc ... Les éléments sont les noeuds de l'arbre, une balise ouvrante indique le début d'un noeud et les balises contenues entre la balise ouvrante et la balise fermante constituent un sous-arbre enraciné sous ce noeud.
    Dans un fichier HTML, les données sont organisées dans une structure arborescente comme dans le système de fichiers d'un disque.

    Voici le code d'un premier exemple exemple 1 (cliquer sur le lien pour afficher le résultat) :

    	 <!DOCTYPE html >
    <html>
    <head>
    <title>Exemple1  </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    </head>
     <body>
      <p>
       Bonjour ceci est du  HTML5 
      </p>
       <p>
       Voici le logo :   <img  src="http://www.w3.org/html/logo/downloads/HTML5_Logo_128.png" alt="logo HTML5"/>
      </p>
     </body>
    </html>    
    		

    Et voici une représentation de l'arbre des balises du document html précédent réalisée en svg avec le logiciel dia de création de diagrammes :

    html head body meta title p p img

  2. Document en HTML

    Pour l'apprentissage du langage HTML, les tutoriels du site www.w3schools.com sont très agréables, je les recommande.

    Ouvrir un éditeur de texte, recopier le code minimal d'une page HTML donné ci-dessus et enregistrer le document sous le nom premierdocumenthtml.html .

    On se place à l'intérieur de la balise body pour structurer le corps d'un premier document HTML.

    On va présenter trois familles de balises parmi les plus courantes : les balises de types block ,inline ou listes :

    • Balises de type block

    • Elles permettent de structurer les grandes divisions du texte. Une balise de type block crée un retour à la ligne après et ainsi des balises de type block successives se superposent. L'espace entre les block dépend de la balise et des marges extérieures (margin) définies par le CSS.
      Une balise block occupe par défaut tout l'espace horizontal disponible mais on peut fixer sa taille avec la propriété CSS width .
      Les divisions principales de la page peuvent être délimitées par la balise conteneur universelle <div> qui peut contenir des subdivisions plus petites dans des balises conteneurs de paragraphe de type <p> . Il existe aussi des balises de titres, classées par orde d'importance de <h1> à <h6> . Depuis HTML5 ont été introduites des balises sémantiques pour l'en-tête, une section de page (contenu regroupé par thème), le menu de navigation, le pied de page ... Ces balises peuvent être remplacées par la balise <div> mais leur sémantique prédéfinie rend plus lisible la strucuture de la page en particulier pour les robots des moteurs de recherche.

      Balise de type block (ne pas oublier la balise fermante) Description
      < div > Balise universelle
      < p > Paragraphe
      < h1 > Titre principal
      < h2 > Titre secondaire
      < header > En-tête de la page ne pas confondre avec l'en-tête du document dans la balise <head> qui lui est invisible.
      < section > Section de page pour regrouper des contenus sur le même thème
      < footer > Pied de page avec les contacts, les mentions légales ...
      < nav > Menu du document avec les principaux liens de navigation

      Exercice 7


      1. Recopier le code suivant dans la page premierdocumenthtml.html .

        <header>
        <h1> 
        HTML et CSS
        </h1>
        </header>
        
        <nav>
        <p> Menu : </p>
        Le langage HTML
        Le langage CSS  
        </nav>
        
        <section>
        <h2> Le langage HTML </h2>
        <div>
        <p>Il a été créé par Tim-Berners Lee en 1992, son ancêtre est le langage SGML. 
        C'est un langage de balisage qui permet de structurer un document à l'aide de balises. <br/>
        On distingue deux pricipaux  types de balises : 
        les balises de type  block  et celles de type inline. 
        Les caractéristiques d'une  balise peuvent être précisées par des 
        informations complémentaires  dans les attributs  de la balise.</p>
        </div>
        </section>
        
        <footer>
        Contact : Moi l'auteur du document 
        </footer>
        
        	 

      2. Est-ce qu'un saut de ligne dans l'éditeur de texte se matérialise par un saut de ligne à l'affichage ?
        Il existe une balise orpheline réalisant un saut de ligne, c'est < br/ > .
        Utiliser cette balise pour insérer un saut de ligne après la première phrase du premier paragraphe sur HTML5.

      3. Compléter le contenu de l'élément section avec une nouvelle section de titre "Le langage CSS" pour obtenir l'affichage suivant :

        Le langage CSS

        Le langage CSS (Cascading Style Sheets) est le complément du langage HTML. Il permet de créer des feuilles de style associées à un document HTML et définissant la mise en page et le style d'affichage des balises du document.
        L'association HTML/CSS symbolise la séparation entre le contenu (HTML) et la forme (CSS).


      4. Dessiner l'arbre de la structure du document HTML réalisé.

      5. Changer l'encodage du navigateur dans l'onglet Affichage > Encodage des caractères . Que remarque-t-on ?

    • Balises de type inline

    • Une balise de type inline ne provoque pas de saut de ligne avant ou après et elle occupe juste l'espace horizontal nécessaire. On ne peut pas définir la largeur d'une balise inline avec la propriété CSS width.
      On utilise une balise inline pour insérer un objet particulier dans une ligne.

      Il existe des balises inline qui permettent d'affecter un sens particulier à une portion de texte. Un style par défaut est défini pour chacune de ces balises mais il peut être modifié dans une feuille de style CSS. La balise universelle de type inline est la balise <span> , qu'on peut personnaliser avec une feuille de style CSS pour obtenir le même effet que les balises ci-dessous.

      Il faut noter qu'on peut faire afficher une balise block comme une balise inline et vice-versa en utilisant la propriété CCS display, qui peut prendre les valeurs block, inline inline-block ou none.

      Balise de type inline (ne pas oublier la balise fermante) Description
      < span > Balise universelle sans sémantique particulière.
      < em > Texte particulier (mise en italique par défaut)
      < strong > ou < b> Texte important (mis gras par défaut)
      < mark > Texte marqué (surligné en jaune par défaut)
      < sup > ou < sub > Texte en exposant ou en indice
      < code > Insertion de code (police à espacement fixe de type télétype)

      Il existe des balises inline qui permettent d'insérer un objet particulier comme une image, un lien hypertexte vers une page web ou vers une ancre dans la même page.
      Les images insérées doivent être légères, donc de format compressé, comme png, jpeg (pour les photos), gif ( pour les images animées), svg (pour les dessins vectoriels) mais pas de format non compressé comme bmp.

      Exemple d'utilisation Description
      Balise orpheline d'insertion d'image <img />
      < img src="images/lena.png" alt="photo de Lena"/>
      BInsère l'image lena.png indiquée par son chemin relatif, sinon affiche le message "photo de lena"
      <img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_128.png" alt="logo HTML5"/> Insère le logo HMTL5 téléchargé à partir de son url, sinon affiche le message "logo HTML5"
      Balise d'insertion de lien hypertexte <a >
      < a href="http://www.lemonde.fr"> Site du Monde </a>
      Le texte "Site du Monde" devient un lien hypertexte vers le site dont l'url est la valeur de l'attribut href.
      < a href="#nom_ancre"> Lien vers une ancre </a> Le texte "Lien vers une ancre" devient un lien hypertexte vers une ancre située à un autre endroit dans la page.
      Cette ancre est la balise de la page dont l'attribut id a été défini ainsi avec la valeur "nom_ancre" : < balise id="nom_ancre"> contenu </balise>

      Exercice 8

      Ouvrir avec un éditeur de texte le fichier premierdocumenthtml.html .

      1. Insérer des balises dans la section sur HTML qui permettent de :

        • créer un lien hypertexte du nom "Tim Berners-Lee" vers sa page Wikipedia
        • mettre en gras le mot SGML
        • mettre en italique les mots inline et block
        • insérer un saut de ligne puis une nouvelle ligne dans le paragraphe sur HTML5 avec l'expression "Voici le logo HTML5" suivie du logo HTML5 de dimensions 256x256 pixels (on utilisera une url )

      2. Insérer un saut de ligne puis une nouvelle ligne dans le paragraphe sur CSS avec l'expression "Voici le logo CSS" suivie du logo CSS de dimensions 256x256 pixels (on utilisera un chemin relatif vers l'emplacement de l'image téléchargée sur le disque).

      3. Pour les termes HTML, CSS et Contact contenus dans la balise de menu nav, créer des liens hypertextes vers des ancres adéquates placées dans la page.

    • Balises de type listes

      Un item d'une liste est contenu dans une balise li .
      On distingue deux types de listes :

      • Les listes ordonnées dont les items sont contenus dans une balise <ol> :
        Sélectionner la liste ci-dessous puis avec un clic droit sélectionner Voir le code :
        1. Le premier jour il fit ...
        2. Le deuxième jour il fit ...
        3. Le troisième jour il fit ...

      • Les listes non ordonnées (ou listes à puces) dont les items sont contenus dans une balise <ul> :
        Sélectionner la liste ci-dessous puis avec un clic droit sélectionner Voir le code :
        • Le ciel
        • le soleil
        • La terre

      Il faut savoir que les listes sont une sorte de balises block. Une balise <div> , <nav> , <section> etc ..., peut contenir une liste mais pas une balise <p> (le navigateur affichera la page en général mais le validateur retournera une erreur).

      Exercice 9

      Ouvrir avec un éditeur de texte le fichier premierdocumenthtml.html

      1. Créer une liste ordonnée pour classer les trois items du menu : HTML, CSS et Contacts dans la balise < nav >

      2. Insérer dans le document une section "Liens" contenant un liste non ordonnée de liens vers les url suivantes :

      3. Rajouter dans le menu un item "Liens" avec un lien hypertexte vers cette subdivision

      4. Tester la validité du code HTML produit en se rendant sur la page du validateur du W3C .
  3. Prolongements possibles

    Pour l'apprentissage du développement de pages Web, le site www.w3schools.com propose de nombreux tutoriels fort instructifs sur toutes les ressources nécessaires : HTML, CSS, Javascript, SQL, DOM ...

    Sujets d'exposés

    Voici quelques propositions de sujets autour des thèmes des réseaux informatiques et du développement de sites web. Dans le cadre de l'exposé obligatoire du premier trimestre, vous pouvez choisir l'un des sujets suivants pour préparer à l'aide de l'outil informatique un support destiné à une présentation orale de 6 minutes :

    1. L'internet et le web c'est pareil ?
    2. A quoi servent les langages PHP et Javascript dans le développement de pages web ?
    3. Présentation de Javascript : histoire et utilisations. Faut-il désactiver Javascript dans son navigateur ? Donner trois exemples de programmes Javascript exécutés dans un page web :
      • un script avec une boucle while ou for qui affiche les termes successifs d'une suite récurrente
      • un script qui manipule le DOM pour rendre visible ou invisible un paragraphe
      • un script qui saisit dans un tableau les notes d'un élève et affiche la moyenne et l'écart-type de cette série statistique.
    4. Que signifie l'acronyme HTTP ? A quoi servent les protocoles résau ? Quels sont les principaux protocoles utilisés sur internet ?
    5. Comment est définie une URL telle que http://www.lemonde.fr/ ?
    6. Qu'est-ce que le DOM ? Donner un exemple de manipulation du DOM avec Javascript.
    7. Certificats SSL : comment s'assurer que la connexion est cryptée ou vérifier l'identité d'un site web ? Existe-t-il des failles ?
    8. Bases de données et sites web, comment ça marche ? Petite présentation du SQL. Qu'est-ce qu'une injection SQL ?