Création d'une page web

But et travail à faire

Réaliser un document numérique sous une autre forme qu'une page réalisée grâce à un traitement de texte.
Pour cela, choisir une femme célèbre et rechercher des informations sur elle.
Le résultat des recherches sera présenté sous la forme d'une page WEB à laquelle sera associé une page de style (fournie) pour sa mise en forme à l'écran.

Les informations recherchées sont :

Sites ressources

Voici une liste non exhaustive pour choisir la personne dont vous allez parler. D'autres sites tel Wikipédia vous permettront d'avoir des informations supplémentaires à son sujet.

Création de la page WEB

Une fois rassemblées au brouillon les informations sur la femme célèbre :

  1. Si besoin, revoir le cours sur "Les pages WEB".
  2. Dans la barre de recherche de l'ordinateur, tapez “Notepad” ou “Bloc-notes” et ouvrez l'application.
  3. Recopiez les balises ci-dessous en remplaçant les contenues avec les informations notées au brouillon.
    • 1er bloc div (“sujet”)
      • <h1> = Nom de la personne
      • <img> = URL de sa photo
      • <h2> = Biographie courte (Date et lieu de naissance et de décès ainsi que nationalité)
      • <p> = Motif de sa célébrité. Je peux utiliser plusieurs balises <p> pour faire plusieurs paragraphe ou utiliser des balises <br/> pour provoquer un passage à la ligne sans qu'elle soit remplie
      • <cite> = Nom ou URL du site ou j'ai trouvé mes informations
    • 2ème bloc div (“moi”)
      • <p> = Ce que je pense d'elle
      • <cite> mon nom, prénom et classe
  4. Enregistrer mon travail dans le dossier “Techno” de mon espace personnel, le nom est “personne_celebre.html” et le type “Tous les fichiers (*.*)
  5. Vérifier si mon fichier s'affiche correctement dans un navigateur et le corriger si je trouve des erreurs ou des fautes.
  6. Le copier dans le dossier indiqué par le professeur pour le voir avec mise en forme.

Modèle à suivre

personne_celebre.html
<!doctype html>
<html lang="fr">
<head>
  <meta content="text/html; charset=UTF-8" http-equiv="content-type">
  <title>Personne célèbre</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
 
  <div class="sujet">
    <h1>Nom de la personne</h1>
    <img src="URL_image" />
    <h2>Biographie courte</h2>
    <p>Décrire ce qu'elle a fait</p>
    <cite>La source de mes informations</cite>
  </div>
 
  <div class="moi">
    <p>Ce que je pense de ce qu'elle à fait</p>
    <cite>Mon nom, prénom et classe</cite>
  </div>
 
</body>
</html>

Rendu et affichage

Une fois terminé correctement, les fichiers sont nommés à partir de l'identifiant de l'élève et se terminent par ”.html“ (ex. DUMONTP.html) et rendu via l'ENT au professeur qui les mettra en ligne.

Ils sont ensuite disponible et mis en forme par la feuille de style dédié sur le site suivant :