Les bases : HTML, Javascript Le B.A. BA Master Expertise et Ingénierie des Systèmes d'Information en Santé UEOPT 6 : Techniques de programmation pour Internet © Gérard Soula, LERTIM, Faculté de Médecine Marseille HTML (HyperText Markup Language) Langage Principes description d'une page : structure et contenu langage interprété par un navigateur indépendant du matériel Normalisé (W3C) : versions 3.2., 4.0, …… texte brut non formaté (fichier .htm ou .html) balise (<I> ceci est un essai </I>) Production d'HTML texte brut : bloc notes éditeurs HTML : Front Page, Dreamweaver, … exportation : Word, PowerPoint,... Structure d'une page HTML <HTML> <HEAD> <TITLE>Titre de la page </TITLE> <META ……………..> </HEAD> <BODY > Le contenu de la page </BODY> </HTML> La zone META Contient de la méta-information code caractères utilisés utilisée par les moteurs de recherche Exemples : <meta NAME="keywords" LANG="fr" CONTENT="pédagogie"> <meta NAME="keywords" LANG="fr" CONTENT="université médicale virtuelle"> <meta NAME="author" content="Gérard Soula"> <meta HTTP-EQUIV="Content-Type" content="text/html; charset=iso-8859-1"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> les objets HTML Texte Liens Images Tableaux Cadres Formulaires ……. Le texte Gras Italique Centrage Aligner à droite <strong>test</strong> <em>test</em> <div align="center">test</div> <p align="right">test</p> Pas de tabulation !!!! Une page HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Document sans nom</title> </head> <body> <p><strong>Texte en gras</strong></p> <p><em>Texte en italique</em></p> <p align="center">Texte centr&eacute;</p> <p align="justify">Texte align&eacute; &agrave; droite </p> </body> </html> Le texte : police <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Master EISIS</title> <style type="text/css"> <!-.Style1 { font-size: 18px; font-weight: bold; } --> </style> </head> <body> <p class="Style1">texte</p> </body> Le texte : Couleur <body> <font color="#FF0000">test</font> </body> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Document sans nom</title> <style type="text/css"> <!-.Style18 {color: #FF0000} --> </style> </head> <body> <span class="Style18">test</span> </body> Le texte : Taille <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Master EISIS</title> <style type="text/css"> <!-.Style21 {font-size: 14px} --> </style> </head> <body> <span class="Style21">test</span> </body> Les listes <body> <ul> <li>anglais</li> <li>espagnol</li> <li>français</li> <li>italien</li> </ul> </body> <body> <ol> <li>anglais</li> <li>espagnol</li> <li>français</li> <li>italien</li> </ol> </body> Liens Lien local au site : même page - même serveur <a href="SIS5.html">UE SIS5</a> <a href="SIS5.html" target="_blank">UE SIS5</a> Lien externe : autre page - autre serveur <a href="http://ent.univmed.fr">ENT</a> Liens Lien interne à une même page (ancre nommée) <body> <p>accueil</p> <p><a href="#chap1">chapitre1</a><br /> chapitre2<br /> chapitre3</p> <p><a name="chap1" id="chap1"></a>Chapitre 1 </p> <p>ce texte </p> </body> Mailto <a href="mailto:[email protected]">écrivez moi</a> Images Format des images : GIF, JPEG, PNG Images (en dehors de la page) <img src="palette.jpg" alt="Palette" /> Mise en page taille, alignement avec du texte, bordure <img src="palette.jpg" alt="Palette" width="124" height="81" /> Image-Lien <a href="SIS5.html"><img src="palette.jpg" alt="Palette" border="0" /></a> Images cliquable définition de zones : rectangle, cercle, polygone une action par zone oreille.htm defense.htm trompe.htm Images cliquables <body> <img src="elephant.gif" alt="test" width="167" height="80" border="0" usemap="#Map" /> <map name="Map" id="Map"><area shape="circle" coords="43,21,16" href="oreille.htm" /> <area shape="circle" coords="140,27,12" href="defense.htm" /> <area shape="rect" coords="89,37,98,61" href="trompe.htm" /> </map> </body> Vidéo, son Formats film : MPEG, MOV, AVI sons : AU, AIF, WAV, MIDI, MP3, … Une règle : indiquer la taille voir un cycle cardiaque (3 Mo) Bien gérer la compression / débit Internet Les formats Windows Media, Real, Quicktime, DIVX Codecs Tableaux Pour la mise en page Graphisme texte bordure, espaces Elément d'une cellule texte, image, lien, ... Tableaux Ligne Colonne <table width="200" border="1"> <tr> <td>un</td> <td>deux</td> <td>trois</td> </tr> <tr> <td>quatre</td> <td>cinq</td> <td>six</td> </tr> </table> Contenu cellule Les cadres Ecran divisé en plusieurs zones chaque zone = une "page" HTML affichage indépendant Liaison entre les CADRES Les cadres Master EISIS Présentation UE SIS3 UESIS Présentation du master ……. plusieurs pages pages html <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Document sans nom</title> </head> <frameset rows="*" cols="187,525"> <frame src="menu.html" /> <frame src="UESIS5.html" /> </frameset> <noframes><body> </body> </noframes> Les formulaires Champ texte Boutons radio masculin féminin Pour : - Contrôles saisie - Interrogation base de données Cases à cocher Nom : pomme 7 Cerise 7 Orange 7 Menu déroulant Comment : - Programmation - Javascript, ASP, PHP, ……… Formulaire : champ texte Traitement (code.php) <form id="form1" name="form1" method="post" action=""> <label>Votre nom : <input type="text" name="nom" /> </label> </form> Formulaire : boutons radio <form id="form1" name="form1" method="post" action=""> <label> <input type="radio" name="radiobutton" value="mauvais" /> Mauvais</label> <br /> <label> <input type="radio" name="radiobutton" value="moyen" /> Moyen</label> <br /> <label> <input type="radio" name="radiobutton" value="tresbeau" /> Très beau</label> </form> Formulaire : cases à cocher <form id="form1" name="form1" method="post" action=""> <label> <input type="checkbox" name="checkbox" value="checkbox" /> Glace</label> <br /> <label> <input type="checkbox" name="checkbox2" value="checkbox" /> Biscuit</label> <br /> <label> <input type="checkbox" name="checkbox3" value="checkbox" /> Chocolat</label> <br /> <label> <input type="checkbox" name="checkbox4" value="checkbox" /> Fruit</label> <label></label> </form> Formulaire : menu déroulant <form id="form1" name="form1" method="post" action=""> <label>Choisissez un pays <select name="select"> <option></option> <option>Europe</option> <option>Asie</option> <option>Afrique</option> <option>Amerique</option> </select> </label> </form> Bouton <input type="submit" name="Submit" value="Envoyer la réponse" /> les feuilles de style CSS Le langage CSS spécifie l'apparence des blocs de texte ou image, peut contrôler d'une manière très précise le positionnement des objets, les bordures, les marges … Intérêt majeur : changer la mise en forme d'une page HTML sans en modifier son contenu La norme est consultable sur le site du consortium Web (www.w3.org) Les navigateurs n'implémentent qu'une partie du langage Définition des feuilles de style CSS En interne, dans l'entête du fichier HTML <style type="text/css"> <!-.Style1 {font-family: Arial, Helvetica, sans-serif} --> </style> </head> En externe, dans un fichier indépendant du fichier HTML <link href="mafeuille.css" rel="stylesheet" type="text/css"> De HTML à XHTML HTML (jusqu'à HTML 4.x ) a été défini avec SGML (Standard Generalized Markup Language) XHTML (Extensible HyperText Markup Language ) = HTML conforme à XML (Extensible Markup Language) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Document sans nom</title> </head> XHTML Des documents "conformes" (ie "sans fautes" ) XHTML HTML <html> <h1> Texte </h1> </html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Texte</title> <!-- le cas échéant autres éléments de l'entête --> </head> <body> <h1> Texte </h1> </body> </html> Les éditeurs récents génèrent du XHTML Les navigateurs récents comprennent le XHTML Javascript Langage de programmation exécutable sur le poste client Pour effectuer des traitements du côté client (ex : validation d’une saisie) Javascript est interprété (pas de compilateur) Alternative à des exécutables téléchargés (ActiveX, Java) Structure <SCRIPT language="Javascript"> Placez ici le code du script </SCRIPT> <HTML> <HEAD> <TITLE> Voici une page contenant du Javascript</TITLE> </HEAD> <BODY> <SCRIPT language="Javascript"> alert('Bonjour') </SCRIPT> </BODY> </HTML> Les variables Une variable est un objet repéré par son nom pouvant contenir des données qui pourront être modifiées lors de l'exécution du programme Type de données des nombres: entiers ou à virgules des chaînes de caractères (string) des booléens: permettant de vérifier une condition (true : si le résultat est vrai ou false : lors d'un résultat faux des variables de type null: un mot caractéristique pour indiquer que la variable ne contient aucune donnée Exemple de variable <SCRIPT language="Javascript"> var MaVariable; var MaVariable2 = 3; MaVariable = 2; document.write(MaVariable*MaVariable2) </SCRIPT> Les évènements Actions de l'utilisateur qui donnent lieu à un traitement Ex : clic de souris, choix dans un menu,….. Association de fonctions aux événements <html> <head> <title>Ouverture d'une boîte de dialogue lors d'un click </title> </head> <body> <a href="javascript:;" onClick="window.alert('à utiliser avec modération');"> Cliquez ici!</a> </body> </html> Exemple d'évènement <html> <head> <title>Modification d'une image lors du passage de la souris</title> </head> <body> <a href="javascript:;" onMouseOver="document.img_1.src='elephant2.gif';" onMouseOut="document.img_1.src='elephant.gif';"> <img name="img_1" src="elephant.gif"> </a> </body> </html> Structure conditionnelle Instructions qui permettent de tester si une condition est vraie ou non if (condition réalisée) { liste d'instructions } else { autre série d'instructions } x=2 if (x==2) {document.write("X vaut 2")} else {document.write("X différent de 2")} for (compteur; condition; modification du compteur) { liste d'instructions } while (condition réalisée) { liste d'instructions } x=1; while (x<=10) {alert(x); x++; } for (i=1; i<6; i++) {alert(i)} Fonction Une fonction permet d'exécuter dans plusieurs parties du programme une même série d'instructions simplifie l'écriture du code Pour utiliser une fonction déclaration de la fonction appel de la fonction Fonction La déclaration d'une fonction function Nom_De_La_Fonction(argument1, argument2, ...) { liste d'instructions } Appel de fonction Nom_De_La_Fonction(); Exemple de fonction <HTML> <HEAD> <SCRIPT language="Javascript"> function Chargement() { alert('Bienvenue sur le site'); } </SCRIPT> </HEAD> <BODY onLoad="Chargement();" > </BODY> </HTML> Fonction et passage de paramètres <HTML> <HEAD> <SCRIPT language="Javascript"> function Affiche(Texte) { alert(Texte); } </SCRIPT> </HEAD> <BODY> <A href="javascript:;" onClick="Affiche('Texte1');">Texte1</A> <A href="javascript:;" onClick="Affiche('Texte2');">Texte2</A> </BODY> </HTML> Au delà d'HTML Plugin (animations), Codecs (vidéo) DHTML Programmation Javascript, ASP, Active X, Applet, Servlet,…. XML séparation de la forme et du fond production automatisée La référence www.w3.org