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

Comprendre comment s'organise une page WEB

Par VALERIE MORDASINI-CARIVEN, publié le mercredi 22 novembre 2017 20:12 - Mis à jour le mercredi 22 novembre 2017 21:22

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

  • Vous connecter sur le serveur  depuis le navigateur de fichiers :

davs://pbellevue.libreedu.ovh/devpub/icn2017/votreloginreseau

Entrer alors votre nom d'utilisateur et mot de passe du réseau

 

  • Ouvrir Bluefish. Ouvrir un nouveau document et l'enregistrer sous index1.html dans votre espace personnel sur le réseau. Y copier le programme html ci-dessous.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="style1.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>

 

  • Vérifier qu'il s'affiche sur le navigateur. Pour cela, taper dans la barre d'URL du navigateur :

​​​​​​​https://pbellevue.libreedu.ovh/dev/icn2017/votreloginreseau/index1.html 

 

  • Associer à ce fichier index1.html un fichier css : Dans Bluefish, créer un nouveau fichier et l'enregistrer dans le dossier css de votre espace sur le serveur et le nommer style1.css
  • Modifier la couleur de fond de page en tapant :

                     body {background-color : blue ; }

Penser à enregistrer à chaque modification

 

  • Vérifier que tout fonctionne correctement sur le navigateur en rechargeant la page (F5).

 

 A présent, nous allons structurer la page en trois blocs comme ci-dessous en modifiant le fichier css.

  • Dans le fichier html, chaque bloc est identifié par la balise <div></div> et par un id (exemple id="bandeau"), c'est à dire un identifiant unique à la page qui l'identifiera dans le css.

 

  • Dans le fichier css, taper : 
div#bandeau { width:800px; height:50px; background-color:#00CCFF; }
  • Recharger la page du navigateur.
  • Qu'avons nous défini pour le bloc bandeau ?
  • Vous avez compris ? Alors faites de même pour le contenu (width : 700px; height:600px); et le pied de page (width : 800px; height:50px;) .

 

  • Nous pouvons aussi définir des caractéristiques communes pour toutes les <div> comme centrer le texte. Il suffit de compléter le css par : 
div { text-align:center; }
  • Lorsqu'il y a un menu dans une page, c'est mieux. Ajouter un menu dans le fichier html entre le bandeau et le contenu en tapant le code ci-dessous : 

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

  • Recharger la page.

Nous allons à présent déplacer le menu à gauche de la page comme dans l'exemple ci-contre.

  • Pour cela, nous allons utiliser la propriété float qui va permettre de la positionner à gauche (et non plus les éléments les uns en dessous des autres). Dans le css, taper :
#menu { float:left; width:100px; height:600px; background-color:#FF6699; }
  • Vérifier en rechargeant la page.

Mais n'y a-t-il pas un problème maintenant avec le pied de page ?

  • Pour qu'à nouveau les éléments se positionnent les uns en dessous des autres, rajouter dans le css, dans le bloc pied_page : 
 clear:both;

 

Bravo ! Allez il nous reste encore du  temps :

Nous allons rajouter  un bloc de news en haut à droite du bloc de contenu comme dans l'exemple : 

  • Dans la div 'contenu', nous allons intégrer une autre boîte donc une autre div pour les news. Ajouter donc :
 <div id="blocnews">   <h1>Bloc News</h1> <p>cours texte</p> </div>
  • Compléter alors le css pour le positionner :
#blocnews { float:right; width:200px; height:200px; background-color:#FF3300; }
  • Pour bien isoler le texte du bloc de news, on peut définir une marge. Compléter son bloc css avec :

       margin-top: 10px;

       margin-right: 10px;

       margin-bottom: 10px;

       margin-left: 10px;

Ou bien la même chose en plus élégant et concis :

          margin: 10px 10px 10px 10px;

  • Ce sera encore plus joli en créant un espace autour du titre défini par la balise <h1>. Dans le css, rajouter :
h1 { fontcolor:white; padding: 5px 5px 5px 5px; }
  • Compléter le travail en modifiant les bordures, la couleur, la taille du texte : des tutos ici

 

 

 

 

Catégories
  • detecteur_distance