Les échanges d'information sur le web sont dissymétriques.
L'utilisateur face à sa machine (ordinateur, mobile) est du côté client de l'échange. L'autre extrémité constitue le côté serveur. Client et serveur échangent de l'information suivant un protocole appelé HTTP.
Les mots client et serveur s'appliquent aussi bien à une machine qu'aux logiciels qu'elle fait tourner.Une machine peut jouer le rôle de serveur parce qu'elle exécute des logiciels serveurs.
Le navigateur web constitue le logiciel client le plus fréquemment utilisé côté client.
Le navigateur web (ou autre logiciel client web) envoie au serveur des demandes appelées requêtes HTTP.
Les informations demandées (ressources) sont contenues dans la réponse (à condition que le serveur soit capable de les fournir). Le navigateur utilise ce contenu pour construire et afficher une page web en assemblant les différentes ressources
Pour cela il suit les instructions fournies dans le code source de la page.
Le code source est contenu dans un fichier html au format texte pur. Il utilise un ensemble de langages spécifiques, que le navigateur doit interpréter.
Le code source d'une page web est écrit en utilisant les trois langages suivants :
HTML signifie "HyperText Markup Language". Le qualificatif HyperText renvoie à la possibilité de relier différents documents entre eux, via des liens hypertexte cliquables.
"Markup" désigne la technique de description de contenu par des "balises" incluses dans le document.
On peut observer la différence entre le contenu affichable et le code source, dans lequel le code HTML est visible.
On constate que le code HTML, qui s'intercale au milieu du contenu affichable, est toujours encadré par les caractères "<"et ">".
. Un élément de code HTML entre "<" et ">" est appelé balise . Certaines balises s'emploient isolément, par exemple les balises <br> et <img>, une balise unique suffisant dans ces deux cas à désigner l' élément du document (saut de ligne et image).
Cependant la plupart des balises s'emploient par paire, sous la forme d'une balise "ouvrante" et d'une balise "fermante" identique à un / près, comme par exemple <div> et </div> ou <body> et </body>. Elles délimitent alors un élément dans le document. Différents éléments être emboités les uns dans les autres, suivant une structure arborescente.
En ouvrant la page dans le navigateur puis en utilisant la combinaison de touches Ctrl+Maj+C, on peut mieux visualiser l'arborescence des éléments et la correspondance entre élément et code.
Les indications en vert encadrées par "<!--" et "-->". sont des commentaires du code html.
On constate que le HTML permet une certaine mise en page (titres, paragraphes, sauts de ligne) ainsi qu'un peu d'interactivité (lien hypertexte) mais cela demeure limité. Aux débuts du web, HTML disposait aussi de fonctionnalités de mise en forme des éléments mais actuellement toutes ces fonctionnalités sont déléguées à CSS.
Cet exemple montre comment l'utilisation de règles CSS permet de modifier l'aspect du document précédent. On peut voir ci-dessous côte à côte le code source et son résultat?
En examinant le code source on peut constater qu'un attribut nommé style a été ajouté dans la balise des éléments dont l'aspect a changé. Les propriétés de style de l'élément sont décrites dans la valeur de l'attribut style.. Par exemple <div style="background-color:#eeeeff;font-size:14pt;"> pour modifier la couleur de fond (background-color) et la taille (font-size) de l'élément div concerné.
Chaque indication de style est composée d'un nom de propriété (ex : color pour désigner la couleur de texte) suivie de ':' et de la valeur à donner à cette propriété. Elle se termine par un point-virgule. Plusieurs propriétés peuvent être modifiées, comme c'est le cas pour l'élément div cité ci-dessus, ainsi que, dans l'exemple, pour l'élément image img.
Cet autre exemple illustre une autre façon d'inclure du style dans une feuille, à partir de l'en-tête du document, dans lequel on ajouté un élément HTML de type style :
<style type="text/css"> h1{ text-decoration:underline; color:#ff4400; } div.special { color:seagreen; font-family:sans; font-size:18pt; font-style:italic; text-decoration:underline; font-weight:lighter; line-height:2rem; border-style:dotted; border-width:1px; border-color:#000000; margin:1rem 12rem; padding:1rem; } </style>
h1{ text-decoration:underline; color:#ff4400; }
Il est à noter que si la page contient plusieurs éléments de type h1, la mise en forme s'appliquera à tous ces éléments : on dit qu'on a défini une règle CSS que devront suivre tous les éléments du type désigné.
La seconde partie
div.special { color:seagreen; font-family:sans; font-size:18pt; font-style:italic; text-decoration:underline; font-weight:lighter; line-height:2rem; border-style:dotted; border-width:1px; border-color:#000000; margin:1rem 12rem; padding:1rem; }
Une page web peut aussi utiliser des règles CSS définies dans un fichier externe.
En plus de la description de contenu en HTML/CSS, le code source d'une page web peut contenir des instructions écrites en langage de programmation Javascript, que le navigateur sait interpréter. Cela permet de modifier dynamiquement la page en réponse aux actions de l'utilisateur ou à d'autres évènements.
Le navigateur va réagir à certains des évènements concernant la page Web en exécutant les blocs de code (scripts) appropriés.
Un script qui s'exécute en réponse à un évènement est appelé "gestionnaire d'évènement" (en anglais : "event handler") et la convention usuelle est de lui attribuer un nom commençant pas "on" suivi du nom de l'évènement concerné. Chacun des éléments HTML d'une page Web peut être une source d'évènement.
Ouvrir dans Notepad++ le fichier exemple2 déjà vu précédemment.
Modifier la ligne
de la façon suivante:
Utiliser le menu Exécuter/ouvrir dans Firefox de Notepad++ pour voir le résultat.
Cliquer sur la ligne "première division" transforme ce texte en "et voilà le travail".
Analyse du code Javascript ajouté :
Ce code a été ajouté dans la balise ouvrante d'un élément HTML, qui sera donc la cible des évènements dont on va définir ou redéfinir le traitement.
onclick="..." signifie qu'on va définir (ou redéfinir) la façon dont l'élément cible va répondre au clic de souris. Les actions qui devront être effectuées (gextionnaire d'évènement) seront décrites entre les guillemets.
innerHTML désigne le contenu HTML d'un élément, qui apparaît entre la balise ouvrante et la balise fermante. Ici on a écrit this.innerHTML pour spécifier qu'on s'intéresse au contenu HTML de l'élément cible (this).
On redéfinit la valeur de ce contenu en lui affectant une chaîne de caractères "et voilà le travail". En Javascript les chaînes de caractères peuvent être entourées par "" ou '' mais ici les "" sont déjà utilisés pour encadrer le gestionnaire d'évènement. Le principe est le même qu'en Python : il faut alterner soigneusement les "" et '' !
Le point-virgule marque la fin d'une instruction Javascript.
Il est possible de modifier dynamiquement non seulement le contenu mais aussi le style de l'élément.
Modifier le code précédent pour ajouter une nouvelle instruction au gestionnaire d'évènements :
Il est aussi possible de modifier dynamiquement la classe de style d'un élément.
Javascript est un langage complet permettant par exemple d'effectuer des branchements conditionnels :
<div onclick=" if (this.className==''){ this.className='special'; } else { this.className=''; } "> ce texte changera de style chaque fois que l'on cliquera dessus </div>
dont l'effet peut être testé ci-dessous en cliquant sur le texte :
On peut aussi écrire et appeler des fonctions :
<html> <head> <title> exemple de page simple </title> <meta charset="utf-8"> <script> function change(cible){ cible.innerHTML='et voilà le travail'; cible.style.backgroundColor='#ffffaa'; cible.style.margin='4em'; cible.style.padding='0 10em'; cible.style.fontWeight='bolder'; } </script> </head> <body> <div onclick="change(this);"> division cliquable</div> </body> </html>
<!doctype html> <html> <head> <title> exemple de page simple </title> <meta charset="utf-8"> <style type="text/css"> div{ font-size:18pt; color:darkblue; padding:1em; } </style> </head> <body> <div onclick=" cible=document.getElementById('changement'); cible.innerHTML='et ça a changé !'; cible.style.color='magenta'; "> Cliquer ici</div> <div id="changement"> Il faut que ça change ! </div> </body> </html>
Explication du code du gestionnaire d'évènement onclick :
On reconnaît l'opérateur . déjà rencontré en Python, qui exprime une appartenance de ce qui le suit à ce qui le précède (par exemple, cible.style pour désigner le style de l'objet appelé cible)
Par exemple le code ci-dessus permet de changer les propriétés de tous les éléments de type div.
<!doctype html> <html> <head> <title> exemple de page simple </title> <meta charset="utf-8"> <style type="text/css"> div { font-size:14pt; color:darkgreen; margin:1em; } </style> </head> <body> <p style='background-color:yellow;' onmouseover=" liste=document.getElementsByTagName('div'); liste[0].style.color='magenta'; liste[1].style.color='blue'; liste[2].style.color='grey'; "> Passer la souris ici </p> <div> Elément 1 </div> <div> Elément 2 </div> <div> Elément 3 </div> </body> </html>
Javascript permet d'ouvrir trois sortes de boîte de dialogue permettant d'obtenir une réponse de l'utilisateur. Elles ont pour caractéristique commune de bloquer l'accès à la page web en attendant une action de l'utilisateur.
Pour chacune de ces boîtes, l'ouverture se fait à l'aide d'une fonction Javascript, dont la valeur de retour code la réponse éventuelle de l'utilisateur dans le cas des boîtes confirm et prompt. Les paramètres de la fonction permettent de personnaliser la boîte de dialogue.
Exemple : le code source ci-dessous crée une page HTML trois éléments div d'aspect personnalisé grâce à un style, un clic sur chacun d'eux permet d'ouvrir un des types de dialogue.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type='text/css'> div{ border:solid 1px #000000; background-color:#ddeeff; margin:10px; width:15em; } </style> </head> <body> <div onclick="alert('Ceci est une boite alert');"> Cliquer ici pour ouvrir une boite alert </div> <div onclick="confirm('Ceci est une boîte confirm, êtes vous d\'accord ?');"> Cliquer ici pour ouvrir une boite confirm </div> <div onclick="prompt('Ceci est une boite prompt','réponse suggérée');"> Cliquer ici pour ouvrir une boite prompt </div> </body> </html>
ce qui donne :
L'allure et le contenu des boîtes de dialogue dépendent aussi du navigateur utilisé. Si vous testez l'effet du code dans le cadre ci-dessus sous Firefox, vous pourrez observer que si vous ouvrez des boîtes de dialogue à intervalle trop rapprochés, Firefox rajoute une case à cocher permettant de bloquer l'ouverture de nouvelles boîtes de dialogue. Avec d'autres navigateurs, vous pourrez observer que le nom de la page web ayant ouvert la boîte de dialogue est indiqué dans celle-ci.
Une utilisation logique des fonctions confirm et prompt conduit à utiliser leurs valeurs de retour. Par exemple, le code ci-dessous remplace le contenu de l'élément div sur lequel on a cliqué pour ouvrir la boîte, par la réponse de l'utilisateur dans cette boite.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type='text/css'> div{ border:solid 1px #000000; background-color:#ddeeff; margin:10px; width:15em; } </style> </head> <body> <div onclick="this.innerHTML=confirm('Ceci est une boîte confirm, êtes vous d\'accord ?');"> Cliquer ici pour ouvrir une boite confirm </div> <div onclick="this.innerHTML=prompt('Que pensez vous des boîtes prompt ?','Elles sont top');"> Cliquer ici pour ouvrir une boite prompt </div> </body> </html>
A tester dans le cadre ci-dessous :
La valeur de retour de prompt est une chaîne de caractères tandis que celle de confirm peut être utilisée comme un booléen. Par exemple :
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type='text/css'> div{ border:solid 1px #000000; background-color:#ddeeff; margin:10px; width:15em; } </style> </head> <body> <div onclick="if (confirm('C\'est confirmé ou \r\n c\'est annulé ?! \r\n Réfléchissez bien ')) {this.innerHTML='Vous avez confirmé ! ';} else {this.innerHTML='Vous avez annulé! ';} "> Confirmer ou annuler, that is the question ... </div> <div onclick= "this.innerHTML= 'Les boîtes prompt sont '+prompt('Comment trouvez-vous les boîtes prompt','top') ;"> Cliquer ici pour donner votre avis sur les boîtes prompt. </div> </body> </html>
A tester dans le cadre ci-dessous :
On remarque au passage que le caractère d'échappement \ , et les codes spéciaux \r\n pour le saut de ligne, s'utilisent, à l'intérieur des chaînes de caractères Javascript, exactement comme en Python (et, de fait, comme dans beaucoup d'autres langages de programmation).
Les formulaires sont à l'origine conçus pour permettre à l'utilisateur (côté client, donc) d'envoyer des données au serveur. Ils peuvent contenir différents types d'éléments, permettant à l'utilisateur de saisir du texte, un mot de passe, de faire un choix dans une liste....
La balise < input> permet de créer une grande variété de champs différents, grâce à son attribut "type". C'est une balise vide, il n'y a donc ni contenu ni balise fermante (pas de </input> ).
Quelques exemples de type usuels d'éléments input :
<input type="text" value='écrire ici' size='25'> <br> <input type="button" value='Cliquer ici'> <br> <input type="password" value=" ">
Par exemple :
Qui es-tu ? <input type=text id='ton_nom' size="15"> <input type='button' id='confnom' value='confirmer' onclick="alert('Bonjour' '+document.getElementById('ton_nom').value);">
ce qui donne :
Il existe une grande variété de types possibles pour input, plus ou moins bien pris en charge par les navigateurs car beaucoup sont d'introduction relativement récente en HTML.
On peut citer en particulier les types color, number et range qui sont relativement bien supportés par les navigateurs.
<input type='color' id='sel_choix_fond' onchange="document.getElementById('aperçu').style.backgroundColor=this.value;"> Choisis ta couleur de fond <p> <input type='range' id='taille' value='12' min='6' step='2' max='28' onchange="document.getElementById('aperçu').style.fontSize=this.value+'pt';"> Choisis la taille des caractères <br> <div id="aperçu"> Et voilà ce que ça donne </div>
Aperçu :
Choisis la taille des caractères
Pour en savoir plus : documentation de l'élément input
Quelques rares contrôles de formulaire ne font pas appel à input. Ce ne sont pas des éléments vides, c'est à dire qu'ils attendent tous une balise fermante. Il s'agit des types <textarea> , qui permet à l'utilisateur de saisir plusieurs lignes de texte, < button> qui donne un résultat similaire à celui de <input type=button> et <select qui permet d'afficher une liste de choix possibles (ce dernier élément est censé être obsolète mais son remplaçant utilisant input est encore très mal géré par les navigateurs.)
Cette page de la documentation Mozilla donne un inventaire très complets de tous les contrôles de formulaires HTML.