Recommandations  :
 quand vous allez ranger votre matériel, pensez à nommer vos tuiles, papiers ou musique en les renommant si besoin de façon à éviter les accents et les espaces. Faites aussi attention si vous mettez des majuscules, elles devront aussi être dans la source de votre page.


On commence


Cette flèche pour marquer votre ligne

Clic gauche pour la déplacer



Pour ce second cours, nous allons débuter comme le cours précédent, puis nous allons rajouter

une image au centre et un texte : cela va nous permettre de découvrir de nouvelles balises, tout en révisant ce

que nous avons appris durant le cours 1.


Ciquez ici pour visualiser ma page


Matériel :  

- Une image ou un tag d'une dimension raisonnable 

- Une tuile assortie à votre image

- Une musique en format midi


Matériel ici

1- Créer un nouveau dossier et le nommer Cours2.

Ranger votre matériel dans ce dossier.

Voici mon dossier Cours2 et son contenu



                     

2- Ouvrir Script Edit.

Faire  Fichier ===> Enregistrer sous




Repérer votre dossier Cours2 et enregistrer cette page html dedans en lui donnant un nom

3- Insertion de la tuile en fond de page.

Dans Script-Edit, mêttre en surbrillance ( en bleu), la première balise <body>



Copier cette ligne
<body background="NomDeLaTuile.jpg">

Retour dans Script Edit.

Clic droit sur la balise en surbrillance, puis coller.

Changer NomDeLaTuile par le nom de votre tuile.

"NomDeLaTuile.jpg"  devient   "TuileDouceur.jpg"




4- La scrollbar

Comme nous l' avons vu au Cours1, nous allons insérer la scrollbar.

 Copier ce code.


<style>
BODY{
scrollbar-base-color:#xxxxx;
scrollbar-track-color:#xxxxx;
scrollbar-shadow-color:#xxxxx;
scrollbar-arrow-color:#xxxxxx;
background-color: #xxxxxx
}
  </style>

Coller après la 1 ère  balise HEAD

Puis changer les #xxxxxx par vos couleurs assorties à la tuile, en n'oubliant surtout pas de laisser les points

virgules à leur place. Comme cela par exemple

5- Insertion de la musique.

Copier cette ligne 
<bgsound src="NomDeLaMusique.mid" loop="-1"></bgsound>

Et coller entre les deux balises <head> et </head>

Renommer" NomDeLaMusique", par le nom de votre musique, en respectant les majuscules.

Par exemple:    NomDeLaMusique.mid  ===>  IsabelleBoulay.mid





6- Nommer la page.

 Entre les deux balises , écrire le titre de votre page.

 Jusqu'ici, vous devez avoir ceci



7- Insertion de l'image centrée

Copier ce code, puis collez le entre les balises <body>  et </body>, c'est à dire vers la ligne 6.

<p align="center"><img src="NomDeLImage.jpg" height="hauteur" width="largeur"></p>

Comme cela




Changer NomDeLImage par le nom de votre image.

Par exemple NomDeLImage ====> Douceur

 Indiquer la hauteur et la largeur en pixels ( height = hauteur ; width = largeur)

Voici ce que j'obtiens.



Cliquer sur " aperçu" en bas de Script Edit et visualiser la page.

Pour descendre un peu l'image, nous allons insérer des "sauts de ligne" avec la balise  <br>

Au dessus de l'insertion de votre image , ajouter 1 ou plusieurs balises  <br>

selon la taille de votre image.

Pour l' ajouter, copiez la balise ici :    <br>

Pour mon exemple, j' ai ajouté 3 balises ; comme ceci sur la ligne 16.



8- Insertion d'un texte.

 Nous allons insérer notre texte sous notre image.

<p align="center"><font face="Arial" color="#000000" size="10">

Copier cette ligne et coller là sous votre insertion d'image, c'est à dire sur la ligne 17 environ.
Comme cela:



Elle va vous servir à définir la police que vous souhaitez utiliser pour écrire, sa taille et sa couleur.

Pour ma page, j' ai choisi la police Renaissance, taille 12 et une couleur assortie à ma scrollbar.

Voici ce que j'obtiens.

Ecrire ensuite le texte souhaité.

Ajouter une balise <br> à chaque fois que vous souhaitez aller à la ligne.

Comme cela

9- Ajout d'un script.

Nous allons utiliser le même script que pour le premier cours pour faire défiler la tuile,

mais cette fois ci de haut en bas.
<script language="vbscript">x=0
y=0
x1=0
y1=0
x2=0
y2=0
x3=0
y3=0

Sub Window_Onload()
Clearinterval (tvo)
tvo=Setinterval ("scroll", 64)
end sub


Sub scroll()
x=x
y=y+1
document.body.style.backgroundPosition=x&" "&y
End sub
Sub window_onresize()
window.location.reload()
End Sub
</script>



Copier puis coller le entre les deux balises <body> et </body> après

l'insertion de votre image et de votre texte, c'est à dire vers la ligne 25.

10- Visualiser votre page et enregistrer votre travail.

Votre page est terminée.