1. 2 plan de la prÉsentation - section 1 : code html - section 2.1. : css (méthode 1) - section...
TRANSCRIPT
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
<html><head><title>Untitled Document</title></head>
<body bgcolor="#FFFFFF" text="#000000"></body></html>
<html> est un exemple de balise entrante.</html> est un exemple de balise fermante.
<html> est la première balise d’une page HTML, cela avertira le BROWSERqu’il y a écriture de code HTML. Il faut refermer la balise à la fin du code HTMLet cela se fait avec l’addition du caractère / tel que </html>.
nature.html
Du code HTML !
HTML signifie:HyperText Markup Language
5
<html><head><title>Untitled Document</title></head>
<body bgcolor="#FFFFFF" text="#000000"></body></html>
La balise <head> sert pour quelques applications tels que le titre de la page.Aussi, il peut y avoir du scriptage JavaScript dans la section <head>.
La balise <body> est le coeur du site où il y aura insertion de texte, d’images,de tableaux, de liens entre les pages, etc.
nature.html
6
<html><head><title>Untitled Document</title></head>
<body bgcolor="#FFFFFF" text="#000000"></body></html>
Pour changer le titre, il suffit tout simplement de changer Untitled Document par unautre titre tel que “La nature”.
<html><head><title>La nature</title></head>
<body bgcolor="#FFFFFF" text="#000000"></body></html>
nature.html
7
<html><head><title>La nature</title></head>
<body bgcolor="#FFFFFF" text="#000000"></body></html>
Il est possible d’écrire de l’information supplémentaire dans la balise <body>.
Dans ce cas, bgcolor="#FFFFFF" signifie que la couleur de fond de la pageest assigné à la couleur #FFFFFF qui est le blanc.
Aussi, text="#000000“ signifie que le texte est assigné à la couleur #000000qui est noir.
Site démontrant les codes de couleurshexadécimales: http://www.yoyodesign.org/outils/ncolor/ncolor8.html.fr
nature.html
8
<html><head><title>La nature</title></head>
<body bgcolor="#FFFFFF" text="#000000"><table width="75%" border="0"> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr></table></body></html>
Création d’une table avec la balise <table> contenant unegrandeur totale de 75% de lapage et une bordure de 0.
<tr> représente une ligne<td> représente une colonne
représente une espace
nature.html
9
<html><head><title>La nature</title></head>
<body bgcolor="#FFFFFF" text="#000000"><table width="75%" border="0" cellpadding="0" cellspacing="0"> <tr> <td>Ligne 1, Colonne 1</td> <td>Ligne 1, Colonne 2</td> <td>Ligne 1, Colonne 3</td> </tr> <tr> <td>Ligne 2, Colonne 1</td> <td>Ligne 2, Colonne 2</td> <td>Ligne 2, Colonne 3</td> </tr></table></body></html>
LigneColonneColonneColonne
Formation d’une ligne et de 3 colonnescontenant du texte.
nature.html
10
<html><head><title>La nature</title></head>
<body bgcolor="#FFFFFF" text="#000000"><table width="75%" border="0" cellpadding="0" cellspacing="0"> <tr> <td>Ligne 1, Colonne 1</td> <td>Ligne 1, Colonne 2</td> <td>Ligne 1, Colonne 3</td> </tr> <tr> <td>Ligne 2, Colonne 1</td> <td>Ligne 2, Colonne 2</td> <td>Ligne 2, Colonne 3</td> </tr></table></body></html>
Formation d’un tableau de 2 ligneset de 3 colonnes
nature.html
11
<html><head><title>La nature</title></head>
<body bgcolor="#FFFFFF" text="#000000"><table width="75%" border="0" cellpadding="0" cellspacing="0"> <tr> <td>Ligne 1, Colonne 1</td> <td>Les arbres</td> <td>Ligne 1, Colonne 3</td> </tr> <tr> <td><img src="image3.gif"></td> <td>Ligne 2, Colonne 2</td> <td>Ligne 2, Colonne 3</td> </tr></table></body></html>
Insertion de l’image image3.gif dansle tableau à la ligne 2 et colonne 1.
Modification du texte à la ligne 1 etcolonne 2.
nature.html
12
<html><head><title>La nature</title></head>
<body bgcolor="#FFFFFF" text="#000000"><table width="75%" border="0" cellpadding="0" cellspacing="0"> <tr> <td>Ligne 1, Colonne 1</td> <td>Les arbres</td> <td>Ligne 1, Colonne 3</td> </tr> <tr> <td><img src="image3.gif" width="400" height="252"></td> <td>Ligne 2, Colonne 2</td> <td>Ligne 2, Colonne 3</td> </tr></table></body></html>
Spécification de la grandeur d’image.
nature.html
13
<html><head><title>La nature</title></head>
<body bgcolor="#FFFFFF" text="#000000"><table width="75%" border="0" cellpadding="0" cellspacing="0"> <tr> <td><a href="http://www.uqam.ca">Lien UQAM</a></td> <td>Les arbres</td> <td>Ligne 1, Colonne 3</td> </tr> <tr> <td><img src="image3.gif" width="400" height="252"></td> <td>Ligne 2, Colonne 2</td> <td>Ligne 2, Colonne 3</td> </tr></table></body></html>
Création d’un lien Internet.
nature.html
14
<html><head><title>La nature</title></head>
<body bgcolor="#FFFFFF" text="#000000"><table width="75%" border="0" cellpadding="0" cellspacing="0"> <tr> <td><a href="http://www.uqam.ca" target="_blank">Lien UQAM</a></td> <td>Les arbres</td> <td>Ligne 1, Colonne 3</td> </tr> <tr> <td><img src="image3.gif" width="400" height="252"></td> <td>Ligne 2, Colonne 2</td> <td>Ligne 2, Colonne 3</td> </tr></table></body></html>
Création de la destination dela page pour créer l’ouvertured’une nouvelle page.
nature.html
15
<html><head><title>La nature</title></head>
<body bgcolor="#FFFFFF" text="#000000"><table width="75%" border="0" cellpadding="0" cellspacing="0"> <tr> <td><a href="http://www.uqam.ca" target="_blank">Lien UQAM</a></td> <td>Les arbres</td> <td>Ligne 1, Colonne 3</td> </tr> <tr> <td><a href="http://www.uqam.ca" target="_blank"> <img src="image3.gif" width="400" height="252" border="0"></a></td> <td>Ligne 2, Colonne 2</td> <td>Ligne 2, Colonne 3</td> </tr></table></body></html>
Création d’un lien sur l’image.
nature.html
16
DHTML signifie: Dynamic HyperText Markup Language.
Le D signifie que les pages web sont dynamiques, c’est-à-dire qu’il y a ajoutde 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 d’un fichier sous le nom de style.css.Note: Ce fichier pourrait être créer dans un logiciel tel que Notepad.
L’option color dans “link” détermine la couleur du lien originalement(sans jamais avoir cliqué dessus).
L’option color dans “hover” détermine la couleur du lien quand lecurseur est sur le lien.
L’option background dans “hover” détermine la couleur de fond sur le lienquand le curseur est sur le lien.
L’option color dans “visited” détermine la couleur du lien quand il a déjàété visité.
style.css
19
<html><head><title>La nature</title><link rel="stylesheet" href="style.css" type="text/css"></head>
<body bgcolor="#FFFFFF" text="#000000"><table width="75%" border="0" cellpadding="0" cellspacing="0"> <tr> <td><a href="http://www.uqam.ca" target="_blank">Lien UQAM</a></td> <td>Les arbres</td> <td>Ligne 1, Colonne 3</td> </tr></table></body></html>
index.html appelle le fichierstyle.css
nature.html
20
SECTION 2.2. : CSS (Méthode 2)
21
nature.html
<html><head><title>La nature</title><style type="text/css"><!--a:link {color: #006600; text-decoration: none;}a:hover {color: #000099; text-decoration: none; background-color: #CCCCCC;}a:visited {color: #FF0000; text-decoration: none;}--></style></head><body bgcolor="#FFFFFF" text="#000000"><table width="75%" border="0" cellpadding="0" cellspacing="0"> <tr> <td><a href="http://www.uqam.ca" target="_blank">Lien UQAM</a></td> <td>Les arbres</td> <td>Ligne 1, Colonne 3</td> </tr></table></body></html>
CSS directement dans le <head>
22
nature.html
<html><head><title>La nature</title><style type="text/css"><!--p {color: #660033} --></style></head>
<body bgcolor="#FFFFFF" text="#000000"><p>La nature contient plusieurs éléments.</p></body></html>
<p> est pour écrire un paragraphe
23
SECTION 3 : JavaScript
24
<html><head><title>La nature</title><script language="JavaScript"><!--alert("La section des arbres");--></script></head>
<body bgcolor="#FFFFFF" text="#000000">
</body></html>
nature.html
<script> indique que c’est le langageJavascript suivi de code script.
Une boîte apparaîtra indiquant le texte"La section des arbres".
25
<html><head><title>La nature</title><script language="JavaScript"><!--var arbre = "La section des arbres";alert(arbre);--></script></head>
<body bgcolor="#FFFFFF" text="#000000">
</body></html>
nature.html
Déclaration d’une variable etattribution d’une valeur.
Appel de la variable dans lafonction alert.
26
nature.html
<html><head><title>La nature</title><script language="JavaScript"><!--var a = 5;var b = 10;alert(a+b);--></script></head>
<body bgcolor="#FFFFFF" text="#000000">
</body></html>
Affichage du résultat de a+b.
27
nature.html
<html><head><title>La nature</title><script language="JavaScript"><!--var a = 1;
while (a <= 5){alert(a);a++;}--></script></head>
<body bgcolor="#FFFFFF" text="#000000">
</body></html>
Affichage les nombres 1,2,3,4,5.
28
nature.html
<html><head><title>La nature</title><script language="JavaScript"><!--var a = 1;
while (a <= 5){alert(a+5);a++;}--></script></head>
<body bgcolor="#FFFFFF" text="#000000">
</body></html>
Affichage les nombres 6,7,8,9,10.
29
nature.html
<html><head><title>La nature</title><script language="JavaScript"><!--
--></script></head>
<body bgcolor="#FFFFFF" text="#000000"><p>Pour en savoir plus sur les arbres <input type="button" value="Information" onclick=alert("Arbres");></p></body></html>
Création d’un bouton s’appelantInformation. Lorsqu’on clique dessus,ça va afficher "Arbres".
30
nature.html
<html><head><title>La nature</title><script language="JavaScript"><!--function arbres(){alert("Les arbres sont des éléments de la nature.")}--></script></head>
<body bgcolor="#FFFFFF" text="#000000"><p>Pour en savoir plus sur les arbres <input type="button"value="Information" onclick=arbres();></p></body></html>
Création de la fonction arbres
Appel de la fonction arbres
31
SECTION 4 : Applets Java
32
<html><head><title>La nature</title><link rel="stylesheet" href="style.css" type="text/css"></head>
<body bgcolor="#FFFFFF" text="#000000"><table width="75%" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <div align="center"><font color="#FFFFFF" size="4"> <applet code=“monApplet.class"align="baseline“ width="320" height="350"> …………………………………. </applet></font></div> </td> </tr></table></body></html>
On insère le code de l’applet javaet on s’assure que tous les fichiersde l’applet soit dans le mêmerépertoire que le fichier .html les référant. (exemple de fichier: monApplet.class).
nature.html
33
Exemples en classe:
1 - Exemple de rotation2 - Exemple de menu
34
Ce guide a été réalisé parDenis Pedneault (auxiliaire d'enseignement)
dans le cadre du cours FLM4010,Jocelyne Martin (chargée de cours),session Hiver 2005 à l'UQÀM.