TP : Ma première page web. Partie 2.

Ressources nécessaires :

Partie 1 : le flux et les balises block et in-line

Le contenu entre deux balises est appelé une boîte.

Le flux (ou «flot») est tout simplement l'ordre dont ces boîtes s'agencent.

Une boite formée de balises de type block commence au début d'une nouvelle ligne et se termine par un renvoi à la ligne suivante. Par contre une boite formée de balises de type in-line s'insére entre l'élément qui la précède et l'élément qui la suit.

  1. Ouvre la page html du TP1 dans ton navigateur.
  2. Que peut-on dire du flux?
  3. Repère les balises de type block.
  4. Repère les balises de type in-line.

Partie 2 : Mise en page de notre page web

Objectif : On veut obtenir cette page web :

Clique pour agrandir l'image

Télécharche le dossier compressé contenant les ressources nécessaires pour réaliser ce TP : TÉLÉCHARGER
Rajoute dans le dossier sources du précédent TP, tous les fichiers téléchargés.

  1. Ouvre ton éditeur de code Notepad++.
  2. Ouvre le fichier html du TP1. Rajoute dans la boite <head>, le lien vers la page de style :
    <link rel="stylesheet" type="text/css" href="sources/Tpstyle.css" />.
    Enregistre les modification et réactualise ta page dans le navigateur.
  3. Ouvre le fichier Tpstyle.css dans Notepad++. Et rajoute ceci : 

    header{
        Background: url(linetwopoints.gif) white bottom left repeat-x;
        width: 780px;
	margin:auto;
        padding: 10px;
	margin-bottom:0px
	}

    Analyse ce bout de code.
  4. Rajoute : 

    section{
        width: 800px;
        Background: white url(BackMiddle.gif) top left repeat-y;
        margin:auto;
	margin-top:0px;
	margin-bottom:0px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    
footer{
        width: 780px;
        height: 20px;
        Background: url(twopoints.gif) white top left repeat-x;
        margin: auto;
        padding: 10px;
        text-align: center;
        font-size: x-small;
    }

    Analyse ce bout de code.
  5. Rajoute : 

    h2{
        color: darkblue;
        font-size: 150%;
        font-weight: bold ;
	margin-left:15px;
	margin-right:15px;
    }
h3{
	color: darkblue;
	font-size: 120%;
	font-weight: bold;
	margin-left:15px;
	margin-right:15px;
    }
h4{
        color: darkblue;
        font-size: 90%;
        font-weight: bold;
        line-Height: 130%;
	margin-left:15px;
	margin-right:15px;
    }

    Analyse ce bout de code.
  6. Rajoute : 

    p{
        font-size: 90%;
        line-Height: 130%;
        text-align : justify;
        text-indent: 2em;
	margin-left:15px;
	margin-right:15px;
    }

    Analyse ce bout de code.
  7. Rajoute : 

    li{
        list-style: url(PUCE.GIF);
        font-size: 90%;
        line-Height: 150%;
        margin-left:15px;
	margin-right:15px;   
    }

    Analyse ce bout de code.
  8. Pour placer les images, nous avons deux images à gauche et une à droite. Pour différencier ces cas nous allons utiliser des classes. Dans le fichier html, nous rajoutons dans les balises <figure>, pour celles de gauche class="imgauche" et pour l'autre class="imdroite".
    Puis dans le fichier CSS, rajoute : 

    .imdroite{
    border-width: 2px;
    border-style: dotted;
    border-color: darkblue;
    background-color: #dbe1e0;
    float: right;
    border :dotted;
    color: darkblue;
    margin: 20px;
    padding: 4px;
    width: 200px;
    border-radius: 10px;

}
.imgauche{
    border-width: 2px;
    border-style: dotted;
    border-color: darkblue;
    background-color: #dbe1e0;
    float: left;
    border :dotted;
    margin: 20px;
    padding: 4px;
    width: 200px;
    color: darkblue;
    border-radius: 10px;
}

    Analyse ce bout de code. Il se peut que l'image de droite ne s'affiche pas à l'endroit souhaiter, ceci est du à la fonction float qui fait sortir la figure du flux...
  9. Rajoute : 

    figcaption{
        font-size: 80%;
        margin: 0px;
        padding: 0px
    }

    Analyse ce bout de code.
  10. Rajoute les sélecteurs de pseudo-classes et de pseudo élément: 

    p:first-letter{
        font-family: fantasy;
        font-size: 150%;
        font-weight : bold;
        color: darkblue;
        
    }
a:link{
        color: darkblue;
        text-decoration: underline;
    }
a:visited{
        color:darkgreen;
        text-decoration: underline;
    }
a:hover{
        color:darkgrey;
        text-decoration: blink;   
    }

    Analyse ce bout de code.
  11. Enregistre ton travail. Et dépose-le sur l'ENTH.