Introduction au Web - Département informatique de l'IUT
←
→
Transcription du contenu de la page
Si votre navigateur ne rend pas la page correctement, lisez s'il vous plaît le contenu de la page ci-dessous
Introduction au Web
Bruno BEAUFILS
2019/2020
1. Introduction
À propos du cours
World-Wide-Web
2. HTML
3. CSS
4. Accès via CSS
5. HTTP
Introduction au Web Introduction 1 / 63
Bruno BEAUFILS
Ï Maître de conférences en informatique
Ï Université de Lille
Ï IUT / Département informatique
Ï Systèmes d’exploitation
Ï Réseaux
Ï CRIStAL (Centre de Recherche en Informatique, Signal et Automatique de Lille)
Ï Systèmes Multi-Agents (Théorie des jeux, Finance computationnelle)
Ï Intelligence artificielle distribuée / Vie artificielle
Ï Réseaux de co-auteurs
Ï Médiation scientifique
Ï Contacts
Ï bureau : 4A49 (juste à côté)
Ï email : bruno.beaufils@univ-lille.fr
Ï web : http://beaufils.u-lille.fr
Ï twitter : @brunobeaufils
Ï mastodon : @beaufils@mastodon.social
Introduction au Web Introduction 2 / 63Enseignement
Ï Séances :
Ï 18/12 (17h30 à 19h30)
Ï 14/01 (17h30 à 19h30)
Ï 15/01 (17h30 à 19h30)
Ï Évaluations
Ï Des exercices à chaque séance
Ï Ressources
http://bruno.iutinfo.fr/rsnweb
Introduction au Web Introduction 3 / 63Objectifs
Ï Comprendre le fonctionnement des langages du web
Ï Savoir extraire de l’information de pages web
Introduction au Web Introduction 4 / 63Internet
un système informatique interconnectant des réseaux d’ordinateurs
Ï un réseau de réseaux. . .
Ï . . . regroupés en réseau autonome Autonomous System
communiquant via commutation de paquets
Ï données découpées en morceaux
Ï entête + contenu
Ï entête = information sur le contenu et la destination
Ï commutation faite via une table
Ï valeur dans un champ de l’entête détermine une ligne de la table
Ï une ligne de la table détermine l’interface de transmission
un ensemble de protocoles
Ï modèle en 5 couches
Ï encapsulation entre les couches
une organisation molle, distribuée, ouverte, utilisant des registres
Ï ISOC, IAB, IETF, ICANN
Ï IANA
Ï Registres Internet Régionaux : AfriNIC, APNIC, ARIN, LACNIC, RIPE NCC
Introduction au Web Introduction 5 / 63Internet (suite) un ensemble de services Ï courrier électronique SMTP/POP/IMAP Ï base de données distribués DNS Ï échange pair à pair Ï World Wide Web HTTP une histoire avec des gens Ï Vinton CERF, Robert KAHN TCP/IP Ï Jon POSTEL IANA, RFC Introduction au Web Introduction 6 / 63
Qu’est-ce que le web ?
Ï Un mot à la mode
Ï Un des services de l’Internet
Ï ça n’est pas le seul (email, P2P, etc.)
Ï ni le plus utilisé (DNS)
Ï Un système crée au CERN
Ï Tim BERNERS-LEE à la fin des années 1980
Ï méthode universelle d’échange de données
Ï partager des documents scientifiques
Ï piloté par le World Wide Web Consortium
Ï Aujourd’hui
Ï espace d’information décentralisé
Ï interface utilisateur de beaucoup d’applications de l’Internet
Ï par exemple le courrier électronique et les webmails
Ï différence entre Web et Internet floutée pour beaucoup
Introduction au Web Introduction 7 / 63Qu’est-ce que le web ? (suite)
Ï Un système permettant à des logiciels d’échanger des documents
(ressources)
Ï service de la couche application
Ï architecture client/serveur
1. le client établit une connexion avec le serveur
2. le client demande un document (une page web) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . requête
3. le serveur la lui envoie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . réponse
4. le serveur coupe la connexion avec le client
Ï méthode universelle d’échange de données
Ï construit pour être universel = pas lié à un seul mode de représentation
Ï accessibilité (handicap, automatisation, etc.)
Ï seules les données sont importantes dans les documents
Ï Un ensemble de liens entre documents
Ï un réseau de documents physiquement distribué
Ï un espace d’information large et décentralisé, basé sur l’hyper-navigation
Introduction au Web Introduction 8 / 63Des logiciels et des standards
Ï Logiciels
Ï Client (Navigateur web)
Ï Aide l’utilisateur à faire les requêtes
Ï Présente les documents reçus (mise en forme)
Ï Exemples : Mozilla Firefox, Google Chrome / Chromium, Apple Safari, Microsoft Edge
Ï Serveur web
Ï Stocke ou prépare des documents
Ï Répond aux requêtes
Ï Exemples : Apache, nginx, Microsoft IIS
Ï Standards et formats
Ï protocole de communication entre client et serveur . . . . . . . . . . . . . . . . . . . . . . . . . HTTP
Ï localisation des documents/données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . URI, URL
Ï description des documents/données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML
Ï description de la mise en forme des données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . CSS
Introduction au Web Introduction 9 / 63Web 6= Internet Tim BERNERS-LEE et Vinton CERF Introduction au Web Introduction 10 / 63
1. Introduction
À propos du cours
World-Wide-Web
2. HTML
3. CSS
4. Accès via CSS
5. HTTP
Introduction au Web HTML 11 / 63HTML : décrire des données
HTML
HyperText Markup Language = Language de balisage d’hypertexte
Langage de description de document
Ï description du contenu (fond) pas de la mise en forme
Ï données
Ï structuration
Structuration par un arbre
Ï structure hiérarchique
Ï ensemble ordonné de noeuds reliés par des arêtes (arcs) un graphe particulier
Ï chaque noeud possède un type et une valeur
Ï type = nature de l’information contenu dans le noeud
Ï valeur = information elle même
Ï texte
Ï ensemble ordonné d’autres noeuds
Ï vide
Ï une racine le noeud origine
Ï vocabulaire de la filiation (mère, frères, filles, ancêtres, etc.)
Introduction au Web HTML 12 / 63HTML : un langage simple
Ï Représentation de l’arbre par du texte
Ï une syntaxe particulière pour décrire l’arbre
Ï 1 document = 1 fichier texte
Ï Contenu
1. une ligne spécifiant le type du document DOCTYPE
2. une suite d’éléments structurant le document
Ï Outils nécessaires : éditeur de textes
Ï Linux : Gedit, Pluma
Ï Multi systèmes (Windows/MacOS/Linux) : jEdit, Brackets, Atom, Emacs
Ï Certains aide au respect de la syntaxe à privilégier
Ï colorisation, visualisation arborescente, etc.
Introduction au Web HTML 13 / 63Exercice : préparation de l’environnement de travail
1. Créez un dossier nommé html sur votre bureau
Ï vous y placerez tous les documents (fichiers) du cours
2. Démarrez Firefox
3. Personnalisez Firefox
Ï Faire apparaître le menu
3.1 faire apparaître le menu de personnalisation
3.2 bouton droit de la souris près de la barre d’adresse
3.3 sélectionner Barre de menus
Ï Paramétrez les outils de développement
3.1 Menu puis Outils puis Développement web puis Outils de développement
3.2 Accès rapide : Shift + Control + I
3.3 Détachez la fenêtre
3.4 Changer les Options des outils
3.5 Désactivez tous les Outils de développement par défaut
Introduction au Web HTML 14 / 63Exercice : un premier document HTML
1. Créez un fichier (document) nommé premier.html avec le contenu suivant
Ma page test
Voici ma page web
2. Sur une feuille de papier dessinez l’arbre de ce document tel que vous
l’imaginez
3. Regardez votre fichier avec Firefox
Ï Menu puis Fichier puis Ouvrir un fichier. . .
Ï Accès rapide : Control + O
Introduction au Web HTML 15 / 63Exercice : un premier document HTML (suite)
4. Regardez l’arbre du document
Ï Menu puis Outils de développement puis Inspecteur
Ï Accès rapide : Shift + Control + C
Introduction au Web HTML 16 / 63Les composants du code HTML
Ï Élément
Ï la nature (sémantique) de la donnée type du noeud
Ï un contenu (la donnée elle même) valeur du noeud
Ï construit avec des balises
contenu
Ï Attribut
Ï informations supplémentaires concernant l’élément étiquette sur le noeud
Ï nature et valeur
Ï introduite dans la balise ouvrante
contenu
Ï Commentaire
Ï informations non utiles pour les données
Introduction au Web HTML 17 / 63Éléments
Ï Élément vide
Ï pas de contenu
Ï l’information est la balise ou ses attributs
Ï Éléments imbriqués
Ï représentation arborescente d’un document
Ï DOM = Modèle Objet du Document
Ï Exemple complet : src/gotlib.html
Ï Ouvrir dans Firefox montre la mise en forme
Ï Pour voir le document sans mise en forme :
Ï Menu contextuel puis Code source de la page
Ï Accès rapide : Control + U
Ï Pour voir l’arbre du document :
Ï Menu puis Outils de développement puis Inspecteur
Ï Accès rapide : Shift + Control + C
Introduction au Web HTML 18 / 63Documents
Racine du document :
contient 2 éléments seulement
Ï entête du document : caractéristiques et méta-données
Ï contenu principal
Entête du document :
contient des caractéristiques du document
Ï le titre du document
Ï des caractéristiques du document
Ï par exemple l’encodage du texte
Ï des liens vers des documents utiles à ce document
Corps du document :
contient le contenu effectif du document
Introduction au Web HTML 19 / 63Corps du document
Ï Éléments structurant :
Ï , , . . . , ,
Ï ,
Ï ,
Ï , ,
Ï , ,
Ï Éléments de textes :
Ï simples :
Ï paragraphe ,
Ï citation , ,
Ï rupture de paragraphe , ligne horizontale
Ï listes :
Ï non-ordonnée ,
Ï ordonnée ,
Ï de définition ,
Ï items des listes ou ,
Ï préformatté :
Ï formattage logique (sémantique)
Ï , , , , etc.
Introduction au Web HTML 20 / 63Corps du document (suite)
Ï Éléments extérieurs :
Ï image ,
Ï ancre vers d’autres documents hyperlien
Ï Éléments de tableaux :
Ï ,
Ï , , , parties
Ï , ligne
Ï , cellule
Ï Éléments de regroupement (uniquement quand rien d’autre ne convient) :
Ï regroupement en bloc ,
Ï regroupement en ligne
Ï Éléments de formulaires
Ï
Ï , , , , , ,
Introduction au Web HTML 21 / 63Références
Ï Mozilla Developper Network (HTML)
Ï Commencer avec le web
Ï Les bases de HTML
Ï Introduction à HTML
Ï Références HTML
Ï DevDocs HTML
Ï « Stop using so many divs! An intro to semantic HTML »
Introduction au Web HTML 22 / 63Vous pouvez aussi lire
