Département Mathématiques-Informatique

Filière : DUT Informatique

Polycopié de cours
Développement web - HTML/CSS
Filière – DUT Informatique – S1

Pr. SEDKI Akram

[Link]@[Link]

2024-2025
Table des matières
CHAPITRE 1............................................................................................................................................................... 3

INTRODUCTION AU WEB ....................................................................................................................................... 3

1. GENERALITES SUR INTERNET ..................................................................................................................... 3

2. PRINCIPES DE BASE DU WEB ........................................................................................................................ 5

2.1 QUE SE PASSE-T-IL QUAND ON VISITE UNE PAGE WEB? ................................................................... 5

2.2 ADRESSE D'UNE PAGE WEB : URL .......................................................................................................... 6

2.3 LE PROTOCOLE HTTP (HYPER TEXT TRANSFERT PROTOCOL) ...................................................... 6

CHAPITRE 2............................................................................................................................................................... 9

LANGAGE HTML ....................................................................................................................................................... 9

1. HTML : LE LANGAGE ...................................................................................................................................................... 9

2. LES BALISES .................................................................................................................................................................. 9
3. STRUCTURE DE BASE D'UNE PAGE HTML5 ........................................................................................................................ 10
4. BALISES D’ORGANISATION DU TEXTE ............................................................................................................................... 11
5. LES LISTES................................................................................................................................................................... 13
6. CREER DES LIENS .......................................................................................................................................................... 14
7. INSERER DES IMAGES .................................................................................................................................................... 16
8. FORMULAIRES HTML ................................................................................................................................................... 17
18.1 INSEREZ DES CHAMPS DE TEXTE AVEC LA BALISE <INPUT> ................................................................................................ 17
18.2 AJOUTER DES LABELS AVEC LA BALISE <LABEL> </LABEL> ............................................................................................... 17
18.3 AUTRES BALISES:..................................................................................................................................................... 18

SEDKI A. Développement web - HTML/CSS Page 2

 Chapitre 1
Introduction au web

1. Généralités sur Internet

Internet est un réseau mondial (un réseau de réseaux) de machines interconnectées. Et si une machine
connectée à un de ces réseaux est « sur Internet ».

Ce réseau Internet, permet aux ordinateurs qui y sont connectés de communiquer entre eux et
d'échanger de l'information (en utilisant le protocole de communication TCP/IP). Sur Ce réseau on trouve
plusieurs services :

SEDKI A. Développement web - HTML/CSS Page 3

  Le Web (le plus connu d’entre eux) : Il est constitué de pages Web organisées en sites Web,
lesquelles sont consultables grâce à un navigateur Web comme Google Chrome, Firefox,
Internet Explorer,...
 Les e-mails : pour échanger des messages. Il s’agit tout simplement de courrier électronique.
 Le FTP : un moyen d’échanger des fichiers entre ordinateurs.
 Etc.

Adresse IP :

Chaque machine connectée au réseau internet est identifiée par une adresse IP unique,
comme [Link]. Elle peut communiquer avec n'importe quelle autre machine connectée si elle connaît
son adresse IP.
Mais c’est difficile de retenir les adresses IP, c’est pour cela on a créé des noms de domaine, qui
permet d’associer à une adresse IP à un nom (comme [Link] associer à [Link] )
Le nom de domaine est converti en adresse IP par un système appelé le DNS.

Pour obtenir une adresse IP à partir d'un nom de domaine, vous pouvez utiliser la commande « ping
nom_domaine».

SEDKI A. Développement web - HTML/CSS Page 4

 2. Principes de base du web

IL faut savoir qu’il y a 2 types d’ordinateurs connectés au Web :

 Client web : Navigateur Web (FireFox (Mozilla), Chrome (Google), …) qui se charge de
l'affichage d'un document HTML.

 Serveur Web : est un logiciel qui s’exécute sur un ordinateur spécial appelé serveur (souvent
très puissants) qui "possèdent" les sites web et les envoient aux clients. lorsque ceux-ci les
demandent.
.

2.1 Que se passe-t-il quand on visite une page web?

 Exemple : [Link]

Lorsque l'utilisateur clique sur un lien ou saisit dans son navigateur une adresse Web pour visiter
[Link] l’affichage de la page Web se fait de la manière suivante :

 Le client (navigateur) traduit le nom de domaine [Link] en adresse IP par le DNS.

 Le client (navigateur) se connecte sur le serveur web [Link] et demande

[Link].

 Le serveur web cherche le fichier [Link].

 Le serveur web envoie le contenu de [Link] au navigateur.

 Le navigateur affiche le HTML reçu.

 Le «langage» (protocole) utilisé par le navigateur pour communiquer avec serveur s'appelle
« http ».

SEDKI A. Développement web - HTML/CSS Page 5

 2.2 Adresse d'une page web : URL

Les URL permettent d'identifier une ressource sur un serveur web. La syntaxe des URL est
standardisée, par exemple décomposons :

[Link]

1- https est Le « langage » (protocole) utilisé par le navigateur pour communiquer au

serveur.
2- [Link] est le nom de domaine sur Internet du serveur à rejoindre ([Link] est
converti par le DNS en adresse IP ([Link])
3- [Link] est le nom (le chemain) de la page à consulter sur le serveur.

2.3 Le protocole HTTP (Hyper Text Transfert Protocol)

 Protocole de communication (un ensemble de règles) utilisé pour chaque transaction web.
 Fourni aux ordinateurs un moyen standardisé pour communiquer entre eux
 Spécifie :
 Comment les clients demandent les données
 Comment les serveurs répondent à ces requêtes

SEDKI A. Développement web - HTML/CSS Page 6

 

Comment ça marche (en gros)

 Le navigateur analyse l'URL [Link] et voit que la machine qui connaît le

contenu de cette page (le serveur web) s'appelle [Link]. Il demande l'adresse IP de cette
machine à un serveur DNS, qui lui répond [Link]

 Il envoie un message HTTP à cette machine pour lui demander le contenu de la page /[Link]

 le serveur lui envoie un message HTTP en réponse en joignant à sa réponse le contenu de la page. Ce
contenu est écrit dans le langage HTML.

Le navigateur traduit le HTML pour mettre la page en forme, et affiche le résultat.

Requête HTTP

Voici comment un client demande une page web [Link] à un serveur [Link] :

GET /[Link] HTTP/1.0 Host:GET /[Link] HTTP/1.0

Host: [Link]
Referer: [Link]
User-Agent: CERN-LineMode/2.15 libwww/2.17b3 [Link] Referer: [Link]
User-Agent: CERN-LineMode/2.15 libwww/2.17b3

SEDKI A. Développement web - HTML/CSS Page 7

 Réponse HTTP

Le serveur va ensuite renvoyer la page HTML avec une réponse comme ceci :

HTTP/1.1 200 OK
Date: Mon, 05 Jan 2015 12:12:12 GMT
Last-Modified: Wed, 02 Jan 2013 18:18:18 GMT
Content-Type: text/html; charset=UTF-8
Content-Length: 323

<html>
<head> <title>Le blog de Toto</title> </head>
<body> <p>Bienvenue sur mon blog !</p> </body>
</html>
Last-modified: Fri, 09 Aug 1996 14:21:40 GMT
…….

Cette réponse indique que tout s’est bien passé : le code "200 OK" signifie que la page existe et que le
serveur peut la renvoyer. Il existe de nombreux codes : 404 (not found), 500 (internal server error)…

Le navigateur recevant le code HTML interprète les balises et affiche alors la page Web.

SEDKI A. Développement web - HTML/CSS Page 8

 Chapitre 2
Langage HTML

1. HTML : le langage
Le langage HTML (Hyper Text Markup Language), ou langage de balisage d’hypertexte, est un
langage standardisé utilisé pour la description des pages Web. Un document HTML (page Web) est écrit en
texte brut et comporte du contenu textuel accompagné de balises. Les balises servent à définir la structure
du document et le positionnement des éléments, ajouter des liens, insérer d’autres ressources (images,
vidéos, scripts), etc. C’est-à-dire décrire quelle partie correspond à un titre, un paragraphe, un tableau, etc..

Le navigateur Web affiche un document HTML en “interprétant” visuellement le code HTML (ou
source). Il s’agit bien du même document affiché de deux différentes manières. Sur la plupart des
navigateurs, on peut afficher le code source d’une page Web après un clic droit sur la page.

2. Les balises
Les pages HTML sont remplies de ce qu'on appelle des balises. Elles permettent de structurer le
contenu d’un document HTML. Elles sont entourées de « chevrons », c'est-à-dire des symboles < et > ,
comme ceci : <balise>.
Elles indiquent la nature du texte qu'elles encadrent. Elles veulent dire par exemple : « Ceci est le
titre de la page », « Ceci est une image », « Ceci est un paragraphe de texte », etc. On distingue deux types
de balises : les balises en paires et les balises auto-fermantes.

- Balise ouvrantes/fermante : <balise> ... </balise>

Elles s'ouvrent, contiennent du texte, et se ferment plus loin. Par exemple, la balise
<titre>…</titre> :
Ceci n'est pas un titre <titre>Ceci est un titre</titre> Ceci n'est pas un titre.

- Balises auto-fermantes : <balise/>

Ce sont des balises qui servent le plus souvent à insérer un élément à un endroit précis (par exemple
une image). Il n'est pas nécessaire de délimiter le début et la fin de l'image, on veut juste dire au navigateur «
Insère une image ici ». Par exemple, la balise <image />.
SEDKI A. Développement web - HTML/CSS Page 9
- Les attributs

Les balises peuvent être complétées par des attributs pour donner des informations supplémentaires.
L'attribut se place après le nom de la balise ouvrante et a le plus souvent une valeur entre guillemets, comme
ceci : <balise attribut="valeur">. Par exemple :
<image src="[Link]" />
<a href="[Link]"> ... </a>

3. Structure de base d'une page HTML5

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Titre</title>
</head>

<body>
………………….
</body>
</html>

A toute balise ouvrante doit être associée une balise fermante. Les balises ne doivent pas se
chevaucher : première ouverte, dernière fermée.

Le doctype : <!DOCTYPE html>

Tout document Html doit commencer par un doctype. Le Html5 propose un doctype unique et
simplifié. <!DOCTYPE html>
Pour se rendre compte de la simplification, il suffit de le comparer avec un doctype du Html 4.0 :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[Link]
En l’absence d’un doctype, le navigateur ignore selon quelles règles il doit traiter la page.

SEDKI A. Développement web - HTML/CSS Page 10

 La balise <html> … </html>

C'est la balise principale du code. Elle englobe tout le contenu de votre page. Ainsi la balise
fermante </html> se trouve tout à la fin du code !

L’entête <head> et le corps <body>

Une page web est constituée de deux parties :

- La balise <head> … </head>, qui se positionne juste après le doctype et la balise <html>, contient
ce qu’on appelle l’entête du document. Cette section donne quelques informations générales sur la page,
comme son titre, l'encodage (pour la gestion des caractères spéciaux), etc. Les informations que contient
l'en-tête ne sont pas affichées sur la page, ce sont simplement des informations générales à destination du
navigateur.

- La balise <body> … </body> : c'est là que se trouve la partie principale de la page. Tout ce que
nous écrirons entre ces balises sera affiché à l'écran.

L'encodage ( charset )

la balise <meta charset="utf-8" /> indique l'encodage utilisé dans votre fichier .html . l'encodage
indique la façon dont le fichier est enregistré. C'est lui qui détermine comment les caractères spéciaux vont
s'afficher (accents, idéogrammes chinois et japonais, caractères arabes, etc.).

Le titre principal de la page

La balise <title>Mon titre</title> donne un titre à votre page. Ce titre est affiché dans la barre de
titre, située en haut à gauche de tout navigateur dans les onglets ouverts par celui-ci.

Notez bien que le titre apparaît aussi dans les résultats de recherche, comme sur Google.

4. Balises d’organisation du texte

- Les paragraphes

La plupart du temps, lorsqu'on écrit du texte dans une page web, on le fait à l'intérieur de
paragraphes. Le langage HTML propose justement la balise <p> …</p> pour délimiter les paragraphes.
Par exemple :

SEDKI A. Développement web - HTML/CSS Page 11

 <p>Bonjour et bienvenue sur mon site </p>
<p> signifie « Début du paragraphe » ;
</p> signifie « Fin du paragraphe ».

- Sauter une ligne

En HTML, si vous appuyez sur la touche Entrée, cela ne crée pas une nouvelle ligne. Pour forcer le
passage à la ligne, il faut utiliser la balise auto-fermante <br/>.
Comme on l’a vu au section précédente, on écrit le contenu du site web entre les
balises <body>…</body>. Voici comment l'utiliser dans un code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mon titre</title>
</head>

<body>
<p>Bonjour et bienvenue sur mon site !<br/>
Ceci est mon premier test alors soyez indulgents s'il vous plaît, j'apprends petit à petit
comment cela marche.</p>

<p>Pour l'instant c'est un peu vide, mais revenez dans 2-3 jours, je vous assure que vous allez
être surpris !</p>
</body>
</html>

- Les titres

Le langage Html propose six grandeurs de caractères pour les titres. Il existe six niveaux de titre, de
<h1> …</h1> à <h6> …</h6> , à utiliser selon l'importance du titre.

SEDKI A. Développement web - HTML/CSS Page 12

 - La mise en valeur

Pour mettre du texte en gras (bold en anglais), il suffit d’inclure celui-ci entre les balises <strong>
… </strong>
Pour mettre le texte en italique (italic), il faut l’inclure entre les balises <em> … </em>.

5. Les listes
- Les listes nonordonnées

Les listes nonordonnées, aussi appelées listes à puces, sont introduites par la balise <ul> … </ul>.
On va écrire ensuite à l’intérieur de cette balise chacun des éléments de la liste entre deux balises <li>
…</li>. Par exemple :
<ul>
<li>Fraises</li>
<li>Framboises</li>
<li>Cerises</li>
</ul>

- Liste ordonnée

Une liste ordonnée fonctionne de la même façon, seule une balise change : il faut
remplacer <ul>…</ul> par <ol>…</ol> .
À l'intérieur de la liste, on ne change rien : on utilise toujours des balises <li>…</li> pour délimiter les
éléments. Par exemple :

SEDKI A. Développement web - HTML/CSS Page 13

 <h1>Les listes en Html5</h1>
<ol>
<li>Listes non-ordonnées</li>
<li>Listes ordonnées</</li>
<li>Listes de définition</li>
</ol>
</body>
</html>

6. Créer des liens

La balise <a> … </a> permet de définir des liens hypertextes externes ou internes au document HTML.
La cible du lien est définie par l’attribut href dont la valeur est une URL. Sa syntaxe de base est :
<a href="destination_du_lien">Texte de lien</a>

Par exemple, le code ci-dessous est un lien qui amène vers google, situé à
l'adresse [Link]
Ceci est un <a href="[Link] lien vers Google </a>

Il est possible de « forcer » l'ouverture d'un lien dans une nouvelle fenêtre. Pour cela, on rajoutera
target="_blank" à la balise <a>
Ceci est un <a href=[Link] target="_blank">lien vers Google</a>

Cas n°1 : Lien vers une autre page du site située dans le même dossier

Soit deux fichiers ([Link] et [Link]) situés dans le même dossier :

Effectuons dans la page 1 un lien vers la page 2 :
<a href="[Link]"> Lien vers page 2 </a>

Cas n°2 : Lien vers une page située dans un autre dossier

Soit la situation suivante. Imaginons que [Link] se trouve dans un sous-dossier appelé contenu ,
comme à la figure suivante.
Le lien vers la page 2 devient :

SEDKI A. Développement web - HTML/CSS Page 14

 <a href="contenu/[Link]"> Lien vers page 2 </a>

S'il y avait plusieurs sous-dossiers, on écrirait ceci :

<a href="contenu/autredossier/[Link]">

Si votre fichier cible est placé dans un dossier qui se trouve « plus haut » dans l'arborescence, il faut
écrire deux points, comme ceci : <a href="../[Link]">

- Lien à l’intérieur d’une page

Dans une page d’une certaine importance, il est intéressant de pouvoir mener l’utilisateur à un endroit
précis du document. On utilise alors la technique des ancres.
Pour créer une ancre, il suffit de rajouter l'attribut id à une balise qui va alors servir de repère. Ce peut
être n'importe quelle balise, un titre, par exemple.
Utilisez l'attribut id pour donner un nom à l'ancre. Cela nous servira ensuite pour faire un lien vers
cette ancre. Par exemple :

<h2 id="mon_ancre">Titre</h2>
Pour mon_ancre noter un nom. Sans espace, ni accent, avec comme premier caractère une lettre.
Ensuite, il suffit de créer un lien comme d'habitude, mais cette fois l'attribut href contiendra un dièse
(#) suivi du nom de l'ancre. Exemple :
<a href="#mon_ancre">Aller vers l'ancre</a>

SEDKI A. Développement web - HTML/CSS Page 15

 Normalement, si vous cliquez sur le lien, cela vous amènera plus bas dans la même page (à condition
que la page comporte suffisamment de texte pour que les barres de défilement se déplacent
automatiquement).

Exemple :

<h1 id="index">Index</h1>
<p><a href="#chapitre1">chapitre 1</a></p>
<p><a href="#chapitre2">chapitre 2</a></p>
<p> un paragraphe </p>
<h1 id="chapitre1">Chapitre 1</h1>
<p> un paragraphe ... (beaucoup de texte) ... </p>
<p> un paragraphe ... (beaucoup de texte) ... </p>
<h2>bli blo</h2>
<h1 id="chapitre2">Chapitre 2</h1>
<p> un paragraphe </p>

<a href="#index">retour à l'index</a>

7. Insérer des images

Pour insérer une image dans une page : balise autofermante <img/>.
Les images doivent se trouver obligatoirement à l'intérieur d'un paragraphe (<p>…</p> ).
Voici un exemple d'insertion d'image :
<p>
Voici une photo que j'ai prise lors de mes dernières vacances :<br />
<img src=" [Link]" alt="photo de fleurs" />
</p>

La balise doit être accompagnée de deux attributs obligatoires :

src : il permet d'indiquer où se trouve l'image que l'on veut insérer. Vous pouvez soit mettre un
chemin absolu (ex. : [Link] ), soit mettre le chemin en relatif (ce qu'on fait le
plus souvent). Ainsi, si votre image est dans un sous-dossier images , vous devrez taper :
src="images/[Link]"
alt : cela signifie « texte alternatif ». On doit toujours indiquer un texte alternatif à l'image, c'est-à-
dire un court texte qui décrit ce que contient l'image. Ce texte sera affiché à la place de l'image si celle-ci
ne peut pas être chargée par le navigateur.

- Parmi les autres attributs de l'élément <img/>, on trouve width et height qui définissent la taille en
pixels de la zone d'affichage de l'image (la valeur est donnée sans unité).

SEDKI A. Développement web - HTML/CSS Page 16

 8. Formulaires HTML
Objectif : Transmettre des informations saisies sur la page Web courante à une autre page Web (qui est, en
général, dynamique)

- Pour créer un formulaire, vous aurez besoin de la balise HTML <form> </form>, elle permet d'indiquer
le début et la fin du formulaire.

<form method="get" action="/[Link] ">

</form>

Les deux attributs indispensables pour construire un formulaire fonctionnel :

 L'attribut method indique par quel moyen les données rentrées par l’utilisateur vont être envoyée.
Sachez juste que les méthodes les plus utilisées sont get et post.
 L'attribut action indique l'adresse de la page ou du programme qui va traiter les informations.

8.1 Insérez des champs de texte avec la balise <input>

 La balise auto-fermante input, donne des résultats différents en fonction de la valeur de son
attribut type .

 la valeur "text" de l'attribut type (type="text") indique qu'il s'agit d'une zone de texte
d'une seule ligne.

 Exemple : demander au visiteur de renseigner son prénom. On écrirt alors :

<form>
<input type="text" name="prenom">
</form>

 l'attribut name permet d'identifier le champ d'où viennent les informations au niveau du
« backend ».

Il existe de nombreux type, dont:

- type="text" : un champs ou on peut taper du texte
- type="submit" : un bouton
- type="checkbox" : une cas à cocher

8.2 Ajouter des Labels avec la balise <label> </label>

label (étiquette) une indication pour guider le visiteur du site sur ce qu’il doit écrire. On crée un champ de
libellé avec la balise HTML <label> </label> :
<form method="get" action="/[Link] ">
<label>Votre prénom :</label>

SEDKI A. Développement web - HTML/CSS Page 17

 <input type="text" name="prenom">
</form>

Mais cela ne suffit pas : il faut lier le label à la zone de texte.

Pour ce faire, on doit donner un nom au champ de texte, avec l'attribut id. Ensuite, pour lier le label au
champ, il faut lui donner un attribut for qui a la même valeur que l' id du champ :

<form method="get" action="">

<p>
<label for="nom">Votre prénom : </label>
<input type="text" name="prenom" id="nom" placeholder=" Ex. : Mathieu ">
</p>
</form>

placeholder donner une indication sur le contenu du champ. Cette indication disparaîtra dès que le visiteur
aura cliqué à l'intérieur du champ.

18.1 Autres Balises:

<input type="..." name="..." />: un champ du formulaire. Il existe de nombreux types, dont:
- type="text" : un champs ou on peut taper du texte
- type="submit" : un bouton
- type="checkbox" : une case à cocher
Pour l'instant vous pouvez mettre ce que vous voulez pour l'attribut « name ».
<textarea name="..."></texteara>: un champs ou on peut taper du texte sur plusieurs lignes
<select name="…">
<option>bla bla</option>
<option>bli bli</option>
</select>
menu avec des options
...

Exemple :

HTML:

<form method="get" action="...">

<ul>
<li>input/text: <input type="text" name="abc"/></li>

SEDKI A. Développement web - HTML/CSS Page 18

 <li>input/checkbox: <input type="checkbox" name="def"/></li>
<li>select:
<select name="ghi">
<option>bla bla</option>
<option>bli bli</option>
</select>
</li>
<li>textarea:<br/> <textarea name="ghi"></textarea></li>
</ul>
</form>

SEDKI A. Développement web - HTML/CSS Page 19