Scribd Logo
Importer

Bienvenue sur Scribd !

  • Exercice D'HTML

    Transféré par

    B.I
    857 vues8 pages

    Titre original

    exercice d'html

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formats disponibles

    DOC, 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 DOC, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    857 vues8 pages

    Exercice D'HTML

    Transféré par

    B.I

    Droits d'auteur :

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

    Exercice 1

    Création et mise en forme d'une page Web avec une feuille de style

    Si besoin, les exercices se trouvent dans un fichier zippé à l'adresse suivante : 
    http://www.ext.upmc.fr/urfist/html/exercicescss2006.tar.gz

    Ouvrez la page index.htm qui se trouve dans le dossier exercices2006 sur le bureau de votre ordinateur

    Insérez une feuille de style externe qui a pour nom presse.css avec pour type de média « screen » entre 
    les balises <head> </head>.

    Ouvrez ensuite un éditeur de texte style Notepad et enregistrez la page sous le nom de presse.css dans 
    le dossier exercices2006. 

    Nous commencerons par styler la balise html en lui donnant un arrière plan (background­color) de 
    couleur gris (#C2CACF). Les marges externe (margin) et interne (padding) sont à zéro.  

    {          background­color: #C2CACF;
    padding: 0;
    margin: 0;}

    1/8
    Maintenant, il faut paramétrer la balise body. Les marges externe (margin) et interne (padding) sont à 
    zéro. On ajoute le même arrière plan couleur que pour la balise html et une image de fond 
    (background­image) que vous trouverez dans le dossier images du dossier exercices 2006. Cette image 
    ne sera pas répété (background­repeat) et aura une position de 0px en valeur horizontale et verticale 
    (background­position). Ensuite, nous fixerons l'image par rapport à la fenêtre (background­
    attachment), elle restera donc en place quelque  soit la position de l'ascenseur. 

    {          margin: 0;
    padding: 0;
    background­color: #C2CACF;
    background­image: url(images/fond.jpg);
    background­repeat: no­repeat;
    background­position: 0px 0px;
    background­attachment: fixed;}

    Il est nécessaire ensuite de positionner le texte par rapport à la bande noire. Nous allons créer  un bloc 
    avec un identifiant unique qui aura pour nom entry (div#entry). Il n'y aura pas de marge interne mais 
    une marge externe de 0 en verticale qui se positionnera automatiquement par rapport à la marge de 
    droite avec une marge fixe pour le bas de 10 et une marge fixe de gauche de 102. Il est à noter que 
    102px est la largeur de la bande noire. Le bloc aura une largeur fixe de 650px (width) et sa propre 
    couleur d'arrière plan de préférence clair (#fefefe) pour contraster avec le gris de l'arrière plan principal. 
    On applique au bloc une bordure (border) en trait plein, fine (1px).

    {          padding: 0em;
    width: 650px;
    margin: 0 auto 10px 102px;

    2/8
    background­color: #fefefe;
    border­width: 1px;
    border­style: solid;}

    Une fois la partie principale de la mise en page terminée, nous allons pouvoir nous centrer sur la mise 
    en forme des caractères. Dans le body, nous allons inclure comme police par défaut l'Arial sans­serif. 
    La police par défaut est ici entre guillemet, préciser plusieurs familles augmente la probabilité que le 
    visiteur disposera d'au moins de l'une d'entre elles. 

    { margin: 0;
    padding: 0;
    font-family: "arial",verdana,lucida,sans-serif;
    background-color: #C2CACF;
    background-image: url(images/fond.jpg);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-attachment: fixed;}

    Nous traiterons ensuite de la balise de titre principal ou h1. Le titre sera de taille 2em en petite capitale 
    (font­size) avec une barre en dessous pour marquer une rupture entre le contenu et le titre. On 
    appliquera  une bordure (border) de couleur noire en trait plein, fine (1px). La marge externe est à 0. 
    On souhaite cependant grâce à la marge interne (padding) décaler le titre sur la gauche pour qu'il 
    n'empiète pas sur la bande noire, 5px suffiront et le décaler un peu en hauteur de 6px (pure raison 
    esthétique).

    {          margin: 0 ;

    3/8
    padding: 6px 0 0 5px;
    border­bottom: #000;
    border­width: 0 0 1px 0;
    border­style: none none solid none;
    font­size: 2em;
    font­variant: small­caps;}

    La balise de titre h2 sera définit un peu comme la balise de titre h1. Le titre aura pour taille 1.6em. La 
    marge interne sera décalé de 5px sur la gauche comme pour h1 et de 5px en hauteur. 
    {              margin: 0;
    padding: 5px 0 0 5px;
    font-size: 1.6em;
    font-variant: small-caps;}

    H3 suivra le modèle des titres h1 et h2. Le titre aura pour taille 1.4em. La marge interne sera décalé de 
    5px sur la gauche comme pour les deux autres et de 7px en hauteur. La marge externe sera à 0.

    { margin: 0;
    padding: 7px 0 0 5px;
    font-size: 1.4em;}

    4/8
    La mise en forme des liens ne concernera ici que les liens contenus dans le bloc #entry. L'attribut 
    a:link ou lien correspondant au lien non visité, c'est à dire non présent dans le cache de votre 
    navigateur, seront de couleur #768. Les liens visités ou a:visited, sont ceux déjà contenu dans le cache 
    de votre navigateur. Pour les distinguer des liens non­visités, ils sont d'une couleur légèrement 
    différente #777. Par défaut, les liens visités et non visités seront soulignés (text­decoration: 
    underline). 
    Il est d'usage d'utiliser des couleurs différentes pour les liens visités et non vus. Modifier la couleur 
    d'un lien selon sa visualisation ou non est une méthode de base pour faciliter la navigation. On peut 
    utiliser une couleur plus présente pour les nouveaux liens et une couleur moins forte pour les liens 
    cliqués, afin d'indiquer aux lecteurs qu'ils ont été visités. 

    div#entry a {text-decoration: underline;}


    div#entry a:visited { color: #777; }
    div#entry a:link { color: #768; }

    Les paragraphes contenus dans le bloc #entry auront la même marge interne sur la gauche que les 
    balises titre.

    div#entry p {padding: 0 0 0 5px;}

    5/8
    Nous souhaitons pour mettre en valeur les sources, les positionner autrement. Pour cela, nous allons 
    utiliser un élément de type classe, c'est à dire que vous pouvez l'insérer dans différentes balises, ici nous 
    l'avons inséré au sein de la balise paragraphe et nous l'appellerons cat.
    Ainsi dans le code html, toutes les balises paragraphes contenant un class="cat" apparaîtront, aligné à 
    droite en petite capitale et italique, avec une taille de 0.9em. Pour que le texte ne touche pas le cadre, 
    une marge externe de droite de 5px est préférable, accompagné d'une marge pour le bas de 5px. 

    p.cat
    { font-size: 0.9em;
    font-variant: small-caps;
    text-align: right;
    margin: 0 5px 5px 0;
    font-style:italic;}

    6/8
    Pour embellir le texte, nous avons décidé de mettre en valeur la première lettre
    de chaque texte. Il existe une balise first-letter qui permet, adjoint à la balise
    paragraphe de ne modifier que la première lettre. Mais comme, nous ne souhaitons
    pas que les classes .cat subissent ces transformations, il est préférable
    d'utiliser une autre technique.
    On isolera manuellement, en la plaçant dans la balise neutre span, la première
    lettre en lui attribuant une classe ici .lettrine. Ainsi dans le code html, toutes
    les lettres contenues entre les balises suivantes, <span class="lettrine"></span>,
    seront affichée en gras, avec pour police par défaut Georgia serif. La taille de
    la lettre sera de 2em avec une marge interne de 3px pour intégrer un petit
    espacement entre la lettre et le paragraphe et un float:left. Float signifie que
    l'élément génère un bloc qui flotte à gauche. Essayez la feuille de style avec et
    sans float:left, vous verrez la différence.

    { font-weight : bold;
    font-family:"Georgia", Times New Roman, Times, serif;
    font-size:2em;
    float:left;
    padding: 0 3px 0 0;}

    7/8
    On pourrait juger que la mise en forme est terminée, mais je souhaiterais réussir à ce que le bandeau 
    noir aille juste au bout de la page. Pour cela, j'utilise le pseudo­élément after qui sert à insérer un 
    contenu généré après celui d'un élément, ici body. On obtient donc un body:after avec un texte généré 
    automatiquement content: "Page crée le 4 avril 2006 inspiré du blog de Karl Dubost" d'une taille de 
    1em et une marge externe de gauche de 200px. 

    { content: "Page crée le 4 avril 2006 inspiré du blog de Karl Dubost";


    font-size: 1em;
    margin-left:200px;}

    8/8

    Vous aimerez peut-être aussi