Scribd Logo
Importer

Bienvenue sur Scribd !

  • 28 vues

    TP1 HTML5

    Transféré par

    rayenmohad

    Droits d'auteur :

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

    TP1 HTML5

    Transféré par

    rayenmohad
    28 vues4 pages

    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é ?

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Télécharger au format pdf ou txt
    28 vues4 pages

    TP1 HTML5

    Transféré par

    rayenmohad

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Télécharger au format pdf ou txt
    sur 4

    Matière : Atelier Développement Web et Multimédia 1

    Nombre de pages : 4 Classe : 1ère Année TI


    Enseignante : Mme. Nesrine B.H.HAMMOUDA AU: 2022-2023

    TP N° 1

    Objectifs du TP
    Maîtriser les balises nécessaires pour :
    - la création de pages html,
    - l'organisation du texte, les listes
    - la structuration des pages
    Visualisation de page dans un navigateur

    Outils utilisés

    - Utiliser Bloc-notes ou Notepad++


    - Un navigateur

    Exercice 1 :
    Dans cet exercice, on va créer une page Web contenant le plan de cours de programmation
    web1.
    Etape 1 : Création d'une page Web
    1. Lancer l'éditeur de texte Notepad++ et tapez le code suivant:
    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title> </title>
    </head>
    <body>
    <!-- Partie Visible -->
    </body>
    </html>

    2. Enregistrez la page dans le dossier de travail "mon site" sous le nom "cours.html".
    3. Taper le titre de document "Cous Programmation Web" entre les balises <title> </title>,
    enregistrer et visualiser la page dans votre navigateur.

    1
    Etape 2 : Organisation du contenu
    4. Diviser le bloc <body> en 3 blocs à l'aide de la balise <div> </div>
    <div title="entete"></div>
    <div title="contenu"></div>
    <div title="piedpage"></div>

    Etape 3 : Saisie et organisation du texte


    5. Ajouter les retours en ligne selon le besoin
    6. Dans le bloc1 : ajouter la ligne suivante "Cours programmation Web 1" en niveau 1.
    7. Dans le bloc 2 :
     Mettez le sous-titre "Objectifs" en niveau 2 (<h2>) et en gras (<strong>).
     Saisir le paragraphe suivant : " Développer chez l’apprenant les compétences
    adéquates pour planifier et concevoir un site web statique en utilisant les logiciels
    appropriés."
     Appliquer la même mise en valeur sur le sous-titre "Plan".
     Mettez les éléments du paragraphe "Plan" dans une liste numérotée (Technologies
    web, Structure HTML, Style CSS et Référencement).
     Indiquer le texte étendu des abréviations HTML et CSS en utilisant la balise <abbr>.
     Mettez le sous-titre Terminologies avec la même mis en valeur de 2 sous titres
    précédents.
     Ajouter une liste de définition des termes suivants (Web, HTML, CSS, HTTP, URL,
    Navigateur web, Hyperlien).
     Marquer chaque terme à définir.
     Ajouter une ligne horizontale (<hr />) entre les trois parties de ce bloc.
    8. Dans le bloc 3 :
     Ajouter les lignes suivantes :
    "Département Technologie de l'informatique - ISET Mahdia
    Classe : TI1.4 - Tronc commun "
     Mettre le terme "ISET Mahdia" en italique (<i>) et préformaté (<pre>).
     Réduire la taille des caractères du texte "Tronc commun", en utilisant la balise
    <small>.
     Ajouter la mention "Source : Wikipedia"
    9. Tester le code avec le validateur W3C

    2
    - Allez à la page : http://validator.w3.org/
    - Choisir l'onglet «Validate by file upload» > parcourir >cours.html > Check

    NB : Si le code est correct, la mention «This document was successfully checked as


    XHTML 1.0 Transitional !» sera affichée, sinon, les erreurs sont repérées, aidez-vous de
    ces indications pour corriger ...
    10. Les sous titres Objectifs, Plan et Terminologies sont des éléments d'une liste numérotés
    ( Valeur de départ : 1 et Type = romain).

    Exercice 2 :
    1. Créer une page nommée "accueil.html" dont la structure est comme suit :

    Mon contenu.........
    Bienvenue sur le
    Présentation site de l'équipe
    Equipe TI1.

    Contact

    @copyright, certains droits réservés Dernière modification 2017-09-11


    Figure 1 : page d'accueil de site de l'équipe TI1.....

    2. Taper le même code que l'exercice précédent (/3).


    3. Inclure les éléments structurantes du HTML5 suivantes entre les balises <body> </body>:
    <header></header>
    <nav></nav>
    <aside></aside>
    <footer></footer>
    Saisir le contenu du document
    4. Contenu de l'en-tête
    Insérer le logo HTML5 dans l'en-tête de la page à l'aide de la balise <img />. (voir
    annexe).
    5. Zone de navigation

    3
    Insérer dans le contenu de l'élément <nav> une liste des liens hypertextes vers les pages
    suivantes respectivement : "Présentation.html", "equipe.html" et "contact.html".
    6. Informations complémentaires
    Inclure la ligne suivante dans l'élément <aside> : "Bienvenue sur le site de l'équipe
    TI1.4 pour HTML5 ".
    7. Pied de page
    Ajouter les informations suivantes en pied de page comme illustrée dans la figure 1 :
    @copyright, certains droits réservés et Dernière modification 2017-09-11

    Vous aimerez peut-être aussi