Chapitre 1: Introduction
• Un site web est un ensemble de pages organisées en structure hiérarchique,
disponible sur un serveur.
• Il peut être construit avec des pages statiques, des pages dynamiques ou un
assemblage des deux.
Les sites Web statiques
Les sites Web dynamiques
UN SITE WEB STATIQUE
▪ Les sites Web statiques contiennent un nombre fixe de pages et le format de page
Web est fixe et fournit des informations au client.
▪ Le contenu d’une page Web ne peut pas être mis à jour automatiquement : il faut que
le propriétaire du site (le webmaster) modifie le code source pour y ajouter des
nouveautés.
▪ Ce n'est pas très pratique quand on doit mettre à jour son site plusieurs fois dans la
même journée ! Les sites statiques sont donc bien adaptés pour réaliser des sites
« vitrine », pour présenter par exemple son entreprise, mais sans aller plus loin.
▪ Ce type de sites Web créés à partir du codage HTML et CSS sur un éditeur de texte
simple.
▪ Ce type de site se fait de plus en plus rare aujourd'hui, car dès que l'on rajoute un
élément d'interaction (comme un formulaire de contact), on ne parle plus de site
statique mais de site dynamique.
▪ Exemple d’un site d’organisation, d’un site d’institut, etc.
UN SITE WEB DYNAMIQUE
▪ Les sites Web dynamiques peuvent modifier le contenu d’une page Web de
manière dynamique lorsque la page est exécutée sur le navigateur du client.
▪ plus complexes, ils utilisent d'autres langages en plus de HTML et CSS, tels que PHP
et MySQL.
▪ Le contenu de ces sites web est dit « dynamique » parce qu'il peut changer sans
l'intervention du webmaster ! La plupart des sites web que vous visitez aujourd'hui
sont des sites dynamiques.
▪ Exemple Sites de e-commerce, application de formulaire en ligne, site de
gouvernance électronique, etc.
FONCTIONNEMENT D’UN SITE
WEB
L’internet est un réseau composé d'ordinateurs. Ceux-ci peuvent être classés
en deux catégories:
Les clients : ce sont les ordinateurs des internautes comme vous. Votre
ordinateur fait donc partie de la catégorie des clients. Chaque client
représente un visiteur d'un site web.
Les serveurs : ce sont des ordinateurs puissants qui stockent et délivrent
des sites web aux internautes, c'est-à-dire aux clients. La plupart des
internautes n'ont jamais vu un serveur de leur vie. Pourtant, les serveurs
sont indispensables au bon fonctionnement du Web.
CAS D'UN SITE STATIQUE
Lorsque le site est statique, le schéma est très simple. Cela se passe en deux temps, ainsi
que vous le schématise la figure suivante :
1. le client demande au serveur à voir une page web ;
2. le serveur lui répond en lui envoyant la page réclamée.
▪ Sur un site statique, il ne se passe rien d'autre. Le serveur stocke des pages web et les
envoie aux clients qui les demandent sans les modifier.
CAS D'UN SITE DYNAMIQUE
Lorsque le site est dynamique, il y a une étape intermédiaire : la page est générée.
1. Le client demande au serveur à voir une page web ;
2. le serveur prépare la page spécialement pour le client ;
3. le serveur lui envoie la page qu'il vient de générer.
La page web est générée à chaque fois qu'un client la réclame. C'est précisément ce qui
rend les sites dynamiques vivants : le contenu d'une même page peut changer d'un instant
à l'autre.
▪ Un navigateur web est un programme qui permet de naviguer sur internet
▪ Un logiciel vous permettant d’afficher des sites Internet, télécharger des fichiers et faire des
recherches. Microsoft Edge est le navigateur par défaut de Windows, mais il en existe d’autres
comme Firefox, Google Chrome, Opera et Safari, chacun ayant ses propres fonctionnalités. Ils
sont tous gratuits et téléchargeables sur Internet.
▪ Logiciel conçu pour consulter le WWW (World Wide Web).
▪ Google Chrome, le petit dernier arrivé. Le navigateur du géant de la
recherche : Google.
▪ Ce navigateur est léger, très simple, idéal pour les débutants et les
utilisateurs en recherche de simplicité et rapidité.
▪ C’est aujourd’hui de loin le navigateur le plus utilisé dans le monde.
+ le plus utilisé
+ Rapidité
+ Compatibilité avec les autres services Google
+ Sécurité
- Confidentialité des données
- Consommation d’énergie
▪ le navigateur Internet de Microsoft, intégré de base sur Windows. Beaucoup de gens l’utilisent car ils
ignorent qu’il y a d’autres alternatives !
+ Compatibilité avec les autres services Microsoft
+ Sécurité
- Confidentialité des données
- Boutique d’extension limitée
▪ Firefox est le navigateur de la fondation Mozilla qui a été le premier concurrent de
taille d’Internet Explorer. Le petit renard roux a su séduire les internautes par les
innovations qu’il a apportées.
+ Sécurité et confidentialité
+ Mode lecture
+Synchronisation
- Consommation d’énergie
- Traduction
▪ Opera est un navigateur d’origine norvégienne qui se démarque par
ses innovations, notamment la navigation par onglets (reprise par les
autres navigateurs). Même si on n’en entend plus trop parler, il reste
un excellent navigateur.
+Blocage de contenu: activation/désactivation Cookies, Java, Javascript, plug-in, images, pops up…
+Informations sur la page rapidement disponibles
+Bon support technique
-Problèmes de stabilité
▪ Safari est le navigateur Internet d’Apple, initialement présent sur les Mac, il est
aussi disponible sur Windows.
▪ Il est puissant et rapide et apporte pas mal de fonctionnalités intéressantes pour
les utilisateurs avancés.
+ Sécurité
+ Rapidité
- Confidentialité des données
- Compatibilité limitée
un navigateur est un site web qui nous permet de
naviguer sur internet et de consulter tous les pages
web.
Exemple
▪ https://fr.wikipedia.org/wiki/Ordinateur
▪ https://www.oiseaux.net/
▪ Traduit le code HTML en une page web
▪ HTML ?
▪ CSS ?
HTML (HyperText Markup Language)
▪ il a fait son apparition dès 1991 lors du lancement du Web.
▪ 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…
CSS (Cascading Style Sheets, aussi appelées Feuilles de style)
▪ le rôle du CSS est de gérer l'apparence de la page web (agencement,
positionnement, décoration, couleurs, taille du texte…).
▪ Ce langage est venu compléter le HTML
▪ Deux langages pour créer un site web
Html → contenue
Css → apparence
Un éditeur HTML, ou éditeur web, est un logiciel conçu pour faciliter la préparation et
la modification de documents écrits en HTML.
▪ Visual Studio Code
▪ Notepad++
▪ Atom
▪ Sublime text
HTML pour le contenu
CSS pour la présentation
Editeur de texte pour écrire le code HTML
Le navigateur qui traduit le code HTML
EXERCICE
▪ Quels sont les 2 langages qu'on utilise pour créer un site web ?
▪ Quels sont les logiciels qui permettent de créer des pages web ? (donnez deux exemples)
▪ Quels sont les types de sites web?
▪ Il existe de nombreux navigateurs différents . (donnez deux exemples)
▪ Lequel de ces deux choisiriez-vous? et pourquoi?
• HTML : Hyper Text Markup Language.
• Le HTML5 est un langage de base pour la création de site internet, il
sert à structurer vote document. D’autre langage peuvent s’ajouter
lors de la conception, mais tout les sites web contiennent du HTML.
HTML5 désignant la version du langage HTML.
• langage descriptif composé de balises interprété par le navigateur.
• Langage informatique pour écrire des pages Web.
• L’HyperText Markup Language, généralement abrégé HTML, est le format de
données conçu pour représenter les pages web.
• page valide = même sens pour tous les navigateurs.
• Le HTML 5 est fondamentalement le langage HTML dans sa 5ème version…
• HTML 5 (HyperText Markup Language) est un langage de balisage (dit aussi
langage de marquage) qui permet de structurer le contenu des pages web dans
différents éléments. Voilà une définition bien abstraite, reconnaissons-le, mais
nous y reviendrons en détail dans la section suivante en présentant la notion de
balisage.
• Dans un langage de balisage, tout contenu, qu’il s’agisse de texte, d’images ou
d’éléments multimédias les plus divers, doit être enfermé dans un élément. En
HTML, chaque élément possède un nom déterminé ; la liste des éléments
utilisables est limitative et clairement définie dans la spécification du langage
EVOLUTION DES VERSIONS
• 1992 :L’inventeur du HTML Tim Berners-Lee, l’avait conçu à l’origine comme un outil de
structuration des contenus, principalement textuels, et non pas pour créer des
présentations diversifiées.
• 1995 – 1996 :Apparition du HTML 2.0 supportant des tables, des figures et des
expressions mathématiques.
• 1997 : HTML 3.2 & HTML 4.0
• HTML 3.2 : Standardisation des tables et de nombreux éléments de présentations
• HTML 4.0 : Standardisation des cadres
• 1998 – 1999 : HTML 4.01: amélioration de la version précédente du HTML
• 2000-2006 : XHTML le développement de HTML en tant qu’application du Standard
Generalized Markup Language (SGML) est officiellement abandonné au profit de XHTML
• 2007 à nos jours : HTML 5 et abandon du XHTML 2
LES PRINCIPES
▪ Les balises, aussi appelées éléments ou tag en anglais, sont des commandes à
l’intention du navigateur et saisies entre des signes inférieur à (<) et supérieur à (>).
Ainsi une balise s’écrit: <balise>
▪ En règle générale, à toute balise d’ouverture correspond une balise de fermeture qui
marque la fin de la commande annoncée par la balise d’ouverture.
▪ La balise de fermeture reprend le même énoncé que la balise d’ouverture mais ce
dernier est précédé d’une barre oblique (/). Ainsi à la balise d’ouverture <balise>
correspondrait la balise de fermeture . La syntaxe d’une balise est alors : <balise> …
</balise>
LES PRINCIPES
• Il contient des commandes, implémentées par des balises pour marquer les différents
types de texte (titres, paragraphes, listes etc.), pour inclure des images, des formulaires,
des liens etc.
• Le langage HTML permet de créer des documents interactifs grâce à des liens
hypertextes, qui relient votre document à d’autres documents
• Le HTML5 est un langage simple s’inspirant largement du XML. C’est un langage reposant
sur le principe des balises.
• Le langage HTML est défini par un ensemble de balises. Chaque balise possède un nom
et des attributs éventuels.
• Les balises n'apparaissent pas à l'écran. Pour que le navigateur puisse les distinguer du
texte de la page, elles sont toujours encadrées par les caractères < > .
• Toute balise (dite balise ouvrante) notée sous la forme correspond une fin (dite balise
fermante) notée . Ainsi pour enrichir un texte il suffit de l'encadrer par une balise ouvrante
et celle fermante lui correspond ainsi : Dans cette exemple le texte qui doit être
transformé.
