École Supérieure de Technologie de Casablanca

Cours : Culture Digitale

Filière : Génie Électrique

Internet et Web
Fonctionnement du web, les technologies web...etc

Mohammed Bazirha

February 22, 2025

Mohammed Bazirha Internet et Web 1 / 33

Plan

1 Introduction

2 Pages Web

3 Structuration du contenu d’une page web : HTML

4 Mise en forme des pages web : CSS

Mohammed Bazirha Internet et Web 2 / 33

Introduction

Qu’est-ce qu’une URL ?

Une URL (Uniform Resource Locator : Localisateur Uniforme de Ressources) est une adresse
permettant d’identifier et d’accéder à une ressource sur Internet. Elle sert à localiser des
pages Web, des images, des vidéos, ou d’autres contenus en ligne.
Une URL est composée de plusieurs éléments :
Protocole : Indique la méthode d’accès à la ressource, par exemple http:// ou https://
(pour une connexion sécurisée).
Nom de domaine : L’adresse du serveur hébergeant la ressource, comme
[Link].
Chemin d’accès : Le dossier ou la page spécifique, par exemple /articles/1.
Paramètres de la requête (facultatifs) : Des informations supplémentaires envoyées au
serveur, comme ?id=18.
Exemple : [Link]

Mohammed Bazirha Internet et Web 3 / 33

Introduction

World Wide Web (www)

Souvent appelé Web, est un système permettant de naviguer et d’accéder à des informations sur
Internet. Il repose sur des technologies comme le HTTP, les URL, et le langage HTML.
Par exemple, lorsqu’un utilisateur visite un site, son navigateur utilise l’URL pour localiser la
page, le protocole HTTP pour établir la connexion, et le langage HTML pour structurer et
afficher le contenu de la page.

Hyperlien
Est un élément cliquable dans un document. Il permet de passer automatiquement vers une autre
page Web, un autre document ou une autre section de la même page.
Exemple : les résultats d’une recherche Google sont présentés sous forme de liens hypertextes
menant à d’autres pages.

Mohammed Bazirha Internet et Web 4 / 33

Introduction

Page web
Est un document écrit en HTML (Hypertext Markup
Language)et enrichi de CSS et JavaScript pour améliorer
son apparence et ses fonctionnalités.
Elle est accessible sur Internet ou un réseau privé via un
navigateur Web, comme Google Chrome, Mozilla
Firefox, etc.
Elles constituent les éléments de base de tout site Web.
Une page Web comprend du texte, des images, des
vidéos, des liens vers d’autres pages et des composants
interactifs qui fournissent des informations et facilitent
la navigation.

Mohammed Bazirha Internet et Web 5 / 33

Pages Web

Histoire
La première page Web a été créée au début des années 1990 au CERN en Suisse par Tim
Berners-Lee. Il s’agissait de documents basiques reliant des informations via des liens
hypertextes.
En 1993, Marc Andreessen crée le navigateur Mosaic, facilitant l’accès aux pages Web
avec images et liens.
En 1996, les pages Web évoluent avec l’introduction des feuilles de style CSS pour des
mises en page formatées.
L’apparition des pages Web dynamiques connectées à des bases de données permet une
personnalisation.
Au fil des années, les pages Web ont continué d’évoluer avec de nouvelles technologies
pour plus de complexité et d’interactivité.

Mohammed Bazirha Internet et Web 6 / 33

Pages web

Pages web statiques Avantages des sites statiques :

Elles affichent un contenu fixe qui Performances rapides grâce au contenu fixe.
ne change pas dynamiquement. Sécurité accrue (absence de bases de données
Elles sont composées de : ou de code côté serveur).
HTML brut Gestion et déploiement simples.
CSS pour le style
JavaScript pour une interactivité
minimale (optionnel) Limites des sites statiques :
Le contenu est directement intégré Manque de personnalisation et d’interactivité
dans le code HTML. dynamique.
Il n’y a pas de récupération de Mise à jour difficile sans modifier le code.
données depuis des bases de Non adapté aux sites avec gestion de bases de
données ou d’autres sources. données ou personnalisation en temps réel.

Mohammed Bazirha Internet et Web 7 / 33

Pages web
Pages web dynamiques Avantages des sites dynamiques :
Elles génèrent un contenu à la volée, Personnalisation et interactivité accrues.
personnalisé pour chaque utilisateur.
Gestion simplifiée du contenu via des systèmes de
Elles sont composées de : gestion de contenu (CMS).
Langages côté serveur (PHP, Adapté aux sites nécessitant des mises à jour
Python, Ruby, [Link], etc.) fréquentes ou des fonctionnalités complexes.
HTML dynamiquement généré
CSS pour le style Limites des sites dynamiques :
JavaScript pour l’interactivité
côté client Performances potentiellement plus lentes en raison
de la génération de contenu en temps réel.
Le contenu est souvent extrait de
bases de données ou d’autres sources Complexité accrue en termes de développement et
externes. de maintenance.

Le HTML est généré dynamiquement Risques de sécurité plus élevés (attaques côté
en fonction des requêtes utilisateur. serveur, injections SQL, etc.).
Mohammed Bazirha Internet et Web 8 / 33
Pages web

Caractéristiques d’une Page Web

Accessibilité : Accessible via Internet ou des Interactivité : Utilisation de JavaScript pour

réseaux locaux grâce à des navigateurs web. des interactions complexes sans rechargement
de page.
Langages : Structurée en HTML et stylisée
en CSS, avec des langages supplémentaires Responsivité : Adaptation du contenu à la
pour des fonctionnalités dynamiques. taille de l’écran (mobile, tablette, ordinateur).
Hébergement : Stockée sur des serveurs web Contenu dynamique : Personnalisation du
et accessible via le protocole HTTP. contenu via des langages côté serveur et des
bases de données.
Liens : Contient des éléments cliquables
(texte, images, boutons) pour naviguer entre Multimédia : Intégration d’images, vidéos,
les pages. etc., pour enrichir l’expérience utilisateur.

Mohammed Bazirha Internet et Web 9 / 33

Pages web

Éléments d’une Page Web

Contenu textuel : constitue la majeure Formulaires : Permettent aux utilisateurs de

partie du contenu des pages web. Les soumettre des données ou des paramètres.
titres, sous-titres et paragraphes guident
Boutons/Menus : Facilitent la navigation et
la narration.
les actions (soumission de formulaires).
Listes : Les listes numérotées et les puces
Barres latérales/Widgets : Contiennent des
facilitent la lecture et la navigation.
éléments secondaires utiles, tels que des barres
Images : Photos, illustrations et de recherche, des balises, etc.
graphiques améliorent le design visuel.
Pieds de page : Contient la navigation
Vidéos : fichier multimédia qui combine secondaire et les informations de droits d’auteur.
des images en mouvement et du son.
Métadonnées : Données cachées concernant la
Tableaux : Représentations visuelles de page pour les moteurs de recherche et
données sous forme de lignes et colonnes. navigateurs.
Mohammed Bazirha Internet et Web 10 / 33
Internet ce n’est pas le Web !

Internet Web
Est un réseau mondial d’ordinateurs Est un sous-ensemble d’Internet.
interconnectés permettant la communication et
Il permet d’accéder à des pages web via
l’échange de données.
un navigateur (Chrome, Firefox, etc.).
Il repose sur des protocoles comme TCP/IP.
Il utilise les technologies :
Il comprend plusieurs services :
HTTP/HTTPS (protocoles)
Le Web (World Wide Web) HTML, CSS, JavaScript
E-mails (courriers électroniques) (langages)
FTP (transfert de fichiers) URL (adresses des sites)

Différence
Internet : L’infrastructure qui connecte les ordinateurs.
Web : Un service fonctionnant sur Internet, permettant de consulter des sites via un navigateur.

Mohammed Bazirha Internet et Web 11 / 33

Exemple d’une simple page web

Langages HTML et CSS Résultat visible à l’écran

Mohammed Bazirha Internet et Web 12 / 33

Structuration du contenu d’une page web : HTML

Technologies principales :
HTML (HyperText Markup Language) : Définit la structure et le contenu d’une page web. Un
langage de balisage permettant d’écrire de l’hypertexte.
CSS (Cascading Style Sheets) : Apporte du style et améliore la mise en page.
JavaScript : Ajoute de l’interactivité et du dynamisme aux pages web.

Fonctionnalités clés :
Organisation sémantique du contenu à l’aide de balises HTML.
Intégration de ressources multimédias : images, vidéos, sons et animations.
Création de formulaires pour recueillir des informations des utilisateurs.
Utilisation de feuilles de style CSS pour une mise en page responsive.
Ajout de scripts pour des fonctionnalités interactives (menus dynamiques, carrousels, validation de
formulaires).

Mohammed Bazirha Internet et Web 13 / 33

Structuration du contenu d’une page web : HTML

Pourquoi 2 langages
HTML: Son rôle est de gérer et organiser le
contenu. C’est donc en HTML que vous
écrirez ce qui doit être affiché sur la page : du
texte, des liens, des images. . . Vous direz par
exemple :
” Ceci est un titre”,
” Ceci est un menu”,
” Voici le texte principal de la page”,
” Voici une image à afficher”, etc.
CSS (Cascading Style Sheets): Le rôle du CSS
est de gérer l’apparence de la page web
(agencement, positionnement, décoration,
couleurs, taille du texte. . . ).

Mohammed Bazirha Internet et Web 14 / 33

Structuration du contenu d’une page web : HTML

Mohammed Bazirha Internet et Web 15 / 33

Structuration du contenu d’une page web : HTML

À quoi ressemble le HTML ?

Dans Google Chrome , accédez à un page web: [Link]
Faites un clic droit sur la page et sélectionnez ”Afficher le code source de la page”.
Vous verrez alors le code HTML qui structure la page web.

Création d’une page HTML simple

Créez un nouveau fichier texte vide.
Renommez-le en [Link].
Ouvrez le fichier avec : ”Boc-notes” ou ”Notepad++”.
Écrivez dedans : <h1> Hello World </h1>.
Ouvrez la page avec un navigateur (Google Chrome, Internet Explorer, etc.).

Mohammed Bazirha Internet et Web 16 / 33

Structuration du contenu d’une page web : HTML

Les balises HTML

Les balises HTML sont prédéfinies et indiquent au navigateur comment afficher le
contenu.
Une balise doit toujours être fermée si elle a été ouverte : <balise> contenu
</balise>.
Exemples de balises courantes :
Balise Code HTML Résultat
Gras <b> Texte en gras </b> Texte en gras
Italique <i> Texte en italique </i> Texte en italique
Souligné <u> Texte souligné </u> Texte souligné
Titre <h1> Titre principal </h1> Titre principal
Mohammed Bazirha Internet et Web 17 / 33
Structuration du contenu d’une page web : HTML

Balises classiques
Une balise HTML a une ouverture et une fermeture.
Exemple :
<title> Ceci est un titre </title>
Tout texte en dehors des balises n’est pas concerné.
Exemple :
Ceci n’est pas un titre <title> Ceci est un titre </title> Ceci n’est pas un titre

Balises orphelines
Ne nécessitent pas de balise fermante.
Souvent utilisées pour l’affichage direct.
Exemple : <br /> (saut de ligne)

Mohammed Bazirha Internet et Web 18 / 33

Structuration du contenu d’une page web : HTML

Utilisation des balises Exemple incorrect

Les balises HTML structurent le <b>texte en gras et <i>italique</b></i>
contenu. Erreur : Les balises se chevauchent.
On peut imbriquer des balises, mais il Cela peut causer des problèmes
faut respecter l’ordre !!. d’affichage.

Exemple correct Outils recommandés

<b>texte en gras et <i>italique</i></b> Utilisez des éditeurs comme
<b> : Balise pour le gras. NotePad++ ou VS Code.
<i> : Balise pour l’italique. Ils offrent :
Les balises sont correctement fermées. Coloration syntaxique.
Indentation automatique.
Détection des erreurs.
Mohammed Bazirha Internet et Web 19 / 33
Création de pages web - Les attributs des balises

Les attributs des balises Attributs courants

Les balises HTML peuvent avoir des attributs. id : Identifie un élément de manière unique.
Les attributs fournissent des informations class : Applique un style CSS.
supplémentaires. src : Spécifie la source d’une image ou d’un
Syntaxe : script.
<balise att1="val1" att2="val2"> href : Définit un lien hypertexte.
alt : Texte alternatif pour les images.
Exemple simple
<b title="avec titre"> texte en gras Exemple complet
</b> <a href="[Link]
title="Visitez le site"> Cliquez ici
title : Affiche une info-bulle au survol. </a>

href : Lien vers un site web.

title : Info-bulle au survol.

Mohammed Bazirha Internet et Web 20 / 33

Création de pages web - Structure d’une page HTML
Structure de base
Une page HTML est structurée avec des balises principales :
<!doctype html> : Déclare le type de document.
<html> : Conteneur principal de la page.
<head> : Contient les métadonnées (titre, liens CSS, etc.).
<body> : Contient le contenu visible de la page.

Exemple de page HTML

<!doctype html> <html> <head> <title> First page</title> </head> <body>
<p>Hello World</p> </body> </html>

Points clés
<!doctype html> : Indique au navigateur qu’il s’agit d’un document HTML5.
<title> : Définit le titre de la page (affiché dans l’onglet du navigateur).
<p> : Balise pour un paragraphe de texte.
Mohammed Bazirha Internet et Web 21 / 33
Les Titres en HTML

Utilité : Bien structurer le contenu d’une page web.

Les 6 niveaux de titres : Exemple de rendu :

<h1> : Titre très important (ex. titre de <h1> Grand Titre </h1>
la page) <h2> Sous-Titre </h2>
<h2> : Titre important <h3> Titre Moyen </h3>
<h3> : Sous-titre <h4> Titre Plus Petit </h4>
<h5> Petit Titre </h5>
<h4> : Titre moins important
<h6> Plus Petit Titre </h6>
<h5> : Titre peu important
<h6> : Titre très peu important

Mohammed Bazirha Internet et Web 22 / 33

Les Paragraphes en HTML
Utilité : Définir des blocs de texte structurés sur une page web.
Les balises principales :
<p> : Délimite un paragraphe
<br /> : Insère un saut de ligne

Exemple de code :
<p> Bonjour et bienvenue sur mon site ! </p>
Bonjour <br /> Ceci est sur une nouvelle ligne.

Aperçu du rendu :
Bonjour et bienvenue sur mon site !

Bonjour
Ceci est sur une nouvelle ligne.
Mohammed Bazirha Internet et Web 23 / 33
Les listes HTML : Non ordonnées et ordonnées

Liste non ordonnée (<ul>) Liste ordonnée (<ol>)

Utilisée pour afficher une liste d’éléments sans Utilisée pour afficher une liste d’éléments dans un
ordre spécifique. ordre spécifique.
Chaque élément est marqué par un puce (par Chaque élément est numéroté (par défaut : 1, 2,
défaut : un point noir). 3, etc.).
Balises : Balises :
<ul> : Conteneur de la liste. <ol> : Conteneur de la liste.
<li> : Élément de la liste. <li> : Élément de la liste.

Exemple de code Exemple de code

<ul> <li>Pommes</li> <li>Bananes</li> <ol> <li>Étape 1</li> <li>Étape 2</li>
<li>Oranges</li> </ul> <li>Étape 3</li> </ol>

Aperçu Aperçu
Pommes 1 Étape 1
Bananes 2 Étape 2
Oranges 3 Étape 3
Mohammed Bazirha Internet et Web 24 / 33
Exercice : Créer des Listes en HTML

Créez une page HTML qui contient les deux listes suivantes :

Composants d’un ordinateur Étapes pour assembler un ordinateur

Processeur 1 Installer le processeur dans le socket
Carte mère de la carte mère
Mémoire RAM 2 Ajouter la mémoire RAM
Disque dur / SSD 3 Connecter le disque dur ou SSD
Carte graphique 4 Placer la carte graphique
Alimentation 5 Relier tous les câbles
Boı̂tier 6 Allumer l’ordinateur

Mohammed Bazirha Internet et Web 25 / 33

Liens et images en HTML

Les liens (<a>) Les images (<img>)

Utilité : Insérer des liens vers une Utilité : Insérer une image dans une page web.
ressource (page web, emplacement, etc.). Balise : <img /> (balise orpheline).
Balise : <a>. Attribut : src (adresse de l’image).
Attribut : href (adresse de la ressource). Attribut optionnel : alt (texte alternatif).
Contenu : Texte à afficher pour le lien.
Exemple de code
Exemple de code <img src="[Link]" alt="Description"/>
<a href="[Link]
Visitez notre site </a> Aperçu

Aperçu
Visitez notre site Image
[Link]

Mohammed Bazirha Internet et Web 26 / 33

Exercice : Création d’un hypertexte et insertion d’une image en HTML

Question : Créez une page HTML qui contient les Résultat attendu :
éléments suivants :
Un lien cliquable sur la page qui redirige vers
1 Un lien cliquable qui redirige vers un site web
le site choisi.
de votre choix (par exemple,
”[Link] Une image affichée sur la page.
2 Une image insérée dans la page à partir d’une Conseils :
URL ou d’un fichier local (une image de votre Vous pouvez ajouter un attribut
choix). target=”blank” pour ouvrir le lien dans un
Instructions : nouvel onglet.

Utilisez la balise ”< a >” pour créer un lien N’oubliez pas de définir l’attribut alt pour
cliquable. l’image.

Utilisez la balise ”< img >” pour insérer Vous pouvez définir la taille de l’image en
l’image. utilisant les attributs width et height.

Mohammed Bazirha Internet et Web 27 / 33

Tableau en HTML
1. Structure de base d’un tableau 3. Code HTML de l’exemple :
Un tableau en HTML est défini avec la <table border="1">
balise <table>. <tr>
Les lignes sont créées avec <tr> (table <th>Nom</th>
row). <th>^
Age</th>
</tr>
Les cellules sont définies avec <td> (table
<tr>
data) pour les données et <th> (table
<td>Alice</td>
header) pour les en-têtes.
<td>23</td>
</tr>
2. Exemple <tr>
Nom Âge <td>Bob</td>
Alice 23 <td>30</td>
Bob 30 </tr>
</table>
Mohammed Bazirha Internet et Web 28 / 33
Exercice : Création d’un Tableau en HTML

Écrivez le code HTML permettant d’afficher le tableau suivant :

Notes des Étudiants

Étudiant Math Info Physique
Ali 15/20 14/20 16/20
Fatima 12/20 17/20 14/20
Youssef 18/20 16/20 15/20
Sara 14/20 15/20 13/20

Mohammed Bazirha Internet et Web 29 / 33

Fusionner des cellules dans une table HTML

1. Fusionner des colonnes avec colspan

L’attribut colspan permet de fusionner plusieurs colonnes en une seule cellule.
Il s’utilise dans un élément <td> ou <th>.
Exemple : <td colspan="2"> Texte </td> fusionne deux colonnes.

2. Fusionner des lignes avec rowspan

L’attribut rowspan permet de fusionner plusieurs lignes en une seule cellule.
Il s’applique également aux balises <td> et <th>.
Exemple : <td rowspan="2"> Texte </td> fusionne deux lignes.

Utilité
Ces attributs permettent d’organiser les tableaux de manière plus structurée.

Mohammed Bazirha Internet et Web 30 / 33

 Fusionner les cellules de Jane Smith dans une table HTML
<table border="1"> <table border="1">
<tr> <tr>
Exercice de pratique <td>Nom</td> <td>Nom</td>
<td>Prénom</td> <td>Prénom</td>
<td>Âge</td> <td>Âge</td>
1. Écrivez le code HTML permettant
<td>Ville</td> <td>Ville</td>
d’afficher le tableau suivant :
</tr> </tr>
Nom Prénom Âge Ville <tr> <tr>
John Doe 25 Paris <td>John</td> <td>John</td>
Jane Smith 30 Lyon <td>Doe</td> <td>Doe</td>
<td>25</td> <td>25</td>
2. Écrivez le code HTML permettant <td>Paris</td> <td rowspan="2">Paris,
d’afficher le tableau suivant : </tr> Lyon</td>
<tr> </tr>
Nom Prénom Âge Ville <td colspan="2">Jane <tr>
John Doe 25 Smith</td> <td>Jane</td>
Paris, Lyon
Jane Smith 30 <td>30</td> <td>Smith</td>
<td>Lyon</td> <td>30</td>
</tr> </tr>
</table> </table>
Mohammed Bazirha Internet et Web 31 / 33
Exercice : Fusion des cellules d’un tableau en HTML
Le tableau initial, où aucune cellule n’est fusionnée :

Cellule 1 Cellule 2 Cellule 3 Cellule 4 Cellule 5

Cellule 6 Cellule 7 Cellule 8 Cellule 9 Cellule 10
Cellule 11 Cellule 12 Cellule 13 Cellule 14 Cellule 15
Cellule 16 Cellule 17 Cellule 18 Cellule 19 Cellule 20
Cellule 21 Cellule 22 Cellule 23 Cellule 24 Cellule 25
Travail à réaliser : Fusionner les lignes et les colonnes pour obtenir le résultat suivant.

Cellule 1 et 2 Cellule 3 Cellule 4 Cellule 5

Cellule 6 Cellule 7, 8 et 9 Cellule 10
Cellule 12 Cellule 13 Cellule 14
Cellule 11 et 16
Cellule 17 Cellule 18 Cellule 19 Cellule 15, 20 et 25
Cellule 21 Cellule 22 Cellule 23 Cellule 24

Mohammed Bazirha Internet et Web 32 / 33

CSS : À traiter dans les prochaines séances

Dans cette présentation, nous avons abordé les bases de HTML. Le CSS, qui permet de
styliser les pages web, sera traité dans les prochaines sessions.

Mohammed Bazirha Internet et Web 33 / 33