Réseaux et langages web - TD1

L2 MIASHS

Le langage HTML

Le langage HTML est à la base de la conception de toutes les pages web. Son rôle est de décrire, de structurer et d'organiser le contenu d'une page web (texte, sections, titres, paragraphes, images, liens…). La structure d'un fichier HTML est indiquée grâce à des balises.

La norme HTML a évolué depuis les années 90. Aujourd'hui, la norme est le HTML 5.

Il est important de garder en tête que HTML gère le contenu et la structure de votre page web, mais pas sa mise en forme. La mise en forme (polices, couleurs, bordures, marges, etc.) est gérée de manière indépendante par le langage CSS qui fera l'objet d'une autre séance.

1. Une première page en HTML

  1. Ouvrez un éditeur de texte (atom ou autre) et entrez le texte que vous désirez. Il doit comporter au moins 3 phrases. Enregistrez le fichier avec comme nom test.html dans votre espace personnel et ouvrez ce document dans votre navigateur (double clique ou clique droit - ouvrir avec - Mozilla Firefox)

    Un fichier HTML doit avoir un nom qui finit par .html Il peut ensuite s'ouvrir soit avec un éditeur de texte (si on veut le modifier) soit avec un navigateur (si on veut le visualiser). Les développeurs web travaillent souvent avec les 2 fenêtres (éditeur de texte et navigateur) ouverts côté à côté afin de visualiser rapidement dans le navigateur l'effet d'une modification dans le fichier texte.

  2. Modifiez le fichier et entrez plusieurs retours à la ligne entre la 2ème et 3ème phrase du texte. Rechargez le fichier et observez : le texte apparaît-il comme vous l'avez écrit ?

  3. En HTML, on doit utiliser des balises pour indiquer la structure de la page. Les balises encadrent une zone de texte de la manière suivante <element>texte</element>. On ne peut pas écrire n'importe quoi à la place de element, il faut utiliser les balises fournies par le langage HTML (en voici quelques unes). Par exemple : Entourez chacune des 3 phrases par <p> et </p>. Rechargez la page et observez. À votre avis que signfie p ?

La structure de base d'une page en HTML est la suivante :

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8" />
      <title>Titre</title>
    </head>
    <body>
    ...
    </body>
  </html>
  1. Recopiez le code ci-dessus dans votre fichier HTML. Placez vos 3 phrases à l'intérieur de l'élément body, c'est-à-dire entre les deux balises <body> et </body> (à la places des ...). Changez le titre de la page en "Ma première page HTML".

    Pour des questions de visibilité, et pour éviter les erreurs, il est fortement recommandé d'indenter votre code HTML afin de faire apparaitre clairement l'imbrication des éléments HTML. L'idée étant qu'un élément HTML à l'intérieur d'un autre doit être décalé d'une tabulation de plus vers la droite.

  2. Entourez la première phrase avec les balises spéciales <!-- et --> et observez la page. Quel est l'effet des balises <!-- et -->?

  3. Pour cette question, veillez à ce qu'au moins un de vos paragraphes/titres comprenne un caractère accentué ("à", "é", etc.). Mettez en commentaire (cf question précédente) la ligne <meta charset="utf-8" />. Quelle conséquence observez-vous ? Qu'en déduisez-vous sur l'utilité de cette balise HTML ?
  4. Dans la navigateur, visualiser le code source de votre page à l'aide du menu contextuel (click droit n'importe où sur la page) ou directement CTRL+U.
  5. Retrouvez dans le code source de l'énoncé de ce TD (qui n'est autre qu'une page HTML !) quelle balise on utilise pour mettre en valeur un bout de texte comme cela par exemple. Servez-vous de cette balise pour mettre des termes en valeur dans votre document. Même chose pour cette autre type de distinction d'un bout de texte.

    Attention : une confusion courante consiste à penser que les deux dernières balises servent à "mettre en gras" et "mettre en italique" un portion de texte. En vérité, ces balises servent à indiquer dans un document HTML que ces portions sont "à mettre en valeur". Le fait qu'une portion de texte "à mettre en valeur" se retrouve en gras est un comportement par défault qui peut être changé à l'aide d'un style CSS (que nous verrons plus tard). On pourrait alors tout à fait demander que les portions de texte "à mettre en valeur" soient simplement écris dans une autre couleur plutôt qu'en gras. Cet exemple rappelle un principe fondamental du web :

    • HTML gère la structure et le contenu d'un document
    • CSS gère sa mise en forme

2. Des balises en plus

  1. Ajoutez <br/> au milieu de la 2ème phrase. Que se passe t-il ? La balise <br/>, contrairement aux balises vues jusqu'à présent, s'utilise seule et non pas en deux fois (balise ouvrante + balise fermante). Il existe plsieurs balises de ce type, on les appelles les "balises orphelines". C'est le cas lorsqu'une balise n'est pas censée avoir de contenu. On dit alors que la balise s'ouvre et se referme immédiatement.
  2. Ajoutez des titres avec les balises <h1>...</h1> et <h2>...</h2>.
  3. Recopiez le code HTML suivant dans votre page HTML : <a href="https://www.univ-lille.fr/">Ma fac !</a>. À votre avis à quoi sert cette balise ?
  4. Créez une liste avec l'élément ul et ajoutez des items dans cette liste avec des éléments li.
  5. Changez la liste en liste ordonnée en remplaçant ul par ol. Quelle différence y a t-il entre ces deux balises ?
  6. Intégrez une image à votre page à l'aide de la balise img
  7. Intégrez à votre page une vidéo YouTube à l'aide de la balise iframe.

3. CSS

Faites une recherche sur Google sur le fonctionnement des feuilles CSS et servez-vous en pour essayer de mettre un peu de couleur dans vore page !