1ERE NSI THEME 4 Interactions entre l'homme et la machine sur le Web

Chap 1 La gestion des évènements sur les pages Web

A la fin du chapitre, je dois :

- Connaitre les définitions et les différences entre le Web et Internet.

- Connaitre le principe de la relation client-serveur.
- Savoir distinguer dans du code HTML ce qui correspond à la description d'un composant
graphique de ce qui relève de la réaction (par exemple programmée en Javascript).
- Savoir comprendre et modifier la fonction associée à un clic sur un bouton.

I Introduction et repères historiques

Internet est un réseau mondial d'ordinateurs ou de petits réseaux reliés entre eux. Sur ce réseau mondial,
des informations circulent. Attention Internet et le Web, ce n'est pas la même chose. Le Web correspond à
des pages contenant des liens hypertextes qui permettent d'accéder à d'autres pages : cela permet la
navigation. En revanche, les mails ou des échanges vidéos par Skype transitent sur Internet mais ne sont pas
nécessairement commun au Web. On parlera donc de sites Web ou de pages Web.

Pour naviguer (surfer), la page Web propose une interface Homme-Machine avec des éléments graphiques
sur lesquels nous pouvons interagir. Nous allons dans ce chapitre, définir: la relation Client-Serveur, la notion
d'évènement, quelques éléments graphiques et des actions possibles.

Lire la page du site de David Roche professeur de NSI :

https://pixees.fr/informatiquelycee/n_site/nsi_prem_web_intro.html

ACTIVITE 1 :
A l'aide de la vidéo www.lienmini.fr/3389-203 remplir les dates ci-dessous et écrire la définition dans les () :

Naissance de la communication par paquets :

Premiers réseaux d'ordinateurs : ARPANET
Le protocole TCP (Transmission Control Protocol) :
Arrivée d'Internet :
Démocratisation d'Internet :
Inventeur du Web :
Objets connectés > Humains connectés :

ACTIVITE 2 :
A l'aide de la vidéo www.lienmini.fr/3389-303 remplir les dates ci-dessous :

Naissance du concept de hypertexte numérique :

L'invention du Web :
Le premier navigateur :
Naissance du commerce en ligne :
Un Web interactif et dynamique :
Plus d'un milliard de sites Web :
II La relation client-serveur
Vidéos : www.lienmini.fr/3389-204

Et : vidéo www.lienmini.fr/3389-304

ACTIVITE 3

Travail à faire : pour chaque mot ci-dessous, écrire une phrase de définition avec des mots simples.

Internet :

Routeur :

Protocole de communication :

Serveur :

Client :

Lien hypertexte :

Navigateur:

URL (donner le nom en anglais + définition) :

HTTP:

HTML :

III Qu'appelle-t-on un évènement ?

Un évènement est une action de l'utilisateur sur un périphérique qui entraîne une réponse de l'ordinateur.

Il faut savoir que le système d'exploitation de l'ordinateur est en permanence à l'écoute de nos moindres
actions qu'on appelle des évènements :

- Survol d'un mot

 - Clic gauche ou clic droit
- Double clic
- Cliquer-glisser
- Mollette de la souris
- Appui d'une touche au clavier.
- Combinaison de touches : ALT F4 (ferme une application) CTRL S (Sauvegarde) CTRL ALT SUPPR
etc…..

Les pages Web sont programmées pour que nous puissions interagir afin de naviguer, remplir notre nom
dans un formulaire, valider en cliquant sur un bouton, mettre une vidéo en pause…..

A retenir :

On appelle évènement une action de l'utilisateur (souvent un clic mais pas seulement) qui engendre une
réponse de l'ordinateur (changement de page, validation d'un formulaire ….).

IV Réalisation de pages Web

Les langages HTML et CSS sont à la base du fonctionnement de tous les sites Web.

HTML n'est pas à proprement parler un langage de programmation (il n'y a pas de condition, de
boucle ou encore de variables en HTML), mais plutôt un langage de description.
HTML est utilisé pour "décrire" une page web, les sites web sont "fabriqués" (en partie au moins)
à l'aide du langage HTML. C’est le logiciel du navigateur qui va “traduire” ces langages pour
effectuer l’affichage.

Pour la mise en forme d’une page il faut utiliser un fichier CSS (Cascading Style Sheets), "feuille de
style" en français (ce n'est pas une obligation, mais c'est très fortement recommandé !).

Le contenu dans le fichier HTML et la mise en forme dans le fichier CSS : c'est
une règle à ne jamais oublier quand on veut réaliser un travail correct.

Connectez-vous à l'ENT puis ressources numériques > Capytale > créer une activité > HTML_CSS
Nommer cette activité NSI_HTML_exemple1. Dans la zone HTML en haut à gauche, écrire le code
ci-dessous puis observer l'affichage dans la partie du bas.

<h1>Hello World! Ceci est un titre</h1>

<p>Ceci est un <strong>paragraphe</strong>. Avez-vous bien compris ?</p>

En HTML tout est une histoire de balise que l'on ouvre et que l'on ferme. Une balise ouvrante est de la forme
<nom_de_la_balise>, les balises fermantes sont de la forme </nom_de_la_balise>.

En observant l'écriture des balises <p> et <strong> on constate qu'il faut refermer en premier la dernière
balise qui a été ouverte :
 Structure incorrecte : Structure correcte :

<balise1> <balise1>
<balise2> <balise2>
</balise1> </balise2>
</balise2> </balise1>

Dans la zone HTML en haut à gauche, écrire le code ci-dessous puis observer l'affichage :

<h1>Hello World! Ceci est un titre</h1>

<h2>Ceci est un sous-titre</h2>
<p id="para1">Ceci est un <strong>premier paragraphe</strong>.</p>
<p id="para2">Ceci est un <strong>deuxième paragraphe</strong>.</p>

Ici nous avons utilisé un attribut id dans la balise <p> afin de donner une identité à cette balise.

Dans la zone CSS en haut à droite, écrire le code ci-dessous puis observer l'affichage :

h1
{ Attention ne pas oublier les points-virgules en fin de
text-align: center;
background-color: red; ligne.
}
Pourquoi le paragraphe 1 n'est-il pas entièrement écrit en
h2 rouge ?
{
font-family: Verdana; ……………………………………………………………………………………………
font-style: italic;
color: green;
} ……………………………………………………………………………………………

#para1
{
color : red;
}
strong
{
color : aqua;
}

Capytale est un très bel outil, mais il ne peut pas être utilisé pour la réalisation d'un vrai site Web. Nous
allons créer 2 fichiers : un fichier qui contiendra du HTML (index.html) et un fichier qui contiendra du CSS
(style.css). Faire un dossier Web puis copier dedans les 2 fichiers se trouvant sur le réseau :

NSI/Web
<!DOCTYPE html>
<html lang="fr">
<head>de couleur au survol
Changement
<meta charset="utf-8" />
Lien cliquable vers une
<title> autre
Titre depage
ma page html5 </title>
</head>

<body>
Les pages Web réalisées sont dites statiques
<h1> Ici un titre principal </h1>
<h2> Ici un titre secondaire </h2>
<p> Ici on écrit un paragraphe </p>

<p> Ici on écrit un autre paragraphe avec un saut de ligne <br/> puis la suite du
paragraphe </p>
</body>
</html>

Ouvrir le fichier index.html dans Notepad++. L'exécuter avec Execution>Launch in Firefox.

Pour l'instant cette page Web n'est pas très jolie car il manque un lien vers le fichier CSS. Après la ligne <meta
charset …/> ajouter la ligne :

<link rel = "stylesheet" href = "style.css" />. Enregistrer le fichier HTML avec CTRL+S, puis actualiser la page
Web avec F5.

La balise <a>

Dans le fichier index.html, ajouter le code ci-dessous:

<a href="http://www.google.fr">Cliquez ici pour vous rendre sur google.fr</a>

Faire CTRL+S puis F5.

La balise a permet de créer des liens hypertextes, ce sont ces liens hypertextes qui vous permettent de
"surfer" entre les pages d'un site ou entre les sites. Les liens hypertextes sont par défaut soulignés et de
couleur bleue (modifiable grâce au CSS). La balise a possède un attribut href qui a pour valeur le chemin du
fichier que l'on cherche à atteindre ou l'adresse du site cible
(exemple : <a href="http://www.google.fr">Cliquez ici pour vous rendre sur google.fr</a>). Entre la balise
ouvrante et fermante, on trouve le texte qui s'affichera à l'écran (c'est ce texte qui est souligné et de couleur
bleue). La balise peut sans problème se trouver en plein milieu d'un paragraphe.

A faire :

1) Modifier l'un des 2 fichiers pour que le lien cliquable soit écrit rouge sur fond jaune.
2) Le fond de la page doit maintenant être de couleur navy et l'écriture blanche.
V Les pages Web dynamiques
Lire la page sur le site de D.Roche

https://pixees.fr/informatiquelycee/n_site/nsi_prem_clsv.html

Le langage HTML accompagné de CSS ne permet pas de modifier les pages Web. Pour obtenir des pages
dynamiques, c'est-à-dire modifiables par des actions de l'utilisateur, il faut utiliser d'autres langages appelés
Javascript (ne pas confondre Java et Javascript ce n'est pas pareil !) et PHP.

Aller sur la page : http://pierreem.braun.free.fr/date.php

Au bout de quelques instants, actualiser la page avec F5. Le fichier a été écrit en langage PHP comme celui
que vous avez lu sur la page pixees. Ce fichier a été transformé en langage HTML dans le serveur qui vous a
envoyé ce code HTML (rappel : vous êtes le client).

Faire les exercices 1 à 7 de la page : https://pixees.fr/informatiquelycee/n_site/nsi_prem_js.html

Pour finir ajouter dans le fichier Javascript les lignes :

function modifMessage() {
document.querySelector("#monPara").innerHTML = "Bravo, vous avez cliqué
sur le bouton !"
}

Modifier le fichier index.html pour que le texte change quand on clique sur le bouton.

En conclusion, une page Web écrite en HTML contient des éléments graphiques (boutons…) sur
lesquels un utilisateur peut interagir grâce à des évènements (clic, survol…). Ces éléments
graphiques sont mis en forme grâce aux langages HTML et CSS (taille, couleur …). Chaque
évènement sur un élément graphique déclenche une réponse qui est gérée par des fonctions
écrites en langage Javascript. On peut alors modifier la page qui s'adaptera à chaque utilisateur.

 MINI PROJET 1 : le jeu "Plus petit – Plus Grand" . Compléter le dossier Plus_petit_plus_grand sur le
réseau du lycée.

 MINI PROJET 2 : Synthèse additive des couleurs . Compléter le dossier Synthèse_couleurs sur le
réseau du lycée.