Technologies Web

Professeur: Ronald Beaubrun

Email:bronald20@gmail.com
Tel: 31377794
Technologies Web
• Sommaire
▫ Introduction a la technologie web
 Définition et notion de base de la technologie web

▫ Création de Page Web

 HTML
 CSS
 JavaScript (optionnel)
Technologies Web
• Introduction aux technologies web
▫ Définition du thème technologie web
▫ C’est Quoi le Web?
▫ C’est Quoi un Navigateur?
▫ Qu'est-ce que c'est un URL ?
▫ C’est Quoi un Serveur Web?
▫ Le protocole Web (HTTP, HTTPS)
Technologies Web
• Création de Page Web
▫ HTML
 Définition de HTML
 Les différentes version de HTML
 Les éléments de base de HTML
 Création des pages web avec les éléments de base
HTML5
Technologies Web
• Création de Page Web
▫ CSS
 Définition et Rôle
 Version de CSS
 Les différents types de propriétés de CSS3
 Application de CSS3 dans une page Web
Technologies Web
• Définition du thème technologie web
Les technologies web sont un ensemble de technologies qui
composent et utilisent le World Wide Web (généralement abrégé en
Web) et ses normes.
Technologies Web
• C’est Quoi le Web?
Le Web est le terme communément employé pour parler du World
Wide Web, ou WWW, traduit en français par la toile d'araignée
mondiale. Il fait référence au système hypertexte fonctionnant sur le
réseau informatique mondial Internet.
Technologies Web
•Une brève histoire du web
L’inventeur du web
A l’origine du web et donc à la base de l’histoire du web se trouve Sir Tim
Berners-Lee qui est considéré comme l’inventeur du World Wide Web. Sir
Tim travaillait au CERN et voulait trouver une solution pour faciliter le
partage d’informations entre ingénieurs. A cette époque, avec le
développement d’internet, de nombreux ordinateurs étaient déjà connectés.
Il a donc trouvé la réponse pour le partage d’informations en combinant
internet avec une autre technologie émergente : Hypertext.

En 1989, Sir Tim mit sur papier sa vision de ce qui deviendra le Web dans un
document nommé “Information Management: A Proposal”. Pour l’anecdote,
son chef gratifia ce document de l’annotation « vague but exciting ».
Technologies Web
▫ Cependant Sir Tim eut la permission de travailler sur ce projet et en
octobre 1990 Tim avait écrit trois des technologies fondamentales du
web d’aujourd’hui :

 HTML: HyperText Markup Language. Le langage de balisage

(formatage) du web.

 URI: Uniform Resource Identifier. Une sorte d’adresse qui est unique
et utilisée pour identifier chaque ressource à travers le web.
Communément aussi appelé un URL.

 HTTP: Hypertext Transfer Protocol. Permet la récupération de

ressources liées à travers le Web.
Technologies Web
▫ Le CSS : A fond la forme
En 1996 le CSS level 1 est publié. L’idée derrière le Cascading
Style Sheet (Feuille de style en cascade) est de séparer le contenu et la
forme d’un site web. Le CSS est le langage qui permet de modifier le
rendu d’un document structuré, tels les documents HTML. Le CSS
permet ainsi de modifier l’aspect visuel des données du document en
question.

Ce nouveau langage et ses versions successives ouvrent la voie à

l’intégration et l’évolution de la mise en forme sur les pages web,
notamment avec l’apparition d’images et du positionnement des
différents éléments.
Technologies Web
▫ JavaScript des débuts timides jusqu’à
l’intégration d’AJAX
JavaScript est créé en 1995 par Brendan. Cependant dans les années qui suivent
peu de gens adoptent et utilisent ce nouveau langage, jusqu’à ce que Google et
Kayak utilisent de manière efficace le concept de programmation AJAX, avec
l’objet XMLHttpRequest et ses requêtes asynchrones entre le navigateur et le
serveur.

L’utilisation de ces requêtes a mené à la création de sites web dynamiques

notamment Gmail. Site web qui fut particulièrement apprécié par ses utilisateurs
pour son avantage en termes de fluidité sur ses concurrents de l’époque.

.
Technologies Web
• Quelles sont les différentes technologies
du Web ?
• HTML
• CSS
• JavaScript
• PHP
• Etc …
Technologies Web
• Qu'est-ce que HTML, réellement ?
HyperText Markup Language (HTML) est le code utilisé pour
structurer une page web et son contenu. Par exemple, le contenu de
votre page pourra être structuré en un ensemble de paragraphes, une
liste à puces ou avec des images et des tableaux de données. Comme
le suggère le titre, cet article vous fournit les bases de compréhension
du HTML et de ses fonctions.
Technologies Web
▫ CSS : Le langage de présentation des pages web
Le langage CSS permet de modifier la présentation des éléments
de structuration HTML : couleur, taille, police de caractères mais
aussi position sur la page, largeur et hauteur. En gros, il s’agit de tout
ce qui touche à la mise en page d’un document HTML. Ainsi, un
même document HTML pourra changer d’apparence sans changer de
structure, grâce à la modification des règles CSS qui lui sont
appliquées. 
Technologies Web
▫ JavaScript: Le langage de programmation côté
client
Le JavaScript est un langage qui est lu et exécuté par un
navigateur et qui permet de créer des réactions en réponse à des
événements sur la page ou à des actions de l’utilisateur. Il peut s’agir,
par exemple, d’un compteur qui défile ou de l’apparition renouvelée
d’actualités. Auparavant, le langage JavaScript était souvent intégré
au code HTML, mais là encore, on préconise la séparation des deux
langages pour des raisons d’organisation du code, mais aussi
d’accessibilité du site.
Technologies Web
▫ PHP : Le langage de programmation côté
serveur
Le PHP est un langage qui est lu et exécuté sur le serveur où se
trouve la page HTML, avant que cette page ne soit envoyée au
navigateur qui en demande l’affichage.

Par exemple, lorsque l’on rempli un formulaire et que l’on clique

sur le bouton de confirmation, le serveur reçoit les données envoyées
par le navigateur, le code PHP traite ces données et écrit le HTML de
la nouvelle page web que le serveur web renvoie ensuite au
navigateur.
Technologies Web
Le code HTML d’une page peut ainsi être entièrement écrit à
l’aide d’un code PHP, ou bien le code PHP peut être inséré à un
endroit précis d’une page, pour compléter le code HTML, CSS ou
JavaScript. On qualifie de dynamiques les pages écrites par PHP car
il s’agit d’un langage de programmation qui modifie ou complète le
code HTML statique de la page.
Technologies Web
▫ C’est Quoi un Navigateur?
Un navigateur est un outil permettant de naviguer et de consulter
les pages web disponibles sur le Word Wide Web.

En pratique, le navigateur nous traduit en texte et image les pages

d’information qui sont codées en HTML.
Technologies Web
▫ Les principaux navigateurs Web
Il existe de nombreux navigateurs Web, mais les plus populaires
sont : Firefox de Mozzila, Edge de Microsoft (le remplaçant
d’Internet Explorer), Google Chrome et Safari d’Apple. Ils sont
tous gratuits.
Technologies Web
▫ Qu'est-ce que c'est un URL ?
Une URL (en Anglais Uniform Resource Locator) est l'adresse
d'un site web. L'adresse d'un site web, ou plus exactement l'adresse
d'une page d'un site internet. L'URL est indispensable pour localiser
cette page dans l'océan des milliards de pages internet existantes.

L’URL se décompose en 3 parties :

1) http://www. : Correspond aux normes techniques (protocole
et sous domaine) communément utilisées pour la conception des
adresses de sites web.
2) nom de domaine : correspond au nom de domaine, le plus
souvent le nom de votre marque voire d’un produit de votre
entreprise
Technologies Web
3) l’extension du nom de domaine : correspond à l’extension
du nom de domaine. L’extension la plus courante pour une
entreprise est en France .fr ou .com. Dans la mesure du possible
vous avez intérêt à privilégier une extension en .com car celle-ci
correspond à la référence internationale pour les sites généralistes.

Exemple : http://www.Google.ht
Technologies Web
▫ C’est Quoi un Serveur Web?
Un serveur web est spécifiquement un serveur multi-service
utilisé pour publier des sites web sur Internet ou un intranet.
L'expression « serveur Web » désigne également le logiciel utilisé sur
le serveur pour exécuter les requêtes HTTP, le
protocole de communication employé sur le World Wide Web.
Technologies Web
▫ C’est Quoi un protocole Web
Un protocole est une méthode standard qui permet la
communication entre des processus (s'exécutant éventuellement sur
différentes machines), c'est-à-dire un ensemble de règles et de
procédures à respecter pour émettre et recevoir des données sur un
réseau. Il en existe plusieurs selon ce que l'on attend de la
communication.
Technologies Web
▫ Le protocole HTTP
Le protocole HTTP(HyperText Transfer Protocol) est le protocole
le plus utilisé sur Internet depuis 1990. La version 0.9 était
uniquement destinée à transférer des données sur Internet (en
particulier des pages Web écrites en HTML] La version 1.0 du
protocole (la plus utilisée) permet désormais de transférer des
messages avec des en-têtes décrivant le contenu du message en
utilisant un codage de type MIME.

Le but du protocole HTTP est de permettre un transfert de

fichiers (essentiellement au format HTML) localisés grâce à une
chaîne de caractères appelée URL entre un navigateur (le client) et un
serveur Web (appelé d'ailleurs httpd sur les machines UNIX).
Technologies Web
▫ Communication entre navigateur et serveur
La communication entre le navigateur et le serveur se fait en
deux temps :
Technologies Web
Le navigateur effectue une requête HTTP
Le serveur traite la requête puis envoie une réponse HTTP

En réalité la communication s'effectue en plus de temps si on

considère le traitement de la requête par le serveur. Etant donné que
l'on s'intéresse uniquement au protocole HTTP, le traitement du côté
serveur ne sera pas explicité dans le cadre de cet article...
CREATION DE PAGE WEB
Technologies Web
▫ HTML
Comme on vient de definir HTML comme HyperText Markup
Language (HTML) est le code utilisé pour structurer une page web et
son contenu. D'autres technologies sont utilisées avec HTML pour
décrire la présentation d'une page (CSS) et/ou ses fonctionnalités
interactives (JavaScript).

HTML n'est pas un langage de programmation. C'est un langage de

balises qui définit la structure de votre contenu. HTML se compose
d'une série d'éléments, utilisés pour entourer, ou envelopper, les
diverses parties du contenu pour les faire apparaître ou agir d'une
certaine façon. Les balises entourantes peuvent être rendues par un
mot ou une image lien hypertexte vers quelque chose d'autre, un texte
en italique, une police plus grande ou plus petite, et ainsi de suite.
Technologies Web
▫ L'historique du HTML
Dans les années 1989-1990, un informaticien Tim Berners-Lee
invente le Worl Wide Web.

Le HTML est une des trois inventions issus du WWW avec le

Hypertext Transfer Protocol (HTTP) et les adresses web.
Technologies Web
▫ Que du HTML

Ces premières pages web, comme le montre l’exemple ci-dessus ne contenaient, de

manière schématisée, que de l’information et des liens. Le seul langage disponible
était le HTML et celui-ci venait avec des limitations en terme de mise en forme, d’où
la création de sites qui n’avaient ni composantes de style élaborées, ni éléments
dynamiques.
Technologies Web
▫ Les versions de HTML
▫ HTML 1 : c'est la toute première version créée par Tim Berners-Lee
en 1991.

▫ HTML 2 : la deuxième version du HTML apparaît en 1994 et prend

fin en 1996 avec l'apparition du HTML 3.0. C'est cette version qui
posera en fait les bases des versions suivantes du HTML. Les règles et
le fonctionnement de cette version sont donnés par le W3C (tandis
que la première version a été créée par un seul homme).

▫ HTML 3 : apparue en 1996, cette nouvelle version du HTML rajoute

de nombreuses possibilités au langage comme les tableaux, les
applets, les scripts, le positionnement du texte autour des images, etc.
Technologies Web
▫ HTML 4 : il s'agit de la version la plus répandue du HTML (plus
précisément, il s'agit de HTML 4.01). Elle apparaît pour la première
fois en 1998 et propose l'utilisation de frames (qui découpent une page
web en plusieurs parties), des tableaux plus complexes, des
améliorations sur les formulaires, etc. Mais surtout, cette version
permet pour la première fois d'exploiter des feuilles de style, notre
fameux CSS !

▫ HTML 5 : c'est LA dernière version. Encore assez peu répandue, elle

fait beaucoup parler d'elle car elle apporte de nombreuses
améliorations comme la possibilité d'inclure facilement des vidéos, un
meilleur agencement du contenu, de nouvelles fonctionnalités pour les
formulaires, etc. C'est cette version que nous allons découvrir
ensemble.
Technologies Web
▫ Le CSS : langage de styles
Le CSS a été créé en 1996, soit 5 ans après le HTML. Les sigles «
CSS » sont l’abréviation de « Cascading StyleSheets » ou « feuilles de
styles en cascade » en français.

Le CSS vient résoudre un problème bien différent du HTML : en

effet, le HTML sert à définir les différents éléments d’une page, à leur
donner du sens. Le CSS, lui, va servir à mettre en forme les différents
contenus définis par le HTML en leur appliquant des styles.
Technologies Web
Le HTML va donc créer la structure des pages tandis que le CSS
va
nous permettre de modifier l’apparence des contenus de la page.

On va ainsi par exemple pouvoir définir la taille, la couleur ou

l’alignement de certains contenus HTML et notamment en
l’occurrence de certains textes dans notre page.
Technologies Web
▫ Les versions de CSS
▫ CSS 1 : dès 1996, on dispose de la première version du CSS. Elle pose
les bases de ce langage qui permet de présenter sa page web, comme
les couleurs, les marges, les polices de caractères, etc.

▫ CSS 2 : apparue en 1999 puis complétée par CSS 2.1, cette nouvelle
version de CSS rajoute de nombreuses options. On peut désormais
utiliser des techniques de positionnement très précises, qui nous
permettent d'afficher des éléments où on le souhaite sur la page.

▫ CSS 3 : c'est la dernière version, qui apporte des fonctionnalités

particulièrement attendues comme les bordures arrondies, les
dégradés, les ombres, etc.
Technologies Web
▫ Commencer avec le HTML
Prérequis :
Notions sur le fonctionnement d'un ordinateur, avoir installé les
logiciels de base et  savoir gérer les fichiers.

Objectif :
Se familiariser avec le langage HTML et acquérir de la pratique en
écrivant quelques éléments HTML.
Technologies Web
Le HTML se compose d'une série d'éléments avec lesquels vous pouvez
encadrer, envelopper ou baliser différentes parties du contenu pour les
faire apparaître ou agir d'une certaine manière. Des balises encadrantes
peuvent transformer une petite partie de contenu en un lien vers une
autre page sur le Web, mettre des mots en italique, etc. Par exemple,
prenons la phrase suivante :

Si nous voulons que cette ligne reste en l'état, nous pouvons dire qu'il
s'agit d'un paragraphe en l'enveloppant d'un élément paragraphe (<p>) :
Technologies Web
▫ Anatomie d'un élément HTML
Regardons notre élément paragraphe d'un peu plus près :
Technologies Web
Les principales parties de notre élément sont :

La balise ouvrante : il s'agit du nom de l'élément (dans ce cas, p), encadré par un
chevron ouvrant (<) et un chevron fermant (>). Elle indique où l'élément commence
ou commence à prendre effet — dans ce cas où commence le paragraphe ;

La balise fermante : c'est la même que la balise ouvrante, sauf qu'elle comprend une
barre oblique (/) avant le nom de l'élément. Elle indique la fin de l'élément — dans ce
cas, la fin du paragraphe. Ne pas inclure une balise de fermeture est une erreur fréquente
chez les débutants, et peut amener des résultats étranges ;

Le contenu : il s'agit du contenu de l'élément. Dans notre cas, c'est simplement du texte ;

L'élément : l'ensemble balise ouvrante, balise fermante et contenu constituent l'élément.

Technologies Web
Anatomie d'un document HTML
Les éléments HTML basiques ne sont pas très utiles si on les prend
séparément. Nous allons voir comment combiner des éléments
individuels pour former une page HTML entière :
Technologies Web
<!DOCTYPE html> : le type de document.
Quand HTML était jeune (vers 1991/2), les doctypes  étaient censés agir
comme des liens vers un ensemble de règles que la page HTML devait
suivre pour être considérée comme un bon HTML, ce qui pouvait signifier
la vérification automatique des erreurs et d'autres choses utiles.

<html></html> : l'élément <html>. Cet élément est le contenant de tout

le code de la page et est parfois connu comme l'élément racine.

<head></head> : l'élément <head>. Cet élément a le rôle de conteneur

pour toute chose que vous souhaitez inclure dans la page HTML qui ne soit
pas du contenu à afficher aux visiteurs de la page :  mots clés, description de
page que vous souhaitez voir apparaître dans les résultats de recherche,
style CSS, déclarations de jeu de caractères et plus encore. Nous vous en
dirons plus à ce sujet dans l'article suivant de la série.
Technologies Web
<meta charset="utf-8"> : cet élément définit que le jeu de caractères à
utiliser pour votre document est UTF-8. Ce jeu comporte la quasi ‑totalité
des caractères de toutes les écritures de langues humaines connues.
Actuellement, il peut pour l'essentiel gérer tout contenu textuel que vous y
pourriez mettre. Il n'y a aucune raison de ne pas définir cela et il peut
permettre d'éviter certains problèmes plus tard. 

<title></title> : l'élément title. Il définit le titre de la page, celui qui

s'affiche dans l'onglet du navigateur dans lequel la page est chargée et qui
est utilisé pour décrire la page lorsque vous la marquez ou l'ajoutez aux
favoris.

<body></body> : l'élément <body>. Il contient tout le contenu que vous

souhaitez afficher aux internautes lorsqu'ils visitent votre page, que ce soit
du texte, des images, des vidéos, des jeux, des pistes audio jouables ou autre.
Technologies Web
Qu'est-ce que l'en-tête de HTML ?
Le contenu de l'en-tête HTML <head> — à la difference du contenu de
l'élément <body> (affiché quand la page est chargée par le navigateur) —
n'est pas affiché dans la page du navigateur. Le travail de la balise
<head> est de contenir les métadonnées à propos du document. Dans
l'exemple ci-dessus, l'en-tête est plutôt petit :
Technologies Web
Ajouter un titre
Nous avons déjà vu l'élément <title> — qui peut être utilisé pour ajouter
un intitulé au document. Il peut toutefois être confondu avec l'élément
<h1>, pour ajouter un en‑tête de haut nieau au contenu de votre page
dans l'élément <body> — quelquefois désigné comme étant le « titre de
la page ». Mais ce sont des choses différentes !

L'élément <h1> apparaît dans la page quand elle est chargée dans le

navigateur — généralement, il devrait être utilisé une fois par page, pour
marquer le titre du contenu de votre page (le titre d'une histoire, ou
d'une actualité, ou tout ce qui vous paraît approprié).

L'élément <title> est une métadonnée qui représente l'intitulé du

document HTML global (non le contenu du document).
Technologies Web
Métadonnées : l'élément <meta>
Les métadonnées sont des données qui décrivent des données, et le
langage HTML a une manière « officielle » d'ajouter des métadonnées à
un document — l'élément <meta>. Bien sûr, d'autres choses, dont nous
parlons dans cet article, pourraient aussi être considérées comme des
métadonnées. Il y a une panoplie d'autres éléments de type <meta> qui
auraient pu figurer dans l'en-tête de votre page, mais nous n'en parlerons
pas pour l'instant, car ce serait trop déroutant.
Technologies Web
Fondamentaux du texte HTML
L'un des principaux buts de HTML est de structurer du texte et lui
donner du sens (ce que l'on appelle la sémantique) afin que le navigateur
puisse l'afficher correctement. Cet article explique comment HTML peut
être utilisé pour structurer une page en ajoutant des titres et des
paragraphes, en marquant des emphases, en créant des listes, et bien
plus encore.
Technologies Web
Les bases : titres et paragraphes
La plupart des textes structurés comprennent des titres et des
paragraphes, que ce soit dans les romans, les journaux, les livres
scolaires, les magazines, etc.
Technologies Web
En HTML, les paragraphes doivent être contenus dans un élément <p>,
comme ceci :

Chaque titre doit être contenu dans un élément titre :

Technologies Web
▫ Un peu de pratique
La vie n'est pas toujours facile.

Libre de penser, de rire et d'aimer,

Profiter des secondes de bonheur,
De paix, de joie et savoir décider,
Sans aucune crainte et sans peur :
Savoir dire non, oser et choisir,
Construire, entreprendre et bâtir.

Il suffit de si peu de chose,

Un peu de courage si j'ose.
La vie n'est pas toujours facile,
Mais il suffit de redresser la tête,
D'affronter certaines adversités,
Avec beaucoup de sincérité.
Technologies Web
Suivre son cœur, ses pensées,
Ses choix et ses propres idées.
C'est alors et seulement ainsi,
Que l'on devient acteur de sa vie.

Il faut dans la vie savoir aussi,

Tendre la main à qui en a besoin,
Sans espérer un retour... ni rien,
Juste se dire que c'était bien.

Alors s'installe l'harmonie avec soi-même,

Et ainsi le monde parait presque parfait !