La Communauté Webmaster  forum rss


  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  Comment est mon HTML5 ?		 « Précédent Suivant »
Pages: [1] Descendre
Répondre    Aviser des réponses    Envoyer le sujet    Imprimer
  Auteur  Sujet: Comment est mon HTML5 ?  (Lu 1503 fois)
Comment est mon HTML5 ?
« sur: le 11-07-2012 a 16:40:58 »
kaporal05
Membre récent
*

Hors-Ligne

Messages: 19



Je suis un lama!

Voir le Profil    WWW
Répondre avec citation

J'essaye depuis quelques temps déjà de faire un site en HTML5 avec toutes les informations que j'ai pu récupérer sur internet.

Aujourd'hui je suis arrivé à terminé ma page, l'affichage est ok dans IE et MOZILLA mais je suppose qu'il y a des incohérences dans ma page. Mon problème ? Savoir ou afin de trouver les solutions pour avoir le fichier le plus propre possible en HTML5. Si vous pouvez m'aider.
Ci-dessous le code ma page (dès la partie body).




Code:
<body>

<div class="center"><!-- START CENTER PAGE-->
   <div id="container"><!-- START CONTAINER-->         
         

<!-- START SECTION LOGO MENU-->
<section>
   <header>
            
    <figure>
   <a id="logo" title="Homepage" href="index.html"><img src="images/logo.png" alt="Accueil" width="220" height="60"/></a>
   </figure>
         
       
   <nav>
   <div id="main_navigation" class="main-menu">

      <ul>
         <li><a href="index.html" title="Page d'accueil">ACCUEIL</a></li>
                       
         <li><a href="#">MENU 1</a>
            <ul>
               <li><a href="#">LIEN</a></li>
               <li><a href="#">LIEN</a></li>
                    <li><a href="#">LIEN</a></li>
                    <li><a href="#">LIEN</a></li>
                    <li><a href="#">LIEN</a></li>
            </ul>
         </li>
                       
         <li><a href="#">MENU 2</a>
            <ul>
               <li><a href="#">LIEN</a></li>
               <li><a href="#">LIEN</a></li>
                    <li><a href="#">LIEN</a></li>
                    <li><a href="#">LIEN</a></li>
                    <li><a href="#">LIEN</a></li>
            </ul>
         </li>
                  
         <li><a href="#">MENU 3</a>         
         <li><a href="#">MENU 4</a></li>
         <li><a href="#">MENU 5</a></li>
      </ul>
                   
   </div>
   </nav>

   <div class="horizontal-line-prog"></div>
             
   </header>
</section>
<!-- END SECTION LOGO MENU-->
         
         
<!-- START SECTION ONE LOGO EVENT INFOS -->
<section class="one">
           
   <div class="one-third">
   <figure>
   <img src="images/photo01.jpg" width="465" height="110" alt="photo01">
   </figure>
   </div>
            
   <div class="one-third">
   <p></p>
   </div>
               
   <div class="one-third last">
   INFORMATIONS
      <ul class="checklist-list">
         <li>info 1</li>
         <li>info 2</li>
         <li>info 3</li>
      </ul>
   </div>
                       
</section>
<!-- END SECTION ONE LOGO EVENT INFOS -->
           
           
<!-- START SECTION ONE SLIDE -->
<section class="one">
               
   <div id="slides"><!-- START DIV SLIDES-->
      <div class="slides_container big-slider">
                        
         <div class="slide">
         <img src="images/slideshow/slide-02.jpg" alt=" " width="950" height="350"/> 
         </div>
                               
         <div class="slide">
         <img src="images/slideshow/slide-02.jpg" alt=" " width="950" height="350"/> 
         </div>
                               
         <div class="slide">
         <img src="images/slideshow/slide-02.jpg" alt=" " width="950" height="350"/> 
         </div>
                               
      </div>
   </div><!-- END DIV SLIDES-->
 
</section>
<!-- END SECTION ONE SLIDE -->

     
<!-- START SECTION ONE PRESENTATION PROGRAMME -->
<section class="one">
       
   <H1>TITRE PROGRAMME</H1>
   <p>TEXTE DESCRIPTIF</p>
   
   <!-- TITRE PROGRAMME--> 
   <H2>TITRE 2</H2>       
   <!-- TITRE -->
       
   <!-- DETAIL PROGRAMME-->
   <div class="one-half">
      <H3>TITRE 3</H3>
         <ul class="prog-list">
<li>DETAIL</li>
<li>DETAIL</li>
<li>DETAIL</li>
<li>DETAIL</li>
<li>DETAIL</li>
         </ul>
   </div>
       
   <div class="one-half last">
      <H3>TITRE 3</H3>
         <ul class="prog-list">
<li>DETAIL</li>
<li>DETAIL</li>
<li>DETAIL</li>
<li>DETAIL</li>
<li>DETAIL</li>
         </ul>
   </div>      
   <!-- END PROGRAMME-->
       
   <!-- TITRE BUDGET --> 
   <H2>TITRE 2</H2>       
   <!-- TITRE -->

   <!-- START TABLEAU --> 
   <center>                   
<table>
  <tr>
    <th>TABLEAU</th>
    <th>TABLEAU</th>
    <th>TABLEAU</th>
    <th>TABLEAU</th>
  </tr>
  <tr>
    <th>TABLEAU</th>
    <th>TABLEAU</th>
    <th>TABLEAU</th>
    <th>TABLEAU</th>
  </tr>
  <tr>
    <th>TABLEAU</th>
    <th>TABLEAU</th>
    <th>TABLEAU</th>
    <th>TABLEAU</th>
  </tr>
  <tr>
    <th>TABLEAU</th>
    <th>TABLEAU</th>
    <th>TABLEAU</th>
    <th>TABLEAU</th>
  </tr>
</table>
   </center>
    <!-- END TABLEAU -->
       
   <!-- START SECTION ONE TARIF INCLUT OPTION -->
   <div class="one">       
                   
      <div class="one-half">
         <H4>TITRE 4</H4>
         <ul class="coche-list">
<li>DETAIL</li>
<li>DETAIL</li>
<li>DETAIL</li>
<li>DETAIL</li>
<li>DETAIL</li>
         </ul>
      </div>
               
      <div class="one-half last">
         <H4>TITRE 4</H4>
         <ul class="coche-list">
<li>DETAIL</li>
<li>DETAIL</li>
<li>DETAIL</li>
<li>DETAIL</li>
<li>DETAIL</li>
         </ul>
      </div>

   </div>
   <!-- END SECTION ONE TARIF INCLUT OPTION -->
       
</section>
<!-- END SECTION ONE PRESENTATION PROGRAMME -->
       
       
<!-- START SECTION ONE FOOTER -->
<section>
   <footer>
   
    <!-- START WRAPPER-->     
   <div id="footer-wrapper">
            
                <!-- START FOOTER CONTAINER BF-->
                <div id="footer-container">
               <div id="footer"><!-- START FOOTER-->
               
                    <div class="one-fourth">
                  <h4>Nos autres sites</h4>
                     <ul class="social-links">
                        <li><a href="#">http://www.blablabla.com</a></li>
                        <li><a href="#">http://www.blablabla.com</a></li>
                                <li><a href="#">http://www.blablabla.com</a></li>
                                <li><a href="#">http://www.blablabla.com</a></li>
                                <li><a href="#">http://www.blablabla.com</a></li>
                            </ul>
               </div>     
                           
                    <div class="one-fourth">
                        <h4>Flash Code</h4>
                                    <a href="images/flashcode.png" class="portfolio-item-preview" data-rel="prettyPhoto"><img src="images/flashcode.png" alt=" " width="170" height="169" class="portfolio-img pretty-box"/></a>
                     </div>
                   
                    <div class="one-fourth">
                        <h4>Réseaux Sociaux</h4>
                           <ul class="social-links">
                              <!-- SOCIAL LINKS STARTS-->
                              <li><img src="images/icons/facebook.png" width="16" height="16" alt="#"/><a href="#">Page Facebook</a></li>
                              <li><img src="images/icons/twitter.png" width="16" height="16" alt="#"/><a href="#">Page Twitter</a></li>
                              <li><img src="images/icons/rss.png" width="16" height="16" alt="#"/><a href="#">Our RSS Feeds</a></li>
                              <li><img src="images/icons/vimeo.png" width="16" height="16" alt="#"/><a href="#">Our Vimeo Videos</a></li>
                           </ul>
                     </div>
                   
                    <div class="one-fourth last">
                        <h4>Contact</h4>
                           <p>NOM<br />
                                    ADRESSE 1<br />
                                    ADRESSE 2
                                    </p>
                                   
                                    <ul class="social-links">
                                       <li>Tel.: <a href="#">+ 33 (0)0 00 00 00 00</a></li>
                                        <li>Fax : <a href="#">+ 33 (0)0 00 00 00 00</a></li>
                                        <li>Mail : <a href="#">info@email.com</a></li>
                                    </ul>
                     </div>
                           
               </div><!-- END FOOTER-->
            </div>
                <!-- END FOOTER CONTAINER-->
               
                     
            <!-- START FOOTER CONTAINER BM-->
            <div id="footer-container2">
            </div>
                <!-- START FOOTER CONTAINER BM-->
               
   </div>
   <!-- END WRAPPER-->
       
   <!-- START COPYRIGHT WRAPPER -->
   <div id="copyright-wrapper">
            
      <div id="copyright">
         
            <figure>
         <a id="copyright-logo" title="Homepage" href="#"><img src="images/logo-bottom.png" alt="Accueil" width="185" height="50"/></a>
         </figure>
           
         <div class="right">
            <nav><p>
            <a href="#">Accueil</a> / <a href="#">Société</a> / <a href="#">Nos Clients</a> / <a href="#">Liens</a> / <a href="#">Newsletter</a> / <a href="#">Site Map</a> / <a href="#">Contact</a>
            </p></nav>
            <span>© Copyright 2012. Tous droits réservés .com</span>
         </div>
                       
      </div><!-- COPYRIGHTS ENDS-->
                 
   </div>
    <!-- END COPYRIGHT WRAPPER -->
   
     
   </footer>
</section>
<!-- END SECTION ONE FOOTER -->
               
   
   </div><!-- END CONTAINER-->     
</div> <!-- END CENTER PAGE-->

</body>
Rapporter au modérateur  

Re:Comment est mon HTML5 ?
« Répondre #1 sur: le 12-07-2012 a 12:41:28 »
Rex
Membre récent
*

Hors-Ligne

Messages: 1





Voir le Profil
Répondre avec citation


Salut ! 
Tu as vraiment un bon code !
Tu peux toujours vérifier ton code sur http://validator.w3.org/ .

Rapporter au modérateur  
Re:Comment est mon HTML5 ?
« Répondre #2 sur: le 13-07-2012 a 15:38:03 »
Pti Biscuit
Membre récent
*

Hors-Ligne

Messages: 30





Voir le Profil    WWW
Répondre avec citation


ligne 38 un <li> pas fermé.
ligne 118 un <center> balise non supportée. A enlever.

Le tableau <table>

Code:

<table border="1">
  <thead>
    <tr>
      <th>TABLEAU</th>
      <th>TABLEAU</th>
      <th>TABLEAU</th>
      <th>TABLEAU</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>TABLEAU</th>
      <th>TABLEAU</th>
      <th>TABLEAU</th>
      <th>TABLEAU</th>
    </tr>
    <tr>
      <th>TABLEAU</th>
      <th>TABLEAU</th>
      <th>TABLEAU</th>
      <th>TABLEAU</th>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>TABLEAU</th>
      <th>TABLEAU</th>
      <th>TABLEAU</th>
      <th>TABLEAU</th>
    </tr>
  </tfoot>
</table>
Rapporter au modérateur  
Re:Comment est mon HTML5 ?
« Répondre #3 sur: le 16-07-2012 a 10:44:45 »
mackean
Membre récent
*

Hors-Ligne

Messages: 12





Voir le Profil    WWW
Répondre avec citation

salut,

je ne pense pas que ce soit nécessaire d'encadrer ta balise header avec une balise section.

La balise section sert à remettre à 0 certaines balises telle que les balise H1, H2,...

Pour moi, ton code est trés bon sauf:

<body>
<header></header>
soit <div> soit <section> soit <aside>
</body>

a+
Rapporter au modérateur  
Répondre    Aviser des réponses    Envoyer le sujet    Imprimer
Pages: [1] Monter
« Précédent Suivant »
Sauter à: 

Votre statut : Invité
Vous devez être membre pour participer.
 
 
Let’s Encrypt : le certificat SSL gratuit
Tester votre site internet sur différents navigateurs
[WordPress] Des problèmes avec l’administration ?
Rappel : Mettez à jour vos CMS et vos sites E-commerce
Le .fr fête ses 25 années d’existence !
Mesurer votre audience en temps réel avec BubbleStat
Porter réclamation contre Google Panda ?
Zlio n’est plus …
 
 
 
 
 
Logo du forum du webmaster

Copyright (c) Devclic 2002 - 2026 - Tous droits réservés

creation site internet strasbourg