exercice d'html

March 16, 2018 | Author: B.I | Category: Markup Language, Html, Cascading Style Sheets, Html Element, Computer File Formats
Share Embed Donate


Short Description

Download exercice d'html...

Description

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  . 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, , 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

View more...

Comments

Copyright ©2017 KUPDF Inc.
SUPPORT KUPDF