ch3 Pages Web Statiques

LYCEE SECONDAIRE HOUMT-SOUK PROFESSEUR: Mr Bayahi Raouf
 DISCIPLINE : Informatique
Chapitre 3 LES PAGES WEB STATIQUES
A) Le langage HTML:
I) Introduction:
Activité 1 & 2 p51 52:
Le langage HTML n'est pas un langage de programmation proprement dit !
Ce sont "simplement" des balises pour mettre en forme (avec des liens, en tableau, ...)
du texte et des images !
Une balise est une "instruction" comprise entre crochets < > qui possède un nom
et parfois des attributs.
Presque toutes les balises doivent être ouvertes puis refermées. On retrouvera donc
souvent une balise de début et une balise de fin. La balise de fin porte le même
nom que la balise de début à l'exception du nom du la balise qui est précédé du
signe /. Nous aurons donc par exemple : (ouverture) <XYZ> et (fermeture) </XYZ>.
Le nom de la balise (contenu entre les crochets) n'est pas sensible à la casse, il peut
être écrit indifféremment en majuscule, en minuscule ou un mélange des 2.
II) Structure générale d'un programme html:

Le Hyper Text Markup Language impose une structure type aux pages web. Celles-ci
sont composées:
- d'une entête (ou tête) qui informe le navigateur et les moteurs de recherche, délimité
par <HEAD> et </HEAD>
- d'un corps qui grosso modo correspond à ce qui va s'afficher à l'écran et qui est
délimité par <BODY> et </BODY>.
Ainsi, une page web type et vide de tout texte se présentera de la façon suivante:
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
Assez de bla bla…
III) Les balises du langage HTML:

1) Textes et paragraphes:
Activié3 p54:
Balise Rôle

<b>…</b>
<i>…</i>
<u>…</u>
<strike>…</strike>
<s>…</s>
<big>…</big>
<small>…</small>
<font>…</font>
<sup>…</sup>
<sub>…</sub>
<br>
<hr>
<center>…</center>
<div>…</div>
<p>…</p>
2) Titres:
Activié4 p57:
Balise Rôle
<h[1-6]>…</h[1-6]>
3) Images:
Activié5 p58:
Balise Rôle
<img src=…
align=…>
<body
background=…>
4) Listes:
Activié7 p61:
Balise Rôle
<ul type="circle">
"disc"
"square"
<li>élément de liste</li>
</ul>
<ol type="a" >
"A"
"i"
"I"
</ol>
<ol start="valeur de départ">
<li value="valeur de
poursuite">élément de liste</li>
</ol>
<dl>
<dt>expression à définir</dt>
<dd>définition de l'expression</dd>
</dl>
5) Tableaux:
Activié8 p63:
Balise Rôle
<table>…</table>
<tr>…</tr>
<td>…</td>
Attributs de la balise <table>

Attribut rôle
Cellspacing
Cellpading
Border
Width
Height
Align
Bgcolor
Attributs des balises <tr> et <td>
Attribut rôle
Align
Valign
Width
Height
Bgcolor
Rowspan
Colspan
6) Liens hypertextes:
Activité 9&10 p68, 69:
Balise Rôle
<a href="adresse">…</a>
<a href="#signet">…</a>
<a href="http://...">…</a>
<a href="ftp://...">…</a>
<a href="mailto://...">…</a>
<a href="file://...">…</a>
<a name="nom du signet">…
</a>
7) Formulaires:
Activité 11 p70:
Balise Rôle
<form name=… action="…"
method="GET/POST">…</form>
<input type="text" size="…"
maxlength="…" name="…" value="…">
<textarea cols="…" rows="…"
name="…">… </textarea>
<input type="radio" name="nom"
value="valeur"> Texte
<input type="checkbox" name="nom"
value="valeur"> Texte
<select size="hauteur" name="nom">
<option>élément</option>
<option>autre élément</option>
</select>
<input type="button" name="nom"
value="texte"> Texte
<input type="reset" name="nom"
value="texte"> Texte
<input type="file" name="nom"
size="…"> Texte
8) Cadres (frames):
Activité 12 p74:
Balise Rôle
<frameset cols="colonnes"
rows="rangées">…</frameset>
<frame src="URI" name="nom">
<noframes>le navigateur ne peut pas
afficher de cadres</noframes>
B) Le langage javascript:
I) Introduction:
Le Javascript est un langage de script incorporé dans un document HTML.
Historiquement il s'agit même du premier langage de script pour le Web. Ce langage
est un langage de programmation qui permet d'apporter des améliorations au langage
HTML en permettant d'exécuter des commandes du côté client, c'est-à-dire au niveau
du navigateur et non du serveur web
II) Formalisme de base de java script:
Activité2 P79
III) Notion d'objet :
1)Introduction:
Le Javascript traite les éléments qui s'affichent dans votre navigateur comme des
objets, c'est-à-dire des éléments :
 classés selon une hiérarchie pour pouvoir les désigner précisément ;
 auxquels des propriétés sont associées.
Imaginez un arbre dans un jardin comportant une branche sur laquelle se trouve un
nid. On suppose la hiérarchie d'objets est définie comme ceci:
 jardin
o arbre
 branche
 feuille
 nid
o largeur: 20
o couleur: jaune
o hauteur: 4
 tronc
 racine
Le nid sur l'arbre est donc désigné comme suit:
jardin.arbre.branche.nid
Contrairement au nid situé sur la balançoire:
jardin.balançoire.nid
Pour changer la couleur du nid (dans l'arbre) et le peindre en vert, il suffit d'une
commande telle que la suivante :
jardin.arbre.branche.nid.couleur= vert;
Les objets en Javascript sont représentés de cette manière à ceci près que ce n'est pas
un jardin qui est représenté sous forme d'objets mais la fenêtre du navigateur
2)Les objets et leur hiérarchie:
a Hiérarchie:
Exemple:
Dans ce document, on trouve trois objets. Des boutons radio, un bouton classique et
une zone de texte. Ce sont respectivement l'objet radio, l'objet bouton, l'objet texte.
Autrement dit
 L'objet fenêtre contient l'objet document qui contient l'objet formulaire qui
contient à son tour l'objet radio,
contient à son tour l'objet bouton
contient à son tour l'objet texte.
b Propriétés des objets:
Les objets Javascript ont des propriétés personnalisées. Dans le cas des boutons radio,
une de ses propriétés est, par exemple, sa sélection ou sa non-sélection (checked en
anglais).
En Javascript, pour accéder aux propriétés, on utilise la syntaxe :
Nom_de_l'objet.nom_de_la_propriété
Dans le cas du bouton radio "semaine", pour tester la propriété de sélection, on écrira
document.form.radio[0].checked
c Méthodes des objets:
Activité3 p 82:
A chaque objet JS, le langage a prévu un ensemble de méthodes (fonctions dédiées à
cet objet) qui lui sont propres tel que "write ()" pour l'objet document
3)Emplacement du code javascript:
Activité4 p82
IV)Les variables:
Activité5 p84
Activité6 p86
V)Les opérateurs prédéfinies:
1)Opérateurs de calcul:
Signe Nom Signification Exemple Résultat

+ Plus addition x+3 14
- moins soustraction x-3 8
* multiplié par multiplication x*2 22
/ divisé par division x /2 5.5
% modulo reste de la x%5 1
division par
= a la valeur affectation x=5 5
2) Opérateurs de comparaison:
Signe Nom Exemple Résultat
== égal x==11 true
< inférieur x<11 false
<= inférieur ou égal x<=11 true
> Supérieur x>11 false
>= supérieur ou égal x>=11 true
!= Différent x!=11 false
3)Opérateurs associatifs:
Signe Description Exemple Signification Résultat
+= plus égal x += y x=x+y 16
-= moins égal x -= y x=x-y 6
*= multiplié égal x *= y x=x*y 55
/= divisé égal x /= y x=x/y 2.2
4)Opérateurs logiques:
Signe Nom Exemple Signification
&& Et (condition1) && condition1 et condition2
(condition2)
|| Ou (condition1) || condition1 ou
(condition2) condition2
5)Opérateurs d'incrémentation:
Signe Description Exemple Signification Résultat
x++ incrémentation y = x++ 3 puis plus 1 4

(x++ est le même que
x=x+1)
x-- décrémentation y= x-- 3 puis moins 1 2
(x-- est le même que x=x-1)
VI)Les entrées/sorties:
Activité7p88:
 L'entrée:nom_variable=prompt ("texte de la boite
d'invite","valeur par défaut")
 La sortie:
o document.write ("message à écrire"+nom_var);
o Alert ("message à écrire"+nom_var);
VII)Les structures de contrôle:
1)Les structures conditionnelles:
a La structure IF:
Activité 8 p89:
If (condition vraie)
{
instructions1;
}
Else
{
instructions2;
}
b La structure SWITCH:
Activité 9 p91:
Switch (expression)
{
Case v1:inst11;
inst12;…
Break;
Case v2:inst21;
inst22;…
Break;
…
Default:Inst_n;
Break;
}
2)Les structures itératives:
a Structure for:
For (valeur initiale ; condition ; progression)
{
Instructions;
}
b Structure do..while:
Do
{
Faire qque chose;
}
While (condition)
c Structure While:
While (condition vraie)
{
Continuer à faire quelque chose
}
VIII) Les fonctions:
Activité 13 p95:
function nom_de_la_fonction (arguments)
{
... Code des instructions...
[Return nom_var (optionnelle)]
}
IX)Gestions des événements:
événement description
onClic Lorsque l'utilisateur clique sur un bouton, un lien ou tout autre
élément.
onLoad Lorsque la page est chargée par le browser ou le navigateur.
onUnload Lorsque l'utilisateur quitte la page.
onMouseOve Lorsque l'utilisateur place le pointeur de la souris sur un lien ou tout
r autre élément.
onMouseOut Lorsque le pointeur de la souris quitte un lien ou tout autre élément.
Attention : Javascript 1.1 (donc pas sous MSIE 3.0 et Netscape 2).
onFocus Lorsque un élément du formulaire a le focus c à d devient la zone
d'entrée active.
onBlur Lorsque un élément de formulaire perd le focus c à d que l'utilisateur
clique hors du champ et que la zone d'entrée n'est plus active.
onChange Lorsque la valeur d'un champ de formulaire est modifiée.
X)Les formulaires:
1)Contrôle des zones de texte:
Activité17 p 101:
On peut affecter la valeur d'une zone de saisie (champ et zone de
texte et même un champ password) à une variable à l'aide de la
syntaxe suivante:
NomVariable=document.NomFormulaire.NomZone.value
En inversant l'ordre de cette syntaxe on peut modifier la valeur de
la zone
Application P109
2)Boutons radio:
Activité 18 p 103:

Pour vérifier l'état d'un bouton on doit utiliser une expression
de type:
NomVariable=document.NomF.NomCase[indice].checked
NomVariable est une variable booléenne
 Pour récupérer la valeur d'un bouton radio:
NomVariable=document.NomF.NomCase[indice].value
 Pour connaître le nombre d'options:
NomVariable=document.NomF.NomCase.length
3)Les cases à cocher:
Activité 19 p104:
 Pour vérifier si une case est cochée ou non on utilise:
NomVariable=document.NomF.NomCase. checked
 Pour vérifier la valeur d'une case à cocher on utilise:
NomVariable=document.NomF.NomCase. value
4)Les listes de sélection:
Activité 20 p105:
 Pour ajouter une nouvelle option à la liste:
NomVariable=new Option (texte, valeur)
document.NomF.NomListe.options[taille]=NomVariable;
 Pour supprimer une option:
document.NomF.NomListe.options[i]=null;

ch3 Pages Web Statiques

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

ch3 Pages Web Statiques

Transféré par

Droits d'auteur :

Formats disponibles

LYCEE SECONDAIRE HOUMT-SOUK PROFESSEUR: Mr Bayahi Raouf

Chapitre 3 LES PAGES WEB STATIQUES

II) Structure générale d'un programme html:

Assez de bla bla…

III) Les balises du langage HTML:

Attributs de la balise <table>

Signe Nom Signification Exemple Résultat

x++ incrémentation y = x++ 3 puis plus 1 4

Vous aimerez peut-être aussi