Développement Web

Plan

1. Notions de base

2. HTML

3. CSS

4. JAVASCRIPT

5. BOOTSTRAP

BTS - Laayoune 2
1. Notions de base

BTS - Laayoune 3
Le Web: World Wide Web

Le World Wide Web (WWW), littéralement la « toile (d’araignée) mondiale »,

communément appelé le Web, et parfois la Toile, est un système hypertexte public
fonctionnant sur Internet. Le Web permet de consulter, avec un navigateur, des pages
accessibles sur des sites. L’image de la toile d’araignée vient des hyperliens qui lient les
pages web entre elles.

Figure représentant une partie du WWW

BTS - Laayoune 4
Le Web: World Wide Web

BTS - Laayoune 5
World Wide Web Consortium

Le World Wide Web Consortium, abrégé

par le sigle W3C, est un organisme de
standardisation à but non lucratif, fondé en
octobre 1994 chargé de promouvoir la
compatibilité des technologies du World
Wide Web telles que HTML5, HTML,
XHTML, XML, RDF, SPARQL, CSS, XSL,
PNG, SVG et SOAP. Fonctionnant comme
un consortium international, il regroupe au 26
février 2013, 383 entreprises partenaires.

Le leitmotiv du W3C est « Un seul web

partout et pour tous » BTS - Laayoune 6
Les mots clés

 Un site Web est un ensemble de pages web reliées entre elles par des hyperliens.

 Une page Web est un document hypertexte écrit en langage HTML. Elle s'affiche à
l'aide d'un navigateur web et peut contenir du texte, des images, du son, ... et des
liens hypertextes vers d'autres documents.

 Le langage HTML (Hyper Text Markup Language) est un langage de

balisage permettant d'écrire de l'hypertexte.

 Un système hypertexte est un système contenant des documents liés entre eux par
des liens hypertextes (ou hyperliens). Lorsque ces documents sont audiovisuels, on
parle de documents hypermédias.
BTS - Laayoune 7
Le premier site web
Il est toujours possible de consulter le tout premier site web, point de départ du
développement du World Wide Web, créé par Tim Berners-Lee et mis en ligne à la fin
de l'année 1990 à cette adresse: http://info.cern.ch/

Ce site était hébergé sur le réseau du CERN en Suisse et décrivait le fonctionnement,

conseils et contraintes d'une page web.

BTS - Laayoune 8
Le premier site web

BTS - Laayoune 9
Le premier site web

BTS - Laayoune 10
Sites statiques et dynamiques
Il existe 2 types de site web:

 Les sites statiques: Ces sites ont le mécanisme de fonctionnement le plus simple :
les URL correspondent à un fichier renvoyé par le serveur web. Le contenu des
pages d'un site statique ne dépend donc pas de variables telles que la date ou de
bases de données. Pour changer le contenu d'une page, il est nécessaire de changer
le contenu du fichier.

 Les sites dynamiques: Ces sites offrent un contenu qui peut évoluer dans le temps.
Des programmes tournent du côté des serveurs, à l'arrière plan, (backend) pour
générer les pages du site. Ces programmes peuvent se servir de bases de données ou
autres sources de données pour composer les pages qui seront affichées dans le
navigateur.

BTS - Laayoune 11
Sites statiques et dynamiques
Site web statique Site web dynamique

+
ET/OU

+
BTS - Laayoune 12
Nombre des sites web consultables
Le nombre de sites web est en progression constante

BTS - Laayoune 13
L’évolution du Web 1.0 au Web 4.0
Si les notions de versions d’internet n’ont aucune réalité technique, parler de web 1.0,
2.0, 3.0 et maintenant 4.0 permet d’illustrer les grandes évolutions d’internet.

BTS - Laayoune 14
L’évolution du Web 1.0 au Web 4.0

BTS - Laayoune 15
L’évolution du Web 1.0 au Web 4.0

 L’internet des années 90’, le web 1.0 dit aussi le Web Passif ou Web
traditionnel, correspond à une utilisation d’internet statique.
 Avec les années 2000, internet devient social et communautaire, on parle
alors du web 2.0 ou Web collaboratif. L’internaute devient actif, et acteur.
 2010 sera l’année du web 3.0, le Web sémantique ou « smart » Web, est
celui de la mobilité, des objets connectés et des données. Ce qui lui vaut
d’ailleurs son appellation de web sémantique.
 Le web 4.0 ou HyperWeb, évoqué par certains futurologues comme le web
intelligent, effraie autant qu’il fascine, puisqu’il vise à immerger l’individu
dans un environnement (web) de plus en plus prégnant.

BTS - Laayoune 16
L’évolution du Web 1.0 au Web 4.0

BTS - Laayoune 17
Navigateurs Web
Un navigateur web est un logiciel conçu pour consulter et afficher le World Wide Web.
Techniquement, c'est au minimum un client HTTP.

Le but d'un navigateur Web (Chrome, Firefox, Opera, Safari, IE/Edge) est de lire les
documents HTML et les afficher.

Le navigateur ne montre pas les balises HTML, mais les utilise pour déterminer
comment afficher le document.

Le terme navigateur est inspiré de Netscape Navigator, le navigateur phare en 1995 et

1996.

BTS - Laayoune 18
Navigateurs Web: Parts de marché
Part de marché monde des navigateurs de 2015 à 2017 (%)

N.B: Source Netmarketshare - via ZDNet.fr/chiffres-cles

BTS - Laayoune 19
Navigateurs Web: Parts de marché
Les parts de marché des navigateurs Web dans le monde, toutes plates-formes
confondues (janvier 2017)

BTS - Laayoune 20
Navigateurs Web: Parts de marché

N.B: ces statistiques ne sont que des estimations, et comprennent une marge d'erreur
difficile à estimer.

BTS - Laayoune 21
Comparatif des navigateurs web
Chrome Vs Firefox Vs IE/Edge Vs Safari Vs Opera

BTS - Laayoune 22
2. HTLM

BTS - Laayoune 23
Qu'est-ce que HTML?

HTML est le langage de balisage standard pour

la création de pages Web.
 HTML signifie Hyper Text Markup
Language.
 HTML décrit la structure des pages Web en
utilisant le balisage.
 Les éléments HTML sont les blocs de
construction de pages HTML.
 Les éléments HTML sont représentés par des
balises.
 Les navigateurs ne présentent pas les balises
HTML, mais les utiliser pour rendre le
contenu de la page.
BTS - Laayoune 24
Chronologie des technologies du web

BTS - Laayoune 25
Relations entre les langages de balisage

BTS - Laayoune 26
Éditeur HTML
Un éditeur HTML (ou éditeur Web) est un logiciel conçu pour faciliter
la préparation et la modification de documents écrits en Hypertext
markup language (HTML). Un document HTML est le principal
composant d'une page web. Il existe deux catégories d'éditeur :
 Les éditeurs tel-tel (WYSIWYG): Soit "What you see is what you
get“, éditeur HTML qui permet la visualisation du document HTML
en cours de création dans une forme qui correspond le plus
fidèlement possible à celle qu'il aura lorsqu'il sera affiché par un
navigateur Web.
 Les éditeurs en mode code: éditent directement en langage HTML
: le code y apparaît et y est traité comme du texte. Ils requièrent
donc une compétence dans ce langage. En contrepartie, ils
permettent à un utilisateur compétent de s'assurer de la qualité du
document produit. BTS - Laayoune 27
Quelques éditeurs HTML

BTS - Laayoune 28
Comparaison des éditeurs HTML

Dreamweaver CC Notepad++ Coda 2.5 Sublime Text 3 Codepen

Prix 1 3 2 2 3
Windows 1 1 - 1 1
Mac OS X 1 - 1 1 1
FTP 2 - 1 1 -
Projets 3 3 3 -
Réalisations 1 3 1 3 2
Plug-ins 3 1 3 3 2
Emmet 1 1 1 1 1
Sass 2 1 2 2 2
Thèmes 2 2 2 3 1
Interface 2 1 3 2 2
Total 19 13 191 22 15
BTS - Laayoune 29
Créer un fichier HTML
Pour créer un fichier HTML, on peut procédés par deux manières:

Via menu contextuel:

 Clique droite > Nouveau > Document texte > Changer l’ extension « .txt » en
« .html »

Via un éditeur HTML:

 Ouvrir l’éditeur HTML > Fichier > Nouveau Fichier > Enregistrer le fichier avec
l’extension « .html »

BTS - Laayoune 30
Structure d’un document HTML
HTML

HEAD

<!– contenu non

visible sur la page-->

BODY

<!– contenu visible

sur la page -->

BTS - Laayoune 31
Votre première page web en HTML
Pour créer notre première page web html on va procédés comme suit:
1. Créer un fichier html, nommé « mapage.html » sur votre bureau.
2. Insérer le code ci-dessous dans votre page:

3. Double clique sur le fichier créer pour le visualiser via votre navigateur.
BTS - Laayoune 32