Créer une page web interactive depuis une maquette Photoshop avec HTML5 et CSS

Créer le code de la colonne de droite

Testez gratuitement nos 1271 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Réalisez le code HTML5 de la colonne de droite de votre page web, après avoir observé la maquette Photoshop. Il est important de pouvoir réutiliser votre travail un maximum.

Transcription

Nous allons maintenant nous concentrer sur le code HTMLde la colonne de droite. Quand on observe cette colonne de droite, elle est constituée de trois sections différentes. Et chacune de ces sections est constituée, vous le voyez, d'un titre, et puis d'un contenu. Donc, il s'agit d'une structure qui est relativement aisée, à produire en HTML. Alors, on va se rendre directement au niveau de notre éditeur de code. Pour plus de clarté, je vais refermer ici cette balise articles, qui représentait ma colonne de gauche. Et me rendre dans ma balise side, qui représente ici ma colonne de droite. Dans cette colonne de droite, je vous le disais, j'ai besoin de trois sections, donc je vais utiliser la balise sections du HTML 5. Je vais bien-sûr nommer ces trois sections. Et puis, grâce à CRTL ou CMD D, dupliquer cette ligne de code trois fois. La première section, eh bien, je vais tout simplement l'appeler about. La deuxième section, je vais l'appeler share. Et la troisième section, je vais l'appeler categories. Attention, catégorie sans accent sur le e, puisque nous ne pouvons pas, ici, utiliser de caractères spéciaux, donc c'est bien l'orthographe anglaise qu'on utilise. À l'intérieur de chacune de ces trois sections, eh bien la première chose que l'on trouve, c'est un titre. Donc, je vais dans la première section. Et grâce à l'élément H1 de l'HTML, je vais pouvoir spécifier le titre de cette section. Donc, ce sera à propos, comme ceci. Le titre de la seconde section, ça sera partager cette page. Comme ceci. Et puis le titre de la dernière section, eh bien ce sera catégories. Avec un accent sur le e cette fois-ci. Alors, il est très important d'utiliser toujours la même structure, donc d'avoir une structure consistante, vous voyez ici que j'ai à chaque fois un élément H1, qui vient directement après l'élément section. Alors ça, ça sera très intéressant quand il faudra développer la feuille de style CSS, puisque grâce au fait que cette structure est consistante, eh bien, on pourra écrire un sélecteur CSS unique, pour atteindre en une fois ces trois éléments. Alors, dans la première section de cette colonne de droite, eh bien, j'ai tout simplement l'auteur et la date de parution, ça c'est très facile, je vais utiliser pour ça un simple paragraphe. Comme ceci. Alors l'auteur, eh bien c'est moi, Damien Bruyndonckx. Voilà, et puis je vais utiliser la balise break, pour faire un saut de ligne. Et donc la date de parution, comme ceci, eh bien je vais mettre par exemple, le 27 octobre 2016. Je vais mettre le mot auteur en gras, dans une balise strong. Et puis refermer cette balise strong ici. Après, les deux points. Et je vais faire la même chose avec la date de parution, strong qui s'ouvre et qui se ferme. Refermer cette balise ici, après les deux points. Voici donc pour la première section de la colonne de droite. La seconde section de la colonne de droite, elle contient des icônes qui vont permettre de partager cette page, vers différents réseaux sociaux. Alors, je vous propose d'en parler dans la vidéo suivante, je vais donc passer directement à la dernière section, celles des catégories. Alors là, j'ai besoin seulement d'une liste des catégories, vous le voyez, un effet de survol ici. Donc, il s'agit d'éléments qui doivent être cliquables. Et puis j'ai cette petite pastille, avec un nombre dedans, qui représente le nombre d'articles dans chacune des catégories. Pour réaliser cela, eh bien, j'ai tout simplement besoin d'une liste. C'est-à-dire une balise UL. Vous le savez, dans une liste j'ai des éléments de listes. J'ai des listes à items, donc des balises LI. Tout ça est cliquable, j'ai besoin donc d'une balise A. Qui m'emmènera nulle part, ça viendra plus tard, l'adresse de ces liens. Et puis, je vais avoir le nom de la catégorie, donc en attendant d'avoir les noms des catégories, je vais mettre catégorie 1, comme ceci. Et puis pour la petite pastille, je vais utiliser une balise span, avec un nombre entre les deux balises qui s'ouvrent et qui se ferment. Et donc je vais reproduire cette structure plusieurs fois, donc CTRL, CMD D, pour avoir deux ou trois catégories. Je vais changer les noms des catégories. Et puis pour le sport, je vais également changer les nombres qui se trouvent ici, qui se trouvent dans le span, admettons 8 et 2. Voilà donc pour le code HTML de la colonne de droite, vous voyez que c'est pas très compliqué. L'essentiel ici, c'est d'avoir une structure qui est cohérante, parce que ça va faciliter le développement, plus tard, de notre feuille de style CSS.

Créer une page web interactive depuis une maquette Photoshop avec HTML5 et CSS

Passez d’une maquette au format Photoshop vers une page web interactive en HTML5 et CSS. Découvrez des outils et des techniques indispensables dans votre travail d’intégrateur.

3h16 (43 vidéos)
Aucun commentaire n´est disponible actuellement
 

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !