Interaction Homme Machine Sur Le Web

NSI Première Interaction M/M/W Mme M. Feida B.
Dhieb
Programmation Web :
Fiche16 : Création d’une page web statique : Front-end+ Back-end (HTML5) (CSS3)
Structure du <!DOCTYPE html> HTML est un langage à balises,

Code
<html lang="fr"> celles-ci peuvent fonctionner par
paire comme <html> </html>
<head> (indiquent le début et la fin de la
page) ou toute seule comme <br
<meta charset="utf-8" />
/>(saut de ligne)
<title>Titre</title>
</head>
Hyper Text Markup Langage et
<body> Cascading Style Sheets
</body>
</html>
1- <!DOCTYPE html>est la première ligne, elle indique que le fichier décrit une page en HTML5
2- lang="fr"est un attribut qui spécifie que la langue du document est les
français. À l'intérieur de la page on peut voir deux zones :
3- <head>qui donne les entêtes de la page et qui se termine par </head>
4- <body>qui donne le corps de la page (tout le contenu) et qui se termine par </body>
Voici quelques balises utiles :


<head>
<meta charset="utf-8" /> il s'agit d'une balise qui fonctionne toute
En-tête
seule, et qui possède un attribut
« charset » (ensemble de caractères) qui possède une valeur « utf-8 ».
</head>
<title>Titre</title>la balise title qui fonctionne par paire (ouverture et
fermeture de la balise)
<linkrel="stylesheet"href="monfichier.css">la balise link qui possède

deux attributs et qui dit où se trouve le fichier CSS à utiliser.
<div > :balise qui corresponde à un cadre et qui peut contenir d'autres <div> </div>
div ainsi que toutes les autres balises de contenu. En HTML5 on
utilise plutôt les balises <section > et <article > qui permettent de <article> </article>
rendre le contenu plus sémantique afin que les moteurs de recherche
comprennent mieux la page. <section> </section>
<h1> : balise de titre principal, il ne devrait y en avoir qu'une par <h2>,<h3>,..<h6>: sous titres.
page. </h1> , </h2> , </h3> …
<p> : balise de paragraphe utilisée pour écrire du texte.
Remarquons que même si ce n’est pas obligatoire, on indente les blocs pour pouvoir s'y retrouver facilement !
Autres balises à utiliser :

• <style> Code CSS • <ul> Liste non ordonnée
• <table> Création de tableau
• <script> Code javascript • <ol> Liste ordonnée • <tr> Ligne de tableau
• <img/> Image • <li> élément de la liste • <th> Cellule d’en tête
• <a> Lien hypertexte • <td> Cellule
1
NSI Première Interaction M/M/W Mme M. Feida B.Dhieb
Exemple : à l'aide de bloc Note créer la page suivante, la sauver en page1.html puis l'ouvrir avec un
navigateur.
<!DOCTYPEhtml> On y distingue bien les
<html> différents styles par défaut de
<head> h1, h2 et p.
<metacharset="utf-8"/> Ajouter des balises de :
<title>Bonjour!</title>
1-lien hypertextes(interactif)
</head>
<body> 2-insertion d’images
<h1> Mon beau titre</h1> 3- <a href=”#top”>ancre dirigeant
<section> vers le haut de la page</a>
<h2>J'aime</h2> (interactif)
<p>les biscottes et le nutella</p> Exemple :
</section> <a href=’ www.w3schools.com’>
<section> Lien Utile</a>
<h2>Je n'aime pas</h2>
<p>la haine</p>
</section>
</body>
</html>
Autres balises importantes :
Balises de formulaire Balises génériques

Sont des balises qui n’ont pas de sens sémantique.
• <form> Formulaire
<p> « Paragraphe », <h2> signifie « Sous-titre », etc.
• <input > Champ de formulaire (texte, mot de
Parfois, on a besoin de les utiliser (balises universelles)
passe, case à cocher, bouton, etc.)
car aucune des autres balises ne convient.
• <label> texte qui affiche le texte correspondant
<span>,<div>
au <input>
On peut les remplacer par celles ayant un sens
• <textarea> Zone de saisie multiligne sémantique:
• <select> Liste déroulante •<section> regroupant un même sujet.
• <option> Élément d’une liste déroulante •<article> contenu indépendante, pouvant être
extraite individuellement du document.
<nav>, <aside>, <header>, <footer>
L’objectif de ce cours n’est pas la maîtrise de HTML5. Vous trouverez un lien ce site si vous voulez en savoir
plus sur des balises. Vous trouverez aussi sur ce lien comment créer une page web.
Fiche17 : Comment présenter et embellir la page, en utilisant du CSS :
Exemple : à l'aide de bloc Note créer une autre page, la sauver en page1.css et enregistrez dans le
même répertoire que votre fichier html.
Tapez dans page1.css les lignes suivantes
Pour les couleurs, vous pouvez ultérieurement se référer à
p{ ce lien :
color : blue; http://www.tutorialspoint.com/html5/html5_color_names
} .htm
h1 {
font-size : 50px; On peut agir sur l’intensité des couleurs Rouge, Verte et
background-color: rgb(123, 95, 10); Bleue par des valeurs entre 0 et 255.
} rgb : rouge, vert, bleu
2
Ensuite, intégrez ce fichier dans la source html avec la ligne suivante dans le head de la page avec la
ligne :
<link rel="stylesheet"href="page1.css">
L’objectif de ce cours n’est pas la maîtrise de CSS3. Cependant si vous voulez embellir vos pages HTML et en
savoir plus sur le sujet, vous trouverez aussi une liste non exhaustive des propriétés CSS sur ce site : Mémento
des propriétés CSS
Cependant pour identifier un élément d’une page, toutes les balises précédentes peuvent contenir deux attributs
permettant de les identifier :
• class : contient un ou plusieurs noms séparés par des espaces. Elles seront utilisées dans la feuille de style
CSS. Plusieurs balises peuvent avoir la même class
• id : permet d’attribuer un identifiant représentant une seule balise unique dans le fichier
Pour cela ajoutez à la feuille de style précédente page1.css Et dans les balises html du fichier page1.html, ajouter les
les lignes suivantes : attributs suivants :
.TresGros{
font-size : 100px; <p class="TresGros">le matin les
biscottes et le nutella</p>
}
#enrouge{
<p class="TresGros" id="enrouge">le
color : red; matin</p>
}
NB : 2 autres possibilités pour introduire un code CSS ; dans le code HTML, entre les 2 balises <Style>
et </Style>, dans l’entête entre <Head> et </Head> ou bien dans le corps entre <Body> et </Body>.
Bien entendu, il n’y a pas que ces 2 attributs ! Nous en avons déjà rencontré quelques ’uns : src pour insérer une
image, href pour insérer un lien. Vous trouverez ici une liste de tous les attributs.
• Distingue bien la différence entre l’attribue class et id. Quels sont leurs domaines d’actions ?
• Que peut-on dire de la ligne de code CSS p {color : blue;} . Quel est son impact ici ? Que traite en priorité
CSS ? De quel couleur serait un nouveau texte dans une nouvelle balise <p> ?
Fiche18 : Interactivité et programmation en javascript. Page web dynamique

Dynamique, interactive, sont deux termes qui signifient que suite à un évènement, il y aura un changement ou
action qui se produira dans la page ;
Evènement Action
Chargement de la page, appui sur un lien et/ou un Un message qui s’affiche, couleur qui change, police
bouton, 1 clic souris, 2 clics souris, passage souris ou taille qui change…
sur image ou texte, …
Réellement on a :
3
Plusieurs possibilités s’offrent :
1. Réaliser des échanges clients/serveurs en passant par des requêtes HTTP. Avec l’envoi et la réception des
données d’un formulaires par exemple. Dans ce cas les données échangées transitent via des allers retours
sur le réseau. Côté serveur un langage (du type de PHP) est nécessaire pour traiter les données reçues et
renvoyer un message au client. Tout cela prend du temps !
2. Réaliser les calculs, affichages, programmes côté client avec un langage adapté comme JavaScript. Un
interpréteur de JavaScript est d’office intégré dans la quasi totalité des navigateurs (firefox, google chrome
etc.). L’avantage de traiter les informations côté client est la vitesse d’exécution, inutile alors de faire des
grands allers retours serveur/client.
Une liste d’évènement non exhaustive :
Javascript est un langage développé en 1995 par Brendan Eich pour Netscape,
Actuellement version 13 - ECMA-262 (Juin 2022)
.
Caractéristiques Javascript :
• Langage de script
• Interprété (et non compilé),
• Interactivité avec l’environnement d’exécution
• Orienté objet
• "Permissif", certains diront "souple"
• Code javascript écrit par l’auteur du site
• Exécution côté client (= sur la machine de l’internaute)
ATTENTION l’objectif de ce cours n’est pas d’apprendre le langage JavaScript mais d’appréhender à travers
des exemples simples de ce langage la notion d’évènements.
4
2 méthodes sont possibles pour l’insertion d’un code Javascript :
1- Entre les balises <Script> et </Script> dans le head de la page HTML
2- Dans un fichier ayant l’extension .Js, et on assure la liaison avec le code html suivant :
<scriptsrc="page1.js"type="application/javascript"></script>
Analysons ce code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="application/javascript">
function salut(){
window.alert("Salut à toi élève NSI")
}
function clicSVP(element){
if (element.id=="choix1")
window.alert("GOURMAND(E) !")
else if (element.id=="choix2")
window.alert("Bravo c'est bon pour la santé")
}
</script>
</head>
<body onload="salut()";>
<h1> Clique sur ton aliment préféré </h1>
<ol>
<li><button id="choix1" onclick="clicSVP(this)"> chocolat
</button></li>
<li><button id="choix2" onclick="clicSVP(this)"> carottes
</button></li>
</ol>
</body>
</html>
• Repère et donne la liste de tous les évènements HTML de cette page. Donne leur rôle.
• Quelles sont les différences entre Python et JavaScript pour définir une fonction ? (ou
procédure ici, car elle ne retourne rien…)
• A ton avis que représente le paramètre this appelé dans la fonction clicSVP(this). Quel est le
rôle des identifiants dans ce cas ?
5
Créer ensuite un fichier page1.Js, et en copier-coller le script précédent.
Sans aller jusqu’à un apprentissage profond de JavaScript, tu as déjà dû remarquer :

• que les blocs étaient encadrés par des accolades {}(en python on indente)
• que les lignes de codes se terminent par un point-virgule ;
• que les déclarations de variables commencent par let
Voilà quelques autres notions utiles sur ce langage. Tu devrais trouver facilement leur rôle en comparant avec
leur équivalent en langage Python.
1- Les principaux types et leurs déclarations

• let a; // valeur undefined de type Undefined
• let b = 0; // valeur 0 de type Number
• let c = "bonjour"; // valeur "bonjour" de type String
• let d = new Date(2022,09,04); // valeur objet date de type Object
• let e = null ; // valeur null de type Null
• let f = 4.5; // valeur de type Number # #
2- Les opérateurs logiques

• ! : NOT (négation)
• && : AND (ET)
• || : OR (OU)
Exemples
• !(15 > 15); // true
• (14 == 14) && (2 < 3) || (2 > 3); // true;
3- Les tests
if (expr booléenne) switch (expr)

{
bloc d’instructions case val1:
else if (expr booléenne) instructions
break;
bloc d’instructions case val2:
... instructions
break;
else ...
bloc d’instructions default: // facultatif
instructions
break;
}
4- Les boucles
6
for (let indice = val; test terminaison; opération

sur indice)
bloc d’instructions
for (let iterateur in objet)

while (expr booléenne)

5- Les objets windows
window.location : url de la page ouverte dans la fenêtre

window.navigator : objet contenant des renseignements sur le navigateur
window.opener : fenêtre qui a causé l’ouverture de cette fenêtre
window.document : document html contenu dans la fenêtre
Ouvertures de boîtes de dialogue :

window.alert("message")
window.confirm("message") réponse par oui ou non
window.prompt("message") attente de l’entrée d’une chaîne de caractères
Ouverture / fermeture de fenêtres :
window.open()
window.close()
6- Methodes d’accès au code de la page HTML

• document.getElementById("identifiant")
• document.getElementsByTagName("nom de la balise")
• document.getElementsByClassName("valeur de l’attributclasse")
• document.getElementsByName("valeur de l’attribut name")
Constatations : un code CSS peut être introduit de 3 manières :

➢ Dans un fichier ayant le format css, puis on assure le lien par la balise link comme déjà vue.
➢ Dans le head ou le body de la page entre les balises <style> et </style>
De même pour un code JavaScript, avec un format js, et le lien avec la balise <script …
7
Fiche 19 : Communication Client-Serveur
• Les échanges sur internet se font suivant le modèle Client/Serveur.

• Le client c’est l’utilisateur devant son ordinateur.
• Le serveur est la machine où se trouve la page web
• Client et Serveur peuvent échanger des « demandes diverses » :
• Les demandes du client sont des requêtes. (souvent en Javascript)
• Le serveur reçoit l’information, l’interprète, exécute un code-réponse (souvent en PHP) et l’envoie.
Les requêtes clients HTTP , HTTPS et les réponses du serveur
Vocabulaire
• URL : Uniform Ressource Locator

• HTTP : Hypertext Transfer Protocol
• HTTPS : Hypertext Transfer Protocol Secure
Le protocole HTTP définit les requêtes envoyées par le client sur le serveur. Une requête client est de la forme :
Méthode (il y en a 3 : GET, POST ou HEAD)

En-tête de requête (Host : nom du site, cookie, type de connexion etc.)
(saut de ligne)
Corps de requête (si le client envoie des données au serveur, par exemple avec un
formulaire)
La réponse du serveur est en générale de la forme :
Ligne de statut (c’est la version HTTP du serveur avec un code retourné 200,403,404,500
etc. qui indique si c’est ok, s’il y a une erreur ...)
En-tête (le logiciel du serveur, son système d’exploitation, le type de fichier, sa longueur,
les cookies etc.)
(saut de ligne)
Corps de réponse (le fichier html ou autre)
Exemple : Si on tape l’URL suivant dans son navigateur : http://www.nsi-premiere.fr/test.html

La requête est la suivante :
8
GET/test.html HTTP/1.1 Host

: www.nsi-premiere.fr
Le client annonce au serveur qu’il veut communiquer avec la version 1.1 du protocole HTTP et il veut accéder à
la ressource test.html par la méthode GET.
La réponse du serveur est alors :

HTTP/1.1 200 OK
• Il accepte la communication (code 200 OK, code 404 not Server : nginx/1.10.3 (Ubuntu)
found, code 403 refusé etc.)
• Le logiciel du serveur est nginx version 1.10.3 qui Date : Mon, 03 dec 2019 15:14:14 GMT
s’exécute sur un système Ubuntu Linux.
Content-Type : text/html
• Il précise la date, le type de fichier et sa taille 334 octets
• Puis il envoie le fichier html Content-Length : 334
Et puis tout le fichier HTML correspondant

à la requête.
L’inconvénient du protocole HTTP c’est que les données sont transmises « en clair ». Une personne mal
intentionnée peut les intercepter. Le protocole HTTPS chiffre (code) les messages avant de les transmettre afin de
palier à cet inconvénient. Les pages chiffrées sont reconnaissables par leur URL qui commence toujours par https://
9
Formulaire d’une page Web :
Toute page HTML peut être enrichie de formulaires interactifs, qui invitent vos visiteurs à renseigner des
informations : saisir du texte, sélectionner des options, valider avec un bouton. . . tout est possible !
Nous arrivons cependant aux limites du langage HTML car il faut ensuite pouvoir analyser les informations que le
visiteur a saisie. . . et cela ne peut pas se faire en langage HTML. Comme nous allons le voir, le traitement des
résultats doit s’effectuer dans un autre langage : PHP, Python, Ruby.…
Rappels : on a vu au précédemment quelques balises HTML pour gérer un formulaire
• <form> Cette balise délimite le formulaire. Elle peut prendre comme attributs :
• action : qui donne l’URL où doivent être envoyées les données
• method : les 2 méthodes d’envois pour un formulaire GET ou POST
• <input > Champ de formulaire qui selon l’attribut type peut correspondre à du texte (text), un bouton
(submit), des boutons radios (radio), un email (email), un mot de passe (password),...
• <label> texte qui affiche le texte correspondant au <input>
• <textarea> Zone de saisie multiligne
• <select> Liste déroulante
• <option> Élément d’une liste déroulante
Le but de ce cours n’est pas de te faire devenir un pro du formulaire mais de t’en faire comprendre ses principes.
Tu trouveras ici tout complément nécessaire pour une utilisation plus approfondie.
Méthodes GET et POST
Teste le code html suivant et l’analyser :
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
</head>
<body>
<p>Comment tu t'appelles ? </p>
<form action="…"method="get">
<p>
<inputtype="text"name="prenom"/>
<inputtype="submit"value="Valider"/>
</p>
</form>
</body>
</html>
• Quel est le fichier qui reçoit les données du formulaire ?

• Quel est son extension ?
• Quel est la méthode choisie ?
NSI Première Mme M. Feida Ben Dhieb Ma Réussite
• Que remarque-t-on dans l’URL avec cette méthode ? Donnez un inconvénient majeur de cette méthode.
• Dans l’attribut method, remplace « get » par « post ». Observe l’URL transmis et compare.
Avantages et inconvénients des méthodes GET et POST
➢ La sécurité :
Comme on vient de le voir avec la méthode GET les données sont transmises en clair dans l’URL en ajoutant à la
fin « ?donnée=valeur ».
On comprend facilement que ce n’est pas terrible si on veut transmettre un mot de passe, un code bancaire, bref
une donnée sensible. Dans ce cas on préférera la méthode POST.
➢ La taille :
Les navigateurs imposent des limites à la taille de l’URL. En cas de dépassement la réponse à la requête est le
code d’erreur 404. On doit donc dans ce cas utiliser la méthode POST qui transmet les données dans le cors de la
réponse à la requête, et donc n’est pas limité en taille.
Cross-Origin Resource Sharing :cors
➢ Accès :
Le fait d’avoir les données dans l’URL peut offrir à l’utilisateur de nouvelles possibilités.
Tu as directement accès à la réponse sans passer par le fichier html. De plus tu peux créer un raccourci dans un site
directement sur ce lien de réponse.
Par exemple sur ta page web de cuisine, tu veux faire une recherche sur wikipédia sur le chocolat, tu peux mettre
directement en raccourci :
https://fr.wikipedia.org/wiki/Index.php?search=chocolat
Récupération des données et réponse du serveur
• Pour récupérer les données en php, il faut posséder un serveur qui gère le php ou utiliser un serveur qui
fonctionne avec un autre langage (ex :PYTHON).
• En php, on récupère la variable passée par la méthode POST par le script

php : $myVar = $_POST[’pseudo’] ;
• En python, on récupère la variable passée par la méthode POST par le script $_POST['prenom']
• En php, les variables commencent par un $.
• Un fichier php peut être au départ un fichier de type html, mais il contient au moins un bloc de code
php délimité par <?php ou <?PHP et ?> . Le fichier comporte l’extension .php
• La fonction echo écrit un texte, une variable. Pour concaténer un texte et une variable, php utilise le
point.
Pour les sitesWeb en Python, il existe un frameWork qui gère toute la partie serveur : Django.
Pour les sitesWeb en Php, il existe plusieurs frameWorks qui gèrent toute la partie serveur : Symphony3, Lavarel,.…
NSI Première Mme M. Feida Ben Dhieb Ma Réussite

Interaction Homme Machine Sur Le Web

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Interaction Homme Machine Sur Le Web

Transféré par

Droits d'auteur :

Formats disponibles

NSI Première Interaction M/M/W Mme M. Feida B.

Structure du <!DOCTYPE html> HTML est un langage à balises,

Voici quelques balises utiles :

<linkrel="stylesheet"href="monfichier.css">la balise link qui possède

Autres balises à utiliser :

Balises de formulaire Balises génériques

Fiche17 : Comment présenter et embellir la page, en utilisant du CSS :

Fiche18 : Interactivité et programmation en javascript. Page web dynamique

Créer ensuite un fichier page1.Js, et en copier-coller le script précédent.

Sans aller jusqu’à un apprentissage profond de JavaScript, tu as déjà dû remarquer :

1- Les principaux types et leurs déclarations

2- Les opérateurs logiques

if (expr booléenne) switch (expr)

for (let indice = val; test terminaison; opération

for (let iterateur in objet)

while (expr booléenne)

5- Les objets windows

window.location : url de la page ouverte dans la fenêtre

Ouvertures de boîtes de dialogue :

6- Methodes d’accès au code de la page HTML

Constatations : un code CSS peut être introduit de 3 manières :

Fiche 19 : Communication Client-Serveur

• Les échanges sur internet se font suivant le modèle Client/Serveur.

Les requêtes clients HTTP , HTTPS et les réponses du serveur

• URL : Uniform Ressource Locator

Méthode (il y en a 3 : GET, POST ou HEAD)

La réponse du serveur est en générale de la forme :

Exemple : Si on tape l’URL suivant dans son navigateur : http://www.nsi-premiere.fr/test.html

GET/test.html HTTP/1.1 Host

La réponse du serveur est alors :

Et puis tout le fichier HTML correspondant

Rappels : on a vu au précédemment quelques balises HTML pour gérer un formulaire

Méthodes GET et POST

Teste le code html suivant et l’analyser :

<p>Comment tu t'appelles ? </p>

• Quel est le fichier qui reçoit les données du formulaire ?

Récupération des données et réponse du serveur

• En php, on récupère la variable passée par la méthode POST par le script

• En php, les variables commencent par un $.

NSI Première Mme M. Feida Ben Dhieb Ma Réussite

Vous aimerez peut-être aussi