Médiaforma

Guide de survie – Ossature d’un document HTML5

Print Friendly, PDF & Email

Nouvelle organisation des documents

Premier exemple – code HTML5

Tester le code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Un document XHTML avec en-tête, bas de page, menu, zone annexe et Zone de contenu</title>
    <link rel="stylesheet" href="style0.css">
  </head>
  <body>
    <div id="entete">
      <h1>En-tête du document</h1>
      Texte de l'en-tête
    </div>
    <div id="barre-navigation">
      <h2>Menu</h2>
      <ul>
        <li><a href="page1.htm">Page 1</a></li>
        <li><a href="page2.htm">Page 2</a></li>
        <li><a href="page3.htm">Page 3</a></li>
        <br><br>
      </ul>
    </div>
    <div id="barre-droite">
      Texte affiché dans la partie droite de la page<br><br>
    </div>

    <div class="article">
      <h2>Premier article</h2>
      Texte du premier article
    </div>
    <div class="article">
      <h2>Deuxième article</h2>
      Texte du deuxième article
    </div>
    <div id="bas-de-page">
      <p>Copyright et e-mail du Webmaster.</p>
    </div>
  </body>
</html>

Premier exemple – Feuille de style style0.css


#entete
{
  background-color: red;
}

#barre-navigation
{
  float:left;
  width:20%;
  background-color:yellow;
}

#barre-droite
{
  float:right;
  width:20%;
  background-color:yellow;
}

h2
{
  margin:0;
  padding:0;
}

.article
{
  width:80%;
  background-color: #66FFFF;
}

#bas-de-page
{
  clear:both;
  background-color: #99FF66;
}
<!doctype html>

Deuxième exemple – code HTML5

Tester le code

<html>
  <head>
    <meta charset=UTF-8" />
    <title>Un document HTML5 avec en-tête, bas de page, menu, zone annexe et Zone de contenu</title>
    <link rel="stylesheet" href="style1.css">
    <script src="Creation-elements-HTML5.js"></script>
  </head>
  <body>
    <header>
      <h1>En-tête du document</h1>
      Texte de l'en-tête
    </header>
    <nav>
      <h2>Menu</h2>
      <ul>
        <li><a href=”page1.htm”>Page 1</a></li>
        <li><a href=”page2.htm”>Page 2</a></li>
        <li><a href=”page3.htm”>Page 3</a></li>
      </ul>
      <br><br><br>
    </nav>
    <aside>
      Texte affiché dans la partie droite de la page avec l'élément aside<br><br>
    </aside>
    <article>
      <h2>Premier article</h2>
        <p>Texte du premier article</p>
    </article>
    <article>
      <h2>Deuxième article</h2>
        <p>Texte du deuxième article</p>
    </article>
    <footer>
      <p>Copyright et e-mail du Webmaster</p>
    </footer>
  </body>
</html>

Deuxième exemple – code CSS style1.css

header, nav, article, section, footer, aside
{
  display: block;
}
 

header
{
  background-color: red;
}
nav
{
  float:left;
  width:20%;
  background-color:yellow;
}
article
{
  background-color: #66FFFF;
  width:80%;
}

aside
{
  float:right;
  width:20%;
  background-color:yellow;
}

footer
{
  clear:both;
  background-color: #99FF66;
}

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

Salut Michel Martin,
Dans ton 2ème code ci-dessus (deuxième exemple – code HTML5), tu as ouvert une nouvelle balise aside dont tu n’as pas ignoré et le navigateur l’as interprétée. Bref, enfin, j’espère que tu m’a compris. Ciao

Bonjour Begovic,

Excellente remarque. Cependant, le code affiché dans le navigateur n’est pas le “code behind”, c’est-à-dire le vrai code HTML qui a permis d’écrire la page. Dans le code behind, les < et > de part et d’autre du aside sont remplacés par < et >

Merci d’avoir soulevé ce point. Cela a pu poser des problèmes à d’autres que toi.

resalut, oui ok vire le 2eme aside et ce sera jolie ^^, sinon j’ai une question : http://www.fferblanterie.ch/html5css3/vika
ceci est le site que je suis en train de réaliser simplement voila j’aimerai placer les article juste en dessous des images sans padding ou margin je veux simplement un clear mais sa ne marche pa le clear:both par ex se met meme au dessous des bloc gauche et droite t’aura pas une idée juste pour sauter le nav enfin les images je galère je poste sur tout les forum imposible de trouver, j’ai meme essayé un div qui englobe l’article et le nav mais non…hmm

Bonjour,

J’ai supprimé les commentaires de part et d’autre de l’élément article et le texte est bien affiché en dessous des images. C’est bien ce que tu veux faire si je ne m’abuse …

Du coup, je ne comprends pas ta question. Peux-tu préciser stp ?

Bonjour à tous,

Je me permets de vous contacter, car je suis entrain d’apprendre HTML5 et CCS3 pour me mettre à la page et j’aurai une question a vous poser.

Dans l’exemple que vous donnez, comment dire à la section “ARTICLE” d’utiliser au mini le restant de la page(mini-height).

Ma page de test est comme suit:
– Un “HEADER” avec une hauteur fixe (exprimé en px)
– Un “NAV” avec une hauteur fixe (exprimé en px)
– Un “FOOTER” avec une hauteur fixe (exprimé en px)
– Un “ARTICLE” avec une hauteur mini le restant de la page

Quand je met “mini-height: 100%” dans la partie article dans mon css, celui-ci prend la hauteur complète de la page et non la hauteur restante

Merci par avance pour votre retour,

Olivier

Voici le CSS que j’utilise:
html
{
margin:0;
padding:0;
height:100%;
}

header,nav,article,section,footer
{
display:block;
}

body
{
background-color:#8d0202;

width:1000px;
height:100%;

padding-top:0px;
margin-top:0px;
margin-left: auto;
margin-right: auto;
}

header
{
background-color:#FFFFFF;
height:200px;
}

nav
{
float:top;
background-color:#0000FF;
height:27px;
}

article
{
background-color:#FF0000;
height:100%;
}

footer
{
background-color:#000000;
color:#FFFFFF;
clear:both;
height:50px;
}

Bonjour,

Attention, ce n’est pas “mini-height” mais “min-height”.
Le pourcentage se réfère à la hauteur du conteneur: 100% signifie prendre 100% de la hauteur du conteneur de l’élément article.
Pour plus d’infos : http://www.css3.com/css-min-height/