ECOLE NATIONALE SUPÉRIEURE

DES TECHNOLOGIES DE
L’INFORMATION ET DE LA
COMMUNICATION

Développement WEB

Introduction - Historique - HTML5

NGUEDOUBOUM TATIGA Roland

nguedouboumroland@gmail.com
 Introduction
 Le développement Web est le travail impliqué dans le
développement d'un site Web pour Internet ou un intranet.
 Le développement Web peut aller du développement d'une
simple page statique unique de texte brut à des
applications Web complexes, des entreprises électroniques
et des services de réseaux sociaux.
 Par exemple :
 Le site web de l’ENASTIC : www.enastic.td

 Application web de gestion des employés.

 Introduction
 Les pages Web sont écrites dans un langage bien précis
compréhensible par l’ordinateur et interprétés par un logiciel appelé
navigateur pour être compris par l’internaute,
 Une page Web est un document. Elle est enregistrée sur le disque du
serveur, et affichée par le navigateur Web,
 Le navigateur Web affiche le contenu du fichier enregistré sur le
serveur après l'avoir interprété:
 Historique
 1970, premiers pas :
 ARPAnet
 Courrier électronique (1972 : Ray Tomlinson)
 FTP
 TCP/IP (Transmission Control Protocol / Internet Protocol)
 1980, Internet :
 ARPAnet devient Inter Networking (Internet)
 Premières pages Web
 http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
 Exemple de site Web des années 1990
 http://themostamazingwebsiteontheinternet.com
 Historique
 1990-1995, le Web orienté client :
 JavaScript
 Historique
 1996-2000, le Web orienté serveur
 PHP (hypertext preprocessor)
 Base de données
 Historique
 200-2005, le compromis client-serveur
 CSS (cascading style sheets)
 DOM (document object model)
 Historique
 2006-2014, les tendances du Web 2.0 :
 Ajax (Asynchronous JavaScript and XML)
 Historique
 2014 à nos jours, le Web 3.0 :
 L’objectif est de décentraliser et de rendre le pouvoir aux utilisateurs.
 C’est-à-dire qu’il n’y aurait plus d’intermédiaire tels que les GAFAM. En effet, aujourd’hui le
web et les données qui y circulent sont aux mains de quelques groupes tels que Google,
Facebook… C’est pour cela que l’on appelle aussi le web 3.0, le “web décentralisé”.
 Le développement WEB
 Le développement web repose sur :
 l’utilisation des langages : (HTML/CSS, JavaScript, PHP…)
 pour écrire des programmes qui sont ensuite exécutés par les ordinateurs.
 Les instructions sont mises en place sur Internet et sont effectuées sur des serveurs.
 Il y’ a 2 types développement web
 Développement front-end : La partie d'un site Web avec laquelle l'utilisateur interagit
directement. Elle est également appelée « côté client » de l'application.
 Le front-end est développé avec du HTML, CSS et JavaScript
 Développement back-end : Le 'back-end' est le côté serveur d'un site Web. C'est la
partie du site Web que les utilisateurs ne peuvent pas voir et avec laquelle interagir.
C'est la partie du logiciel qui n'entre pas en contact direct avec les utilisateurs. Il est
utilisé pour stocker et organiser des données.
 Le back-end est développé en utilisant des langage comme: PHP, Node.JS, Python, Ruby, Java, C#...
 Le développement WEB
 Le développement peut être réaliser de manière classique ou libre sans
faire usage d’un cadre de développement quelconque.
 Prend trop de temps,
 Risque de faire du code spaghetti (code non lisible) à moins d’avoir une grande
maîtrise du langage,
 Maintenance fastidieuse.
 Le développement par l’utilisation des Framework
 La rapidité de développement du projet ce qui a pour conséquence le gain en
temps,
 Le temps d’apprentissage.
 Le développement WEB
 Framework PHP
 Laravel

 Symfony

 Zend

 CakePHP

 Code Igniter

 …
 Le développement WEB
 Framework JavaScript
 Angular

 React

 Vue.js

 Node.js

 Backbone.js

 …
 Le développement WEB
 Framework CSS
 Bootstrap

 Tailwind

 Animate.CSS

 Semantic UI

 Skeleton

 …
 Le développement WEB
 Serveur Web
 Apache

 IIS

 NginX

 Lighttpd

 …
 Le développement WEB
 Serveur de Base de données
 MySQL

 SQLite

 Oracle

 DB2

 SQL Server

 …
 Le développement WEB
 IDE (Environnement de développement intégré) de PHP
 Visual Studio Code (VSC)

 Adobe Dreamweaver

 Eclipse for PHP

 PHPStorm

 NetBeans for PHP

 …
HTML
 HTML (Hypertext Markup Language)

 Le HTML est un langage de balisage permettant de structurer

et de présenter du contenu sur le World Wide Web,
 Presque tous les sites Web que vous visitez utilisent le HTML,
 Certaines applications mobiles et de bureau utilisent le HTML.
 Qui gère les mises à jour HTML ?

 Comme beaucoup d'autres langages, il y a des mises à jour :

 La version 4.0.1 a été normalisée en 1999.
 HTML5 est recommandé depuis 2014
 Deux groupes y travaillent :
 WHATWG
 W3C
 HTML : Introduction

 Un fichier HTML porte l'extension .html

 Un fichier HTML est construit par des balises prédéfinies
 HTML : les balises

 Les balises doivent être dans les signes < et >

 < nom de la balise >
 Il y a 2 types de balises:
 Les unes paires
 <p>…</p>
 La balise vide
 <br />

 La bonne pratique voudrait que les balises soient écrites en

lettres minuscules.

<!–- This is a comment that can help you in the future -->
 HTML : les balises

 Balises de bloc
 Pour la disposition des données
 Affiché sur l'axe vertical
 Utilisé pour structurer la page avec différents "blocs".
 Examples: <p>, <h1>, <h2>

 Balises en ligne
 Formatage des données
 Affiché sur l’axe horizontal
 Doit être entouré de balises Block
 Examples: <span>, <em>, <strong>, etc…

 Exemple d’une page Web statique en HTML pure

HTML : Modèle exemple (CV)
HTML : Modèle exemple (CV)
 HTML : Étape 1, structure de la page

<!DOCTYPE html>
<html>
<head>

</head>
<body>

</body>
</html>
 HTML : Étape 2, titre de la page

<!DOCTYPE html>
<html>
<head>
<title>My resume</title>
</head>
<body>

</body>
</html>