Discussion :

[Jessika]

Bonjour a tous,

Voila jai besoin daide en HTML.
JE fais un site et jai des image sur une meme ligne l'une a cote de l'autre.
JE voudrai chake fois mettre un lien en dessus de chacun.
Comment je dois faire pour mettre un texte centrer juste en dessous de chaque image??

D'avance merci pour votre aide.
Jess

[afrodje]

Tu peux faire un tableau

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<tr><td>image1</td><td>image2</td></tr>
<tr><td>lien1</td><td>lien2</td></tr>

D'autre diront que la mise en forme en HTML est dépassé. Plutot utilisé le CSS.
Enfin j'aurais fais comme ca

[fixbraun]

Tu peux faire un tableau

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<tr><td>image1</td><td>image2</td></tr>
<tr><td>lien1</td><td>lien2</td></tr>

D'autre diront que la mise en forme en HTML est dépassé. Plutot utilisé le CSS.
Enfin j'aurais fais comme ca

Il ne faut pas non plus utilisé le css à tout bout de champ. <table> est mal utilisé lorsqu'on l'utilise pour faire un site en entier, mais lorsqu'il s'agit de faire un tableau au sens propre du terme, c'est bien lui qu'il faut utiliser!

Dans ce cas ci, je ferais comme toi!

[afrodje]

<table> est mal utilisé lorsqu'on l'utilise pour faire un site en entier

Le referencement n'est pas terrible ? ou y a d'autres raisons?

[beeboo]

C'est surtout lié au fait qu'on a utilisé les tableaux à outrance pour faire de la mise en page. C'était compréhensible avant l'adoption des css par les navigateurs mais aujourd'hui autant utiliser les tableaux pour ce à quoi ils servent : présenter des données tabulaires.
Pour la mise en page, on utilise de préférence des blocs identifiés auxquels on associe un style. Cela rend le contenu syntaxiquement structuré et permet de lire les pages web ainsi constituées avec n'importe quel outil. Et c'est dans le domaine de l'accessibilité que cela est notamment crucial car le flux des données est ainsi mieux lu par les lecteurs d'écran + barrette braille, par exemple.
L'indexation par les moteurs de recherche est aussi rendue plus efficace de même que la portabilité sur les médias portables : gsm, pda.
L'utilisation d'une syntaxe html sémantique. css rend aussi les pages plus légères et donc plus rapides à charger en sachant que la feuille de style une fois chargée dans la cache que navigateur ne doit plus être téléchargée lors du passage d'une page à l'autre.
Enfin s'il y a plein de bonnes raisons pour bien programmer et beaucoup de mauvaises pour mal programmer, c'est le concepteur qui décide de la façon dont il travaille.

[afrodje]

C'est surtout lié au fait qu'on a utilisé les tableaux à outrance pour faire de la mise en page. C'était compréhensible avant l'adoption des css par les navigateurs mais aujourd'hui autant utiliser les tableaux pour ce à quoi ils servent : présenter des données tabulaires.
Pour la mise en page, on utilise de préférence des blocs identifiés auxquels on associe un style. Cela rend le contenu syntaxiquement structuré et permet de lire les pages web ainsi constituées avec n'importe quel outil. Et c'est dans le domaine de l'accessibilité que cela est notamment crucial car le flux des données est ainsi mieux lu par les lecteurs d'écran + barrette braille, par exemple.
L'indexation par les moteurs de recherche est aussi rendue plus efficace de même que la portabilité sur les médias portables : gsm, pda.
L'utilisation d'une syntaxe html syntaxique . css rend aussi les pages plus légères et donc plus rapides à charger en sachant que la feuille de style une fois chargée dans la cache que navigateur ne doit plus être téléchargée lors du passage d'une page à l'autre.
Enfin s'il y a plein de bonnes raisons pour bien programmer et beaucoup de mauvaises pour mal programmer,

Merci pour cette information

c'est le concepteur qui décide de la façon dont il travaille.

C'est clair mais autant bien coder

[trotters213]

Il ne faut pas non plus utilisé le css à tout bout de champ. <table> est mal utilisé lorsqu'on l'utilise pour faire un site en entier, mais lorsqu'il s'agit de faire un tableau au sens propre du terme, c'est bien lui qu'il faut utiliser!

Dans ce cas ci, je ferais comme toi!

Justement, typiquement dans ce cas, il ne souhaite pas afficher des données tabulaires mais bel et bien faire de la mise en page. Donc on utilise de préférence du CSS pour centrer tout ça.

Le referencement n'est pas terrible ? ou y a d'autres raisons?

beeboo à très bien énoncé le souci, je rajouterais (et concluerais) avec ça, il y a plusieurs causes :

• C'est sémantiquement incorrect : les tableaux sont utilisés pour afficher des données tabulaires et non pour faire de la mise en page.
• La multiplication des balises nécessaires à la déclaration des tableaux alourdit grandement le code et le rend illisible donc l'affichage est plus long (surtout en cas d'utilisation de tableaux imbriqués).
• L'accessibilité est réduite pour les lecteurs d'écran ou les navigateurs non-graphiques (donc pour les non-voyants entre autre).
• Avec l'avènement du XHTML et la séparation du fond et de la forme, il est préférable d'utiliser des balises <div> couplées aux feuilles de styles CSS (un bon petit tuto)

[koala01]

Salut,

Justement, typiquement dans ce cas, il ne souhaite pas afficher des données tabulaires mais bel et bien faire de la mise en page. Donc on utilise de préférence du CSS pour centrer tout ça.

Je ne serais pas forcément aussi catégorique sur ce point...

Et pourtant, Dieu sait que je suis très sensible à une utilisation sémantique du HTML...

En fait, tout dépend du texte à insérer en dessous de l'image:

Finalement, le fait de mettre une image et un lien permettant de voir l'image en grand dans une cellule de tableau pas forcément différent du fait de mettre le nom et le prénom d'une personne dans une cellule de tableau, dans le sens où l'image et le lien traitent, même si c'est de manière différente, exactement de la même chose

Bien sûr, on pourrait estimer que, sémantiquement parlant, on présente en réalité "une liste d'image" (non ordonnée) et donc partir plutôt sur une variation du comportement de <ul> et <li>, mais la limite est quelque peu floue quand même

[Strix]

Salut

Tu peux faire quelque chose comme ça :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
.liens p{
float:left;
padding:0;
margin: 10px 10px 10px 10px;
text-align:center;
width:150px;
}
.liens img {
border:0;
height:50px;
width:150px;
}

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<div class="liens">	
	<p><a href="http://www.google.fr"><img src="http://www.google.fr/intl/fr_fr/images/logo.gif" alt="google" /><br />Google</a></p>
	<p><a href="http://www.google.fr"><img src="http://www.google.fr/intl/fr_fr/images/logo.gif" alt="google" /><br />Google</a></p>
	<p><a href="http://www.google.fr"><img src="http://www.google.fr/intl/fr_fr/images/logo.gif" alt="google" /><br />Google</a></p>
	<p><a href="http://www.google.fr"><img src="http://www.google.fr/intl/fr_fr/images/logo.gif" alt="google" /><br />Google</a></p>
	<p><a href="http://www.google.fr"><img src="http://www.google.fr/intl/fr_fr/images/logo.gif" alt="google" /><br />Google</a></p>
	<p><a href="http://www.google.fr"><img src="http://www.google.fr/intl/fr_fr/images/logo.gif" alt="google" /><br />Google</a></p>
</div>