La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

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.

Présentations similaires


Présentation au sujet: "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."— Transcription de la présentation:

1 1

2 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 3 SECTION 1 : Code HTML

4 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 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 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 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 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 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 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 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 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 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 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 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 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 17 SECTION 2.1. : CSS (Méthode 1)

18 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 19 La nature Lien UQAM Les arbres Ligne 1, Colonne 3 index.html appelle le fichier style.css nature.html

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

21 21 nature.html La nature Lien UQAM Les arbres Ligne 1, Colonne 3 CSS directement dans le

22 22 nature.html La nature La nature contient plusieurs éléments. est pour écrire un paragraphe

23 23 SECTION 3 : JavaScript

24 24 La nature 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 25 La nature nature.html Déclaration dune variable et attribution dune valeur. Appel de la variable dans la fonction alert.

26 26 nature.html La nature Affichage du résultat de a+b.

27 27 nature.html La nature Affichage les nombres 1,2,3,4,5.

28 28 nature.html La nature Affichage les nombres 6,7,8,9,10.

29 29 nature.html La nature Pour en savoir plus sur les arbres Création dun bouton sappelant Information. Lorsquon clique dessus, ça va afficher "Arbres".

30 30 nature.html La nature Pour en savoir plus sur les arbres Création de la fonction arbres Appel de la fonction arbres

31 31 SECTION 4 : Applets Java

32 32 La nature …………………………………. 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