Imprimerie Nice - Carnet Web de Dimension Internet, professionnel des arts graphiques et des technologies liées à Internet - HTML / xHTML

Faire un menu de reroutage vers différentes parties de la page

Sven CAILTEUX — Tue, 20 Mar 2007 16:32:28 +0000

Nous allons voir comment créer un menu de reroutage qui va nous permettre d'accéder directement à une partie bien précise de notre page.

On utilise pour celà les ancres.
Il faut tout d'abord choisir les parties qui nous intéressent et leur attribuer un "id" unique, de cette manière par exemple :

<p id="partie1">bla bla bla</p>
<div id="partie2">
<p>encore du bla bla</p>
</div>

Pour atteindre une section particulière, il suffit de faire un lien vers '#partie1' ou '#partie2'.
Nous allons construire notre menu de reroutage en HTML et avec une pointe de Javascript.

Voici le code complet de l'exemple, vous pouvez le copier coller nous allons l'analyser :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; (anti-spam-(anti-spam-(anti-spam-(anti-spam-(anti-spam-(anti-spam-(anti-spam-(anti-spam-(anti-spam-(anti-spam-(anti-spam-(anti-spam-(anti-spam-charset=)))))))))))))UTF-8" />
<title>Untitled Document</title>

<script type="text/JavaScript">
<!--
function GoTO(target,Objet,restore)
	{
 	 eval(target+".location='"+Objet.options[Objet.selectedIndex].value+"'");
  	if (restore) Objet.selectedIndex=0;
	}
//-->
</script>
</head>

<body>
<form name="form1" id="form1" action="http://www.dimension-internet.com/blog/index.php/post/2007/03/20/">
  <select name="Menu1" onchange="GoTO('parent',this,1)">
    <option value="#">Aller à</option>
    <option value="#partie1">Partie 1</option>
    <option value="#partie2">Partie 2</option>
    <option value="#partie3">Partie 3</option>
    <option value="#partie4">Partie 4</option>
    <option value="#partie5">Partie 5</option>
  </select>
</form>
<h3>Partie 1</h3>
<p id="partie1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent sodales, lacus sed porttitor<br />
  iaculis, lectus lorem facilisis mauris, id eleifend dolor erat sed eros. Sed viverra. Vivamus id<br />
  augue. Curabitur id diam. Quisque eleifend volutpat leo. Ut gravida neque. Nullam adipiscing<br />
  sagittis nisi. Quisque dolor libero, volutpat in, tincidunt venenatis, bibendum ac, nisl. Nullam et<br />
  neque vitae magna vehicula nonummy. Vivamus non felis. Vestibulum sit amet neque.</p>
  
<h3>Partie 2</h3>
<p id="partie2">Proin dolor massa, tempus vel, feugiat tristique, convallis eget, tortor. Ut tortor nulla,<br />
  condimentum non, nonummy vitae, convallis a, tellus. Donec volutpat, purus ornare vehicula egestas,<br />
  velit elit porta tortor, ac sagittis justo eros in enim. Ut quam arcu, ornare at, venenatis vel,<br />
  sollicitudin nec, orci. Etiam nunc. Sed metus ipsum, convallis sollicitudin, placerat sit amet,<br />
  varius ac, nisi. Aliquam vitae orci ac nisl molestie facilisis. Nunc lorem. Mauris ut nulla eget<br />
  lorem dapibus ultricies. Maecenas et diam. Vestibulum eget lorem. Nullam pretium condimentum libero.<br />
  Nulla facilisi. Pellentesque at eros. Maecenas dignissim, nibh non dictum ultrices, purus felis<br />
  mollis eros, vel ultricies dolor lorem id enim. Maecenas augue. Aliquam erat volutpat. Sed lectus.<br />
  Phasellus condimentum tempus nibh.</p>
  
<h3>Partie 3</h3>
<p id="partie3">Curabitur ut eros sed odio cursus rutrum. Sed laoreet dui et dolor. Curabitur elementum, libero sed<br />
  laoreet semper, arcu justo aliquam diam, quis lobortis neque nunc sed risus. Phasellus magna. Cras<br />
  faucibus. Mauris eget quam in est semper placerat. Suspendisse ac arcu ac neque gravida facilisis.<br />
  Pellentesque semper, arcu sit amet sollicitudin vulputate, purus magna volutpat magna, id laoreet<br />
  enim pede vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur<br />
  ridiculus mus. Nulla eget ipsum mattis ligula sodales auctor. Integer dolor diam, suscipit nec,<br />
  sollicitudin non, bibendum pellentesque, libero. Vivamus porta facilisis risus. Nulla lorem est,<br />
  facilisis posuere, luctus ac, mattis in, nisi. In non justo. Cras ullamcorper dignissim tellus.</p>
  
<h3>Partie 4</h3>
<p id="partie4">Duis at risus nec massa dapibus adipiscing. Cras sed ante eget est iaculis fringilla. Sed pretium<br />
  purus non quam. Curabitur imperdiet risus varius turpis. Suspendisse sit amet velit in lacus<br />
  dignissim pharetra. Ut tincidunt lacinia erat. Cras lorem lacus, porttitor id, rutrum eget, sagittis<br />
  et, dolor. Integer vel lorem. Phasellus ultrices, libero eu rutrum facilisis, orci purus<br />
  consectetuer quam, ut blandit nibh dui vitae nisl. Nulla facilisi. Morbi sem. Quisque volutpat dui.<br />
  Praesent elit nunc, pellentesque in, scelerisque vel, feugiat vitae, augue. Duis feugiat nisl sit<br />
  amet nisl. Duis id nunc sit amet justo adipiscing varius. Nullam rutrum lacinia lorem. Maecenas<br />
  dapibus augue sit amet turpis.</p>

<h3>Partie 5</h3>
<p id="partie5">Suspendisse est justo, lacinia ac, auctor a, consectetuer non, dolor. Nunc tristique. Nam et nulla.<br />
  Quisque vitae mi nec metus imperdiet bibendum. Vestibulum eros. Aliquam velit tortor, pulvinar sit<br />
  amet, rhoncus id, pretium id, justo. Vestibulum eu enim. Fusce placerat, lacus vel bibendum porta,<br />
  magna massa euismod eros, in congue ante ipsum vitae tortor. In hac habitasse platea dictumst.<br />
  Aliquam erat volutpat. Nunc malesuada nonummy justo. Etiam porttitor lorem aliquam augue.<br />
  Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec<br />
  enim. Maecenas nisl. Phasellus risus purus, porta id, accumsan hendrerit, ultricies et, turpis.<br />
  Curabitur aliquet quam vel nunc. Curabitur magna nunc, mollis at, commodo a, commodo in, dolor.</p>
</body>
</html>

Nous avons le menu de reroutage, chaque paragraphe est identifié par un "id" unique, chaque ligne du menu pointe sur une partie de la page.
En ce qui concerne le script, il est appelé au moment où vous faites votre choix dans le menu déroulant, il a pour action de vous diriger sur la partie choisie et de remettre le menu en position initiale.
De plus la page est validée par le W3C.

Si vous avez des questions, n'hésitez pas à laisser un commentaire.

Bonne continuation

Liste des noms de couleurs

Sven CAILTEUX — Fri, 15 Sep 2006 11:16:57 +0000

Voici une liste non exhaustive de toutes les équivalences des codes hexadécimaux. C'est beaucoup plus simple qu'en hexa.

Nom de la couleur	Rouge	Vert	Bleu
aliceblue	f0	f8	ff
antiquewhite	fa	eb	d7
aqua	00	ff	ff
aquamarine	7f	ff	d4
azure	f0	ff	ff
beige	f5	f5	dc
bisque	ff	e4	c4
black	00	00	00
blanchedalmond	ff	eb	cd
blue	00	00	ff
blueviolet	8a	2b	e2
brown	a5	2a	2a
burlywood	de	b8	87
cadetblue	5f	9e	a0
chartreuse	7f	ff	00
chocolate	d2	69	1e
coral	ff	7f	50
cornflowerblue	64	95	ed
cornsilk	ff	f8	dc
crimson	dc	14	3c
cyan	00	ff	ff
darkblue	00	00	8b
darkcyan	00	8b	8b
darkgoldenrod	b8	86	0b
darkgray	a9	a9	a9
darkgreen	00	64	00
darkkhaki	bd	b7	6b
darkmagenta	8b	00	8b
darkolivegreen	55	6b	2f
darkorange	ff	8c	00
darkorchid	99	32	cc
darkred	8b	00	00
darksalmon	e9	96	7a
darkseagreen	8f	bc	8f
darkslateblue	48	3d	8b
darkslategray	2f	4f	4f
darkturquoise	00	ce	d1
darkviolet	94	00	d3
deeppink	ff	14	93
deepskyblue	00	bf	ff
dimgray	69	69	69
dodgerblue	1e	90	ff
firebrick	b2	22	22
floralwhite	ff	fa	f0
forestgreen	22	8b	22
fuchsia	ff	00	ff
gainsboro	dc	dc	dc
ghostwhite	f8	f8	ff
gold	ff	d7	00
goldenrod	da	a5	20
gray	80	80	80
green	00	80	00
greenyellow	ad	ff	2f
honeydew	f0	ff	f0
hotpink	ff	69	b4
indianred	cd	5c	5c
indigo	4b	00	82
ivory	ff	ff	f0
khaki	f0	e6	8c
lavender	e6	e6	fa
lavenderblush	ff	f0	f5
lawngreen	7c	fc	00
lightgrey	d3	d3	d3
lightpink	ff	b6	c1
lightsalmon	ff	a0	7a
lightseagreen	20	b2	aa
lightskyblue	87	ce	fa
lightslategray	77	88	99
lightsteelblue	b0	c4	de
lightyellow	ff	ff	e0
lime	00	ff	00
limegreen	32	cd	32
linen	fa	f0	e6
magenta	ff	00	ff
maroon	80	00	00
mediumaquamarine	66	cd	aa
mediumblue	00	00	cd
mediumorchid	ba	55	d3
mediumpurple	93	70	db
mediumseagreen	3c	b3	71
mediumslateblue	7b	68	ee
mediumspringgreen	00	fa	9a
mediumturquoise	48	d1	cc
mediumvioletred	c7	15	85
midnightblue	19	19	70
mintcream	f5	ff	fa
mistyrose	ff	e4	e1
moccasin	ff	e4	b5
navajowhite	ff	de	ad
navy	00	00	80
oldlace	fd	f5	e6
olive	80	80	00
olivedrab	6b	8e	23
orange	ff	a5	00
orangered	ff	a5	00
orchid	da	70	d6
palegoldenrod	ee	e8	aa
palegreen	98	fb	98
paleturquoise	af	ee	ee
palevioletred	db	70	93
papayawhip	ff	ef	d5
peachpuff	ff	da	b9
peru	cd	85	3f
pink	ff	c0	cb
plum	dd	a0	dd
powderblue	b0	e0	e6
purple	80	00	80
red	ff	00	00
rosybrown	bc	8f	8f
royalblue	41	69	e1
saddlebrown	8b	45	13
salmon	fa	80	72
sandybrown	f4	a4	60
seagreen	2e	8b	57
seashell	ff	f5	ee
sienna	a0	52	2d
silver	c0	c0	c0
skyblue	87	ce	eb
slateblue	6a	5a	cd
slategray	70	80	90
snow	ff	fa	fa
springgreen	00	ff	7f
steelblue	46	82	b4
tan	d2	b4	8c
teal	00	80	80
thistle	d8	bf	d8
tomato	ff	63	47
turquoise	40	e0	d0
violet	ee	82	ee
wheat	f5	de	b3
white	ff	ff	ff
whitesmoke	f5	f5	f5
yellow	ff	ff	00
yellowgreen	9a	cd	32

Paris Web 2006

Sven CAILTEUX — Mon, 11 Sep 2006 17:39:10 +0000

Accessibilité, qualité et design : comment concilier ces trois approches dans une optique de production de sites web, avec les contraintes et les exigences liées à des processus « industriels » ?

Paris Web 2006 se tiendra à Paris les 21 et 22 septembre 2006. Les orateurs sont des professionnels du web francophone.

Retrouvez toutes les infos sur : http://www.parisweb2006.org

Comment retirer la petite barre de menu qui apparaît sur les images dans Internet Explorer ?

Sven CAILTEUX — Wed, 26 Jul 2006 07:36:24 +0000

Sous Internet Explorer PC, quand vous survolez une image, vous avez une petite barre d'outils avec la possibilité de sauvegarder, imprimer, envoyer...

Si vous ne souhaitez plus voir apparaître cette fenêtre sur le site internet que vous développez, il vous suffira de rajouter cette ligne dans la partie head de votre code :

<meta http-equiv="imagetoolbar" content="no" />

Comment forcer l'affichage en UTF-8 ?

Sven CAILTEUX — Fri, 07 Jul 2006 08:50:36 +0000

Vous souhaitez forcer l'affichage de vos pages en UTF-8, voici ce que vous pouvez faire.

Si vous êtes sur un hébergement mutualisé, il se peut que l'encodage soit en "iso-8859-1" et même si vos pages sont codées en UTF-8, l'affichage ne se fera pas correctement.

Si vous avez un hébergement sur un serveur Apache, il vous suffit alors de placer à la racine de votre site un fichier ".htaccess" avec l'instruction suivante :

AddDefaultCharset UTF-8

Le fichier ".htaccess" est un fichier de configuration du serveur web Apache, il peut être utiliser pour modifier les droits d'accès, créer des redirections, écrire des messages d'erreur personnalisés,...

METHODE :

Sous windows, vous ne pourrez pas mettre un "." devant htaccess, il vous faut utiliser un éditeur de texte, dans le menu "Fichier" sélectionnez "Enregistrer sous", dans la fenêtre de dialogue, changez le type en "Tous les fichiers" et sauvegardez le fichier sous ".htaccess" AVEC LES GUILLEMETS !

Deuxième méthode :

Créer un fichier txt.htaccess que vous renommerez .htaccess une fois sur le serveur

Comment rendre une cellule de tableau clignotante ?

Sven CAILTEUX — Thu, 29 Jun 2006 15:07:21 +0000

Rendre une cellule de tableau clignotante sans Javascript, juste avec du HTML et CSS

Il vous suffit de créer une image gif animée de 1 pixel par 1 pixel.

Ensuite vous créez une classe dans votre feuille de style :

.clignotant { background:url(votre_image.gif) repeat; }

et dans votre tableau, vous donnez comme propriété à la cellule la classe clignotant :

<td class="clignotant">La valeur en question</td>

Voici un très simple exemple : Cellule clignotante

Comment savoir si une page HTML est valide ?

Sven CAILTEUX — Mon, 19 Jun 2006 22:16:22 +0000

Pour être certain qu'une page fonctionne correctement sur les navigateurs, il est vivement recommandé de valider cette page.

Le World Wide Web Consortium en abrégé W3C, est un consortium fondé en octobre 1994 et qui a pour but de promouvoir la compatibilité des technologies du World Wide Web. Le W3C n'émet pas des normes, mais des recommandations.

Et cet organisme, met à notre disposition des outils :

Pour valider une page HTML ou XHTML -> http://validator.w3.org
Pour valider une feuilles de style CSS -> http://jigsaw.w3.org/css-validator