1 / 34

Approfondissement de la réalisation d'un site web

Approfondissement de la réalisation d'un site web. 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. SECTION 1 : Code HTML. nature.html. <html> <head>

hypatia
Download Presentation

Approfondissement de la réalisation d'un site web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Approfondissement de la réalisation d'un site web

  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. nature.html <html> <head> <title>Untitled Document</title> </head> <body bgcolor="#FFFFFF" text="#000000"> </body> </html> Du code HTML ! HTML signifie: HyperText Markup Language <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 BROWSER qu’il y a écriture de code HTML. Il faut refermer la balise à la fin du code HTML et cela se fait avec l’addition du caractère / tel que </html>.

  5. nature.html <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.

  6. nature.html <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 un autre titre tel que “La nature”. <html> <head> <title>La nature</title> </head> <body bgcolor="#FFFFFF" text="#000000"> </body> </html>

  7. nature.html <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 page est assigné à la couleur #FFFFFF qui est le blanc. Aussi, text="#000000“ signifie que le texte est assigné à la couleur #000000 qui est noir. Site démontrant les codes de couleurs hexadécimales: http://www.yoyodesign.org/outils/ncolor/ncolor8.html.fr

  8. nature.html <html> <head> <title>La nature</title> </head> <body bgcolor="#FFFFFF" text="#000000"> <table width="75%" border="0"> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table> </body> </html> Création d’une table avec la balise <table> contenant une grandeur totale de 75% de la page et une bordure de 0. <tr> représente une ligne <td> représente une colonne &nbsp; représente une espace

  9. nature.html <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> Ligne Colonne Colonne Colonne Formation d’une ligne et de 3 colonnes contenant du texte.

  10. nature.html <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 lignes et de 3 colonnes

  11. nature.html <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> Modification du texte à la ligne 1 et colonne 2. Insertion de l’image image3.gif dans le tableau à la ligne 2 et colonne 1.

  12. nature.html <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.

  13. nature.html <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.

  14. nature.html <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 de la page pour créer l’ouverture d’une nouvelle page.

  15. nature.html <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.

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

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

  18. style.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;} 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 le curseur est sur le lien. L’option background dans “hover” détermine la couleur de fond sur le lien quand le curseur est sur le lien. L’option color dans “visited” détermine la couleur du lien quand il a déjà été visité.

  19. nature.html <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 fichier style.css

  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. nature.html <html> <head> <title>La nature</title> <script language="JavaScript"> <!-- alert("La section des arbres"); --> </script> </head> <body bgcolor="#FFFFFF" text="#000000"> </body> </html> <script> indique que c’est le langage Javascript suivi de code script. Une boîte apparaîtra indiquant le texte "La section des arbres".

  25. nature.html <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> Déclaration d’une variable et attribution d’une valeur. Appel de la variable dans la fonction 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’appelant Information. 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. nature.html <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 java et on s’assure que tous les fichiers de l’applet soit dans le même répertoire que le fichier .html les référant. (exemple de fichier: monApplet.class).

  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.

More Related