Table des matières

PARTIE I : Le langage HTML.......................................................................................................3

Avant de commencer............................................................................................................4
Le modèle client serveur...................................................................................................4
Editeurs de texte...............................................................................................................5
PARTIE I : Le langage HTML
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.
Par extension, le client désigne également l'ordinateur ou la machine virtuelle sur lequel est
exécuté le logiciel client. De même le serveur désigne par extension l'ordinateur ou la
machine virtuelle sur lequel est exécuté le logiciel serveur.
Les serveurs sont des ordinateurs généralement destinés au logiciel serveur qu'ils abritent.
Ils sont en général dotés de capacités supérieures à celles des ordinateurs personnels en ce
qui concerne la puissance de calcul, les entrées-sorties et les connexions réseau : un serveur
doit en effet pouvoir répondre aux requêtes d'un grand nombre de clients.
Les clients sont souvent des ordinateurs personnels ou des appareils individuels (téléphone,
tablette).
Il existe une grande variété de logiciels serveurs et de logiciels clients en fonction des
besoins à servir :
 un serveur Web publie des pages Web demandées par des navigateurs Web (Mozilla
Firefox, Opera, Edge, Chrome...) ;
 un serveur de messagerie électronique envoie du courriel à des clients de messagerie
(Mozilla Thunderbird, Microsoft Outlook...) ;
 un serveur de fichiers permet de partager des fichiers sur un réseau ;
 un serveur de base de données permet de récupérer des données stockées dans une
base de données,
 etc.
 Architecture Centralisé

C’est par 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
On distingue par la suite plusieurs types d’architectures qui se différencient par des niveaux.
Cela dépend en fait de l’infrastructure qui se trouve derrière le serveur et qui n’est pas
visible du client.
Lorsqu’un serveur délivre par ses propres moyens les données au client, on parle d’une
architecture à deux niveaux.
Si le client interroge par exemple une base de données ou autre un serveur, on parle
d’architecture à trois niveaux.
Puis si les deux serveurs se trouvent derrière un autre serveur, c’est une architecture à
quatre niveaux. Ainsi de suite.

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
 Exemple éditeur de texte ( Visual Studio Code )
Installer Visual Studio Code
Dans ce livre, nous utiliserons l'éditeur de texte très apprécié, Visual Studio Code. Pour

l'installer, rendez-vous sur le site web https://code.visualstudio.com/download. Vous

pouvez le télécharger directement pour Windows à partir de la page d'accueil.
Les bases de HTML5

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.

Un
hypertexte
est un
document
ou un
HTML5 est la dernière version du langage HTML. Il a été formalisé par le W3C et est sorti en
ensemble
2012. C'est un format ouvert.
de
Ledocuments
W3C, C'est le World Wide Web Consortium. Il s'agit d'une communauté internationale
réunissant
informatiqu des membres de l'organisation, ainsi que le public, dans un but de développer les
standards
es quidu web. Tim Berners-Lee est le directeur du W3C avec Jeffrey Jaffe. La mission du
W3C est de conduire le web à son plein potentiel.
permet de
Les passer
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
d'une
information
Quand vous développez un site ou une application web, vous devez toujours vérifier si votre
à l'autre
code est en phase avec les standards du W3C. Pour cela, utilisez toujours le validateur
grâce
W3C à un
:https://validator.w3.org.
système de
renvois
appelés
hyperliens,
ou liens
hypertextes.
Votre première page HTML

Le squelette HTML5

<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="UTF-8">
<title>Ma première page HTML</title>
</head>
<body>
<h1>Ma première page HTML</h1>
<p>Mon premier paragraphe</p>
</body>
</html>

Expliquons les différentes balises utilisées dans cette page HTML :

 La déclaration <!DOCTYPE html> définit qu'il s'agit bien d'un document en HTML5
 L'élément <html> est l'élément racide du document HTML.
 L'élément <head> contient les méta-informations du document.
 L'élément <title> indique le titre du document.
 L'élément <body> contient la partie visible de la page web.
 L'élément <h1> définit un titre de niveau 1.
 L'élément <p> définit un paragraphe

Enregistre un document HTML

Pour avoir un document html, il faut enregistrer votre fichier avec l’extension .html.
Sous votre éditeur Visual Studio code, aller dans le menu Fichier / Enregistrer ou Fichier /
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 souvant 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 attributs HTML5

Les attributs sont appliqués aux éléments. Ils fournissent des informations supplémentaires.
Ils fonctionnent souvent sous forme de nom / valeur, comme ceci : nom = "valeur".

Dans cet exemple le nom de l’attribut est class et la valeur est title

Dans la figure ci-dessus, le nom de l'attribut est "href" et sa valeur est l'URL
https://www.google.com. Par convention, vous devez toujours utiliser des quotes autour de
la valeur d'attribut.