interaction Web

START

Index

Exercices 1

Exercices 2

l'architecture du web

Exercices 3

Exercices 4

Les langages du Web

Exercices 5

Exercices 6

Interactions sur le Web

Exercices 7

Exercices 8

1. L’architecture du Web

Le Web est un service du réseau Internet qui permet à des clients, notamment les navigateurs Web tels que Firefox, Chrome, Safari ou Edge, d’interagir avec des serveurs. Les serveurs mettent à disposition des clients des ressources, c’est- à-dire des pages Web, desimages, des vidéos, des sons, des documents PDF, etc., identifiées par des noms appelés URL (« Universal Resource Locator ») etrépondent àdes requêtes pour créer,modifier,détruire et récupérer le contenu de ces ressources. Ces ressources sont appelées des pages Web lorsqu’elles utilisentle langageHTML(« HyperText Markup Language »). Les pages Web peuventse référencer les unes les autres grâce à des liens, ce qui;permet de naviguer de page en page. Elles peuvent également contenir des formulaires qui permettent d’envoyer des requêtes aux serveurs . par exemple pour rechercher des documents. Elles peuvent enfin contenir du code JavaScript pour interagir avec le contenu de la page et avec les serveurs.

1.1. Les URLs

Une URL, souvent appelée adresse ou lien Web, identifie une ressource sur le Web. Une URL a la forme suivante ;

Les différents composants sont: • un schéma (aussi appelé protocole): http: ou https:. Ce dernier correspond à une connexion sécurisée et est souvent représenté par l’image d’un cadenas dans le navigateur; • un nom de machine ou une adresse IP, qui spécifie l’adresse du serveur Web contenant la ressource: //fr.wikipedia.or; • un chemin d’accès, qui spécifie l’adresse de la ressource dans le serveur: /wiki/ World_Wide_Web; • une ancre (optionnelle), qui identifie une partie du document: #Histoire. Une URL peut se terminer par des paramètres. Par exemple, https://fr.google. com/search?q=informatique inclut le paramètre?q=informatique, qui est interprété par ce serveur comme la recherche du mot informatique.

1.2. Le protocole HTTP

La communication entre clients et serveurs Web utilise le protocole HTTP («Hypertext Transfer Protocol») ou sa version sécurisée HTTPS. Une requête HTTP est constituée d’une méthode qui indique l’opération souhaitée, de l’URL de la ressource à laquelle on applique l’opération, d’un ensemble d’en-têtes qui fournissent des informations complémentaires au serveur, par exemple le type de navigateur, et d’un contenu éventuel. Les principales méthodes sont: • GET pour récupérer le contenu de la ressource spécifiée par l’URL; • POST pour modifier la ressource spécifiée par l’URL; • PUT pour créer ou remplacer le contenu de la ressource spécifiée par l’URL; • DELETE pour détruire la ressource spécifiée par l’URL. Voici un exemple de requête envoyée par le navigateur Firefox (identifié par l’entête User-Agent) au serveur fr.wikipedia.org pour obtenir la page /wiki/ World_Wide_Web:

Le serveur répond à une requête par une réponse qui comporte notamment un statut indiquant une erreur éventuelle et le contenu de la réponse.Par exemple, le statut 200 indique que la requête a pu être satisfaite, le statut 404 que la ressource demandée est inconnue du serveur. Le navigateur interprète cette réponse et affiche le contenu reçu, ou l’erreur. Voici un extrait de la réponse à la requête ci-dessus:

2. Les langages du Web

Bien que n’importe quel type de contenu puisse être géré par un serveur Web, la plupart des documents échangés sur le Web sont écrits en langage HTML. Les documents HTML peuvent inclure ou faire appel à des feuilles de styles, qui utilisent le langage CSS et du code JavaScript

2.1. Hypertext Markup Language (HTML):

Le langage HTML est un langage de balises. Les différentes parties du contenu du document sont organisées en éléments délimités par des balises de début et de fin, par exemple <p> et </p> pour marquer le début et la fin d’un paragraphe, ou <a> et </a> pour un lien hypertexte. Les éléments peuvent avoir des attributs, qui sont spécifiés dans la balise de début sous la forme attribut="valeur". Par exemple, l’attribut href de la balise <a> permet de préciser l’URL de destination du lien. Ainsi l’élément < a href="https:// qwant.fr">Cherchez !</a> affiche le texte «Cherchez!» et envoie sur la page du site qwant.fr si l’on clique dessus.

Un document HTML bien formé doit être constituéd’un élément< html>, contenant un élément <head> et un élément <body>. L’élément <head> contient des caractéristiques générales du document, tels que des mots-clés utilisés par les moteurs de recherche, tandis que l’élément <body> contient le corps du document à proprement parler. L’exemple suivant montre un document HTML simple:

La plupart des éléments acceptent les attributs suivants, qui sont notamment utilisés par les feuilles de style et les formulaires:

2.2. Cascading Style Sheets (CSS)

Le langage CSS permet de définir la présentation des éléments HTML, comme par exemple leur couleur, leur taille, la police de caractères utilisée. Une feuille de style est constituée d’un ensemble de règles. Chaque règle comporte un sélecteur, qui détermine quels éléments sont affectés, et des propriétés, qui spécifient les caractéristiques de présentation. Un sélecteur peut cibler: • l’ensemble des éléments d’un même type (exemple: p); • l’ensembledeséléments dont l’attribut class contient un certain nom (exemple : .important), ou • un unique élément par la valeur de son attribut id (exemple: #note). On peut également combiner les sélecteurs. Par exemple, les règles suivantes spécifient que le texte de tous les paragraphe est bleu, que tous les éléments qui ont la classe important ont une bordure rouge, que l’élément d’identifiant note a un fond jaune, et que les éléments de liste (li) qui sont à l’intérieur d’une liste numérotée (ol) importante (.important) sont en gras.

Il existe de nombreuses propriétés CSS. En voici quelques unes :

Une feuille de style peut être incluse directement dans un document HTML, à l’intérieur de l’élément <style> que l’on place en général dans l’élément <head>. On peut également référencer une feuille de style stockée séparément, avec l’élément <link>, également dans l’en-tête du document HTML :

2.3. JavaScript:

JavaScript est un langage de programmation qui permet d’inclure des programmes dans les pages Web. Ces programmes peuvent d’une part réagir aux actions de l’utilisateur sur le contenu de la page Web, par exemple un clic sur un bouton, et d’autre part modifier le contenu de la page. Ils peuvent également communiquer avec le serveur. JavaScript est similaire à Python par de nombreux aspects, mais utilise une syntaxe un peu différente. La table suivante indique les principaux types de données disponibles en JavaScript. La notion de tuple n’existe pas; on utilise selon les cas des tableaux ou des dictionnaires, mais ceux-ci sont des types muables.

La table suivante donne la liste des principales instructions. Comparé à Python, une différence importante est que les blocs d’instructions ne sont pas délimités par l’indentation, mais par des accolades.

Les différents types de champs <input>:

b. Ajouter une fonction de rappel et un script pour que le résultat s’affiche lorsque l’on appuie sur le bouton = Le DOM : modifier une page Web Le langage HTML permet de représenter le contenu d’une page Web sous forme textuelle.Lorsque le navigateur charge une page HTML, il construit une représentation de la page avec un type construit complexe appelé DOM («Document Object Model»). Pour modifier le contenu de la page Web, on modifie le DOM grâce à un ensemble de fonctions JavaScript et le navigateur met à jour l’affichage de la page. Tout élément HTML peut avoir un identifiant unique, que l’on spécifie grâce à l’attribut id. La fonction JavaScript document.getElementById permet de trouver un élément à partir de cet identifiant:

Une fois un élément identifié, on peut accéder, en lecture et en écriture, à certains de ses attributs:

innerHTML est une propriété des éléments HTML qui représente le contenu HTML interne de l'élément. C'est une propriété utilisée dans JavaScript pour manipuler le contenu HTML d'un élément. Voici comment elle fonctionne : Lorsque vous accédez à la propriété innerHTML d'un élément en JavaScript, vous obtenez une chaîne de caractères représentant le contenu HTML situé à l'intérieur de cet élément, y compris les balises HTML et leur contenu. Si vous affectez une nouvelle valeur à innerHTML, le contenu HTML de l'élément est remplacé par la nouvelle valeur. Cette propriété est souvent utilisée pour modifier dynamiquement le contenu d'un élément HTML sur une page web en utilisant JavaScript. Exemple d'utilisation :

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>innerHTML Example</title> </head> <body> <div id="example-div"> <p>Ceci est un paragraphe.</p> </div> <script> // Accéder au contenu HTML interne de l'élément avec id="example-div" var content = document.getElementById("example-div").innerHTML; console.log("Contenu HTML interne :", content); // Modifier le contenu HTML de l'élément document.getElementById("example-div").innerHTML = "<h2>Nouveau titre</h2><p>Nouveau paragraphe.</p>"; </script> </body> </html>

Exercice 2:

indication Exercice 2:

exercice 3:

Exercice 4:

Exercice 5:

La page HTML pasapas.html contient une liste d’étapes dont la première est mise en évidence grâce à la classe CSS courant. Les étapes sont numérotées grâce à leur attribut id. La page contient deux fonctions Javascript qui permette de mettre en évidence ou non un élément de la liste à partir de son numéro. a. Modifier la page en ajoutant deux boutons << et >> qui permettent de mettre en évidence l’étape précédente ou l’étape suivante de la liste. b. Ajouter une règle CSS pour que le texte des éléments de la liste soit blanc. Quel est l’effet obtenu?

fichier_html

la page web obtenue:

Exercice 6:

La page HTML conversion.html affiche un élément <input> de type range, c’est-à-dire une tirette permettant de saisir une valeur numérique.a. Étudier le code de cette page. À quoi sert l’élément <span> ? Quel événement est défini sur l’élément <input> ? Que fait la fonction de rappel de cet événement ? b. On veut modifier cette page pour afficher le résultat de la conversion du nombre spécifié par la tirette de degrés centigrades (C) en degrés Fahrenheit (F): F = (C – 32) * 5/9. Ajouter un élément HTML dans lequel s’affiche le résultat de la conversion. c. Ajouter un bouton pour inverser le sens de la conversion.

fichier_html

Exercice 7:

Exercice 8:

Thanks!