Scribd Logo
Importer

Bienvenue sur Scribd !

  • 2 vues

    TP4_IT130_INTRODUCTION_AU_DEVELOPPEMENT_WEB

    Transféré par

    nakyendoujos

    Droits d'auteur :

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

    TP4_IT130_INTRODUCTION_AU_DEVELOPPEMENT_WEB

    Transféré par

    nakyendoujos
    2 vues3 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
    2 vues3 pages

    TP4_IT130_INTRODUCTION_AU_DEVELOPPEMENT_WEB

    Transféré par

    nakyendoujos

    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 3

    Année Académique 2023 - 2024

    TRAVAUX PRATIQUES 4 – IT130 – SEMESTRE 1

    Niveau : LICENCE Filière : RSS, CS, GL, DWM, WIM

    UE : IT 130 –Introduction au Développement Web

    Chargé du Cours : M. EDOU Dodji

    EXERCICE

    Nous allons désormais créer un Curriculum Vitae en HTML et le mettre en forme avec un fichier de style (CSS). Vous pouvez
    comparer le résultat obtenu avec du HTML pur ou avec du CSS dans les Figures 1 et 2)

    Figure 1 – Sans CSS

    Première étape : création du fichier .html

    Question 1 : Créer une page (cv.html dans un répertoire nommé TP4) Web minimale, qui soit valide selon les standards de la W3C.

    Question 2 : Faire en sorte que le titre qui s’affiche dans la barre du navigateur soit “Curriculum Vitae"

    Question 3 : Insérer une image de profil de votre choix en haut de page.

    Question 4 : Dans une balise de premier niveau, renseignez votre nom ; dans un div, votre activité (Étudiant

    à IPNET) ; dans un paragraphe <p>, quelques lignes récapitulatives vous décrivant ; ainsi qu’un bouton qui permette de vous
    contacter.
    Question 5 : Décrire ensuite votre parcours professionnel : le titre “Parcours" peut être ajouté dans une balise de second niveau, et
    les expériences dans des paragraphes, dans un paragraphe <p>

    Question 6 : Décrire votre formation sur le même principe que pour la description du parcours.

    Figure 2 – Avec CSS

    Deuxième étape : création du fichier .css

    Nous allons désormais mettre en forme notre CV à l’aide d’un fichier .css. L’objectif est d’obtenir un résultat similaire à celui obtenu
    sur la Figure 2. Ayez recours à la documentation en ligne pour l’utilisation et la définition des différentes propriétés.

    Question 1 : Créer un fichier cv.css dans le répertoire TP4 et y faire référence dans votre fichier html.

    Question 2 : Faire apparaitre le texte au centre de la page en modifiant les valeurs des marges pour le sélecteur body.

    Question 3 : Utiliser la famille verdana pour la police de caractères, sur l’ensemble de la page, en modifiant le sélecteur body.

    Question 4 : Définir une classe .img-circle afin de modifier l’affichage de l’image :

    1. centrer par rapport au texte

    2. diminuer sa taille

    3. créer un ovale qui délimite le contour de l’image (la propriété à modifier est border-radius). Assigner cette classe à l’image
    dans le fichier html.

    Question 5 : Définir une classe pour modifier vos noms et prénoms de façon à ce que :

    1. la taille de police soit importante

    2. les lettres soient rapprochées : propriété letter-spacing


    3. les lettres soient en gras : propriété font-weight

    Question 6 : Définir une classe .section qui permettre d’obtenir un cadre autour des différentes sections du CV, en modifiant les
    propriétés border.

    Question 7 : Définir une classe .emph qui permettre de mettre en orange et en italique les informations importantes.

    Question 8 : Diviser les informations vous concernant en deux colonnes : séparer le texte récapitulatif de vos informations
    personnelles (Age, date de naissance, adresse). Vous pouvez utiliser la propriété column-count.

    Question 9 : Définir une classe dans le fichier .css qui mette en gras les dates pour le parcours et la formation

    LIVRABLES :

    1. Le fichier cv.html
    2. Le fichier cv.css.
    3. L’image de profil

    Tous les livrables doivent être contenus dans un dossier principal zippé avec le libellé ci-dessous
    NOM_PRENOMS_ANNEEUNIVERSITAIRE_TP_4_ IT130

    Vous aimerez peut-être aussi