Vidéo : Notions de web et d'interface homme-machine

icu.next-video

Contenu proposé par

France Télévisions

Notions de web et d'interface homme-machine

Les cours Lumni - Lycée

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 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'

Réalisateur : Didier Fraisse

Producteur : France tv studio

Année de copyright : 2020

Année de production : 2020

Année de diffusion : 2020

Publié le 04/08/20

Modifié le 25/02/21

Ce contenu est proposé par