< Cours Développement web statique />

Responsables cours
• Mohamed Hadj Kacem : mohamed.hadjkacem@isims.usf.tn
• Souhir Bouaziz : souhir.bouaziz@isims.usf.tn
• Ines Fourati : ines.kammoun@isims.usf.tn
2 Plan du cours
 CH 1 : Introduction
 CH 2 : HTML
 CH 3 : Les feuilles de style CSS
 CH 4 : JavaScript

2 (c) Mohamed Hadj Kacem AU : 2020-2021

 < Introduction />
Responsables cours
• Mohamed Hadj Kacem : mohamed.hadjkacem@isims.usf.tn
• Souhir Bouaziz : souhir.bouaziz@isims.usf.tn
• Ines Fourati : ines.kammoun@isims.usf.tn
4 Objectifs
 Maîtriser les langages HTML, CSS et JavaScript
 Apprendre à développer des sites web statiques de
qualité

4 (c) Mohamed Hadj Kacem AU : 2020-2021

5 Plan
 Chapitre 1 : Introduction au développement Web
 Le World Wide Web
 Le fonctionnement du World Wide Web
 La notion de serveur Web
 Le protocole HTTP
 Document HTML
 Chapitre II : HTML
 Chapitre III : CSS
 Chapitre IV : JavaScript

5 (c) Mohamed Hadj Kacem AU : 2020-2021

7 Introduction
 Le WWW
 Document et langage HTML
 Éléments de base d’une page Web
 Images « frame » et liens hypertextes
 Les formulaires

7 (c) Mohamed Hadj Kacem AU : 2020-2021

8 Le WWW
Le World Wide Web (www) définit un réseau logique de
documents (pages Web) reliés les uns aux autres par des liens
hypertextes.

8 (c) Mohamed Hadj Kacem AU : 2020-2021

9 Le WWW
 Le WWW est une toile d'araignée de serveurs d'informations
reliés les uns aux autres par des liens physiques (le réseau
matériel) et des liens logiques (les liens hypertextes)
 Ces liens hypertextes permettent de voyager d'un serveur à
un autre sur le réseau Internet

9 (c) Mohamed Hadj Kacem AU : 2020-2021

10 Le WWW
 Le Web n’est qu’une partie de l’Internet. C’est le service le
plus connu
 Il existe d’autres services :
 FTP (File Transfer Protocol)
 SMTP (Simple Mail Transfer Protocol)
 NNTP (Network News Transfer Protocol)

10 (c) Mohamed Hadj Kacem AU : 2020-2021

11 Le WWW, HTTP, HTML
 D'un point de vue technique, le WWW relie des serveurs
HTTP qui envoient des pages HTML à des postes dotés d'un
navigateur
 Le protocole de communication entre les navigateurs et les
serveurs est basé sur le principe des hypertextes (HyperText
Transfer Protocol)
 Le langage permettant de décrire les pages Web est le HTML
(HyperText Markup Language) et le XHTML (Extensible
HyperText Markup Language)

11 (c) Mohamed Hadj Kacem AU : 2020-2021

12 Le WWW, HTTP, HTML
 Architecture Client/Serveur
 Rend un service
 Possède une connexion permanente
 Possède une adresse internet fixe
http

http
Client
Serveur
 Demande un service
 Possède une connexion permanente ou temporaire
 Possède une adresse internet fixe ou non

12 (c) Mohamed Hadj Kacem AU : 2020-2021

13 Le WWW, HTTP, HTML
 Architecture Client/Serveur
 Données et services centralisés
 Sécurité accrue car 1 seul point d’accès aux données
 Maintenance et administration facile
 Réseau évolutif puisqu’on peut ajouter ou supprimer des
clients
 - Le serveur est le maillon faible du réseau
 Coût des serveurs très élevés

13 (c) Mohamed Hadj Kacem AU : 2020-2021

14 Le WWW, HTTP, HTML

HTML

Serveur HTTP

HTML

Serveur HTTP

14 (c) Mohamed Hadj Kacem AU : 2020-2021

15 Document HTML
 Un document HTML est un hypertexte décrit à l'aide du
langage HTML
 Un hypertexte est un texte contenant des hyperliens
 Un hyperlien est un élément particulier (mot/image) sur lequel
on clique pour se déplacer vers :
 un autre emplacement du document
 un autre document sur le même site
 un document sur un autre site WEB
 un autre service Internet (mail, ftp… )

15 (c) Mohamed Hadj Kacem AU : 2020-2021

16 Document HTML
 Pour qu'un navigateur puisse interpréter vos lignes de
code, il faut lui indiquer qu'il s'agit de code HTML.
 C'est le but de l'extension *.htm et *.html

16 (c) Mohamed Hadj Kacem AU : 2020-2021