5568 sujets

Sémantique web et HTML

Pages :
Bonjour à vous tous,

Je sais que pour utiliser un lien local sur une page web, il suffit d'affecter un attribut id="chapitre1, id="chapitre2", id="chapitre3", etc. à chaque chapitre dans la page HTML et ensuite créer un sommaire au début avec à chaque chapitre du sommaire affecter un href="#chapitre1", href="#chapitre2", etc. et chaque fois qu'on clic sur un chapitre dans le sommaire, on va se positionner au début du chapitre concerné, c'est très utile quand on a des pages HTML avec des kilomètres de textes.

Mais je voudrais savoir s'il est possible de faire la même chose avec un site web déjà existant, c'est-à-dire mettre un lien vers, par exemple le site web MDN, mais en plus faire en sorte qu'on aille à un endroit précis de la page. Est-ce possible ? Parce que normalement, on ne peut pas modifier le code HTML du site web.

Merci pour vos explications
et bien à vous !
Merci Pitet pour ta réponse. Malheureusement, j'ai regardé dans la page MDN qui m'intéresse (page MDN de l'élément <input> et l'attribut HTML "capture" plus bas dans la page), l'endroit que je veux cibler ne possède pas d'attribut id, il y a juste :
<a href="#capture"><code>Capture<code></a>
J'ai essayé en tapant à la fin de l'adresse absolue .../a#capture et ça ne marche pas, je ne me positionne pas à l'endroit voulu. Il faut que se soit impérativement une ancre ? Cela marche avec d'autres balises ?
Modifié par ObiJuanKenobi (17 Nov 2023 - 13:54)
Salut,

est-ce que j'ai bien compris ta question ?
Pourquoi voudrais-tu modifier le html du site visité ? Normalement, à moins d'être hacker, ce n'est pas possible, pas souhaitable et interdit par la loi.
Oui, c'est possible d'atteindre un point particulier d'un site, on fait ça tous les jours. Pour ça, il faut ajouter à l'url originale le chemin vers ce point. Si c'est une ancre, il faut mettre à la suite de l'url du site /#nom_de_l'ancre. Si c'est une page nouvelle, il y aura .html à la fin du chemin de la page (comme ton post https://forum.alsacreations.com/topic-2-90719-1-Comment-utiliser-un-lien-local-sur-un-site-web-deja-existant-Y.html)

Maintenant, si tu ne connais pas le site, comment vas-tu deviner quelles sont les ancres, ce n'est pas possible. Il faut le visiter au moins une une fois et mettre l'url complète dans ton marque pages.
Petite digression, les concepteurs de site, surtout si c'est leur site personnel, ne souhaitent pas toujours que les visiteurs aillent directement à un point particuliers de leur création. Ils souhaitent parfois que l'on visite tout leur site, sur lequel ils ont mis en place une progression.

ps : Dans l'exemple que tu donnes, il me semble que le a que tu as ajouté avant le # est en trop.
Bongota a écrit :
Salut,

est-ce que j'ai bien compris ta question ?
Pourquoi voudrais-tu modifier le html du site visité ? Normalement, à moins d'être hacker, ce n'est pas possible, pas souhaitable et interdit par la loi.
trop.


Mais non, je ne demande pas comment modifier le HTML d'un site en vue de le pirater, je demandais juste s'il y avait un moyen de mettre une ancre vers un autre cite et en plus d'afficher la page, je voulais qu'il aille se positionner à un endroit précis.
Bongota a écrit :
Salut,

Maintenant, si tu ne connais pas le site, comment vas-tu deviner quelles sont les ancres, ce n'est pas possible. Il faut le visiter au moins une une fois et mettre l'url complète dans ton marque pages..


Si justement, je connais le site ! Exemple : imagine un site web qui parle de voitures et la page dédiée à la marque Ferrari fait des kilomètres. Je souhaite mettre un lien dans mon site qui renvoie à la page "Ferrari" du site web des voitures mais en plus, je veux directement cibler le chapitre "Moteur" de cette voiture qui se trouve beaucoup plus bas. Mais le problème c'est que ce chapitre comporte une ancre <a> mais pas d'attribut id, seulement un attribut href (j'ai regardé avec l'inspecteur des éléments de mon navigateur). Et quand je mets href#moteur à la fin de l'adresse URL absolue, dans mon lien, ça ne fonctionne pas; je ne me positionne pas au chapitre "Moteur".
Voilà ce que j'ai fait :
<a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/input#capture">source MDN</a>
Je voudrais que ce lien m'amène vers la page MDN de l'élément <input> mais au chapitre de l'attribut "Capture" beaucoup plus bas. J'ai donc jouté "/input#capture" à l'adresse URL absolue mais ça ne marche pas. Si je marque juste "/#capture", ça ne marche pas non plus. Pourtant, c'est bien une ancre mais il n'y a pas d'attribut id, seulement un attribut href.
Modifié par ObiJuanKenobi (17 Nov 2023 - 15:56)
Bien sûr que je savais que tu n'allais pas pirater un site Smiley cligne
J'étais juste étonné que tu veuille modifier le html.
Si tu connais le site en question, il est tout à fait possible que le concepteur n'ai pas fait son travail correctement et n'ait pas mis d'ancres aux endroits nécessaires. Même sur de gros sites d'entreprises, on a parfois des surprises. Tu ne pourras alors rien faire, sinon trouver une ancre proche pour te rapprocher du chapitre que tu veux.
Je suppose que tu veux visiter ce site plusieurs fois, et au même endroit.
Modérateur
Bonjour,

ObiJuanKenobi a écrit :
J'ai donc jouté "/input#capture" à l'adresse URL absolue mais ça ne marche pas. Si je marque juste "/#capture", ça ne marche pas non plus. Pourtant, c'est bien une ancre mais il n'y a pas d'attribut id, seulement un attribut href.


Une "ancre" peut être toute balise html ayant un id. Et une balise html n'ayant pas d'id ne peut pas être une "ancre".

EDIT: on appelle aussi "ancre" la balise <a> lorsqu'elle sert d'hyperlink (et non d'ancre). C'est une malheureuse conséquence des normes html passées, qui entretenaient une confusion regrettable selon moi entre les "ancres" et les "hyperlinks". Lorsqu'une balise <a> a un attribut href, c'est un "hyperlink". Si on veut aussi s'en servir comme étant une "ancre", il faut qu'elle ait un id.

EDIT2: la valeur de l'attribut href d'un hyperlink qui pointe vers une ancre doit avoir la syntaxe #abc où abc est l'id d'une balise html. Eventuellement, #abc peut être précédé d'une url relative ou absolue (y compris l'url d'un autre site que celui où se trouve l'hyperlink). La syntaxe "/input#capture", où input est le nom d'une balise html, n'existe pas.

Amicalement,
Modifié par parsimonhi (20 Nov 2023 - 00:28)
ObiJuanKenobi a écrit :
Je voudrais que ce lien m'amène vers la page MDN de l'élément &lt;input&gt; mais au chapitre de l'attribut "Capture" beaucoup plus bas. J'ai donc jouté "/input#capture" à l'adresse URL absolue mais ça ne marche pas. Si je marque juste "/#capture", ça ne marche pas non plus. Pourtant, c'est bien une ancre mais il n'y a pas d'attribut id, seulement un attribut href.


Ca marche chez moi:
https://developer.mozilla.org/fr/docs/Web/HTML/Element/input#capture
Disons que si le site de destination n'a pas prévu le scroling sur l'ancre on ne pourra pas compenser cette fonctionnalité manquante.
Hormis bien sûr la solution de Parsimoni basée sur la recherche de Chrome, mais cette solution pour être bien être révisée à l'avenir et n'est donc pas très robuste.
ObiJuanKenobi a écrit :

Quand je clic sur ton lien, cela m'affiche juste la page MDN de l'élément &lt;input&gt;, ça ne va pas directement se positionner au chapitre "Capture" plus bas !


Je viens de voir que ca fonctionnait avec Firefox mais pas avec Edge et Chrome Smiley decu
CrazyYann a écrit :


Je viens de voir que ca fonctionnait avec Firefox mais pas avec Edge et Chrome Smiley decu


En effet, je viens de tester aussi et ça ne fonctionne pas sur Chrome et Edge mais sur Firefox.
Tant pis, je ne vais pas utiliser cette fonctionnalité.
Modifié par ObiJuanKenobi (20 Nov 2023 - 13:47)
Modérateur
Bonjour,

Le lien https://developer.mozilla.org/fr/docs/Web/HTML/Element/input#capture devrait fonctionner y compris avec chrome.

Mais il y a peut-être dans cette page du bricolage avec du js qui l'empêche d'aller à l'ancre comme attendu. J'ai fait le test avec safari : si js est activé, ça ne va pas à l'ancre directement . Si js est désactivé, ça va à l'ancre directement. Je vous laisse le soin de faire le test avec Chrome. Smiley lol

Note : attention, la page est longue à charger, il faut être patient avant que ça aille jusqu'à l'ancre.

Amicalement,
Modifié par parsimonhi (20 Nov 2023 - 14:48)