Programmation Web Et Multimedia - Chapitre 1 Et 2
Programmation Web Et Multimedia - Chapitre 1 Et 2
Programmation Web Et Multimedia - Chapitre 1 Et 2
Communication (ESATIC)
Cours de
Programmation Web et Multimédia
Licence 3 (SRIT 3A et SRIT 3B)
Enseignants :
Dr KOFFI Dagou Dangui Augustin Sylvain Legrand Dr DIAKO Doffou Jérôme
Assistant Assistant
0758444636 0777389840
[email protected] [email protected]
MODULE : DEVELOPPEMENT WEB ET
MULTIMEDIA
PLAN
Chapitre 4 : Javascript
Programmation Web et Multimédia Dr KOFFI Dagou Dangui Augustin Sylvain Legrand et Dr DIAKO Doffou Jérôme 3
Chapitre 1
Introduction au Développement Web et Mise en
place
Programmation Web et Multimédia Dr KOFFI Dagou Dangui Augustin Sylvain Legrand et Dr DIAKO Doffou Jérôme 4
Chapitre 1 : Introduction au Développement Web et Mise en place
Surfer sur le Web c’est un échange. Le Web est un système d’échange entre un client et un serveur;
Le client ,c’est notre navigateur Web, c’est lui qui va nous permettre de voir le Web depuis notre
ordinateur, smartphone ou tablette. Comme exemple : Chrome, Firefox, Safari, Internet Explorer,
etc.
Le serveur, c’est un ordinateur puissant qui stocke et héberge des sites Web. C’est sur cet ordinateur
que se trouvent les pages Web, c’est à dire tous les fichiers du site internet auquel on veut
accéder ;
Le but du serveur web est de servir des clients, d’où le nom « serveur ».
Programmation Web et Multimédia Dr KOFFI Dagou Dangui Augustin Sylvain Legrand et Dr DIAKO Doffou Jérôme 5
Chapitre 1 : Introduction au Développement Web et Mise en place
Le client accède à une page Web en utilisant l’adresse d’un site web – appelée URL – dans
son navigateur. Par exemple, l’URL http://monsite.fr/mondossier/mapage.html ;
On peut décomposer l’URL en plusieurs parties :
Programmation Web et Multimédia Dr KOFFI Dagou Dangui Augustin Sylvain Legrand et Dr DIAKO Doffou Jérôme 6
Chapitre 1 : Introduction au Développement Web et Mise en place
Programmation Web et Multimédia Dr KOFFI Dagou Dangui Augustin Sylvain Legrand et Dr DIAKO Doffou Jérôme 8
Chapitre 1 : Introduction au Développement Web et Mise en place
Le Front-End
Le front-end c’est la partie du code qui est reçue par le client. Je rappelle que le client c’est
notre navigateur Web. Il s’agit finalement des éléments du site web que l’on aperçoit à l’écran
et avec lesquels on pourra interagir. Ces éléments sont composés de 3 langages: HTML, CSS et
Javascript
Programmation Web et Multimédia Dr KOFFI Dagou Dangui Augustin Sylvain Legrand et Dr DIAKO Doffou Jérôme 9
Chapitre 1 : Introduction au Développement Web et Mise en place
Le Front-End
CSS (Cascading Styles Sheets)
Le langage CSS – Cascading Styles Sheets – est un langage qui va mettre en forme nos
pages Web et les décorer. Il va désigner nos éléments HTML à l’aide de sélecteurs et va leur
appliquer un style CSS. C’est ce langage CSS qui est responsable des couleurs, des tailles, de la
mise en page, etc.
JavaScript
Un site Web peut être composé uniquement d’HTML et de CSS, mais si on veut lui insuffler un
peu de vie on aura besoin de Javascript, qui lui, est un vrai langage de programmation, avec
des boucles, des conditions…
Javascript est responsable de l’interactivité et de la logique qu’il y a derrière nos pages web.
Programmation Web et Multimédia Dr KOFFI Dagou Dangui Augustin Sylvain Legrand et Dr DIAKO Doffou Jérôme 10
Chapitre 1 : Introduction au Développement Web et Mise en place
JQUERY Le Front-End
jQuery est une librairie Javascript très populaire. Son slogan c’est « Ecris moins et fais plus ». Son
rôle est réellement de nous simplifier la vie !
C’est-à-dire que les tâches courantes de Javascript, qui nécessitent de nombreuses lignes de
code, jQuery nous les rend accessible avec une seule ligne de code !
Il gère également pour nous les problèmes de compatibilité entre les navigateurs Web.
Bootstrap
Bootstrap est un Framework HTML, CSS et Javascript. C’est une collection d'outils utiles à la
création du design de sites et d'applications web. C'est un ensemble qui contient des codes HTML et
CSS, des formulaires, boutons, outils de navigation et autres éléments interactifs, ainsi que des
extensions JavaScript en option Javascript est responsable de l’interactivité et de la logique qu’il
y a derrière nos pages web.
Programmation Web et Multimédia Dr KOFFI Dagou Dangui Augustin Sylvain Legrand et Dr DIAKO Doffou Jérôme 11
Chapitre 1 : Introduction au Développement Web et Mise en place
Le Back-End
Le Back-End, c’est la partie du code qui est exécutée par le serveur, il s’agît du travail qu’il
réalise sur les pages Web des sites dynamiques avant de les envoyer au client.
Langage Serveur
Le travail du serveur sera codé dans un langage propre à lui : le langage serveur.
Il existe de nombreux langages serveurs : PHP, Java, Python, Ruby , NodeJs, ASP.Net etc.
PHP
PHP: Hypertext Preprocessor, plus connu sous son sigle PHP, est un langage de programmation
libre, principalement utilisé pour produire des pages Web dynamiques via un serveur HTTP, mais
pouvant également fonctionner comme n'importe quel langage interprété de façon locale. PHP est
un langage impératif orienté objet.
Programmation Web et Multimédia Dr KOFFI Dagou Dangui Augustin Sylvain Legrand et Dr DIAKO Doffou Jérôme 12
Chapitre 1 : Introduction au Développement Web et Mise en place
Le Back-End
Les bases de données
Quel que soit le site Web dynamique que l’on veut faire, on aura souvent besoin d’enregistrer
des informations pour les réutiliser plus tard. Par exemple, on peut avoir besoin de stocker les
données concernant les utilisateurs de notre site.
Notre serveur devra alors utiliser une base de données. C’est un ensemble de fichiers dans
lequel les données sont stockées de façon organisée.
Il y a plusieurs systèmes de bases de données : MySQL, Oracle, Microsoft SQL Server…
Notre choix : MySQL
Programmation Web et Multimédia Dr KOFFI Dagou Dangui Augustin Sylvain Legrand et Dr DIAKO Doffou Jérôme 13
Chapitre 2
Introduction au Développement Web et Mise en
place
Programmation Web et Multimédia Dr KOFFI Dagou Dangui Augustin Sylvain Legrand et Dr DIAKO Doffou Jérôme 14
Chapitre 2 : HTML -Structuration
Définition
Programmation Web et Multimédia Dr KOFFI Dagou Dangui Augustin Sylvain Legrand et Dr DIAKO Doffou Jérôme 15
Chapitre 2 : HTML -Structuration
Historique d’Internet
Pendant la guerre froide de 1957, la Réplique américaine créée ARPA (Advanced Research
Projects Agency) au sein du département de la défense américaine. L’objectif était d’effectuer des
recherches et de développer des idées avancées et technologiquement en avance sur son temps ;
ARPA met en place, en 1969, un réseau militaire d’ordinateurs appelés ARPANET ;
ARPANET va s’étendre aux universités au fil des années, puis au domaine public et connaître du
succès grâce au protocole de commutation de paquets TCP/I P et des services tels que le courrier
électronique et le protocole de transfert de fichier FTP (File Transfert Protocol) ;
En 1983 la partie de l'ARPANET appartenant aux Forces armées des États-Unis fut séparée du reste
du réseau et devint le MILNET (Military Network), tandis que réseau public se dénommait
INTERNET (Inter-Network : Interconnexion de plusieurs réseaux, Réseau International).
Programmation Web et Multimédia Dr KOFFI Dagou Dangui Augustin Sylvain Legrand et Dr DIAKO Doffou Jérôme 16
Chapitre 2 : HTML -Structuration
Historique du Web
Des années 70, avec Internet, la notion de séparer le contenu (ce qui est aujourd'hui devenu le langage
XHTML) de la mise en forme (qui est devenu le CSS) était envisage ;
En 1986 : invention du SGML ( Standard Generalized Markup Langage) .C'est un langage puissant,
mais trop complexe. Le SGML ne connaîtra donc jamais de grande gloire ;
En 1991, Tim ( Tim othy) Berners- Lee du CERN (Centre Européen de Recherche Nucléaire) avait
travaillé sur un système de gestion de l’information, dans lequel un texte pouvait contenir des
références ou liens vers d’autres travaux, permettant ainsi à l’utilisateur de rapidement passer d’un
document à l’autre (Navigation) . Il a créé un serveur permettant la publication de ce style de
documents, appelés hypertextes ( Serveur http ou Web) ainsi qu’un programme permettant la lecture
(Navigateur). Il baptisa ce système le “World Wide Web”. Pour créer les premières pages web (pages
hypertextes) , Tim s’inspire du SGML et créer le langage HTML (Hypertext Markup Langage).
Programmation Web et Multimédia Dr KOFFI Dagou Dangui Augustin Sylvain Legrand et Dr DIAKO Doffou Jérôme 17
Chapitre 2 : HTML -Structuration
Historique du Web
A peine 2 ans plustard, un des premiers navigateurs gratuits apparaît : il s'appelle Mozaïc et
fonctionne aussi bien sur Mac que sur PC ;
Entre 1993 et 1994, le nombre de sites web passe de 500 à 10 000, la croissance est énorme ;
La popularité grandissante du web commença à susciter des intérêts commerciaux ;
Microsoft et Netscape privilégient le développement de nouvelles fonctionnalités propriétaires ou en
compétition frontale avec celles existantes dans les autres navigateurs, mais implémentées de manière
incompatible, plutôt que de corriger celles déjà existantes ;
Pour mettre fin à tout ce désordre et assurer l’évolution du web, Tim Berness- Lee fonda en 1994 le
World Wide Web Consortium ( W3C) ;
Par la suir, le W3C a publié plusieurs spécifications (appelées “recommandations” ) telles que HTML
4.0, le format d’images PNG, et les feuilles de styles CSS versions 1 et 2.
Programmation Web et Multimédia Dr KOFFI Dagou Dangui Augustin Sylvain Legrand et Dr DIAKO Doffou Jérôme 18
Chapitre 2 : HTML -Structuration
Le principe de balise (ou marqueurs ou tag)
Les balises structurent le contenu de la page (texte, images, etc.) ;
Chaque balise a un rôle et donne du sens au contenu présenté ;
Les nom s des balises et attributs s'écrivent toujours en m inuscules ;
Les balises servent de marqueurs pour donner des indications au navigateur ;
Les balises sont invisibles pour le visiteur ;
Une balise se présente comme suit : Chevron fermant
Programmation Web et Multimédia Dr KOFFI Dagou Dangui Augustin Sylvain Legrand et Dr DIAKO Doffou Jérôme 20
Chapitre 2 : HTML -Structuration
Le principe de balise (ou marqueurs ou tag)
Il existe 2 types de balises :
Les balises par paire : ce sont les plus courantes. On écrit la première balise, ensuite le contenu,
et enfin la balise est réécrite avec un slash devant "/ ". Par exem ple :
<balise-paire> contenu </balise-paire>
Les balises seules : elles sont un peu plus rares. On s'en sert en général pour insérer un élément
dans une page. Ce type de balise se termine toujours par un slash "/ ", mais cette fois le slash se
trouve à la fin de la balise. Par exemple :
< balise- seule / >
Programmation Web et Multimédia Dr KOFFI Dagou Dangui Augustin Sylvain Legrand et Dr DIAKO Doffou Jérôme 21
Chapitre 2 : HTML -Structuration
Liste de quelques balises
Voici la liste de toutes les balises HTML (https://facemweb.com/creation-site-internet/liste-balises-html )
Balises de premier niveau
Balises d’en tête
Balises de structuration du texte
Balises de listes
Balises de tableau
Balises de formulaire
Balises sectionnantes
Balises génériques
Attributs des balises génériques
Programmation Web et Multimédia Dr KOFFI Dagou Dangui Augustin Sylvain Legrand et Dr DIAKO Doffou Jérôme 22
Chapitre 2 : HTML -Structuration
Programmation Web et Multimédia Dr KOFFI Dagou Dangui Augustin Sylvain Legrand et Dr DIAKO Doffou Jérôme 29
Chapitre 2 : HTML -Structuration
Les attributs (propriétés, caractéristiques)
Les attributs permettent de doner des précisions sur une balise. La syntaxe est :
non- attribut = “valeur- attribut”
Par exem ple, < image scr = "soleil.j pg" / >
I ci, l'attribut est "src", et il a pour valeur "soleil.jpg". Cela indique que l'image que l'on veut insérer
s'appelle "soleil.jpg".
NB :
Dans le cas d'une balise fonctionnant "par paire", on ne m et les attributs que dans la balise ouvrante
et pas dans la balise fermante ;
Les valeurs des attributs peuvent contenir des majuscules ;
https://jaetheme.com/balises-html5/ permettra de savoir les attributs de chaque balise.
Programmation Web et Multimédia Dr KOFFI Dagou Dangui Augustin Sylvain Legrand et Dr DIAKO Doffou Jérôme 30
Chapitre 2 : HTML -Structuration
Structure minimale d’un document HTML 5
<!DOCTYPE html> ❶
<html> ❷
<head> ❸
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> ❹
<title> HTML 5 et CSS 3 </title> ❺
</head>
<body> ❻
<!-- Tout le contenu de la page -->
<h1>Le corps de la page minimale</h1> ❼
</body>
</html>
Programmation Web et Multimédia Dr KOFFI Dagou Dangui Augustin Sylvain Legrand et Dr DIAKO Doffou Jérôme 31
Chapitre 2 : HTML -Structuration
Structure minimale d’un document HTML 5
DOCTYPE
Permet au navigateur de savoir quelle version de HTML (ou XHTML) est utilisée sur la page ;
Obligatoire pour valider une page (validateur W3C).
La Balise <meta>
Définit les métadonnées d'un document HTML ;
Les métadonnées sont des informations sur les données.
Programmation Web et Multimédia Dr KOFFI Dagou Dangui Augustin Sylvain Legrand et Dr DIAKO Doffou Jérôme 32
Chapitre 2 : HTML -Structuration
Etude de quelques balises
Les entêtes (ou titres)
Permettent de définir des titres sur 6 niveaux ;
chacun est associé une balise ouvrante/fermante;
<h1>Titre niveau 1</h1>
Titre niveau 1
<h2>Titre niveau 2</h2>
Titre niveau 2
...
...
<h6>Titre niveau 6</h6> Titre niveau 6
La <div>
Définit une division ou une section dans un document HTML ;
Est utilisée comme conteneur pour les éléments HTML - qui sont ensuite stylisés avec CSS ou
manipulés avec JavaScript ;
Programmation Web et Multimédia Dr KOFFI Dagou Dangui Augustin Sylvain Legrand et Dr DIAKO Doffou Jérôme 33
Chapitre 2 : HTML -Structuration
Etude de quelques balises
La <div>
Est facilement stylisée à l'aide de l'attribut class ou id ;
N'importe quel type de contenu peut être placé à l'intérieur de la balise <div> !
Programmation Web et Multimédia Dr KOFFI Dagou Dangui Augustin Sylvain Legrand et Dr DIAKO Doffou Jérôme 34
Chapitre 2 : HTML -Structuration
Etude de quelques balises
La balise <a>
On appelle « ancre de lien » le texte à l’intérieur de la balise ;
Définit un lien hypertexte, qui est utilisé pour relier une page à une autre ;
L'attribut le plus important de l'élément <a> est l'attribut href, qui indique la destination du lien ;
Par défaut, les liens apparaîtront comme suit dans tous les navigateurs :
Un lien non visité est souligné et bleu ;
Un lien visité est souligné et violet ;
Un lien actif est souligné et rouge.
On peut ajouter l’attribut title="titre du lien" pour ajouter une info bulle au survol et indiquer à
l’utilisateur où il va arriver
Exemple : <a href="index.html" title="titre"> Ancre du lien</a>
Programmation Web et Multimédia Dr KOFFI Dagou Dangui Augustin Sylvain Legrand et Dr DIAKO Doffou Jérôme 35
Chapitre 2 : HTML -Structuration
Etude de quelques balises
La balise <img>
La balise <img> est utilisée pour intégrer une image dans une page HTML ;
Les images ne sont pas techniquement insérées dans une page Web ; les images sont liées à des
pages Web ;
La balise <img> a deux attributs obligatoires :
src - Spécifie le chemin vers l'image ;
alt - Spécifie un texte alternatif pour l'image, si l'image ne peut pas être affichée pour une
raison quelconque.
Remarque : Indiquez également toujours la largeur et la hauteur d'une image. Si la largeur et la
hauteur ne sont pas spécifiées, la page peut scintiller pendant le chargement de l'image.
Programmation Web et Multimédia Dr KOFFI Dagou Dangui Augustin Sylvain Legrand et Dr DIAKO Doffou Jérôme 36
Chapitre 2 : HTML -Structuration
Etude de quelques balises
Remarque : Conseil : Pour lier une image à un autre document, imbriquez simplement la
balise <img> dans une balise <a>.
Exemple :
<img src="smiley.gif" alt="Smiley face" width="42" height="42">
La balise <table>
La balise <table> </table> permet d’indiquer le début et la fin du tableau ;
La balise <tr> caractérise une nouvelle ligne ;
La balise <td> marque le contenu d’une cellule dans une ligne.
La balise <form>
Balise principale du formulaire ;
Programmation Web et Multimédia Dr KOFFI Dagou Dangui Augustin Sylvain Legrand et Dr DIAKO Doffou Jérôme 37
Chapitre 2 : HTML -Structuration
Etude de quelques balises
La balise <form>
Deux méthodes :
method="get" : limitée à 255 caractères, informations passées dans la barre d’adresse ;
method="post" : envoie les données dans le corps de la requête sans passer par la barre
d’adresse. C’est la méthode la plus utilisée.
Action : l’adresse du fichier ou programme qui va traiter les données.
<form method="post" action="traitement.php">
L' <form>élément peut contenir un ou plusieurs des éléments de formulaire suivants :
<input> <select> <fieldset>
<textarea> <option> <label>
<button> <optgroup> <output>
Programmation Web et Multimédia Dr KOFFI Dagou Dangui Augustin Sylvain Legrand et Dr DIAKO Doffou Jérôme 38
Chapitre 2 : HTML -Structuration
Etude de quelques balises
La balise <form>
La balise <input> :
La balise <input> spécifie un champ de saisie dans lequel l'utilisateur peut saisir des données ;
L'élément <input> est l'élément du formulaire le plus important ;
L'élément peut être affiché de plusieurs manières, selon l'attribut type ;
Les différents types d'entrée sont les suivants :
<input type="button"> <input type="email"> <input type="number">
<input type="checkbox"> <input type="file"> <input type="password">
<input type="color"> <input type="hidden"> <input type="radio">
<input type="date"> <input type="image"> <input type="range">
<input type="datetime-local"> <input type="month"> <input type="reset">
Programmation Web et Multimédia Dr KOFFI Dagou Dangui Augustin Sylvain Legrand et Dr DIAKO Doffou Jérôme 39
Chapitre 2 : HTML -Structuration
Etude de quelques balises
<input type="search"> <input type="text">(valeur par défaut)
Astuce : Utilisez toujours la balise <label> pour définir des étiquettes pour <input type="text">, <input
type="checkbox">, <input type="radio">, <input type="file"> et <input type="password">.
La balise <textarea> :
La balise <textarea> définit un contrôle de saisie de texte multiligne ;
L'élément <textarea> est souvent utilisé dans un formulaire, pour collecter des entrées
d'utilisateurs comme des commentaires ou des critiques ;
Programmation Web et Multimédia Dr KOFFI Dagou Dangui Augustin Sylvain Legrand et Dr DIAKO Doffou Jérôme 40
Chapitre 2 : HTML -Structuration
Etude de quelques balises
La balise <textarea> :
Une zone de texte peut contenir un nombre illimité de caractères et le texte s'affiche dans une
police à largeur fixe (généralement Courier) ;
La taille d'une zone de texte est spécifiée par les attributs colset (ou avec CSS).rows
L'attribute name est nécessaire pour référencer les données du formulaire une fois le
formulaire soumis (si vous omettez l'attribute name, aucune donnée de la zone de texte ne sera
soumise) ;
L'attribute id est nécessaire pour associer la zone de texte à une etiquette ;
Conseil : Ajoutez toujours la balise <label> pour les meilleures pratiques d'accessibilité !
Programmation Web et Multimédia Dr KOFFI Dagou Dangui Augustin Sylvain Legrand et Dr DIAKO Doffou Jérôme 41
Chapitre 2 : HTML -Structuration
Etude de quelques balises
La balise <button> :
La balise <button> définit un bouton cliquable ;
À l' intérieur d'un élément <button>, vous pouvez mettre du texte (et des balises
comme <i>, <b>, <strong>, <br>, <img>, etc.) ;
Ce n'est pas possible avec un bouton créé avec l' élément <input> .
Conseil : spécifiez toujours l'attribute type d'un élément <button>, pour indiquer aux navigateurs de
quel type de bouton il s'agit !
Astuce : Vous pouvez facilement styliser les boutons avec CSS !
Programmation Web et Multimédia Dr KOFFI Dagou Dangui Augustin Sylvain Legrand et Dr DIAKO Doffou Jérôme 42
Chapitre 2 : HTML -Structuration
Etude de quelques balises
La balise <select> :
L'élément <select> est utilisé pour créer une liste déroulante ;
L'élément <select> est le plus souvent utilisé dans un formulaire, pour collecter les entrées de
l'utilisateur ;
L'attribute name est nécessaire pour référencer les données du formulaire une fois le
formulaire soumis (si vous omettez l'attribute name, aucune donnée de la liste déroulante ne
sera soumise) ;
L'attribute id est nécessaire pour associer la liste déroulante à une etiquette ;
Les balises <option><select> à l'intérieur de l' élément définissent les options disponibles dans
la liste déroulante.
Conseil : Ajoutez toujours la balise <label> pour les meilleures pratiques d'accessibilité !
Programmation Web et Multimédia Dr KOFFI Dagou Dangui Augustin Sylvain Legrand et Dr DIAKO Doffou Jérôme 43
Chapitre 2 : HTML -Structuration
Etude de quelques balises
La balise <option> :
La balise <option> définit une option dans une liste de sélection ;
L’élément <option> va à l'intérieur des éléments <select> , <optgroup> ou <datalist> ;
Remarque : La balise <option> peut être utilisée sans aucun attribut, mais vous avez généralement
besoin de l' attribut value , qui indique ce qui est envoyé au serveur lors de la soumission du formulaire.
Conseil : Si vous disposez d'une longue liste d'options, vous pouvez regrouper les options associées
dans la balise <optgroup> !
La balise <optgroup> :
La balise <optgroup> est utilisée pour regrouper les options associées dans un
élément <select> (liste déroulante) ;
Programmation Web et Multimédia Dr KOFFI Dagou Dangui Augustin Sylvain Legrand et Dr DIAKO Doffou Jérôme 44
Chapitre 2 : HTML -Structuration
Etude de quelques balises
La balise <fieldset> :
La balise <fieldset> est utilisée pour regrouper des éléments liés dans un formulaire ;
La balise <fieldset> dessine un cadre autour des éléments associés.
La balise <label> :
La balise <label> définit un libellé pour plusieurs éléments :
<input type="checkbox"> <input type="month"> <input type="tel">
<input type="color"> <input type="number"> <input type="text">
<input type="date"> <input type="password"> <input type="time">
<input type="datetime-local"> <input type="radio"> <input type="url">
<input type="email"> <input type="range"> <input type="week">
<input type="file"> <input type="search"> <meter>
Programmation Web et Multimédia Dr KOFFI Dagou Dangui Augustin Sylvain Legrand et Dr DIAKO Doffou Jérôme 45
Chapitre 2 : HTML -Structuration
Etude de quelques balises
La balise <label> :
La balise <label> définit un libellé pour plusieurs éléments :
<meter> <select>
<progress> <textarea>
La balise <output> :
La balise <output> est utilisée pour représenter le résultat d'un calcul (comme celui effectué
par un script).
Programmation Web et Multimédia Dr KOFFI Dagou Dangui Augustin Sylvain Legrand et Dr DIAKO Doffou Jérôme 46