Langages de programmation orientés Web

R. Lefebvre
S. Turrin
F. Vercouter

2022 - 2023
Objectifs du cours
• Savoirs
• Connaître les fonctionnalités des technologies Web
• Connaître les principaux éléments des technologies Web
• Savoir-faire
• Utiliser les principales fonctions des technologies permettant la construction
d’un site Web
• Utiliser un maximum les ressources disponibles sur Internet
Plan du cours
Cours Thème Description Document à rendre
1 Introduction Paradigme Client-Serveur + Outils
2 HTML Balises principales
3 HTML Les liens et les tableaux
4 CSS Introduction - Sélecteurs
5 CSS Propriétés
6 CSS Positionnement
Congés Impression PDF OpenClassRooms
7 PHP Les langages de programmation
8 PHP PHP et Formulaires HTML
9 PHP Fonctions
10 Javascript Syntaxe
11 Javascript Interaction avec le DOM
Révision
Documents à rendre
pour le 4 novembre
via Moodle !!!
https://openclassrooms.com/fr/courses/1603881
-apprenez-a-creer-votre-site-web-avec-html5-et-
css3

Si ces documents ne sont pas remis pour la date

demandée, la cotation permanente sera mise à
zéro
Introduction au Web
Table des matières

• Le paradigme Client-Serveur

• Les technologies

• Les outils
Le paradigme Client-Serveur
Le paradigme Client-Serveur
CLIENT
Envoi d'une requête SERVEUR WEB

Envoi d'une
Réponse requête
CLIENT INTERNET
Réponse
Définition
• Dans une relation Client-Serveur, une entité (le client) demande quelque chose (la
requête) à une autre entité (le serveur) qui la lui fournit ou pas (la réponse).

• En informatique, comme dans d’autres domaines, ce concept client-serveur est

utilisé très souvent.
• Un serveur va se concentrer sur une tâche donnée qu’il va essayer de faire de la
meilleure manière possible et de par ce fait, étant le « meilleur » dans son domaine,
il va fournir des services à une grande quantité de clients.
• Un client fera appel à un ou plusieurs serveurs pour mener à bien ce qu’il doit faire.
• Il se peut que dans ce contexte, un serveur devienne le client d’un autre serveur ou
qu’un client devienne le serveur d’un autre client.
Les protocoles
• Un protocole de communication est un ensemble de règles devant être
respectées par les parties et permettant de se comprendre.
• Les protocoles sont utilisés en informatique et dans d’autres domaines. La
position de l’adresse sur une enveloppe est universelle. Tout le monde suit
(devrait suivre) cette règle.
• Quelques protocoles informatiques utilisés sur Internet :
• HTTP (HyperText Transfer Protocol)
• HTTPS (HyperText Transfer Protocol Secure)
• FTP (File Transfer Protocol)
• SMTP (Simple Mail Transfer Protocol)
• TCP/IP (Transfer Control Protocol / Internet Protocol)
Adressage internet
• Pour identifier un serveur (et un client), on utilise une adresse unique sur
Internet (comme une adresse postale avec un pays, une commune, un nom
de rue, un numéro et un numéro de boîte).
• Cette adresse répond au protocole IPV4 (4ème version du protocole
Internet). Cette dernière est encore largement utilisée de nos jours et
commence seulement à être remplacée par la version 6 (IPV6) en raison du
nombre grandissant d’ordinateurs présents sur Internet.
• Une machine est donc représentée en IPV4 par un groupe de 4 nombres.
Exemple : 216.58.207.68
• En IPV6, la représentation est la suivante : 2a00:1450:4001:825::2004
• Lorsque vous tapez ces adresses dans un navigateur, vous arrivez sur le
serveur www.google.com
Domain Name Server (DNS)
• Pour faciliter la recherche d’un intervenant (client ou serveur), on fait
appel à un serveur DNS qui va transposer le nom en une adresse
compréhensible par les routeurs présents sur Internet.
• Une fois arrivé sur le serveur demandé, il va falloir router la requête
vers le bon endroit du serveur.
• Toutes ces informations sont présentes dans l’URL (Uniform
Ressource Locator)
URL - Requête HTTP
• L’URL est un format de nommage universel permettant de désigner
une ressource présente sur Internet.
• http://www.ephec.be/e-business/1EB/LPOW-1.pdf
• Exemple de requête HTTP :
GET /imghp?hl=fr&tab=wi HTTP/1.1
Host: images.google.fr
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.9) Gecko/2009040821 Firefox/3.0.9 (.NET CLR 3.5.30729)
FirePHP/0.2.4
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: fr,fr-fr;q=0.8,en-us;q=0.5,en;q=0.3
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Cookie: rememberme=false;VAR=-120
Réponse HTTP
• Un serveur va toujours renvoyer une réponse à une requête. A chaque type
de réponse est associé un code :
• 1xx : Information
• 2xx : Succès de la requête (majoritairement un code 200 OK)
• 3xx : La requête est redirigée
• 4xx : Erreur dont la source est le client (404 mauvaise URL)
• 5xx : Erreur dont la source est le serveur
• Exemple :
HTTP/1.0 200 OK
Date : Sat, 15 Jan 2000 14:37:12 GMT Server : Microsoft-IIS/2.0
Content-Type : text/HTML
Content-Length : 1245
Last-Modified : Fri, 14 Jan 2000 08:25:13 GMT
Le modèle OSI (Open System Interconnection)
• C’est sur ce modèle que fonctionnent tous les protocoles de
communication informatique. Chacune des sept couches qui le
compose est (ou devrait être) indépendante des autres.
• Comme dans toutes règle il y a des exceptions et le protocole TCP/IP
en fait partie.
Les sept couches OSI
Les couches
7. Application Web
Couches 6. Présentation HTML / XML Gère le formatage du contenu
Applicatives
5. Session HTTP / HTTPS Gère le décodage du contenu
4. Transport TCP ou UDP Assure la connexion logique de bout en bout
3. Réseau IP Acheminement grâce à l’adressage logique (Adresse IP)
Couches 2. Liaison xDSL, PPP Adressage physique (Addresse MAC présente sur la puce)
Matérielles
1. Physique Wifi, UTP-Cat5, Impulsions électriques sur les cables, les ondes Wifi, …
Bluetooth

Les 4 couches les plus basses (1 à 4) sont généralement gérées par l’OS (Windows ou Mac OS/X).
Les 3 couches supérieures (5 à 7) sont gérées par des applications à part entière (Firefox, Explorer, …).
Le côté serveur
• Le serveur reçoit des demandes et fabrique des réponses.
• Pour ce faire il utilise des langages comme le PHP pour faire des
calculs, structurer des données ou en récupérer dans une base de
données à l’aide de SQL (Structured Query Langage).
Contenu généré par le serveur (www.ephec.be)
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--[if IE]><![endif]--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="Bacheliers
en Droit, e-Bussiness, Comptabilité, Marketing, Commerce extérieur, Technologie de l&#039;Informatique, Automatique, Electromécanique." /> <meta name="generator" content="Drupal 7 (https://www.drupal.org)" /> <link rel="canonical" href="https://www.ephec.be/" /> <link
rel="shortlink" href="https://www.ephec.be/" /> <meta property="og:site_name" content="EPHEC" /> <meta property="og:type" content="website" /> <meta property="og:url" content="https://www.ephec.be/" /> <meta property="og:title" content="EPHEC" /> <meta
name="twitter:card" content="summary" /> <meta name="twitter:url" content="https://www.ephec.be/" /> <meta name="twitter:title" content="EPHEC" /> <meta itemprop="name" content="EPHEC" /> <meta name="dcterms.title" content="EPHEC" /> <meta name="dcterms.type"
content="Text" /> <meta name="dcterms.format" content="text/html" /> <meta name="dcterms.identifier" content="https://www.ephec.be/" /> <link rel="apple-touch-icon" sizes="180x180" href="/sites/all/themes/custom/expansion/dist/images/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/sites/all/themes/custom/expansion/dist/images/favicons/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/sites/all/themes/custom/expansion/dist/images/favicons/favicon-16x16.png"> <link
rel="manifest" href="/sites/all/themes/custom/expansion/dist/images/favicons/site.webmanifest"> <link rel="mask-icon" href="/sites/all/themes/custom/expansion/dist/images/favicons/safari-pinned-tab.svg" color="#ff6a10"> <meta name="msapplication-TileColor"
content="#ff6a10"> <meta name="theme-color" content="#ffffff"> <title>EPHEC | Le chemin pratique vers la réussite</title> <style type="text/css" media="all">@import url("/modules/system/system.base.css?pqrm14");</style> <style type="text/css" media="all">@import
url("/sites/all/modules/contrib/date/date_api/date.css?pqrm14");</style> <style type="text/css" media="all">@import url("/sites/all/modules/custom/expansion_compliance/css/expansion_compliance.css?pqrm14");@import
url("/sites/default/files/honeypot/honeypot.css?pqrm14");@import url("/sites/all/modules/contrib/webform/css/webform.css?pqrm14");</style> <style type="text/css" media="all">@import url("/sites/all/themes/custom/expansion/dist/styles/main.css?pqrm14");</style> <script
type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> <!--//--><![CDATA[//><!-- window.jQuery || document.write("<script
src='/sites/all/modules/contrib/jquery_update/replace/jquery/1.10/jquery.min.js'>\x3C/script>") //--><!]]> </script> <script type="text/javascript" src="/misc/jquery-extend-3.4.0.js?v=1.10.2"></script> <script type="text/javascript" src="/misc/jquery.once.js?v=1.2"></script> <script
type="text/javascript" src="/misc/drupal.js?pqrm14"></script> <script type="text/javascript" src="/sites/all/modules/contrib/jquery_update/replace/ui/external/jquery.cookie.js?v=67fb34f6a866c40d0570"></script> <script type="text/javascript"
src="/sites/all/modules/contrib/jquery_update/replace/misc/jquery.form.min.js?v=2.69"></script> <script type="text/javascript" src="/misc/ajax.js?v=7.67"></script> <script type="text/javascript" src="/sites/all/modules/contrib/jquery_update/js/jquery_update.js?v=0.0.1"></script>
<script type="text/javascript" src="/sites/all/modules/custom/expansion_compliance/js/expansion_compliance.js?pqrm14"></script> <script type="text/javascript" src="/sites/default/files/languages/fr_WZUj3p5zVXiNEC1AQOqUPX1Ru29JvMLNKKPuT68qxD4.js?pqrm14"></script>
<script type="text/javascript" src="/misc/progress.js?v=7.67"></script> <script type="text/javascript" src="/sites/all/modules/contrib/webform/js/webform.js?pqrm14"></script> <script type="text/javascript"
src="/sites/all/themes/custom/expansion/dist/scripts/main.js?pqrm14"></script> <script type="text/javascript"> <!--//--><![CDATA[//><!-- jQuery.extend(Drupal.settings,
{"basePath":"\/","pathPrefix":"","ajaxPageState":{"theme":"expansion","theme_token":"9G1nDiYj7emDP5xPnWta0gZUJlxPQepM3E2OPCB1Hxo","jquery_version":"1.10","css":{"modules\/system\/system.base.css":1,"sites\/all\/modules\/contrib\/date\/date_api\/date.css":1,"sites\/all
\/modules\/custom\/expansion_compliance\/css\/expansion_compliance.css":1,"public:\/\/honeypot\/honeypot.css":1,"sites\/all\/modules\/contrib\/webform\/css\/webform.css":1,"sites\/all\/themes\/custom\/expansion\/dist\/styles\/main.css":1},"js":{"\/\/ajax.googleapis.com\/
ajax\/libs\/jquery\/1.10.2\/jquery.min.js":1,"misc\/jquery-extend-
3.4.0.js":1,"misc\/jquery.once.js":1,"misc\/drupal.js":1,"sites\/all\/modules\/contrib\/jquery_update\/replace\/ui\/external\/jquery.cookie.js":1,"sites\/all\/modules\/contrib\/jquery_update\/replace\/misc\/jquery.form.min.js":1,"misc\/ajax.js":1,"sites\/all\/modules\/contrib\/jquer
y_update\/js\/jquery_update.js":1,"sites\/all\/modules\/custom\/expansion_compliance\/js\/expansion_compliance.js":1,"public:\/\/languages\/fr_WZUj3p5zVXiNEC1AQOqUPX1Ru29JvMLNKKPuT68qxD4.js":1,"misc\/progress.js":1,"sites\/all\/modules\/contrib\/webform\/js\/webfor
m.js":1,"sites\/all\/themes\/custom\/expansion\/dist\/scripts\/main.js":1}},"ajax":{"edit-submit":{"callback":"expansion_compliance_dismiss_form_submit","progress":{"type":"none"},"wrapper":"cookie-
compliance","event":"mousedown","keypress":true,"prevent":"click","url":"\/system\/ajax","submit":{"_triggering_element_name":"op","_triggering_element_value":"OK"}}},"urlIsAjaxTrusted":{"\/system\/ajax":true,"\/":true},"bgvideo":{"id":"o-Y-
AANUc74","type":"youtube"},"better_exposed_filters":{"views":{"news":{"displays":{"block_1":{"filters":[]}}},"agenda":{"displays":{"block_1":{"filters":[]}}}}}}); //--><!]]> </script> <!-- Google Tag Manager --> <script defer async>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-
NCXG32T');</script> <!-- End Google Tag Manager --> </head> <body class="html front not-logged-in no-sidebars page-node page-node- page-node-9 node-type-home i18n-fr" > <!-- Google Tag Manager (noscript) --> <noscript><iframe
src="https://www.googletagmanager.com/ns.html?id=GTM-NCXG32T" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) --> <div id="skip-link"><a href="#main-content" class="element-invisible element-
focusable">Aller au contenu principal</a></div> <div id="cookie-compliance" class="cookie-compliance clearfix"> <div class="cookie-compliance__inner"> <div class="cookie-compliance__text"> <p>Ce site web utilise des cookies pour nous aider à vous apporter la meilleure
expérience de visite. En continuant votre navigation, vous acceptez l&#39;utilisation des cookies. <a href="/mentions-legales">En savoir plus</a></p> </div> <form action="/" method="post" id="expansion-compliance-dismiss-form" accept-charset="UTF-8"><div><input class="cookie-
compliance__button form-submit" type="submit" id="edit-submit" name="op" value="OK" /><input type="hidden" name="form_build_id" value="form-OI8WnzvbzlcPiEvjXRUl2wVOlj7kVnof5eujDyKPs6g" /> <input type="hidden" name="form_id"
value="expansion_compliance_dismiss_form" /> </div></form> </div> </div> <noscript> <div class="cookie-compliance clearfix"> <div class="cookie-compliance__inner"> <div class="cookie-compliance__text"> <p>Ce site web utilise des cookies pour nous aider à vous apporter la
meilleure expérience de visite. En continuant votre navigation, vous acceptez l&#39;utilisation des cookies. <a href="/mentions-legales">En savoir plus</a></p> </div> <form action="/" method="post" id="expansion-compliance-dismiss-form" accept-charset="UTF-
8"><div></div></form> </div> </div> </noscript> <header class="main-header"> <div class="top"> <div class="left"> <a href="#" class="trigger-main-nav"><i class="fa fa-bars" aria-hidden="true"></i>Nos formations</a> </div> <div class="right"> <nav class="header-nav secondary-
nav"> <ul class="menu"><li class="first expanded"><span class="nolink">Vie étudiante</span><ul class="menu"><li class="first leaf"><a href="/activites-culturelles">Activités, culture</a></li> <li class="leaf"><a href="/le-sport-lephec">Ephec sport</a></li> <li class="leaf"><a
href="/se-loger-pres-de-lephec">Logement</a></li> <li class="leaf"><a href="/le-conseil-des-etudiants-de-lephec">Conseil des Etudiants</a></li> <li class="leaf"><a href="/reussir-lephec">Aide à la réussite</a></li> <li class="leaf"><a href="/service-social-de-lephec">Service
social</a></li> <li class="leaf"><a href="/service-daccueil-et-daccompagnement-des-etudiants-en-situation-de-handicap">Enseignement inclusif</a></li> <li class="last leaf"><a href="/entreprendre-lephec">Etudiants entrepreneurs</a></li> </ul></li> <li class="leaf"><a href="/lephec-
pour-les-entreprises">Entreprises</a></li> <li class="expanded"><span class="nolink">International</span><ul class="menu"><li class="first leaf"><a href="/international/presentation">Présentation</a></li> <li class="leaf"><a href="/international/incoming-mobility">Incoming
mobility</a></li> <li class="leaf"><a href="/international/mobilite-sortante">Mobilité sortante</a></li> <li class="leaf"><a href="/international/la-codiplomation-bi-et-tri-diplomations">La codiplomation : bi et tri-diplomations</a></li> <li class="last collapsed"><a href="/short-
international-programmes">Short International Programmes</a></li> </ul></li> <li class="expanded"><span class="nolink">A propos</span><ul class="menu"><li class="first leaf"><a href="/historique-de-lephec">Historique</a></li> <li class="leaf"><a href="/le-mot-des-
directions">Le mot des Directions</a></li> <li class="leaf"><a href="/presse">PRESSE</a></li> <li class="leaf"><a href="/pedagogie-lephec">Pédagogie</a></li> <li class="leaf"><a href="/qualite-en-haute-ecole">Qualité en Haute École</a></li> <li class="leaf"><a href="/qualite-en-
promotion-sociale">Qualité en Promotion sociale</a></li> <li class="leaf"><a href="/responsabilite-societale-de-lephec">Responsabilité sociétale de l’EPHEC</a></li> <li class="leaf"><a href="/travailler-lephec">Travailler à l’EPHEC</a></li> <li class="last leaf"><a href="/vision-
valeurs-mission-reglements">Vision – valeurs – mission – règlements</a></li> </ul></li> <li class="leaf"><a href="/agenda">Agenda</a></li> <li class="leaf contact"><a href="/contact">Contact</a></li> <li class="last leaf cta"><a href="/sinscrire-lephec">Inscription</a></li> </ul>
</nav> <a href="#" class="trigger-search">Recherche</a> <div class="search-block"> <div id="block-search-form" class="block block-search"> <div class="content"> <form action="/" method="post" id="search-block-form" accept-charset="UTF-8"><div><div class="container-inline">
<h2 class="element-invisible">Formulaire de recherche</h2> <div class="form-item form-type-textfield form-item-search-block-form"> <label class="element-invisible" for="edit-search-block-form--2">Rechercher </label> <input title="Indiquer les termes à rechercher" type="text"
id="edit-search-block-form--2" name="search_block_form" value="" size="15" maxlength="128" class="form-text" /> </div> <div class="form-actions form-wrapper" id="edit-actions"><input type="submit" id="edit-submit--2" name="op" value="Rechercher" class="form-submit"
/></div><input type="hidden" name="form_build_id" value="form-1569gMGCezUc3fl86fgH7_vErO5v-42zfOAIebvMCcU" /> <input type="hidden" name="form_id" value="search_block_form" /> </div>
Le côté client
• De son côté, le client reçoit ces données brutes et les traite pour les
mettre en page.
• Les données brutes sont au format HTML.
• Pour le formatage on utilise le CSS
• et pour l’interaction avec l’utilisateur, on utilise Javascript et/ou AJAX
Interprétation côté client

Réponse
Interprétation de la page INTERNET

HTML

Mise en forme CSS

Javascript

Exécution de scripts
Contenu interprété par le client
Les différentes technologies
Technologies du Web
• HTML
• CSS
• Javascript
• Brut
• Via des librairies (JQuery, Bootstrap, …)
• PHP (du côté serveur)
• AJAX (protocole mêlant du XML et du javascript)
• XML, JSON
• Des bases de données et SQL
• …
W3C
• Le World Wide Web Consortium est une association internationale
qui définit les standards présents sur le web afin de permettre une
pérennité de ceux-ci et une compatibilité entre les différents acteurs.
• Il est composé des principaux acteurs du Web (Apple, Amazon,
Microsoft, Google, Facebook, …). Au 17 septembre 2020, il y avait 436
membres inscrits (https://www.w3.org/Consortium/Member/List).
• Les membres soumettent des propositions de technologies qui une
fois approuvées, deviennent des standards suivis par tous.
HTML
• HyperText Markup Language est un langage de balisage. Il permet de
structurer une page, de hiérarchiser les données qui composent la page.
• Exemple : <h1>Ceci est un titre</h1>
• Ce langage permet de :
• Créer des documents interopérables (fonctionnant sur tous type de clients)
• Donner une structure sémantique
• Inclure du contenu multimédia (images, vidéo, son, …)
• Créer des formulaires de saisies de données
• Intégrer des éléments programmables (applets, scripts)
• Permettre la navigation de pages en pages
• Permettait la mise en forme du contenu avant que le CSS ne soit créé.
• Le HTML est interprété côté CLIENT.
CSS
• Cascading Style Sheet est un langage de présentation. Il vient
compléter le code HTML pour expliquer aux navigateurs comment
présenter les choses (taille de font, couleur, position, …)
• Ce langage permet de :
• Séparer la mise en forme de la structure et des données d’une page
• Décliner les styles, les positionnements suivant le récepteur qui doit les
afficher
• Combiner différentes sources de mise en forme d’une manière hiérarchique
(Cascading)
• Le CSS est interprété côté CLIENT
Javascript
• C’est un langage de programmation (scripts) principalement utilisé du
côté client mais qui fait de plus en plus de percées du côté serveur
• Il permet de créer de l’interaction avec les utilisateurs et donc de
créer de l’intelligence du côté du client
• Ce langage permet de :
• Contrôler les données saisies dans des formulaires et d’effectuer certaines
actions lors de ces saisies
• Interagir avec le document HTML via l’interface Document Object Model
• Réaliser des services dynamiques (cosmétiques, ergonomiques, …)
• Dans le cadre de ce cours, nous verrons qu’il est interprété côté
CLIENT
AJAX
• Asynchronous Javascript And XML est un protocole utilisant plusieurs
technologies (Javascript côté client, XML et/ou JSON pour le transfert de
données et PHP (ou autre) côté serveur pour la création de la réponse)
• Il permet d’augmenter l’expérience de l’utilisateur en améliorant le confort
d’utilisation et les vitesses de réaction d’une page
• Il est largement utilisé sur toutes les pages des grands acteurs du Web
(Google, Facebook, …)
• Il combine plusieurs technologies et est offert, entre autres, au travers de
librairies comme JQuery
• Le javascript est exécuté du côté du CLIENT pour envoyer une requête à
laquelle le SERVEUR répondra en arrière plan, sans que la page ne doive
être rechargée.
AJAX - suite
• L’application la plus utilisée est la suggestion de recherche lors de la
saisie de mots dans Google Search
PHP
• PHP: Hypertext Preprocessor est un langage de scripts principalement
utilisé pour produire du contenu utilisable sur le Web. Le contenu est créé
à la demande en fonction des paramètres passés lors de la requête. Ce
contenu est donc dynamique.
• C’est un langage impératif (orienté objet depuis la version 5)
• Très largement utilisé et éprouvé tant au niveau de sa robustesse que de sa
sécurité
• Du côté serveur, d’autres solutions de génération de contenu sont
disponibles (Java, ASP.NET, C#, …)
• Interprété côté SERVEUR
Les outils
Navigateur Web
• Il s’agit du client sur lequel sera affichée votre page Web. Dans la
majorité des cas, le navigateur tournera sur votre PC ou votre
smartphone mais de plus en plus, avec les objets connectés, des
navigateurs tournent sur des frigos, des thermostats, des machines
industrielles, …
• Les principaux navigateurs sont Firefox, Safari, Internet Explorer ou
Google Chrome. Mais il en existe encore bien d’autres dont certains
pour un usage très limité et donc avec une compatibilité restreinte
Compatibilité des navigateurs
• Tous les navigateurs n’interprètent
pas les choses de la même manière.

Un site intéressant pour le vérifier :

http://caniuse.com

Il reprend les principaux navigateurs

et résume leur compatibilité.
Editeur de texte
• Dans le cadre de ce cours, nous utiliserons Notepad++
• http://notepad-plus-plus.org/
Editeur de texte - suite
• Il existe bien entendu d’autres programmes permettant d’éditer des
textes comme sublimeText, Notepad, Edit, …
• Attention de ne pas utiliser des outils comme Word ou autres qui
vont rajouter de la mise en forme dans le document créé.
IDE (Integrated Development Environment)
• Il existe ici aussi plusieurs IDE avec leurs extensions en fonction du
langage étudié. Parmi ceux-ci, les plus répandus : Eclipse, Visual
Studio Code, Xcode.
Serveur Web
• En fonction de votre Système d’exploitation :
• WAMP pour Windows
• MAMP pour MacOS
• LAMP pour Linux
• La première lettre désigne donc l’OS sur lequel il est disponible. Les
trois autres lettres signifient :
• Apache (Serveur Web Applicatif)
• MySQL (Base de données)
• PHP (Langage de script)
Hébergement du serveur
• Pour les besoins de ce cours, un espace personnel a été créé pour
vous. Il vous permet de rendre vos pages disponibles à l’entièreté de
l’univers.
votre_matricule.lpow.ephec.be
• Pour tester vos développements quand une connexion à Internet
n’est pas disponible, vous pouvez utiliser un serveur web local
(localhost ou 127.0.0.1).
Transfert de fichiers (FTP)
• Pour charger vos fichiers (ceux que vous avez créés) vous devez
utiliser le logiciel gratuit FileZilla (https://filezilla-project.org/)
• Ce logiciel vous permet de gérer l’ensemble de vos connexions aux
serveurs à un seul endroit. Les login/password et adresses des
serveurs y sont sauvegardés pour vous.
Ressources extérieures
• Tutoriels
• Openclassrooms.com (suivi du cours HTML/CSS obligatoire)
• Commentcamarche.net
• Developpez.com
• …
• Documentation
• W3.org
• W3schools.com
• Developer.mozilla.org
• …
Installation et démarrage
Notepad++
Dans Notepad++

Sauvegardez le fichier avec l’extension PHP et supprimer l’ancien

fichier index.html
FileZIlla – mise en ligne