Introduction
A - le HTML
B - le JavaScript
C - après la conception du site web
conclusion
A - le HTML
1. les bases de HTML
a. définition
b. le fichier HTML et sa structure
2. la programmation en HTML
a. les commandes de formatage
b. les liens
c. les tableaux
d. images, couleur et fond de page
B - le JavaScript
1. type variable et données
a. les variables
b. les types de base
c. les tableaux
2. les opérateurs arithmétiques et les opérateurs de comparaison
a. les opérateurs arithmétiques
b. les opérateurs de comparaison
3. les structures de contrôle
a. les instructions conditionnelles
b. les boucles
4. la gestion des évènements
C - après la conception du Site
les serveurs Web
a. rôle du serveur
b. en cas de problèmes
c. comment faire connaître votre site web
Introduction
Les outils de programmation regroupés dans cette page sont destinés essentiellement aux programmeurs débutants ou amateurs, qui souhaiteraient avoir quelques notions élémentaires en matière de programmation des sites web. Ces outils n'ont donc aucun caractère exaustif.
Le matériel nécessaire à la réalisation d'une page web est le suivant:
un ordinateur connecté au réseau internet un logiciel internet qui peut être internet explorer ou netscape navigator (communicator), ou opéra, etc ... un éditeur de texte qui peut être notepad, ou wordpad, ou microsoftWord, ou wordPerfect, etc ... windows 95, 98, 2000 etc ...
définitions
www: world wide web
web: un système graphique, interactif, multiplateforme, dynamique (les auteurs peuvent mettre les informations à jour à tout moment, sans que les utilisateurs n' aient besoin de nouveaux équipements) et distribué (c' est à dire que les informations sont reparties et distribuées sur des milliers de sites à travers le monde), qui présente les informations résidant sur internet sous forme d'hypertexte, à l' échelle mondiale.
navigateur: logiciel permettant de naviguer, indispensable pour voir, entendre ... le contenu des pages web.
exemple de navigateur: internet explorer 6.0, netscape navigator 7.1, opéra7.
site web: ensemble de pages situées sur une machine connectée au réseau internet et diffusant un certain type d' informations consultables et reliées de façon cohérentes de façon à donner un type d' informations à l' utilisateur.1. les bases de HTML
a. définition
HTML: Hyper Text Markup Language
Le HTML est un langage de description de document (titre, paragraphe, ...) structuré. Les différentes parties du document peuvent être étiquetées ou balisées en leur donnant un nom. Ce nom peut-être utilisé dans la suite pour effectuer certaines tâches. Sous HTML, les repères sont appelés balises ou marqueurs ou conteneurs. Tout ce qui n' est pas balise, fait partie du document.
Il existe plusieurs versions de HTML (2.0, 4.0 ...).
b. le fichier HTML et sa structure
Le fichier HTML est un fichier ASCII qui se compose de deux parties:
- le texte du document et
- les balises HTML précisant la structure et les liens hypertextes
La syntaxe de ces balises est la suivante:
<nom du marqueur>
.
.
.
texte (marqué)
.
.
.
</nom du même marqueur>
Les marqueurs peuvent être écrits en majuscules ou en minuscules
La structure d' un document HTML est la suivante:
<HTML>
.
.
.
contenu du document
.
.
.
</HTML>
de façon générale, le document a deux parties:
<HTML>
<head>
.
.
<TITLE> mettre le titre de la page ici </TITLE>
.
.
</head>
<BODY>
.
.
.
</BODY>
</HTML>
exercice 1:
exemple de petit programme: saisissez le intégralement sans y ajouter ou retrancher un iota, dans un éditeur de texte: notepad (bloc-notes de microsoft), ou wordpad, ou microsoftWord, ou wordPerfect, etc ... et sauvegardez-le au format (c' est à dire avec l' extension) ".html". Pour l' exécuter, ouvrez le document à partir de votre navigateur: internet explorer ou netscape navigator, etc ...
<HTML>
<HEAD>
<TITLE> exercice 1 </TITLE>
</HEAD>
<BODY>
Mon premier site web
</BODY>
</HTML>
2. la programmation en HTML
a. les commandes de formatage
Il s' agit ici de:
- enrichir le texte (gras ou italique),
- utiliser les textes préformatés (espace, tabulation),
- aligner le texte (à gauche, à droite, au centre),
- modifier la taille des polices, etc ...
style de caractère logique
- pour mettre un texte en italique: <EM>placer ici le texte à mettre en italique</EM>
- pour mettre un texte en gras: <STRONG>placer ici le texte à mettre en gras</STRONG>
- pour mettre un texte en valeur: <DFN>placer ici le texte à mettre en valeur</DFN>
style physique
- gras: <B>texte à mettre en gras</B>
- italique: <I>texte à mettre en italique</I>
- indice: <SUB>texte à mettre en indice</SUB>
- exposant: <SUP>texte à mettre en exposant</SUP>
- retour à la ligne: <BR> mettre cette balise pour forcer le retour à la ligne.
police de caractères
<FONT SIZE = n FACE = "k">placer ici le texte sur lequel doivent agir les attributs du marqueur FONT</FONT>
NB:
- "n" est un entier qui peut varier de 1 à 7 et représente la taille de la police;
- "k" est une chaîne de caractère qui correspond au nom d'une police de caractère; par exemple, k = Times New Roman, ou k = Verdana, ou k = Fixedsys, ou k = Courier New etc ...
exercice 2:
<HTML>
<HEAD>
<TITLE> exercice 2 </TITLE>
</HEAD>
<BODY>
Vous faites vos premiers pas dans la programmation des sites Web <BR>
Changeons de sujet maintenant; <B> à la une de l'actualité, la question irakienne divise qui? </B><I> les grandes puissances</I> <BR>
<FONT FACE = fixedsys SIZE = 6> le moment est venu d' essayer une autre police de caractère, et de varier la taille des caractères</FONT>
</BODY>
</HTML>
b. les liens
Un lien permet de pointer vers un fichier; le fichier s' ouvre lorsque le lien est activé (par exemple en cliquant dessus).
La balise utilisée est la suivante: <A>...</A>
syntaxe: <A>Name = "VarBalise" HREF = "NomFichier"> TITLE = "Titre du lien"</A>
exercice 3:
<HTML>
<HEAD>
<TITLE> exercice 3 </TITLE>
</HEAD>
<BODY>
je fais déjà des progrès! <A name = "lien1" HREF = "C:/DossierWeb/essai1.html">Cliquez ici pour voir s' afficher ma première page web</A>
le bout du tunnel est encore loin! </BODY>
</HTML>
attention! le nom "C:/DossierWeb/essai1.html" est un exemple; saisissez en lieu et place, le nom que vous avez donné à l' exercice 1
NB: le nom comprend aussi le chemin d' accès au document; ci-dessus, le chemin d' accès est "C:/DossierWeb/" .c. les tableaux
création:
<TABLE>
.
.
.
</TABLE>
les attributs de ce marqueur sont:
- BORDER = n : épaisseur de la bordure du tableau
- ALIGN = LEFT/RIGHT/CENTER : justification du tableau (à gauche, à droite, ou au centre)
- CELLSPACING = n : longueur des cellules
- CELLPADDING = n : hauteur des cellules
- WITH = n %: pourcentage de l' écran que doit occuper le tableau
NB: n est un nombre entier
Il est à noter qu 'à ce stade de la création du tableau, vous ne verrez aucun tableau apparaître à l' écran. En effet, lorsque le tableau, qui est en réalité constitué de cellules, est physiquement crée, les cellules n' apparaissent que une à une, au fur et à mesure que vous les remplissez. Pour le remplissage du tableau, d' autres marqueurs sont nécessaires:
- Marqueur de ligne: <TR></TR>
- entête des cellules: <TH> placer ici l' entête des cellules</TH>
- contenu des cellules: <TD> placer ici le contenu des cellules</TD>
Dans chaque cellule, on peut introduire du texte, des chiffres, etc ...
exercice 4: création du premier tableau
<HTML>
<HEAD>
<TITLE> Exercice 4 </TITLE>
</HEAD>
<BODY>
<TABLE border = 3 cellspacing = 5 cellpadding = 6 >
<TD> Dimanche </TD>
<TD> Lundi </TD>
<TD> Mardi </TD>
<TD> Mercredi </TD>
<TD> Jeudi </TD>
<TD> Vendredi </TD>
<TD> Samedi </TD>
</TABLE>
</BODY>
</HTML>
exercice 5: création du deuxième tableau
<HTML>
<HEAD>
<TITLE> Exercice 5 </TITLE>
</HEAD>
<TABLE border=3 cellpadding=14 align=center>
<TR>
<TH> </TH>
<TH> Dimanche </TH>
<TH> Lundi </TH>
<TH> Mardi </TH>
<TH> Mercredi </TH>
<TH> Jeudi </TH>
<TH> Vendredi </TH>
</TR>
<TR>
<TH> 7h - 7h55 </TH>
<TH> algo </TH>
<TH> C++ </TH>
<TH> Vbasic </TH>
<TH> POO </TH>
<TH> Réseaux </TH>
<TH> Calc num </TH>
</TR>
<TR>
<TH> 8h - 8h55 </TH>
<TH> algo </TH>
<TH> C++ </TH>
<TH> Vbasic </TH>
<TH> POO </TH>
<TH> Réseaux </TH>
<TH> Calc num </TH>
</TR>
<TR>
<TH> 9h - 9h55 </TH>
<TH> algo </TH>
<TH> C++ </TH>
<TH> Vbasic </TH>
<TH> POO </TH>
<TH> Réseaux </TH>
<TH> Calc num </TH>
</TR>
<TR>
<TH> 10h - 10h55 </TH>
<TH> Réseaux </TH>
<TH> Calc num </TH>
<TH> algo </TH>
<TH> maint </TH>
<TH> C++ </TH>
<TH> maint </TH>
</TR>
<TR>
<TH> 11h - 11h55 </TH>
<TH> Réseaux </TH>
<TH> Calc num </TH>
<TH> algo </TH>
<TH> maint </TH>
<TH> C++ </TH>
<TH> maint </TH>
</TR>
</TABLE>
</BODY>
</HTML>
d. images, couleur et fond de page
1. type variable et données
les images
B - le JavaScript
<IMG SRC = "NomFichier" align = k>
NB: k peut prendre la valeur LEFT ou RIGHT ou CENTER.
couleurs et fond de page
Une couleur est une combinaison des couleurs de base: ROUGE, NOIR, BLANC; en règle générale, l' intensité d'une couleur varie de 0 (intensité qui correspond au NOIR) à 255 (intensité qui correspond au BLANC). Sous HTML, on utilisera les valeurs hexadécimales (qui varient de 00 à FF) de ces intensités. En lieu et place des valeurs hexadécimales, on pourra aussi utiliser les noms anglais des couleurs (BLACK, GREEN, WHITE, etc ...).
Pour colorier un fond de page, on utilisera l' attribut BGCOLOR dans le marqueur <BODY> déjà utilisé plus haut: <BODY BGCOLOR = "couleur">
NB: couleur peut prendre la valeur BLUE, GREEN, SILVER, GOLD ....
Le JavaScript JavaScript est un langage qui, associe au HTML, permet de rendre les pages dynamiques. Il utilise les variables, les fonctions, les objets, tout comme les langages C++, Java, etc ...• ils doivent commencer par une lettre
• leur longueur maximale est de 255 caractères
• ils ne doivent pas contenir de point ni de caractère de déclaration de type
• ils doivent être unique à l' intérieur d' un domaine de validité
Lorsque les variables sont déclarées, la syntaxe de déclaration est: var idvar [=valeur].
NB: idvar est le nom de la variable déclarée.
exemple de déclaration d'une variable: numbPers = 0
Il est possible de déclarer plusieurs variables en les séparant d'une virgule.
exemple: x, y, numbPers = 20, prix = 10000, nom = tonguim.Les variables sont automatiquement du type de la variable qui leur est affectée.
boolean: les variables de ce type ne peuvent prendre que les valeurs true ou false
string: les variables de ce type contiennent des chaînes de caractères
Il existe des caractères spéciaux pour formater les chaînes de caractères:
2. les opérateurs arithmétiques et les opérateurs comparaison
a. les opérateurs arithmétiques
b. les opérateurs de comparaison
a. les structures conditionnelles
•if (condition)
{instruction 1}
[else
{instruction 2}
]•for (expression, initialisation; condition sortie; progression)
{instruction}•while (condition)
{instruction}•do
{instruction}
while(condition)
•break: force la sortie d'une boucle ou d' un blocdes contrôles (en programmation visuelle, les objets sont tout ce qu' on affiche à l' écran)
Les évènements les plus utilisés sont:
•par rapport au comportement de la souris
on click
on DbClick
on MouseMove
on MouseOut
on MouseOVer
on MouseUp
•par rapport au comportement du clavier
on keyPress
on keyDown
on keyUp
•par rapport au comportement des contrôles
on Blur
on Form
on Change
on Select
•par rapport au comportement des fenêtres
on Resize
on Load
on unLoad
exercice 6: exemple d' utilisation du HTML et de JavaScript dans un programme
<HTML>
<HEAD>
<TITLE> exercice 6 </TITLE>
<script langage = "JavaScript">
function afficherAge (nom, prenom, an)
{
if(!nom) {nom = "GUINKO"};
if(!prenom) {prenom = "Ferdinand"};
if(!an) {an = 1979};
window.alert (nom + " " + prenom + " vous avez " + (2002 - an) + " ans");
}
</script>
</HEAD>
<BODY>
<CENTER> <b>Gestion de l'age par JavaScript</b> </CENTER><br>
Pour connaître votre âge donnez le nom, le prenom et l' année de naissance puis cliquez sur le bouton CalculAge ci-dessous <p>
En cas d' erreur ou pour tout effacer, appuyer sur recommencer <p>
<p>
<form name = "varform">
Nom: <input name = "varNom", size = "30"> <p>
Prénom: <input name = "varPrenom", size = "28"> <p>
Année de Naissance: <input name = "varAn", size = "17"> <p>
<input type = "button" name = "varExe" value = "CalculAge"
onclick = "afficherAge (document.varform.varNom.value,
document.varform.varPrenom.value,
document.varform.varAn.value) "><input type = "reset" name = "varRebegin" value = "recommencer"></form>
</BODY>
</HTML>
C - après la conception du site
Un serveur web est un programme situé dans un ordinateur ayant accès à l' internet, et qui attend qu' un navigateur se connecte et lui présente une requête. Le serveur localise alors le fichier demandé et le lui renvoie. On parle alors généralement de serveur et de client web.
Lorsque le programmeur a achevé son site web, il l' installe dans un serveur web, et cela peut se faire de plusieurs façons:
- par l' intermédiaire d' un fournisseur haut débit maîtrisant l' administration d' un serveur;
- par l' intermédiaire d' un provider internet, c' est à dire un fournisseur d' accès et de service internet, qui vous indique comment transférer vos fichiers et quel est l' espace disque qui vous est alloué;
- en utilisant des sites appropriés;
- en créant son propre serveur.
- vérifier la casse (majuscule ou minuscule des liens) et comparer avec les noms réels des fichiers appelés
Si les problèmes persistent, appelez l' administrateur système
c. comment faire connaître votre site web
Pour se faire connaître, il faut se faire référencer par les principaux moteurs de recherche électronique (par exemple, hotBot France, altavista, voila, google, lycos France, northern light, all the webs) ou par les principaux annuaires électroniques (tel que yahoo France, lycos France, nomade, msn, multimania).
Loin d' être exhaustif, le petit cours ci-dessus permet aux programmeurs de sites web débutant d' avoir les outils de base pour commencer le développement de eur site. Ces outils ont été pris ça et là, dans de nombreux ouvrages, dont le cours Programmation des sites web et java préparé par M. BINDIA Jules Ferry, enseignant d' informatique à l' Ecole Supérieure des Sciences EConomiques (ESSEC) de Douala et à l'Université Adventiste Cosendai (UAC) de Nanga-Eboko, au CAMEROUN, mais aussi de notre expérience personnelle en la matière.
Pour aller plus loin
bibliographie
1. Laura Lemay, "Le programmeur HTML L.0", s & SM Paris 1998
2. Thomas A. Powel, "Web design: the complete reference", Mc Graw Hill, USA 2000
3. Vigel Mc Farlane, "professional java script", wrox, USA 1999webographie
le javascript sur le net
1. http://www.editeurjavascript.com
2. http://www.webteacher.com/javascript
4. http://javascript.internet.com
5. http://developer.netscape.com
6. http://www.javascriptcity.com
8. http://www.javascriptsearch.com
le html sur le net
5. http://www2.imagiware.com/RxHTML
6. http://www.cwru.edu/help/introHTML/toc.html
7. http://www.mcli.dist.maricopa.edu
8. http://www.ku.edu/~acs/docs/other/HTML_quick.shtml
9. http://www.utoronto.ca/webdocs/HTMLdocs/ NewHTML/htmlindex.html
10. http://archive.ncsa.uiuc.edu/General/Internet/ WWW/HTMLPrimerAll.html