5568 sujets

Sémantique web et HTML

Bonsoir,

dans le site que je dois faire, il y a une page qui va reprendre des définitions de termes spécifiques à l'option de l'école.

Faire des définitions en HTML, pas de problèmes dans le code. Mais ce que je ne vois pas c'est comment faire la présentation.

Je désire mettre toutes les lettres de l'alphabet au dessus. QUe si l'on clique, par exemple sur la lettre C, que l'on voit apparaître tous les mots commençant par cette lettre et leur définition.

N'auriez-vous pas une p'tite idée SVP ? Euuhh, si possible en restant dans l'HTML et le CSS, je commence là moi Smiley confus

Un tout grand merci pour les réponses.

Oups, je crois que je ne suis pas au bon endroit là moi Smiley eek .
On fait comment pour bouger un message ???
Modifié par Bpat (06 Mar 2007 - 17:35)
Qu'est-ce qui te pose problème ?
La gestion clic sur une lettre = affichage des mots coresspondants ?

Question HTML, je te propose la liste de définition qui est bien appropriée pour un glossaire.

Mainteant pour ton clicde lettre, tu as deux choix : gérer ça du côté du serveur , ou en javascript.
Je te conseille avant tout le premier pour des raisons d'accessibilité, mais rien ne t'empêche d'utiliser les deux à la fois !
Ben, je ne sais pas exactement comment faire, j'ai bien quelques idées mais ...

- chaque lettre serait un lien hypertexte soit vers une autre page mais là: structure de cette page ???

- chaque lettre serait un lien hypertexte interne (système d'ancre) mais là je me pose la question de la longueur que la page va finir par avoir + poids + sa gestion

- autre solution ???

+ quelle partie du code je dois mettre dans le CSS ?

Bon, cela veut dire quoi "gérer ça du côté du serveur" ?

Quant à utiliser Javascript, j'ai intérêt à faire des recherches sur Internet pour trouver le script "tout fait" car je n'ai pas de connaissances en Javascipt. Je préférerais ne pas utiliser cette solution car je désire comprendre tout le code de mon site .


Merci de m'accorder de l'aide.
Et bien tu crée une page appelée par exemple glossaire.html avec le genre de code suivant :

	<h1>Glossaire</h1>

	<h2>A</h2>
	

	<h2>C</h2>
	<dl>
		<dt id="crayon">crayon</dt>
		<dd>Le crayon mine, souvent appelé crayon à papier, ou dans…</dd>
		<dt id="cahier">Cahier</dt>
		<dd>Une feuille de papier…</dd>
	</dl>


Et dans ta page qui pointe vers le glossaire tu fais un lien dans le genre :

<a href="glossaire.html#cahier">cahier</a>


Attention : les ID doivent être unique dans la page…
a écrit :

- chaque lettre serait un lien hypertexte soit vers une autre page mais là: structure de cette page ???

Je ne vois pas le problème de structure que ça pose ?
Tu fais 26 pages correspondant aux 26 lettres et tu y mets les mots commençant par la bonne lettre dans la bonne page.

a écrit :

- chaque lettre serait un lien hypertexte interne (système d'ancre) mais là je me pose la question de la longueur que la page va finir par avoir + poids

Pour l'exemple cf post au-dessus qui te donne une façon de mettre en place cette technique. Tu peux aussi mettre des id sur les titres pour associer les lettres aux liens plutôt que les mots.

Personnellement, je choisirais la deuxième solution, à mon avis un glossaire est fait pour rester en un seul tenant. Ca facilite les choses pour ceux qui savent utiliser Ctrl+F, et tant pis pour la taille de la page même si elle fait 300 Ko.

Il existe une troisième solution, mais elle est de toute façon moins bonne que les deux précédentes : utiliser javascript pour n'afficher que les mots commençant par la lettre cliquée.
Administrateur
Bonjour,

une illustration de la solution "tout en une page" décrite par QuentinC: liste de périodiques. Le code HTML est dépassé et des liens d'évitement seraient les bienvenus mais le résultat, quand on cherche plusieurs journaux successivement, est très pratique à utiliser avec Ctrl-F (recherche interne à la page via le navigateur).
Avec des définitions de plusieurs lignes, la solution n'est peut-être pas adaptée ...
Modifié par Felipe (07 Mar 2007 - 08:24)
Il y a un modèle auquel je voudrais arriver:

http://www.jeuxvideo.com/btajv99/etajvndx/00101.htm.

Cela commencerait par:

Initiale du mot recherché : A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

Avec, comme dans le site du jeu, les définitions des mots commençant par A et puis il faudrait cliquer sur les autres lettres pour passer aux autres définitions.

Alors, quand je parlais de mise en page, ici, dans le site du jeu, à chaque fois, c'est une toute nouvelle page qui s'ouvre. Et à chaque fois, il y a une mise en page complète (titre, liens, ....)ffff

Voici une autre possiblilité de présentation:

http://www.webadev.com/lexique-c-cgi.php

Les lettres puis les mots à définir en dessous et quand on clique sur le mot, la définition apparaît (me semble compliquer à faire Smiley confus )

Et, ce système dont j'ai déjà parlé:

http://www.lot-amont.net/documentation/index.html

Et là, j'ai peur pour la longueur et le poids.

Alors, je vous demande, à vous qui avez tant d'expériences et de compétences, qu'est-ce que vous me conseillez pour que je puisse le réaliser en HTML et CSS et, cerise sur le gâteau, pour que cela présente bien ???


Un tout gros merci pour vos réponses Smiley biggrin