Vous êtes sur la page 1sur 46

Ecole Supérieure Africaine des Techniques d’Information et de

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
dagousylvain@gmail.com kingdjako@gmail.com
MODULE : DEVELOPPEMENT WEB ET
MULTIMEDIA
PLAN

Chapitre 1 : Introduction au Développement Web et Mise en place

Chapitre 2 : HTML - Structuration des documents

Chapitre 3 : CSS :Mise forme, Placement

Chapitre 4 : Javascript

Chapitre 5 : Le langage PHP

Chapitre 6 : Interactions avec l'utilisateur

Chapitre 7 : Interactions avec une base de données

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

Fonctionnement d’un site Web

 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

La communication entre le client et le serveur

 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 :

 “http”, c’est le nom du protocole de communication entre le client et


le serveur ;
 monsite.com” est le nom de domaine du site Web auquel on veut accéder ;
 “mondossier/mapage.html” est l’endroit où se trouve la page dans le site
web.

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

La communication entre le client et le serveur


La communication entre client et serveur se fait en trois
étapes
 Premièrement, le client commande une page Web au serveur. Il
saisit l’URL d’un site dans son navigateur. Celui-ci envoie
immédiatement une requête web au serveur :
 Ensuite, le serveur prépare cette commande c’est-à-dire la
page Web en question. Le serveur va se charger de traiter la
requête et renvoyer les données demandées (page web, image,
vidéo…).
 Et enfin, le navigateur interprète les données reçues et les
renvoient au client qui va les afficher directement sur notre écran.
Programmation Web et Multimédia Dr KOFFI Dagou Dangui Augustin Sylvain Legrand et Dr DIAKO Doffou Jérôme 7
Chapitre 1 : Introduction au Développement Web et Mise en place

Les différentes sortes de sites web


 Les sites Web statiques
Le client envoie une requête au serveur qui se contente de renvoyer la page demandée. Le
serveur ne fait aucun travail sur la page en question, d’où le terme “statique". On parle alors
de site vitrine.

 Les sites Web dynamiques


Lorsque le client commande une page au serveur, le serveur prépare cette commande. Il fait un vrai
travail dessus avant de la renvoyer au client. Par exemple Facebook est un site dynamique. Le
contenu est différent et personnalisé pour chaque utilisateur.

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

 HTML (Hyper Text Markup Langage)


HTML – Hyper Text Markup Langage – est un langage composé de tags, balises en Français.
Il va nous permettre de représenter la structure, le squelette de nos pages Web..

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

 Hypertext Markup Language (HTML) ;


 Langage de balises qui permet de structurer des pages ;
 Un fichier HTML :
 Est un format de fichier « texte » au format .html (Ex : index.html) ;
 Peut contenir du texte, des images, des liens, des médias, etc.
 Peut être liée à une autre page via des liens ;
 Est accessible en ligne depuis n'importe où.

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

Chevron ouvrant <Nom_Balise> contenu </Nom_Balise>

Balise ouvrante Balise fermante


Programmation Web et Multimédia Dr KOFFI Dagou Dangui Augustin Sylvain Legrand et Dr DIAKO Doffou Jérôme 19
Chapitre 2 : HTML -Structuration
Le principe de balise (ou marqueurs ou tag)
 Les balises peuvent être imbriquée les unes dans les autres ;

<Nom_Balise1> contenu </Nom_Balise1>


<Nom_Balise2>
<Nom_Balise3> contenu </Nom_Balise3>
<Nom_Balise4> contenu </Nom_Balise4>
</Nom_Balise2>

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

 Balises de premier niveau


Liste de quelques balises
Ces balises sont indispensables pour pouvoir commencer à coder une page web en HTML. Elles vont permettre d’indiquer
aux différents navigateurs Web qu’il s’agit de pages en HTML et de séparer l’en-tête du corps de la page.

 <html> – </html> : balise principale de toutes les pages web ;


 <head> – </head> : en-tête de la page ;
 <body> – </body> : corps de la page.
 Balises d’en-tête
Ces balises sont toutes situées dans l’en-tête de la page Web, c’est-à-dire entre la balise <head> et la balise </head>.
 <link /> : liaison avec une feuille de style ;
 <meta /> : métadonnées de la page web ;
 <script> – </script>: code JavaScript ;
 <style> – </style> : code CSS ;
 <title> – </title> : titre de la page.
Programmation Web et Multimédia Dr KOFFI Dagou Dangui Augustin Sylvain Legrand et Dr DIAKO Doffou Jérôme 23
Chapitre 2 : HTML -Structuration

 Balises de structuration du texte


Liste de quelques balises
Ces balises permettent de disposer des blocs dans la page contenant du texte, des images ou encore des menus.
 <abbr> – </abbr> : abréviation ;
 <blockquote> – </blockquote> : citation longue ;
 <q> – </q> : citation courte ;
 <cite> – </cite> : citation du titre d’une œuvre ou d’un événement ;
 <sub> – </sub> : mise en indice ;
 <sup> – </sup> : mise en exposant ;
 <h1> – <h6> : titre de différents niveaux ;
 <img /> : image grâce aux attributs src (adresse de l’image) et alt (texte de remplacement);
 <mark> – </mark> : mise en valeur visuelle (le texte est surligné) ;
 <strong> – </strong> : mise en valeur forte (le texte est en gras) ;
 <em> – </em> : mise en valeur faible (le texte est en italique) ;
Programmation Web et Multimédia Dr KOFFI Dagou Dangui Augustin Sylvain Legrand et Dr DIAKO Doffou Jérôme 24
Chapitre 2 : HTML -Structuration

 Balises de structuration du texte


Liste de quelques balises
 <figure> – </figure> : figure (image, code…) ;
 <figcaption> – </figcaption> : description de la figure ;
 <audio> – </audio> : son ;
 <video> – </video> : vidéo ;
 <source> – </source> : indique un format possible pour les balises <audio> et <video> ;
 <a> – </a> : lien hypertexte grâce à l’attribut href. ;
 <br /> : retour à la ligne ;
 <p> – </p>: paragraphe ;
 <hr /> : ligne de séparation horizontale ;
 <address> – </adresss> : adresse de contact ;
 <del> – </del> : texte supprimé ;
 <ins> – </ins> : texte inséré ;
Programmation Web et Multimédia Dr KOFFI Dagou Dangui Augustin Sylvain Legrand et Dr DIAKO Doffou Jérôme 25
Chapitre 2 : HTML -Structuration

 Balises de structuration du texte


Liste de quelques balises
 <dfn> – </dfn> : définition ;
 <kbd> – </kbd> : indiquer un code que doit taper le visiteur ;
 <progress> – </progress> : barre de progression ;
 <time> – </time> : date ou heure ;
 <pre> – </pre> : le texte à l’intérieur de la balise sera sous forme de code ;
 Balises de listes
Ces balises permettent de créer des listes (numérotées, à puces…) ;
 <ul> – </ul>: liste à puces, non numérotée ;
 <ol> – </ol> : liste numérotée ;
 <li> – </li>: élément de la liste à puces ;
 <dl> – </dl> : liste de définitions ;
 <dt> – </dt> : définition du terme.
Programmation Web et Multimédia Dr KOFFI Dagou Dangui Augustin Sylvain Legrand et Dr DIAKO Doffou Jérôme 26
Chapitre 2 : HTML -Structuration
Liste de quelques balises
 Balises de tableau
Ces balises ont pour but de créer un tableau structuré avec des lignes et des colonnes.
 <table> – </table> : tableau ;
 <caption> – </caption> : titre du tableau ;
 <tr> – </tr>: ligne de tableau ;
 <th> – </th> : cellule d’en-tête ;
 <td> – </td> : cellule ;
 <thead> </thead> : section de l’en-tête du tableau ;
 <tbody> – </tbody> : section du corps du tableau
 <tfoot> – </tfoot> : section du pied du tableau
 Balises de formulaire
Ces balises permettent de créer des formulaires.
 <form> – </form> : délimite un formulaire (method : indique la méthode d’envoi du formulaire (get ou post) ;
Programmation Web et Multimédia Dr KOFFI Dagou Dangui Augustin Sylvain Legrand et Dr DIAKO Doffou Jérôme 27
Chapitre 2 : HTML -Structuration
Liste de quelques balises
 Balises de formulaire
 </fieldset> : permet de regrouper plusieurs éléments d’un formulaire ;
 <legend> – </legend> : titre d’un groupe dans un formulaire ;
 <label> – </label> : titre d’un élément de formulaire ;
 <input /> : champ de formulaire grâce à l’attribut type ;
 <textarea> – </textarea> : zone de saisie multiligne grâce aux attributs rows et cols (nombre de lignes et de
colonnes) ;
 <select> – </select> : liste déroulante ;
 <option> – </option> : élément d’une liste déroulante ;
 <optgroup> – </optgroup> : groupe d’éléments d’une liste déroulante ;
 Balises sectionnantes
Ces balises nous sert à construire les éléments de base d’un site web.
 <header> – </header> : en-tête ;
Programmation Web et Multimédia Dr KOFFI Dagou Dangui Augustin Sylvain Legrand et Dr DIAKO Doffou Jérôme 28
Chapitre 2 : HTML -Structuration
Liste de quelques balises
 Balises sectionnantes
 <nav> – </nav>: liens principaux de navigation ;
 <footer> – </footer> : pied de page ;
 <section> – </section> : section de page ;
 <article> – </article> : article (contenu autonome) ;
 <aside> – </aside> : informations complémentaires.
 Balises génériques
Il y a deux balises génériques : l’une est inline, l’autre est block. Elles n’ont pas de sens sémantique.
 <span> – </span> : balise générique de type inline ;
 <div> – </div> : balise générique de type block.

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)

 <input type="submit">  <input type="time">

 <input type="tel">  <input type="url">


 <input type="week">

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

Vous aimerez peut-être aussi