Cette entrée a été publiée dans Gif animé, Scrogramme le par .
apercu

BD numérique et scroll programmé – suite

BD numérique : Comment programmer son scroll grâce à Javascript ? Tutoriel !

Dans le précédent article, on vous a montré un exemple de BD où l’on avait programmé le scroll. Nous y avons apporté quelques corrections et vous pouvez lire la nouvelle version ici : lien vers BD en scroll programmé
pour le tuturiel, je laisse la parole à Aegir :

1- Vive le site du zéro !

Déjà, j’ai lu en entier les tutoriels du site du zéro à propos de : HTML5 et CSS, ainsi que Javascript.
Bon ça ne fait pas de moi un programmeur, mais je peux déjà imaginer bidouiller quelques trucs sympas ! ( Notez que le site du zéro est devenu entre temps OpenClassrooms )

Pour résumer, il faut comprendre que derrière chacun de ces noms se cache un système de langage codé pour donner des instructions au navigateur Internet (en gros). On crée 3 fichiers texte simples (avec un bloc-notes par exemple, mais moi, j’ai utilisé Notepad++ car il permet de colorer le texte en fonction du langage utilisé pour le clarifier)

Le premier, en HTML5, énumère les différents éléments imbriqués les uns dans les autres : en-tête, corps, paragraphes contenant textes et/ou images, etc. C’est basique, et s’il n’y a que lui sans le code CSS, ça affiche bêtement les éléments les uns après les autres.

Le 2e, rédigé en CSS, reprend chacun de ces éléments de base et précise l’emplacement, la taille, la couleur, le fond, … On peut définir des tas de propriétés pour tous les éléments, on n’écrit que celles qui sont nécessaires.

Le dernier fichier, en Javascript, n’est indispensable que si l’on veut réaliser les animations liées à une action du lecteur. Il contient des fonctions spécifiques qui permettent de modifier les fichiers HTML5 et CSS : par exemple on peut lui dire que si le curseur est à tel endroit de l’écran, telle image va être remplacée par une autre (modification du HTML5), et un paragraphe va devenir rouge au lieu de noir (modification du CSS).

2 – Code commenté

Nous parlerons ici uniquement de la programmation.

Avant de démarrer, il faut avoir déjà hébergé ses fichiers images sur le net et avoir récupéré leurs adresses url.

2.1 – fichier HTML5 :

Ce code est basé sur des « balises ». Soit ouvrante puis fermante : <balise> puis </balise>, englobant tout plein de trucs, soit une « orpheline » qui ouvre et ferme en même temps, mais qui ne peut pas d’inclure d’autres objets : <balise/> (on peut quand même préciser des trucs entre les <>).

<!DOCTYPE html>
<html>

(on met ça au début du doc pour annoncer qu’on écrit en html, il faudra penser à refermer <html> à la fin du document)

<head>

<meta charset= »utf-8″ />

<link rel= »stylesheet » href= »chutestyle.css » />

<title>BD chute</title>
</head>

(« head », c’est l’en-tête de la fenêtre et c’est exécuté en premier. On dit quel type de caractères on utilise (utf-8), on indique le nom du fichier CSS à utiliser pour mettre en forme (on verra ce qu’il y a dedans après), et on met le titre qui s’affichera en haut de la fenêtre, dans le bandeau (ou dans l’encart de l’onglet). On pourrait mettre d’autres trucs mais pas dans cet exemple)

Et voici la section suivante : le « corps » de la page web, mais évidemment c’est en anglais, donc c’est « body ». Là on met tout ce qui devra apparaître, donc nos images et textes :

<body>

<section id= »truc »>

(j’englobe tout dans une section à l’intérieur du body. Le body concerne toute la page web, donc pour faire une petite fenêtre dedans, j’ouvre une section et je préciserai dans le CSS sa taille)

(là, à chaque fois que j’ai besoin d’avoir des « paragraphes » séparés, j’ouvre un paragraphe avec <p>, je mets ce qui peut bouger en groupe ensemble à l’intérieur, et puis je referme avec </p>. Finalement, ça revient à regrouper les images par paquets : l’enchaînement des 3 cases avec le mec qui saute peuvent rester dans le même paquet car elles restent groupées, alors que les gif animés seront seuls dans le leur. De même, je mets les textes dans des paquets à part pour pouvoir leur attribuer après facilement des propriétés de mise en forme séparément (comme pour le titre de la BD). On peut préciser un nom d’identification à chaque paragraphe (ou « paquet ») en précisant dans la balise ouvrante : id= »nom d’identification unique ». Ce sera très pratique car on peut ainsi y faire référence directement pendant la rédaction de la mise en forme avec le CSS)

<p id= »decor »>
</p>

(lui est vide apparemment, mais je vais lui attribuer l’image de fond grâce au CSS)

  <p id= »gars »>
<img src= »http://www.galax-bd.fr/wp-content/uploads/2013/07/titre.png » />
<img src= »http://www.galax-bd.fr/wp-content/uploads/2013/07/case1.png » alt= »pcase1″ />
<img src= »http://www.galax-bd.fr/wp-content/uploads/2013/06/case2.png » alt= »pcase2″ />
<img src= »http://www.galax-bd.fr/wp-content/uploads/2013/07/case3anim.gif » alt= »pcase3″ />
</p>

(enfin voilà les images ! on les met dans un paragraphe/paquet avec la balise <img/> en précisant l’url avec « src= »url de l’image » », comme dans les exemples ci-dessus. Et ci-après aussi en fait. Ce sont les 2 paquets avec les images encadrées montrant le mec sauter (ci-dessus) et la fille (ci-dessous).)<p id= »fille »>

<img src= »http://www.galax-bd.fr/wp-content/uploads/2013/07/case1f.gif » alt= »pcase4″ />
<img src= »http://www.galax-bd.fr/wp-content/uploads/2013/07/case2f.gif » alt= »pcase5″ />
<img src= »http://www.galax-bd.fr/wp-content/uploads/2013/07/case3animf.gif » alt= »gcase6″ />
</p>

(ensuite c’est le même principe pour les autres images avec les cases, puis pour les gifs animés)

<p id= »union »>
<img src= »http://www.galax-bd.fr/wp-content/uploads/2013/07/case5anim.gif » alt= »gcase7″ />
</p><p id= »fin »>
<img src= »http://www.galax-bd.fr/wp-content/uploads/2013/06/case8.gif » alt= »gcase7″ /> <br/> <br/> <br/> <br/>
<img src= »http://www.galax-bd.fr/wp-content/uploads/2013/06/case9.png » alt= »gcase8″ />
</p><p id= »gif1″>
<img src= »http://www.galax-bd.fr/wp-content/uploads/2013/07/case4anim.gif » alt= »gif1″ />
</p><p id= »gif2″>
<img src= »http://www.galax-bd.fr/wp-content/uploads/2013/07/case4animf.gif » alt= »gif2″ />
</p>
<p id= »gif3″>

<img src= »http://www.galax-bd.fr/wp-content/uploads/2013/07/case6anim.gif » alt= »gif3″ />
</p>
<p id= »pensees »>

<img src= »http://www.galax-bd.fr/wp-content/uploads/2013/07/penseesensemble2.png » alt= »n1″ />
</p>

(dans les suivants, en plus de donner un nom d’identification à chaque paragraphe, je lui attribue aussi une « classe ». Là ils peuvent être plusieurs à la partager, comme les bulles de dialogues ci-dessous. Ça me permettra si j’en ai besoin dans le CSS (et c’est le cas ici) de préciser la mise en forme de toutes les bulles en une fois, au lieu de le faire pour chacune séparément. Je ne pouvais pas les mettre dans le même paragraphe car elles vont apparaître et disparaître à des moments différents)

<p id= »b1″>
<img src= »http://www.galax-bd.fr/wp-content/uploads/2013/06/textebelle.gif » alt= »b1″ />
</p>

<p id= »b2″>
<img src= »http://www.galax-bd.fr/wp-content/uploads/2013/06/textestupide.gif » alt= »b2″ />
</p>

<p id= »b3″>
<img src= »http://www.galax-bd.fr/wp-content/uploads/2013/06/coeurnum1.gif » alt= »b3″ />
</p>

<p id= »b4″>
<img src= »http://www.galax-bd.fr/wp-content/uploads/2013/06/coeurnum2.gif » alt= »b4″ />
</p>

<p id= »m1″>
<img src= »http://www.galax-bd.fr/wp-content/uploads/2013/06/nuages2.gif » alt= »n1″ />
</p>

<p id= »m2″>
<img src= »http://www.galax-bd.fr/wp-content/uploads/2013/06/nuages1.gif » alt= »n2″ />
</p>

<p id= »m3″>
<img src= »http://www.galax-bd.fr/wp-content/uploads/2013/06/nuages2.gif » alt= »n3″ />
</p>

<p id= »m4″>
<img src= »http://www.galax-bd.fr/wp-content/uploads/2013/06/nuages3.gif » alt= »n4″ />
</p>

<p id= »m5″>
<img src= »http://www.galax-bd.fr/wp-content/uploads/2013/06/nuages4.gif » alt= »n5″ />
</p>

<p id= »m6″>
<img src= »http://www.galax-bd.fr/wp-content/uploads/2013/06/nuages3.gif » alt= »m6″ />
</p>

<p id= »n2″>
<img src= »http://www.galax-bd.fr/wp-content/uploads/2013/07/nuageplusdiscret.gif » alt= »n1″ />
</p>

<p id= »n3″>
<img src= »http://www.galax-bd.fr/wp-content/uploads/2013/07/nuagediscret.gif » alt= »n1″ />
</p>

<p id= »n4″>
<img src= »http://www.galax-bd.fr/wp-content/uploads/2013/07/nuagediscret.gif » alt= »n1″ />
</p>

<p id= »n5″>
<img src= »http://www.galax-bd.fr/wp-content/uploads/2013/07/nuagediscret.gif » alt= »n1″ />
</p>

(pour finir, le générique. Pour le texte, on n’a pas de balise à mettre, il suffit de le mettre tel quel dans un paragraphe)

<p id= »generique »>
<a href= »http://www.galax-bd.fr/blog-bande-dessinee-numerique/ » title= »retour au blog » ><span style= »color: #ffffff; »>Retour au blog</span></a>
</p>

(la balise <a> permet de mettre un lien)

</section>

(je ferme la section que j’avais ouverte au début du body)

<script src= »chute.js »></script>

(j’indique maintenant quel est le fichier contenant les instructions en Javascript avec cette balise)

</body>

</html>

(je ferme les balises du début. C’est fini pour le HTML5 !)
On enregistre le fichier avec l’extension « .html ». Par exemple ici : « ChuteBD.html »

2.2 – Le fichier CSS :

Il est plus simple, je trouve.
Le principe, c’est d’écrire le nom de ce qu’on veut mettre en forme (qui fait donc référence au fichier html : donc un nom de section entière, ou bien les paragraphes, ou sinon le nom d’identification d’une partie précise, ou bien le nom d’une classe), et ensuite entre {}, on précise ce qu’on veut : largeur, position, couleur, fond, … Là il faut chercher suivant le résultat voulu, il y a presque toujours moyen d’obtenir ce qu’on veut !

Voici le code commenté :

body
{
margin: 0px;

}

(simple donc, le corps aura une marge de zéro pixel)
(on n’est pas obligé de mettre en forme tous les éléments du HTML5, par exemple ici on ne dit rien sur « head »)

(le « # » suivi d’un nom d’identification permet de préciser la mise en forme pour cet élément seulement. Ici on explique que « truc », qui est le nom de ma section principale contenant tous les paragraphes, a une position absolue, est placée à 0 pixel du haut de la fenêtre, à 0 pixel de la gauche de la fenêtre, a une largeur de 748 pixels et une hauteur de 460 pixels. Ça « fabrique » la petite fenêtre dans la page web. On précise son image de fond (celle avec les nuages, en inscrivant l’adresse l’url), et qu’elle devra se répéter indéfiniment à la verticale (sur y -> « repeat-y »). Pour finir, on dit qu’on veut une barre de scroll verticale (sur y -> « scroll »), mais pas horizontale (sur x -> « hidden »). Regardez ci-dessous comment on écrit tout ça)

#truc { position: absolute; top: 0px; left: 0px; width: 748px; height: 460px;
background-image: url(« http://www.galax-bd.fr/wp-content/uploads/2013/06/fondgris.png »);
background-repeat: repeat-y;
overflow-y: scroll;
overflow-x: hidden;
}

(je ne vais pas décrire chaque propriété mais si vous êtes curieux, il suffit de la rechercher sur le net pour avoir l’explication. Si vous vous y connaissez un peu en anglais, vous n’aurez aucune peine à deviner la signification !)

#titre {
position: absolute;
left: 290px;
top: 20px;
z-index: 3;
font-size: 50px;
font-family: Courier New;

text-align: center;
color: white;
text-transform:uppercase;
}

#decor
{
height: 11300px;
background-image: url(« http://www.galax-bd.fr/wp-content/uploads/2013/06/immeuble.png »);
background-repeat: repeat-y;
background-position: 0% 0px;
z-index: 0;
}

(après ça, je précise les positions et coordonnées des images ! Là il faut bien définir quel « paquet » va où. Avec la propriété « z-index », je dis qui s’affiche au-dessus de qui. Les z-index élevés recouvreront ceux d’un indice inférieur. Selon mes images et qui devait se cacher derrière qui, j’ai établi un ordre d’affichage)

#gars
{
position: absolute;
left: 230px;
top: 200px;
z-index: 2;
}

#gif1
{
position: absolute;
left: 260px;
top: 742px;
z-index: 1;
}

#gif1 img {width: 400px;}

(avec « img {width: 400px;} », j’impose à l’image une largeur qui n’est pas celle du fichier d’origine : ça permet de la réduire)

#pensees
{
position: absolute;
left: 60px;
top: 1500px;
z-index: 2;
}

#fille
{
position: absolute;
left: 230px;
top: 3500px;
z-index: 2;
}

#gif2
{
position: absolute;
left: 230px;
top: 4042px;
z-index: 1;
}

#gif2 img {width: 400px;}

#union
{
position: absolute;
left: 230px;
top: 5268px;
z-index: 2;
}

#gif3
{
position: absolute;
left: 230px;
top: 5268px;
z-index: 1;
}

#gif3 img {width: 469px;}

.mininuages img {width: 469px;}

(là, j’utilise une classe, donc je mets un « . » au lieu d’un « # ». Ça va mettre en forme tous les paragraphes de cette classe-là. Ici, ça va réduire toutes les images de nuages en une fois. Ce qui ne m’empêche pas de préciser d’autres choses pour chacun d’entre eux  en utilisant leurs noms d’identification. Ce que je fais d’ailleurs ci-après, en précisant des positions différentes pour chaque nuage)

#m1 {
position: absolute;
left: 230px;
top: 8668px;
z-index: 0;
}
#m2 {
position: absolute;
left: 230px;
top: 9568px;
z-index: 0;
}
#m3 {
position: absolute;
left: 230px;
top: 9660px;
z-index: 0;
}
#m4 {
position: absolute;
left: 230px;
top: 9800px;
z-index: 2;
}

#m5 {
position: absolute;
left: 230px;
top: 10050px;
z-index: 2;
}
#m6 {
position: absolute;
left: 230px;
top: 10100px;
z-index: 0;
}

#n2 {
position: absolute;
left: 510px;
top: 3100px;
z-index: 0;
}
#n3 {
position: absolute;
left: 30px;
top: 4700px;
z-index: 0;
}
#n4 {
position: absolute;
left: 220px;
top: 6300px;
z-index: 2;
}

#n5 {
position: absolute;
left: 230px;
top: 8000px;
z-index: 2;
}

#fin
{
position: absolute;
left: 230px;
top: 10400px;
text-align: center;
z-index: 2;
}

.bulles img {width: 469px;}

#b1 {
position: fixed;
left: 230px;
top: 100px;
z-index: 3;
visibility: hidden;
}

(ah je n’avais pas expliqué encore la position « absolute » ou « fixed ». La « fixed », utilisée ici pour les bulles de dialogue, permet de donner une position par rapport à l’écran (donc insensible au défilement avec la souris). La bulle ne bouge pas par rapport aux autres éléments ! une position « absolute », qui concerne tous les autres éléments que j’ai introduits avant, donne une position par rapport au coin en haut à gauche de la page web. Et par exemple, pour trouver une image décalée de 5000 pixels par rapport au haut de la page, il va falloir la faire défiler… Je vais justement par la suite modifier les « absolute » en « fixed » et inversement pour les gifs animés au cours du défilement, grâce au code Javascript)

(remarquez bien la visibilité « hidden » ici, ce qui veut dire que l’image est cachée par défaut. On modifiera ça avec le Javascript aussi)

#b2 {
position: fixed;
left: 230px;
top: 100px;
z-index: 3;
visibility: hidden;
}
#b3 {
position: fixed;
left: 230px;
top: 100px;
z-index: 3;
visibility: hidden;
}
#b4 {
position: fixed;
left: 230px;
top: 100px;
z-index: 3;
visibility: hidden;
}

#generique {
position: absolute;
left: 360px;
top: 11000px;
z-index: 3;
font-size: 30px;
font-family: Courier New;
text-align: center;
color: white;
}

En gros, ici, ce qui est important à retenir, ce sont les coordonnées indiquées avec « left » et « top », la position « absolute » ou « fixed », et la visibilité avec … « visibility ».

On enregistre le fichier avec l’extension « .css », et surtout avec le nom qu’on a déclaré dans le premier en html5, au début, dans la partie « head ». Donc ici : « chutestyle.css ». On appelle ça une « feuille de style ». C’est pour ça que j’ai mis « style » dans le nom.

2.3 – Le code Javascript :

Oups, Aegir est absent, alors je (Galax) reprends la suite de l’explication. Désolé, il y aura quelques lacunes, si vous avez des questions, n’hésitez pas à me contacter.

Le code javascript va permettre de créer des interactions en fonction de la position de la barre de défilement : les images peuvent bouger ou non en fonction du scroll, apparaître ou disparaître, ou encore défiler à différentes  vitesses.

Nous avons rassemblé les éléments grâce au HTML, nous leur avons donné une mise en forme fixe grâce au CSS, maintenant, dans fichier javascript, nous allons modifier la mise en forme des éléments en fonction de la position de la barre de scroll.

Voici le code commenté :
document.getElementById(‘truc’).onscroll = function() {
var scr = 0; pos = 0
if( typeof( document.getElementById(‘truc’).pageYOffset ) == ‘number’ ) {
//Netscape compliant
scr = document.getElementById(‘truc’).pageYOffset;
} else if( document.getElementById(‘truc’) && document.getElementById(‘truc’).scrollTop ) {
//DOM compliant
scr = document.getElementById(‘truc’).scrollTop;
} else if( document.getElementById(‘truc’) && document.getElementById(‘truc’).scrollTop ) {
//IE6 standards compliant mode
scr = document.getElementById(‘truc’).scrollTop;
}
//    document.getElementById(‘scroll’).innerHTML = scr;

Tout ce paragraphe a servi à caler les images dans la bonne position, car il nous informe de l’avancement du scroll en nombre de pixels. Les « // » rendent le code inactif, tout en pouvant le conserver si besoin.

if(scr>710 && scr<=2500) {
document.getElementById(‘gif1′).style.position = ‘fixed';
document.getElementById(‘gif1′).style.top = ‘100px';

Ici, nous disons que l’élément « gif1″ doit rester immobile (position = fixed) dans la fenêtre quand le scroll est compris entre 680 et 2500 pixels.

}else if(scr<=710) {
document.getElementById(‘gif1′).style.position = ‘absolute';
document.getElementById(‘gif1′).style.top = ‘770px';
} else if(scr>2500) {
document.getElementById(‘gif1′).style.position = ‘absolute';
document.getElementById(‘gif1′).style.top = ‘2600px';
};

Ici, nous disons qu’il en va autrement si le scroll est inférieur à 710 :
Dans ce cas, l’image aura une position dans la page, c’est à dire qu’elle bougera comme dans une page classique quand on fait défiler la barre de scroll. Même chose si le scroll est supérieur à 2500.

Pour les paragraphes suivants, c’est la même chose : on définit pour chaque image en fonction de la position du scroll, si elle doit défiler ou rester fixe dans la fenêtre.

if(scr>3942 && scr<=5168) {
document.getElementById(‘gif2′).style.position = ‘fixed';
document.getElementById(‘gif2′).style.top = ‘100px';
}else if(scr<=3942) {
document.getElementById(‘gif2′).style.position = ‘absolute';
document.getElementById(‘gif2′).style.top = ‘4042px';
} else if(scr>5168) {
document.getElementById(‘gif2′).style.position = ‘absolute';
document.getElementById(‘gif2′).style.top = ‘5268px';
};

if(scr>5168 && scr<=10300) {
document.getElementById(‘gif3′).style.position = ‘fixed';
document.getElementById(‘gif3′).style.top = ‘100px';
}else if(scr<=5168) {
document.getElementById(‘gif3′).style.position = ‘absolute';
document.getElementById(‘gif3′).style.top = ‘5268px';
} else if(scr>10300) {
document.getElementById(‘gif3′).style.position = ‘absolute';
document.getElementById(‘gif3′).style.top = ‘10400px';
};

document.getElementById(‘decor’).style.backgroundPosition = ‘0% ‘ + scr/1.5 + ‘px';
document.getElementById(‘truc’).style.backgroundPosition = ‘0% ‘ + scr/-10 + ‘px';

Ici nous définissons une vitesse de défilement pour le fond.
if(scr>5800 && scr<=6300) {
document.getElementById(‘b1′).style.visibility = ‘visible';
}else if(scr<=5800) {
document.getElementById(‘b1′).style.visibility = ‘hidden';
} else if(scr>6300) {
document.getElementById(‘b1′).style.visibility = ‘hidden';
};

Ici, c’est une autre fonction à laquelle nous faisons appel : en fonction de la position du scroll, une image va apparaître (‘visible’) ou disparaître (‘hidden’). De même pour les paragraphes suivants.

if(scr>6400 && scr<=7000) {
document.getElementById(‘b2′).style.visibility = ‘visible';
}else if(scr<=6400) {
document.getElementById(‘b2′).style.visibility = ‘hidden';
} else if(scr>7000) {
document.getElementById(‘b2′).style.visibility = ‘hidden';
};

if(scr>7360 && scr<=7900) {
document.getElementById(‘b3′).style.visibility = ‘visible';
}else if(scr<=7360) {
document.getElementById(‘b3′).style.visibility = ‘hidden';
} else if(scr>7900) {
document.getElementById(‘b3′).style.visibility = ‘hidden';
};

if(scr>7960 && scr<=8300) {
document.getElementById(‘b4′).style.visibility = ‘visible';
}else if(scr<=7960) {
document.getElementById(‘b4′).style.visibility = ‘hidden';
} else if(scr>8300) {
document.getElementById(‘b4′).style.visibility = ‘hidden';
};

Dans les paragraphes suivants, on ne parle plus seulement de code, mais également de mathématiques, puisqu’on définit différentes vitesses de défilement
if(scr>8668-460 && scr<=10100+241) {
pos1 = scr*0.67 + 3158;
    document.getElementById(‘m1′).style.top =  pos1 + ‘px';
} else if(scr<=8668-460){
document.getElementById(‘m1′).style.top = ‘8668px';
} else if(scr>10100+241){
document.getElementById(‘m1′).style.top = ‘8668px';
};

if(scr>9568-460 && scr<=10100+241) {
pos2 = scr*0.43 + 5638;
document.getElementById(‘m2′).style.top =  pos2 + ‘px';
} else if (scr<=9568-460){
document.getElementById(‘m2′).style.top = ‘9568px';
} else if (scr>10100+241){
document.getElementById(‘m2′).style.top = ‘9568px';
};

if(scr>9800-460 && scr<=9700+241) {
pos4 = scr*-0.17 + 11354;
document.getElementById(‘m4′).style.top =  pos4 + ‘px';
} else if (scr<=9800-460){
document.getElementById(‘m4′).style.top = ‘9800px';
} else if (scr>9700+241){
document.getElementById(‘m4′).style.top = ‘9800px';
};

if(scr>10050-460 && scr<=10100+241) {
pos5 = scr*0.066 + 9411;
document.getElementById(‘m5′).style.top =  pos5 + ‘px';
} else if (scr<=10050-460){
document.getElementById(‘m5′).style.top = ‘10050px';
} else if (scr>10100+241){
document.getElementById(‘m5′).style.top = ‘10050px';
};

if(scr>10100-460 && scr<=10200+241) {
pos6 = scr*0.125 + 8896;
document.getElementById(‘m6′).style.top =  pos6 + ‘px';
} else if (scr<=10100-460){
document.getElementById(‘m6′).style.top = ‘10100px';
} else if (scr>10200+241){
document.getElementById(‘m6′).style.top = ‘10100px';
};

};

On enregistre le fichier avec l’extension « .js », et en respectant bien le nom auquel on fait référence dans les fichiers CSS et HTML.

Ouf, on est arrivé au bout !

Et voilà, bon courage pour vos essais !

A bientôt,

Aegir et Galax

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *


Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>