to get the file - Bienvenue sur le site du LERTIM (EA 3283)

Transcription

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 :

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é</p>
<p align="justify">Texte aligné à droite </p>
</body>
</html>
Le texte : police
<head>
<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>
<!-.Style18 {color: #FF0000}
-->
</style>
</head>
<body>
<span class="Style18">test</span>
</body>
Le texte : Taille
<head>
<title>Master EISIS</title>
<!-.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>
</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
<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
<label>
<input type="checkbox" name="checkbox" value="checkbox" />
Glace</label>
<br />
<label>
<input type="checkbox" name="checkbox2" value="checkbox" />
Biscuit</label>
<br />
<label>
Chocolat</label>
<br />
<label>
Fruit</label>
<label></label>
</form>
Formulaire : menu déroulant
<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
<!-.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">
<head>
</head>
XHTML

Des documents "conformes" (ie "sans fautes" )
XHTML
HTML
<html>
<h1>
Texte
</h1>
</html>

<head>
<title>Texte</title>

</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>
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
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)
while (condition réalisée)
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, ...)

Appel de fonction
Nom_De_La_Fonction();
Exemple de fonction
<HTML>
<HEAD>
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