TP 1 : Decouverte du HTML

Objectifs

Comprendre la structure de base d'une page HTML5
Decouvrir les principales balises HTML
Savoir modifier le contenu d'une page web
Comprendre le lien entre HTML et CSS

Partie 1 : Mise en situation

Qu'est-ce qu'une page web ?

Quand vous consultez un site web, votre navigateur (Chrome, Firefox, Edge...) recoit du code depuis un serveur et l'interprete pour afficher la page.

Ce code est principalement ecrit en deux langages : - HTML (HyperText Markup Language) : definit le contenu (texte, images, liens...) - CSS (Cascading Style Sheets) : definit la mise en forme (couleurs, tailles, polices...)

A vous !

Ouvrez le site du lycee dans votre navigateur. Faites un clic droit sur la page, puis choisissez "Afficher le code source".

Vous voyez le code HTML de la page ! C'est ce code que le navigateur interprete pour produire ce que vous voyez a l'ecran.

Partie 2 : Structure de base d'une page HTML5

Ouvrir le fichier

Lancez Notepad++
Ouvrez le fichier index.html
Ouvrez egalement ce meme fichier dans votre navigateur (double-clic dessus)

La structure HTML5

Toute page HTML5 respecte cette structure de base :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Titre de la page</title>
    </head>
    <body>
        <!-- Le contenu visible de la page -->
    </body>
</html>

Element	Role
`<!DOCTYPE html>`	Indique qu'il s'agit d'une page HTML5
`<html>`	Balise principale qui englobe tout le contenu
`<head>`	En-tete : informations pour le navigateur (non affichees)
`<meta charset="utf-8" />`	Encodage des caracteres (accents, etc.)
`<title>`	Titre affiche dans l'onglet du navigateur
`<body>`	Corps de la page : tout ce qui est affiche

Exercice 2.1

En observant le fichier index.html dans Notepad++ :

Reperer les lignes correspondant au conteneur d'en-tete (<head>).
Quel est le titre de la page ? Ou apparait-il dans le navigateur ?
Modifier ce titre et rafraichir la page dans le navigateur (touche F5). Que constatez-vous ?
Que se passe-t-il si vous supprimez la ligne <meta charset="utf-8" /> ? (Testez puis remettez-la !)

Partie 3 : Les balises de contenu

Les titres

HTML propose 6 niveaux de titres, de <h1> (le plus grand) a <h6> (le plus petit) :

<h1>Titre principal</h1>
<h2>Sous-titre</h2>
<h3>Sous-sous-titre</h3>

Exercice 3.1

Dans le fichier index.html, changez le <h1> en <h2>. Observez le resultat dans le navigateur. Remettez <h1>.

Les paragraphes et la mise en forme

<p>Ceci est un paragraphe.</p>
<p>Voici du texte <strong>en gras</strong> et du texte <em>en italique</em>.</p>

Balise	Effet	Exemple
`<p>`	Paragraphe	`<p>Un texte.</p>`
`<strong>`	Texte important (gras)	`<strong>important</strong>`
`<em>`	Texte mis en valeur (italique)	`<em>attention</em>`
`<br />`	Retour a la ligne	`Ligne 1<br />Ligne 2`
`<hr />`	Ligne horizontale de separation	`<hr />`

Bonne pratique : Utilisez <strong> plutot que <b> et <em> plutot que <i>. Ces balises sont plus modernes et accessibles.

Exercice 3.2

Dans le fichier index.html, reperer la phrase avec "Le ciel est bleu comme la mer". Comment le mot "mer" est-il mis en gras ?

Les listes

<!-- Liste non ordonnee (puces) -->
<ul>
    <li>Premier element</li>
    <li>Deuxieme element</li>
</ul>

<!-- Liste ordonnee (numerotee) -->
<ol>
    <li>Etape 1</li>
    <li>Etape 2</li>
</ol>

Les liens hypertextes

Les liens permettent de naviguer entre les pages. C'est le principe fondamental du Web !

<a href="https://fr.wikipedia.org">Aller sur Wikipedia</a>

href : l'adresse (URL) vers laquelle le lien pointe
Le texte entre <a> et </a> : ce qui est affiche et cliquable

Les images

<img src="images/photo.jpg" alt="Description de l'image" />

src : chemin vers le fichier image
alt : texte alternatif (affiche si l'image ne charge pas, utile pour l'accessibilite)

Exercice 3.3

Dans le fichier index.html, observez la section "Les grands noms de l'informatique" :

Combien de liens y a-t-il dans cette liste ?
Cliquez sur un lien. Vers quelle page mene-t-il ?
Quel attribut contient l'adresse du lien ?
Quel attribut affiche une info-bulle au survol de la souris ?

Les tableaux

<table>
    <tr>
        <th>En-tete 1</th>
        <th>En-tete 2</th>
    </tr>
    <tr>
        <td>Donnee 1</td>
        <td>Donnee 2</td>
    </tr>
</table>

Balise	Role
`<table>`	Definit le tableau
`<tr>`	Definit une ligne (table row)
`<th>`	Cellule d'en-tete (table header)
`<td>`	Cellule de donnees (table data)

Partie 4 : Decouvrir le CSS

Le lien entre HTML et CSS

Dans le <head> du fichier index.html, reperer cette ligne :

<link rel="stylesheet" href="style.css" />

C'est elle qui relie la page HTML a sa feuille de style CSS.

Exercice 4.1

Supprimez cette ligne dans Notepad++, sauvegardez, et rafraichissez la page. Que se passe-t-il ?
Remettez la ligne et sauvegardez.

Le fichier CSS

Ouvrez le fichier tp/1/style.css dans Notepad++. Le CSS fonctionne ainsi :

selecteur {
    propriete: valeur;
}

Exemple :

h1 {
    color: blue;        /* couleur du texte */
    font-size: 32px;    /* taille du texte */
    background-color: #76d7c4;  /* couleur de fond */
}

Exercice 4.2

Dans style.css, trouvez la regle qui s'applique aux balises <h1>. Quelle est la couleur du texte ?
Modifiez la couleur du <h1> en bleu (color: blue;). Sauvegardez et rafraichissez.
Dans le CSS, ajoutez une regle pour les paragraphes :

p {
    color: darkgreen;
    font-size: 16px;
}

Sauvegardez et observez le resultat.

Pour choisir des couleurs : vous pouvez utiliser des noms (red, blue, navy...) ou des codes hexadecimaux (#FF0000, #0000FF...). Voir : https://htmlcolorcodes.com/fr/

Partie 5 : Synthese (10 min)

Exercice final : Completer le tableau des balises

Dans le fichier tp/1/index.html, vous trouverez un tableau intitule "Les balises HTML que j'ai decouvertes". Les deux premieres lignes sont deja remplies.

Completez les lignes restantes en vous aidant de ce que vous avez appris durant ce TP.

Pour chaque balise, indiquez : - Sa description (a quoi elle sert) - Un exemple d'utilisation (un petit bout de code)

Les balises a completer : <h1> a <h6>, <br />, <strong>, <ul>, <ol>, <li>, <dl>, <table>, <a>, <img />, <hr />.

Aide

Balise	Description
`<h1>` a `<h6>`	Titres de niveau 1 (le plus grand) a 6 (le plus petit)
`<br />`	Retour a la ligne
`<strong>`	Texte important, affiche en gras
`<ul>`	Liste non ordonnee (a puces)
`<ol>`	Liste ordonnee (numerotee)
`<li>`	Element d'une liste
`<dl>`	Liste de definitions
`<table>`	Tableau
`<a>`	Lien hypertexte
`<img />`	Image
`<hr />`	Ligne horizontale de separation

Ces cours sont mis à disposition selon les termes de la Licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International.