Scribd Logo
Importer

Bienvenue sur Scribd !

  • Exo HTML

    Transféré par

    Maymù Mk
    178 vues5 pages

    Titre original

    exo html

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    178 vues5 pages

    Exo HTML

    Transféré par

    Maymù Mk

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 5

    HTML : exercices

    Exercice 1 : Affichage de document HTML

    1. Ouvrez le bloc-note, copiez-y le document suivant :

    <html>
    <head>
    <title> mon premier document </title>
    </head>
    <body>
    Il fait <b> beau </b>. Mais qu'est-ce que
    le beau temps s'il n'y a pas eu la <b> pluie </b>
    auparavant ?
    </body>
    </html>

    2. Enregistrez le fichier sous le nom « test.html »


    3. A l’aide d’un navigateur, ouvrez le fichier que vous venez d’écrire

    Exercice 2 : Premier document HTML

    Réalisez un fichier html qui aura cette apparence :

    Bonjour, bonne année 2005, bonne santé et surtout : Meilleurs vœux !

    Donnez pour titre à ce fichier ‘bonne année’. Enregistrez ce fichier et visualisez-le dans votre
    navigateur.
    Exercice 3 : Plus compliqué

    Réalisez un fichier HTML qui aura l’apparence suivante :

    Mon repas de Noël


    J’ai eu la chance d’avoir un repas de Noël excellent, puisqu’il était composé des plats
    suivants :

    Du foie gras sur des toasts grillés (ça j’adore)


    Du saumon rose
    De la pintade avec une purée
    Une bûche glacée

    Et le tout arrosé de Champagne !

    Après, j'ai pu déballer tous mes cadeaux :

    1. Mamie Lulu : des DVD


    2. Mamie Elisabeth : des CD
    3. Tonton Hugues : des livres

    Exercice 4 : Mini site lillois

    Réalisez un mini site Web sur la ville de Lille comprenant


    Une page histoire.html qui contient le texte (mis en forme) contenu dans le
    fichier histoire.txt est qui incorporera l’image histoire.jpg
    Une page celebrite.html, reprenant le texte du fichier celebrite.txt. En
    particulier, une image illustrant chaque personne devra être incorporée. De plus, un
    petit sommaire devra être présent en haut de la page et devra contenir des liens
    renvoyant vers chaque section. De plus, un lien « Retour vers le sommaire » après
    chaque personne doit renvoyer vers ce sommaire.
    Une page plan.html qui contient uniquement un plan de Lille (le fichier
    plan.jpg et un titre)
    Une page liens.html contenant une liste de liens sur Lille (voir liens.txt pour les
    liens)
    Et enfin une page d’accueil index.html qui doit contenir le texte contenu dans
    lille.txt et un sommaire du site dont les éléments pointeront vers chacune des pages ci-
    dessus. Par ailleurs, chacune des pages du site, hormis le sommaire, doit contenir un
    lien vers la page index.html.

    Vous choisirez une présentation standard pour le site, avec notamment une couleur de fond.
    Tous les fichiers nécessaires (notamment les images) se trouvent dans le répertoire mini-
    site sur le serveur.
    Exercice 5 : Balise META
    Renseignez convenablement l’entête de votre page d’accueil. Vous indiquerez en particulier
    les informations suivantes :
    o Le nom de l’auteur
    o Le logiciel utilisé pour créer la page (le bloc-note)
    o La langue
    o Le codage utilisé
    o Les mots clés (lille, histoire)
    o Et une description (Ce site raconte l’histoire de la ville de lille)

    Exercice 6 : Tableau de statistiques

    Ajoutez à votre site une page statistique contenant le tableau suivant. Vous utiliserez dans ce
    tableau les attributs width, cellpading, cellspacing et border afin de le rendre plus
    présentable.

    Région Nord-Pas de Calais(chef-lieu)


    Département Nord (Préfecture)
    Population totale 191 164 habitants (1999)
    Maire : Martine Aubry
    Code postaux 59000, 59800
    Superficie 3483 ha = 34,83 km²
    Densité 6103 hab./km²

    Exercice 7 : Mise en page

    Ajoutez aux pages de votre site (au moins quelques unes dont index.html et histoire.html) un
    menu sur la gauche qui pointe vers les différentes pages de votre site, ainsi qu’une cellule de
    titre Lille en haut. Les pages de votre site auront donc la structure suivante. Vous veillerez à
    ce que votre site soit coloré.

    LILLE
    votre menu Le contenu de la page
    Exercice 8 : Css : première feuille de style

    o Reprenez index.html en supprimant toute balise <font> et tout élément de coloration.


    o Réalisez une feuille de style pour la page histoire.html de votre mini-site. Cette feuille
    de style devra :
    Mettre le titre de la page en très gros, en blanc sur fond rouge.
    Mettez le texte en times
    Utilisez le symbole carré pour les listes <ul>, le texte des listes devra être en
    plus petit (small)
    Faites en sorte que le menu apparaisse de la manière suivante :

    Accueil

    Histoire

    Celebrité

    etc…
    Conservez la disposition générale de la feuille

    o Appliquez ensuite cette feuille de style à toutes les pages de votre site.

    Exercice 9 : La page à Momo


    o Définissez le fichier style.css associé à momo.html afin de représenter la page
    momo.html de la manière suivante (sans y toucher) :

    La page à Momo
    Ma page !
    Accueil
    Bienvenue dans ma page à moi, où je raconte tout ce que je
    veux ! Ma photo

    Enregistrez ce fichier, et réalisez-en un deuxième pour avoir la mise en page suivante :

    La page à Momo
    o Accueil
    o Ma photo
    Ma page !

    Bienvenue dans ma page à moi, où je raconte tout qu’est ce qu'est ce que je veux
    Exercice 10 : Feuille de style à Lille

    Appliquez une présentation sur l’ensemble de votre site. Chaque page devra avoir un titre et
    un menu. Vous choisirez une présentation qui utilisera :
    Une couleur de fond
    Une présentation particulière pour votre titre (couleur, taille du texte…)
    Une présentation pour le menu (au choix, horizontal ou vertical)
    Les images devront être entourées d’un contour noir pointillé.
    Une présentation pour les titres intérieurs de votre document (h1, h2 et h3)

    Exercice 11 : Avec Dreamwaver ?

    Réalisez la page suivante (HTML + CSS) à l’aide de Dreamwaver :

    Vous aimerez peut-être aussi