Les paragraphes Les liens Les listes Les tableaux Tableau plus complexe Les images Visionneuse d'image Nuage de mots clefs.
Un nuage de mots clefs.
Si vous trouvez une article intéressante, vous pouvez participer à sa diffusion en utilisant les boutons de partage situés ci-dessous.
| Résumé de la matière | Description |
|---|---|
| Un nuage de mots clefs. | Le nuage de mots-clefs est une représentation visuelle des mots-clefs... |
Un nuage de mots clefs.
Le nuage de mots-clefs (tag cloud en anglais) est une représentation visuelle des mots-clefs les plus utilisés sur un site web. Généralement, les mots s'affichent dans des tailles de polices différente don les plus grandes sont utilisés pour les mots les plus populaires pour l'article en cours.
Concrètement, plus un mot-clef (tag) est cité dans un article ou dans le site en cours, plus il apparaîtra en gros dans le nuage de mots-clefs que représente le nuage de mots-clefs. En cliquant sur l'un de ces mots-clefs, selon que l'on se trouve en présence d'un nuage de mots-clefs organisé par popularité dans le site ou dans un annuaire de sites tel que Technorati1, on génère une page contenant tous les articles faisant référence à ce mot-clef dans le site en cours ou dans l'annuaire en question.
Vous trouverez des générateurs de mots clefs un peu partout sur internet, mais celui-ci est personnalisable à souhait et surtout il ne comporte aucun script.
Voici un exemple :
cours XHTML 1.0 tags CSS tutoriel Menu footer Bannière Menu à onglet site web balise Menu verticale diaporama web tuto en ligne Lecteur Mp3 <h1> insérer un paragraphe <p> Insérer un menu Site web gratuit W3C page web CSS 2.1 Web site insérer un lien Déclaration Doctype vidéo footer menu plusieurs niveaux insérer une image <div> Faire un site tuto xhtml Menu verticale CSS 3 html 5 background image Valide W3C Tutoriel gratuit
Comme vous pouvez le constater, les mots clés sont des liens qui devraient permettre au visiteur de consulter rapidement la matière ou le sujet dont le lien réfère.
Copier ce qui suit dans le XHTML (ne tenez pas compte des numéros de ligne).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
<p>
<a href="#nogo" class="tag-13" title="Mots clefs" ><span class="vert">Mots clefs</span></a>
<a href="#nogo" class="tag-22" title="Mots clefs" ><span class="red">Mots clefs</span></a>
<a href="#nogo" class="tag-08" title="Mots clefs" >Mots clefs</a>
<a href="#nogo" class="tag-11" title="Mots clefs" ><span class="marron">Mots clefs</span></a>
<a href="#nogo" class="tag-21" title="Mots clefs" >Mots clefs</a>
<a href="#nogo" class="tag-01" title="Mots clefs" >Mots clefs</a>
<a href="#nogo" class="tag-10" title="Mots clefs" >Mots clefs</a>
<a href="#nogo" class="tag-16" title="Mots clefs" ><span class="magenta">Mots clefs</span></a>
<a href="#nogo" class="tag-21" title="Mots clefs" >Mots clefs</a>
<a href="#nogo" class="tag-10" title="Mots clefs" >Mots clefs</a>
<a href="#nogo" class="tag-19" title="Mots clefs" ><span class="cyan">Mots clefs</span></a>
<a href="#nogo" class="tag-01" title="Mots clefs" ><span class="marron">Mots clefs</span></a>
<a href="#nogo" class="tag-01" title="Mots clefs" ><span class="mauve">Mots clefs</span></a>
<a href="#nogo" class="tag-08" title="Mots clefs" >Mots clefs</a>
<a href="r#nogo" class="tag-15" title="Mots clefs" ><span class="vert">Mots clefs</span></a>
<a href="#nogo" class="tag-02" title="Mots clefs" >Mots clefs</a>
<a href="#nogo" class="tag-12" title="Mots clefs" ><span class="vert">Mots clefs</span></a>
<a href="#nogo" class="tag-03" title="Mots clefs" >Mots clefs</a>
<a href="#nogo" class="tag-17" title="Mots clefs" >Mots clefs</a>
<a href="#nogo" class="tag-19" title="Mots clefs" ><span class="red">Mots clefs</span></a>
<a href="#nogo" class="tag-06" title="Mots clefs" ><span class="vert">Mots clefs</span></a>
<a href="#nogo" class="tag-07" title="Mots clefs" >Mots clefs</a>
<a href="#nogo" class="tag-07" title="Mots clefs" ><span class="marron">Mots clefs</span></a>
<a href="#nogo" class="tag-14" title="Mots clefs" >Mots clefs</a>
<a href="#nogo" class="tag-05" title="Mots clefs" ><span class="mauve">Mots clefs</span></a>
<a href="#nogo" class="tag-18" title="Mots clefs" >Mots clefs</a>
<a href="#nogo" class="tag-14" title="Mots clefs" >Mots clefs</a>
<a href="#nogo" class="tag-13" title="Mots clefs" >Mots clefs</a>
<a href="#nogo" class="tag-02" title="Mots clefs" ><span class="cyan">Mots clefs</span></a>
<a href="#nogo" class="tag-21" title="Mots clefs" ><span class="magenta">Mots clefs</span></a>
<a href="#nogo" class="tag-04" title="Mots clefs">Mots clefs</a>
<a href="#nogo" class="tag-08" title="Mots clefs" >Mots clefs</a>
<a href="#nogo" class="tag-03" title="Mots clefs" >Mots clefs</a>
<a href="#nogo" class="tag-09" title="Mots clefs" >Mots clefs</a>
<a href="#nogo" class="tag-12" title="Mots clefs" >Mots clefs</a>
<a href="#nogo" class="tag-20" title="Mots clefs" ><span class="magenta">Mots clefs</span></a>
<a href="#nogo" class="tag-03" title="Mots clefs" >Mots clefs</a>
<a href="#nogo" class="tag-03" title="Mots clefs" >Mots clefs</a>
<a href="#nogo" class="tag-02" title="Mots clefs" ><span class="mauve">Mots clefs</span></a>
<a href="#nogo" class="tag-23" title="Mots clefs" ><span class="marron">Mots clefs</span></a>
</p>
|
Comme toujours, tout ce joue dans le CSS (ne tenez pas compte des numéros de ligne).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
.cyan{
color:#23619c
}
.mauve{
color:#871b67
}
.marron{
color:#68242f
}
.red{
color:#f00
}
.vert{
color:#419a2e
}
.magenta{
color:#e2007a
}
.tag-01{
font-size:10.6452px
}
.tag-02{
font-size:11.129px;
}
.tag-03{
font-size:11.4516px
}
.tag-04{
font-size:12.4194px
}
.tag-05{
font-size:12.7419px
}
.tag-06{
font-size:13.3871px
}
.tag-07{
font-size:14.0323px
}
.tag-08{
font-size:14.6774px
}
.tag-09{
font-size:14.8387px
}
.tag-10{
font-size:15.4839px
}
.tag-11{
font-size:16.4516px
}
.tag-12{
font-size:16.6129px
}
.tag-13{
font-size:16.7742px
}
.tag-14{
font-size:16.9355px
}
.tag-15{
font-size:17.7419px
}
.tag-16{
font-size:17.9032px
}
.tag-17{
font-size:18.0645px
}
.tag-18{
font-size:18.7097px
}
.tag-19{
font-size:19.6774px
}
.tag-20{
font-size:19.8387px
}
.tag-21{
font-size:20.9677px
}
.tag-22{
font-size:28.3871px
}
.tag-23{
font-size:30px
}
|
Vous pouvez changer les couleurs ou en ajouter d'autres selon vos goûts ou vos besoins.
Ajouter ce site à vos favoris
