En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies pour assurer le bon fonctionnement de nos services.
En savoir plus

ISN Spécialité TS

TP WEB2

Par VALERIE MORDASINI-CARIVEN, publié le lundi 20 novembre 2017 20:52 - Mis à jour le lundi 20 novembre 2017 20:54

Aujourd'hui, nous allons apprendre à structurer une page WEB.

Dans votre espace, copier le programme html ci-dessous. Y associer un fichier css et le modifier pour obtenir dans un premier temps une page qui a cette apparence :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Structure de la page</title>
</head>
<body>
    <div id="bandeau">Ceci est le bandeau</div>
    <div id="contenu">Ceci est le contenu</div>
    <div id="pied_page">Ceci est le pied de page</div>
</body>
</html>

 

Pour cela, vous aider du site : http://fr.html.net/tutorials/css/ (leçons 7,9, 12 et 14 position:absolute).

Identifier chaque div par le meilleur choix : une classe ou un id

 

 

Lorsqu'il y a un menu, c'est mieux. Ajouter un menu dans le fichier html entre le bandeau et le contenu

   <div id="menu">Ceci est le menu</div>
        <li><a href="http://bellevue-albi.mon-ent-occitanie.fr" >
        <li><a href="http://bellevue-albi.mon-ent-occitanie.fr" >
    </div>

et modifier le css pour qu'il vienne se placer à gauche, comme ci-contre. S'aider de la leçon 13.

 

 

 

 

 

 

Bravo ! Allez s'il vous reste un petit peu de temps :

-Essayez de rajouter un bloc de news en haut à droite du bloc de contenu

-Définissez pour chaque div, une jolie bordure, une marge pour positionner le texte à l'intérieur. S'aider des leçons 10 et 11.

 

 

Catégories
  • seances