TD n°2 : HTML et CSS – balises de structures

Objectifs du TD

Créer une structure de page à l’aide de la balise HTML div et de ses attributs id et class  (identifiant et classe de style)

préparation

  1. Créer un dossier TD2
  2. Télécharger le fichier compressé appelé td1-départ ci-dessous et et décompresser les différents documents dans le dossier TD2.
    Le dossier comprend :
  • TD2-depart.html : fichier HTML de départ du TD2
  • Dossier CSS contenant la feuille de style style1.css
  • Dossier img contenant les 2 photos intégrées dans la page
  • Dossier pdf comprenant le pdf mis en lien dans la page

 

1ème partie

1ème partie : Première structure

  1. Faire une copie du fichier TD2-depart.html et le nommer TD2-1.html
  2. à partir de ce nouveau fichier, construire la division page et définir son style puis faire de même avec les 2 divisions de classe de style important en suivant les instructions ci-dessous :

Résultat attendu

Capture d’écran 2015-02-02 à 11.56.03

1/ La Division nommée page

Coté HTML

Créer une division ayant pour identifiant page, englobant l’ensemble du contenu de la partie body

<body>
<div  id="page">

.......

</div>
</body>

Coté CSS

Ajouter à la feuille de style, la définition de l’identifiant #page :

#page {
.......
}

Propriétés de la division #page :

  • fond blanc
  • largeur 960 px
  • ombre (box-shadow : 1px 1px 12px #555; )
  • marges externes gauche, droite : auto (permet de centrer la page sur l’écran)
  • marges externes haut, bas : 40px

2/ les divisions de classe de style important

Coté HTML

Créer les deux divisions de classe important englobant les paragraphes à mettre en évidence (fond gris, voir résultat attendu)

<div  class="important">

...paragraphe(s)...

</div>

Coté CSS

Ajouter à la feuille de style, la définition de la classe de style .important :

.important {
.......
}

Propriétés de la classe de style .important :

  • fond gris
  • bords arrondis 5px
  • bordure 1px de couleur #111111 solide
  • marges externes : 20px
  • marges internes : 20px

Définir une classe de st

Résultat attendu

img10

 

2ème partie

2ème partie : Structure d’un site

  1. A partir de votre fichier précédent ou de la correction à télécharger ci-dessous,  faire une copie du fichier td2-1.html en td2.2.html

Partie HTML

  • Créer la div page
  • à l’intérieur de la div page, créer les div header, menu, et content (contenant l’intégralité du texte)
  • Insérer l’image bandeau1.jpg du dossier img dans la div header
  • Ajouter les éléments du menu (liens, voir photo ci-dessous)
  • à l’intérieur de la div contenu, ajouter les div sidebar et posts (contenant l’intégralité du texte)

Partie CSS

Ajouter les définitions des div #page, #header, #menu, #content, #sidebar et #posts suivant la croquis ci-dessous.

Résultat attendu

image11