1

Compétence : créer un site web statique

Elément de la compétence 1 : Rassembler les informations
Objectif pédagogique 1: Construire un questionnaire
Leçon 1 : Elaboration d’un questionnaire.
Activité 1 : Définition d’un questionnaire
Un questionnaire est une série de questions méthodiquement posées afin de définir un cas, une
situation, une demande parmi un grand nombre de possibilités. Un questionnaire peut être
l'objet d'un formulaire, ou d'un jeu de menus informatiques. On peut le considérer comme
modèle d'un parcours administratif. Les questionnaires sont aussi des outils de recherche pour
les sciences humaines et sociales, en particulier la psychologie, la sociologie, le marketing et la
géographie.

Activité 2 : Etablissement d’un questionnaire

La mise en place d’un site Web nécessite de rédiger au préalable un
cahier des charges qui définisse les objectifs que le site doit remplir, propose une
analyse fonctionnelle. En complément, le cahier des charges va définir une charte
technique qui intègre les contraintes que le webmaster va rencontrer et une charte
graphique pour en normaliser la présentation. Au niveau des moyens il définira les
moyens humains techniques et financiers à mettre en œuvre, ainsi que le calendrier
deréalisation.
 Questionnaire de préparation de projet Web

Questions Générales :
 Quel est le nom de votre site Internet ?
 Quelle est l’adresse de votre site internet ?
 Quel est le nom de votre entreprise ?
 Quelles sont les informations pour contacter l’entreprise ?
 Quelles sont les heures de fonctionnement de votre entreprise ?
 Si vous n’avez pas encore de site internet, quel nom de domaine avez-vous à l’esprit
et quel service d’hébergement préférez-vous ?
 Quel est votre budget pour ce projet ?
 Avez-vous une date de lancement à l’esprit ?

Image de Marque

 Quelle image voulez-vous que votre site internet transmette ?

 Avez-vous une couleur particulière et des polices de caractères préférées ?
 Avez-vous déjà un logo ou un graphisme qui peut être u:lisé pour représenter votre
entreprise ? Si non, aimeriez-vous qu’il soit également créé ?
 Avez-vous déjà un slogan pour votre site internet ? (Par exemple, le slogan de Nike «
Just Do It »)
 Comment votre marque est-elle perçue par votre marché cible ?
 Quels sont vos principaux concurrents ?
 Quels sites sont similaires à ce que vous avez à l’esprit ?
 2

 Quelles sont les valeurs de votre marque ?

 Quel est l’énoncé de la mission de votre entreprise ?
 Voulez-vous une nouvelle image ou une nouvelle identité pour votre marque ?

Marketing

 Quels sont vos produits et services ?

 Qui est votre public cible ou marché ?
 Quel est le principal but de votre site Internet ? Créer des ventes ? Pour avoir de
nouveaux prospects ? Merci de préciser.
 Quelles sont les caractéristiques uniques de votre entreprise qui attireront les
visiteurs vers votre site internet ?
 Comment comptez-vous promouvoir votre site ?
 Quels mots clés voulez-vous u:liser sur votre site afin que les moteurs de recherche
vous trouvent rapidement ?
 Avez-vous besoin d’un espace pour de la publicité ? (En-tête, barre latérale ou
contenu)
 Est-ce que votre site inclut un appel à l’action ou une page de vente ?
 Quels sont les objectifs de votre site en termes de popularité sur internet ?

 Comment souhaitez-vous dialoguer avec vos visiteurs ? (réseaux sociaux, email, chat,
forum, blog, mailing list, catalogue en ligne)
 Souhaitez-vous que je me charge à terme de l’hébergement, la sécurité/maintenance
?

Contenu
 Quelles sont les principales catégories que vous désirez sur votre site ?
 Avez-vous besoin d’un CMS, un système de gestion de contenu ?
 Quelles fonctionnalités voulez-vous sur votre site internet ? (calendrier, forum, blog,
enquêtes, etc…)
 Avez-vous une source pour le contenu ? (photos / fichiers numériques)
 Avez-vous besoin de fonctions avancées comme une base de données ou du
développement ? (paniers de commande, formulaires de contact, newsleLer,…)
 Avez-vous l’intention de mettre un blog sur votre site internet ?
 Avez-vous des textes, graphismes, logos, musiques ou vidéos que vous voulez u:liser
pour votre site internet ?
 Combien de personnes mettront à jour le contenu de votre site internet ?
 Avez-vous besoin de plusieurs niveaux de droits d’édition ?

Mise en Page
 Devons-nous concevoir le site depuis le début ? Ou, allons-nous rajeunir votre site
internet existant ?
 Quels sites internet aimez-vous ? Merci d’en donner 5.
 Quels sites internet n’aimez-vous pas ? Merci d’en donner 5.
 Voulez-vous inclure du multimédia et du matériel marketing dans votre site internet ?
 Avez-vous des documents sur votre activité qui peuvent être combinés à la
conception de votre site internet ? (Cartes de visite,…)
 3

Synthèse :
Un questionnaire est une série de questions méthodiquement posées afin de définir un
cas, une situation, une demande parmi un grand nombre de possibilités.
Un questionnaire peut être l'objet d'un formulaire, ou d'un jeu de menus informatiques.
On peut le considérer comme modèle d'un parcours administratif.
Les questionnaires sont aussi des outils de recherche pour les sciences humaines et
sociales, en particulier la psychologie, la sociologie, le marketing et la géographie.
La mise en place d’un site Web nécessite de rédiger au préalable un
cahier des charges qui définisse les objectifs que le site doit remplir, propose une
analyse fonctionnelle. En complément, le cahier des charges va définir une charte
technique qui intègre les contraintes que le webmaster va rencontrer et une charte
graphique pour en normaliser la présentation. Au niveau des moyens il définira les
moyens humains techniques et financiers à mettre en œuvre, ainsi que le calendrier
deréalisation.

Exercices
1. Définir un questionnaire
2. Enumérez les questions générales de préparation de projet Web
3. Pourquoi faut –t-il établir un cahier pour concevoir un site web ?
4.
Réponse
 4

Objectif pédagogique 2: Mener un entretien avec le client

Leçon 2 : Présentation d’un questionnaire.

Activité 1 : Expression les besoins d’un questionnaire

Elle répond à la 1ere question, pourquoi faire un site. Cette étape de travail associe les
principaux responsables de l’organisme pour définir ensemble ce qu’ils attendent de la
réalisation du site. On va chercher à dégager les objectifs du projet, à mettre en lumière les
enjeux liés à sa réalisation, et les avantages attendus, par exemple :

 Le développement des échanges,

 Le partage des connaissances avec les partenaires,
 La réduction des coûts au niveau du management, etc …
L’objectif peut combiner ces deux approches :
EXTERNE
La volonté d’aboutir à une meilleure insertion dans un environnement local, professionnel et à
l’établissement de nouveaux liens avec des correspondants ou une meilleure visibilité publique
(objectif de promotion), une présentation du catalogue des produits et services de l’organisme,
etc…
INTERNE
Ce peut être une amélioration des mécanismes de prise de décision et des procédures de
fonctionnement de l’organisme, avec la mise en place d’outils comme une plate-forme de
formation, l’amélioration de la circulation de l’information.

Activité 2 : Remplissage d’un questionnaire.

Avant de se lancer dans l’opération, il convient de disposer d’ordres de grandeur qui permettent
d’apprécier l’ampleur du projet à réaliser, une première estimation des moyens à mettre en
œuvre et du calendrier de réalisation. Cette approche peut se faire avec des propositions de
scénarios nettement typés, par exemple une variante haute moyenne ou basse. Très souvent ces
variantes correspondent à la mise en œuvre de technologies différentes que l’on pourra
préciser : emploi de bases de données, serveur local ou hébergement externe.
 5

Synthèse :
L’expression des besoins
Elle répond à la 1ere question, pourquoi faire un site. Cette étape de travail associe les
principaux responsables de l’organisme pour définir ensemble ce qu’ils attendent de la
réalisation du site. On va chercher à dégager les objectifs du projet, à mettre en lumière
les enjeux liés à sa réalisation, et les avantages attendus, par exemple :
 Le développement des échanges,
 Le partage des connaissances avec les partenaires,
 La réduction des coûts au niveau du management, etc …
Avant de se lancer dans l’opération, il convient de disposer d’ordres de grandeur qui
permettent d’apprécier l’ampleur du projet à réaliser, une première estimation des
moyens à mettre en œuvre et du calendrier de réalisation. Cette approche peut se faire
avec des propositions de scénarios nettement typés, par exemple une variante haute
moyenne ou basse. Très souvent ces variantes correspondent à la mise en œuvre de
technologies différentes que l’on pourra préciser : emploi de bases de données, serveur
local ou hébergement externe.

Exercices
1. Pourquoi faire un site ?
2. Explique l’objectif d’élaboration d’un questionnaire.
3. Donner les éléments d’identification d’un questionnaire client.
4.
Réponse
 6

Objectif pédagogique 3:Estimer le coût d’achat prévisionnel

Leçon 3 : Analyse des données

Activité 1 : Identification des fonctions clés pour la mise en place d’un site web

Fonction Description et rôle

Il coordonne le projet et les équipes et prend les décisions dans le
Responsable
périmètre fixé par le plan projet. Il est responsable de la livraison dans les
du projet
délais attribués avec la qualité requise et le budget alloué. Enfin, il doit
résoudre les problèmes et conflits tout en assurant la communication et la
cohésion entre le client du projet et tous les membres de l’équipe de
réalisation. Quel que soit le type de site, cette personne doit avoir une
solide culture technique et marketing ainsi qu’une bonne connaissance de
l’ensemble des aspects d’un projet web : contexte financier,
hébergement, télécoms, fonctionnel, communication, aspect
organisationnel et exploitation. Elle doit aussi être capable de gérer une
équipe.

Chef de projet Il est en charge de la maîtrise d’œuvre technique. Il encadre les

technique ou ingénieurs, l’architecte web, et est responsable de tous les livrables
chef de projet techniques.
opérationnel
Un conseil en Il compare les coûts de fonctionnement et d’investissements (projet),
marketing et l’adéquation de la stratégie (ambitions) à la tactique (réalités
communication opérationnelles). Il s’occupe également des opérations d’animation et de
interactive promotion du site et est consulté sur la pertinence du contenu et de
l’agencement des informations.

Concepteur Il conçoit l’architecture interactionnelle, l’organisation des pages,

l’arborescence et la navigation du site en respectant les indications
webdesigner
graphiques, ergonomiques et structurelles.

L’ergonome collecte toutes les informations sur le comportement possible

Ergonome
des futurs internautes du site web. Il travaille étroitement avec le
webdesigner pour définir le type de navigation.

Le DA conçoit la charte graphique avec le webdesigner et définit la «

Directeur
personnalité » du site en tenant compte des capacités techniques du
artistique (DA)
public cible.

Formé aux principaux outils du marché (Flash, Dreamweaver, Photoshop,

Infographiste
Illustrator, Image Ready…), l’infographiste doit suivre les consignes du DA
et réaliser les éléments graphiques, ainsi que les templates des pages.

Rédacteur Il s’agit du responsable des contenus, de leur agencement et du style

/responsable d’expression. Le rédacteur doit structurer et adapter pour le Web le
 7

des contenus. contenu informationnel fourni par le client.

En fonction du besoin, l’équipe de développement réalisera de simples

Ingénieur/
intégrations « statiques » (découpage et intégration HTML / JavaScript) ou
développeur
de véritables développements dynamiques (modélisation de base de
web
données,interaction avec le site web en ASP, PHP, JSP, CGI...).

Il doit identifier les modules techniques du site (gestion des utilisateurs,

Architecte web
gestion du contenu…) en fonction des fonctionnalités définies par le plan
projet. Il est en charge du choix d’une solution du marché adaptée aux
besoins (solutions propriétaires type Broad vision, solutions J2EE,
solutions Microsoft…) et doit estimer les coûts et charges
d’implémentation de la solution retenue.

Il configure les serveurs (HTTP, Application, SMTP…) ainsi que les accès
Ingénieur
télécoms. En général, il fait partie de l’équipe du prestataire qui héberge
réseau
le site.

Il aide à la conception du site et à son évaluation (représentant ainsi

Chargé d’étude
l’interface entre la technique et la maîtrise
d’ouvrage). En amont du projet, il rédige les spécifications fonctionnelles.
En aval, il effectue les recettes et les différentes
formes de tests (tests de consolidation, tests de charges, tests de
visibilité…)
 8

Activité 2 : Représentation du cycle de vie d’un site Web.

 9

Synthèse :
 Les fonctions clés pour la mise en place d’un site web
 Le cycle de vie d’un site Web

Exercices
1. Expliquez le rôle d’un responsable du projet
2. Quels sont les principaux outils utilisés par un infographiste ?
3. Enumérez les phases du cycle de vie d’un site web

Réponse
 10

Leçon 4 : Etablissement du devis

Activité 1 : Définition du dévis pour la conception d’un site web

Le cahier des charges est une étape importante lors d'un projet web, il représente le besoin
exprimé du client. Pour définir le prix d'un site web, vous devez faire la liste des travaux à réaliser
et en estimer le temps.

Les tarifs sont à adapter selon :

 le type de site : un site vitrine n'est pas vendu au même prix qu'un site e-commerce.
 la solution utilisée : un site très spécialisé (développé en partant de 0 «from scratch») ne
sera pas vendu au même prix qu'un site développé avec l'aide d'un CMS.
 le client : un site pour L'Oréal n'est pas vendu le même prix que pour une jeune fille venant
de créer sa collection de bijoux la semaine dernière.
 le profil : un client très exigeant ou un client cumulant les problématiques « je ne sais pas ce
que je veux, j'ai besoin de conseil, on valide a plusieurs, je suis exigeant » sera facturé plus
chèr qu'un autre client.
 l'expérience : un développeur avec expérience, rapide et sûr de lui ne facturera pas le même
prix qu'un développeur débutant.
 le statut : un auto-entrepreneur (avec de faibles charges) ne facturera pas le même prix
qu'une société (agence web) qui a des coûts de structure (locaux), des salariés et des charges
beaucoup plus fortes.

Pour définir le prix d'un site web, l'idéal est d'en définir le temps en listant les prestations,
exemples : design - intégration - développement - référencement - commmunity management -
gestion de projet.

Activité 2 : Estimation budgétaire de conception d’un site web.

Cette section décrit tous les coûts induits par la réalisation du projet : les coûts humains,
matériels, de formation, de prestations. Il vous faut ici évaluer le plus précisément possible les
dépenses pour chacun des postes :
o l’élaboration du cahier des charges, voire des spécifications fonctionnelles ;
o le dépôt du ou des noms de domaine ;
o la création graphique ;
o la conception et la rédaction du contenu ;
o le développement de l’application ;
o la recette et les tests
o la mise en ligne et l’hébergement du site ;
o la ou les campagnes de promotion (publicité, communiqués de presse, marketing direct…) ;
o l’exploitation du site.

 Comment présenter votre estimation budgétaire ?

Il est fortement recommandé de présenter votre estimation budgétaire sous plusieurs formes
différentes afin de donner une visibilité globale sur les coûts engendrés par la création de votre
site web.
 11

 Premier aspect : l’estimation budgétaire par poste de travail

Cette vue budgétaire consiste à déterminer le temps passé par chaque membre de l’équipe sur le
projet, après y avoir associé pour chacun un taux journalier.
Cette démarche est indispensable pour prévoir les ressources

Exemple d’évaluation budgétaire par poste de travail pour la création d’un site web important

Charges en J /H Taux journalier Sous Total

Responsable Projet 215 5430 FBU 1167450 FBU
Responsable Technique 100 3200 FBU 320000 FBU
Conseil Marketing 100 3400 FBU 340000 FBU
Concepteur/Webdesigner 80 3800 FBU 300000 FBU
Ergonome 100 5300 FBU 530000 FBU
DA 60 5300 FBU 318000 FBU
Infographiste 80 4200 FBU 336000 FBU
Rédacteur 170 3200 FBU 544000 FBU
Ingénieur/Développeur 500 2500 FBU 1250000 FBU
Architecte web 50 6000 FBU 3000000 FBU
Chargé d’étude 190 5900 FBU 1121000 FBU
TOTAL 1645 48230 FBU 6530450 FBU

 l’estimation des charges par travaux et activités projet

Cette dernière décompose le projet en tâches, auxquelles est affectée la quantité appropriée de
jours pour leur réalisation.

Exemple d’estimation des charges par activité pour le même projet

 l’estimation des autres charges budgétaires

Il s’agit ici de lister l’ensemble des charges du projet, autres que celles relatives aux ressources
de l’entreprise : licences des logiciels, mise en place de l’hébergement, formations, audit de
sécurité, tests de charges, prestations externes.

Exemple d’estimation des autres charges budgétaires pour le même projet

 12

Autres charges budgétaires projet

Licence de développement 150000 FBU
Mise en place hébergement 80000 FBU
Audit de sécurité 100000 FBU
Tests de charges 120000 FBU
Agences de communication et relations presse 100000 FBU
Tests de consolidation 90000 FBU
TOTAL 640000 FBU

Synthèse :
Le cahier des charges est une étape importante lors d'un projet web, il représente le besoin
exprimé du client. Pour définir le prix d'un site web, vous devez faire la liste des travaux à
réaliser et en estimer le temps.
Les tarifs sont à adapter selon :
 le type de site
 la solution utilisée
 le client
 le profil
 l'expérience
 le statut
Comment présenter votre estimation budgétaire ?
Il est fortement recommandé de présenter votre estimation budgétaire sous plusieurs formes
différentes afin de donner une visibilité globale sur les coûts engendrés par la création de
votre site web.
Premier aspect : l’estimation budgétaire par poste de travail
Cette vue budgétaire consiste à déterminer le temps passé par chaque membre de l’équipe
sur le projet, après y avoir associé pour chacun un taux journalier.
Cette démarche est indispensable pour prévoir les ressources
l’estimation des autres charges budgétaires
Il s’agit ici de lister l’ensemble des charges du projet, autres que celles relatives aux
ressources de l’entreprise : licences des logiciels, mise en place de l’hébergement,
formations, audit de sécurité, tests de charges, prestations externes.

Exercices
1. En quoi consiste l’estimation budgétaire par poste de travail ?
2. Expliquez les paramètres qui permettent d’adapter les tarifs lors de la réalisation d’un site
web
3. Citez les acteurs intervenant dans l’évaluation budgétaire par poste de travail pour la
création d’un site web important.

Réponse
 13

Elément de la compétence 2 : Concevoir un site web statique

Objectifs pédagogique1 : Identifier les outils de conception d’un site web statique.

Leçon 5 : Présentation des outils logiciels de conception d’un site web

Activité 1 : Définition d’un outil logiciel de création de site web

Un logiciel de création de site web est comme son nom l’indique un outil permettant de créer et
de modifier facilement les différentes pages d’un site web. On utilise aussi l’expression de CMS,
pour Content Management System, pour qualifier ce type d’outil, utilisé aujourd’hui par près de
50% des sites web dans le monde.

Concrètement, ces logiciels permettent de disposer d’une interface en ligne à partir de laquelle il
est possible de créer, modifier et organiser les pages du site web sans aucune connaissance en
programmation informatique. En utilisant des technologies WYSIWYG, ces logiciels permettent
au gestionnaire du site de rajouter un article, de modifier l’organisation de la barre latérale ou de
rajouter un widget twitter sans voir la moindre ligne de code.

Activité 2 : Les outils logiciels de conception d’un site web

Les outils logiciels de conception d’un site web sont :
 Dreamweaver
 FrontPage
 HomeSite
 Cold Fusion
 GoLive
 PageMill
 HomePage
 Drumbeat
 WebEditor
 HotDog
 HotMetal
 Visual Page
 Cyberstudio
 Site Designer
 Photoshop
 Pain shop Pro
 Le GIMP
Activité 3 : Le rôle de chacun outils logiciels de conception d’un site web
Outils logiciels Définition et rôle
Dreamweaver Adobe Dreamweaver CC est une application de conception et de
développement Web qui utilise à la fois une surface de conception visuelle
appelée Vue en direct et un éditeur de code doté de fonctionnalités
standard telles que la coloration syntaxique, la complétion du code et la
réduction du code, ainsi que des fonctionnalités plus avancées telles que
la vérification de la syntaxe et introspection du code pour générer des
indicateurs de code afin d'aider l'utilisateur à l'écriture du code. Combiné
à un éventail d’outils de gestion de sites, Dreamweaver permet à ses
utilisateurs de concevoir, coder et gérer des sites Web, ainsi que du
 14

contenu mobile. Dreamweaver est un outil IDE (Integrated Development

Environment). Vous pouvez en direct aperçu des modifications pour le
frontend. Dreamweaver se positionne comme un outil de conception et
de développement Web polyvalent permettant de visualiser le contenu
Web pendant le codage.
FrontPage Microsoft FrontPage (Microsoft Office FrontPage) est un logiciel
propriétaire qui fut inclus dans la suite Microsoft Office entre 1997 et
2003. C'est un logiciel de création de page Web de type WYSIWYG,
permettant de travailler avec le code HTML, fonctionnant sur les systèmes
d'exploitation Windows.
HomeSite HomeSite était un éditeur HTML initialement développé par Nick
Bradbury. Contrairement aux éditeurs HTML WYSIWYG tels que FrontPage
et Dreamweaver, HomeSite a été conçu pour l'édition directe, ou " codage
à la main ", de HTML et d'autres langages de sites Web.
Après un partenariat fructueux avec la société pour la distribuer aux côtés
de son propre logiciel Dreamweaver, HomeSite a été acquis par
Macromedia en 2001, après quoi des éléments du logiciel ont été intégrés
à Dreamweaver. À la suite de l’acquisition de Macromedia par Adobe
System, la société a annoncé le 26 mai 2009 que HomeSite serait
abandonné.
Cold Fusion Adobe ColdFusion est une plate- forme commerciale de développement
rapide d'applications Web créée par JJ Allaire en 1995. Le langage de
programmation utilisé avec cette plate-forme s'appelle également
couramment ColdFusion, bien qu'il soit plus précisément appelé CFML. À
l'origine, ColdFusion était conçu pour créer il est plus facile de connecter
de simples pages HTML à une base de données. Avec la version 2 (1996), il
est devenu une plate-forme complète comprenant un IDE en plus d’un
langage de script complet.
GoLive Adobe GoLive était un éditeur WYSIWYG HTML et une application de
gestion de sites Web de Adobe System. Il a remplacé Adobe PageMill en
tant qu'éditeur HTML principal d'Adobe et a lui-même été abandonné en
faveur de Dreamweaver. La dernière version de GoLive publiée par Adobe
était GoLive 9
PageMill PageMill est un éditeur HTML WYSIWYG développé par Adobe System.
Seneca Inc. a développé les produits originaux PageMill et SiteMill. Au
cours des tests en version bêta ouverte, Adobe a acquis la société et a
renommé le produit avec son propre logo. Adobe a publié PageMill 1.0 à
la fin de 1995. Il était considéré comme révolutionnaire à l'époque, car il
s'agissait du premier éditeur HTML jugé convivial, cité comme le "
PageMaker du WWW". Cette première version, cependant, a également
été critiquée pour le manque d'éléments tels qu'un correcteur
orthographique et le support pour la création de tableaux HTML. Adobe a
acquis Seneca en 1996.
HomePage Home page appelé également Une page d'accueil ou une page de
démarrage est la page Web initiale ou principale d'un site Web ou d'un
navigateur. La page initiale d’un site Web est parfois appelée page
principale
 15

HotMetal HoTMetaL est l'un des premiers logiciels commerciaux d’authoring HTML,
publié en 1994 par SoftQuad Software de Toronto, au Canada.
Basé sur le moteur SGML de SoftQuad Author / Editor, HoTMetaL est sorti
avec une version gratuite (HoTMetal Free) et une version professionnelle
(HoTMetaL Pro). Il y avait aussi une version "légère". Il a reçu le prix du
choix des rédacteurs de PC Magazine en 1995, ainsi que divers autres prix.
Cependant, le port sur la plate-forme Mac a été considéré comme mal
exécuté.
Visual Page The Visual Page Builder Novice appelé aussi novice constructeur de page
visuel: La création de pages est très simple dans ce thème, car vous
utiliserez Visual Builder et tous les codes courts qui l’accompagnent.
Cyberstudio Cyber Studio CAD-3D (ou tout simplement CAD-3D) est un logiciel de
modélisation et d’animation 3D développé par Tom Hudson pour
l’ordinateur Atari ST et publié par Antic Software. Le package est un
précurseur de 3D Studio Max CAD-3D est un programme de base de
modélisation et de rendu 3D polygonale.
Site Designer Au carrefour des fonctions de directeur artistique, d'infographiste et
d'intégrateur web, le web designer conçoit le design graphique
d'un site internet, c'est-à-dire sa charte graphique. Il allie savoir-faire
technique et compétences créatives.
Photoshop Photoshop est un logiciel de retouche, de traitement et de dessin assisté
par ordinateur, lancé en 1990 sur MacOS puis en 1992 sur Windows.
Édité par Adobe, il est principalement utilisé pour le traitement des
photographies numériques, mais sert également à la création ex nihilo
d’images.
Il travaille essentiellement sur images matricielles car les images sont
constituées d’une grille de points appelés pixels. L’intérêt de ces images
est de reproduire des gradations subtiles de couleurs.
Pain shop Pro Paint Shop Pro (PSP) est un logiciel de traitement d'image et d'édition
graphique (bitmap et vectoriel) créé dans les années 1990 par Jasc
Software.
GIMP GIMP (GNU Image Manipulation Program), ou The GIMP (/gimp/), est un
outil d'édition et de retouche d'image, diffusé sous la licence GPLv3
comme un logiciel gratuit et libre. Il en existe des versions pour la plupart
des systèmes d'exploitation dont GNU/Linux, macOS et Microsoft
Windows.
Le logiciel est intégré à la liste des logiciels libres préconisés par l’État
français dans le cadre de la modernisation globale de ses systèmes
d’informations (SI).

Synthèse :
 Un logiciel de création de site web est comme son nom l’indique un outil permettant
de créer et de modifier facilement les différentes pages d’un site web. On utilise aussi
l’expression de CMS, pour Content Management System, pour qualifier ce type
d’outil, utilisé aujourd’hui par près de 50% des sites web dans le monde.
 16

 Les outils logiciels de conception d’un site web sont :

 Dreamweaver
 FrontPage
 HomeSite
 Cold Fusion
 GoLive
 PageMill
 HomePage
 Drumbeat
 WebEditor
 HotDog
 HotMetal
 Visual Page
 Cyberstudio
 Site Designer
 Photoshop
 Pain shop Pro
 Le GIMP

Exercices
1. Définir
a) Dreamweaver
b) Photoshop
2. Donner le rôle de Frontpage
3. Donnez et définir un outil logiciel de conception d’un site web fonctionnant avec le
système d’exploitation Linux.

Réponses
1.
a) Dreamweaver :Adobe Dreamweaver CC est une application de conception et de
développement Web qui utilise à la fois une surface de conception visuelle appelée Vue
en direct et un éditeur de code doté de fonctionnalités standard telles que la coloration
syntaxique, la complétion du code et la réduction du code, ainsi que des fonctionnalités
plus avancées telles que la vérification de la syntaxe et introspection du code pour
générer des indicateurs de code afin d'aider l'utilisateur à l'écriture du code
b) Photoshop :Photoshop est un logiciel de retouche, de traitement et de dessin assisté par
ordinateur, lancé en 1990 sur MacOS puis en 1992 sur Windows
2. C'est un logiciel de création de page Web de type WYSIWYG, permettant de travailler
avec le code HTML, fonctionnant sur les systèmes d'exploitation Windows.
3. Un outil logiciel de conception d’un site web fonctionnant avec le système
d’exploitation Linux est GIMP.
GIMP (GNU Image Manipulation Program), ou The GIMP, est un outil d'édition et de retouche
d'image, diffusé sous la licence GPLv3 comme un logiciel gratuit et libre.
 17

Leçon 6 : Présentation des outils éditeurs de conception d’un site web

Activité 1 : Définition d’un éditeur de texte

Un éditeur de texte est un programme qui va nous permettre d’écrire des lignes de code et de
simplifier l’écriture de ce code en embarquant une panoplie de fonctionnalités utiles comme
l’auto-complétion de certaines commandes de code et etc. Un éditeur de texte ne doit pas être
confondu avec un outil de traitement de texte comme Word. L’éditeur de texte a véritablement
vocation à créer des pages de code dans n’importe quel langage comme le HTML, le CSS, le
JavaScript ou même encore le PHP en utilisant du texte brut tandis qu’un outil de traitement de
texte comme Word permet de créer du texte « enrichi » c’est-à-dire du texte mis en forme (choix
de l’alignement, de la police, du poids de celle-ci, etc.).

Activité 2 : Les outils éditeurs de conception d’un site web

Les outils éditeurs de conception d’un site web sont :

 Macromedia
 Microsoft Visual Code
 Atom
 Brackets
 Sublime Text
 Allaire
 FileMaker
 Namo
 Symantec
 Golive
 Netbeans
 Notepad++

Activité 3 : Rôle de chacun outils éditeurs de conception d’un site web.

Outils logiciels Définition et rôle

Macromedia Adobe Flash, ou Flash, anciennement Macromedia Flash, est un logiciel qui
ne sera plus mis à jour après fin 2020, permettant la manipulation de
graphiques vectoriels, d'images matricielles et de scripts ActionScript en
vue de créer des contenus multimédia (animations, vidéos, jeux,
applications...) destinés à être publiés sur Internet. Flash Player, développé
et distribué par Macromedia et racheté en 2005 par Adobe Systems, est
quant à elle, une application client fonctionnant sur la plupart des
navigateurs web. Ce logiciel permet la diffusion de flux (stream)
bidirectionnels audio et vidéo. En résumé, Adobe Flash est un
environnement de développement intégré (IDE), une machine virtuelle
utilisée par un lecteur Flash ou serveur Flash pour lire les fichiers Flash.
Mais le terme « Flash » peut se référer à un lecteur, un environnement ou
à un fichier d’application.
Allaire Homesite d'Allaire : un avantage de cet éditeur est qu'il peut éditer les
pages lorsqu'elles sont sur le serveur. Il est également disponible en
shareware.
 18

Microsoft Visual Microsoft Visual Code est le dernier éditeur à la mode parmi les
Code développeurs et ceci pour de bonnes raisons. Gratuit, il dispose de toutes
les fonctionnalités qu’un développeur peut attendre et d’une très bonne
ergonomie
FileMaker Filemaker : créer des pages avec cet éditeur est simple comme un jeu
d'enfant. FileMaker Pro est un logiciel de gestion de bases de données
développé par Claris (anciennement FileMaker Inc.1), filiale d'Apple. Le
logiciel fonctionne sous macOS et sous Windows, soit en réseau poste à
poste, soit en mode Client-serveur avec le module "FileMaker Server".
Sublime Text Sublime Text est un éditeur de texte générique codé en C++ et Python,
disponible sur Windows, Mac et Linux. Le logiciel a été conçu tout d'abord
comme une extension pour Vim, riche en fonctionnalités.
Atom Atom est doté d’une excellente ergonomie qui facilite grandement la prise
en main et l’approche du code pour les nouveaux développeurs. Cet
éditeur de texte dispose de toutes les fonctions qu’on attend d’un bon
éditeur : bibliothèques intégrées, auto-complétion des balises,
Brackets Brackets est un éditeur très particulier puisqu’il est tourné uniquement
vers les langages de développement front-end (c’est-à-dire HTML, CSS et
JavaScript). Cependant, il dispose d’une excellente ergonomie (UI / UX) et
d’un support extensif pour les langages supportés.
Netbeans NetBeans est une IDE open source qui peut vous aider à développer en
HTML5, en PHP, en JavaScript, en C++ et dans plusieurs autres langages.
Elle contient des modèles et des générateurs de code ainsi que des outils
de gestion intéressants pour les équipes et les projets plus importants.
NetBeans propose un large choix de plug-ins et encourage les
développeurs à créer et à partager les leurs. Sa dernière mise à jour
remonte à décembre 2018.
Notepad++ Notepad++ est un éditeur de texte libre générique, fonctionnant sous
Windows, codé en C++, qui intègre la coloration syntaxique de code source
pour les langages et fichiers C, C++, Java, C#, XML, HTML, PHP, JavaScript,
CSS, Pascal, Perl, Python, MATLAB, Assembleur, Lisp, ainsi que pour tout
autre langage informatique, car ce logiciel propose la possibilité de créer
ses propres colorations syntaxiques pour un langage quelconque.

Synthèse :
 Un éditeur de texte est un programme qui va nous permettre d’écrire des lignes de
code et de simplifier l’écriture de ce code en embarquant une panoplie de
fonctionnalités utiles comme l’auto-complétion de certaines commandes de code
 Les outils éditeurs de conception d’un site web sont :
 Macromedia
 Microsoft Visual Code
 Atom
 Brackets
 Sublime Text
 Allaire
 FileMaker
 19

 Namo
 Symantec
 Golive
 Netbeans
 Notepad++

Exercices
1. Définir
a. un éditeur de texte
b. Netbeans
2. Donner les langages de programmation qui peuvent utiliser Notepad++ comme éditeur et
compilateur
3. Donnez un éditeur de texte installé par défaut dans les systèmes d’exploitation Windows.

Réponses
 20

Objectifs pédagogique1 : Installer les outils de conception d’un site web

statique.
Leçon 7 : Installation et utilisation de Notepad++.
Activité 1 : Installation et configuration de Notepad++

Tout d'abord on recherche le site dédié à Notepad++

On télécharge la version 7.5.7 en 32 bits.

21
22
 23

Activité 2 : Utilisation de Notepad++

Menu « démarrer » → Tous les programmes → Notepad++ → Notepad++

On lance l’éditeur comme étant d’autre compilateurs et on navigue sur ces onglets souvent
utilisés en commencent par :
 Onglet file (fichier) : qui permet d’ouvrir un nouveau fichier existant et un fichier existant,
d’enregistrer un fichier sous un nom en définissant le langage de travail et de quitter
(.html ou.css)
 Edit (éditer) : pour couper, copier, coller, rétablir
 Sélection : pour tous sélectionner
 Project : pour ouvrir un projet, enregistrer et fermez

Découverte de l'environnement de travail :

Intéressons-nous à quelques éléments d'informations disponibles au sujet du document ouvert :

a)Le type de fichier. Par défaut, il est réglé sur fichier texte normal. Pour le modifier, on utilise le
menu « Langage ». Différents langages de programmation sont reconnus.
b) La longueur du document, en nombre de caractères (length) et en nombre de lignes (lines). Ici
le fichier vide est considéré comme contenant 0 caractère, mais déjà 1 ligne.
c) La position à laquelle se situe le curseur dans le document, en terme de lignes (Ln) et de
caractères (Col). Si un ensemble de caractères est sélectionné, le nombre de caractères
sélectionné est indiqué (Sel). Ici la position courante est 1ère ligne, 1er caractère.
d) L'encodage des sauts de ligne. En effet, il varie selon les systèmes d'exploitation. Pour le
modifier, on utilise le menu « Édition » → « Convertir les sauts de ligne ». Trois formats sont
disponibles : Windows, UNIX et Mac.
 24

e)L'encodage de caractère. Pour le modifier, on utilise le menu « Encodage ». À noter que l'on y
distingue deux sous-parties :
1)une première sous-partie permet de spécifier l'encodage du document courant pour en
corriger l'affichage.
2) une seconde sous-partie permet de modifier l'encodage du document courant.
f) Le menu « Fichier » permet d'ouvrir de nouveaux documents, de les enregistrer, de les
imprimer et de les fermer.
g) Le menu « Recherche » permet d'accéder aux différents modes de recherche et de manipuler
les signets. Nous nous intéressons ici au 1er mode de recherche et aux signets.

Synthèse :
 Les étapes d’installation de Notepad++
 On lance l’éditeur comme étant d’autre compilateurs et on navigue sur ces onglets
souvent utilisés en commencent par :
 Onglet file (fichier) : qui permet d’ouvrir un nouveau fichier existant et un fichier
existant, d’enregistrer un fichier sous un nom en définissant le langage de travail
et de quitter (.html ou.css)
 Edit (éditer) : pour couper, copier, coller, rétablir
 Sélection : pour tous sélectionner
 Project : pour ouvrir un projet, enregistrer et fermez

Exercices
1. Citez les étapes d’installation de Notepad+++
2. Donnez le rôle des onglets souvent utilisés en Notepad++
3. En Notepad++ ; Donnez le résultat des combinaisons suivantes :
Alt+F5
Alt+F2

Réponse
 25

Leçon 8 : Installation et utilisation d’un navigateur web.

Activité 1 : Définition d’un navigateur web.

Un navigateur web est un logiciel informatique qui permet d'utiliser le web. Pour être plus précis,
ce type de logiciel permet de consulter le World Wide Web (WWW). L'utilisation la plus
répandue de ces logiciels étant de visualiser les pages web et d'utiliser les liens hypertextes dans
le but d'aller de pages en pages.
Activité 2 : installation de Google chrome

 Ouvrir le navigateur Google Chrome au :

https://www.google.ca/intl/fr/chrome/browser/desktop/index.html.
 Cliquer sur « Télécharger Google Chrome ».
 Définir Google Chrome en tant que navigateur par défaut ou non, selon votre choix.
 Cliquer sur « Accepter et installer ».

 Cliquer sur « Enregistrer le fichier » lorsque cette boîte de dialogue apparaît.

 Aller en haut à droite de l’écran et cliquer sur la flèche de téléchargement des fichiers.

 Cliquer sur « ChromeSetup.exe » pour exécuter le programme dans la boîte qui s’ouvre.

 Cliquer sur « Exécuter » dans cette nouvelle boîte de dialogue.

 26

 Google Chrome peut être installé sans que l’utilisateur ne dispose des droits
d’administrateur, on peut donc cliquer sur « Non » si le système demande d’entrer un
nom et un mot de passe administrateur et continuer.

 On est à présent dans le navigateur Google Chrome.

 Au choix, configurer ou non Google Chrome en indiquant son adresse courriel et son
mot de passe.
 Il est possible de commencer à naviguer.

Activité 3 : Les types de navigateur web

Voici les différents navigateurs et leurs systèmes d’exploitation correspondant

Nom du Symbole du Système commentaires

Navigateur navigateur d’exploitation

Google Chrome Windows Le navigateur de Google,

Mac Simple d’emploi et très rapide

Linux

MozillaFirefox Windows Le navigateur de la fondation Mozilla,

célèbre et réputé.
Mac

Linux

InternetExplorer Windows,(Déjà Le navigateur de Microsoft, qui équipe

installé tous les PC sous Windows jusqu’à la

sur Windows) version 10.

 27

Edge Windows (Déjà Le nouveau navigateur de Microsoft,

installé sur qui équipe tous les PC à partir de
Windows 10)
Windows 10.

Il ressemble à Internet Explorer (les

logos sont proches), mais c’est une

toute nouvelle version

bien plus à jour. Edge es le remplaçant

d’Internet Explorer.

Safari Windows Le navigateur d’Apple, qui équipe tous

les Mac.
Mac

(Déjà installé

sur Mac OS X)

Opera Windows L’éternel outsider.

Mac Il est moins utilisé mais propose de

nombreuses fonctionnalités.
Linux

Synthèse :
 Un navigateur web est un logiciel informatique qui permet d'utiliser le web. Pour être
plus précis, ce type de logiciel permet de consulter le World Wide Web (WWW).
L'utilisation la plus répandue de ces logiciels étant de visualiser les pages web et
d'utiliser les liens hypertextes dans le but d'aller de pages en pages.
 Les étapes d’installation de chrome
 Ouvrir le navigateur Google Chrome au :
https://www.google.ca/intl/fr/chrome/browser/desktop/index.html.
 Cliquer sur « Télécharger Google Chrome ».
 Définir Google Chrome en tant que navigateur par défaut ou non, selon votre choix.
 Cliquer sur « Accepter et installer ».
 Cliquer sur « Enregistrer le fichier » lorsque cette boîte de dialogue apparaît
 Aller en haut à droite de l’écran et cliquer sur la flèche de téléchargement des
fichiers.
 28

 Cliquer sur « ChromeSetup.exe » pour exécuter le programme dans la boîte qui

s’ouvre.

 Cliquer sur « Exécuter » dans cette nouvelle boîte de dialogue.

 Google Chrome peut être installé sans que l’utilisateur ne dispose des droits
d’administrateur, on peut donc cliquer sur « Non » si le système demande d’entrer
un nom et un mot de passe administrateur et continuer.
 On est à présent dans le navigateur Google Chrome.
 Au choix, configurer ou non Google Chrome en indiquant son adresse courriel et
son mot de passe.
 Il est possible de commencer à naviguer.
 Les types de navigateurs
 Google Chrome
 MozillaFirefox
 InternetExplorer
 Edge
 Safari
 Opera

Exercices
1. Définir un navigateur Web
2. Donnez les navigateurs installés par défaut retrouvés dans Windows7, 8 et 10.
3. Parmi les navigateurs, lequel peut lire les documents PDF sous formes sonores

Réponse
 29

Objectifs pédagogique 2 : Exécuter la tâche de conception

Leçon 9 : Les versions du langage Html.
Activité 1 : Description du langage html

Le HTML (HyperText Markup Language ou « langage de balises hypertextes en français ») est un

format de présentation de données permettant de créer des pages web pouvant être lues dans
des navigateurs. C'est un langage de description de données, et non un langage de
programmation. Il s'agit d'un langage permettant de décrire la mise en page et la forme d'un
contenu rédigé en texte simple. Une page HTML est ainsi un simple fichier texte contenant des
balises (parfois appelées marqueurs ou repères ou tags en anglais) permettant de mettre en
forme le texte, les images, etc. Il est important de comprendre que le langage HTML est un
standard, c'est-à-dire qu'il s'agit de recommandations publiées par un consortium international :
le World Wide Web Consortium (W3C). Les spécifications officielles du HTML décrivent donc les
"instructions" HTML mais en aucun cas leur implémentation, c'est-à-dire leur traduction en
programmes d'ordinateur, afin de permettre la consultation de pages web indépendamment du
système d'exploitation ou de l'architecture de l'ordinateur. Toutefois, aussi étoffées les
spécifications soient-elles, il existe toujours une marge d'interprétation de la part des
navigateurs, ce qui explique qu'une même page web puisse s'afficher différemment d'un
navigateur Internet à l'autre.

Les avantages du langage HTML sont nombreux :

 peux coûteux en effet un simple éditeur de texte suffit à écrire ses premiers
documents HTML
 relativement facile à aborder,
 il représente en outre un bon moyen de dépasser les problèmes de compatibilité
entre des systèmes et des formats informatiques différents.
Activité 2 : les versions du langage HTML

 HTML 1 : c’est la toute première version créée par Tim Berners-Lee en 1991.
 HTML 2 : la deuxième version du HTML apparaît en 1994. C’est elle qui posera les bases
des versions suivantes du langage. Ses règles et son fonctionnement sont dictés par le
W3C (tandis que la première version avait été créée par un seul homme).
 HTML 3 : apparue en 1996, cette nouvelle version ajoute de nombreuses possibilités au
langage comme les tableaux, les applets, les scripts, le positionnement du texte autour des
images, etc.
 HTML 4 : cette version aura été utilisée un long moment durant les années 2000.Elle
apparaît pour la première fois en 1998 et propose l’utilisation de frames (quidécoupent
une page web en plusieurs parties), des tableaux plus complexes, des améliorations sur les
formulaires, etc.
 HTML 5 : c’est la version actuelle. De plus en plus répandue, elle fait beaucoup parler
d’elle car elle apporte de nombreuses améliorations comme l’inclusion facile de vidéos, un
meilleur agencement du contenu, de nouvelles fonctionnalités pour les formulaires.
 30

Synthèse :

 Les avantages du langage HTML sont nombreux :

 peux coûteux en effet un simple éditeur de texte suffit à écrire ses premiers
documents HTML
 relativement facile à aborder,
 il représente en outre un bon moyen de dépasser les problèmes de compatibilité
entre des systèmes et des formats informatiques différents.
 Les versions du HTML

Exercices
1. Citez les avantages du langage HTML
2. Répondre par vrai ou Faux
a. Le HTML est l’abréviation de Hyper Text Multiple Language.
b. Le HTML est un langage de programmation.
c. Une page HTML est un simple fichier texte contenant des marqueurs permettant de
mettre en forme les images.
d. Le HTML est un langage permettant de décrire la mise en page et la forme d'un contenu
rédigé en texte simple.

3. Relier par une flèche la version du langage HTML par la signification correspondante.

Réponse
 31

Leçon 10: Balises du premier niveau et Balises d’en tête du langage HTML.
Activité 1 : Définition de la balise HTML

Une balise est un élément de texte (un nom) encadrée par le caractère inférieur (<) et le
caractère supérieur (>). Par exemple ‘’ <H1> ‘’. Les balises HTML ne sont pas sensibles à la casse,
c'est-à-dire qu'elles peuvent être saisies indifféremment en minuscules ou en majuscules ! Les
balises HTML fonctionnent par paire afin d'agir sur les éléments qu'elles encadrent. La première
est appelée ‘’ balise d'ouverture ‘’ (parfois balise ouvrante) et la seconde ‘’ balise de fermeture ‘’
(ou fermante). La balise fermante est précédé du caractère /)

Il existe 2 types de balises :

 Les balises en paires : balise ouvrantes et fermantes

 Les balises orphelines : elles servent le plus souvent à insérer un élément à un endroit
précis.
Activité 2 : Les balises du premier niveau

Les balises de premier niveau sont les principales balises qui structurent une page HTML. Elles
sont indispensables pour réaliser le « code minimal » d'une page web.

Balise Description/rôle
<HTML>…</ Balise principal:Représente la racine d'un document HTML. Tout autre
HTML> élément doit être descendant de cet élément,Début et fin de fichier
Html.
<HEAD>...</HEAD> En-tête de la page:Fournit des informations générales (metadata) sur le
document, incluant son titre et des liens ou des définitions vers des
scripts et feuilles de style.Zone d'en-tête d'un fichier Html.
<BODY>...</BODY> Corps de la page:Représente le contenu principal du document HTML,
la partie affichée aux internautes.Début et fin du corps du fichier Html.

Activité 3 : Les balises d'en-tête

Ces balises sont toutes situées dans l'en-tête de la page web, c'est-à-dire entre <head> et
</head> :

Balise Description/rôle
<link /> Liaison avec une feuille de style: Spécifie les relations entre le document
courant et d'autres documents. Parmi les utilisations de cet élément, on
peut citer la définition de relations pour la navigation et le lien du
document avec une feuille de style.
<meta /> Représente toute information de métadonnées (charset, mots-clés, etc.) ne
pouvant être représentée par l'un des éléments consacrés aux
métadonnées (<base>, <link>, <script>, <style> ou <title>). Selon les
attributs qui sont renseignés.
 32

<script> L'élément HTML <script> est utilisé pour intégrer ou faire référence à un
script exécutable au sein d'un document HTML.
:Code JavaScript
<style> Contient les informations de style pour un document ou une partie de ce
document. Il faut mettre les informations de style à l'intérieur de cet
élément, normalement en utilisant le langage CSS. : Code CSS
<title> Titre de la page : Titre affiché par le navigateur

Activité 4 : La structure d'une page HTML simple

 En HTML, il existe deux éléments spéciaux qui n'ont pas de balise. Ces éléments sont
essentiels pour tout document HTML :
Le doctype
Le doctype (pour « type de document ») est une déclaration formelle, placée au tout début d'un
document HTML. Elle indique que le document est écrit avec du HTML standard. Le doctype
seprésente de cette façon :<!DOCTYPE html>
Si vous ne commencez pas votre document par <!DOCTYPE html>, les navigateurs afficheront
votre document en mode quirks. Le mode quirks est le mode utilisé par le navigateur pour
afficher les documents anciens ou malformés, écrits dans les années 1990 lorsque HTML était
peu (voire pas du tout) standardisé et que chaque navigateur gérait HTML à sa façon.
Les commentaires

Les commentaires sont des éléments très particuliers. Ce sont des notes que vous pouvez utiliser
pour annoter votre code HTML. Le navigateur n'affichera pas ces commentaires dans la page web
(cependant, le code source peut être lu par n'importe qui et les commentaires seront donc publics
comme le reste de la page).

En HTML, les commentaires sont écrits avec du texte contenu entre <!-- et -->
 Ouvrir l'éditeur de texte, Ecrire les codes Html suivants:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Titre </title>
</head>
<body>
</body>
</html>
 Enregistrer ce code avec l'extension .html ou .htm.
 Ouvrir le navigateur. - Afficher le document via le menu File/Open file... - Admirer votre
premier document Html.
 33

 Celui-ci est vide (et c'est normal) mais tout à fait opérationnel! Il faudra maintenant lui
fournir votre information à l'intérieur des balises <BODY></BODY>. Remarquez que votre
"TITLE" est présent dans la fenêtre du navigateur.
 Pour vos éventuelles modifications, il n'est pas nécessaire de rouvrir à chaque fois le
navigateur.
 Retourner dans l'éditeur de texte (sans fermer le navigateur).
 Modifier les codes Html.
 Enregistrer le fichier.
 Utiliser la commande Reload du browser ou si celui-ci est paresseux cliquer dans la barre
"Location" et faire "Enter".
Synthèse :
 Une balise est un élément de texte (un nom) encadrée par le caractère inférieur (<) et le
caractère supérieur (>). Par exemple ‘’ <H1> ‘’. Les balises HTML ne sont pas sensibles à
la casse, c'est-à-dire qu'elles peuvent être saisies indifféremment en minuscules ou en
majuscules ! Les balises HTML fonctionnent par paire afin d'agir sur les éléments
qu'elles encadrent. La première est appelée ‘’ balise d'ouverture ‘’ (parfois balise
ouvrante) et la seconde ‘’ balise de fermeture ‘’ (ou fermante). La balise fermante est
précédé du caractère /) :
Il existe 2 types de balises :
 Les balises en paires : balise ouvrantes et fermantes
 Les balises orphelines : elles servent le plus souvent à insérer un élément à un
endroit précis.
 Les balises de premier niveau sont les principales balises qui structurent une page
HTML. Elles sont indispensables pour réaliser le « code minimal » d'une page web.

Exercices
1. Donnez les types de balises
2. Complétez le tableau avec la balise correspondant :
Balise Description/rôle
Balise principal:Représente la racine d'un document HTML. Tout autre
élément doit être descendant de cet élément,Début et fin de fichier
Html.
En-tête de la page:Fournit des informations générales (metadata) sur le
document, incluant son titre et des liens ou des définitions vers des
scripts et feuilles de style.Zone d'en-tête d'un fichier Html.
Corps de la page:Représente le contenu principal du document HTML, la
partie affichée aux internautes.Début et fin du corps du fichier Html.

3. Ecrire le code html permettant d’afficher la page suivante :

 34

Réponses
Leçon 11: Les balises de structuration de texte du langage html

Activité 1 : Les balises de structuration de texte

Balise Description/rôle
<abbr> Abréviation
<blockquote> Citation (longue)
<cite> Citation du titre d'une œuvre ou d'un évènement
<q> Citation (courte):Indique que le contenu textuel de l'élément est une
citation courte. Cet élément est conçu pour contenir des citations
courtes ne nécessitant pas différents paragraphes
<sup> (pour Superscript) Représente un morceau de texte qui devrait être,
pour des raisons typographiques, sur une ligne plus haute et souvent
plus petit que le texte principal: Exposant.
<sub> (Pour Subscript) est utilisé, pour des raisons typographiques, pour
afficher du texte en indice (plus bas et généralement plus petit) par
rapport au bloc de texte environnant.
<strong> <strong> est utilisé pour donner de l'importance à un texte, cela se
traduit généralement par un affichage en gras.

<em>. Sert à marquer un texte sur lequel on veut insister

<mark> Mise en valeur visuelle

<h1> Titre de niveau 1
<h2> Titre de niveau 2
<h3> Titre de niveau 3
<h4> Titre de niveau 4
<h5> Titre de niveau 5
<h6> Titre de niveau 6
<img /> Utilisée pour insérer une image.
<figure> Figure (image, code, etc.)
<figcaption> Description de la figure
<audio> L'élément HTML <audio> est utilisé pour rajouter un contenu sonore
dans un document. Il peut contenir plusieurs sources audiointroduites
avec l'attribut src ou l'élément <source>. Le navigateur décidera lequel
utiliser. Du contenu alternatif peut aussi être ajouté pour les navigateurs
ne supportant pas cette fonctionnalité
<vidéo> > L'élément HTML <video> est utilisé pour intégrer des vidéos dans un
document HTML.
<a> Lien Lien hypertexte
hypertexte
<br /> Retour à la ligne
 35

<p> Nouveau paragraphe

<hr /> Ligne de séparation horizontale
<address> Adresse de contact
<del> Texte supprimé
<ins> Texte inséré
<dfn> Définition
<kbd> saisie clavier
<pre> Affichage formaté (pour les codes sources)
<progress> Barre de progression
<time> Date ou heure
<B> Texte en gras
<BIG> Agrandissement de la taille des caractères
<FONT Texte en couleur
color=colcod>
<FONT Taille des caractères où X est une valeur de 1 à 7
size=X>...</FO
NT>
<I> Texte en italique
<U>...</U> Texte souligné
<P halign peut avoir les valeurs center, left, right, justify
align=halign>

Activité 2 : Utilisation des balises de structuration du texte.

Les attributsTextes défilants :

Balise Les Attributs Valeurs d'attributs Explications

<marquee>
</marquee>
sera le nombre de
un chiffre <marquee
loop défilement infini par
loop="4">NYABIHARAGE </marquee>
défaut
définit le
comportement du
behavior
mouvement du
texte
alternate<marquee
défile d'avant en
behavior="alternate">COMMUNE
arrière
GITEGA</marquee>
slide<marquee défilement puis
 36

behavior="slide">COMMUNE
arrêt
GIHETA</marquee>
indique la direction
direction
du texte
left <marquee direction="left">COMMUNE par défaut c'est à
MUTAHO</marquee> gauche
right <marquee direction="right">COMM
vers la droite
BUGENDANA</marquee>
down <marquee
direction="down">COMMUNE vers le bas
BURAZA</marquee>
up<marquee direction="up">COMMUNE
vers le haut
RYANSORO</marquee>
valeur hexadécimal ou nom anglo saxon de
définit la couleur de
la couleur <marquee
bgcolor l'arrière-plan du
bgcolor="cccc00">COMMUNE
texte défilant
BUKIRASAZI</marquee>
pixel, ou pourcentage <marquee
hauteur du texte
height height="15%">COMMUNE
défilant
ITABAl</marquee>
pixel, ou pourcentage <marquee largeur du texte
width
width="50">BONJOUR</marquee> défilant
définit de combien
de pixels l'objet est
chiffre <marquee
scrollamount déplacé lors chaque
scrollamount="15">HELLO</marquee>
succession de
l'animation
définit la durée de
en milisecondes <marquee la pause entre 2
scrolldelay
scrolldelay="1000">SALUU</marquee> étapes de
l'animation

Synthèse :
Je retiens les fonctions des balises :
 37

 formater un texte en gras

 formater un texte en italique
 formater un texte souligné
 formater un indice
 formater un exposant
 formater un texte rayé
 formater un texte en couleur
 formater une police
 faire un retour à la ligne
 formater une ligne
 formater un paragraphe
 faire des titres avec l'atribut H

Exercices
1. Complétez le tableau suivant :

Balises Description/rôle
<img />
<figcaption>
Retour à la ligne
Nouveau paragraphe
Date ou heure
<B>
<em>.
2. Donnez les attributs de la balise <marquee>.
3. Créez une page Web (IT.html), qui comporte le titre <title> suivant : « TP Programmation
Web ». Le fond de la Page est de couleur GRIS «#CCCCCC ».
Créer un mot de bienvenue défilant avec couleur « KAZE IWABO N’INGOMA »

Réponses

Leçon 12: Les balises liste et balises du tableau du langage html

Activité 1 :Les balises listes
 38

Cette section énumère toutes les balises HTML permettant de créer des listes (listes à puces,
listes numérotées, listes de définitions…)
Balise Description/rôle
<ul> Liste à puces, non numérotée
<ol> Liste numérotée
<li> Élément de la liste à puces
<dl> Liste de définitions
<dt> Terme à définir
<dd> Définition du terme

Activité 2 : Les balises du tableau.

Les tableaux permettent de diviser la page en zones d'espace et de remplir ces zones avec des
objets (textes, images, couleurs), permettant un contrôle amélioré de la position des objets.Ces
tables peuvent avoir un fond et des bords visibles ou non.
Balise Description/rôle
<table> Représente des données en deux dimensions ou plus : Tableau
<caption> Titre du tableau
<tr> (pour Table Row) définit une ligne de cellules au sein d'un tableau. Ces
lignes peuvent mélanger des éléments <td> et des éléments <th>.
<th> (pour Table Header Cell) définit une cellule qui est un en-tête pour un
groupe de cellules du tableau.
<td> (pour Table Cell) définit une cellule d'un tableau contenant des
données. Il fait partie du modèle du tableau.
<thead> (pour Table Head) définit un ensemble de lignes définissant les lignes
d'en-tête des colonnes du tableau
<tfoot> (pour Table Foot) définit un ensemble de lignes résumant les colonnes
d'un tableau.
 39

Synthèse :
Listes
Listes à puces
<UL> peut prendre d'autres arguments, que voici:
 <UL TYPE=disc>
 <UL TYPE=circle>
 <UL TYPE=square>
Ceci change le type de puce devant chaque item.
Listes numérotées :
<OL> peut prendre d'autres arguments, que voici:
 <OL TYPE=i>Numérotation du type i, ii, iii...
 <OL TYPE=I> Numérotation du type I, II, III, IV...
 <OL TYPE=A>Numérotation du type A, B, C, D...
 <OL TYPE=a>Numérotation du type a, b, c, d...
 <OL START=5>Numérotation du type 5, 6, 7, 8...
Liste de définition
Les tableaux permettent de diviser la page en zones d'espace et de remplir ces zones avec
des objets (textes, images, couleurs), permettant un contrôle amélioré de la position des
objets. Ces tables peuvent avoir un fond et des bords visibles ou non.

Exercices
1. Donnez les arguments que peut prendre la balise <ul>.
2. Complétez le tableau suivant :
Balise Description/rôle
<table>
<caption>
(pour Table Row) définit une ligne de cellules au sein d'un tableau. Ces lignes
peuvent mélanger des éléments <td> et des éléments <th>.
(pour Table Header Cell) définit une cellule qui est un en-tête pour un groupe de
cellules du tableau.
<td>

<thead>
<tfoot> (pour Table Foot) définit un ensemble de lignes résumant les colonnes d'un
tableau.

3. Donnez la page qu’affiche le code suivant :

<!<DOCTYPE html>
<Html>
<Head>
<meta charset="utf-8" />
<Title>TP Programmation Web </title>
</Head>
<body bgcolor="#0099CC">
<CENTER>
 40

<TABLE WIDTH=50% border="1">

<TR>
<TD>Welcome</TD>
<TD>Bienvenue</TD>
</TR>
</TABLE>
</CENTER>
</Body>
</Html>

Réponse