Aller au contenu principal

Le langage HTML

🎯 Objectif​

Dans le cadre de ces travaux pratiques, vous allez étudier le langage HTML et créer votre propre page.

🗂 1. Préparation​

Afin de ne pas mélanger vos productions entre les différents chapitres, mettre à jour les dossiers SNT selon l'ordinateur que vous utilisez :

💻 Ordinateur portable
  1. Lancer l'Explorateur Windows
  2. Se rendre dans le dossier Mes documents
  3. Créer le dossier SNT s'il n'existe pas déjà (clic droit, Nouveau > Dossier)
  4. Dans le dossier SNT, créer le dossier Web
  5. Dans le dossier Web, créer le dossier langage_html
🖥 Ordinateur fixe des salles informatiques
  1. Depuis le bureau, cliquer sur l'icône intitulée Zone personnelle
  2. Créer le dossier SNT s'il n'existe pas déjà (clic droit, Nouveau > Dossier)
  3. Dans le dossier SNT, créer le dossier Web
  4. Dans le dossier Web, créer le dossier langage_html

⌨️ 2. Code source d'une page Web​

Le langage HTML (pour HyperText Markup Language) est le langage informatique utilisé pour construire un page Web. Le texte brut correspondant au code informatique d'une page Web donnée est appelé code source.

Le code source de toute page Web peut être consulté très facilement sur les navigateurs Web Firefox, Chrome ou Edge par le raccourci clavier CTRL+U ou bien par un clic droit sur la page et la sélection de l'option Afficher la page source.

🛠 Visualisation du code source d'une vraie page​

  1. Se rendre sur la page d'introduction au langage HTML de Mozilla
  2. Afficher le code source de la page selon l'une des méthodes décrites précédemment

📄 Votre première page web​

Vous allez créer votre première page HTML. Pour cela, il est nécessaire d'utiliser un éditeur de texte tel que l'application Bloc-notes sous Windows, Notepad++ ou Visual Studio Code.

Un fichier texte ne doit pas être confondu avec un document texte élaboré à partir de logiciels comme Microsoft Word ou LibreOffice Writer. Un fichier texte ne contient que des caractères sans aucune information de présentation (par exemple la taille des caractères, la couleur, ...).

Création du fichier​

🛠 Création de votre première page HTML​

  1. Lancer l'application Notepad++
📦 Instructions pour obtenir Notepad++ (si absent de votre ordinateur)

L'application Bloc-Notes de Windows n'est pas la plus pratique pour travailler sur du code HTML. Il existe des applications plus appropriées dont les fonctionnalités facilitent grandement l'écriture du code.

🛠 Télécharger et lancer Notepad++​

  1. Télécharger Notepad++ v8.4.6 version portable (zip)
  2. Se rendre dans le répertoire où le fichier téléchargé a été enregistré
  3. Faire un clic-droit sur celui-ci et choisir l'option Extraire tout...
  4. Lancer l'application depuis le dossier décompressé
  5. Passer l'application en français en allant dans Settings puis Preferences... et choisir Français au niveau du champ Localization
  1. Copier/coller le code HTML suivant :
<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta name="author" content="Personne" />
    <meta name="description" content="Ma toute première page HTML !" />
    <title>Ma page !</title>
  </head>
  <body>
    Bonjour, ceci est ma première page HTML
  </body>
</html>
  1. Activer le mode HTML depuis le menu via Langage → H → HTML
  2. Enregistrer le fichier dans le dossier langage_html créé en début de TP en utilisant le raccourci clavier CTRL+S et en le nommant page.html
  3. En utilisant l'Explorateur Windows, retrouver le fichier page.html
  4. Double-cliquer sur le fichier page.html
  5. Un navigateur Web doit s'ouvrir automatiquement et vous présenter son contenu
Cours

Les textes tels que <title></title> ou <body></body> sont appelés des balises HTML. Les balises permettent de définir les éléments structurant le contenu d'un document HTML. Chaque élément joue un rôle bien précis.

Modification du titre de la page​

La balise <title></title> permet de définir l'élément titre d'une page. Elle est contenue entre les balises <head></head> qui définissent l'élément en-tête. Ce dernier élément est utilisé pour préciser certaines caractéristiques et informations concernant la page. Aucune des données renseignées n'est directement visible pour l'internaute à l'exception du titre.

Explication

Les informations renseignées via les balises <meta name="author" ...> et <meta name="description" ...> sont par exemple utilisées par les moteurs de recherche (Google, Bing, ...) pour afficher les résumés de la page de résultats d'une recherche.

🛠 Modifier le titre d'une page​

  1. Retourner dans l'application Notepad++ sans fermer le navigateur avec le raccourci clavier ALT+Tab
  2. Retrouver le texte "Ma page !". Il se situe au niveau des balises <title></title>.
  3. Remplacer "Ma page !" par un autre texte quelconque
  4. Enregistrer le fichier en utilisant le raccourci clavier CTRL+S
  5. Retourner dans le navigateur avec le raccourci clavier ALT+Tab
  6. Actualiser la page en appuyant sur F5 ou par le raccourci clavier CTRL+R
  7. Localiser l'endroit, dans tout le navigateur, où est affiché le titre (cherchez bien 🧐 !). Constatez-vous le changement ?

Modification du corps de la page​

La balise <body></body> permet de définir l'élément corps d'une page, c'est-à-dire le contenu visible dans le navigateur Web.

🛠 Saisir le corps d'une page et gérer les sauts de ligne​

  1. Remplacer le contenu entre les balises <body></body> (sans supprimer celles-ci) par cet extrait de La Cigale et la Fourmi de Jean de La Fontaine :
La Cigale, ayant chanté
Tout l'été,
Se trouva fort dépourvue
Quand la bise fut venue.
Pas un seul petit morceau
De mouche ou de vermisseau.
Elle alla crier famine
Chez la Fourmi sa voisine,
La priant de lui prêter
Quelque grain pour subsister
Jusqu'à la saison nouvelle.
  1. Enregistrer votre fichier (CTRL+S)
  2. Retourner dans le navigateur (ALT+Tab)
  3. Actualiser la page (F5 ou CTRL+R)
  4. Qu'observez-vous ?
Explication

En HTML, les sauts de ligne présents dans le code source ne sont pas pris en compte, tout comme les espacements multiples. Tout saut de ligne doit être explicitement indiqué grâce à la balise <br>

  1. Ajouter la balise <br> à la fin de chaque ligne afin de correctement mettre en forme le texte

📄 De nouvelles balises​

Une nouvelle page​

Vous allez maintenant créer une page dédiée à votre film préféré.

Pas de film préféré ?

À défaut d'avoir un film préféré, décrire le film Intouchables. C'est actuellement le 3ème film ayant totalisé le plus d'entrées en France à ce jour avec 19 490 688 d'entrées.

🛠 Créer la nouvelle page HTML​

  1. Créer un nouveau fichier dans Notepad++
  2. Copier/coller le code ci-dessous :
<!doctype html>
<html lang="fr">

<head>
    <meta charset="utf-8">
    <title>Mon Film Préféré</title>
</head>

<body>
    TITRE DU FILM

    <p><img src="" alt=""></p>

    <p><em>Ce document a été réalisé par PRENOM NOM</em></p>

    Informations générales

    <ul>
        <li>Année de Sortie :</li>
        <li>Réalisateur : </li>
        <li>Acteurs Principaux : </li>
        <li>Genre : </li>
    </ul>

    Résumé

    Sources des informations et médias

</body>
</html>
  1. Activer le mode HTML depuis le menu via Langage -> H -> HTML
  2. Enregistrer immédiatement le fichier dans le dossier langage_html en le nommant film.html
  3. Visualiser le fichier dans un navigateur

Les éléments de titre​

En HTML, il est possible de créer des éléments de titre au sein d'une page grâce aux balises suivantes :

  • <h1></h1> (titre),
  • <h2></h2> (sous-titre),
  • <h3></h3> (sous-sous-titre)
  • ...
  • <h6></h6>

🛠 Définir le titre principale​

  1. Définir le texte TITRE DU FILM en tant que titre principal de la page en l'englobant par des balises <h1></h1>
Exemple
<h1>TITRE DU FILM</h1>
  1. Enregistrer votre fichier et visualiser le résultat dans le navigateur après actualisation (F5 ou CTRL+R)
  2. Personnaliser le texte "TITRE DU FILM" par le nom du film choisi
  3. Visualiser le résultat (toujours en enregistrant et actualisant)

🛠 Définir les titres secondaires​

  1. Englober chacun des textes suivants par le couple de balises <h2></h2> :
    • Informations générales
    • Résumé
    • Sources d'information
Exemple
<h2>Informations générales</h2>
  1. Visualiser le résultat (toujours en enregistrant et actualisant)

L'élément de haute importance​

Vous allez compléter la section Information générale et utiliser une nouvelle balise pour mettre en valeur les descripteurs (Année de sortie, Réalisateur, ...).

🛠 Mettre en valeur des portions de texte​

  1. Renseigner les informations générales du film choisi
  2. Englober chacun des textes suivants par le couple de balises <strong></strong> :
    • Année de Sortie :
    • Réalisateur :
    • Acteurs Principaux :
    • Genre :
Exemple
<li><strong>Année de sortie : </strong> 2008</li>

L'élément paragraphe​

Vous allez ajouter du contenu à la section Résumé. Sur papier, les longs textes sont structurés en paragraphes. Il est possible de faire de même en HTML à l'aide de l'élément paragraphe défini par le couple de balise <p></p>.

🛠 Ajouter le résumer du film​

  1. Retrouver un résumé de votre film
  2. Copier/coller le texte trouvé (vous êtes autorisés pour cette fois-ci, mais ça reste du plagiat et c'est interdit)
  3. Le structurer en paragraphes à l'aide de couples de balises <p></p>
Exemples

Exemple de paragraphe très court.

<p>Une seule ligne</p>

Les sauts de ligne n'étant pas significatifs, il est possible d'écrire ce même paragraphe comme ci-dessous.

<p>
   Une seule ligne
</p>

Il est possible de définir plusieurs paragraphes à la suite. Un passage à la ligne est automatiquement appliqué par le navigateur après chaque paragraphe.

<p>Paragraphe 1</p>
<p>Paragraphe 2</p>

L'élément lien hypertexte​

L'une des fonctionnalités révolutionnaires du Web est le lien hypertexte, c'est-à-dire la possibilité d'insérer un lien vers une autre page située n'importe où sur le Web. Un élément lien hypertexte se crée grâce au couple de balises <a href=""></a>. Vous constaterez une différence par rapport aux autres balises déjà rencontrées par la présence de href="".

Le texte href="" est un attribut de la balise <a>. Tout attribut a un nom (ici href) et une valeur (écrite entre guillemets). Les attributs permettent de transmettre des informations à une balise dont le fonctionnement se verra impacté.

L'attribut href permet d'indiquer l'URL du contenu vers lequel nous souhaitons faire pointer le lien hypertexte. Le texte englobé par les balises <a> sera mis en valeur et rendu cliquable.

Exemple

Voici un texte comportant un lien hypertexte vers le site de lycée. Le texte cliquable sera site du lycée.

Rendez-vous sur le <a href="http://www.lyceebachelardchelles.fr" />site du lycée</a>

Rendez-vous sur le site du lycée

🛠 Créer des liens hypertextes​

  1. Retrouver l'URL des pages où vous avez trouvé les informations concernant votre film
  2. Ajouter dans la section Sources un paragraphe précisant les sites utilisés en insérant un lien vers chacun

L'élément image​

Il est possible d'insérer un élément image sur une page Web grâce à la balise <img>. Elle dispose des attributs suivants :

  • L'attribut src qui est le chemin ou l'URL d'une image
  • L'attribut alt qui est un texte alternatif qui sera présenté par le navigateur si l'affichage de l'image se révèle impossible
Exemple

Nous avons téléchargé un fichier image image_800x600.jpg que nous avons enregistré dans le même dossier que notre page HTML. Cette image représente l'affiche du film Intouchable. Voici ci-dessous le code de la balise <img> dans cette situation.

<img src="image_800x600.jpg" alt="Affiche du film Intouchables">

🛠 Insérer une image​

  1. Trouver sur le Web une image de l'affiche de votre film au format .jpg ou .png
  2. Télécharger l'image et l'enregistrer dans le même répertoire que le fichier film.html
  3. Modifier la balise <img> déjà présente dans la page en conséquence
  4. Visualiser le résultat

🏁 Vous avez terminé ?​

Le langage CSS​

Le langage HTML permet de structurer le contenu d'un document. Le langage CSS permet de mettre en forme ce contenu. Vous allez cette fois ajouter un peu de couleur à votre page grâce au langage CSS. Pour cela :

  1. Modifier l'en-tête du document en ajoutant l'élément style ci-dessous
<head>
    <meta charset="utf-8">
    <title>Mon film préféré</title>
    <style>
        body {
            background-color: lightyellow
        }

        h1 {
            color: red;
            text-align: center;
        }

        h2 {
            color: green;
        }

        img {
            max-width: 200px;
        }
    </style>
</head>
  1. Enregistrer le document et visualiser le résultat dans un navigateur
  2. Consulter les pages suivantes pour découvrir d'autres propriétés CSS

Les métiers du Web​

info

Travaux pratiques inspirés de l'activité Écriture d'une page Web du lycée La Martinière Diderot à Lyon.