Technologies Informatiques

Étape 1 : Une première page

  1. Créer un dossier web dans la partition H: de votre PC ( Créer dossier web )
  2. Dans le dossier web, créer un fichier index.html avec un éditeur de texte ( Lancer Visual Studio Code , Créer index.html avec Visual Studio Code ) .
  3. Vérifier le nom et l'extension de fichier en activant l'option d'affichage "Extension de noms de fichiers" dans l'Explorateur de fichiers (Windows) ( Activer l'option d'affichage "Extension de noms de fichiers" dans l'Explorateur de fichiers (Windows) )
  4. Avec l'éditeur de texte, mettre à jour le contenu du fichier index.html 

    <!DOCTYPE html>
<html>
<head>
    <title>Ma 1ère page HTML !</title>
</head>
<body>
    Contenu de ma première page Web !
</body>
</html>
    Sauvegarder la modification à la fin (En utilisant le menu File --> Save ou la touche Ctrl + S)
  5. Visualiser la page avec un navigateur Web. Pour cela dans l’explorateur Windows faire un clic droit sur l’icone de votre fichier index.html et dans le menu "Ouvrir avec", sélectionner le navigateur de votre choix

Étape 2 : Organisation des fichiers du site

  1. Dans web créer un dossier img dans lequel vous rangerez l’ensemble des images du site (photos, graphiques, logos ...).
  2. Dans web créer un dossier page dans lequel vous rangerez vos différentes pages HTML autres que la page d’accueil (autres que index.html).
  3. Dans web créer un dossier data dans lequel vous rangerez vos fichiers pdf.
Voici l'organisation de votre site web après l'étape 2 :

Étape 3 : Le fichier index.html

Dans cette étape, nous mettons à jour la page index.html avec des élements HTML. Après chaque modification, re-visualiser la page (faire un F5 dans votre navigateur de web).

  1. Ouvrir le fichier index.html et modifier le contenu de title pour que le sujet de la page s’affiche clairement dans l’onglet du navigateur. Ajouter dans l’en-tête du fichier des balises meta pour spécifier des informations importantes telles que : 
    <head>
    <meta name="description" content="Mon CV">
    <meta name="author" content="Kilian Le Roupic">
    <meta name="keywords" content="Stage, L1 ISI, Brest">
    <meta charset="UTF-8">
    <title>Ma 1ère page HTML !</title>
</head>
  2. Vider ensuite le contenu du body (entre 2 balises <body> et </body>) pour créer une page contenant :

Étape 4 : Le fichier formation.html (dans le dossier page)

  1. Créer le fichier formation.html dans le dossier page, mettre à jour le contenu du fichier comme ci-dessous : 

    <!DOCTYPE html>
<html>
<head>
<title>Formation</title>
</head>
<body>
    <!--Contenu de votre page web-->

</body>
</html>
    Voici l'organisation de votre site web après cette étape :
  2. Utiliser les instructions données dans l'étape 3.2 et ajouter :
  3. Ajouter un tableau de formation comme ci-dessous :

    2014-2015 Brevet des collèges
    2017-2018 Baccalauréat Série S
    2018-2019 L1 ISI UBO 

    <table border="1">
    <tr>
        <td>2014-2015</td>
        <td>Brevet des collèges</td>
    </tr>
    <tr>
        <td>2017-2018</td>
        <td>Baccalauréat Série S</td>
    </tr>
    <tr>
        <td>2018-2019</td>
        <td>L1 ISI UBO</td>
    </tr>
</table>

  4. Toujours dans le fichier formation.html, modifier l'item "Présentation" pour mettre un lien vers le fichier index.html.
    Avant : 
    <ul>
    <li>Présentation</li>
    <li>Formation</li>
    <li>Expérience</li>
    <li>Divers</li>
</ul>
    Après modification : 
    <ul>
    <li><a href="../index.html">Présentation</a></li>
    <li>Formation</li>
    <li>Expérience</li>
    <li>Divers</li>
</ul>
  5. Dans le fichier index.html, modifier l'item "Formation" pour mettre un lien vers le fichier formation.html
    Avant : 
    <ul>
    <li>Présentation</li>
    <li>Formation</li>
    <li>Expérience</li>
    <li>Divers</li>
</ul>
    Après modification : 
    <ul>
    <li>Présentation</li>
    <li><a href="page/formation.html">Formation</a></li>
    <li>Expérience</li>
    <li>Divers</li>
</ul>

Étape 5 : Moodle - à faire dans TD1