La parenté dans le HTML- CSS
Fermé
Dix12
Messages postés
1
Date d'inscription
lundi 7 octobre 2019
Statut
Membre
Dernière intervention
7 octobre 2019
-
7 oct. 2019 à 16:04
Dix12 - 9 oct. 2019 à 11:43
Dix12 - 9 oct. 2019 à 11:43
A voir également:
- La parenté dans le HTML- CSS
- Editeur html - Télécharger - HTML
- Html download - Télécharger - HTML
- Trait css ✓ - Forum CSS
- Br html ✓ - Forum Webmastering
- /Var/www/html/index.html ✓ - Forum Linux / Unix
2 réponses
Salut,
HTML permet d'imbriquer des éléments. Le container est appelé parent et le contenu enfant. On parle plus de nœuds (nodes) que de balises(tags) car une balise ne se compose pas forcément d'un seul élément.
Cette arborescence(structure en arbre: un noeud donne 0 un ou plusieurs enfants) est la base de SGML, XML et à fortiori HTML qui sont des langages de même natures.
Elle est surtout utile pour le DOM(donc utiliser la programmation -essentiellement- JavaScript) ou les sélecteurs CSS mais le principe "d'encapsulation" container/contenu = ancêtre/enfant est quand même une notion que vous devriez acquérir au bout de 1min30 de cours de HTML. N'hésitez pas à varier les cours si celui que vous avez est trop ancien où simplement ne vous convient pas, il en existe des tonnes @le WWW.
Donc un ancêtre c'est le container d'un autre élément(enfant qui peut avoir des frères ou sœurs qui ceux ci pourront avoir d'autres enfants, etc...). L'ancêtre de tout c'est en général la balise BODY.
Voire document(en JavaScript) ou HTML si la page n'est pas écrite de façon claire et ne comporte pas de balise body.
En clair
Plus que de grandes explications il vous suffit de regarder la documentation (bon réflexe à toujours utiliser quand on ne sais pas):
https://www.w3schools.com/cssref/pr_class_position.asp
Pour plus de détails sur l'organisation des balises dans le document(la page) voici la définition précise du DOM:
https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model
Bref ne vous fiez pas qu'à un seul cours et cherchez par vous même ainsi que varier les sources d'apprentissage(livre ou fichiers pdf à toujours emporter sous le bras, tuto et cours divers et variés sur le web, exercices en console comme sur code academy , etc...), c'est cela que veut dire auto-didacte car sinon on est passif et donc en apprentissage. Il est évident que dans le domaine des technos web quelqu'un qui ne serais pas auto-didacte(à commencer par savoir chercher de la documentation et étendu à ne pas se contenter d'un seul support) n'apprendrais pas beaucoup et ne progresserais pas.
Bon apprentissage, l'aspect pratique est utile au début mais ne négligez pas la théorie, c'est à dire le sens que ovus faites avant tout car tout le monde est capable d'écrire une ligne qu'on vous explique mais l'intérêt est de savoir les pourquois et les comments 'ça marche'.
pour l'exemple mais ça devrais quand même être clair, ce n'est pas complqiué et surtout le B+A = BA de HTML :
HTML permet d'imbriquer des éléments. Le container est appelé parent et le contenu enfant. On parle plus de nœuds (nodes) que de balises(tags) car une balise ne se compose pas forcément d'un seul élément.
Cette arborescence(structure en arbre: un noeud donne 0 un ou plusieurs enfants) est la base de SGML, XML et à fortiori HTML qui sont des langages de même natures.
Elle est surtout utile pour le DOM(donc utiliser la programmation -essentiellement- JavaScript) ou les sélecteurs CSS mais le principe "d'encapsulation" container/contenu = ancêtre/enfant est quand même une notion que vous devriez acquérir au bout de 1min30 de cours de HTML. N'hésitez pas à varier les cours si celui que vous avez est trop ancien où simplement ne vous convient pas, il en existe des tonnes @le WWW.
Donc un ancêtre c'est le container d'un autre élément(enfant qui peut avoir des frères ou sœurs qui ceux ci pourront avoir d'autres enfants, etc...). L'ancêtre de tout c'est en général la balise BODY.
Voire document(en JavaScript) ou HTML si la page n'est pas écrite de façon claire et ne comporte pas de balise body.
En clair
position:absolute;veut bien dire ce qu'il veut dire: la position est absolue et ne dépends pas du flux(le flux est l'ordre et organisation des éléments en ancêtres et enfants) mais du positionnement indiqué.
Plus que de grandes explications il vous suffit de regarder la documentation (bon réflexe à toujours utiliser quand on ne sais pas):
https://www.w3schools.com/cssref/pr_class_position.asp
Pour plus de détails sur l'organisation des balises dans le document(la page) voici la définition précise du DOM:
https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model
Bref ne vous fiez pas qu'à un seul cours et cherchez par vous même ainsi que varier les sources d'apprentissage(livre ou fichiers pdf à toujours emporter sous le bras, tuto et cours divers et variés sur le web, exercices en console comme sur code academy , etc...), c'est cela que veut dire auto-didacte car sinon on est passif et donc en apprentissage. Il est évident que dans le domaine des technos web quelqu'un qui ne serais pas auto-didacte(à commencer par savoir chercher de la documentation et étendu à ne pas se contenter d'un seul support) n'apprendrais pas beaucoup et ne progresserais pas.
Bon apprentissage, l'aspect pratique est utile au début mais ne négligez pas la théorie, c'est à dire le sens que ovus faites avant tout car tout le monde est capable d'écrire une ligne qu'on vous explique mais l'intérêt est de savoir les pourquois et les comments 'ça marche'.
pour l'exemple mais ça devrais quand même être clair, ce n'est pas complqiué et surtout le B+A = BA de HTML :
<html> <body> <section>section est parent d'enfant <article id='marcel'>article avec id="marcel" est enfant de section, <h1>h1 est enfant de article d'id = marcel , section est ancêtre de article(id=marcel et de h1)</h1> </article> <article id='mauricette'> article avec id= mauricette est enfant de section , c'est le frère(ou soeur) de article = id marcel car ils sont au même niveau. <p>ce paragraphe est enfant de mauricette(tag article) , mauricette est parent de cette balise P , cette balise P à pour ancêtres mauricette et section<span>la balise span est enfant de la balise paragraphe contenue dedans et 'héritant' celles ci certaines propriétés </span></p> <p id="jumeau"> le paragraphe avec id=jumeau est le frère du paragraphe au dessus, enfant de mauricette et à pour ancêtre section. </p> </article> </section> </body> <!-- la balise body contenant (par convention) l'ensemble de la page c'est l'élément qui les contient tous. Il est lui même enfant de la balise HTML --> </html>
Bonjour homawak.
Merci mille fois pour ta réponse claire . Ce qui me gênait surtout c'est le fait de parler de référence à l'ancêtre sans préciser lequel car des ancêtres il peut y en avoir plusieurs.
Oui autodidacte dans cette profession , il faut l'être en permanence. Mon cas n'est peut-être pas unique mais je ne suis seul à la maison et pas du tout dans le monde du travail qui me permettrait de demander une explication à un collègue plus expérimenté. Il y a sur internet des dizaines de tutos mais certains ne sont pas clairs (comment être clair dans cette complexité qu'est le HTLM CSS ...?) et je passe mon temps à aller à la pêche , parfois sans trouver la réponse qui me convient.
Encore un grand merci.
Bonne journée à toi et à ceux qui, comme moi, sont parfois perdus
Merci mille fois pour ta réponse claire . Ce qui me gênait surtout c'est le fait de parler de référence à l'ancêtre sans préciser lequel car des ancêtres il peut y en avoir plusieurs.
Oui autodidacte dans cette profession , il faut l'être en permanence. Mon cas n'est peut-être pas unique mais je ne suis seul à la maison et pas du tout dans le monde du travail qui me permettrait de demander une explication à un collègue plus expérimenté. Il y a sur internet des dizaines de tutos mais certains ne sont pas clairs (comment être clair dans cette complexité qu'est le HTLM CSS ...?) et je passe mon temps à aller à la pêche , parfois sans trouver la réponse qui me convient.
Encore un grand merci.
Bonne journée à toi et à ceux qui, comme moi, sont parfois perdus
9 oct. 2019 à 01:00
Par exemple une balise d'image (<img/>) ne peut avoir aucun enfant tandis qu'une balise <article> ou paragraphe (<p>) peut en contenir une infinité, enfin surtout autant qu'on veut et qu'il est besoin pour la mise en page et la nomenclature(sémantique) propre au document(la page).