Activité 2 – Découverte du HTML

Objectifs :

Comprendre le rôle des balises HTML
Créer une page web simple
Utiliser un éditeur en ligne (JSFiddle)

Matériel : Navigateur web avec accès à jsfiddle.net

Introduction

HTML (HyperText Markup Language) est un langage de balisage permettant de décrire la structure d'une page web. Ce n'est PAS un langage de programmation : il n'y a ni conditions, ni boucles.

À faire vous-même 1

Ouvrez jsfiddle.net dans votre navigateur.

Dans la fenêtre HTML, écrivez le code suivant :

<h1>Hello World! Ceci est un titre</h1>
<p>Ceci est un <strong>paragraphe</strong>. Avez-vous bien compris ?</p>

Cliquez sur Run pour voir le résultat.

Question : Qu'observez-vous dans la fenêtre Result ?

Les règles des balises

Une balise ouvrante : <nom>
Une balise fermante : </nom>
Les balises doivent être correctement imbriquées

Correct : texte

Interdit : texte

À faire vous-même 2

Modifiez votre code pour ajouter des attributs :

<h1>Ceci est un titre</h1>
<h2 class="sous-titre">Ceci est un sous titre</h2>
<p id="para_1">Ceci est un <strong>paragraphe</strong>. Avez-vous bien compris ?</p>

Question : À quoi servent les attributs class et id ?

Structure complète d'une page HTML

À faire vous-même 3

Créez un fichier index.html sur votre ordinateur avec un éditeur de texte (Notepad++, Brackets, ou le Bloc-notes).

Écrivez le code suivant :

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Voici mon site</title>
  </head>
  <body>
    <h1>Hello World! Ceci est un titre</h1>
    <p>Ceci est un <strong>paragraphe</strong>. Avez-vous bien compris ?</p>
  </body>
</html>

Double-cliquez sur le fichier pour l'ouvrir dans votre navigateur.

Quelques balises utiles

<a href="url">texte</a> : créer un lien hypertexte
<img src="image.jpg" alt="description"/> : afficher une image
<ul><li>item</li></ul> : liste non ordonnée
<ol><li>item</li></ol> : liste ordonnée

À faire vous-même 4

Complétez votre page HTML pour qu'elle contienne :

Un titre principal (<h1>)
Un paragraphe avec du texte en gras ()
Un lien vers https://fr.wikipedia.org
Une liste de 3 éléments

Écrivez votre code HTML ci-dessous :

À retenir :

HTML structure le contenu (pas la mise en forme)
Chaque balise a une signification sémantique
Les balises doivent être correctement imbriquées

Sciences numériques et technologie