1

2 PLAN DE LA PRÉSENTATION - SECTION 1 : Code HTML - SECTION 2.1. : CSS (Méthode 1) - SECTION 2.2. : CSS (Méthode 2) - SECTION 3 : JavaScript - SECTION 4 : Applets Java

3 SECTION 1 : Code HTML

4 Untitled Document est un exemple de balise entrante. est un exemple de balise fermante. est la première balise dune page HTML, cela avertira le BROWSER quil y a écriture de code HTML. Il faut refermer la balise à la fin du code HTML et cela se fait avec laddition du caractère / tel que. nature.html Du code HTML ! HTML signifie: HyperText Markup Language

5 Untitled Document La balise sert pour quelques applications tels que le titre de la page. Aussi, il peut y avoir du scriptage JavaScript dans la section. La balise est le coeur du site où il y aura insertion de texte, dimages, de tableaux, de liens entre les pages, etc. nature.html

6 Untitled Document Pour changer le titre, il suffit tout simplement de changer Untitled Document par un autre titre tel que La nature. La nature nature.html

7 La nature Il est possible décrire de linformation supplémentaire dans la balise. Dans ce cas, bgcolor="#FFFFFF" signifie que la couleur de fond de la page est assigné à la couleur #FFFFFF qui est le blanc. Aussi, text="# signifie que le texte est assigné à la couleur # qui est noir. Site démontrant les codes de couleurs hexadécimales: nature.html

8 La nature Création dune table avec la balise contenant une grandeur totale de 75% de la page et une bordure de 0. représente une ligne représente une colonne représente une espace nature.html

9 La nature Ligne 1, Colonne 1 Ligne 1, Colonne 2 Ligne 1, Colonne 3 Ligne 2, Colonne 1 Ligne 2, Colonne 2 Ligne 2, Colonne 3 Ligne Colonne Formation dune ligne et de 3 colonnes contenant du texte. nature.html

10 La nature Ligne 1, Colonne 1 Ligne 1, Colonne 2 Ligne 1, Colonne 3 Ligne 2, Colonne 1 Ligne 2, Colonne 2 Ligne 2, Colonne 3 Formation dun tableau de 2 lignes et de 3 colonnes nature.html

11 La nature Ligne 1, Colonne 1 Les arbres Ligne 1, Colonne 3 Ligne 2, Colonne 2 Ligne 2, Colonne 3 Insertion de limage image3.gif dans le tableau à la ligne 2 et colonne 1. Modification du texte à la ligne 1 et colonne 2. nature.html

12 La nature Ligne 1, Colonne 1 Les arbres Ligne 1, Colonne 3 Ligne 2, Colonne 2 Ligne 2, Colonne 3 Spécification de la grandeur dimage. nature.html

13 La nature Lien UQAM Les arbres Ligne 1, Colonne 3 Ligne 2, Colonne 2 Ligne 2, Colonne 3 Création dun lien Internet. nature.html

14 La nature Lien UQAM Les arbres Ligne 1, Colonne 3 Ligne 2, Colonne 2 Ligne 2, Colonne 3 Création de la destination de la page pour créer louverture dune nouvelle page. nature.html

15 La nature Lien UQAM Les arbres Ligne 1, Colonne 3 Ligne 2, Colonne 2 Ligne 2, Colonne 3 Création dun lien sur limage. nature.html

16 DHTML signifie: Dynamic HyperText Markup Language. Le D signifie que les pages web sont dynamiques, cest-à-dire quil y a ajout de CSS, JavaScript, DOM.

17 SECTION 2.1. : CSS (Méthode 1)

18 a:link {color: #006600; text-decoration: none;} a:hover {color: #000099; text-decoration: none; background-color: #CCCCCC} a:visited {color: #FF0000; text-decoration: none;} Création dun fichier sous le nom de style.css. Note: Ce fichier pourrait être créer dans un logiciel tel que Notepad. Loption color dans link détermine la couleur du lien originalement (sans jamais avoir cliqué dessus). Loption color dans hover détermine la couleur du lien quand le curseur est sur le lien. Loption background dans hover détermine la couleur de fond sur le lien quand le curseur est sur le lien. Loption color dans visited détermine la couleur du lien quand il a déjà été visité. style.css

19 La nature Lien UQAM Les arbres Ligne 1, Colonne 3 index.html appelle le fichier style.css nature.html

20 SECTION 2.2. : CSS (Méthode 2)

21 nature.html La nature <!-- a:link {color: #006600; text-decoration: none;} a:hover {color: #000099; text-decoration: none; background-color: #CCCCCC;} a:visited {color: #FF0000; text-decoration: none;} --> Lien UQAM Les arbres Ligne 1, Colonne 3 CSS directement dans le

22 nature.html La nature <!-- p {color: #660033} --> La nature contient plusieurs éléments. est pour écrire un paragraphe

23 SECTION 3 : JavaScript

24 La nature <!-- alert("La section des arbres"); --> nature.html indique que cest le langage Javascript suivi de code script. Une boîte apparaîtra indiquant le texte "La section des arbres".

25 La nature <!-- var arbre = "La section des arbres"; alert(arbre); --> nature.html Déclaration dune variable et attribution dune valeur. Appel de la variable dans la fonction alert.

26 nature.html La nature <!-- var a = 5; var b = 10; alert(a+b); --> Affichage du résultat de a+b.

27 nature.html La nature <!-- var a = 1; while (a <= 5) { alert(a); a++; } --> Affichage les nombres 1,2,3,4,5.

28 nature.html La nature <!-- var a = 1; while (a <= 5) { alert(a+5); a++; } --> Affichage les nombres 6,7,8,9,10.

29 nature.html La nature <!-- --> Pour en savoir plus sur les arbres <input type="button" value="Information" onclick=alert("Arbres");> Création dun bouton sappelant Information. Lorsquon clique dessus, ça va afficher "Arbres".

30 nature.html La nature <!-- function arbres() { alert("Les arbres sont des éléments de la nature.") } --> Pour en savoir plus sur les arbres <input type="button" value="Information" onclick=arbres();> Création de la fonction arbres Appel de la fonction arbres

31 SECTION 4 : Applets Java

32 La nature <applet code=monApplet.class"align="baseline width="320" height="350"> …………………………………. On insère le code de lapplet java et on sassure que tous les fichiers de lapplet soit dans le même répertoire que le fichier.html les référant. (exemple de fichier: monApplet.class). nature.html

33 Exemples en classe: 1 - Exemple de rotation 2 - Exemple de menu

34 Ce guide a été réalisé par Denis Pedneault (auxiliaire d'enseignement) dans le cadre du cours FLM4010, Jocelyne Martin (chargée de cours), session Hiver 2005 à l'UQÀM.