Organiser le contenu en HTML

Parent Previous Next


Organiser le contenu en HTML



La première chose à faire est de distinguer les principaux blocs sur la maquette. Ces blocs vont constituer le squelette de notre page.

Pour créer ce squelette, nous allons utiliser différentes balises HTML :

Comment je sais quelle balise utiliser moi ?

C'est à vous de décider. De préférence, utilisez une balise qui a du sens (comme les balises structurantes <header>, <section>, <nav>) mais, si aucune balise ne vous semble mieux convenir, optez pour la balise générique <div>.

Regardez la figure suivante pour voir ce que je vous propose comme structure.

Maquette découpée en différentes sections


On peut imaginer d'autres façons de faire le découpage, retenez bien que ma proposition n'est pas forcément la seule et unique solution !

Toutes les balises que l'on va utiliser n'apparaissent pas sur cette maquette mais cela vous permet d'avoir une idée de l'imbrication que je propose pour les éléments.

Le HTML n'est pas vraiment la partie complexe de la réalisation du site web. En fait, si vous avez bien compris comment imbriquer des balises, vous ne devriez pas avoir de mal à réaliser un code approchant du mien :

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

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

        <title>Zozor - Carnets de voyage</title>

    </head>

 

    <body>

        <div id="bloc_page">

            <header>

                <div id="titre_principal">

                    <img src="images/zozor_logo.png" alt="Logo de Zozor" id="logo" />

                    <h1>Zozor</h1>

                    <h2>Carnets de voyage</h2>

                </div>

                 

                <nav>

                    <ul>

                        <li><a href="#">Accueil</a></li>

                        <li><a href="#">Blog</a></li>

                        <li><a href="#">CV</a></li>

                        <li><a href="#">Contact</a></li>

                    </ul>

                </nav>

            </header>

             

            <div id="banniere_image">

                <div id="banniere_description">

                    Retour sur mes vacances aux États-Unis...

                    <a href="#" class="bouton_rouge">Voir l'article <img src="images/flecheblanchedroite.png" alt="" /></a>

                </div>

            </div>

             

            <section>

                <article>

                    <h1><img src="images/ico_epingle.png" alt="Catégorie voyage" class="ico_categorie" />Je suis un grand voyageur</h1>

                    <p>Lorem ipsum dolor sit amet...</p>

                    <p>Vivamus sed libero nec mauris pulvinar facilisis ut non sem...</p>

                    <p>Phasellus ligula massa, congue ac vulputate non, dignissim at augue...</p>

                </article>

                <aside>

                    <h1>À propos de l'auteur</h1>

                    <img src="images/bulle.png" alt="" id="fleche_bulle" />

                    <p id="photo_zozor"><img src="images/zozor_classe.png" alt="Photo de Zozor" /></p>

                    <p>Laisse-moi le temps de me présenter : je m'appelle Zozor, je suis né un 23 novembre 2005.</p>

                    <p>Bien maigre, n'est-ce pas ? C'est pourquoi, aujourd'hui, j'ai décidé d'écrire ma biographie (ou zBiographie, comme vous voulez !) afin que les zéros sachent qui je suis réellement.</p>

                    <p><img src="images/facebook.png" alt="Facebook" /><img src="images/twitter.png" alt="Twitter" /><img src="images/vimeo.png" alt="Vimeo" /><img src="images/flickr.png" alt="Flickr" /><img src="images/rss.png" alt="RSS" /></p>

                </aside>

            </section>

             

            <footer>

                <div id="tweet">

                    <h1>Mon dernier tweet</h1>

                    <p>Hii haaaaaan !</p>

                    <p>le 12 mai à 23h12</p>

                </div>

                <div id="mes_photos">

                    <h1>Mes photos</h1>

                    <p><img src="images/photo1.jpg" alt="Photographie" /><img src="images/photo2.jpg" alt="Photographie" /><img src="images/photo3.jpg" alt="Photographie" /><img src="images/photo4.jpg" alt="Photographie" /></p>

                </div>

                <div id="mes_amis">

                    <h1>Mes amis</h1>

                    <ul>

                        <li><a href="#">Pupi le lapin</a></li>

                        <li><a href="#">Mr Baobab</a></li>

                        <li><a href="#">Kaiwaii</a></li>

                        <li><a href="#">Perceval.eu</a></li>

                    </ul>

                    <ul>

                        <li><a href="#">Belette</a></li>

                        <li><a href="#">Le concombre masqué</a></li>

                        <li><a href="#">Ptit prince</a></li>

                        <li><a href="#">Mr Fan</a></li>

                    </ul>

                </div>

            </footer>

        </div>

    </body>

</html>


Petite particularité : comme vous le voyez, tout le contenu de la page est placé dans une grande balise <div> ayant pour idbloc_page (on l'appelle aussi parfois main_wrapper en anglais). Cette balise englobe tout le contenu, ce qui va nous permettre de fixer facilement les dimensions de la page et de centrer notre site à l'écran.

Pour le reste, aucune grosse difficulté à signaler. Notez que je n'ai pas forcément pensé à toutes les balises du premier coup : en réalisant le design en CSS, il m'est parfois apparu qu'il était nécessaire d'englober une partie des balises d'un bloc <div> pour m'aider dans la réalisation du design.

Pour le moment, comme vous vous en doutez, le site web n'est pas bien beau (et encore, je suis gentil). Vous pouvez voir le résultat actuel à la figure suivante.


Apparence du site web constitué uniquement du HTML



C'est en CSS que la magie va maintenant opérer.


Créé avec HelpNDoc Personal Edition: Générateur de documentation complet