Aller au contenu

C8 Le web

Activités

▪ Activité 1 : Modèle client serveur 

En faisant vos propres recherches et en vous aidant de la vidéo ci-dessus, répondre aux questions suivantes :

  1. Quand et par qui a été inventé le Web ?
  2. Peut-on dire Internet à la place du Web ?
  3. Sur quel principe de fonctionnement repose le Web ?

▪ Activité 2 : Les éléments d'une page Web

Attention

Dans cette activité, on commence à créer des pages HTML, pour visualiser la page produite, deux solutions s'offrent à vous :

  1. installer l'extension HTML Preview de VS code, dans ce cas vous pourrez afficher côte à côte dans VS Code le code source de votre page HTML ainsi que sa prévisualisation.
  2. ouvrir à l'aide de Firefox le fichier local de votre page HTML (taper Ctrl+O dans Firefox). Après avoir modifié le source HTML dans VS Code, mettre à jour l'affichage dans Firefox en appuyant sur F5 pour actualiser.

  1. Squelette d'une page Web
    L'éditeur VS Code, permet d'insérer rapidement la structure de base d'une page web :

    • créer un fichier vide appelé structure.html,
    • ouvrir ce fichier dans VS Code,
    • taper simplement ! et entrée (ou alors taper html et dans le menu d'abbreviation sélectioner html:5)

    Vous devriez obtenir le résultat suivant : 

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

    1. Un document html est constitué d'un en-tête, suivi d'un corps. Repéré les balises permettant de délimiter :
      1. Le document html
      2. L'en-tête
      3. Le corps
    2. L'en-tête contient une balise <title>, quel est son rôle ?

  2. Ajout de contenu
    Dans le corps du document, c'est à dire entre les balises <body> et <body>, insérer le contenu suivant :

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
    <h1> La recette du carry de poulet </h1>

    <h2> Les ingrédients </h2>
        <ul>
            <li> un poulet découpé en morceaux </li>
            <li> 3 oignons </li>
            <li> 1 tomate </li>
            <li> 5 gousses d'ail </li>
        </ul>

    <h2> La préparation </h2>
        <p>Dans de l'huile chaude, faire revenir le poulet</p>

  3. Observer le résultat obtenu dans l'affichage et en déduire le rôle des balises suivantes :

    1. <h1> et <h2>
    2. <ul> et <li>
    3. <p>

  4. Ajouter un sous-titre 'Accompagnements' dans la page Web

  5. Dans ce sous-titre créer une liste avec deux éléments : "riz blanc et grains", "riz jaune".
  6. Ajouter un paragraphe au début de la recette dans lequel on écrira "Le carry de poulet est une recette de cuisine traditionnelle de l’île de la Réunion"

  7. Modifier le paragraphe crée à la question précédente en:

        Le carry de poulet est une recette de cuisine traditionnel de l'<a href="https://fr.wikipedia.org/wiki/La_R%C3%A9union">ile de la Réunion</a>

  8. Quelle est la modification produite dans la page ?

  9. Ajouter un lien dans votre page Web sur le mot "Oignon" qui permet d'accéder à l'adresse https://fr.wikipedia.org/wiki/Oignon

  10. Rechercher vous-même sur le Web la balise permettant d'insérer une image dans une page HTML puis l'utiliser pour insérer une image illustrant la recette du carry de poulet (attention à utiliser une image libre de droit)

▪ Activité 3 : L'apparence d'une page Web

Important

Les balises HTML permettent de structurer le contenu d'une page web, en définissant les titres, les paragraphes, ... Pour modifier l'apparence d'une page, on a recours au css (cascadind style sheet) qui permettent de modifier l'apparence du contenu de la page

Une courte introduction à css

Cours

Vous pouvez télécharger une copie au format pdf du diaporama de synthèse de cours présenté en classe :

Diaporama de cours

Attention

Ce diaporama ne vous donne que quelques points de repères lors de vos révisions. Il devrait être complété par la relecture attentive de vos propres notes de cours et par une révision approfondie des exercices.

QCM

1. Entre quelles balises se trouvent le contenu d'un fichier html qui s'affiche dans un navigateur ?

  • a) <html> et </html>
  • b) <head> et </head>
  • c) <title> et </title>
  • d) <body> et </body>
  • a) <html> et </html>
  • b) <head> et </head>
  • c) <title> et </title>
  • d) <body> et </body>

2. Quelle balise html permet d'insérer un lien hypertexte ?

  • a) <a>
  • b) <p>
  • c) <link>
  • d) <href>
  • a) <a>
  • b) <p>
  • c) <link>
  • d) <href>

3. Quel est le rôle d'un fichier css ?

  • a) Créer le contenu d'une page web
  • b) Définir l'apparence des éléments constituants une page web
  • c) Définir la structure d'une page web (titres, paragraphes, ...)
  • d) Insérer des images dans une page web
  • a) Créer le contenu d'une page web
  • b) Définir l'apparence des éléments constituants une page web
  • c) Définir la structure d'une page web (titres, paragraphes, ...)
  • d) Insérer des images dans une page web

4. Les balises <h1>, <h2>, ... <h6>, permettent :

  • a) De créer des listes numérotées dans une page web
  • b) De créer des listes à puces dans une page web
  • c) De créer plusieurs niveaux de titres dans une page web
  • d) De créer des paragraphes dans une page web
  • a) De créer des listes numérotées dans une page web
  • b) De créer des listes à puces dans une page web
  • c) De créer plusieurs niveaux de titres dans une page web
  • d) De créer des paragraphes dans une page web

5. Le Web fonctionne sur le :

  • a) modèle client-serveur
  • b) modèle pair à pair
  • c) modèle client-client
  • d) modèle serveur-serveur
  • a) modèle client-serveur
  • b) modèle pair à pair
  • c) modèle client-client
  • d) modèle serveur-serveur

6. Quelle ligne dans le fichier css d'une page web permettra aux titres de niveau 1 de cette page de s'afficher en rouge ?

  • a) h1 {color:red;}
  • b) title {color:red;}
  • c) .h1 {couleur:red;}
  • d) <h1> {color:red;}
  • a) h1 {color:red;}
  • b) title {color:red;}
  • c) .h1 {couleur:red;}
  • d) <h1> {color:red;}

7. Quel est la balise à utiliser pour insérer une image nommée logo_python.jpg dans une page web ?

  • a) <image src="logo_python.jpg">
  • b) <image source="logo_python.jpg">
  • c) <img src="logo_python.jpg">
  • d) <img source="logo_python.jpg">
  • a) <image src="logo_python.jpg">
  • b) <image source="logo_python.jpg">
  • c) <img src="logo_python.jpg">
  • d) <img source="logo_python.jpg">

8. Quelles balises doit-on utiliser pour créer une liste d'éléments non ordonnées dans une page web ?

  • a) <ol> et <li>
  • b) <ul> et <li>
  • c) <ol> et <il>
  • d) <ul> et <ol>
  • a) <ol> et <li>
  • b) <ul> et <li>
  • c) <ol> et <il>
  • d) <ul> et <ol>

Exercices

▪ Exercice 1 : Corrections

Corriger les erreurs dans les fragments de code HTML suivant :

  1. <h> Mon titre principal </h>
  2. <href="http://www.wikipedia.fr">un lien vers Wikipedia</href>
  3. <p> Ce paragraphe contient un <a href="autre_page.html">lien vers une autre page</p></a>

▪ Exercice 2 : Structurer une page Web

Quelles sont les balises html permettant de délimiter :

  1. Un titre ou un sous titre ?
  2. Un paragraphe ?
  3. Un lien ?
  4. Un tableau ? Une ligne d'un tableau ? Une case dans un tableau ?

▪ Exercice 3 : Modifier l'apparence d'une page web

  1. Enregistrer dans le répertoire suivant le fichier html suivant : Le rougail saucisess Pour cela, vous pouvez par exemple cliquer à droite sur le bouton ci-dessus, puis sélectionner "Enregistrer la cible du lien sous ..."
  2. Par la méthode de votre choix (mais de préférence en créant une feuille de style dans un fichier séparé), modifier l'apparence de cette page web de sorte que:
    • Le fond de la page soit de couleur noire,
    • Les liens soient jaunes et pas soulignés,
    • Les titres de niveau 1 soient en gras et en blanc,
    • Les titres de niveau 2 soient en bleu clair, encadré avec un trait de couleur rouge

▪ Exercice 4 : Créer un mini-site

Réaliser un mini site Web, en utilisant le html et les feuilles de style. Le sujet du site est au choix, par exemple : votre CV, vos films préférés, un site de recette de cuisines, un site sur un sport ou une de vos passions, ou sur une célébrité (sportif, acteur, chanteur ...) . Respecter le cahier des charges suivant :

  • au moins 5 pages reliées entre elles par des liens internes et des liens vers des sites extérieurs
  • au moins 5 images, attention à utiliser des images libres de droits ou à créer vos propres illustrations pour votre site
  • au moins une page de votre site devra contenir des informations organisées sous la forme d'un tableau et donc utiliser les balises <table> et </table>.
  • L'apparence du site sera uniformisé (c'est à dire que d'une page à l'autre on retrouvera les mêmes couleurs et la même présentation). Vous devrez pour cela utiliser une feuille de style dans un fichier séparé.