Tout comprendre sur les noms des éléments HTML
Dans la programmation HTML/PHP tout élément dans le code est identifié par un nom qui est appelé ID.
Cet ID doit être unique normalement car chaque élément est unique.
Lorsque nous souhaitons ajouter du code HTML, Javascript, CSS ou autre dans WSX5, il est donc important d'identifier l'ID de l'élément sur lequel nous voulons travailler.
Et donc il faudra que chaque utilisateur de WSX5 recherche cet ID qui est différent à chaque projet, même si l'objet est le même. Cela signifie que si vous ajouter par exemple un bouton dans une page, votre bouton aura un ID d'identification. Mais si un autre utilisateur de WSX5 ajoute aussi le même bouton dans une page, l'ID de son bouton sera différent du votre.
Car WSX5 nomme les objets et éléments que vous mettez dans vos pages de façon chronologique.
Donc dans le code ci dessous par exemple, on voit que plusieurs éléments ont des ID pour les identifier.
<div id="imPageExtContainer">
<div id="imPage">
<div id="imPage">
<div id="imCell_19"
<div id="imStickyBarContainer" >
</div>
</div>
</div>
</div>
Cela permettra de retrouver un élément de la page web par son identifiant.
Par exemple ici avec le code <div id="imStickyBarContainer" > qui clairement indique un élément de la barre sticky du menu haut. Dans une fenêtre Inspect sous chrome on identifiera clairement cette barre avec cet ID comme ci dessous.
Et comme ci dessus, pour ouvrir une fenêtre 'Inspect' comme on voit sur la droite vous devez cliquer dans votre page web avec le clique droit sur un élément et choisir dans le menu contextuel le menu 'Inespect'. Votre fenêtre Inespect sur la droite se positionnera automatiquement sur l'objet sur lequel vous avez cliquez.
Et voilà la base pour identifier l'ID d'un élément de votre page web, pour ensuite utiliser cet identifiant dans un code CSS, HTML pour modifier le visuel avec WSX5.
Quelques informations ici pour continuer..... N'hésitez pas à chercher avec Google d'autre informations plus précises.
Tout comprendre sur les noms des éléments avec une class
Nous pouvons aussi un peu approfondir les modifications en CSS. Il s'agit aussi de pourvoir manipuler un objet pour en changer son visuel, contenu ...etc...
Nous pouvons trouver des objets qui ne possèdent pas d'ID mais de 'Class'.
Et pour modifier le contenu d'un objet avec du CSS, nous pouvons soit utiliser son ID, soit le nom de la Class de l'objet, soit les 2 .....
Par exemple un code suivant:
<div class="text-inner">
</div>
Ici le code <div> indique un nom de class qui correspond au nom donné au <div> pour le reconnaître par la class .... Il n'y a pas d'ID...mais il pourrait aussi en
avoir unDonc pour effectuer des modification en CSS il faudra ici utiliser ce nom de class, "text-inner" qui permet l'identification de l'objet ou le nom de l'ID si il y en a un.
et donc en CSS 2 options s'offrent à nous pour modifier un objet.
Soit avec son ID, et donc la syntaxe sera:
#ID {
....
}
soit avec le nom de la class, et donc:
.text-inner {
...
}
On voit ici que la programmation est légèrement différente pour identifier un objet en CSS soit avec son ID, soit avec le nom de la class.
Dans l'exemple ci dessous on identifie le nom de l'objet avec son ID et on cherche le code comportant une classe pour modifier celle ci.
Ici nous voyons que l'objet est identifié avec l'ID imTextObject_10_tab0 et nous allons modifié le texte programmé dans la balise <b> avec la class fs481h1-5
et donc le nom complet de l'objet pour la modification en CSS sera ici:
#imTextObject_10_tab0 .fs481h1-5 {
...
}