Notions de web et d'interface homme-machine

Dans ce cours de spécialité Numérique et sciences informatiques, Charles explique ce qui se cache derrière les notions de web et d'interface homme-machine

Téléchargez en PDF :

• le support de cours,
• une fiche d'exercices,
• les fichiers d'exercices,
• le corrigé des exercices.

Le plan du cours

1. Historique
2. Web et Internet
3. Modèle client-serveur
4. Les langages client : HTML, CSS, JavaScript

Web et Internet

Internet est un gigantesque réseau d’ordinateurs où s'échangent : 

• courriers electroniques
• streaming
• échange de fichiers par FTP

Le Web est un ensemble d’informations constitué par des milliards de documents reliés les uns aux autres par des hyperliens ou liens hypertexte.

Modèle client-serveur

Le navigateur commence par demander, à un serveur de noms de domaines (DNS), l’adresse IP de chihuahuas.fr. Le serveur fournit 185.75.143.28.

Puis le navigateur envoie une requête HTTP au serveur web.

GET /commandes.html HTTP/1.1

Host : www.chihuahuas.fr

User-Agent : Mozilla/5.0

Accept : text/html

Le serveur web renvoie l’entête suivant

HTTP/1.1 200 OK

Date: Thu, 19 Jun 2020 16:20:34 GMT

Server: Apache/2.2.3

Content-Length: 7234

Content-Type: text/html; charset=UTF-8

…suivi des données c’est-à-dire de la page web au format HTML.

L'HyperText Transfer Protocol Secure (HTTPS, littéralement « protocole de transfert hypertextuel sécurisé ») est la combinaison du HTTP avec une couche de chiffrement comme SSL ou TLS

Récapitulons :

• Internet est un réseau informatique.
• Le Web est un réseau d’informations.
• Le Web et Internet représentent deux choses différentes.
• Cette URL https://mabanque.fr témoigne avec https:// que l’échange entre le navigateur et le serveur est chiffré.

Les langages client : HTML, CSS, JavaScript

HTML5 (HyperTextMarkupLanguage 5)

HTML5 est un langage de balises utilisé pour la structure du site.

Exemples :

La balise <a> permet d’insérer dans une page web un lien hypertexte

Pour insérer une image dans un script HTML, on utilise la balise <img>

CSS 3 (Cascading Style Sheets).

CSS 3 Langage de feuilles de style en cascade utilisé pour le graphisme du site. L’ordre de la cascade est le suivant : Sélecteur > Propriété > Valeur

Exemples :

On saisit le code suivant dans un fichier CSS : p{color:red;text-decoration:underline;} Qu’observe-t-on sur la page web ? Les textes des paragraphes sont soulignés et en rouge

Comment modifier le style de la balise h1 dans un fichier CSS ? h1{font-style:italic; color:red

JavaScript

JavaScript est un langage de programmation de scripts utilisé pour l’interaction utilisateur – interface.

Exemples :

<button onclick='Rouge()'>Cliquez</button> cette ligne de code est un JavaScript

Le sélecteur document.getElementById('truc') recherche dans le document web l’unique élément d’identifiant 'truc'