Les interfaces utilisateurs statiques

FICHE DE PRESENTATION DU MODULE QUALIFIANT

Objectif :
A l’issue de ce module, le stagiaire doit être capable de créer des interfaces utilisateurs
statiques et adaptables.

Programme :
 Objectifs intermédiaires Critères particuliers de performance Eléments de contenus

Créer une interface utilisateur Réalisation exhaustive de l’interface Introduction au web

avec HTML utilisateurs
Définitions: web, www, internet, site web
Interface conforme à la maquette et à la
, page web
charte graphique
Fonctionnement d’un site web
Application correcte de la structure et la
syntaxe du langage HTML Architecture client serveur

Page web statique

Page web dynamique

Application web

Définition: développement front-end, back-

end

Organismes de normalisation

Mise en place: Installation du Navigateur

Web,

de l'éditeur de code, Afficher les extensions

de

fichier

Définition et évolution du HTML

Structure d'un document HTML 5

Insertion et mise en forme des contenu

(texte, paragraphes, titres…etc.)

Tags spéciaux

Gestion des liens

Images

Listes

Attribut style

Les tableaux et les DIV

Les cadres

2

Effectuer les mises en forme
avec CSS
Créer une interface utilisateur Exploitation optimale des fonctionnalités
adaptable à l’aide d’un
Framework (Bootstrup)
Mise en forme conforme à la maquette et
à la charte graphique
Application correcte de la structure et la
syntaxe du langage CSS
du Framework
Interface conforme à la maquette et à la
charte graphique
Adaptation optimale de l’interface aux
différentes tailles d’écran
Accessibles réussite depuis différents
équipements et navigateurs
3
Les formulaires
Différentes façons d’écrire du CSS (style
local, interne, externe)
Syntaxe : Propriétés de texte, arrière-plan,
bordure, marge,…etc.)
Les unités CSS pour les dimensions et pour
les couleurs
Unités de mesure
Polices
Sélecteurs
Propriété Display
Modèle de la boite (margin, padding, box-
sizing)
Les éléments flottants
Le positionnement CSS
Les propriétés décoratives (border-radius,
box-shadow,…)
Les transformations et animations CSS
Gestion de la typographie et des polices
(@font-face)
CSS et le HTML
Les animation avec CSS
Définition
Le CSS et le responsive
Versions de Bootstrup
Mise en page avec le conteneur (Container)
Système de grille (Grid system)
Style de liens et Typographie
Création des formes (Forms)
Insertion des boutons et groupe de bouton
Insertion des images
Utilisation des Glyphicons
Création des listes déroulantes (Dropdowns)
Insertion des barres de progression
Création des info-bulles (Tooltips)
Insertion des modals
 Insertion barre de navigation (Navbar)
Insertion des Scrollspy
Insertion des Carrousels

PARTIE 1 :
Introduction au web
Définitions: web, www, internet, site web, page web
Fonctionnement d’un site web
Architecture client serveur
Page web statique
Page web dynamique
Application web
Définition: développement front-end, back-end
Organismes de normalisation
Mise en place: Installation du Navigateur Web, de l'éditeur de code,

1. Introduction au web :

Il ne fait désormais plus aucun doute que l'informatique est la révolution la plus importante
et la plus innovante qui a marqué la vie de l'humanité moderne. En effet, les logiciels
informatiques proposent maintenant des solutions à tous les problèmes de la vie, aussi bien
dans des domaines professionnels que pour des applications personnelles. Et leurs méthodes
de conception et de développement ont vu l'avènement d'autant de technologies qui facilitent
leur mise en place et leurs donnent des possibilités et des fonctionnalités de plus en plus
étendues

L'évolution de l'informatique et l'apparition de l'internet, ce phénomène d'interaction qui

offre des possibilités considérables et accroit les chances de communication à travers un lieu
virtuel qui regroupe des pages Internet présentées par des personnes ou des organisations c'est
le site web.

Le web permet de partager ses idées et ses domaines d'intérêt avec d'autres utilisateurs
partout dans le monde. Ainsi l'Internet est devenu un outil incontournable et même

4
indispensable pour le fonctionnement de bon nombre d'entreprise à travers le monde. Ceci est
du aux innombrables possibilités et opportunités qu'il offre à tout utilisateur.

2. Définitions: (les bases du WEB)

Avant d'aborder le langage HTML, rappelons quelques définitions et concepts liés aux
bases du Web.

 Réseau :
Machines connectées ensemble.

 Internet :

C’est un réseau informatique public (physique ou sans fil) qui :

Relie entre eux tous les terminaux ( ordinateurs, smartphones, tablettes, etc.)
connectés du monde entier et qui permet aux terminaux de
communiquer et de s’échanger de l’information entre eux. Cette
communication entre ordinateurs ou autres permet plusieurs
possibilités et offre une masse d’informations chaque jour plus
importantes dans des domaines comme la médecine, la science et la
technologie.
Rend accessibles au public des services comme :
 le courrier électronique ( transfert de mail ) ;
 Transfert de fichiers ;
 Le Web (World Wide Web),

L’utilisateur d’Internet est appelé internaute, ou, moins couramment, mobinaute s’il
utilise un téléphone portable. L'accès à internet peut être obtenu par des FAI
(fournisseurs d'accès internet) via ADSL, fibre, câble, satellite, 3G+, etc.

Techniquement, Internet se définit comme le réseau public mondial utilisant

le protocole de communication IP (Internet Protocol).

NB : que signifie « protocole » ?

Ensemble normalise de règles décrivant la manière de transmettre

5
 des informations, par exemple sur un réseau comme Internet entre un client et un
serveur.

Internet est basé sur l’architecture client/serveur :

Les services Internet sont tous fournis par des serveurs.

 Serveurs :
Machines ( plus puissantes qu’un ordinateur de bureau ) conçues pour pouvoir offrir
des services à d’autres ordinateurs : e-mails, web, partage d’imprimantes, stockage de
données, etc.
Les serveurs sont gérés par des entreprises et fournisseurs d’accès à internet.
Un serveur est un dispositif informatique qui offre des services à des clients.
Les demandeurs du service sont nommés les clients.

 Client :
Un client est logiciel informatique qui fait des requêtes à un serveur.

Remarque : L’accès à l’information, du coté client, se fait via une interface

graphique : le navigateur Web.

 Navigateur Web :

6
 Un navigateur web, qui est l'application permettant de recevoir et d'afficher les
pages, Un navigateur web (browser) est nécessaire pour naviguer sur le web. Il fait

l’interface entre le client web et le serveur web. La barre d’adresse du navigateur

permet à l’utilisateur d’indiquer sous forme d’URL, l’adresse de la page web qui
veut voir afficher.

Un logiciel (serveur) permettant de répondre aux demandes envoyées sur le réseau.

 Les principaux types de sites internet :

 Site vitrine :

Le but du site vitrine est de présenter les produits et services d’une entreprise. Le site
vitrine se caractérise par un nombre de pages réduit (moins de 10 pages) et l’ajout d’un
formulaire de contact ou de demande de devis.

 Site institutionnel :

Le site institutionnel présente une organisation et existe principalement dans un

objectif d’image et de notoriété.

 Mini-site ou Landing Page :

La Landing Page constitue une page de destination. Elle est utilisée dans le cadre de
campagnes de communication et peut inclure des informations diverses en fonction de
l’objectif de la campagne : un formulaire, l’intégration avec un iFrame et tous types de
médias.

 Site catalogue :

Le rôle du site catalogue est d’informer les internautes sur les produits d’une
entreprise. Le site catalogue ressemble à un site e-commerce mais la différence

7
 fondamentale est qu’un site catalogue ne comprend pas d’option pour effectuer l’achat
d’un article.

 Site e-commerce :

Le but du site e-commerce est de permettre l’achat d’articles en ligne. Il peut

constituer la source de revenus principale d’une entreprise ou un complément de
revenu intéressant pour celle-ci.

 Web App :

Une Web App constitue un réel outil en ligne. On peut citer par exemple Google
Sheets et Google Doc qui permettent tous deux de créer des documents en ligne à
partir d’un navigateur.

 Blog :

Un blog peut constituer un site internet en lui-même ou être intégré sur un autre type
de site internet comme par exemple un site vitrine. Les contenus du blog sont
dépendants d’un CMS comme par exemple Wordpress.

 Intranet :

L’intranet permet à une entreprise de proposer une plateforme sécurisée à ses

employés ou ses partenaires. La particularité d’un intranet est qu’il n’est pas référencé
sur les moteurs de recherche et qu’il est nécessaire de s’identifier pour accéder à la
plateforme.

 Wiki :

Un wiki est une plateforme en ligne regroupant une base de connaissance relative à un
produit ou service. Il est parfois nécessaire de s’identifier pour pouvoir accéder à ses
contenus.

8
 Web : World Wide Web

Ensemble de données disponibles sur

les serveurs accessibles par Internet, pouvant
être visualisées et/ou utilisées avec un navigateur Web
et regroupées sous forme de pages et de sites.

HTTP (Hypertext Transfer

Protocol= protocole de transfert
hypertexte)

 Le WEB est l’abréviation de World Wide Web. C’est un système hypertexte (c’est-à-
dire qu’il permet d’établir des liaisons directes entre des éléments différents : texte,
image, etc.), qui fonctionne sur le réseau internet. Les pages disponibles sur le web sont
liées entre elles par des liens hypertextes, à l’image d’une toile d’araignée (d’où son
nom).

 HyperText :

Un document Hypertexte est un fichier de texte. Il contient dans son texte des "liens
Hypertexte " (renvois), soit vers d'autres parties de ce document, soit vers d'autres
documents. Ces documents peuvent être localisés sur le même ordinateur mais aussi
sur un autre ordinateur distant sur le réseau.

9
 Hyperlien :

Un lien Hypertexte ou Hyperlien est formé d'un mot (plusieurs mots) ou une image
mis en évidence : gras, souligné ou en couleur (ceci dépend du logiciel visualiseur) et
par l'adresse du document ciblé cachée derrière. A l'aide de la souris, le fait de cliquer
sur le mot a pour effet d'accéder ou de passer directement d’une page à une autre page,
mais également à un endroit précis (défini par une ancre) dans le document.

En fait, ce que nous appelons le WEB est une suite d'outils :

HTML (Hypertext Markup Language) permet de créer des pages,

HTTP (Hypertext Transfer Protocol= protocole de transfert hypertexte)

 HTTP :

 Désigne un protocole de communication entre un client et un serveur pour le

World Wide Web => est un protocole de type client-serveur ;
 C’est-à-dire en quelque sorte le langage utilisé pour communiquer sur le
réseau. Permet à un client web d’indiquer quelle page il veut obtenir, et au
serveur WEB de lui répondre en lui donnant cette page.
 Le protocole permettant d'échanger des pages Web au format HTML.

 HTTP est donc la langue dans laquelle le serveur et le client dialogue.

Remarque : Il ne faut pas confondre le web avec internet :

Internet = support de communication

l’internet est le réseau, les supports physiques de l’information. Pour faire simple,
c’est une ensemble de machines, de câbles et d’éléments réseaux en tout genre
éparpillés sur la surface du globe.

10
 Web = Le Web n’est qu’une des applications d’Internet (une partie
des contenus circulant sur l’Internet ou un des services
disponibles ou accessible sur Internet )

 Comment fonctionne le Web ?

C'est un mécanisme client-serveur.

Le client demande un fichier, le serveur lui donne tel qu'il est stocké.
processus statique

Figure : visualisation de la page

Le serveur peut aussi générer un fichier en fonction de la demande du client.

processus dynamique

Sur le web :

1) Le serveur s’appelle « serveur internet ». Le programme le plus utilisé est

Apache.
Serveur web  Un ordinateur qui héberge un site web sur Internet.

2) Le client s’appelle « navigateur », (ou bien browser, ou butineur). Les

programmes les plus utilisés sont : Chrome, Internet Explorer et Firefox, ...

11
 Usages du Web :

o Consultation simple : navigation, recherche d’informations

o Divertissement : TV, radio, musique, vidéo en ligne, jeux
o Communication : Webmail, Web chat, Webconférence
o Travail collaboratif : partage / édition de documents sur des intranets
o Autres sites participatif (blogs…)
o Réseaux sociaux
o Sites marchands, enchères
o Autres services en ligne : banque, administration…

Qui publie sur le web ?

 Universités
 Instituts et laboratoires de recherche
 Organisations publiques et internationales
 Sociétés commerciales
 Spécialistes
 Amateurs et passionnés

 Serveur web :
Un serveur web est un ordinateur hébergeant un ou plusieurs sites web.

Que signifie « Héberger » ?

« Héberger » signifie que toutes les pages web et fichiers associés sont localement
enregistrés ou stockés sur cet ordinateur. À la demande d'un utilisateur, le serveur
web transmettra la page web du site web hébergé au navigateur de l'utilisateur.

12
 Site web :
Un site web est un ensemble de pages web (elles-mêmes faites de fichiers HTML,
CSS, Javascript, etc.) reliées entre elles et traitant d'un même thème (personne,
entreprise, organisation ...). Un site Web est un ensemble de fichiers (page HTML,
images, PDF, son, vidéo, programme, animations). Et de dossiers, formant
l'arborescence du site.
Lorsqu’on développe puis on publie un site web, on met en réalité en ligne du contenu
sur internet.
La première page d'un site est la page d'accueil (Home page). Elle sert le plus souvent
de sommaire et indique le contenu du site, elle contient des liens hypertexte sur

lesquels il suffit de cliquer pour accéder aux autres pages (souvent appelé index.html,

index.php ou default.php)

Exemple :

Un site web est hébergé sur un serveur web appelé aussi serveur http parce qu’il
utilise le protocole (programme) http pour fournir des pages web en réponse à des
requêtes fournis par des clients web.
Pour naviguer sur le site web :
On peut cliquer sur les liens hypertexte (souligné et de couleur) ou sur une image
ou un dessin à zone sensible (le curseur prend la forme d'une main).
Ou bien, on peut saisir l'URL d'une page ou d'un site web dans la zone saisie
adresse du logiciel de navigation.

13
 Quelle est la différence entre un site web et un serveur web?

Attention à ne pas confondre site web et serveur web. Par exemple, si quelqu'un dit «
Mon site web ne répond pas », cela signifie en fait que le serveur web ne répond pas et
que, par conséquent, le site web n'est pas accessible. Par ailleurs, puisqu'un serveur
web peut héberger plusieurs sites web, le terme serveur web n'est jamais utilisé pour
désigner un site web, car cela serait une importante source de confusion. Ainsi, dans
l'exemple précédent, si on dit « Mon serveur web ne répond pas », cela signifie
qu'aucun site web de ce serveur n'est disponible.

 page web :
 Une page web est un document électronique qui est généré à partir d’un fichier
texte écrit dans un langage de programmation appelé HTML (HyperText Markup
Language), fichier qui porte une extension htm ou html et qui peut être consulté en
utilisant un navigateur Web (Google chrome, Firefox, Internet explorer ..etc).

 Une page peut contenir du : texte, des images, des graphiques, de la vidéo, des
animations, du son et des éléments interactifs tels que des formulaires à remplir
directement sur l'ordinateur.

 Chaque page possède une adresse unique, appelée URL (Uniform Ressource
Locator) pour identifier son emplacement sur le serveur (exemple :
http://www.google.fr/).

 Les pages web contiennent souvent des liens hypertextes (textes ou images) qui
renvoient sur d'autres pages web.

14
Exemple : de page web

Code HTML :

Sur écran :

 Quelle est la différence entre une page Web et un site Web?

Page web Site web

 Une page Web est un fichier, comme
celui-ci qui contient du texte, des images
et des liens à d'autres pages.
 Une page WEB est une page mise en
forme avec des liens hypertextes. La mise
en forme d'une page repose sur le HTML,
ce qui signifie Hyper Text Makup
Language.
 Un site Web est un regroupement de
pages sur un sujet, un thème, un
commerce, une organisation. Un site
Web a aussi une page principale.
C'est une page Web qui aide les
lecteurs à naviguer sur le site pour
trouver l'information voulue.

 Un site Web doit aussi être structuré.

Comment une page Web est-elle

15
 reliée à une autre? Y a-t-il un ou
plusieurs chemins ou parcours que
les lecteurs peuvent utiliser pour
naviguer à travers le site?

Exemple :

.Au début et à la fin de chaque page, il y a

plusieurs boutons de navigation pour passer
à la page précédente ou suivante.

Autres notions de base :

 Application web :

Une Application Web c'est un logiciel (interaction, traitement, base de données ..etc)
hébergé dans un serveur web, et qui utilise des pages web comme interface. On
accède à l'application web en utilisant un navigateurs Web. L'avantage des
applications web est qu'on na pas besoin d'installer l'application sur les PC des

utilisateurs, il utilisent un simple navigateurs web pour accéder à l'application.

Exemples :

• Certains services Google comme Google Maps, Gmail ou le moteur de

recherche sont des applications Web.
• Une gestion de réservation pour un hôtel.
• Une application de facturation en ligne pour une entreprise ou un commerçant.
• Un outil de gestion de dossiers patients pour un médecin.

16
 Développement front-end, back-end et full-stack :

 développement front-end :

En développement web, la notion de « front end » fait référence à l’ensemble des

éléments visibles et accessibles directement sur un site web (voire sur une application
web ou une application web mobile).
Il s’agit finalement des éléments du site que l’on voit à l’écran et avec lesquels on peut
interagir. Ces éléments sont composés de HTML, CSS et de JavaScript, contrôlés par
le navigateur web de l’utilisateur.

Front-end : interface.

 développement back-end :

17
«back-end » qui concerne toute la partie invisible de la conception d’un site web, tel que
le développement de bases de données, par exemple :

 Back-end : serveur

 développement Full Stack :

le développeur full-stack maîtrise les principales technologies et les principaux
langages de programmation actuels. Il est ainsi capable d’intervenir aussi bien sur le
front-end que sur le back-end des sites internet ou des applications.

 Full Stack : les deux

 Un hébergeur Web :
Un hébergeur web est une entreprise qui fournit l’hébergement sur internet de
systèmes informatiques divers, tels que site web, stockage d’information, messagerie
électronique à des personnes, associations, projets ou autres entités qui ne désirent pas
le faire par leurs propres moyens.
 Une agence Web :

18
 Une agence web ( aussi appelée agence digitale ou encore web agency) est une
entreprise spécialisé dans :
 la communication sur internet,
 la création de site internet,
 le développement web,
 le développement d’application mobile.
 Un annuaire Web :
Est un site Web répertoriant des sites Web( proposant une liste classée de site web ).
 Un portail Web :
Est une plateforme ou l’on trouve des ressources et des services pour les internautes.
Un portail web agit comme une passerelle vers le world wide web et fournit de
nombreux services. D’un autre coté, un portail est centré sur l’utilisateur, ce qui
signifie qu’un utilisateur peut probablement fournir des informations et des données.
La plupart des portails web exigent qu’un utilisateur se connecte, ce qui permet au site
de fournir un contenu et des services plus spécifiques en fonction de qui est cet
utilisateur
Exemple :
Portail YouTube : pour la recherche video,
Portail Amazon.com : pour les livres

 Un service Web : ( ou service de la toile)

Est une technologie client-serveur basée sur les protocoles du Web. Un service web
met à disposition un service via Internet. Il constitue ainsi une interface permettant à
deux machines (ou applications) de communiquer.

Exemple : Acheter en ligne

3. Fonctionnement d’un site web :

Un site web classique fonctionne sur un système Client-Serveur.

Ceci signifie qu'il existe des machines hébergeant l'information et fournissant l'accès (les
serveurs) et d'autres cherchant cette information (les clients). Dans le cas d'un site internet,

19
les pages composant le site sont stockées sur un serveur afin de permettre aux clients de les
consulter.

A notre niveau, nous distinguerons trois rôles :

 Le serveur : une machine qui héberge les pages d'un site .

 L'administrateur : personne qui crée et met à jour le site (le développeur ou
vous).
 Le client : personne qui consulte le site via Internet.

Lorsque vous aurez créé vos pages internet, il faudra les envoyer sur un serveur qui les mettra

alors automatiquement à disposition des clients.

Architecture
client/serveur :

Lorsqu’on connecte les ordinateurs en réseau, il devient intéressant de concentrer certaines

ressources (c'est-à-dire des informations et des programmes) sur un seul ordinateur, et de
permettre aux autres ordinateurs de se servir de ces ressources uniquement lorsqu’ils en ont
besoin. C’est l’architecture client-serveur.
Le serveur, c’est l’ordinateur sur lequel se trouve une ressource.
Le client, c’est l’ordinateur qui a le droit d’accès à la ressource sur le serveur

Une architecture client-serveur représente l’environnement dans lequel des applications de

machines clientes communiquent avec des applications de machines de type serveurs.

Exemple 1:

20
Le navigateur Web d’un client qui demande (on parle de “requête”) le contenu d’une page
Web à un serveur Web qui lui renvoie le résultat (on parle de “réponse”).

Exemple 2:

Si vous tapez taper l’adresse : URL : www.djezzy.dz/about.html

 Contact via internet du serveur : www.djezzy.dz

 Sur ce serveur, un logiciel (serveur Web) est toujours en écoute
 Dès réception de la demande, envoie de confirmation et de disponibilité
 Le serveur Web envoi le fichier demandé à votre navigateur.
Une fois le fichier reçu, votre navigateur utilise le programme HTML du
fichier about.html pour construire le document
 Le navigateur Web affiche le résultat sur votre écran.

4. Type de pages web :

 Page web statique :

 Les pages Web statiques affichent exactement les mêmes informations à
chaque fois que quelqu’un les visite (le contenu d'une page web statique est à
priori identique à chaque consultation).

 Les pages Web statiques sont très simples. Il est écrit dans des langages tels
que HTML, JavaScript, CSS, etc.

21
  les pages statiques ne contiennent pas uniquement du texte. Les pages web
statiques présentent toute forme de contenu comme des images, des
animations flash, des vidéos ou encore de la musique.
 La page du site statique reste ainsi inchangée jusqu’à ce que la personne
chargée de la développer décide de la mettre à jour en modifiant manuellement
le document HTML qui lui correspond.
 Pour les pages Web statiques, lorsqu’un serveur reçoit une demande de page
Web, le serveur envoie la réponse au client sans effectuer de processus
supplémentaire. Et ces pages Web sont vues via un navigateur Web.

 Page web dynamique :

 Une page web dynamique est une page dans laquelle les informations
générées sont à la demande de l’utilisateur de la page. Ainsi, deux utilisateurs
peuvent être simultanément sur la même page web sans pour autant avoir les
mêmes informations. Cela est possible grâce à la base de données associée à la
page dynamique.

 Le contenu d'une page web dynamique peut donc varier en fonction

d'informations (heure, nom de l'utilisateur, formulaire rempli par l'utilisateur,
etc.) qui ne sont connues qu'au moment de sa consultation.

 Cette page nécessite certains langages informatiques tels que : PHP, CGI, JSP,
ASP pour sa génération. On parle aussi de page sécurisée : c’est la définition
d’une page web dynamique.

22
5. Organismes de normalisation :

Le Web et le HTML existent depuis longtemps et vous ne pouvez pas vous rendre compte
que le langage dans lequel vous écrivez votre page Web a été normalisé par un groupe
d'environ 500 organisations membres du monde entier. Ce groupe est le World Wide Web
Consortium ou W3C.

• Le sigle W3C signifie « World Wide Web Consortium ». Il correspond en fait à un

organisme international coopératif et communautaire. C’est en fait un organisme de
normalisation chargé de promouvoir la compatibilité des technologies du web.

« un seul web partout et pour tous »

• Il est actuellement dirigé par Tim Berners-Lee créateur d’Internet.

• L’objectif final de cet organisme est de garantir la compatibilité des technologies du
World Wide Web (HTML, XHTML, XML, CSS, etc.

• Il s’agit d’une organisation mondiale régissant les grands standards techniques du

web. Son rôle est majeur afin de définir les mêmes règles pour les développeurs web
du monde entier.

23
6. Outils de développement Web :
Il existe effectivement de nombreux logiciels dédiés à la création de sites web. Vous aurez
besoin :

 D’un éditeur de texte : c’est un programme dédié à l'écriture de code. On peut en

général l’utiliser pour de multiples langages.

Exemple : quelques éditeurs de texte gratuits et les plus populaires,

Notepad ++ (Windows)

Atom (OS X, Windows, Linux)

CoffeeCup HTML Editor (Windows)

Brackets (Mac, Linux et Windows)

Visual Studio Code (Mac, Linux et Windows)

 D’un navigateur :
Le navigateur est le programme qui nous permet de voir les sites web.

le travail du navigateur est de lire le code HTML et CSS pour afficher un résultat
visuel à l'écran. Il existe de nombreux navigateurs différents. Voici les principaux à
connaître :

24
 Environnement de développement de HTML / CSS

Pour coder en HTML et en CSS et afficher le résultat de son code, un simple éditeur de texte
et un navigateur suffisent.

A.Téléchargement et installation du Navigateur Web :

1. Aller sur le site https://www.google.com/intl/fr/chrome/browser/

et cliquer sur le bouton bleu « Télécharger Google Chrome ».

2. Cliquer ensuite sur le bouton bleu « Accepter et installer » pour démarrer le

téléchargement.

25
3. Exécuter le téléchargement de ChromeSetup.exe.

4. Accepter par « Oui » le Contrôle de compte utilisateur.

5. L’installation dure quelques secondes et Google Chrome

démarre ensuite automatiquement. Une barre jaune

demande si vous souhaitez « Définir comme navigateur

par défaut » : les sites internet s’ouvriront donc toujours

avec Chrome. Valider ensuite par « Oui » .

B.Téléchargement et installation de l'éditeur de code :

Le navigateur va être utile pour afficher le résultat de notre code HTML. Cependant, avant
d’exécuter du code, il va falloir l’écrire et pour cela, nous allons avoir besoin d’un outil
indispensable qui est l’éditeur de code.

Exemple : NotePad++, VsCode, Sublime Text, Brackets, etc.

Utiliser un éditeur de texte tout simple que vous avez déjà, comme Bloc-notes. ce logiciel
suffit normalement à écrire des pages web en HTML, mais le mieux reste d'utiliser
un logiciel spécialisé qui colore votre code (très pratique) et qui numérote vos lignes (très
pratique aussi).

26
Il existe des centaines et des centaines de logiciels gratuits faits pour écrire des pages web :

Exemple :

 Editeurs de texte gratuits :

Notepad ++  Windows

Atom  OS X, Windows, Linux

CoffeeCup HTML Editor  Windows

Brackets  Mac, Linux et Windows

Visual Studio Code Mac, Linux et Windows

 Editeurs de texte payants :

PHPStorm.

Sublime Text

Coda

Remarque :

Que vous soyez sous Windows, Mac ou Linux, je vous recommande de commencer avec
l'éditeur Visual Studio Code qui est suffisamment léger et simple si vous débutez.

Je vous propose donc d'installer Visual Studio Code qui va nous permettre d'éditer nos
fichiers sources de manière efficace.

Visual Studio Code est un très bon éditeur, utilisé par de nombreux développeurs (y compris
des professionnels).

27
 Installation de l’éditeur Visual Studio Code

Étape 1 : Allez à la page de Microsoft Visual Studio Code sur Academic Software et cliquez

sur le bouton 'Télécharger Visual Studio Code' pour télécharger le logiciel.

Étape 2 : Ouvrez le fichier d'installation .exe dans votre dossier Téléchargements.

Étape 3 : Lisez et acceptez le contrat de licence et cliquez sur Next.

28
Étape 4 : Vous pouvez modifier l'emplacement du dossier d'installation ou conserver les

paramètres par défaut. Cliquez sur Next pour continuer.

Étape 5 : Choisissez de renommer le dossier des raccourcis dans le menu Démarrer ou de ne

pas installer de raccourcis du tout. Cliquez sur Next.

29
Étape 6 : Sélectionnez les tâches supplémentaires, par exemple: 'Create a desktop icon' (créer

une icône sur le bureau) ou ajouter des options au menu du clic droit de

l'explorateur Windows. Cliquez sur Next.

Étape 7 : Cliquez sur Install pour commencer l’installation du logiciel.

30
Étape 8 : Le logiciel est installé et prêt à l'emploi. Cliquez sur Finish pour finaliser

l’installation et lancer le logiciel.

31
Étape 9 : Lancer VsCode

Une configuration minimale est nécessaire :

 Allez dans extensions ( avec connexion internet ), faites la recherche sur les deux
extensions :

1. French language pack for visual studio.

2. Live server

 Cliquer sur Fichier-> Cocher ‘’ Enregistrement automatique’’

 Créer un dossier dans qui va contenir tous les fichiers de votre site web :

Important : Convention de nomination des pages :

1. Utiliser la casse en chameau (camel case) : les majuscules en début de chaque

mot dans le nom de la page.

Exemple : MaPremierePage.html

32
 2. Ne pas laisser d’espace dans les noms des répertoires

 sur le bureau par exemple :

Nom du dossier : HTML

 Ouvrir l’éditeur VSCODE puis cliquer sur Fichier-> ouvrir le dossier créer
( indiquer le chemin du dossier : HTML

33
  Cliquer sur le + pour créer un nouveau document nommé : index.html

1 : nouveau fichier dans ce dossier

2 : créer un sous dossier : HTML/ nom du sous dossier

34
 Créer votre première page HTML

Partie 1 :

Dans cette partie, nous allons créer une page HTML très simple qui affiche dans le
navigateur le texte suivant : ( dans cet exemple on ne va pas créer un dossier )

bonjour tout le monde

on va créer notre premier site web

1ière méthode :

Etape 1 :

Pour démarrer, la première étape va être de créer le fichier HTML qui contiendra votre code
HTML. Ce fichier devra avoir l’extension .html pour définir que c’est un fichier HTML.
Dans notre cas, nous le nommerons « index.html » mais pour débuter vous pouvez le nommer
comme vous le souhaitez tant que l’extension est .html : « test.html » ou « essai.html » par
exemple.

Important :

Lorsque votre site sera hébergé sur un serveur web, la page d’accueil de votre site devra être
nommée « index ». Vous pouvez considérer ce fichier comme le fichier principal de votre site
et il pourra avoir les extensions « .html », « .htm » pour les pages HTML. Parfois, vous verrez
des sites avec une page d’accueil en « index.php ». La différence provient du langage utilisé
pour construire la page d’accueil, ici c’est le PHP qui est un autre langage web.

Vous pouvez créer votre fichier HTML de la manière que vous souhaitez :

1. Ouvrez votre éditeur de code

35
2. Créez un nouveau fichier

36
Etape 2 :

Enregistrez-le avec le nom que vous voulez, de préférence dans un dossier qui contiendra tous
les fichiers de votre projet (exemple: projet_html).

37
 Vous obtenez :

2ième méthode :

a. Créer un dossier dans le bureau : exemple : projet_html

b. Glisser le dossier vers l’éditeur de code VSCODE, vous obtenez ce résultat :

c. Maintenant, On va faire un petit essai. Je vous invite à écrire ces deux lignes dans le
fichier : index.html

bonjour tout le monde

on va créer notre premier site web

38
d. Maintenant, enregistrons ce fichier. Pour cela, c'est très simple : comme dans tous les
programmes, vous avez un menu Fichier > Enregistrer (ou File > Save en anglais).

Ou bien  ctrl + S

Remarque : Si l’éditeur vous affiche cette boule, cela signifie que votre fichier n’a pas été

enregistré.

Ou bien : dans le menu « Fichier » vous cochez l’option :

39
e. Ouvrez maintenant l'explorateur de fichiers dans le dossier où vous avez enregistré votre
page (l'Explorateur sous Windows ou le Finder sous Mac). Vous y verrez le fichier que
vous venez de créer :

L'icône qui représente le fichier dépend de votre navigateur web par défaut, en général. Vous
pouvez y voir une icône de Firefox, de Chrome... ou un aperçu, comme ici. Faites simplement
un double-clic sur ce fichier et votre navigateur s'ouvre et affiche le texte que vous avez écrit.

Remarque :

• Le texte s'affiche sur la même ligne alors qu'on avait demandé à l'écrire sur deux
lignes différentes. En fait, pour créer une page web, il ne suffit pas de taper
simplement du texte comme on vient de le faire. En plus de ce texte, il faut aussi écrire
ce qu'on appelle des balises( tags ), qui vont donner des instructions à l'ordinateur
comme « aller à la ligne », « afficher une image », etc.
• Je vous invite à rajouter cette balise <br/> entre les deux lignes ou texte dans le même
fichier : index.html
Indication : l’élément < br> qui sert simplement à créer un retour à la ligne en
HTML

40
f. Maintenant, on va supprimer le contenu de ce fichier : on va présenter la structure d’un
document HTML

g. En mettant un point d’exclamation !, l’éditeur nous propose immédiatement la structure

HTML suivante :

Sinon , on peut taper uniquement : html et vous obtenez ce résultat :

Vous sélectionnez : html : 5

41
 A quoi ressemble un fichier HTML ?

REMARQUE :

Sachez que cette structure, c’est la structure qu’il faut employer lorsqu’on veut coder en
HTML.

 Maintenant on va agir sur le titre de notre page, au lieu de « document », on va écrire :

<title>première_page_ HTML</title>

42
Le résultat : sur le navigateur

Remarque :

43
  Sur le navigateur : le contenu a disparu, car dans le code HTML, il n’y a pas de contenu
( du texte à afficher), en revanche on a le titre de la page.  on vient d’agir sur le titre de
notre page.
 On va ajouter des commentaires à notre code : pour cela on utilise < !—le texte -->

Exemple :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--c'est le titre de la page-->
<title>première_page_html</title>
</head>
<body>

</body>
</html>

- Comment ajouter un logo a un titre d’une page ?

 Aller à Google chrome, vous tapez :

HTML 5

 Puis vous cliquez sur : image

44
 Avec le bouton droit de la souris vous cliquez sur : Enregistrer l’image sous

 Placez l’image à l’intérieur de votre dossier : projet_html, puis renommé l’image en

lui attribuant le nom : logo_html.png

45
  L’éditeur VSCODE met à votre disposition tout le contenu de votre dossier :
projet_html.

Le résultat : sur le navigateur

46
Partie 2 :

1- Taper ! puis entrée ou tabulation, Résultat (capture)? conclure

Cliquez sur : Entrée

Capture :

Conclure :

Ce code en HTML correspond à la balise "doctype". <!DOCTYPE> est utilisé pour

spécifier la version d'HTML ou XHTML utilisée dans un document. Cela indique au

navigateur comment interpréter et afficher correctement le contenu de la page.

2- Essayer avec les balises que vous connaissez puis entrée ou tab : par exemple : html
Entrée, div, a…..

47
 Cliquez sur : entrée

3- Positionnez le curseur sur une ligne du code, appliquer la combinaison de touche :

ALT+ ↑ puis ALT+↓. Résultat ?  MAJ + ALT+ ↑ puis Shift+ ALT+↓
4- Taper :
 ul> li*7. résultat ? (capture)
 nav>ul>li. Résultat (capture) ? conclure le rôle du symbole >
 div+p+bq. Résulat (capture)? conclure le rôle du symbole +
 div+div>p>span+em^bq. Résulat (capture)? conclure le rôle du symbole ^
 div>(header>ul>li*2>a)+footer>p. Résulat (capture)? conclure le rôle du
symbole ()
5- Les éléments (1-4) font partie de l’extension Emmet installée par défaut avec
VSCode.

48
Pour plus de documentation sur les abréviations possibles avec Emmet veuillez consulter le
lien : https://docs.emmet.io/cheat-shee

49