PRESENTATION

• Je m’appelle ANDRIANONIMAMY Manantsalama (Onimamy)

• Je suis ingénieur en Télécommunication et en Informatique
• Je suis développeur d’application depuis 14 ans
• J’ai déjà travaillé dans plusieurs entreprises privés et organisme publique tels que Ministère
de l’aménagement du territoire, APIPA, PNUD, UNICEF, HELLOPRO, AGENCE 720,
PEP’S WEB, ADAPT, NETUNIVERS.
• J’ai réalisé plus de 1000 projets digitaux jusqu’à ce jour,
• Actuellement directeur des sociétés NOGAE GROUP, NEXTJOBS
A QUI S’ADRESSE CETTE FORMATION
• Les langages dans cette formation, comme nous allons le voir, à la base de tout projet de
programmation web. Par extension, ce cours s’adresse à tous, du plus parfait néophyte à
l’expert ayant besoin d’un rafraichissement.

En résumé, ce cours s’adresse :

• Aussi bien au néophyte qu’à la personne expérimentée ;
• A tous ceux qui veulent apprendre la programmation Web
OBJECTIFS & PRÉ-REQUIS
• L’objectif de Nogae Academy est de former des petits groupes d’élèves pour devenir des
professionnels experts dans les métiers du Web.
• Le but premier de ce cours est de vous apprendre pas à pas à coder en HTML5, en CSS3,
PHP et Javascript : les langages de programmation web les plus utilisés dans le monde.
• Outre cela, je vais également m’appliquer à vous montrer la logique et les mécanismes
derrière ces langages afin que vous compreniez ce que vous faîtes et que vous deveniez
vite autonomes.

• Aucun prérequis en programmation n’est nécessaire pour intégrer la Nogae Academy : la

formation est concentrée sur ce qui est uniquement nécessaire et sur les bonnes pratiques
pour obtenir des résultats de qualité et ainsi devenir un développeur web junior
opérationnel.
PROGRAMME DE LA FORMATION
Les technologies enseignées par la Nogae Academy dans cette formation
sont les langages HTML 5, CSS 3, JavaScript, PHP, SQL.
Ces derniers sont utilisés dans plus de 90% des sites web existants et des
nouveaux projets, ce qui procure aux élèves un bagage solide pour se
présenter sur le marché de l’emploi (plus de la moitié des offres d’emploi
concernant le web demandent la maîtrise de ces technologies).
PROGRAMME DE LA FORMATION
Le programme sera divisé en 5 grandes parties

o Partie I – Les Bases en HTML et en CSS

o Partie II – Formater du Texte & Positionner des éléments grâce au CSS
o Partie III – Fonctionnalités Avancées
o Partie IV – PHP / MySQL
o Partie V – Les bases de JavaScript
PROGRAMME DE LA FORMATION
PARTIE I : Les Bases en HTML et en CSS

• Chapitre 1 : Première Approche Théorique du HTMLet du CSS

• Chapitre 2 : Les Bases en HTML
• Chapitre 3 : Les Bases en CSS
PROGRAMME DE LA FORMATION
Partie II – Formater du Texte & Positionner des éléments grâce au CSS
• Chapitre 4 : Les Propriétés de Type « Font- »
• Chapitre 5 : Les Propriétés de Type « Text- »
• Chapitre 6 : Le Modèle des Boîtes
PROGRAMME DE LA FORMATION
Partie III – Fonctionnalités Avancées
• Chapitre 7 : Gestion du Background (Le Fond)
• Chapitre 8 : Intégrer des Images, de l’Audio et de la Vidéo grâce au HTML5
• Chapitre 9 : Les Tableaux
• Chapitre 10 : Les Formulaires
• Chapitre 11 : CSS3 Avancé
• Chapitre 12 : Design Web Responsive avec CSS3
• Chapitre 13 : Framework Bootstrap
PROGRAMME DE LA FORMATION
PARTIE IV : Le langage PHP et MySQL

• Les bases de PHP

• Introduction à PHP
• Préparer son ordinateur
• Premiers pas avec PHP
• Inclure des portions de page
• Les variables
• Les conditions
• Les boucles
• Les fonctions
• Les tableaux
PROGRAMME DE LA FORMATION
PARTIE IV : Le langage PHP et MySQL

• Transmettre des données de page en page

• Transmettre des données avec l’URL

• Transmettre des données avec les formulaires
• TP : page protégée par mot de passe
• Variables superglobales, sessions et cookies
• Lire et écrire dans un fichier
PROGRAMME DE LA FORMATION
PARTIE IV : Le langage PHP et MySQL

• Gestion de base de données

• Présentation des bases de données

• phpMyAdmin
• Lire des données
• Écrire des données
• TP : un mini-chat
• Les fonctions SQL
• Les dates en SQL
• TP : un blog avec des commentaires
• Les jointures entre tables
PROGRAMME DE LA FORMATION
PARTIE IV : Le langage Javascript
• Les bases de JavaScript
• Expressions commune
• Images et animations
• Javascript et CSS
• DOM et DHTML
• Les cookies
• Javascript et formulaires
• AJAX
• Framework Jquery
AVANT DE COMMENCER
• Le modèle Client-Serveur

La navigation sur le web se fait suivant le modèle client-serveur :

• le client effectue des requêtes.
• le serveur répond à ces requêtes.
Lorsque vous naviguez sur internet :
• Le client est votre navigateur web (Chrome, Mozilla Firefox par exemple).
• Le serveur est un logiciel qui tourne sur un ordinateur en général dédié à cela.
ARCHITECTURE CLIENT-SERVEUR
L’image ci-dessous montre un schéma de l’architecture
client-serveur.
Au centre, le serveur, celui qui possède les données et
informations et qui répond aux demandes des clients.
Les clients sont des utilisateurs avec un PC, Smartphone
ou tout autre appareil.
Dans ce dernier une application permet d’effectuer la
connexion au serveur pour obtenir en retour les données.

C’est donc une architecture centralisé.

Ce qui se passe lorsque vous utilisez votre navigateur
internet pour afficher un site WEB.
Le navigateur WEB se connecte au serveur WEB qui
retourne le contenu de la page.
Enfin le navigateur internet se charge de l’afficher à
l’écran de l’utilisateur. C’est un modèle client/serveur.
TYPE D’ARCHITECTURES ET NIVEAUX
EDITEURS DE TEXTE
Pour développer des pages web, vous avez besoin d'un éditeur de texte capable de lire le PHP, HTML et
le CSS. Sur Windows, il existe l'application Notepad (Bloc-Note), installée par défaut. Mais elle n'est
pas assez puissante ! Il vous faut un éditeur de texte puissant, capable de mettre en valeur la syntaxe, de
vous guider au cours de votre développement etc.
Voici une liste d'éditeurs de texte très appréciés :
• NOTEPAD++ (Open Source, Gratuit)
• Sublime Text (Propriétaire)
• Visual Studio Code (Open Source, Gratuit)
• GNU Emacs (Open Source, Gratuit)
• Atom
INSTALLER VISUAL STUDIO CODE
Aller sur le lien https://code.visualstudio.com/download
INTERFACE DE VISUAL STUDIO CODE
 PARTIE I
LES BASES EN HTML ET EN
CSS
 CHAPITRE 1 :
PREMIERE APPROCHE THEORIQUE
DU HTML ET DU CSS
LA DÉFINITION DE HTML5
Le HTML (HyperText Markup Language) est un langage (un code) qui permet de structurer
une page Internet de manière à ce qu’elle puisse être rendue dans les navigateurs Web. Le
html est constitué de balises qui entourent le texte et lui donne ainsi un sens (titre,
paragraphe, image, lien…). Une balise commence par <xxx> et se termine par </xxx>, xxx
étant le nom de la balise. Actuellement, la version de html courante est la 5.

Ce n'est pas à proprement parlé un langage de programmation, mais plutôt un langage qui
permet de mettre en forme du contenu. HTML est un des langages permettant la structuration
et mise en forme de page web.
Pour visualiser une page en HTML il est nécessaire d'utiliser un navigateur web.
LA DÉFINITION DE HTML5
HTML5 est la dernière version du langage HTML. Il a été formalisé par le W3C et est sorti
en 2012. C'est un format ouvert.
Le W3C, C'est le World Wide Web Consortium. Il s'agit d'une communauté internationale
réunissant des membres de l'organisation, ainsi que le public, dans un but de développer les
standards du web. La mission du W3C est de conduire le web à son plein potentiel.
Les navigateurs web doivent suivre les recommandations du W3C. Vous pouvez vérifier le
score de votre navigateur quant au respect des standards HTML5 :https://html5test.com
Quand vous développez un site ou une application web, vous devez toujours vérifier si votre
code est en phase avec les standards du W3C. Pour cela, utilisez toujours le validateur
W3C :https://validator.w3.org.
CSS
CSS signifie Cascading StyleSheets, soit « feuilles de style en cascade ». Il a été créé en 1996
et a pour rôle de mettre en forme du contenu en lui appliquant ce qu’on appelle des styles
(Couleurs, taille de police, …)

La version actuelle de CSS et le CSS3

BONNE PRATIQUE
Beaucoup de débutants, et même des personnes expérimentées, confondons les fonctions respectives du
HTML et du CSS et utilisent un langage pour faire le travail de l’autre. En l’occurrence, c’est le HTML
qui est souvent utilisé à mauvais escient, pour mettre en forme du contenu.
Il ne faut JAMAIS utiliser le HTML pour faire le travail du CSS

• Retenez donc que le HTML est utilisé pour baliser un contenu, c’est à dire pour le structurer et lui
donner du sens. Le HTML sert, entre autres choses, à indiquer aux navigateurs quel texte doit être
considéré comme un paragraphe, quel texte doit être considéré comme un titre, que tel contenu est
une image ou une vidéo.
• Le CSS, quant-à-lui, est utilisé pour appliquer des styles à un contenu, c’est-à-dire à le mettre en
forme. Ainsi, avec le CSS, on pourra changer la couleur ou la taille d’un texte, positionner tel contenu
à tel endroit de notre page web ou ajouter des bordures ou des ombres autour d’un contenu
CHAPITRE 2 : LES FONDATIONS DU HTML

2.1 Eléments, balises et attributs

• Les éléments sert à définir des objets dans une page. Grâce aux éléments, nous allons pouvoir définir un
paragraphe (élément p), des titres (éléments h1, h2, h3, h4, h5 et h6) ou un lien (élément a)
• Les éléments sont constitués de balises. Dans la majorité des cas, un élément est constitué d’une paire de
balises : une balise ouvrante et une balise fermante.
• Les balises reprennent le nom de l’élément et sont entourées de chevrons < et >. La balise fermante possède
en plus un slash qui précède le nom de l’élément.

Par exemple, la balise "<p>" commence un paragraphe, tandis que "</p>" termine un paragraphe
ELÉMENTS, BALISES ET ATTRIBUTS
ELÉMENTS, BALISES ET ATTRIBUTS
Quelques balises HTML ne fonctionnent pas par pair. Certains éléments ne sont constitués que
d’une balise qu’on appelle alors balise orpheline. C’est par exemple le cas de l’élément br qui
va nous servir à créer un retour à la ligne et <hr> une ligne horizontale.

L’écriture en HTML est alors la suivante :

• <br/>.
• <hr/>
LES ATTRIBUTS
Les attributs sont des informations supplémentaires ajoutés aux éléments.
Ils se placent toujours à l’intérieur de la balise ouvrante d’un élément (ou
de la balise orpheline le cas échéant).

Ils fonctionnent souvent sous forme de nom / valeur, comme ceci : nom =
"valeur".
LES ATTRIBUTS
LES ATTRIBUTS : EXEMPLE

Dans l’exemple ci-dessus, on discerne l’élément a composé :

• d’une balise ouvrante elle-même composée d’un attribut href et d’une valeur http://wikipedia,com ;
• Contenu ou d’une ancre textuelle ;
• d’une balise fermante
LES ATTRIBUTS : EXEMPLE
STRUCTURE DE BASE D’UNE PAGE EN HTML5

Toute page écrite en HTML5 doit comporter une certaine structure, un « squelette » qui sera
toujours le même. Ce squelette est bien évidemment constitué de divers éléments.
VOTRE PREMIÈRE PAGE HTML
• Le squelette HTML5
<!DOCTYPE html> EXPLICATION
<html lang="fr-FR"> • La déclaration <!DOCTYPE html> définit qu'il
<head> s'agit bien d'un document en HTML5.
<meta charset="UTF-8"> • L'élément <html> est l'élément racine du document
<title>Ma première page HTML</title> HTML.
</head> • L'élément <head> contient les méta-informations
<body> du document.
</body> • L'élément <title> indique le titre du document
</html> • L'élément <body> contient la partie visible de la
page web. Il contiendra tout le contenu de notre
page (paragraphes, images, tableaux, etc.).
ENREGISTRER UN DOCUMENT HTML
Pour avoir un document HTML, il faut enregistrer le fichier au
format .html

Sur Visual Studio code : Fichier – Enregistrer ou enregistrer sous

BONNES PRATIQUES, RÈGLES ET COMMENTAIRES

• HTML permet d’imbriquer des éléments les uns à l’intérieur des autres. Toutefois, vous devrez
toujours faire bien attention de refermer les balises dans le bon ordre.
Le bon ordre est : <a> <b> </b> </a>, c’est à dire que le dernier
élément ouvert est toujours le premier refermé. Vous ne devrez jamais
écrire <a> <b> </a> </b>.
• Indenter son code, c’est tout simplement l’aérer en ajoutant des espaces au début de certaines lignes
afin de le rendre plus lisible pour vous comme pour les autres.
Utilise une tabulation (la touche à gauche du a) à chaque fois que j’ouvre une nouvelle balise à
l’intérieur d’un élément. Cela permet de bien hiérarchiser son code et de voir immédiatement quel
élément est imbriqué dans quel autre.
• Commenter son code. Les commentaires ne seront pas visibles par vos visiteurs
EXEMPLE DE COMMENTAIRE
POURQUOI COMMENTER SON CODE
• Pour vous, Lorsque vous commencerez à véritablement savoir coder, vos pages vont
s’allonger et se complexifier. Commenter permet de vous repérer dans votre page web et
pour vous rappeler pourquoi vous avez fait telle chose de telle façon,
• Pour les personnes à qui vous pourriez distribuer votre code. Les commentaires sont des
indications sur votre code afin que les personnes puissent le comprendre plus rapidement et
plus facilement.
• Attention à ne jamais mettre d’informations sensibles en commentaire, comme des mots de
passe par exemple. En effet, tout le monde peut avoir accès au code source de votre page
(Ctr + u, ou clic droit et « inspecter l’ élément »), et donc à votre code HTML
LES ÉLÉMENTS HEADING, PARAGRAPH ET BREAK

• Paragraphe : élément p
• Retour à la ligne : élément br
• Titres : h1, h2, h3, h4, h5 et h6.
Les balises hx permet de créer des titres de diverses importances. Ainsi, un titre h1 sera
considéré comme un titre très important tandis qu’un titre h6 sera considéré comme très peu
important.
En pratique, on n’utilisera que très rarement les titres de niveau h4, h5 et h6. Si vous vous
interrogez encore sur l’intérêt d’avoir tous ces éléments, pensez que cela est très important pour
le référencement entre autres.
EXERCICE
EXERCICE
REMARQUES
Vous avez remarqué ? Les titres apparaissent en gras et ont des tailles différentes selon leur
degré d’importance. Et c’est précisément là où j’en reviens à mon premier point : vous ne
devez JAMAIS utiliser le langage HTML pour mettre en forme le contenu.
Ce que vous voyez n’est qu’une mise en forme automatique faîte par votre navigateur, une
interprétation visuelle de ce que vous avez donné à votre navigateur. Cependant, vous ne devez
jamais utiliser un titre de niveau h1 pour mettre un texte en gros et en gras. JA-MAIS.
LES ÉLÉMENTS STRONG, EMPHASIS ET MARK

• L’élément strong est utilisé pour indiquer aux moteurs de recherche qu’un contenu est
particulièrement important, afin que celui-ci soit traité avec plus d’importance. Le résultat
visuel est une mise en forme automatique en gras. Mais encore une fois, on n’utilise pas
l’élément strong pour mettre un texte en gras !
• L’élément em, pour emphasis (« emphase » en français) est proche de l’élément strong. Il
sert lui aussi à signifier qu’un contenu est important, mais moins important tout de même
qu’un contenu entre des balises strong
• l’élément mark est utilisé pour faire ressortir du contenu. Ce contenu ne sera pas forcément
considéré comme important, mais cette balise peut servir dans le cas de l’affichage de
résultats suite à une recherche d’un de vos visiteurs par exemple.
LES ÉLÉMENTS STRONG, EMPHASIS ET MARK

Encore une fois, si vous vous demandez l’intérêt de ces éléments, il est avant tout dans
l’optimisation du référencement de votre site. En effet, normalement, vous devriez avoir ciblé
des mots clefs et essayer d’être bien référencé sur ces mots là. Les balises strong et em vous
aident à atteindre ce but, entre autres
EXERCICE
LISTES NON-ORDONNÉES
LISTES ORDONNÉES
LISTES DE DÉFINITIONS

Les listes de définition son utilisées pour définir des termes

• dl (Définition list) : c’est l’élément principale

• dt (Définition term): C’est l’élément à définir
• dd : C’est la définition proprement dit
LISTES DE DÉFINITIONS
LISTES IMBRIQUÉES

HTML nous offre la possibilité d’imbriquer les listes les unes dans les autres très simplement.
Pour imbriquer des listes, il suffit de commencer une liste, puis d’en ouvrir une seconde à
l’intérieur d’un élément de la première (on peut évidemment imbriquer plus de deux listes en
répétant le même processus)
EXERCICE
LIENS INTERNES ET LIENS EXTERNES

Un lien interne est un lien créé entre deux pages d’un même site web tandis qu’un lien externe
est un lien menant d’un site web vers un autre site web

On utilise l’élément a accompagné de sont attribut href (pour Hypertext Reference) qui sert à
indiquer la cible (c’est à dire la destination) du lien.
LIENS INTERNE
Nous avons trois cas à distinguer :

• 1er cas : La page à partir de laquelle on fait un lien et celle vers laquelle on fait un lien se trouvent
dans le même dossier. Dans ce premier cas, il suffit de préciser le nom de la page dans l’attribut href.
• 2ème cas : La page vers laquelle on souhaite faire un lien se trouve dans un sous-dossier. Dans ce
cas, il faudra en tenir compte et inclure le nom du sous-dossier dans la valeur de l’attribut href.
• 3ème cas : La page vers laquelle on veut faire un lien se trouve dans un dossier parent. Dans ce cas,
nous devrons rajouter « ../ » dans la valeur de l’attribut href.

EXERCICE 7
LIEN EXTERNE
Pour créer des liens externes: il suffit d’indiquer l’URL complète de la page vers laquelle on
veut faire un lien en valeur de l’attribut href.

En pratique, pour faire un lien vers la page d’accueil de Wikipédia par exemple, on écrira :

<a href="https://www.wikipedia.com">Lien vers Wikipedia</a>

L’ATTRIBUT TARGET
L’attribut target va permettre de choisir si vous voulez que la cible de votre lien s’ouvre dans
une nouvelle fenêtre / nouvel onglet ou pas.
Pour que la cible de votre lien s’ouvre dans une nouvelle fenêtre ou un nouvel onglet, on
attribuera la valeur _blank à l’attribut target. (EXERCICE 8)
LIEN DE TYPE ANCRE
• Pour créer une ancre, on commence par rajouter un attribut id à une balise ouvrante HTML à
l’endroit où l’on veut envoyer le visiteur. On peut attribuer n’importe quelle valeur à cet
attribut, le mieux étant de choisir une valeur qui fasse sens.
• Ensuite, on crée le lien cliquable en soi qui va amener à notre id. Pour cela, on utilise
toujours notre élément a avec son attribut href mais cette fois ci on va devoir placer un dièse
avant d’écrire la valeur de l’attribut href.
• La valeur inscrite pour l’attribut href doit être strictement la même que celle donnée à notre
id.

EXERCICE 9
LIEN DE TYPE EMAIL
Pour envoyez un mail, on donne tout simplement une valeur de type « mailto : » à notre
attribut href comme ceci :
LIEN DE TYPE TELEPHONE
• Pour automatiser un appel téléphonique en cliquant sur un lien, on donne tout simplement
une valeur de type « tel: » à notre attribut href comme ceci

<a href=“tel:+261349194075">+261 34 91 940 75</a>

LIEN DE TELECHARGEMENT
Pour faire un lien permettant à vos visiteurs de télécharger un fichier, c’est exactement comme
faire un lien interne mais au lieu de fichier html, l’attribut href va avoir comme valeur le nom
du fichier (.zip, .docx, …)
BONNE PRATIQUE
• Tester votre page avec différents navigateurs
• Pensez systématiquement à vérifier la validité de votre page.
• Pour le validateur HTML : http://validator.w3.org
• Pour le validateur CSS : http://jigsaw.w3.org/css-validator
CHAPITRE 3 : LES FONDATIONS DU CSS

CSS sert à modifier l’apparence de nos pages web en appliquant des styles au contenu en
HTML.
CSS va vous permettre de modifier l’apparence de vos textes, rajouter des bordures ou changer
la disposition des éléments sur votre page.
Mais avant tout, il nous faut commencer avec quelques éléments de vocabulaire comme on
l’avait fait pour le HTML
SÉLECTEURS, PROPRIÉTÉS ET VALEURS
• Un sélecteur va servir à déterminer à quel(s) élément(s) HTML ou à quel type d’éléments on
souhaite appliquer un style particulier. Si l’on souhaite appliquer un style particulier à tous
nos paragraphes, par exemple, on utilisera le sélecteur « p ».
• Une propriété va nous servir à modifier le style d’un élément en ciblant un critère bien
particulier comme la taille d’un texte, sa police ou sa couleur par exemple.
• Une valeur, enfin, va venir compléter une propriété et va en déterminer le comportement.
Pour la propriété servant à changer la couleur d’un texte par exemple, la valeur va être la
nouvelle couleur à appliquer.
SÉLECTEURS, PROPRIÉTÉS ET VALEURS
OÙ ÉCRIRE LE CSS

• A l’intérieur de l’élément head de notre document HTML ;

• Dans la balise ouvrante des éléments de notre fichier HTML ;
• Dans un fichier portant l’extension .css séparé.

Pour des raisons de performances de votre code, de clarté et d’économie de temps, il est
recommandé vivement d’utiliser la dernière méthode dès que cela est possible.
ÉCRIRE SON CODE CSS DANS L’ÉLÉMENT HEAD
EXERCICE 10
ÉCRIRE DU CSS DANS LA BALISE OUVRANTE D’UN
ÉLÉMENT HTML
ÉCRIRE LE CODE CSS DANS UN FICHIER SÉPARÉ
• Créer un fichier avec l’extesion .css dans le même dossier que votre fichier HTML
• Ajouter entre la balise head du fichier HTML le code
<link rel="stylesheet" href="style.css" />

• L’attribut rel sert à préciser le style du fichier lié (dans notre cas c’est une feuille de style,
donc « stylesheet » en anglais).
• L’attribut href sert à faire le lien vers le fichier .css.
ÉCRIRE LE CODE CSS DANS UN FICHIER SÉPARÉ
LES COMMENTAIRES EN CSS

On a déjà vu que l’on pouvait commenter en HTML. Cela est également possible en CSS. Plus
qu’une possibilité, c’est même une obligation selon moi.
Les fichiers CSS deviennent rapidement très long (beaucoup plus que les fichiers HTML par
exemple) donc si vous ne commentez pas efficacement vous risquez d’être très vite perdu.
Un commentaire commence /* et se termine par */
SÉLECTEURS SIMPLES ET LIMITATIONS

Jusqu’à présent, nous n’avons manipulé que des sélecteurs que l’on appelle « simple », car ils correspondent à
des éléments HTML,
Par exemple :
• html
• body
• p
• h1
• ul
• li
• …
En résumé, les sélecteurs simples sont tout juste des éléments HTML de base
SÉLECTEURS SIMPLES ET LIMITATIONS

Le problème reste qu’on est quand même très limité avec des sélecteurs simples : comment
faire pour appliquer un style différent à deux éléments de même type, deux paragraphe par
exemple ? Ce n’est tout simplement pas possible.

Et c’est pour cela que l’on a créé les attributs class et id.
LES ATTRIBUTS CLASS ET ID

Class et Id sont deux attributs HTML qui ont été créés pour pouvoir appliquer différents styles
à des éléments de même type. Class permet également de faire l’inverse et d’appliquer le
même style à différents éléments choisis.
on se place dans la balise ouvrante d’un élément HTML, on écrit le nom de notre attribut
(class ou id), et on lui donne une valeur cohérente.
Cette valeur ne devrait contenir ni de caractères spéciaux (accents et autres) ni d’espace.
EXERCICE 12
LES ÉLÉMENTS DIV ET SPAN

• Les éléments div et span vont nous servir de containers. Ce sont des balises de groupement
sont destinées à en grouper d’autres éléments.
Nous allons nous en servir pour entourer des blocs de code et ainsi pouvoir attribuer des
styles particuliers à ces blocs ,
• Les éléments div et span ne possèdent aucune valeur sémantique,
DIV
DIV
• <div> représente une division de document.
DIV
• Neutre en termes d’apparence par défaut hormis son affichage en bloc, l’élément <div> est
ainsi très couramment employé pour en regrouper d’autres.
• Néanmoins, il faut éviter la divite , syndrome d’un usage excessif d’éléments <div> même
lorsque ce n’est pas nécessaire ou que d’autres éléments sont plus appropriés (<p>,
<article>, <header>, <footer>... On verra plus tard). C’est pourquoi <div> doit être
considéré dans l’absolu comme un élément de dernier recours.
EXERCICE 13
LES OUTILS INDISPENSABLE
• Un éditeur de texte
• Bloc Note
• Notepad++
• Brackets
• DreamWeaver
• Sublime texte
• Visual Studio code
• …
LES OUTILS INDISPENSABLE
• Des navigateurs Web
• Chrome
• Edge
• Internet Explorer
• Firefox
• Safari
• Opéra
• …
• Langage de Développement Front-End

• HTML
• CSS
• Javascript

• Langage de développement Back-End

• PHP + Base de données