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.
Langages interprétés par le navigateur
Le code source d'une page web est écrit en utilisant les trois langages suivants :
Le langage HTML
Ce langage permet de décrire la structure de la page web, considérée comme un assemblage ordonné de différents éléments : texte, images, videos...
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.
Le langage HTML est le plus ancien langage du web. Les descripteurs HTML d'une page sont la base sur laquelle viennent éventuellement s'appuyer les deux autres langages CSS et Javascript
Le langage CSS
Le langage CSS permet de décrire la mise en forme et la mise en page du contenu HTML (couleurs, polices de caractères, marges...).
Le langage Javascript (côté client)
Contrairement au HTML et au CSS qui sont des langages de description, Javascript est un langage de programmation. Le navigateur est capable d'exécuter les instructions données en Javascript. Le Javascript côté client est le principal outil pour l'interaction entre l'utilisateur et la page Web.
Les langages de description
Description en HTML et CSS
Exemple en HTML seul
On montre ci-dessous un exemple de contenu de page Web, avec le code source correspondant. Vous pouvez aussi visualiser l'un et l'autre en cliquant sur ce lien pour ouvrir la page dans le navigateur, et utiliser la combination de touches Ctrl+U pour visualiser le code source.
Le contenu affichable Le code source
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.
Une page Web est composée d'éléments HTML de divers type. Dans le code source, chaque élément est délimité par des balises encadrées par les symboles "<" et ">" et contenant le code HTML. Le code html contenu dans une balise commence toujours par l'identifiant du type de l'élément (image, paragraphe ou division d'un texte, élément de liste, lien ....) Il peut également définir un certain nombre de propriétés pour l'élément, en fixant des valeurs pour ses attributs, sous la forme attribut=valeur ( la valeur est de préférence encadrée par des guillemets, simples ou doubles).
Selon son type, un élément HTML peut être
soit entièrement décrit par une seule balise : on parle alors d'élément vide. C'est le cas par exemple des images
soit encadré par une balise ouvrante et une balise fermante. La balise ouvrante contient l'identifiant de type et les attributs, la balise fermante contient uniquement l'identifiant de type précédé de "/". Le contenu de l'élément, entre les deux balises, est le plus souvent du texte qui apparaîtra dans la page Web. Des éléments non vides peuvent être emboîtés les uns dans les autres.
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.
La mise en page du code source lui-même (saut de ligne, indentations....) n'a aucune importance, elle ne sert qu'à faciliter sa lecture. Toute la mise en page du contenu affichable doit être explicitement décrite en HTML et/ou CSS
Styles avec 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 :
décrit la mise en forme qui va concerner l'élément de type titre de premier niveau, entouré par les balises <h1> et </h1> dans le code source. Ses propriétés CSS, séparées par des ';', sont données entre accolades.
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é.
s'appliquera aux éléments de type div de la page, mais à condition qu'ils appartiennent en plus à la "classe" qu'on a appelé 'special'. Cette règle CSS ne concerne donc dans notre document que l'élément indroduit par la balise <div class='special'> dans le code source.
Une page web peut aussi utiliser des règles CSS définies dans un fichier externe.
La mise en forme du contenu d'une page Web est décrite par du code CSS sous la forme d'une série d'indications propriété : valeur séparées par des points-virgules.
Ce code peut être écrit :
soit comme valeur de l'attribut style d'un élément particulier : le style ne s'applique alors qu'à cet élément
soit par une règle CSS définie dans un élément HTML style ou dans un fichier style externe
Entraînement et références
La documentation des langages du Web est de nos jours centralisée sur le site de la fondation Mozilla , et très largement traduite en Français. Outre la documentation, on y trouve également de très nombreux tutoriaux pour tout niveau, dont nous allons profiter.
Ces tutoriaux incluent des exercices à réaliser directement dans la page web. Cependant certains exercices demandent de créer une page web autonome. Pour cela vous pouvez utiliser un éditeur de texte pur comme Notepad++ disponible sur le réseau. En plus de permettre de lire et d'éditer le code des pages HTML, il fournit quelques outils pratiques: coloration syntaxique qui permet de distinguer le code (en couleurs) du contenu (en noir), propositions de complétion... Pour profiter de la coloration syntaxique il faut enregistrer le fichier avec l'extension ".html". Le menu "exécution" permet d'ouvrir le fichier dans un navigateur pour voir ce que produit le code.
Pour CSS
Une connaissance approfondie de CSS pour la NSI, cependant pour compléter la rapide présentation précédente vous pouvez consulter cette page et consulter également cette page pour comprendre les différentes possibilités pour coder une couleur. .
Inclusion de scripts
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.
Les gestionnaires d'évènement
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.
Exemple : donner à un élément HTML la capacité de répondre à des actions de la souris
Modification de contenu
Ouvrir dans Notepad++ le fichier exemple2 déjà vu précédemment.
Modifier la ligne
<div> première division </div>
de la façon suivante:
<div onclick="this.innerHTML='et voilà le travail';"> première division</div>
.
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.
Modification de style
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 :
<div onclick="this.innerHTML='et voilà le travail';this.style.color='#ff4499';"> première division </div>
Changement de classe de style
Il est aussi possible de modifier dynamiquement la classe de style d'un élément.
<div onclick="this.innerHTML='et voilà le travail';this.className='special';"> première division </div>
Autres évènements souris
A la place de onclick vous pouvez essayer ce que donnent onmouseover, onmouseenter, onmouseout
Notions de base en Javascript
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 :
Ce texte changera de style chaque fois que l'on cliquera dessus
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>
à tester dans le cadre ci-dessous :
En javascript la fin d'une instruction est signalée par un point-virgule (une instruction peut s'écrire sur plusieurs lignes).
Un bloc d'instructions est délimité par des accolades { }.
L'indentation est facultative.
Une expression dont on teste la valeur logique doit être écrite entre parenthèses.
Il est possible d'attribuer à chaque élément HTML un identifiant grâce à l'attribut id . Par exemple
<div id="paragraphe1"> Voici un élément qui n'est plus anonyme </div>
Il est alors possible de faire référence à cet élément dans un script de la page, en utilisant la fonction document.getElementById()
Par exemple
<!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>
à tester dans le cadre ci-dessous :
Explication du code du gestionnaire d'évènement onclick :
cible=document.getElementById('changement');
cible.innerHTML='et ça a changé !';
cible.style.color='magenta';
La première ligne crée une variable appelée cible et lui affecte le résultat de l'appel de document.getElementById('changement') . Autrement dit, après l'exécution de cette ligne, le mot "cible" désignera dans le script l'élément dont l'identifiant est "changement".
La ligne suivante change le contenu de cet élément.
La dernière ligne change son style.
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)
Ensemble d'éléments
Les éléments HTML peuvent aussi être ciblés en fonction de leur type, à l'aide de la fonction document.getElementsByTagName(), ou en fonction de leur classe de style à l'aide de la fonction document.getElementsByClassName(). Chacune de ces fonctions renvoie un tableau contenant tous les éléments concernés. Comme dans une liste python, chaque élément peut alors être récupéré depuis ce tableau à l'aide de son index.
Par exemple le code ci-dessus permet de changer les propriétés de tous les éléments de type div.
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.
boîte de dialogue alert : elle permet de communiquer une information à l'utilisateur.
boîte de dialogue confirm : elle permet à l'utilisateur de donner une réponse affirmative ou négative.
boîte de dialogue prompt : elle permet à l'utilisateur de fournir une réponse de type texte.
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).
Formulaires
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....
Les types input
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 :
Le gestionnaire onclick ouvre dans cet exemple une boîte alert. Le nom saisi par l'utilisateur dans l'élément input dont
l'identifiant est ton_nom est récupéré grâce à l'instruction document.getElementById('ton_nom').value, pour être inséré dans le texte de la boîte alert.
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>
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.)
