In order to fulfill the basic functions of our service, the user hereby agrees to allow Xiaomi to collect, process and use personal information which shall include but not be limited to written threads, pictures, comments, replies in the Mi Community, and relevant data types listed in Xiaomi's Private Policy. By selecting "Agree", you agree to Xiaomi's Private Policy and Content Policy .
Agree

Jeux/Détente

[Détente] [JeudiProg] [Web] Cours 3 : Et si l'on démarrait un blog Xiaomi ?

2020-08-27 22:40:44
237 3
Bonjour à tous,

Si vous avez manqué les cours précédents, commencez par ceux-ci et revenez ici ensuite :

Cours 1 : Ma première page HTMLConsulter
Cours 2 : Balises et attributs - Tableaux, images et liensConsulter




Attention : Du fait des limitations actuelles la communauté, il n'est pas possible d'afficher un code correct, c'est pourquoi je vous fournis ce fichier ZIP contenant l'ensemble des codes de ce cours.

Cours 3.zip (1.38 KB, Downloads: 9)




La structure de notre blog

La première chose à penser c'est sous quelle forme nous allons présenter notre blog. Je vous propose pour ce cours de suivre une présentation classique et vous aurez tout à fait le loisir de la personnaliser à votre convenance par la suite. Voici donc à quoi notre page va ressembler schématiquement :



  • header : désigne l'en-tête de notre blog : cette zone contiendra le titre de notre blog ainsi que les menus de navigation.
  • main : dans cette zone, nous trouverons la liste des articles de notre blog.
  • aside : une barre latérale pour afficher par exemple des liens utiles, les derniers commentaires, etc...
  • footer : le bas de page pour afficher nos informations et éventuellement quelques derniers liens.


Notre code HTML ressemble alors à cela :

˂!DOCTYPE html˃
˂html˃
˂head˃
   ˂title˃Cours Web - HTML - Blog˂/title˃
˂/head˃
˂body˃
   ˂header˃
      Titre et menu de navigation
   ˂/header˃
   
   ˂main˃
      Articles de notre blog
   ˂/main˃

   ˂aside˃
      Barre latérale
   ˂/aside˃

   ˂footer˃
      Pied  de page
   ˂/footer˃
˂/body˃
˂/html˃


Nous avons donc notre page bien structurée, il ne reste plus qu'à enrichir chacune de ces 4 sections !




L'en-tête de page

Dans cette partie nous avons décidé de mettre le titre de notre blog et le menu de navigation. On connait déjà la balise pour un titre et pour le menu on peut par exemple utiliser une liste non ordonnée, ce qui va nous donner.

˂header˃
   ˂h1˃Blog XiaomiWeb˂/h1˃
   ˂ul˃
      ˂li˃Accueil˂/li˃
      ˂li˃News˂/li˃
      ˂li˃Produits˂/li˃
      ˂li˃Contact˂/li˃
   ˂/ul˃
˂/header˃


4 pages car je décide d'organiser mon blog avec une page d'accueil, une page qui liste les articles d'informations diverses, une page qui liste les articles concernant les produits Xiaomi et une page pour que les lecteurs puissent me contacter. Ces pages ne sont pour l'instant pas créées mais une fois que cela sera fait on rajoutera bien sûr les liens sur celles-ci.

˂li˃˂a href=''contact.htm''˃Contact˂/a˃˂/li˃


Vous pouvez alors laisser libre cours à votre créativité et organiser le site de la façon qu'il vous semblera la plus adaptée.




Les articles

Nous voici alors dans la section principale de notre page où l'on va avoir les différents articles de notre blog. Très simple pour déclarer un article, nous allons utiliser la balise ˂article˃. Nous pouvons donc en imbriquer autant que nécessaire :

˂main˃
   ˂article˃
      ˂h2˃Titre de l'article 1˂/h2˃
      ˂p˃Contenu de mon article˂/p˃
   ˂/article˃
   ˂article˃
      ˂h2˃Titre de l'article 2˂/h2˃
      ˂img src=''xiaomi.png'' width=''100'' height=''100'' alt=''Xiaomi''˃
      ˂p˃Contenu de mon article˂/p˃
   ˂/article˃
   ˂article˃
      ˂h2˃Titre de l'article 3˂/h2˃
      ˂p˃Contenu de mon article˂/p˃
   ˂/article˃
˂/main˃


Je vous laisse compléter avec l'actualité la plus récente !

Avant de passer à la suite, on pourrait peut être encore introduire une autre balise, lorsque l'on lit un article il est bien souvent indispensable de connaître sa date de publication ! On pourrait l'afficher via un simple texte mais la balise ˂time˃ va nous permettre de donner des informations précises !

˂article˃
   ˂h2˃Titre de l'article˂/h2˃
   ˂time˃Publié le 27 août 2020˂/time˃
   ˂p˃Contenu de mon article˂/p˃
˂/article˃


On pourrait se contenter de cela mais on va aller un petit peu plus loin. Les moteurs de recherche deviennent de plus en plus intelligent mais il est bon parfois de les aider. La balise ˂time˃ possède deux attributs spécifiques :
  • datetime : pour indiquer notre date en format international ISO 8601.
  • pubdate : pour indiquer qu'il s'agit de la date de publication de notre article et non d'une date de modification de notre page internet par exemple.


Pour l'attribut pubdate, il prend tout simplement la valeur pubdate.

Pour l'attribut datetime, nous allons avoir un peu plus de choix. Derrière ce ISO 8601 se cache simplement un affichage unique et standardisé des dates pour pouvoir être interprété dans le monde entier : vous savez probablement que dans certains pays on ne dit pas 14h mais 2pm, etc... Donc sous ce standard on peut écrire les dates de différentes manières :
  • Juste l'année sous la forme : 2020
  • L'année et le mois : 2020-08
  • Année-mois-jour : 2020-08-27
  • On peut y ajouter l'heure et les minutes : 2020-08-27 12:00 (on retrouve encore parfois un 'T' entre la date et l'heure 2020-08-27T12:00 dans les anciens codes, ce n'est désormais plus obligatoire)
  • Avec les secondes aussi : 2020-08-27 12:00:00
  • Enfin on peut également y ajouter le fuseau horaire, en France nous sommes à UTC+1 en hiver et UTC+2 en été. Actuellement en été, nous obtenons 2020-08-27 12:00:00+02:00


˂article˃
   ˂h2˃Titre de l'article˂/h2˃
   ˂time datetime=''2020-08-27'' pubdate=''pubdate''˃Publié le 27 août 2020˂/time˃
   ˂p˃Contenu de mon article˂/p˃
˂/article˃





La barre latérale

Pour cette barre, à vous de décider ce que vous souhaitez afficher, vous pouvez mettre un lien vers la Communauté en avant par exemple, vous pouvez renseigner vos visiteurs avec la date du jour, etc... Il n'y a pas de normes, un bon blog est un blog qui vous ressemble. Voici donc un exemple de ce que l'on peut faire :

˂aside˃
   ˂section˃
      ˂h2˃Aujourd'hui˂/h2˃
      ˂p˃Bonjour, nous sommes le 27 août !˂/p˃
   ˂/section˃

   ˂section˃
      ˂h2˃Liens utiles˂/h2˃
      ˂ul˃
         ˂li˃˂a href=''https://c.mi.com/fr''˃Mi Community France˂/a˃˂/li˃
      ˂/ul˃
   ˂/section˃
˂/aside˃





Le pied de page

Nous voici arrivé à la dernière section. Ici encore nous pouvons mettre tout ce qui est nécessaire à notre blog : un a propos, encore des liens, etc... Ici nous allons nous contenter de mettre un Copyright pour indiquer que c'est notre travail, un peu le principe du watermark personnalisé sur les photos de notre téléphone.

˂footer˃
   Copyright XiaomiWeb
˂/footer˃





Mais il manque quelque chose ?

Maintenant que vous avez fini de coder votre page, vous l'avez certainement ouvert dans votre navigateur et vous vous dites certainement que c'est plutôt moche et ça ne ressemble pas vraiment à tout ce que vous pouvez voir sur les différents sites Internet. On se croirait revenu au temps du Wap pour les plus anciens ;)

Rassurez-vous, il manque bien quelque chose et c'est ce que l'on appelle les styles, plus précisément les CSS. Je vous avais dit que pour le Web nous allons devoir aborder plusieurs langages informatiques. Donc cette semaine pas de médaille pour vous car on ne peut pas considérer ce cours comme terminé, on va le poursuivre dès la semaine prochaine. Mais profitez-en pour bien préparer vos pages HTML afin de n'avoir plus qu'à se concentrer sur le CSS la semaine suivante !
2020-08-27 22:40:44
Favorites3 RateRate

R/O

1653413590 | from Redmi Note 9 Pro

#1

Thanks
2020-08-28 03:52:54

Master Bunny

Fatih Yusuf | from Redmi Note 8 Pro

#2

Thanks for sharing 👏
2020-08-29 07:34:43


Freedom and independence form my character.
Même si l'aspect visuel reste très "brut", c'est quand même utile de savoir construire la structure du blog.

Petit cours qui fait un peu office de révision, avec des petites nouveautés (la balise " time" par exemple).

Merci pour ce moment d'accalmie avant le débarquement des prochains styles !
2020-08-30 14:22:59
please sign in to reply.
Sign In Sign Up

GuillaumeMi

Moderator

3 Days Check-In
7 Days Check-In
21 Days Check-In
40 Days Check-In
70 Days Check-In
100 Days Check-In
MiA2
SBM teaser
Mi band 3
25K
X-Men
Photography contest
30K
Tech Talent
MI9T
MIUI Geek
Three's A Party
Happy July
App Maniac
MIUI 9th Birthday
Global Community
Medalla Encuesta Mi Phone
better together slogan
Global Community
2020
Médaille des 50K
100K abo
Mi Community Üçüncü Anket Madalyası
Mi 10th Birthday Medal
Medalla #GradientsInLife
Window View
বাংলা নববর্ষ ১৪২৭
Android One
Answer Mi #3
Ulang Tahun Xiaomi ke-10
3 Tahun Mi Community
Mobile Game
App Star
Redmi 8
Bookworm
23 Nisan Kutlu Olsun!
Sondage gaming
MIUI Fan
Favorite Goalkeeper
Ramadan Kareem
Meetings from Home
Mi2U April
Lefty Star
Favorite Author
redminote8series
Streaming Geek
Favorite Actor
Favourite Football Team
200mila Mi Fans
Osneip
Redmi Note 8
Mail Lover
Radio
Super Thursday
Redmi Note 8 Series
Redmi Note 8 Pro
Coin
Chipset
Corona Awareness
Map
Redmi 8A
MIUI 12
First Smartphone
Phone Finder
2 anni insieme
Eid Mubarak
TV Series Freak
BougLo Challenge I
Mi to You May
MIUI12
Neues Zuhause
MIUI Boot Animation
200 Mil Mi Fans En México
Favorite Singer
Gadget
Favorite YouTube Channel
Art Challenge
Father's Day
Redmi Note 9S
Mother's Day
UK Community 300K Users Medal
Redmi Note 9
Cloud Storage
30 Million Redmi Note 8 Series
Redmi Note 9 Pro Feature
ContributeTogether
10 years
K2K #3
Redmi 9 Colors
200K Registered Users
2nd Anniversary
MFF2020
Nepal "Happy New Year"
Emoji Day
Mi To You July
Redmi Note 9S Feature
Navigation System
Médaille 6
First Anniversary
10th mi fan stories
K2K #4
Favorite Bangladeshi Food
Redmi 9A
Redmi Note 9 Pro Camera
Material Expert
Redmi 9A Feature
MIUI 12 Dark Mode
10 years
Battery Survey
Mi to You September
Agosto Cometas
Moderadores
Mi10 espacio
Facebook Reviewer
Tín đồ Poco
Display Expert
Favorite Radio Station
Top photo France

Read moreGet new

Mi Comm APP

Stay updated on Mi Products and MIUI

Copyright©2010-2020 Xiaomi.com, All Rights Reserved
Content Policy
Quick Reply To Top Return to the list