Scribd Logo
Importer

Bienvenue sur Scribd !

  • 2nde SNT Crée Ta Page Web

    Transféré par

    sic.gnashxx
    2 vues2 pages
    ttuto web ssnt

    Titre original

    2nde SNT Crée ta page Web

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    ttuto web ssnt

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    2 vues2 pages

    2nde SNT Crée Ta Page Web

    Transféré par

    sic.gnashxx
    ttuto web ssnt

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 2

    Crée ta page Web.

    Avant de commencer :
    Créer un répertoire « page web prénom nom », dans votre dossier personnel.
    Tous les fichiers en relation avec la page créée devront-être enregistrés dans ce dossier.
    Rechercher une image et un gif et les enregistrer dans ce dossier sous les noms « image1index.jpg » et « image1.gif »

    Etape 1 : Créer une page index.html


    - Sur le bureau de l’ordinateur, à l’aide du clic droit, créer une page texte (format txt).
    - Renommer ce fichier « index.html »
    - Ouvrir ce fichier avec un éditeur de texte (wordpad ).
    - Recopier (copier, coller possible) les lignes suivantes :
    1. <!doctype html>
    2. <html lang="fr">
    3.
    4. <head>
    5. <meta charset="utf-8">
    6. </head>
    7.
    8. <body>
    9. </body>
    10.
    11. </html>

    - Ajouter un titre à cette page html dans la partie head (c.à.d. entre les balises <head> et </head>) avec la ligne :
    <title> Page principale </title> (par souci de clarté, respecter indentation)
    - Dans la partie body, écrire trois phrases de votre choix sur trois lignes différentes.
    - Sauvegarder la page html et l’exécuter à l’aide d’un navigateur quelconque.
    Questions :
    a. Le retour à la ligne est-il conservé dans le navigateur ?
    - Ajouter la balise <br> au début des phrases deux et trois, sauvegarder et exécuter.
    b. Quel est le rôle de cette balise <br> ?
    c. Le titre de la page est-il visible sur la page affichée par le navigateur internet ? Si oui, où ?
    - Dans la partie body, ajouter la ligne suivante, enregistrer et visualiser sur le navigateur :
    <br><br> <center> <img src="image1index.jpg"> </center>
    d. Quel est le rôle de la balise <center> ?

    Etape 2 : Créer une page style.css


    - Créer une page txt et la renommer « style.css »
    - Y recopier les lignes de code suivantes et sauvegarder :
    1. body {
    2. background-color: grey;
    3. font-family: arial;
    4. font-size: 100%;
    5. }

    - Ouvrir la page « index.html », y intégrer la ligne suivante dans la partie head et sauvegarder :
    <link rel="stylesheet" href="style.css">
    - Exécuter la page html ou la rafraichir.
    - Dans la page « style.css », modifier la couleur et la police de caractère à votre guise (ne pas encore toucher au paramètre font-size)
    et visualiser les changements sur le navigateur.
    - Ajouter à présent les lignes suivantes à la suite de la page « style.css » et sauvegarder :

    6. h1 {
    7. font-size: 200%;
    8. color: red;
    9. text-align: center;
    10. }
    11. h2 {
    12. font-size: 100%;
    13. color: blue;
    14. text-align: left;
    15. }
    - Dans la page « index.html » mettre la première phrase entre les balises <h1> et </h1> et la deuxième entre <h2> et </h2>. Laisser la
    troisième phrase libre. Sauvegarder et visualiser le résultat sur le navigateur.
    - Jouer avec les différents paramètres de h1 et h2 à votre convenance.
    - Ajouter les trois lignes suivantes dans « style.css » et sauvegarder :
    16. html{
    17. margin: 50px;
    18. }
    - Modifier la valeur de margin puis essayer de remplacer px par %.
    Questions :
    e. Que signifie l’unité px ? Même question pour %.
    f. Remplacer la commande margin par margin-left. Quel changement observe-t-on ?

    Etape 3 : Création de liens href


    - Créer une nouvelle page nommée « page1.html » et une autre nommée « page2.html » avec les lignes de code :
    1. <!doctype html> <!doctype html>
    2. <html lang="fr"> page1.html <html lang="fr"> Page2.html
    3.
    4. <head> <head>
    5. <meta charset="utf-8"> <meta charset="utf-8">
    6. <title> Page 1 </title> <title> Page 2 </title>
    7. <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
    8. </head> </head>
    9.
    ►
    10. <body> <body>
    11. <h1> Ceci est la page 1 </h1> <h1> Ceci est la page 2 </h1>
    12. </body> </body>
    13.
    14. </html> </html>

    - Ajouter la ligne de code suivante à la suite de la partie body de la page « index.html » :


    <br><br> <a href="page1.html"> Cliquer ici pour aller à la page 1 </a>
    - Sauvegarder et regarder le résultat sur le navigateur
    - Dans la page « style.css » ajouter les lignes suivantes et sauvegarder :

    19. a:link {
    20. font-family: comic sans ms;
    21. color: yellow;
    22. text-decoration: underline;
    23. }
    24. a:visited {
    25. color: darkviolet;
    26. }
    27. a:hover {
    28. color: green;
    29. text-decoration: none;
    30. }

    - Ajouter la ligne de code suivante à la suite de la partie body de la page « index.html » :


    <br> <a href="page2.html"> Cliquer ici pour aller à la page 2 </a>
    - Sauvegarder et regarder le résultat sur le navigateur.
    Questions :
    g. Quel est l’effet du module a:visited ?
    h. Même question pour le module a:hover.

    Etape 4 : Création de liens de retour


    Ajouter aux pages « page1.html » et « page2.html » un lien de retour vers la page « index.html ».
    Ce lien de retour doit être centré horizontalement sur la page et ne doit pas être composé d’une phrase, mais d’une image animée (gif)
    sur laquelle il faut cliquer. Voici un exemple de ligne à insérer dans le corps de chaque page :
    <br><br> <center><a href="index.html"> <img src="image1.gif"> </a></center>

    Etape 5 : à vous de jouer


    Créer votre propre page web sur le thème de votre choix.
    Une fois le code terminé, vérifier le respect des normes de codage à l’aide du validateur HTML et W3C (voir aide 4 du livre p 29)
    <br><br> <center><a href="index.html"> <img src="photofunky.gif"> </a></center>

    Vous aimerez peut-être aussi