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

Créer le code de la zone de contenu

Testez gratuitement nos 1324 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Créez le code HTML5 de la zone de contenu principale de votre site. Vous allez y intégrer un maximum d'éléments HTML5 décrivant les divers éléments textuels d'un document.

Transcription

La grande zone suivante sur laquelle nous devons nous concentrer, c'est la zone de contenu principal de notre site. Alors dans cette vidéo, on va se concentrer exclusivement sur la colonne de gauche, c'est-à-dire sur la colonne qui contient l'article de blog en tant que tel. Alors ici, on n'a rien besoin de particulier, c'est simplement du texte, et dans ce texte, vous voyez qu'on a dfférents type d'élements, on a des corps de texte, on a des titres, on pourrait aussi trouver dans ce type d'élements, eh bien, des listes, des listes à puces ou des listes à numéros. Du gras, de l'italique, des liens, etc. Donc, nous allons essayer, dans notre code HTML, ici, de reproduire le plus possible de ces éléments, comme ça quand on fera notre feuille de style, on pourra tenir compte de ces éléments qui auront donc déjà un style prédéfini, dans la feuille de style. Alors pour ça, je vais retourner sur internet, sur le site lipsum.com, vous voyez ici que j'ai demandé à ce site de générer, ici, quelques paragraphes de Lorem Ipsum, je vais en prendre quelques uns. et venir les copier coller dans ma page HTML. Alors, je vais les coller ici, dans ma balise articles, c'est-à-dire la balise qui défini la colonne de gauche. Je vais maintenant définir le plus possible de ces éléments, alors on va commencer par un titre. Alors rappelez-vous que dans une zone titre dont on a parlé dans une vidéo précédante, on a déjà créé une balise H1, donc un titre de niveau 1. Je vais donc commencer par une balise H2, ici, que je vais fermer un petit peu plus loin. Fin H2, comme ceci. J'ai oublié de fermer la balise. Voilà pour le titre. Ensuite, mettons un paragraphe de texte normal, donc je vais le fermer un petit peu plus loin, admettons ici. Générons un seconde paragraphe, comme ceci. Donc, je vais prendre la marque de fin de paragraphe, et la copier/coller un petit peu plus loin, voilà. Eh bien, maintenant mettons un titre de niveau 3, par exemple. Donc, encore un autre élement que je risque de rencontrer souvent, dans ce type de document web. Je vais, de nouveau ici, prévoir, par exemple, un paragraphe. Voilà, je vais fermer mon paragraphe, par exemple, ici. En créer un nouveau encore. Pour plus de clarté, je vais les mettre chacun sur sa ligne, comme ceci. Que peut-on encore rencontrer comme type d'éléments dans ce genre de document ? Eh bien, après ce paragraphe-ci, par exemple, je vais mettre une liste à puce. Donc, dans une liste j'ai besoin d'éléments de liste, c'est-à-dire la balise LI. Donc j'ai un item 1, et puis je vais dupliquer cette ligne, avec CMD D ou CTRL D si vous êtes sur PC. J'ai plusieurs exemplaires de cette ligne, donc, un item 2. Un item 3, un item 4 ici. Ensuite, on va refaire quelques paragraphes normaux. Donc voilà, je vais fermer le paragraphe, par exemple, ici après le point. Et puis, je vais de nouveau mettre ici un autre paragraphe, que je vais fermer tout à la fin. Comme ça, tous mes éléments sont maintenant dans des balises HTML. Eh bien, je vais encore prévoir une liste à numéros, donc c'est-à-dire une balise OL, dans ce cas-ci. Et donc, à l'intérieur de cette balise OL, j'ai également besoin d'éléments LI, comme ceci. Item 1, je vais dupliquer ceci, CMD D. Et remplir ma liste de différents éléments. Alors, je vais prévoir également que dans mon texte, je vais probablement avoir des liens, donc mettons ici une balise A, que je referme un petit peu plus loin. avec l'attribut HREF qui ne va, pour le moment, nulle part. Donc dièse ou hastag, ça dépend comment vous appelez ce caractère. Et puis, je vais encore prévoir, par exemple, du gras, c'est-à-dire la balise strong, que je vais refermer, de nouveau, un petit peu plus loin ici, admettons après le point. Et de l'italique, c'est-à-dire la balise EM, alors mettons ça ici, par exemple. Et je vais refermer ça un petit peu plus loin. Vous voyez que je prends soin de mettre le maximum d'éléments, alors on pourrait rajouter encore plein d'autres éléments HTML dans ce texte, je pense par exemple à des blog coat, ou à d'autres niveaux de titres. Et voilà, vous avez un exemple de comment on travaille ici, donc je prévois le plus possible d'éléments, qu'on rencontre souvent dans un document web.

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 !