Introduction

1. Introduction
2. Le principe d’Internet
3. Les langages du web
Introduction : Historique

• 1967 : Arpanet : réseau militaire

américain robuste aux pannes

• 1973 : Apparition du TCP/IP

• 1983 : Internet : Interconnexion

d’Arpanet et d’autres réseaux
Principe d’Internet
Internet est un réseau mondial
qui connecte des millions
d’ordinateurs pour permettre
l’échange rapide d’informations
et la communication entre
utilisateurs.
 Principe d’Internet : modèle TCP-IP
•Couche 1 – Physique
Transporte les bits (0 et 1) sur le câble ou le Wi-Fi.
•Couche 2 – Liaison de données
Organise les données en trames et évite les collisions
dans le réseau local.
•Couche 3 – Réseau
Trouve le chemin pour envoyer les données (routage, IP).
•Couche 4 – Transport
Assure une transmission fiable ou rapide (TCP ou UDP).
•Couche 5 – Session
Ouvre, gère et ferme les connexions entre deux
ordinateurs.
•Couche 6 – Présentation
Traduit et chiffre les données (format, compression,
cryptage).
•Couche 7 – Application
Fournit les services utilisés par l’utilisateur (Web, email,
FTP...).
Principes d’Internet : Les couches applicatives
• HTTP : web
• NNTP : newsgroup
• POP / SMTP : mail
• FTP : transfert de fichiers
• DNS : correspondance entre noms et adresses IP
• SSH : connexion à distance sécurisée
Principe d’Internet
Principe d’Internet : URL
• Une URL est une chaîne de caractères utilisée pour adresser les
ressources dans le Web
• Exemple :
[Link]
• http : protocole
• [Link] : hôte
• /chemin/ : chemin absolu sur le service
• [Link] : nom de la page Web
• q=req : chaine de requête, transmise à la page
Les langages du Web

📌📌 1. HTML – Structure
•Décrit la structure des pages Web
•Organise le contenu : titres, paragraphes, images, tableaux
📌📌 2. CSS – Style
•Gère l’apparence visuelle
•Couleurs, polices, mises en page, animations
📌📌 3. JavaScript – Dynamique
•Ajoute l’interactivité
•Boutons, formulaires, effets, mises à jour sans recharger
📌📌 4. Langages côté serveur
•PHP, Python (Django/Flask), [Link], Java…
•Traitement des données, connexions aux bases, logique métier
📌📌 5. Bases de données
•MySQL, PostgreSQL, MongoDB…

• Le web fonctionne sur le protocole HTTP

Comment fonctionne le Web ?

C'est un mécanisme client-serveur.

Le client demande un fichier, le serveur lui donne tel qu'il est stocké –
processus statique

Le serveur peut aussi générer un fichier en fonction de la demande

du client – processus dynamique
 Ecrire pour le Web

•Définir le besoin
•Objectif du site
•Public ciblé
•Fonctionnalités (blog, boutique, contact…)
•Conception (maquette)
•Plan du site (arborescence)
•Maquette visuelle (wireframe)
•Choix du design et des couleurs
•Développement
•Structure : HTML
•Style : CSS
•Interactivité : JavaScript
•Développement serveur (PHP, Python, [Link]…)
•Intégration de contenu
•Textes
•Images, vidéos
•Logo et identité visuelle
 Ecrire pour le Web

•Tests et optimisation
•Vérification du fonctionnement
•Compatibilité mobile
•Vitesse de chargement
•Sécurité
•Mise en ligne (hébergement)
•Choix du nom de domaine
•Hébergement Web
•Maintenance
•Mises à jour
•Sécurité
•Ajout de nouvelles pages ou fonctionnalités
 HTML, l'origine
HTML Hyper Text Markup Language est né en 1989

•SGML est un langage père : c’est un système qui permet de créer des langages pour
structurer des documents.
•HTML est un langage créé à partir de SGML.
👉👉 Donc :
HTML est un “enfant” de SGML.
SGML définit les règles générales, et HTML en est une application spécialisée pour créer
des pages Web.
 HTML, les principes

Il contient des commandes, implémentées par des balises pour

marquer les différents types de texte (titres, paragraphe, listes
…) , pour inclure des images, des formulaires, des liens …

C'est un langage à balisage qui décrit la structure logique d'un

document hypertexte. Il a volontairement été conçu pour être
simple.
L'hypertexte

Le langage HTML permet de créer des documents interactifs grâce à

des liens hypertextes, qui relient votre document à d'autres
documents.

En cliquant sur une zone de texte (ou une image, un logo) mise en
évidence, on peut accéder a un nouveau document
 la différence entre balises orphelines et balises pairées

✅ 1. Balises pairées (paired tags)

➤ Définition <p>Bonjour</p>
Ce sont des balises qui s’ouvrent et se ferment, et qui <h1>Titre</h1>
contiennent un contenu à l’intérieur. <div>Contenu ici</div>

➤ Structure
<balise_ouvrante> contenu </balise_fermante>

✅ 2. Balises orphelines (self-closing / empty tags)

➤ Définition <br>
Ce sont des balises sans contenu, donc pas besoin de balise <img src="[Link]">
fermante. <input type="text">
<hr>

➤ Structure
<balise />
Introduction au marquage - 1

Pour décrire un fichier hypertexte, le langage HTML insère des

balises dans le texte du document :

<marqueur> ici votre texte </marqueur>

Début de mise en forme Fin de mise en forme

Synonymes: marqueur, élément, tag.

 Introduction au marquage - 2
Ces balises peuvent être insérées n'importe où dans le texte,
entre 2 phrases, mots, lettres …

<gras>Le <italique> cours </italique> HTML</gras>

Le cours HTML
 Introduction au marquage - 3

Il faut respecter une logique d'imbrication:

Bon:

<gras><italique> Le cours HTML </italique> </gras>

Mauvais:

<gras><italique> Le cours HTML</gras></italique>

 Introduction au marquage - 4

Le langage HTML est sensible à la casse, toujours écrire en

minuscules.

Bon:

<gras><italique> Le cours HTML </italique> </gras>

Mauvais:
<GRAS><italique> Le cours HTML </italique> </GRAS>

<Gras><ITALIQUE> Le cours HTML </ITALIQUE> </Gras>

<GRAS><ITALIQUE> Le cours HTML </italique> </GRAS>

 Les attributs

Les balises peuvent posséder un ou plusieurs attributs qui

permettent de spécifier l'action de la balise. Toujours mettre la
valeur de l'attribut entre guillemets.

<marqueur attribut="argument">texte</marqueur>

<marqueur attribut1="argument" attribut2="argument">texte</marqueur>

 Les commentaires

<!–- Voici un commentaire HTML -->

<!–-
Voici un commentaire HTML qui
peut se placer sur plusieurs lignes

-->
Note sur les caractères accentués
Vous pouvez rencontrer le codage ASCII sur 7 bits spécifié par la norme
pour afficher les caractères accentués ou spéciaux. Ceux ci devront faire
l'objet d'un codage spécial au sein du fichier HTML.

é s'écrit &eacute; être s'écrit &eacirc;tre

Les serveurs Web accepte les caractères accentués de la norme iso-8859-1.

On spécifie l'encodage dans le fichier HTML.

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

✅ Caractères accentués ISO-8859-1 en HTML (avec entités)

Caractère Entité HTML

à &agrave;
â &acirc;
ä &auml;
æ &aelig;
ç &ccedil;
é &eacute;
è &egrave;
ê &ecirc;
ë &euml;
î &icirc;
ï &iuml;
ô &ocirc;
ö &ouml;
ù &ugrave;
û &ucirc;
ü &uuml;
ÿ &yuml;
 Structure de base d'un fichier HTML
Une balise <html> contenant une seule balise <head> et une seule balise <body>.

✅ Structure de base d’un fichier HTML

Un fichier HTML contient généralement 3 grandes parties :
1.<!DOCTYPE html>
Indique que c’est un document HTML5.
2.<html> … </html>
Contient toute la page Web.
3.<head> … </head>
1. Titre de la page
2. Encodage (UTF-8)
3. Liens CSS, scripts, etc.
4.<body> … </body>
1. Tout ce qui s’affiche pour l’utilisateur : textes, images, boutons…
✅ Exemple complet d’une page HTML simple

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Ma première page</title>
</head>
<body>

<h1>Bienvenue sur ma page Web</h1>

<p>Ceci est un paragraphe en HTML.</p>

</body>
</html>
Analyse des balises
<html> .. </html> Délimite le début et la fin du document
<head> .. </head> Entête du document, contient des méta-
informations
<body> . . </body> Corps du document

<title>. .</title> titre du document

<meta> . .</meta> méta-informations
<script> . .</script> script ou référence
Analyse des balises
<html> .. </html> Délimite le début et la fin du document
<head> .. </head> Entête du document, contient des méta-
informations
<body> . . </body> Corps du document
Rappels
Les noms d' éléments sont sensibles à la casse et sont écrits en
minuscules.
Les noms d'attributs sont sensibles à la casse, doivent être
écrits en minuscules et encadrées par des guillemets. Tous les
attributs doivent recevoir une valeur.
Les balises fermantes sont obligatoires.
 Un peu plus loin dans HTML
<html>
<head>
<title>Mon deuxieme fichier</title>
</head>
<body>
<h2>Hello World</h2>
<p>
L'emplacement de votre nouveau mat&eacute;riel est-il &agrave; proximit&eacute; (moins de 5m) d'une prise r&eacute;seau libre ? Si oui, relevez le
num&eacute;ro de la prise (il est &eacute;crit sur une plaque de c&eacute;ramique bleue, il faut respecter la distinction entre lettres majuscules et
minuscules). Sinon, il faut faire installer une nouvelle prise par le Service Travaux, auquel vous devrez adresser un bon de cession interne. La
suite des op&eacute;rations aura lieu quand vous aurez une prise disponible. Dans le doute, interrogez par courrier &eacute;lectronique
netadm@[Link]. </p>
<p>Votre demande doit nous parvenir par l'interm&eacute;diaire du correspondant informatique de votre Unit&eacute;. Elle se composera de deux parties
: un bon de cession interne envoy&eacute; au Service Informatique Scientifique et un courrier &eacute;lectronique adress&eacute; &agrave;
netadm@[Link] qui contiendra toutes les informations utiles (dont le num&eacute;ro du bon de cession). </p>
<ol>
<li> le premier &eacute;l&eacute;ment</li>
<li> le deuxi&egrave;me &eacute;l&eacute;ment</li>
<li> le troisi&egrave;me &eacute;l&eacute;ment</li>
</ol>
<p><a href="[Link] trouverez ici la suite du texte !! </a></p>
</body>
</html>
 Eléments de niveau bloc

<hn> . . </hn> Titre de niveau n, de 1 à 6

<p> . . </p> Paragraphe

Et aussi: address, blockquote, div, hr, pre sans oublier body !

 Eléments de listes
✅ 1. Définition
•<ul> : liste non ordonnée (avec des puces)
•<ol> : liste ordonnée (numérotée)

✅ 2. Exemple

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

<ul>
<ol>
<li>Pomme</li>
<li>Étape 1</li>
<li>Banane</li>
<li>Étape 2</li>
<li>Orange</li>
<li>Étape 3</li>
</ul>
</ol>
✅ 3. Différence principale

<ul> <ol>
Affiche des puces • Affiche des numéros 1,2,3…
Utilisé pour des éléments sans ordre particulier Utilisé pour des étapes ou un classement
Visuel : liste simple Visuel : liste numérotée
 Les liens sur un texte …ou sur autre chose !

•Sert à créer un lien cliquable vers une autre page web ou ressource.
•Syntaxe : <a href="URL">Texte du lien</a>
•Exemple : <a href="[Link]
 Voici un résumé clair des attributs principaux de la balise <a> :

Attribut Description Exemple

<a
href Indique l’adresse (URL) du lien href="[Link]
>Exemple</a>
<a href="..."
target Définit où le lien s’ouvre target="_blank">Ouvrir dans un
nouvel onglet</a>
Texte qui apparaît au survol du <a href="..." title="Visitez le
title
lien site">Lien</a>
<a href="[Link]"
download Permet de télécharger le fichier lié
download>Télécharger</a>
 La balise <p> en HTML sert à définir un paragraphe.

1. Fonction
•Crée un bloc de texte séparé du reste du contenu.
•Les navigateurs ajoutent automatiquement un espace avant et après le paragraphe.

2. Syntaxe
<p>Voici un exemple de paragraphe.</p>

💡💡 Remarque : La balise <p> est uniquement pour du texte.

Pour créer des sauts de ligne à l’intérieur, on utilise <br>.
 Les adresses URL

Les adresses du Web ou URL ( Uniform Resource Locator ) sont du

type:

[Link]

Le protocole: http
Le serveur (sous domaine + nom de domaine): [Link]
Le fichier avec son chemin: licence/l1/[Link]
Un ancrage: #cours
 Les adresses URL

L'adresse indiquée dans le lien ( URL) peut être absolue, elle

inclut tout le chemin en commençant par le protocole:

[Link]

Ou relative, elle n'inclut qu'une partie du chemin:

Pages_chats/[Link]
Eléments de ligne

<b>texte gras</b> texte gras

<i>texte italique</i> texte italique

<big>texte gros</big> texte gros

<small>texte petit</small> texte petit

Et aussi: br (pour sauter des lignes), code, sub, sup,

span, u (pour underline/soulignement), strike …
Les tableaux -1
<table> . . </table>

Définit un tableau

Principaux attributs:

align = position
bgcolor = color
border = n
cellpadding = n
cellspacing = n
width = n
Attribut Fonction / Description Exemple
Définit l’alignement du tableau par
align rapport à la page ou à son conteneur <table align="center">
(left, center, right)
Définit la couleur de fond du
bgcolor tableau (nom de couleur ou code <table bgcolor="#FFDD00">
hexadécimal)
Définit l’épaisseur de la bordure du
border <table border="2">
tableau (en pixels)
Définit l’espace entre le contenu de
cellpadding <table cellpadding="5">
la cellule et sa bordure (en pixels)
Définit l’espace entre les cellules du
cellspacing <table cellspacing="3">
tableau (en pixels)
Définit la largeur du tableau (en
width <table width="80%">
pixels ou en pourcentage)
Les tableaux -2
<tr> . . </tr>

Définit une ligne d'un tableau

Principaux attributs :

align = left,center,right
valign = top, middle, bottom
bgcolor = color
border = n
Les tableaux -3
<td> . . </td>

Définit une cellule de données

Principaux attributs :

align = type
valign = type
bgcolor = color
colspan, rowspan = n
height, width = n
Les tableaux -4
<table>
<tr>
<td> A</td>
<td> B </td>
<td> C </td> A B C
D E F
</tr>
<tr>
<td> D</td>
<td> E </td>
<td> F </td>
</tr>
</table>
Les images -1
<img> . . </img>

Insère une image

Principaux attributs:

align = left, bottom, middle, top, right

alt = text
border = n
height, width = n
src = url

<img src=‘’[Link]’’ />

<img src=‘’[Link]’’ width=‘’5’’ width=‘’10%’’/>
 HTML <input> Attributes
•type : définit le type de champ (text, email, password, file, etc.).
•name : nom du champ envoyé au serveur.
•value : valeur par défaut du champ.
•placeholder : texte affiché avant la saisie.
•required : rend le champ obligatoire.
•readonly / disabled : lecture seule ou désactivé.
•maxlength / minlength : limite la longueur de la saisie.
•pattern : impose un format (ex : regex).

un exemple simple

<label>Nom :</label>
<input type="text" name="nom" placeholder="Entrez votre nom" required>
 Bouton de soumission
1. Fonction :
•Sert à envoyer les données d’un formulaire vers le serveur.
•Déclenche l’action définie dans l’attribut action du formulaire.

<form action="[Link]" method="post">

<input type="text" name="nom" placeholder="Votre nom">
<input type="submit" value="Envoyer">
</form>
Les formulaires
L'élément <form> permet de créer des formulaires, qui peuvent
contenir des cases à cocher, des boutons radio, des listes
déroulantes … les données recueillies sont transmises à un
programme qui s'exécutera sur le serveur web et vous retournera
le résultat.

<form action="mon_programme.php">

… éléments du formulaire

</form>
<form action="[Link]" method="post">
<h2>Connexion</h2>

<label for="username">Nom d'utilisateur :</label>

<input type="text" id="username" name="username" placeholder="Entrez votre nom">

<label for="password">Mot de passe :</label>

<input type="password" id="password" name="password" placeholder="Entrez votre
mot de passe">

<input type="submit" value="Se connecter">

</form>
 Introduction aux méthodes HTTP GET et POST

Méthodes HTTP : GET et POST

•Les méthodes HTTP permettent au client (navigateur) de

communiquer avec le serveur.
•Les plus utilisées :
• GET : récupérer des données
• POST : envoyer des données
💡💡 Astuce : GET pour lecture, POST pour envoi/modification.
 Communication entre deux pages

1. Page 1 : Formulaire ([Link])

•Contient les champs à remplir : username et password
•Bouton pour soumettre les données : <input type="submit">
•Attribut important : action="[Link]" → indique la page qui va recevoir les données
•Méthode : method="post" → données envoyées dans le corps de la requête

2. Page 2 : Page de traitement ([Link])

Reçoit les données via $_POST['username'] et $_POST['password']
Vérifie les informations
Renvoie éventuellement une réponse ou redirige l’utilisateur

[[Link]] ---> POST ---> [[Link]]

Formulaire Traitement des données Explications :
(username + password) (Validation + réponse) •Les données ne passent pas dans l’URL (contrairement
à GET)
•La page de traitement peut afficher un message
d’erreur ou rediriger vers une autre page après validation
En HTML, la balise <select> permet de créer une liste déroulante pour choisir une ou plusieurs options
dans un formulaire.
Structure de base

<select name="ville">
<option value="casablanca">Casablanca</option>
<option value="rabat">Rabat</option>
<option value="marrakech">Marrakech</option>
</select>
 Exemple complet dans un formulaire

<form method="post" action="[Link]">

<label>Choisissez votre ville :</label>
<select name="ville">
<option value="">-- Sélectionnez --</option>
<option value="fes">Fès</option>
<option value="tanger">Tanger</option>
<option value="agadir">Agadir</option>
</select>
<br><br>
<input type="submit" value="Envoyer">
</form>
 Checkbox (type="checkbox")

Permet de choisir plusieurs options.

<input type="checkbox" name="sports[]" value="football"> Football<br>

<input type="checkbox" name="sports[]" value="basket"> Basket<br>
<input type="checkbox" name="sports[]" value="tennis"> Tennis

Radiobox (type="radio")

Permet de choisir une seule option.

<input type="radio" name="sexe" value="homme"> Homme

<input type="radio" name="sexe" value="femme"> Femme
 Exemple complet (formulaire)

<form method="post" action="[Link]">

<p>Sports pratiqués :</p>

<input type="checkbox" name="sports[]" value="football"> Football<br>
<input type="checkbox" name="sports[]" value="basket"> Basket<br>

<p>Sexe :</p>
<input type="radio" name="sexe" value="homme"> Homme<br>
<input type="radio" name="sexe" value="femme"> Femme<br>

<br>
<input type="submit" value="Envoyer">

</form>