blog de mode avec HTML

Créez un blog de mode avec HTML

Temps de lecture: 4 minutes

Salut la #davidnation

Dans l’article d’aujourd’hui, vous allez renforcer vos connaissances en HTML en mettant en place un petit blog de mode pour une de vos amies que nous appellerons Isa.

Pour suivre les instructions de cet article, il faut avoir des bases en HTML. Si vous ne les avez pas, je vous encourage à suivre mon cours gratuit au cours duquel je vous apprends à créer des sites web cools avec HTML (mais aussi CSS) 😎

Un éditeur de code (Atom, Sublime Text, Brackets etc…) et un navigateur web (Chrome, Firefox, Safari) sont recommandés. Sinon comment comptiez-vous voir le résultat de votre travail ? 😜

Revenons à nos moutons…..

Votre amie Isa est une bloggeuse de mode en herbe et elle vous a demandé de lui construire un nouveau site, juste à temps pour la Fashion Week de New York!

Nous utiliserons vos connaissances en HTML pour créer la structure sous-jacente du blog. Voici à quoi va ressembler le site une fois terminé

Si vous voulez voir le projet en vidéo, rendez-vous au bas de cette page.

Créez un nouveau fichier que vous appellerez index.html

1 .Pour commencer, ajoutez la déclaration <!DOCTYPE html> comme première ligne de code en haut du fichier index.html. Ajoutez la balise <html> en-dessous.
2 .Sous la balise d’ouverture <html>, ajoutez une balise <head>. Sous <head>, ajoutez la balise <body>
3 .Dans les balises <head>, ajoutez une balise <title>. Avec pour texte entre ces balises: « La mode avec Isa ».
4 .Directement au-dessous de la balise <body> , ajoutez un <h1>qui dit:

« Un guide à la NYFW »

En dessous, ajoutez un <h2>qui dit:

« Obtenir des billets pour les spectacles »

En dessous, ajoutez un <h2>qui dit:

« S’habiller pour les spectacles »

5 .Voici la première dépêche d’Isa de la Fashion Week! Ajoutons un article pour son blog. Entre la première balise <h1>et la première balise <h2>, ajoutez une balise <p> qui dit:

« La NYFW peut être à la fois incroyablement amusant et incroyablement accablant, surtout si vous n’y êtes jamais allé, heureusement, je suis ici pour vous donner un guide d’initié et faire de votre première expérience une expérience agréable en prenant mes trucs et astuces, et en suivant votre intestin, vous aurez une expérience inoubliable!  »

6. En dessous de la première balise <h2>, ajoutez un autre paragraphe à la publication en utilisant <p>:

« Si vous êtes chanceux ou connecté, vous pouvez obtenir une invitation, sans l’étiquette de prix.Mais je n’ai pas été si chanceux ou connecté mes deux premières années, donc je suis là pour vous aider. important pour vous et faire un calendrier et c’est un Biggie: SET uN BUDGET Si vous inquiéter de souffler votre argent tout le temps, vous ne serez pas vous amuser vérifier alors les prix, les jours et les temps et prioriser les concepteurs vous.. Enfin, achetez vos billets et excitez-vous!  »

7. En dessous de la dernière balise <h2>, ajoutez un dernier paragraphe qui dit:

«Soyez toujours fidèle à votre propre style, si vous ne le faites pas, vous serez mal à l’aise tout le temps et ça se verra.N’oubliez pas, NYFW est de s’exprimer et d’accepter ce que les designers ont choisi d’exprimer à travers leurs nouvelles lignes De plus, il est important de porter des chaussures confortables toute la journée, mais vous voulez bien paraître, mais vous serez debout toute la journée.

8. Bien sûr, ce ne serait pas un blog de mode sans quelques images. Au-dessus de chaque paragraphe, ajoutez une balise <img> et définissez src avec les images suivantes:

 

9 . Votre premier article de blog est complet! Maintenant, ajoutons une image d’Isa, afin que ses lecteurs la connaissent. Sous la balise body , ajoutez une <img>avec la source suivante:
10 .Sous <img>, ajoutez un <h3>qui dit « par Isabelle Rodriguez | il y a 1 jour »
11 . Isa veut que ses lecteurs sachent qu’elle a écrit plus d’un article. Faisons une liste de quelques articles de blog relatifs. Sous le dernier paragraphe, ajoutez une <h4> qui dit « Contenu associé ». Sous cette balise d’en-tête, créez une liste non ordonnée
12 . La liste non ordonnée devrait avoir les quatre éléments suivants:
  • « Comment styler les jeans de son copain »
  • « Quand imprimer devient trop »
  • « Les nouvelles tendances »
  • « La couleur de l’été »
13 .Mettons le blog d’Isa connecté au reste du web! Dans le premier paragraphe, transformez ‘NYFW’ en un lien et faites-le aller à: https://en.wikipedia.org/wiki/New_York_Fashion_Week .

Assurez-vous d’inclure l’attribut target="_blank"afin qu’il s’ouvre dans un nouvel onglet.

14 . Isa veut s’assurer que ses amis puissent la contacter. Au bas du corps de la page, ajoutez un nouveau <div>et donnez lui un attribut id='contact'. A l’intérieur de <div>, créez un nouveau <p>et mettez les informations de contact suivantes à l’intérieur:

email: isa@fashionblog.com | Téléphone: 917-555-1098 | adresse: 371 284th St, New York, NY, 10001

15 .Dans le  <div>, placez des balises <strong>autour de « email », « Téléphone » et « adresse ».
16 .Faisons de la photo de profil un lien vers la section contact de la page Web. Trouvez la balise <img>de profil et entourez-la des balises <a>. Dans <a>, définissez href="#contact".
Félicitations! Vous avez fait les débuts d’un blog de mode solide. N’hésitez pas à apporter des modifications et à pratiquer votre HTML en ajoutant plus de contenu. Pour ceux qui veulent voir la correction rendez-vous ici
Voici le projet en vidéo:

Et voilà, j’espère que cet article vous a plu. Avez-vous des propositions à me faire concernant des projets que je pourrais vous aider à réaliser ? Laissez-les moi en commentaire ou écrivez moi sur les réseaux sociaux.
Deviens toi aussi développeur web !
I agree to have my personal information transfered to MailChimp ( more information )
Commences ta carrière de développeur web, GRATUITEMENT, ici et maintenant !
Je hais les sapms. Votre adresse email ne sera jamais vendu ou partagé avec un tiers
Partages à tous tes amis !

2 thoughts on “Créez un blog de mode avec HTML

  1. Bonjours monsieur j’ai suivi toutes vos vidéos mais j’aimerai que vous me proposez quelques choses qui pourra m’aider à apprendre le langage htlm à partir de mon Android puisque j’ai été privé de mon ordinateur

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.