Support de cours téléchargeable au format PDF Fichier

Transcription

support de cours
Web Dynamique – Web Mapping
cours n°2
La page web sur le poste client,
premiers pas en HTML,
CSS et javascript
Emmanuel Fritsch – octobre 2007
page web sur le poste client - v0.5
1/29
1 Introduction
Objectifs
Pour faire une page internet, vous pouvez passer par un éditeur de page, comme
Dreamweaver ou Nvu. Ces outils vont vous fournir des pages agréables à regarder sur votre
navigateur, mais difficiles à modifier, car le code généré automatiquement est complexe et
verbeux. Si vous souhaitez adapter ensuite ces pages pour faire du web dynamique, vous
devez commencer par vous plonger dans le code HTML de la page statique.
L’objectif de ce cours n’est pas de vous apprendre à faire des pages statiques avec un éditeur
de page web, mais de vous faire découvrir et pratiquer le langage HTML, et ses dépendances,
CSS et javascript :
 HTML est le langage qui structure le contenu d’une page Web
 CSS va nous permettre de définir le rendu graphique de ce contenu
 Javascript est le langage de programmation qui va permettre d’interagir avec la page et
d’en modifier le contenu, sans avoir à passer par le serveur.
Méthodes
Pour tirer le maximum de ce cours, vous êtes incités à manipuler les
exemples de code qui vous seront présentés, à les modifier pour vous faire
vos propres exemples.
Matériel
Pour faire les exercices du cours, vous devez disposer d’un navigateur (de préférence
FireFox) et d’un éditeur de texte (notepad++ est largement suffisant).
2/29
2 premiers pas en HTML
Nous avons vu dans le cours n°1 que HTML est un langage de structuration de document. le
navigateur recevant un fichier texte, interprète le code qu’il contient pour produire un
affichage écran.
2.1 Les premières balises
Un document HTML est structuré au moyen de balises
Par exemple, un document HTML peut contenir un paragraphe, qui s’écrira de la manière
suivante :
<p> Ceci est un paragraphe que je peux remplir de blabla</p>
Pour le navigateur, cette ligne sera analysée comme un objet paragraphe. Tout le texte qui se
trouve entre la balise ouvrante <p> et la balise fermante </p> est considéré comme faisant
partie de l’objet paragraphe, et sera affiché à l’écran comme un paragraphe.
est une balise ouvrante.
</p> est la balise fermante associée.
Entre les deux se trouve le contenu du paragraphe.
<p>
La syntaxe est définie par les règles suivantes :
- Une balise, c’est tout ce qui se trouve encadré par les caractère "<" et ">". Ces deux
caractères sont appelés braket ouvrant et braket fermant.
- La balise fermante est toujours définie par le même mot-clef que la balise ouvrante
associée, avec un slash devant.
Vous noterez les deux niveaux de syntaxe : Brakets ouvrant et fermant définissent les balises. Balises ouvrantes
et fermantes définissent les objets de notre document HTML. Que la balise soit ouvrante ou fermante, elle
commence toujours par un braket ouvrant, et finit toujours par un braket fermant.
Il faut savoir aussi que les passages à la ligne et les espaces multiples sont sans influence sur
la structure du document : on peut les remplacer par des espaces simples. Un document
HTML peut tout à fait tenir sur une seule ligne très longue, donc illisible. La structure du
document est déterminée uniquement par les balises. Les passages à la ligne et l’indentation
ne servent qu’à la lisibilité du code.
Ainsi, notre premier paragraphe aurait pu aussi bien s’écrire :
<p>
Ceci est un paragraphe que je peux remplir de blabla
</p>
3/29
2.1.1 Les liens hypertextes
Le lien hypertexte est la base de l’architecture du web. C’est ce qui permet de naviguer de
documents en documents. Voici le code d’un lien hypertexte :
<a href="http://ensg.eu" target="_blank">Ici, c’est l’ENSG</a>.
La balise <a> définit un lien hypertexte
2.1.2 Les attributs des objets
Les objets du document HTML peuvent porter des attributs. Ces attributs
sont codés à l’intérieur de la balise ouvrante.
La balise <p> du paragraphe précédent ne portait pas d’attribut, alors que la balise <a> en
porte deux :
o href est l’adresse de la prochaine page que le navigateur va afficher si nous cliquons
sur le lien.
L’adresse de cette page peut aussi bien être une adresse web complète (http://etc.)
qu’un nom de fichier en local (truc/machin.html).
o target indique le nom de la fenêtre dans laquelle doit se charger cette nouvelle page.
La valeur _blank indique que l’on va ouvrir une nouvelle fenêtre pour charger la
nouvelle page.
Par défaut, la nouvelle page doit s’afficher dans la même fenêtre que celle où se trouve
le lien.
Un attribut est construit de la manière suivante :
nomAttribut="valeur de l’attribut"
Lorsque la valeur de l’attribut est un nombre, ou une chaîne de caractères sans caractères
spéciaux, on peut écrire :
nomAttribut=valeurAttribut
Dès que la valeur de l’attribut comporte un espace, les guillemets sont obligatoires. Par
contre, on peut utiliser indifféremment des guillemets doubles ou simples. Les guillemets
typographiques courbes (« ceux-ci », ou bien ‘ceux là’) doivent être évités.
Beaucoup de documents francophones sur les technologies web utilisent à la place du mot « guillemet » son
équivalent anglo-saxon « quote ».
2.1.3 Le document, un ensemble d’objets
Les éléments du code HTML s’emboitent les uns dans les autres :
<p> Dans ce paragraphe, je mets un <a href="http://ensg.eu"
target="_blank"> lien </a> vers mon école préférée</p>
Cette fois-ci, dans l’objet paragraphe délimité par les balises <p> et </p>, on ne trouve pas
seulement du texte, mais aussi un autre objet, le lien, délimité par les balises <a> et </a>.
4/29
Plus précisément, le contenu de l’objet paragraphe se décompose en une succession de trois
objets :
 le texte « Dans ce paragraphe, je mets un »
 un lien hypertexte. Cet objet contient lui-même le texte « lien »
 un second texte : « vers mon école préférée! ».
<p>
Dans ce paragraphe, je mets un
<a href="http://www.google.fr" target="_blank">
lien vers Google
</a>
. A essayer !
</p>
C’est le même code que précédemment, mais avec une indentation pour visualiser
l’emboîtement des objets HTML.
Il est important de « penser » le document HTML comme un ensemble
d’objets. Un objet est constitué dans le document par ses balises, avec des
attributs éventuels dans la balise ouvrante, et par un contenu, placé entre la
balise ouvrante et la balise fermante.
Les objets sont emboîtés les uns dans les autres.
2.1.4 Les divisions
Les divisions sont des regroupements d’objets. Les divisions sont utilisées pour la mise en
page. Elles servent par exemple à constituer des unités logiques dans la page web : un menu,
une zone de carte, une zone de requête, la légende, etc.
<div>
<p> Ceci est un premier paragraphe </p>
<hr width='50%'>
<p> Ceci est un second paragraphe </p>
</div>
Ici, dans l’objet division, nous trouvons deux paragraphes, séparés par une ligne horizontale.
2.1.5 Balises autofermantes
Regardons plus attentivement comment est défini cet objet séparateur :
<hr width="50%">
On remarque que :
- ce séparateur porte un attribut défini par le mot clef width. C’est la largeur de la ligne
horizontale. Ici, la valeur de cet attribut est de 50%, c'est-à-dire que le séparateur
occupera en largeur la moitié de la page.
- le séparateur est défini par une balise ouvrante sans balise fermante. C’est normal, car
comme cet objet n’a pas de contenu, et il n’a donc pas besoin de la balise fermante
puisqu’il se ferme toujours juste après qu’il a été ouvert. Ces balises sont appelées
5/29
« auto-fermantes » Nous aurons l’occasion de voir d’autres balises auto-fermantes.
Mentionnons simplement <br>, qui correspond au saut de ligne (break en anglais).
Certaines balises ouvrantes n’ont pas besoin d’être fermées.
On les appelle balises auto-fermantes
Pour indiquer qu’une balise est auto-fermante, on peut la terminer avec un slash. Ainsi, les
trois formes :
<hr width="50%">
et
<hr width="50%"/>
et
<hr width="50%"></hr>
sont strictement équivalentes.
La première forme, la plus courte, correcte en HTML, est par contre illégale en XML.
2.2 Organisation d’une page HTML
Voici comment doit être organisé le code HTML d’une page web :
<html>
<head>
<title> Ma première page </title>
</head>
<body>
<H1> remplacez ce texte par votre nom et votre prénom </H1>
<p> écrivez ici un petit texte pour vous présenter </p>
</body>
</html>
Explication :
 Une page HTML s’ouvre et se ferme par la balise <html>. Elle contient :
- un entête (défini par la balise <head>)
- un corps (défini par la balise <body>)
 L’entête contient le titre de la page (balise <title>) ainsi que ses méta-données. Nous
ne nous occuperons pas des méta-données pour le moment.
 Le contenu de la page, c'est-à-dire ce qui va s’afficher dans le navigateur, doit être
placé dans le corps, c'est-à-dire entre les balises <body> et </body> (les balises
ouvrantes et fermantes).
Exercice 1
a. recopiez le code HTML précédent dans votre éditeur de texte
b. introduisez dans les balises les éléments demandés
c. regardez le résultat dans un navigateur. Où voyez-vous apparaître le contenu de la
balise <title> ?
6/29
Pour tester des morceaux de code HTML dans le cadre de ce cours, il n’y a pas besoin de
mettre les balises <html>, <head> et <body>. En revanche il ne faudra pas oublier de les
mettre dès que l’on voudra publier des pages sur le réseau.
2.3 Les tableaux
Un tableau, c’est un objet avec des colonnes et avec des lignes.
- Un objet tableau est défini par les balises <table> et </table>.
- Dans le tableau, on place des lignes, avec la balise <tr>.
- Entre <tr> et </tr>, on définit des cases avec les balises <td> et </td>.
Voici le code HTML d’un tableau à deux lignes et trois colonnes :
<table border=3>
<tr>
<td> 1ère case de la première ligne</td>
<td> 2ème case </td>
<td> 3ème case</td>
</tr>
<tr>
<td> On passe à la 2ème ligne </td>
<td> et on continue </td>
<td> encore et encore </td>
</tr>
<tr>
<td colspan=2> et ici on utilise un colspan</td>
</tr>
</table>
L’attribut border, sur la balise <table> présente un comportement un peu étrange :
- il fixe l’épaisseur du bord extérieur du tableau
- il ajoute des bordures intérieures fines.
Voici le rendu avec Firefox :
Qu’est-ce que le colspan ? C’est un attribut de la balise <td> qui indique que la cellule doit
occuper plus qu’une colonne. Ici, comme colspan=2, la cellule occupe 2 colonnes. Par
ailleurs, vous noterez que comme cette ligne ne définit pas de cellule pour la troisième
colonne, cette cellule reste vide, et le tableau paraît tronqué : il aurait fallu ajouter une cellule
sur cette ligne, ou bien fixer le colspan à 3 pour avoir un tableau d’aspect complet.
Colspan est une abbréviation de column spanning, c'est-à-dire recouvrement de colonne. Il
existe de la même façon un effet équivalent de recouvrement des lignes, que l’on obtient avec
l’attribut rowspan, toujours dans la balise <td>.
Notez qu’il n’y a pas d’objet « colonne » dans la définition du tableau que nous avons donné ici. Les cases dans
chaque ligne sont indépendantes des cases au dessus et en dessous.
7/29
Au début du web, la meilleure manière de faire des mises en page passait par l’utilisation de
tableau. Pour faire une page avec un bandeau en haut, puis en dessous le texte principal avec
un menu à gauche, on utilisait la syntaxe suivante :
<table width=100%>
<tr width=120>
<td colspan=2> ICI LE BANDEAU </td>
</tr>
<tr width=80%>
<td rowspan=A width=120> ICI LE MENU</td>
<td> ICI LE TITRE DU CHAPITRE </td>
</tr>
<tr>
<td> ICI LE TEXTE PRINCIPAL </td>
</tr>
</table>
Comme on peut mettre des tableaux dans des tableaux, on peut faire avec cette méthode des
mises en page très variées.
Aujourd’hui, il est fortement déconseillé par les autorités morales du web d’utiliser des
tableaux pour faire de la mise en page. La méthode recommandée passe par les balises <div>
sur lesquelles on applique une mise en page définie par une feuille de style que nous verrons
plus loin. Mais comme la plus célèbre page du web fait de la mise en page avec des tableaux
(à la date du 1er juillet 2007), vous n’avez aucune raison d’être plus royaliste que le roi. C’est
encore actuellement la solution qui assure la meilleure compatibilité avec le plus grand
nombre de navigateurs.
Les autorités morales du web vont du W3C jusqu’à certains étudiants futés, en passant par leurs enseignants les
plus dynamiques. Le vrai gros problème avec les tableaux, c’est qu’ils peuvent causer des difficultés aux
navigateurs pour aveugles. Mais au final, rien ne prouve que les sites qui utilisent des tableaux pour la mise en
page soient significativement moins accessibles que les autres, et 99% des sites qui font de la mise en page sans
tableau ne se soucient pas plus de l’accessibilité aux aveugles.
Exercice 2
a. copier le code précédent en ajoutant un attribut border pour visualiser les limites des
différentes zones de la mise en page.
b. donnez la bonne valeur de l’attribut rowspan.
c. à quoi sert l’attribut width=90% de l’attribut table ?
Sautons quelques lignes, car ce que nous attaquons maintenant mérite de commencer sur un
haut de page.
8/29
2.4 Les formulaires
2.4.1 Définition
Un formulaire permet à l’utilisateur de saisir des informations et de les
envoyer au serveur pour traitement.
Le formulaire est défini par la balise <form>, et contient les différents
champs de saisie.
Exemple : pour utiliser un moteur de recherche, je tape ma requête dans un champ du
formulaire, et le navigateur envoie ma requête vers le serveur.
2.4.2 Exemple
Voici un exemple simple de formulaire en HTML. Copiez ce code source dans un fichier
nommé page1.html et affichez le dans votre navigateur :
<form action="page2.php" method=GET >
votre nom : <input type=text name="nom">
<br>
votre prénom : <input type=text name="prenom">
<br>
<input type=submit value="Clic !">
</form>
Comparez ce code HTML avec l’affichage du navigateur va nous permettre d’en comprendre
le fonctionnement :
 La partie visible du formulaire, ce sont les champs de saisie : ils sont définis par les
balises <input>, qui sont des balises auto-fermante, c'est-à-dire qu’il n’y a pas besoin
de </input>. Ici, il y a trois balises input.
 Les deux premières balises sont de type texte (type=text). C’est le type qui permet
une saisie par le clavier.
 La troisième balise est de type submit. C’est le bouton qu’on clique pour poster le
formulaire.
 Ces trois champs de formulaire sont encapsulés dans un objet formulaire, défini par les
balises <form> et </form>.
Cet objet formulaire est invisible à l’affichage. Il sert seulement à indiquer au navigateur que
tous les champs de saisie appartiennent au même formulaire.
2.4.3 Transmission des données vers le serveur
Le formulaire est un objet non-graphique qui sert seulement à rassembler les champs de
formulaires en une même unité logique, afin de les poster en groupe vers le serveur :
 Lorsqu’on clique sur le bouton submit, on envoie le formulaire vers la page
dynamique définie par l’attribut action : ici, c’est le fichier page2.php.
 Toutes les données du formulaire sont alors transmises vers le serveur, qui en suivant
les instructions de fichier page2.php, va produire une page web dynamique.
9/29
Attention, si on met un champ en dehors du formulaire, il ne sera pas transmis vers le serveur,
par exemple si on écrit ceci :
votre nom : <input type=text name="nom">
<br>
<form action="page2.php" method=GET >
votre prénom : <input type=text name="prenom">
<br>
<input type=submit value="Clic !">
</form>
alors, le serveur ne peut pas recevoir le champ nom, car le formulaire
champ. Seul le champ prenom sera transmis.
ne contient pas ce
Nous verrons dans la partie PHP comment les données sont transmises, vers le serveur, et à
quoi correspond la méthode GET.
2.4.4 Les input les plus utiles
Le champ texte
Nous avons déjà décrit le champ texte. Ajoutons qu’on peut fixer une limite au nombre de
caractère à saisir dans le champ texte, ainsi qu’une taille pour l’objet graphique :
Code postal : <input maxlength=5 size=20>
Le champ password
<input type=password name="pwd">
C’est comme un champ texte, mais les caractères sont masqués par des '*'. C’est une illusion
de sécurité, car rien n’empêche le mot de passe d’être stocké par derrière dans un cookie, ou
de voyage en clair sur le réseau.
La case à cocher
La case à cocher s’écrit au moyen d’un input de type checkbox :
<input type=checkbox name=permis>Permis B
Les boutons radio
Les boutons radio ressemblent aux cases à cocher, mais ils vont par groupe. Un seul peut être
activé. Lorsqu’on clique sur l’un d’eux, celui qui était coché auparavant est automatiquement
décoché.
Tous les boutons radios solidaires entre eux sont associés à une unique variable, et portent un
même nom.
<input type=radio name=sex value=H>Masculin
<input type=radio name=sex value=F>Féminin
Ici, les deux boutons radio ont le même name : on a deux objets graphiques, pour un seul
champ dans le formulaire, qui a pour nom sex. La variable sex aura la valeur H ou F selon le
bouton activé lors de la soumission du formulaire.
Les menus select
La balise <select>, combinée à des balises <option> permet de définir un menu déroulant.
C’est un champ de formulaire très proche de la logique des boutons radio, mais avec une
10/29
ergonomie différente, et plus de souplesse dans l’utilisation (il permet entre autre de faire des
choix multiples – cf. une référence de HTML).
<select name=sex>
<option value=""> --sexe-- </option>
<option value="H">Masculin</option>
<option value="F">Féminin</option>
</select>
Le bouton reset
<input type=reset value="tout vider">
Lorsqu’on clique sur ce bouton, le formulaire est remis dans son état d’origine. S’il y avait
des valeurs par défaut, ces dernières sont rétablies.
2.4.5 Les valeurs par défaut
Pour chacun des input, il est possible de définir une valeur par défaut :
Le champ texte
Je trouve ce cours très intéressant :
<input name=avisPerso value="moi aussi">
La valeur par défaut est stockée dans l’attribut value.
La case à cocher
<input type=checkbox name=permis checked>Permis B
Par défaut, la case à cocher est décochée. On peut la pré-cocher avec l’attribut checked (à
noter, c’est un attribut sans valeur)
Les boutons radio
<input type=radio name=sex value=H >Masculin
<input type=radio name=sex value=F checked >Féminin
Comme avec le type checkbox, l’attribut checked permet de pré-selectionner
un bouton radio.
Les menus déroulant
<select name=sex>
<option value=""> --sexe-- </option>
<option value="H">Masculin</option>
<option value="F" selected>Féminin</option>
</select>
L’attribut selected permet de pré-selectionner une des options
un attribut des balises <option>.
d’un menu select. C’est donc
2.4.6 Les autres input
Voici, rapidement présenté, la liste des autres input utilisables dans un forumulaire :
11/29
- Utilisé en web mapping, l’image à cliquer :
<input type=image src="http://adresse.de.limage.com/image.jpg">
- Un grand champ texte, sur plusieurs lignes :
<textarea name=commentaire></textarea>
- Un bouton, qui ne peut servir qu’avec javascript :
<input type=button >
- Pour faire de l’upload de fichier :
<input type=file name=fichier>
(pour l’upload de fichier, il faut faire attention à l’encodage du formulaire – reporter vous à la documentation).
- Un champ caché permet de cacher (et oui) de l’information dans un formulaire :
<input type=hidden name=identite value="monNom">
A quoi sert l’information cachée dans un formulaire ? Elle permet au serveur de propager d’une page sur l’autre
de l’information sur un visiteur. Cela permet de suivre un visiteur, par exemple une fois qu’il a entré son mot de
passe, sans qu’il ait besoin de le redonner à chaque page.
Normalement, ce type de suivi se fait avec un cookie, ou mieux : avec une session. La méthode avec un champ
hidden est plus artisanale, mais fonctionne très bien. Pour une autre utilisation du champ de type hidden, voir la
section sur PHP.
Exercice 3
- recopiez
sur
votre
poste les fichiers TPformulaires. Ouvrez le fichier
à la fois dans le navigateur et dans un éditeur de texte.
Identifiez le code utilisé pour coder les deux images. Cliquez sur la première image, et
regardez la barre d’adresse. Comment fait-on pour savoir si c'est la grande image ou la
petite qui a été cliquée ? Quel est pour cela l'attribut important ?
Dans le tableau en bas de page, mettez une bordure d’épaisseur 10, et regardez le
résultat.
Ecrivez le code HTML d’un formulaire semblable à celui du fichier
TPformulaires.html. Testez-le dans votre navigateur. Supprimer ensuite la bordure
pour obtenir une mise en page plus nette.
TPformulaires.html,
-
-
12/29
3 Premiers pas en CSS
CSS signifie Cascading Style Sheet, c'est-à-dire : feuille de style en cascade. L’aspect cascade
des feuilles de style ne sera pas examinée ici.
3.1 De l’importance d’avoir du style
3.2 Les trois premiers pas
3.2.1 Le style pour un objet
Le moyen le plus simple, mais le moins utile, de définir le style d’un objet HTML, c’est de le
mettre en attribut de cet objet. Par exemple, si je veux mettre un paragraphe en rouge et en
gras, je vais écrire le code suivant :
<p style="text-align:justify; font-weight:bold; color:red;">
Ici je met le texte de mon paragraphe
</p>
Le rendu graphique est ainsi défini comme attribut de l’objet paragraphe.
Analysons la valeur de cet attribut style :
"text-align:justify; font-weight:bold; color:red;"
Il est composé de trois termes, séparés entre eux par des points-virgules. Nous avons :
text-align:justify;
Le paragraphe est justifié, c'est-à-dire qu’il est aligné sur la marge à gauche et à droite,
text-align:justify; font-weight:bold;
il est en caractère gras
text-align:justify; font-weight:bold; color:red;
et en rouge
On remarque que la valeur d’un champ de style est introduite, non pas par
"=" comme pour un attribut HTML, mais par ":".
A l’origine, avant l’invention des styles, on faisait tout avec HTML. Ainsi, l’exemple de style précédent
s’écrivait :
<p align=justify>
<font color=red>
<b>
Ici je met le texte de mon paragraphe
</b>
</font>
</P>
Il fallait donc trois balises pour définir un seul style. Cette multiplication des balises était extrêmement lourde.
Les styles, en séparant le contenu HTML de sa mise en forme, ont fortement simplifié cette dernière. Mais le
plus utile est tout de même la définition des feuilles de style, comme nous allons le voir ci-dessous.
13/29
3.2.2 Le style pour un page web
Si je fais en HTML un texte un peu long, je vais avoir plusieurs paragraphes. Cela signifie que
je vais avoir plusieurs balises <p>. Si je leur donne un style spécial, je peux le faire avec
l’attribut style. Mais si je veux maintenant modifier ce style, je vais devoir modifier
l’attribut dans chacune de mes balises. Sur un texte un peu long, je risque de me tromper, et
d’introduire des erreurs dans mon fichier HTML. Même si je ne me trompe pas, c’est une
tâche fastidieuse et inutile.
Le plus simple, c’est de définir le style une bonne fois pour toute, et de dire
à chaque paragraphe qu’il doit utiliser le style que l’on vient de définir.
Pour définir un style :
1- on associe un nom à notre style (ici un paragraphe de type normal) et on place cette
déclaration entre les balises <style> et </style> :
<style>
p.normal { text-align:justify; font-weight:bold; color:red; }
</style>
Cette déclaration de style peut se trouver n’importe où dans le code HTML, mais il vaut
mieux la mettre dans l’entête.
2- ensuite, pour chaque paragraphe concerné, on indique qu’il utilise le style normal.
Pour cela, on utilise l’attribut class :
<p class='normal'> premier paragraphe </p>
<p class='normal'> second paragraphe </p>
<p class='normal'> etc. </p>
Lorsque nous voudrons faire une modification, nous travaillerons uniquement sur l’objet
<style>. Nous ferons une seule modification qui se propagera à tous les paragraphes.
Ici, nous avons créé un seul style, mais il est possible de créer autant de styles que nous le
souhaitons. Les différents styles d’un document peuvent se placer tous dans le même objet du
code HTML, mais il est possible aussi d’utiliser plusieurs fois la balise style. Ceci :
<style>
p.normal
{ text-align:justify; color:black; }
p.important { text-align:justify; font-weight:bold; color:red; }
</style>
et ceci :
<style>
p.normal
{ text-align:justify; color:black; }
</style>
<style>
</style>
sont exactement équivalents. La première version, moins lourde, doit être préférée.
14/29
Attention à la syntaxe : lorsqu’il y a une erreur dans CSS, le navigateur ne le dit pas toujours.
3.2.3 Les styles pour tout mon site
Imaginons maintenant que nous devons écrire non pas une seule page web, mais tout un site :
nous voulons que notre style de paragraphe se retrouve dans toutes les pages. Devons-nous
recopier l’objet <style> sur toutes les pages HTML ? Mais alors, si nous voulons faire une
modification du style sur notre site web, il faudra la faire sur toutes les pages ? Pour éviter
cela, nous allons mettre le style dans une feuille de style, et dans notre page web, nous allons
mettre un lien vers cette feuille de style.
En avant :
1- nous créons un fichier de style, que nous appelons style.css, et qui contient :
p.normal { text-align:justify; font-weight:bold; color:red; }
2- dans le fichier HTML, à la place du style, nous mettons la ligne suivante :
<link rel="stylesheet" type="text/css" href="style.css">
Revoici une balise autofermante (une balise ouvrante sans balise fermante). Cet objet link
permet à ma page HTML de disposer de tous les styles définis dans le fichier de style. La
balise porte les attributs importants :
- l’attribut rel nous dit que le fichier lié est une feuille de style. Le fichier lié peut être
autre chose qu’une feuille de style, comme nous le verrons plus loin avec javascript.
- l’attribut type indique simplement comment est écrit le fichier. Un fichier de style css
sera toujours de type "text/css"
- l’attribut href, enfin, donne l’adresse du fichier de style.
3- Dans la page HTML, nous pouvons utiliser le style exactement comme précédemment :
<p class='normal'> premier paragraphe </p>
<p class='normal'> second paragraphe </p>
<p class='normal'> etc. </p>
L’avantage, c’est qu’en recopiant la balise link dans toutes les pages de notre site, nous
définissons les mêmes styles pour tout le site. Si nous voulons modifier le style de notre site,
nous le faisons en une seule fois, dans le fichier style.css.
3.3 Tout ce qu’il faut savoir sur CSS
La déclaration d’un style permet de répondre à deux questions :
- sur quels objets s’applique-t-il ?
- quel sera son rendu graphique ?
15/29
p.normal
{ text-align:justify; font-weight:bold; color:red; }
Sur quoi
s’applique-t-il ?
Comment
va-t-il apparaître ?
3.3.1 Sur quoi s’applique-t-il ?
Le tableau suivant donne les principales correspondances entre la déclaration de style dans la
feuille de style et les objets auxquels s’appliquera la déclaration de style :
déclaration dans le CSS
p { }
p.normal
p a
<p> … </p>
Les balises paragraphes du document recevront le style
<p class="normal"> … </p>
Les paragraphes de class normal
<p>
<a> … </a>
</p>
{ }
{ }
p a:visited
p a:hover {
Les objets HTML qui sont touchés
Les liens hypertexte dont l’objet parent est un paragraphe (i.e.
qui sont dans un paragraphe).
Les liens hypertexte déjà visités, et qui sont dans un paragraphe.
Les liens hypertexte qui sont dans un paragraphe, au moment où
je passe la souris dessus.
{ }
}
p.normal a.ext
{ }
div #menu a.ext
{}
<p class="normal"> <a class="ext"> … </a>
</p>
Les liens de classe ext dans un paragraphe de classe normal.
<div id="menu">
<a class="ext"> … </a> </div>
Tous les liens de class ext dans LE div d’identifiant menu.
La déclaration de style permet donc de gérer l’emboîtement des objets. On peut donner des
styles différents à des liens hypertexte selon qu’ils appartiennent au menu ou au corps du
texte.
3.3.2 Pour quel rendu graphique ?
Maintenant que nous savons appliquer un style à un objet HTML, nous pouvons définir son
contenu graphique. Voici les principales spécifications de style :
text-align:justify;
font-weight:bold;
color:red;
font-family:
Arial,sans-serif;
font-size:12px;
Le texte est aligné à la fois à droite et à gauche. Les
autres valeurs acceptées sont : right, left et center.
La graisse du texte. bold et normal sont les plus
utilisé. Pour les autres valeurs, voir une référence CSS.
Les couleurs peuvent être :
- un nom de couleur
- une notation hexadécimale : #FFCC99;
- Une notation décimale : rgb(96,255,0).
En priorité, le texte prend la police Arial. Si elle n’est
pas disponible, il prend une police sans empattement.
On peut enchaîner ainsi plusieurs choix de polices.
On peut donner une valeur en pixel, mais aussi des
valeurs relatives et qualitatives : +2, smaller. Se
reporter à une référence CSS quand de besoin.
16/29
text-decoration:
underline;
Permet de souligner, de surligner, ou de barrer du
texte. Les valeurs acceptées sont : none, underline,
overline, line-through, blink
et none. le
clignotement (blink) ne fonctionne pas sur tous les
navigateurs -et de toute façon, c’est très pénible à voir.
underline et none sont les valeurs les plus
couramment utilisées. Faire des liens sans
soulignement est très chic.
3.3.3 Le style pour la mise en page
Les styles permettent aussi de faire de la mise en page. Des problèmes d’incompatibilité
(entre Mozilla et Internet Explorer, ainsi qu’entre les différentes versions de ces deux
navigateurs) rendent l’affichage parfois totalement illisible. La mise en page avec CSS doit
être utilisée avec prudence, et testée soigneusement avant mise en ligne.
Avec le rendu graphique, les problèmes d’incompatibilité n’empêchent pas de lire une page. La police peut être
deux fois trop petites, on voit au moins que le texte existe, et on peut toujours zoomer. Avec les incompatibilités
de mise en page, c’est tout un cadre qui peut sortir de l’écran : l’utilisateur ne saura même pas qu’il existait.
Pour apprendre à définir une mise en page avec les styles, voici deux liens internet :
 Une page synthétique sur la mise en page
http://perso.orange.fr/coin.des.experts/reponses/faq9_49/blocs.html
 Un dossier sur les feuilles de style sur le site de l’EFPG (Papet’). Pour la mise en page,
vous pouvez commencer à lire à partir du chapitre III.
http://cerig.efpg.inpg.fr/dossier/feuilles-de-style/sommaire.htm
Votre objectif est de comprendre la façon dont les blocs de texte s’enchaînent les uns aux
autres. Vous devez acquérir les concepts de :
- positionnement en bloc
- positionnement en ligne
- positionnement absolu
Il ne s’agit pas seulement pour vous d’acquérir les concepts : reproduisez les exemples, faites
des mises en page simple pour pratiquer ce que vous avez appris. Attention, les boîtes
flottantes sont une fonctionnalité amusante, et utile pour afficher des images dans du texte,
mais ce n’est pas une technique fondamentale. Le cœur de la mise en page est ailleurs.
3.4 En conclusion
3.4.1 A retenir : l’appel de style
Il y a trois manières d'appeler un style :
1- Dans une balise, avec l'attribut style :
<B style="color:red;">
Ce style n’est défini que pour cette balise. On parle de style local
2- Avec la balise style dans ma page HTML, de préférence dans l’entête :
<style type="text/css">
B {color:red;}
17/29
</style>
Ce style est défini pour tout le document. On parle de style interne (interne à la page)
3- Dans un fichier de style (par exemple mesStyles.css) , on écrit :
B {color:red;}
Tous les autres styles sont écrits dans cette feuille de style.
J’appelle la feuille de style dans l'entête de mes pages HTML, au moyen de la balise link :
<LINK REL="stylesheet" TYPE="text/css" HREF="mesStyles.css">
On parle alors de style externe (externe à la page).
C’est la troisième de ces méthodes qui doit être privilégiée, les deux autres ne seront utilisées
qu’exceptionnellement.
3.4.2 Le fond et la forme
Les feuilles de style sont là pour séparer la forme du fond : le fond doit être placé dans le
fichier HTML. La forme typographique doit être renvoyée dans le fichier CSS.
Des problèmes se posent quant à la mise en page. Il est impossible de la mettre en totalité sous
feuille de style : dès que le document devient complexe, on est souvent conduit à faire
apparaître une partie de la mise en page dans le document HTML. Quoi qu’il en soit, il vaut
mieux éviter les mises en pages sous forme de tableau, sauf si on recherche des effets
particuliers impossibles à obtenir autrement.
Exercice 4
a. Affichez le code de la page TPformulaire.html de l’exercice précédent. Quel est le
fichier de style attaché à cette page HTML ?
b. Ouvrez ce fichier de style et chercher la signification de chaque ligne. Vous
chercherez ces significations sur le Web si vous ne les trouvez pas dans ce cours.
c. Mettez le titre principal en rouge sur fond gris
d. Pour améliorer la lisibilité de cette page, mettez-lui des marges. Vérifiez l’affichage
dans Firefox et dans Internet Explorer.
e. Dans les champs de formulaire, passez le texte en caractère gras, et mettez le fond en
vert pastel (même ton que le fond jaune de la page).
f. Pour les liens internet en bas de la page, passez le texte en caractère gras et supprimez
le soulignement.
g. Passez les liens visités en bleu très foncé, et faites en sortes que les liens survolés
passent en rouge foncé.
Référence CSS :
http://fr.selfhtml.org/navigation/css.htm
Très bonne initiation à CSS :
http://www.siteduzero.com/tuto-3-6-0-apprenez-a-creer-votre-site-web.html#part_8
18/29
Exercice facultatif
h. Comparez l’affichage de la page page TPformulaire.html dans Firefox et dans
Internet Explorer.
i. Trouvez sur internet la signification du scrollbar-shadow-color dans le fichier css.
Réponse : http://wiki.mediabox.fr/documentation/css/scrollbar-shadow-color
19/29
4 Premiers pas en Javascript
4.1 Le meilleur de Javascript en 19 lignes
Javascript est un langage qui permet de manipuler un document HTML pour le modifier, sans
avoir à passer par le serveur. Nous allons montrer comment fonctionne Javascript sur un
exemple totalement inutile mais qui fait montre clairement l’interaction entre HTML et
javascript.
La puissance d’utilisation de Javascript repose sur les éléments techniques suivants :
o Dans la page HTML, la balise <script> permet d’introduire des morceaux de
programmes, de définir des fonctions, etc.
o Chaque balise du code HTML est interprétée comme un élément (i.e. un objet) du
document web. Javascript est le langage orienté objet qui permet de manipuler les
éléments du document HTML.
o Javascript accède à l’élément document (qui correspond à la balise <html>) au moyen
de la variable document.
o Pour accéder aux éléments de la page web, javascript propose plusieurs méthodes. La
plus lisible est la fonction document.getElementById().
o Dans la plupart des éléments HTML, il est possible de définir des comportements
déterminés par les actions de l’utilisateur. Ainsi, si un bouton porte un comportement
"onClick", ce comportement sera déclanché à chaque fois que l’utilisateur cliquera sur
le bouton.
Avec Javascript, nous abordons la programmation. Si vous n’êtes pas à l’aise avec la
programmation informatique, je vous conseille de relire plusieurs fois le code qui suit, ou bien
de vous le faire expliquer. Vous ne devez pas passer à la suite tant que vous n’avez pas
compris chacune des lignes du code que nous allons examiner.
Notre programme javascript va être inclus dans un petit fichier de code HTML, qui va assurer
l’affichage des éléments suivants :
Lorsque vous cliquerez sur le bouton AFFICHE, javascript va empiler, dans la zone de texte
sur fond jaune, l’affichage d’un compteur. Ce compteur augmentera d’une unité à chaque
nouveau clic sur le bouton. Lorsque vous cliquerez sur EFFACE, le message s’effacera, mais
le compteur ne sera pas remis à zéro (comme on peut le vérifier en revenant cliquer sur
AFFICHE).
Voici le code qui correspond à cette page (vous pouvez ouvrir le fichier exercice6.html) :
20/29
Explication :
- ligne 1 : balise ouvrante d’une zone de script. Toute la section sur fond bleu est une zone
de script. Le langage n’est plus HTML, mais javascript.
- ligne 2 : initialisation du compteur à 0
- ligne 3 : déclaration de la fonction qui va faire le travail d’affichage. Cette fonction
commence et finit aux lignes 4 et 8 (accolade fermante)
- ligne 5 : on incrémente le compteur (on l’augmente d’une unité)
- ligne 6 : on trouve l’objet HTML qui correspond à la zone d’affichage
- ligne 7 : on change le texte qui apparaît dans cet objet HTML
- ligne 9 : déclaration de la fonction qui va faire le travail d’effacement
- ligne 11 : en une seule ligne, on fait la même chose que les lignes 6 et 7 (mais dans on
met un texte vide dans la zone d’affichage)
- ligne 13 : balise fermante de la zone de script. Toute la suite est en HTML
- ligne 15 : un objet de type bouton. Il possède un attribut onClick, qui est un
gestionnaire d’événement : il indique que lorsqu’on clique sur le bouton, la fonction
afficheCpt() sera déclanchée. L’attribut value permet de choisir le texte qui est
affiché dans le bouton.
- ligne 17 : un second bouton, sur le même modèle, pour effacer le message.
- ligne 19 : un paragraphe, avec un style qui lui donne un fond jaune. Il porte un
identifiant "zoneAffichage". C’est cet identifiant qui permet à javascript (ligne 6,
lligne 11) de retrouver cet objet par la méthode document.getElementById().
Deux points à retenir :
La méthode document.getElementById() permet d’identifier et de
manipuler, en javascript, les objets du document HTML qui portent un
identifiant, c'est-à-dire un attribut id.
et :
Dans le document HTML, deux objets ne doivent pas avoir la même valeur
pour l’attribut id.
21/29
Par ailleurs, nous venons de voir que l’attribut innerHTML permet de lire et de modifier le
texte qui apparaît dans un élément de la page. En modifiant dans javascript l’attribut
innerHTML d’un l’objet, nous modifions le texte de l’objet correspondant dans la page web.
4.2 Manipulation du code HTML
Dans ce premier programme en Javascript, nous n’avons transformé que la partie textuelle du
code HTML.
Mais je pourrais avoir aussi envie de manipuler les objets eux-mêmes. Par exemple, je
pourrais avoir besoin de rajouter une ligne dans un tableau, ou bien de changer la couleur d’un
objet dynamiquement, lorsque la souris passe au dessus.
Ces opérations sont possibles avec l’attribut innerHTML, en affectant du code HTML dans
l’attribut innerHTML. Ainsi, si j’écris :
document.getElementById("zoneAffichage").innerHTML =
'<a href=" www.ensg.eu"> Un lien pour voir</a>' ;
mon navigateur va m’afficher un lien vers le site de l’ENSG.
L’attribut innerHTML permet de créer dynamiquement du texte HTML. Il est
massivement utilisé, mais son utilisation n’est pas toujours recommandée.
En effet, cette technique, très utile, pose plusieurs problèmes :
1- elle est très lourde si l’on veut faire simplement des modifications de
présentation du texte, sans toucher à la structure du document. Pour changer la
mise en forme du document, on manipulera les attributs des objets du
document
2- elle n’est pas acceptée comme standard du Web, certains navigateurs sont
susceptibles de produire des résultats erronés dans certains cas. Le W3C
recommande d’utiliser une manipulation en javascript de la structure du
document.
Manipulation des attributs des objets et manipulation en javascript de la structure du
document sont les deux techniques que nous allons étudier maintenant.
4.2.1 Accéder aux attributs d’un objet
Pour accéder aux attributs d’un élément de la page, on utilise, comme pour innerHTML, la
notation orientée objet :
Pour supprimer un élément :
Deux méthodes sont disponibles, avec des effets différents :
but.style.visibility='hidden' ;
L’objet but est masqué, mais sa place est
conservée dans le texte. C’est comme s’il
était totalement transparent.
but.style.display='none' ;
Ici, l’objet but disparaît totalement de
l’affichage : c’est comme s’il n’existait pas
du tout. Tous les objets qui sont derrière lui
peuvent remonter pour prendre sa place
22/29
Changer une image
Pour changer une image dynamiquement, on va modifier l’attribut src de l’image :
<img src=imageOut.gif onMouseOver=" this.src='imageIn.gif' ; "
onMouseOut=" this.src='imageOut.gif' " >
Explication des différents éléments de javascript que nous découvrons ici :
- this désigne l’objet courant, c’est-à-dire l’objet défini par la balise dans lequel
il se trouve. Ici, this désigne l’objet image, et this.src désigne l’adresse du
fichier affiché par cette image
- onMouseOver définit les instructions javascript qui sont exécutées lorsque la
souris vient sur l’image. Ici, lorsque la souris entre sur l’image, l’image
affichée devient imageIn.gif.
- Le fonctionnement de onMouseOut est le même, mais pour l’événement de
sortie de la souris.
Lorsqu’on passe la souris sur l’image, on déclenche l’événement onMouseOver. Quand la
souris quitte l’image, c’est l’événement onMouseOut. Dans les deux cas, le gestionnaire
d’événement modifie l’attribut src de l’objet courant (l’objet this). L’entrée et la sortie de la
souris changent l’image affichée.
Exercice 5
a. Quelle est l’image affichée par défaut ?
b. Pourquoi a-t-on choisi celle-là, et non pas l’autre ?
c. Y a-t-il un risque de bug ?
Réponse :
L’image par défaut, c’est imageOut.gif, car on considère que lorsque la page apparaît, la
souris n’a aucune raison de se trouver positionnée dans l’image.
Si la souris se trouve en fait positionnée sur l’image, lorsqu’elle va sortir, elle va déclencher
un événement inutile, mais rien de plus. Il n’y a pas de risque de bug.
Modifier le style d’un objet
Pour modifier le style d’un objet, on dispose de plusieurs méthodes :
1ère méthode - on peut invoquer un style défini par une feuille de style :
elem.className = nomDeStyle ;
Le style de l’élément elem va reprendre toutes les caractéristiques du style défini par
nomDeStyle dans la feuille de style.
2ème méthode - on peut aussi manipuler directement l’apparence d’un élément HTML, au
moyen de l’attribut style, et de ses sous-attributs :
elem.style.backgroundColor = "#FF9933";
23/29
elem.style.color = "#FFFFFF";
elem.style.fontSize = "24pt";
Il faudrait toujours préférer la méthode utilisant l’attribut className.
Il faudrait toujours préférer la méthode utilisant l’attribut className, mais le nom de cet
attribut n’est pas uniforme selon les navigateurs. Certains navigateurs connaissent l’attribut
class à la place de className. Pour assurer la compatibilité, il faut
En fait, la meilleure solution consiste à utiliser une des nombreuses API javascript disponibles : prototype, Dojo,
Jquery, etc.
Il existe aussi des cas très rares où l’on a une bonne raison de ne pas définir le style dans un
CSS. Par exemple, lorsque le style dépend d’une variable :
elem.style.color = "#"+valeurCouleur+"";
elem.style.fontSize = tailleCaractere + "pt";
3ème méthode – dans certains cas encore plus rares, on peut avoir besoin de changer le style lui-même dans sa
feuille de style, pour que tous les éléments appartenant à ce style soit concernés. Exemple : au moment où je me
logue sur une page, la charte graphique de mon site change de teinte.
Pour obtenir cet effet, on manipulera l’objet document.styleSheets. Attention, les fonctions de
manipulation de cet objet ne sont pas bien standardisées (googlez styleSheets+addRule+ insertRule pour avoir
des détails)
Attention : l’attribut style d’un élément HTML est uniquement l’apparence de cet objet. Il ne
correspond pas du tout aux styles définis en CSS, qui correspondent à l’attribut
Exercice 6
- Dans l’exemple précédent (fichier exercice6.html), changez la couleur du
paragraphe zoneAffichage. Il sera vert lorsque le compteur est pair, et rouge lorsque le
compteur est impair. Pour tester la parité, vous chercherez une solution sur internet.
-
(aide : google javascript+pair+impair donne la solution. Pour tester la parité d’un
nombre, on regarde si ce nombre modulo 2 est égal à 0).
Lorsqu’on efface puis qu’on ré-affiche le compteur, il y a un point virgule disgracieux
en début de ligne. Modifier le programme pour faire disparaître ce point virgule
(uniquement lorsqu’on efface puis qu’on réaffiche).
4.2.2 Ajouter un nouvel objet
Pour quelle raison peut-on avoir envie d’ajouter un nouvel objet sur une page HTML ?
Voici un exemple réel : sur le site de réservation de la SNCF, je dois signaler, lors de l’une
des étapes de ma réservation, combien de personnes vont voyager sur le billet. Par défaut, le
nombre de personne est 1. Aussitôt que je modifie ce nombre dans son menu déroulant,
javascript ajoute une série de champs dans le formulaire pour que je puisse introduire l’age de
24/29
chaque passager et les réductions tarifaires auxquelles il a droit. Ces champs supplémentaires
sont générés par javascript au moment où l’on en a besoin.
Soyons honnête : je n’ai pas vérifié que le code javascript du site de la SNCF génère les objets. D’autres
méthodes sont possibles, comme par exemple utiliser des input cachés par défaut, avec l’attribut
display:'none' dans le style. Mais cette deuxième solution est dangereuse, et il faut préférer la première :
on ne crée les champs du formulaire que si on en a besoin.
Pour créer un objet, on appelle tout simplement la fonction qui crée cet objet :
monLien = document.createElement("a");
Ici, on a créé un élément qui correspond à la balise <a> en HTML, c'est-à-dire un lien
hypertexte.
Ce lien hyper-texte n’existe pas encore dans le document HTML. Sa création ne concerne que
l’espace du programme javascript : il faut donc maintenant l’insérer dans le document HTML.
Il faut bien sûr savoir à quel endroit on veut l’insérer. Par exemple :
contenant = document.getElementById("menu");
contenant.appendChild(monLien);
Ces deux lignes ajoutent le lien hypertexte que l’on vient de créer dans l’objet qui porte
l’identifiant menu.
Attention, le lien que nous avons créé dans le menu sera le dernier de l’objet menu, car la fonction
appendChild() empile les objets les uns à la suite des autres. Pour ajouter des objets au milieu de la pile
d’objets, il faut utiliser la fonction insertChild(). Par exemple :
menu.insertChild(monLien, menu.firstChild) ;
mettra le lien au début du menu, avant le premier élément.
Pour le moment, cet objet que nous avons créé est tout nu. Il faut l’habiller d’attributs, selon
la méthode définie au paragraphe précédent :
monLien.innerHTML = "site ENSG" ;
monLien.href = "http://ensg.ign.fr" ;
monLien.target = "_blank" ;
Dans la pratique, il est recommandé de faire le appendChild en dernière opération :
1- on crée l’objet avec document.createElement
2- on lui donne une forme et un contenu
3- on l’ajoute dans un contenant avec appendChild().
En effet, si on ne respecte pas cette structure et qu’on ajoute l’objet en début de processus, si
un bug interrompt le processus, on risque d’afficher un objet incohérent
Exercice 7
- avec l’exemple du compteur (fichier exercice6.html), vous allez maintenant ajouter
un nouveau paragraphe pour chaque affichage du compteur.
25/29
4.3 La structure du langage
Javascript est un langage orienté objet très peu typé. La syntaxe courante est très proche de
celle de java et de C++.
4.3.1 Opérateurs
Les opérateurs de base
Les opérateurs arithmétiques sont les mêmes qu’en C et java (+, *, /, etc.).
Les opérateurs booléens sont aussi les mêmes qu’en C et java. Il n’est pas inutile de les
rappeler :
- la conjonction (ET) : condition1 && condition2
- la disjonction (OU) : condition1 || condition2
Ces opérateurs fonctionnent à l’économie. Ils testent d’abord le premier terme. Si le premier
terme permet de décider la valeur du résultat, la deuxième condition n’est pas testée.
Cette règle est généralement utilisée avec la conjonction : si condition1 est fausse, alors on
sait que condition1 && condition2 est fausse aussi, et PHP ne teste pas la valeur de
condition2. Nous verrons plus loin un cas d’utilisation de cette particularité.
Egalité et affectation
Il ne faut pas confondre l’opérateur d’égalité avec l’instruction d’affectation
- Pour affecter une valeur à une variable, on utilise l’opérateur =
- Pour tester une égalité, on utilise l’opérateur ==
if (prenom == "Agathe") message = "C’est un très beau prénom" ;
Concaténation
En javascript, la concaténation se fait avec l’opérateur "+", comme l’addition.
alert ( "Bonjour " + prenom . " !") ;
C’est le programme qui identifie si les variables concernées sont des nombres (auquel cas il
les additionne) ou si l’une des deux est une chaîne (auquel cas il les concatène).
Attention, cette ambiguïté est source de bugs. En cas de doute, il faut forcer le typage, par exemple en
concaténant avec une chaîne vide.
fonctions
On définit une fonction avec le mot-clef function. Entre parentèse, la liste des paramètres,
puis entre accolade, les instructions exécutées par la fonction :
function( liste de paramètres )
{
suite d’instructions
}
26/29
4.3.2 Les structures de contrôle
Les structures de contrôle sont les éléments dans la syntaxe du langage qui permettent de faire
des tests et des boucles. Javascript comporte la plupart des structures de contrôles de C ou de
java. Les plus courantes sont :
- if(condition) then {instructions} else {autres instructions}
- while (condition) {instructions}
- for (cpt=debut ; cpt<fin ; cpt++) {instructions}
Exemple (voir le fichier exempleJS.html) :
num=1 ;
resultat="" ;
while (num<1000)
{
resultat = resultat + " -- " + num ;
num=num*2 ;
}
alert (resultat) ;
L’exécution de ce code javascript donne :
En cas de doute, et pour découvrir les autres structures de contrôles, vous consulterez la
documentation en ligne.
Au passage, vous noterez que la fonction alert() permet d’afficher une fenêtre pop-up.
4.3.3 Conclusion sur javascript
Voici la liste de ce que vous devez connaître sur javascript
- Les structures de base, l’utilisation des variables
- ce qu’est un gestionnaire d’événement, et à quoi servent onMouseOver,
onMouseOut et onClick.
- A quoi sert la méthode document.getElementById() et comment on l’utilise.
- Comment on manipule en javascript les attributs des objets HTML
- Comment on crée de nouveaux objets HTML, et comment on les insère dans le
document.
Pour aller plus loin, vous pouvez explorer :
- l’orienté objet en javascript (prototype et constructor)
- la sécurité du client
- l’ajout de fonctionnalité dans Firefox
Exercice 8
27/29
-
-
programmer en javascript une calculatrice du jour de la semaine. Vous trouverez
l’algorithme sur internet. Vous ferez en HTML un formulaire pour saisir la date, et un
bouton de calcul (avec un comportement onClick) qui lance le calcul sur la date saisie.
Le résultat s’affiche dans une fenêtre « alert ».
Ajouter une fonction qui vérifie la validité de la date avant de faire le calcul.
Afficher le résultat dans un espace de la page prévu pour cela.
28/29
5 Sommaire
1
2
Introduction ........................................................................................................................ 2
premiers pas en HTML ...................................................................................................... 3
2.1
Les premières balises ................................................................................................. 3
2.1.1
2.1.2
2.1.3
2.1.4
2.1.5
2.2
2.3
2.4
2.4.1
2.4.2
2.4.3
2.4.4
2.4.5
2.4.6
3
3.3
3.3.1
3.3.2
3.3.3
3.4
3.4.1
3.4.2
Définition .................................................................................................................................... 9
Exemple ...................................................................................................................................... 9
Transmission des données vers le serveur .................................................................................. 9
Les input les plus utiles ............................................................................................................. 10
Les valeurs par défaut .............................................................................................................. 11
Les autres input ........................................................................................................................ 11
Le style pour un objet ............................................................................................................... 13
Le style pour un page web ........................................................................................................ 14
Les styles pour tout mon site..................................................................................................... 15
Tout ce qu’il faut savoir sur CSS ............................................................................. 15
Sur quoi s’applique-t-il ?.......................................................................................................... 16
Pour quel rendu graphique ?.................................................................................................... 16
Le style pour la mise en page ................................................................................................... 17
En conclusion ........................................................................................................... 17
A retenir : l’appel de style ........................................................................................................ 17
Le fond et la forme .................................................................................................................... 18
Premiers pas en Javascript................................................................................................ 20
4.1
Le meilleur de Javascript en 19 lignes ..................................................................... 20
4.2
Manipulation du code HTML .................................................................................. 22
4.2.1
4.2.2
4.3
4.3.1
4.3.2
4.3.3
5
Organisation d’une page HTML ................................................................................ 6
Les tableaux ................................................................................................................ 7
Les formulaires ........................................................................................................... 9
Premiers pas en CSS ........................................................................................................ 13
3.1
De l’importance d’avoir du style .............................................................................. 13
3.2
Les trois premiers pas ............................................................................................... 13
3.2.1
3.2.2
3.2.3
4
Les liens hypertextes ................................................................................................................... 4
Les attributs des objets ............................................................................................................... 4
Le document, un ensemble d’objets ............................................................................................ 4
Les divisions ............................................................................................................................... 5
Balises autofermantes ................................................................................................................. 5
Accéder aux attributs d’un objet............................................................................................... 22
Ajouter un nouvel objet ............................................................................................................ 24
La structure du langage ............................................................................................ 26
Opérateurs ................................................................................................................................ 26
Les structures de contrôle......................................................................................................... 27
Conclusion sur javascript ......................................................................................................... 27
Sommaire ......................................................................................................................... 29
29/29

Support de cours téléchargeable au format PDF Fichier

Transcription

Documents pareils

La Course d`Orientation ou comment joindre nature, sport et réflexion

MONECHO - Stage Dev Informatique 2016

Programme de formation creation site Internet HTML

dreamweaver perfectionnement

Le langage « HTML »

Mise en forme d`un document HTML

annonce de course - Comité Départemental de Course d`Orientation

La propriété BACKGROUND-COLOR

Cette carte interactive, réalisée par la chaîne de radio