Technique · HTML · DOM · HTTP · Navigateur

Comprendre le navigateur.

Découvrir ce que le navigateur reçoit, comprendre les bases du HTML, du DOM, des ressources Web et des outils techniques disponibles directement dans le navigateur.

Une page Web n'est pas seulement ce que vous voyez à l'écran. Le navigateur reçoit des ressources, interprète du code, construit une représentation de la page et échange avec des serveurs.

Découvrir le programme Renseignements

https://example.test/page.html

Elements Console Sources Network

                    <html>
                
                    <body>
                
                    <h1

                     class=

                    "title"

                    >

                    Page Web

                    </h1>

                    <img

                     src=

                    "image.jpg"

                    >

                    </body>
                
                    </html>
                
                        GET /image.jpg
                    
                        200
                    
                        image/jpeg

Derrière l'écran

Voir une page est le résultat d'une succession d'opérations techniques.

Lorsque vous saisissez une adresse Web, le navigateur communique avec un serveur, reçoit différentes ressources puis les interprète pour construire la page affichée à l'écran.

HTML, feuilles de style, images, JavaScript, données et autres ressources peuvent participer à cette construction.

Comprendre ces mécanismes permet de regarder une page autrement : non plus uniquement comme un utilisateur, mais également comme un ensemble de données et de ressources techniques.

            
                Le navigateur est aussi un outil d'observation technique.
            
            Ses fonctions intégrées permettent
            notamment d'examiner la structure d'une
            page et les ressources qu'il utilise.

Quatre axes

HTML. DOM. HTTP. Navigateur.

01 / HTML

HTML

Comprendre la structure de base d'une page Web, les balises, attributs, liens, images et informations intégrées au document.

02 / DOM

DOM

Découvrir la représentation du document construite par le navigateur et comprendre pourquoi elle peut évoluer après le chargement initial.

03 / HTTP

HTTP

Comprendre le principe général des échanges entre le navigateur et les serveurs ainsi que les requêtes nécessaires au chargement.

04 / BROWSER

Navigateur

Apprendre à utiliser les outils techniques intégrés pour observer la page, ses ressources et certains échanges réseau.

Fonctionnement

De l'adresse Web à la page affichée.

01 / URL

Adresse Le navigateur reçoit une URL.

02 / REQUEST

Requête Il contacte une ressource Web.

03 / RESPONSE

Réponse Le serveur renvoie des données.

04 / DOM

Construction Le navigateur interprète le document.

05 / DISPLAY

Affichage La page apparaît à l'écran.

Programme

Comprendre ce que fait réellement le navigateur.

Comprendre le Web

Le rôle du navigateur
Le rôle du serveur Web
URL et adresse d'une ressource
Page et ressources associées
Client et serveur
Du clic à l'affichage

Les bases du HTML

Structure d'un document HTML
Balises et attributs
Titres et paragraphes
Liens hypertextes
Images et ressources
Informations non visibles immédiatement

Comprendre le DOM

Document Object Model
Arborescence du document
Éléments parents et enfants
Attributs et contenu
Modification dynamique d'une page
Différence entre source initiale et DOM courant

Comprendre HTTP

Principe requête / réponse
Méthode GET
Codes de réponse
En-têtes HTTP
Type de contenu
Redirections et erreurs courantes

Les ressources Web

Documents HTML
Images
Feuilles CSS
Fichiers JavaScript
Données JSON
Autres ressources chargées par la page

Les outils du navigateur

Afficher le code source
Ouvrir l'inspecteur
Examiner les éléments
Observer les ressources
Comprendre l'onglet Réseau
Premiers repères dans la console

HTML & DOM

Le code source et la page affichée ne sont pas toujours identiques.

Le HTML reçu initialement constitue une partie importante du document. Mais le navigateur peut ensuite construire et modifier le DOM.

Des scripts peuvent ajouter, supprimer ou modifier des éléments après le chargement initial de la page.

Comprendre cette distinction permet d'expliquer pourquoi une information visible dans l'inspecteur n'apparaît pas nécessairement de la même manière dans le code source initial.

            
                Source HTML ≠ nécessairement DOM actuel.
            
            L'un représente notamment le document
            reçu ; l'autre représente l'état du
            document construit et éventuellement
            modifié par le navigateur.

DOCUMENT / DOM TREE

<html>

<head>

<title> Exemple </title>

</head>

<body>

<main>

<img> ← ressource

</main>

</body>

</html>

Réseau

Une page peut nécessiter de nombreuses requêtes.

Le document HTML peut demander au navigateur de récupérer différentes ressources. L'onglet réseau permet d'observer une partie de ces échanges.

DOCUMENT

HTML

Le document principal peut fournir la structure initiale de la page.

IMAGE

Images

Les images peuvent être récupérées séparément depuis une ou plusieurs ressources.

SCRIPT

JavaScript

Des scripts peuvent participer au fonctionnement et modifier dynamiquement le document.

DATA

Données

Certaines interfaces chargent également des données séparément après l'affichage initial.

Outils techniques

Le navigateur possède déjà une boîte à outils.

SOURCE

Code source

Examiner le document source reçu et commencer à reconnaître sa structure HTML.

ELEMENTS

Inspecteur

Parcourir la structure du DOM, sélectionner un élément et observer ses attributs.

NETWORK

Réseau

Observer les ressources demandées par le navigateur et certaines caractéristiques des réponses.

SOURCES

Ressources

Repérer différents fichiers et scripts utilisés par la page.

CONSOLE

Console

Comprendre son rôle et découvrir les premiers éléments permettant d'observer le comportement d'une page.

STORAGE

Stockage

Découvrir que le navigateur peut également conserver localement certaines informations nécessaires au fonctionnement des sites.

Compétences

À l'issue de la formation.

HTML

Lire du HTML simple

Reconnaître la structure générale, les principales balises et les attributs d'une page.

DOM

Comprendre le DOM

Comprendre comment le navigateur représente et peut modifier le document.

HTTP

Comprendre les échanges

Identifier le principe des requêtes et réponses nécessaires au fonctionnement du Web.

NETWORK

Observer les ressources

Repérer les principales ressources chargées par une page.

DEVTOOLS

Utiliser l'inspecteur

Se repérer dans les principaux outils techniques proposés par le navigateur.

ANALYZE

Regarder derrière l'interface

Ne plus considérer une page Web uniquement comme ce qui apparaît visuellement à l'écran.

TRAINER / PROFILE

Alain Stevens

Cyberdétective® · Technologies numériques depuis 1999

WEB depuis 1999

TECHNIQUE HTML & Web

OUTILS programmation

AUJOURD'HUI formation & technologie

Le formateur

Comprendre ce qui se passe derrière l'écran.

Alain Stevens travaille autour d'Internet et des technologies numériques depuis 1999.

Son approche consiste notamment à dépasser l'interface visible pour comprendre les mécanismes techniques : structure des pages, ressources Web, données, automatisation et programmation.

Ancien détective privé, Alain Stevens ne réalise plus aujourd'hui d'enquêtes privées ou informatiques pour le compte de clients. Son activité actuelle comprend notamment la formation, la programmation, les logiciels, l'intelligence artificielle, l'automatisation et les services informatiques.

Utilisation responsable

Observer ce que le navigateur reçoit ne signifie pas contourner les protections.

La formation porte sur la compréhension technique du navigateur et sur l'observation de ressources auxquelles l'utilisateur dispose légitimement d'un accès.

Les outils de développement du navigateur ne doivent pas être utilisés pour contourner un mécanisme d'authentification, une restriction d'accès ou une mesure de sécurité.

L'objectif est de comprendre le fonctionnement du Web et d'apprendre à observer techniquement les informations effectivement reçues par son propre navigateur.

Formation comprendre le navigateur

Vous souhaitez recevoir des renseignements ?

Contactez-nous pour obtenir des informations sur le contenu, les modalités et les prochaines possibilités d'accès à la formation.

TARIF : SUR DEMANDE

Renseignements