Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Enfin, nous y voilà. C'est un chapitre un peu particulier, assez différent de c

Enfin, nous y voilà. C'est un chapitre un peu particulier, assez différent de ce que vous avez lu jusqu'à maintenant. En fait, c'est ce que j'appelle un « TP » (travaux pratiques). Maintenant, vous ne pouvez plus vous contenter de lire mes chapitres à moitié endormi, vous allez devoir mettre la main à la pâte en même temps que moi. Vous avez lu beaucoup de théorie jusqu'ici, mais vous vous demandez sûrement comment font les webmasters pour créer d'aussi beaux sites. Vous vous dites que vous êtes encore loin d'avoir les connaissances nécessaires pour construire tout un site… Eh bien vous vous trompez ! Maquettage du design Je vois d'ici le tableau. Vous vous dites « Chouette, on va créer un site complet », vous ouvrez votre éditeur de texte et vous me regardez en me demandant « Bon, par quelle ligne de code on commence ? ». Et là, je dois justement vous arrêter. Prenez un crayon et un papier : il faut d'abord réfléchir à ce que vous voulez créer comme site. De quoi va-t-il parler ? Avez-vous un thème, un objectif ? Je sais, par expérience, que la plupart d'entre vous « cherchent juste à apprendre » pour le moment. Vous n'avez donc peut-être pas encore d'idée précise en tête. Dans ce cas, je vous suggère de créer un site pour vous présenter, pour assurer votre présence sur le Web : ce site parlera de vous, il y aura votre CV, vos futures réalisations et pourquoi pas votre blog. En ce qui me concerne, dans ce TP, je vais réaliser le site web de notre ami Zozor. Zozor a décidé de partir en voyage à travers le monde et sa première étape sera… San Francisco ! Il veut donc créer un site web pour qu'on le connaisse et pour qu'on suive son périple à travers le monde. Zozor part en voyage et a besoin d'un site web Zozor part en voyage et a besoin d'un site web La première étape consiste à maquetter le design, pour avoir un objectif du site web à réaliser. À partir de là, deux possibilités : soit vous êtes un graphiste (ou vous en connaissez un) ayant l'habitude d'imaginer des designs, avec des logiciels comme Photoshop ; soit vous n'êtes pas très créatif, vous manquez d'inspiration et, dans ce cas, vous allez chercher votre inspiration sur des sites web comme https://html5up.net/, qui vous proposent des idées de design et qui peuvent même vous donner le code HTML/CSS tout prêt ! Pour ma part, j'ai fait appel à un graphiste, Fan Jiyong, qui m'a proposé le design (qui me plaît beaucoup !) que vous pouvez voir à la figure suivante. La maquette du site web que nous allons réaliser La maquette du site web que nous allons réaliser Conception de la maquette : Fan Jiyong Cette maquette est en fait une simple image du résultat qu'on veut obtenir. Je demande au graphiste de me fournir les éléments qui vont m'aider à construire le design, c'est-à-dire les codes couleurs utilisés, les images découpées (figure suivante), ainsi que les polices dont j'aurai besoin. Télécharger les images et les polices Il ne nous reste plus qu'à réaliser ce site web ! Nous allons procéder en deux temps : Nous allons construire le squelette HTML de la page. Puis nous allons le mettre en forme et le mettre en page avec CSS. Allez, au boulot ! 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 : les balises structurantes de HTML5, que nous connaissons : <header> , <section> , <nav> , etc. ; la balise universelle <div> quand aucune balise structurante ne convient. 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 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"> <div id="logo"> <img src="images/zozor_logo.png" alt="Logo de Zozor" /> <h1>Zozor</h1> </div> <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, consectetur adipiscing elit. Aliquam nec sagittis massa. Nulla facilisi. Cras id arcu lorem, et semper purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis vel enim mi, in lobortis sem. Vestibulum luctus elit eu libero ultrices id fermentum sem sagittis. Nulla imperdiet mauris sed sapien dignissim id aliquam est aliquam. Maecenas non odio ipsum, a elementum nisi. Mauris non erat eu erat placerat convallis. Mauris in pretium urna. Cras laoreet molestie odio, consequat consequat velit commodo eu. Integer vitae lectus ac nunc posuere pellentesque non at eros. Suspendisse non lectus lorem.</p> <p>Vivamus sed libero nec mauris pulvinar facilisis ut non sem. Quisque mollis ullamcorper diam vel faucibus. Vestibulum sollicitudin facilisis feugiat. Nulla euismod sodales hendrerit. Donec quis orci arcu. Vivamus fermentum magna a erat ullamcorper dignissim pretium nunc aliquam. Aenean pulvinar condimentum enim a dignissim. Vivamus sit amet lectus at ante adipiscing adipiscing eget vitae felis. In at fringilla est. Cras id velit ut magna rutrum commodo. Etiam ut scelerisque purus. Duis risus elit, venenatis vel rutrum in, imperdiet in quam. Sed vestibulum, libero ut bibendum consectetur, eros ipsum ultrices nisl, in rutrum diam augue non tortor. Fusce nec massa et risus dapibus aliquam vitae nec diam.</p> <p>Phasellus ligula massa, congue ac vulputate non, dignissim at augue. Sed auctor fringilla quam quis porttitor. Praesent vitae dignissim magna. Pellentesque quis sem purus, vel elementum mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas consectetur euismod urna. In hac habitasse platea dictumst. Quisque tincidunt porttitor vestibulum. Ut iaculis, lacus at molestie lacinia, ipsum mi adipiscing ligula, vel mollis sem risus eu lectus. Nunc elit quam, rutrum ut dignissim sit amet, egestas at sem.</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 afin que vous sachiez 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> <div id="listes_amis"> <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> </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 id bloc_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 Apparence du site web constitué uniquement du HTML C'est en CSS que la magie va maintenant opérer. Mettre en forme en CSS Les choses se compliquent un peu plus lorsqu'on arrive au CSS. En effet, il faut du travail (et parfois un peu uploads/Voyage/ information-sur-html.pdf