CODAGE

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

INSTALLER VISUAL STUDIO CODE
Aller sur le lien https://code.visualstudio.com/download
INTERFACE DE VISUAL STUDIO CODE
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.
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.
<h1>Ma première page HTML</h1> • L'élément <title> indique le titre du documen
<p>Mon premier paragraphe</p> • L'élément <body> contient la partie visible de la
</body> page web.
</html> • L'élément <h1> définit un titre de niveau 1.
• L'élément <p> définit un paragraphe
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

LES BALISES HTML5
Qu'est-ce qu'une balise HTML ? Une balise HTML se compose du nom de la balise entre crochets
angulaires et fonctionne le plus souvent par pair.

La balise d'ouverture se compose du nom, éventuellement suivi d'un ou plusieurs attributs, tandis
que la balise de fermeture se compose du même nom précédé d'une barre oblique ("/"). Par exemple,
la balise "<p>" commence un paragraphe, tandis que "</p>" termine un paragraphe. Quelques
balises HTML ne fonctionnent pas par pair. Il s'agit de balises orphelines. C'est le cas des balises
<br> et <hr>, qui représentent respectivement un retour à la ligne et une ligne horizontale.
LES BALISES HTML
LES ATTRIBUTS
LES ATTRIBUTS
Les attributs sont des informations supplémentaires ajoutés aux éléments

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