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 2 : Balises et attributs - Tableaux, images et liens (Gagnez une médaille)

2020-08-20 18:00:00
873 26
Bonjour à tous,

Si vous avez manqué le cours précédent, commencez par celui-ci et revenez ici ensuite :

Cours 1 : Ma première page HTMLConsulter
Cours 2 : Balises et attributs - Tableaux, images et liensConsulter
Cours 3 : Et si l'on démarrait un blog Xiaomi ?Consulter
Cours 3bis : Introduction au CSSConsulter
Cours 4 : Le positionnement en CSSConsulter
Cours 5 : Un peu d’interaction avec JavaScriptConsulter
Cours 6 : Simplifier la gestion des articles avec PHPConsulter
Cours 6bis : Terminons ce blogConsulter




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 2.zip (2.23 KB, Downloads: 8)




Balises et attributs

Pour pouvoir donner plus d'informations, on peut enrichir nos balises avec différents attributs que l'on utilise de la manière suivante :

˂balise attribut1=ʺ...ʺ attribut2=ʺ...ʺ˃

Il existe des attributs qui sont communs à toutes les balises :
  • accesskey
  • class
  • contenteditable
  • contextmenu
  • dir
  • draggable
  • dropzone
  • hidden
  • id
  • lang
  • spellcheck
  • style
  • tabindex
  • title
  • translate


Ne vous inquiétez pas face à leur nombre, il y en a uniquement 2 qui sont utilisés très souvent : id et class, les autres sont vraiment pour des choses beaucoup plus spécifiques.
  • id sert à attribuer un identifiant unique à la balise.
  • class nous servira notamment à personnaliser le contenu de notre balise mais nous verrons cela lors d'un prochain cours.


Concernant les attributs spécifiques, nous les aborderons avec les différentes balises qui nous seront nécessaires pour le cours.

Je ne vais pas vous faire l'affront de vous lister l'intégralité des balises et tous les attributs (en plus on risquerait de m'accuser de copié collé), donc pour ceux qui voudront en savoir plus, vous pouvez faire un tour par exemple sur le site ci-dessous et voir toutes les possibilités du langage que l'on aborde. Mais ne vous inquiétez, nous verrons les informations les plus courantes dans notre cours !


Si vous souhaitez plus d'informations sur une balise ou un attribut, n'hésitez pas à poser la question en commentaires de ce post. Passons maintenant à des exemples concrets.




Les images

Voilà une balise qu'on ne peut pas utiliser telle quelle, elle doit forcément avoir des attributs : on utilise la balise ˂img˃. De plus, ˂img˃ est également une balise qui ne dispose pas de version fermante. Voyons directement un exemple, vous pouvez ouvrir la page pageavecimage.htm dans le zip du cours :

˂img src=ʺxiaomi.pngʺ width=ʺ100ʺ height=ʺ100ʺ alt=ʺLogo Xiaomiʺ˃

Nous avons donc 4 attributs :
  • src qui nous indique le chemin depuis notre page vers l'image
  • width qui indique la largeur (en pixels) de l'image
  • height qui indique la hauteur (en pixels) de l'image
  • alt qui définie un texte alternatif si l'image ne peut pas être affichée





Les tableaux

Pour afficher un grand nombre de données, par exemple le nombre impressionnant de téléphones Xiaomi, il est pratique d'utiliser des tableaux. Un tableau se déclare avec la balise ˂table˃ et chaque élément de ce tableau aura également sa balise :
  • ˂tr˃ désigne une ligne du tableau
  • ˂td˃ désigne une cellule du tableau


Nous pouvons donc avoir un tableau assez facilement :

˂table˃
˂tr˃˂td˃Mi 10˂/td˃˂td˃799,90€˂/td˃˂/tr˃
˂tr˃˂td˃Mi 10 Pro˂/td˃˂td˃999,90€˂/td˃˂/tr˃
˂tr˃˂td˃Mi 10 Lite˂/td˃˂td˃379,90€˂/td˃˂/tr˃
˂/table˃

Facile ? Nous pouvons alors définir des titres à chacune de nos colonnes. On pourrait simplement ajouter une ligne avec ces titres mais il est mieux de séparer correctement cette ligne afin de simplifier sa personnalisation plus tard. On introduit donc de nouvelles balises :
  • ˂thead˃ qui désigne les en-têtes du tableau, regroupera les titres
  • ˂tbody˃ qui contient les données du tableau
  • ˂th˃ qui remplace ˂td˃ uniquement dans les en-têtes


Voici donc notre tableau organisé :

˂table˃
˂thead˃
   ˂tr˃˂th˃Téléphone˂/th˃˂th˃Prix˂/th˃˂/tr˃
˂/thead˃
˂tbody˃
   ˂tr˃˂td˃Mi 10˂/td˃˂td˃799,90€˂/td˃˂/tr˃
   ˂tr˃˂td˃Mi 10 Pro˂/td˃˂td˃999,90€˂/td˃˂/tr˃
   ˂tr˃˂td˃Mi 10 Lite˂/td˃˂td˃379,90€˂/td˃˂/tr˃
˂/tbody˃
˂/table˃

Et pourquoi pas même avoir un pied de tableau ? Pour y afficher le total par exemple, disons qu'on ait beaucoup d'argent à dépenser et que l'on souhaite acquérir la famille Mi 10. Alors on utilisera la balise ˂tfoot˃. Par contre, ne cherchez pas de balise ˂tf˃, elle n'existe pas !

˂table˃
˂thead˃
   ˂tr˃˂th˃Téléphone˂/th˃˂th˃Prix˂/th˃˂/tr˃
˂/thead˃
˂tbody˃
   ˂tr˃˂td˃Mi 10˂/td˃˂td˃799,90€˂/td˃˂/tr˃
   ˂tr˃˂td˃Mi 10 Pro˂/td˃˂td˃999,90€˂/td˃˂/tr˃
   ˂tr˃˂td˃Mi 10 Lite˂/td˃˂td˃379,90€˂/td˃˂/tr˃
˂/tbody˃
˂tfoot˃
   ˂tr˃˂td˃Total˂/td˃˂td˃2 179,70€˂/td˃˂/tr˃
˂/thead˃
˂/table˃

Vous suivez toujours ? Avec la gamme étendue de Xiaomi, pas étonnant de retrouver certains téléphones au même prix que d'autres. Il n'est donc pas forcément utile d'afficher deux fois le prix de ces téléphones, on va pouvoir fusionner les cellules et pour cela, on va utiliser les attributs de la balise ˂td˃ : rowspan (pour les fusions verticales) et colspan (pour les fusions horizontales). Ces attributs vont prendre comme valeur un chiffre entier qui indique le nombre de cellules à fusionner, y compris la cellule de départ. La valeur minimale est donc 2 ! De plus, on ne veut plus du total mais on souhaite simplement préciser en pied de tableau que les prix sont TTC, une seule grande cellule sera alors plus adapté sur cette dernière ligne.

˂table˃
˂thead˃
   ˂tr˃˂th˃Téléphone˂/th˃˂th˃Prix˂/th˃˂/tr˃
˂/thead˃
˂tbody˃
   ˂tr˃˂td˃Mi 10˂/td˃˂td˃799,90€˂/td˃˂/tr˃
   ˂tr˃˂td˃Mi 10 Pro˂/td˃˂td˃999,90€˂/td˃˂/tr˃
   ˂tr˃˂td˃Mi 10 Lite˂/td˃˂td rowspan=ʺ2ʺ˃379,90€˂/td˃˂/tr˃
   ˂tr˃˂td˃Mi Note 10 Lite˂/td˃˂/tr˃
˂/tbody˃
˂tfoot˃
   ˂tr˃˂td colspan=ʺ2ʺ˃Tous les prix sont TTC˂/td˃˂/tr˃
˂/thead˃
˂/table˃

Vous avez remarqué que pour la ligne qui suit celle contenant le rowspan, on ne précise pas la cellule : il n'y a qu'un seul ˂td˃ car l'autre est déjà implicite. Si on précise un autre ˂td˃ alors cela en fera 3 sur cette ligne et il y aura donc un défaut d'affichage. Faites l'essai si le cœur vous en dit !

Vous retrouverez ce code déjà tapé dans le fichier pageavectableau.htm




Les liens

Nous venons déjà de créer 2 pages différentes et il pourrait y en avoir encore beaucoup. On pourrait également faire référence à d'autres pages internet. Pour cela on va créer des liens, des ancres avec la balise ˂a˃. L'attribut indispensable de cette balise est l'attribut href qui va nous dire où nous rendre lorsque l'on cliquera sur le lien.

˂a href=ʺhttps://www.mi.comʺ˃Visiter le Mi Store˂/a˃

Nous avons ici créer un lien vers un site externe. Nous pouvons tout à fait utiliser ces liens dits externes pour naviguer sur notre site.

˂a href=ʺhttps://www.monsiteinternet.com/page2.htmʺ˃Page suivante˂/a˃

Voici un lien vers notre deuxième page. Mais, procéder de la sorte nous fait perdre du temps car votre navigateur internet va alors recharger le site internet et cela prend un peu de temps, cela ne représente pas grand chose mais même une demi-seconde pour beaucoup de gens c'est beaucoup. On va donc utiliser un chemin relatif pour accéder à notre deuxième page. De plus, il tient à préciser que nous exécutons notre code HTML en local (sur nos ordinateurs) et non pas sur un site internet donc nous sommes obligé d'utiliser un chemin relatif.

˂a href=ʺpage2.htmʺ˃Page suivante˂/a˃

Très simple n'est-ce pas ? Estimons maintenant que notre page 2 est rangée dans un dossier nommé fourretout alors nous allons y accéder de cette manière :

˂a href=ʺfourretout/page2.htmʺ˃Page suivante˂/a˃

Le slash (/) nous indique que nous sommes dans un dossier, il est tout à fait possible d'en enchaîner plusieurs mais c'est pour cette raison que vous ne pouvez pas nommer un fichier avec un slash.

Maintenant, comment revenir de notre page 2 vers notre page de départ ? Il faut que l'on sorte du dossier fourretout, qu'on revienne au dossier parent. Pour cela on utilise tout simplement deux points (..).

˂a href=ʺ../pageavecliens.htmʺ˃Page précédente˂/a˃

Pour ceux qui iront plus loin, vous verrez que sur un site internet vous pourrez également utiliser un chemin absolu en faisant démarrer le lien par un slash. Le lien part donc de la racine du dossier internet. Ce qui donnerait :

˂a href=ʺ/pageavecliens.htmʺ˃Page 1˂/a˃
˂a href=ʺ/fourretout/page2.htmʺ˃Page 2˂/a˃

Et ceci fonctionnerait que l'on soit sur la page 1 ou sur la page 2. En local, je ne vais pas pouvoir vous proposer un exemple fonctionnel sans introduire de nouvelles choses car chaque ordinateur a une organisation différente.




A vous de jouer - Gagnez votre médaille



Pour gagner cette jolie médaille, le travail est tout simple, à vous de créer une page internet qui contient au moins une image, un tableau et un lien ! Partagez une capture d'écran de votre code et du résultat !




Si vous n'avez pas compris quelque chose n'hésitez pas à poser vos questions en commentaires, entraidez-vous ... et toutes les réponses correctes et originales recevront une médaille !
2020-08-20 18:00:00
Favorites9 RateRate
Attention, petite boulette dans le fichier "pageavecimage.htm"

Au lieu de :

img src="xiaomi.png" width="100" height="100" alt="Logo Xiaomi

Il faudrait :

img src="xiaomi.png" width="100" height="100" alt="Logo Xiaomi"

(les guillemets fermants après Logo Xiaomi)
2020-08-22 01:12:08
et hop!!

2020-08-22 01:21:57

Moderator

GuillaumeMi Author |

#3

RLF69580 a posté en 2020-08-21 19:12:08
Attention, petite boulette dans le fichier "pageavecimage.htm"

Au lieu de :

Oups, merci pour la correction, je modifie le ZIP !
2020-08-22 01:45:09

Moderator

GuillaumeMi Author |

#4


Super ! Bonne utilisation des 3 éléments !

(Vu, tu avais oublié "Colonne 3" au moment de la capture d'écran ;) )
2020-08-22 01:48:39
GuillaumeMi a posté en 2020-08-21 19:45:09
Oups, merci pour la correction, je modifie le ZIP !

Pas de soucis, ça arrive à tout le monde, même aux meilleurs ^^

Allez j'en profite pour rendre mon devoir :






Toujours aussi simples & efficaces tes cours, merci.

2020-08-22 03:46:49

Moderator

GuillaumeMi Author | from app

#6

RLF69580
Pas de soucis, ça arrive à tout le monde, même aux meilleurs ^^

Allez j'en profite pour rendre mon devoir :

Pas mal la décortication, ça vaut bien une médaille ;)
2020-08-22 06:22:21

Master Bunny

Ananda Hakimi | from app

#7

thanks for sharing 🧡🤩
2020-08-23 03:41:27
J'espère que tu as été :-)


2020-08-29 05:56:48

Master Bunny

Fatih Yusuf | from Redmi Note 8 Pro

#9

Thanks for sharing such a useful information. 👏👏👏
2020-08-29 07:21:58


Freedom and independence form my character.

Master Bunny

MARDE | from Redmi Note 8 Pro

#10

thanks for sharing   
2020-08-29 11:05:50
please sign in to reply.
Sign In Sign Up

GuillaumeMi

Moderator

Check-in 3 jours
Check-in 7 jours
Check-in 21 jours
Check-in 40 jours
Check-in 70 jours
Check-in 100 jours
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&amp
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
Mi UK Treasure Hunt
Captain Mitu, Treasure Finder

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