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

vidéo suivante

Contenu proposé par

France Télévisions
Spécialités29:06

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 support de cours et des exercices.

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
  • Echange 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 05/08/20

arrow
voir plus

Ce contenu est proposé par