Creer un document HTML5 et CSS3

LE DEVELOPPEMENT WEB MOBILE

 

OBJECTIF: ​​ Ce cours a pour objectif de comprendre:

 

  • Comment le navigateur interprête les codes HTML5 et CSS3

  • Le rôle de HTML5 et CSS3 dans la construction d’une page web

  • Comment on structure un document HTML5 ​​ avec des DIV et des FLEXBOX

  • Comment on structure un document HTML5 avec les tags semantique (header,section,article,aside, footer)

  • L’utilisation de différents tag HTML5.

  • La création de menu déroulant.

  • La création de tableaux.

  • L’utilisation de propriétés comme les id.

  • L’utilisation de liens hypertexte.

 

Les notions de responsive design ne sont pas abordé dans ce cours , mais la problématique est expliqué.

 

 

I) PRESENTATION DU DEVELOPPEMENT WEB MOBILE

 

Le développement d’application web mobile a pour objectif de créer des applications qui s’adapteront à tout les types d’écrans aussi bien ceux de bureaux que ceux des mobiles.

 

La première des étapes ​​ lorsque on souhaite développer une application web mobile est d’abord de recueillir le besoin des utilisateurs de l’application puis d’élaborer un cahier des charges dans lequel on formalisera le besoin.

 

La deuxième étape va consister a maquetter l’application web c’est à dire représenter les différents interfaces graphiques de l’application web ainsi que leur liaison entre eux.

 

La troisième étape va consister à créer les écrans avec les langages HTML5 qui permettent de structurer des pages web et CSS3 qui permettent de mettre en forme ces pages web . Les navigateurs web (Mozilla, chrome,internet explorer,opera,…) permettent alors d’interpréter ces pages HTML5 et CSS3 pour afficher les pages web de l’application. Ces deux langages nous permettent de construire des interfaces statiques.

 

La quatrième étape va consister à développer tous les traitements qui devront permettre a l’utilisateur d’interagir avec l’application web . Ainsi lorsque l’utilisateur va cliquer sur un bouton ou dans une zone une action va alors se déclencher. Par exemple un message va apparaître , une pop-up va s’ouvrir , une zone va s’animer, ou on peut faire glisser une zone d’un endroit à l’autre. Ces traitements s’effectuent avec le langage javascript. ​​ Ce langage nous permet de construire des interfaces dynamiques.

 

Les langages HTML5, CSS3, et JAVASCRIPT sont des langages qui vont être interprète par les navigateurs pour représenter les interfaces qui permettront à l’utilisateur de visualiser l’application et pour gérer les événements sur l’application grâce à javascript.

 

 

II) La creation d’une page web par le navigateur

 

Créons le fichier index.html suivant :

 

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

 

Nous exécutons ce fichier dans le navigateur en utilisant chrome,nous obtenons une page vide.

 

Cliquons sur outils de développement web→element , on obtient l’arborescence de la page et sur edit as html.

 

Nous créons une boite avec <div></div> , on valide et appuie sur esc.

On a crée un bloc qui a une taille de 0.

Nous allons donner un style à la div pour cela nous cliquons + (new style rule) dans la fenêtre style.

Nous écrivons :

 

div {

 background-color: red;

}

 

On constate que rien ne s’affiche sur la page , car la div a une hauteur nulle.

 

Modifions le code css precedent,comme suit :

 

div {

background-color: red;

height: 100px;

}

 

on constate que la boite devient rouge.

 

Cliquez sur body et ajouter le style suivant :

 

body {

 width: 600px;

 height: 600px;

 background-color: yellow;

}

​​ On constate que le body du document est devenu jaune et que la div est contenu dans le document.

 

Cliquez sur la div et ajouter un contenu au document, par exemple.

 

<p>Bonjour comment allez vous ?</p>

 

On constate que le paragraphe s’est ajouté dans la div, et que le message est collé en haut de la div . La div quand à elle est collé au haut du body modifions le css de la div comme suit :

 

div {

background-color: red;

height: 100px;

padding: 20px 0 0 100px;

margin: 100px 0 0 200px;

}

 

 

Pour mieux comprendre nous allons mettre en pratique tout cela:

 

Nous allons créer une page web simple avec les langages HTML5 ​​ et CSS3 et JAVASCRIPT puis nous exécuterons cette page avec un navigateur pour afficher la page web.

 

Nous avons besoin d’un éditeur de texte qui se prête bien au développement d’application web on peut par exemple utiliser sublimetext.

 

Lançons sublimetext ​​ subl index.html et saisissons le code suivant:

 

<!DOCTYPE html>

<html>

<head>

<style>

  p{

   color:red;

  }

</style>

<script>

  function afficher(){

   alert("bonjour comment allez vous");

  }

</script>

</head>

<body>

<p>Bonjour comment allez vous</p>

<input type="button" onclick="afficher();" value="envoyer" />

</body>

</html>

 

 

Enregistrez le fichier sous le nom index.html ​​ 

double cliquez sur le fichier la page web suivante s’affiche.

 

 

 

 

 

 

 

Des que l’on clique sur le bouton envoyer une pop-up s’ouvre avec le message “bonjour comment allez vous”

 

Nous allons expliquer les différentes parties de ce document , ci-dessous nous avons ajouté des commentaires au code .

 

<!--on declare une document HTML5-->

<!DOCTYPE html>

<!--debut de notre document HTML5 -->

<html>

<!--dans cette partie on va pouvoir ajouter des metadata aux documents HTML5

 ​​ ​​ ​​​​ qui sont des informations qui décriront la langue utilisé par notre document

 ​​ ​​ ​​​​ des informations qui permettront aux moteurs de recherche de bien referencer notre document

 ​​ ​​ ​​​​ des données qui indiqueront le codage utilisé pour nos caractéres

 ​​ ​​ ​​​​ les styles (CSS3) utilisés pour la mise en forme

 ​​ ​​ ​​​​ Les programmes javascript permettant de gérer des évenements liés aux actions utilisateurs

 ​​ ​​ ​​​​ click, drag and drop,passage de la souris dans une zone etc -->

<head>

<!--ici on décrit le style de notre document, on demande que le paragraphe soit en rouge-->

<style>

  p{

   color:red;

  }

</style>

<!--ici sont indiqués les programmes javascript , on définit une fonction qui va afficher le message bonjour comment allez vous-->

<script>

  function afficher(){

   alert("bonjour comment allez vous");

  }

</script>

</head>

<!--le corps de notre document HTML5, c'est ici que l'on va créer la structure de notre document avec des tags HTML5-->

<body>

 ​​ ​​ ​​​​ <!--on crée un paragraphe-->

<p>Bonjour comment allez vous</p>

<!--on crée un bouton des que l'on clique sur le bouton on appelle la fonction afficher,le bouton affichera le texte envoyer-->

<input type="button" onclick="afficher();" value="envoyer" />

</body>

<!--fermeture de notre document ​​ HTML5 -->

</html>

 

 

Dans le code ci-dessus on constate que tout les tags HTML5 s’ouvrent et se ferment par exemple:

 

<p>Bonjour comment allez vous</p>

 

 

III) LES ELEMENTS DE STRUCTURE

 

Nous pouvons structurer un document HTML avec des éléments de structure, c’est a dire des boites qui ​​ vont permettre de découper notre page web en partie différentes qui permettront de créer des zones dans lesquels on pourra placer des menu, des articles,des bannières, des images etc ….

 

Créons le document index.html suivant:

 

<!DOCTYPE html>

<html>

<head>

<style>

  body{

   background-color:yellow;

  }

  div{

   width:100px;

   height:100px;

   background-color:red;

   border:1px solid black;

 

  }

</style>

</head>

<body>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

</body>

</html>

 

Nous obtenons la page web suivante:

 

 

Le body du document est jaune

 

Les boites sont rouges elles ont une taille en largeur et hauteur de 100px ,une couleur rouge et une bordure de 1px de couleur noir. px représente un pixel qui est un ​​ point à l’écran. On constate que les boites se positionnent les unes sous les autres.

 

Nous pouvons changer la disposition des boites afin qu’elles s’alignent les unes derrière les autres en ​​ partant de la gauche ,pour cela saisissez le code suivant dans le fichier index.html

 

<!DOCTYPE html>

<html>

<head>

<style>

  body{

   background-color:yellow;

  }

  div{

   width:100px;

   height:100px;

   background-color:red;

   border:1px solid black;

   float:left;

   text-align:center;

 ​​ ​​ ​​ ​​​​   vertical-align:middle;

 ​​ ​​ ​​ ​​​​   line-height: 100px;

  }

</style>

</head>

<body>

<div>1</div>

<div>2</div>

<div>3</div>

<div>4</div>

<div>5</div>

</body>

</html>

 

 

On obtient alors l’affichage suivant:

 

 

Nous inscrivons un numéro dans chaque boite, puis nous utilisons float:left pour indiquer que les boites s’alignent les unes derrière les autres à partir de la gauche ​​  text-align:center va permettre de centrer le texte dans la div puis nous définissons la hauteur de ligne line-height: 100px à la même taille que la div et nous alignons le texte dans la ligne avec vertical-align:middle.

 ​​ ​​ ​​ ​​​​   

Exercice1 :

 

Remplacez float: left par float:right que constatez vous ?

 

On souhaite maintenant pouvoir personnaliser les couleurs , les tailles la position des différentes boites; pour cela nous allons leur attribuer un identifiant qui va permettre de pouvoir leur affecter un style personnalisé.

 

Pour cela nous allons saisir le code suivant:

 

<!DOCTYPE html>

<html>

<head>

<style>

  body{

   background-color:yellow;

  }

  #boite1{

   width:100px;

   height:100px;

   background-color:red;

   border:1px solid black;

   float:left;

   text-align:center;

 ​​ ​​ ​​ ​​​​   vertical-align:middle;

 ​​ ​​ ​​ ​​​​   line-height: 100px;

  }

  #boite2{

   width:100px;

   height:100px;

   background-color:blue;

   border:1px solid black;

   float:left;

   text-align:center;

 ​​ ​​ ​​ ​​​​   vertical-align:middle;

 ​​ ​​ ​​ ​​​​   line-height: 100px;

  }

  #boite3{

   width:100px;

   height:100px;

   background-color:green;

   border:1px solid black;

   clear:both;

   float:left;

   text-align:center;

 ​​ ​​ ​​ ​​​​   vertical-align:middle;

 ​​ ​​ ​​ ​​​​   line-height: 100px;

  }

  #boite4{

   width:100px;

   height:100px;

   background-color:pink;

   border:1px solid black;

   float:left;

   text-align:center;

 ​​ ​​ ​​ ​​​​   vertical-align:middle;

 ​​ ​​ ​​ ​​​​   line-height: 100px;

  }

  #boite5{

   width:100px;

   height:100px;

   background-color:orange;

   border:1px solid black;

   float:left;

   text-align:center;

 ​​ ​​ ​​ ​​​​   vertical-align:middle;

 ​​ ​​ ​​ ​​​​   line-height: 100px;

  }

</style>

</head>

<body>

<div id="boite1">1</div>

<div id="boite2">2</div>

<div id="boite3">3</div>

<div id="boite4">4</div>

<div id="boite5">5</div>

</body>

</html>

 

On obtient alors la ​​ page suivante:

 

 

 

Nous avons attribué la propriété id aux boites , par exemple: <div id="boite1">1</div> signifie que cette boite à pour id “boite1”.

 

Ainsi nous allons affecter un style personnalisé à cette boite grâce à cet id de la manière suivante:

 

#boite1{

width:100px;

height:100px;

background-color:red;

border:1px solid black;

float:left;

text-align:center;

 ​​ ​​ ​​ ​​​​  vertical-align:middle;

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ line-height: 100px;

}

 

Nous affectons ensuite les mêmes propriétés à toutes les autres boites sauf la couleur ,et de plus arrivé à la troisième boite nous utilisons la propriété suivante clear:both qui indique que l’on ne souhaite pas que la boite3 soit situé à la gauche des précédentes mais qu’elle reprenne son flux normal avant que l’on commence à affecter les styles a savoir qu’elle se positionne en dessous,et toutes les autres viendront se positionner à droite.

 

Exercice2 :

 

Modifier le code précédent pour obtenir la page web suivante:

 

 

Il est possible d’imbriquer des boites les unes dans les autres par exemple , créez le fichier suivant:

 

<!DOCTYPE html>

<html>

<head>

<style>

  #boite0{

   width:600px;

   height:600px;

   background-color:yellow;

  }

  #boite1{

   width:398px;

   height:200px;

   background-color:red;

   border:1px solid black;

   float:left;

   text-align:center;

   vertical-align:middle;

   line-height: 200px;

  }

  #boite2{

   width:198px;

   height:200px;

   background-color:blue;

   border:1px solid black;

   float:right;

   text-align:center;

   vertical-align:middle;

   line-height: 100px;

  }

</style>

</head>

<body>

<div id="boite0">

  <div id="boite1">1</div>

  <div id="boite2">2</div>

</div>

</body>

</html>

 

Nous obtenons la page web suivante:

 

Ici nous définissons la boite0 qui va contenir les deux boites boite1 et boite2.

Nous donnons la largeur 600px et la hauteur 600px à la boite .Nous souhaitons que la boite1 et la boite2 contenu dans la boite0 soit disposé l’une à côté de l’autre et occupe toute la largeur de la boite0. Pour cela nous devons donner aux boite1 et boite2 des largeurs dont la taille sera égale à 600 px . Nous donnons donc la taille de 398px a la boite 1 qui augmente de 1px des deux côtés occupera une largeur de 400px , puis nous donnons une taille de 198px à la boite2 qui augmente de 1px à droite et à gauche occupera 200px.

 

Exercice3 :

 

Réaliser la page web suivante:

 ​​ ​​​​   

​​ 

Nous pouvons également définir des marges internes et des marges extérieures qui vont s’appliquer sur les boites , saisissons le code suivant:

 

<!DOCTYPE html>

<html>

<head>

<style>

  #boite0{

   padding-top:50px;

   padding-right:50px;

   padding-bottom:50px;

   padding-left:50px;

  }

  #boite0{

   width:600px;

   height:600px;

   background-color:yellow;

  }

  #boite1{

   float:left;

   width:100px;

   height:100px;

   background-color:red;

   border:1px solid black;

   text-align:center;

   vertical-align:middle;

   line-height: 100px;

   margin-bottom:20px;

  }

  #boite2{

   margin-bottom:10px;

   margin-left:10px;

   float:left;

   width:100px;

   height:100px;

   background-color:orange;

   border:1px solid black;

   text-align:center;

   vertical-align:middle;

   line-height: 100px;

  }

  #boite3{

   clear:both;

   float:left;

   width:100px;

   height:100px;

   background-color:pink;

   border:1px solid black;

   text-align:center;

   vertical-align:middle;

   line-height: 100px;

  }

  #boite4{

   margin-left:10px;

   float:left;

   width:100px;

   height:100px;

   background-color:green;

   border:1px solid black;

   text-align:center;

   vertical-align:middle;

   line-height: 100px;

  }

 

</style>

</head>

<body>

<div id="boite0">

  <div id="boite1">1</div>

  <div id="boite2">2</div>

  <div id="boite3">1</div>

  <div id="boite4">2</div>

</div>

</body>

</html>

 

Nous obtenons la page web suivante:

 

Les instructions :

 

   padding-top:50px;

   padding-right:50px;

   padding-bottom:50px;

   padding-left:50px;

 

appliqués a boite0 permettent de créer des marges intérieures en haut, à droite, en bas et à gauche de la boite boite0. Donc on constate que les quatre boites (boite1,boite2,boite3,boite4) sont décalés par rapport au bord haut et gauche de boite0.

 

De plus les instructions:

 

   margin-bottom:10px;

   margin-left:10px;

 

appliqués à boite2 crée une marge extérieure gauche et en bas. Malgré que la marge en bas est appliqué uniquement à boite2 les marges en bas de boite1 et boite2 fusionnent.

 

Enfin l’instruction margin-left:10px; appliqué à boite 4 permet de créer une marge extérieure gauche de boite4.

 

On constate sur cet exemple que la marge du bas malgré qu’on l’applique à boite2 s’applique également à boite1, comment aurais du t’on procéder pour ne l’appliquer qu’a boite2 et pas au deux.

 

Pour cela saisissons le code suivant :

 

<!DOCTYPE html>

<html>

<head>

<style>

  #boite0{

   padding-top:50px;

   padding-right:50px;

   padding-bottom:50px;

   padding-left:50px;

  }

  #boite0{

   width:600px;

   height:600px;

   background-color:yellow;

  }

  #boite1{

   margin-bottom:10px;

   float:right;

   width:100px;

   height:100px;

   background-color:blue;

   border:1px solid black;

   text-align:center;

   vertical-align:middle;

   line-height: 100px;

  }

  #boite2{

   margin-left:20px;

   margin-bottom:30px;

   float:left;

   width:100px;

   height:100px;

   background-color:orange;

   border:1px solid black;

   text-align:center;

   vertical-align:middle;

   line-height: 100px;

  }

 

  #boite3{

   clear:both;

   float:right;

   width:100px;

   height:100px;

   background-color:red;

   border:1px solid black;

   text-align:center;

   vertical-align:middle;

   line-height: 100px;

   margin-bottom:20px;

  }

  #boite4{

   margin-left:20px;

   clear:both;

   float:left;

   width:100px;

   height:100px;

   background-color:green;

   border:1px solid black;

   text-align:center;

   vertical-align:middle;

   line-height: 100px;

  }

  .super{

   width:298px;

   height:598px;

   float:left;

   padding:0;

   marging:0;

   border:1px solid black;

  }

</style>

</head>

<body>

<div id="boite0">

  <div class="super">

   <div id="boite1">1</div>

   <div id="boite3">3</div>

  </div>

  <div class="super">

   <div id="boite2">2</div>

   <div id="boite4">4</div>

  </div>

</div>

</body>

</html>

 

On constate que l’on obtient la page web suivante:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Comme nous le voyons dans le code ci-dessous nous avons englobé les div dans des sous-div:

 

<div id="boite0">

  <div class="super">

   <div id="boite1">1</div>

   <div id="boite3">3</div>

  </div>

  <div class="super">

   <div id="boite2">2</div>

   <div id="boite4">4</div>

  </div>

</div>

 

en effet boite1 et boite3 sont englobé dans une sous-div et boite2 et boite4 également. Cette sous-div est identifié non plus avec la propriété id mais avec la propriété class . En effet lorsque nous souhaitons appliquer une mise en forme personnalisé à une boite nous avons vu que nous l’identifions avec la propriété id,par contre lorsque nous voulons appliquer les mêmes mises en forme à des éléments nous les identifions avec la propriété class.

 

Ensuite nous donnons des dimensions a cette sous div afin qu’elle occupe la moitié de l’espace définie en largeur et hauteur par la boite englobante boite0.Nous lui attribuons la propriété float pour que les div se positionne l’une à côté de l’autre.

Les boites 1 et 3 se positionne à droite de la sous-div avec la propriété float:right; et les div 2 et 4 se positionne a gauche de la sous-div avec la propriété float:left;

 

  .super{

   width:298px;

   height:598px;

   float:left;

   padding:0;

   marging:0;

   border:1px solid black;

  }

On constate alors que l’on peut appliquer les marges inférieures au div et qu’elles s’appliquent individuellement et ne fusionnent pas.

 

Exercice: réalisez la page web suivante:

 

Nous constatons que le fichier index.html devient trop long et dans ce fichier HTML5 et CSS3 sont ensemble, nous allons donc créer un fichier styles.css dans lequel nous allons isoler le code css3 et nous allons créer une référence vers ce fichier styles.css dans le fichier html pour cela réalisons les étapes suivantes:

Créer le fichier styles.css et couper coller dans ce fichier le code se trouvant entre les tag <styles> et </styles> ​​ le fichier styles.css contient le code suivant:

 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ #container{

   width:600px;

   height:600px;

   background-color:yellow;

  }

  #haut{

   width:598px;

   height:98px;

   background-color:blue;

   border:1px solid black;

   text-align:center;

   vertical-align:middle;

   line-height: 98px;

  }

  #hautgauche{

   float:left;

   width:100px;

   height:98px;

   background-color:pink;

   border:1px solid black;

   text-align:center;

   vertical-align:middle;

   line-height: 47px;

  }

  #hautdroit{

   float:right;

   width:100px;

   height:98px;

   background-color:pink;

   border:1px solid black;

   text-align:center;

   vertical-align:middle;

   line-height: 47px;

  }

  #menu{

   width:598px;

   height:48px;

   background-color:orange;

   border:1px solid black;

   text-align:center;

   vertical-align:middle;

   line-height: 48px;

  }

 

  #centre{

   width:598px;

   height:398px;

   background-color:red;

   border:1px solid black;

   text-align:center;

   vertical-align:middle;

   line-height: 398px;

  }

 

  #centre1{

   float:left;

   width:197px;

   height:398px;

   background-color:pink;

   border:1px solid black;

   text-align:center;

   vertical-align:middle;

   line-height: 398px;

  }

  #centre2{

   float:left;

   width:197px;

   height:398px;

   background-color:pink;

   border:1px solid black;

   text-align:center;

   vertical-align:middle;

   line-height:398px;

  }

  #centre3{

   float:right;

   width:197px;

   height:398px;

   background-color:pink;

   border:1px solid black;

   text-align:center;

   vertical-align:middle;

   line-height:398px;

  }

 

  #bas{

   width:598px;

   height:48px;

   background-color:green;

   border:1px solid black;

   text-align:center;

   vertical-align:middle;

   line-height: 48px;

  }

  #basgauche{

   float:left;

   width:200px;

   height:48px;

   background-color:pink;

   border:1px solid black;

   text-align:center;

   vertical-align:middle;

   line-height: 47px;

  }

  #basdroit{

   float:right;

   width:200px;

   height:48px;

   background-color:pink;

   border:1px solid black;

   text-align:center;

   vertical-align:middle;

   line-height: 47px;

  }

 

 

la partie <head> et </head> ​​ devient:

 

<head>

<link rel="stylesheet" href="styles.css" />

</head>

 

 

augmentons la taille du container de la manière suivante dans le fichier styles.css:

 

#container{

width:960px;

height:800px;

background-color:yellow;

}

 

La page web devient:

 

 

 

On constate alors qu’il faut recalculer toutes les dimensions pour caler toutes les zones à la nouvelle dimension du container ce qui est un problème. Pour régler ce problème on peut utiliser les dimensions relatives. Le fichier styles.css devient alors:

 

#container{

   width:960px;

   height:800px;

   background-color:yellow;

  }

  #haut{

   width:100%;

   height:16.67%;

   background-color:blue;

   border:1px solid black;

   text-align:center;

   vertical-align:middle;

   line-height: 100%;

  }

  #hautgauche{

   float:left;

   width:16.67%;

   height:100%;

   background-color:pink;

   border:1px solid black;

   text-align:center;

   vertical-align:middle;

   line-height: 100%;

  }

  #hautdroit{

   float:right;

   width:16.67%;

   height:100%;

   background-color:pink;

   border:1px solid black;

   text-align:center;

   vertical-align:middle;

   line-height: 100%;

  }

  #menu{

   width:100%;

   height:8.34%;

   background-color:orange;

   border:1px solid black;

   text-align:center;

   vertical-align:middle;

   line-height: 100%;

  }

 

  #centre{

   width:100%;

   height:66.67%;

   background-color:red;

   border:1px solid black;

   text-align:center;

   vertical-align:middle;

   line-height: 398px;

  }

 

  #centre1{

   float:left;

   width:33.33%;

   height:100%;

   background-color:pink;

   border:1px solid black;

   text-align:center;

   vertical-align:middle;

   line-height: 100%;

  }

  #centre2{

   float:left;

   width:33.33%;

   height:100%;

   background-color:pink;

   border:1px solid black;

   text-align:center;

   vertical-align:middle;

   line-height: 100%;

  }

  #centre3{

   float:right;

   width:33.33%;

   height:100%;

   background-color:pink;

   border:1px solid black;

   text-align:center;

   vertical-align:middle;

   line-height: 100%;

  }

 

  #bas{

   width:100%;

   height:8.34%;

   background-color:green;

   border:1px solid black;

   text-align:center;

   vertical-align:middle;

   line-height: 100%;

  }

  #basgauche{

   float:left;

   width:30%;

   height:100%;

   background-color:pink;

   border:1px solid black;

   text-align:center;

   vertical-align:middle;

   line-height: 100%;

  }

  #basdroit{

   float:right;

   width:30%;

   height:100%;

   background-color:pink;

   border:1px solid black;

   text-align:center;

   vertical-align:middle;

   line-height: 100%;

  }

 

 

On obtient alors la page suivante:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

On constate que les boites centre1,centre2, centre3 ne tiennent pas sur la même ligne en effet nous indiquons que ces boites doivent tenir 1/3 de la boite centre mais le problème c’est que nous avons attribué des bordures de 1px à ces boites qui vont leur donner une taille totale qui sera supérieure à celle du container. Nous allons utiliser l’instruction suivante ​​ box-sizing: border-box; ​​ pour que la taille des boites prennent en considération le contenu de la boite et les bordures.

 

 

*{

 ​​ ​​ ​​ ​​​​ box-sizing: border-box;

 ​​​​ }

 

La page web devient:

 

 

 

 

 

 

 

 

 

 

 

 

 

Nous allons commencer à intégrer du contenu dans la page web pour cela nous allons sur le site:

 

https://fr.lipsum.com/

 

Dans chacune des boites centre1, centre2, centre3 nous allons rajouter le paragraphe suivant:

 

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dolor tortor, porta vel vehicula nec, vestibulum a nisi. Pellentesque hendrerit pharetra imperdiet. Ut eu erat arcu. Proin euismod rutrum aliquam. Nunc dictum, lectus vitae venenatis venenatis, mauris odio dictum sapien, eget tincidunt neque eros quis nisi. Ut suscipit porttitor odio, at lacinia ipsum consectetur quis. Morbi vitae aliquam elit.

Proin nec luctus mauris. Vivamus in venenatis libero, sed porta dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean tortor neque, molestie sit amet augue sit amet, semper mollis diam. Praesent eget orci in magna eleifend gravida. Quisque vitae elit dapibus, auctor mi ut, tempor turpis. In gravida diam nec tellus bibendum, ac condimentum leo blandit. In sagittis vehicula ornare. Aenean at arcu convallis, accumsan velit volutpat, gravida mi.</p>

 

Nous obtenons alors la page web suivant:

 

rendez vous ensuite sur le site https://www.flickr.com/ et télécharger deux images un logo par exemple et une autre image , pour ma part j’ai téléchargé des images que j’ai nommé logo.jpg et ordinateur.jpg nous allons intégrer ces deux images dans les boites hautgauche et hautdroit pour cela nous modifions le fichier index.html de la facon suivante:

 

<div id="hautgauche"><img src="logo.jpg" alt="logo"/></div>

<div id="hautdroit"><img src="ordinateur.jpg" alt="ordinateur"/></div>

 

Nous obtenons alors page web suivante: