# 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. ![client_serveur.jpg](../assets/client_serveur.jpg) 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 1. Lancez **Notepad++** 2. Ouvrez le fichier [index.html](1/index.html) 3. Ouvrez egalement ce meme fichier dans votre navigateur (double-clic dessus) ### La structure HTML5 Toute page HTML5 respecte cette structure de base : ```html Titre de la page ``` | Element | Role | |---------|------| | `` | Indique qu'il s'agit d'une page HTML5 | | `` | Balise principale qui englobe tout le contenu | | `` | En-tete : informations pour le navigateur (non affichees) | | `` | Encodage des caracteres (accents, etc.) | | `` | 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++ : 1. Reperer les lignes correspondant au conteneur d'en-tete (`<head>`). 2. Quel est le titre de la page ? Ou apparait-il dans le navigateur ? 3. Modifier ce titre et rafraichir la page dans le navigateur (touche F5). Que constatez-vous ? 4. 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) : ```html <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 ```html <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 ```html <!-- 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 ! ```html <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 ```html <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" : 1. Combien de liens y a-t-il dans cette liste ? 2. Cliquez sur un lien. Vers quelle page mene-t-il ? 3. Quel attribut contient l'adresse du lien ? 4. Quel attribut affiche une info-bulle au survol de la souris ? ### Les tableaux ```html <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 : ```html <link rel="stylesheet" href="style.css" /> ``` C'est elle qui relie la page HTML a sa feuille de style CSS. ### Exercice 4.1 1. Supprimez cette ligne dans Notepad++, sauvegardez, et rafraichissez la page. Que se passe-t-il ? 2. Remettez la ligne et sauvegardez. ### Le fichier CSS Ouvrez le fichier `tp/1/style.css` dans Notepad++. Le CSS fonctionne ainsi : ```css selecteur { propriete: valeur; } ``` Exemple : ```css h1 { color: blue; /* couleur du texte */ font-size: 32px; /* taille du texte */ background-color: #76d7c4; /* couleur de fond */ } ``` ### Exercice 4.2 1. Dans `style.css`, trouvez la regle qui s'applique aux balises `<h1>`. Quelle est la couleur du texte ? 2. Modifiez la couleur du `<h1>` en bleu (`color: blue;`). Sauvegardez et rafraichissez. 3. Dans le CSS, ajoutez une regle pour les paragraphes : ```css p { color: darkgreen; font-size: 16px; } ``` 4. 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 | --- <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Licence Creative Commons" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" /></a> <br />Ces cours sont mis à disposition selon les termes de la <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International</a>.