Cours Bureautique

Pr.: B. CHERKAOUI
2 Plan du cours

I. Introduction à l’informatique
II. La bureautique
III. Introduction à HTML

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

3
Introduction à l’informatique: Qu’est-ce que l’informatique?

 L'informatique désigne l'automatisation du traitement de

l'information par un système, concret (machine) ou abstrait.
 Dans son acception courante, l'informatique désigne l'ensemble
des sciences et techniques en rapport avec le traitement de
l'information.
 Dans le parler populaire, l'informatique peut aussi désigner ce qui se
rapporte au matériel informatique (l’électronique), ou la
bureautique.
 L’informatique (en anglais computer science, ou computing
science), est l’étude des fondations théoriques de
l’information et du calcul et leur implantation et application
avec des ordinateurs.
Source: Wikipédia

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

4
Introduction à l’informatique: Le traitement de l’information

 L'informatique est la science qui regroupe l’ensemble des théories et

techniques permettant de traiter de l’information à l’aide d’un ordinateur.

Qu’est ce qu’un Ordinateur?

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

5
Introduction à l’informatique: Le traitement de l’information

 Un ordinateur est un équipement informatique

permettant de traiter des informations selon des
procédures.
 Un ordinateur sert avant tout, comme son nom l'indique,
à «ordonner» des données, à savoir les mettre en ordre,
les trier et les classer, selon une logique choisie.

Autrement dit: ce sont

des machines à calcul

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

6
Introduction à l’informatique: Historique…

Le boulier ou abaque (1000 avant J.C):

 Un système de boule, Inventé par les
Babyloniens, pour représenter les
doigts et mains afin d’effectuer les
quatre opérations : additions,
soustractions, multiplications et
divisions d’une manière purement
manuelle

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

7
Introduction à l’informatique: Historique…

La Pascaline (1642):
 Inventée par Blaise Pascal et
considérée comme la première
machine à calculer.
 Elle est créée spécifiquement pour le
père de Blaise Pascal, qui était
percepteur d’impôts.

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

8
Introduction à l’informatique: Historique…

La machine à différence (1834):

 C’est une calculatrice mécanique
conçue pour calculer des tables de
fonctions polynomiales. Son nom
dérive de la méthode des différences
finies, une façon d'interpoler des
fonctions en utilisant un petit nombre
de coefficients.

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

9
Introduction à l’informatique: Historique…

La machine de Turing(1940):
 Conçu principalement pour défier
ENIGMA durant la 2ème guerre
mondiale, est la plus élémentaire
possible destinée à mettre en œuvre
ces mécanismes de calcul,
numériques ou symboliques, comme
le font notamment les ordinateurs.

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

10
Introduction à l’informatique: Historique…

Ordinateur à Lampes (1950):

 Constitué de18000 lampes à vide, et
occupe une place de 1500 m2. Il fut
utilisé pour des calculs ayant servi à
mettre au point la bombe H. Son
principal inconvénient était sa
programmation.

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

11
Introduction à l’informatique: Historique…

XEROX ALTO(1974):
 Premier ordinateur à écran d’usage
personnel avec un clavier et une souris
de 3 bottons.
 L’Alto n’était pas un produit
commercial, mais elle fut diffusée à
grande échelle au sein de Xerox, dans
son PARC (Palo Alto Research Center)

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

12
Introduction à l’informatique: Historique…

INTEL(1981):
 Naissance de PC doté d’un
processeur INTEL 8086 de 16Ko de
RAM avec un MS-DOS développé par
Microsoft

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

13
Introduction à l’informatique: Historique…

IBM PC (1982):
 IBM PC, modèle 5150, est un
ordinateur personnel produit, à partir
de 1981
 IBM engage Microsoft pour créer le
logiciel pour mettre sur leur PC (64Ko
RAM)
 Plusieurs millions d'exemplaires vendus
par IBM

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

14
Introduction à l’informatique: Le traitement de l’information

1. Carte mère
2. Microprocesseur (CPU)
3. Le bus
4. Mémoire vive (RAM)
5. La carte graphique
6. Les entrées / sorties
7. Disque dur (HDD)
8. Lecteur de disque
9. Alimentation
10. Moniteur (Ecran)
11. Le Clavier
12. La Souris
Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI
15
Introduction à l’informatique: Système d’exploitation

 Le système d'exploitation (SE, en anglais Operating System ou OS)

est un ensemble de programmes responsables de la liaison entre les
ressources matérielles d'un ordinateur et les applications de
l'utilisateur (traitement de texte, jeu vidéos, etc.). Il assure le
démarrage de l'ordinateur, et fournit aux programmes applicatifs
des interfaces standardisées pour les périphériques.
 Un Système d'Exploitation est composé :
 Un noyau
 Bibliothèques dynamiques
 Outils système
 Programme applicatifs de base

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

16
Introduction à l’informatique: Système d’exploitation

 Le noyau:
 Gestion des périphériques via les pilotes (Drivers)
 Gestion des processus: attribution de la mémoire,
ordonnancement et synchronisation et communication entre les
différents processus.
 Gestion des fichiers
 Gestion des protocoles réseau
 Les bibliothèques dynamiques regroupent les opérations les
plus utilisées dans les programmes informatiques afin
d’éviter la redondance des opérations dans les différents
programmes.

Remarque: Certains SE ne proposent pas de bibliothèques dynamiques

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI
17
Introduction à l’informatique: Système d’exploitation

 Outils Système permettent:

 Configurer le système
 passer le relais aux applications proposant des services à un ou plusieurs
utilisateurs ou à d'autres ordinateurs.

 Les programmes applicatifs de base offrent des services

à l'utilisateur (calculatrice, éditeur de texte, navigateur
web, etc.)

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

18
Introduction à l’informatique: Matériel et logiciel

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

19
Introduction à l’informatique: Matériel et logiciels

 Catégories de logiciels:
1. Logiciel applicatif (i.e. Notepad)
2. Logiciel système (i.e. système d'exploitation)
3. Micrologiciel (firmware en anglais)

Logiciel

Libre
Propriétaire
(OpenSource)

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

20

II. Bureautique

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

21
Bureautique: Définition

 La bureautique est l'ensemble des techniques et

des moyens tendant à automatiser les activités
de bureau et, principalement, le traitement et la
communication de la parole, de l'écrit et de
l'image.
 La bureautique est un terme qui regroupe les
logiciels qui aident l’entreprise en terme de
création et gestion des documents, ainsi que la
gestion de données, statistiques et l’aide à la
présentation en réunion. Les outils de bureautique
sont très utilisés, voir indispensables pour les
professionnels.
Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI
 22
Bureautique: Définition

Microsoft Corporation The Document Foundation

LaTeX Project
Public License

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

23
Bureautique: Traitement de Texte (MS Word)

 Un logiciel de traitement de texte permet de :

 Saisir et enregistrer du texte
 Mettre en forme des documents (rapports de stages,
thèses, mémoires, etc…)
 Automatiser la présentation (table de matière
automatiques, index etc…)
 Associer avec des graphiques, images, feuilles de
calculs, résultats de requêtes etc…
 Corriger les erreurs d’orthographe et de grammaire

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

24
Bureautique: Traitement de Texte (MS Word)

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

25
Bureautique: Feuille de Calcul(Tableur Excel)

 Un tableur est un logiciel permettant de

manipuler des données numériques et
d'effectuer automatiquement des calculs sur des
nombres stockés dans un tableau. Il est ainsi
possible d'automatiser des calculs complexes
mettant en jeu un grand nombre de paramètres
en créant des tableaux appelés feuilles de
calcul..
 Il permet aussi de créer des représentations
graphiques (histogrammes, courbes, diagrammes
..) et permet de saisir et d’organiser de
nombreuses données
Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI
26
Bureautique: Feuille de Calcul(Tableur Excel)

 Microsoft Excel est le tableur de la suite

bureautique Microsoft Office. Pour le lancer,
cliquer sur l'icône appropriée du menu
Démarrer (sous Windows) ou bien cliquer sur
un fichier Excel (dont l'extension est .xls).
 Un document Excel est appelé classeur, il
contient une ou plusieurs feuilles de calcul,
présentes sous formes d'onglets en bas de
page.

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

27
Bureautique: Feuille de Calcul(Tableur Excel)

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

28
Bureautique: Feuille de Calcul(Tableur Excel)

Comme sous MS Word, vous pouvez :

Déplacer, couper, copier, rechercher des données
Vérifier l'orthographe.
Mettre en forme les données (couleur, police, etc...)
Insérer une image, etc.

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

29
Bureautique: Feuille de Calcul(Tableur Excel)

 Excel vous permet de créer de nombreuses formules en

effectuant une simple saisie dans une cellule ou en utilisant
le pointeur de la souris pour sélectionner les cellules à
inclure dans une formule. Par exemple, vous pouvez créer
des formules de base pour l'addition, la soustraction, la
multiplication et la division à l'aide de ces méthodes.

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

30
Bureautique: Feuille de Calcul(Tableur Excel)

 Pour effectuer un calcul dans un tableur, on utilise une

« formule de calcul » que l’on saisit à l’intérieur de la cellule
 Une formule de calcul commence toujours par le symbole =

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

31
Bureautique: Feuille de Calcul(Tableur Excel)

 Exemple:
1. Cliquez sur la cellule A1.
2. Tapez =7+8*3/2-4 et appuyez sur Entrée. Vous venez
d'entrer une formule.
3. Cliquez sur la cellule A1. Notez que le résultat de la formule
s'affiche dans la cellule, mais que la formule elle-même
apparaît dans la barre de formule (ci-dessous).

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

32
Bureautique: Feuille de Calcul(Tableur Excel)

 L'ordre des opérations: On se base sur l’exemple précédant

1. Cliquez sur la cellule A1 pour l'activer.
2. Cliquez dans la barre de formule.
3. Insérez des parenthèses autour de 7 + 8.
4. Insérez des parenthèses autour de 3 / 2.
5. Insérez des parenthèses autour de (7 + 8) * (3 / 2),
comme illustré ci-dessous. Appuyez sur Entrée.
Dans la cellule A1, le résultat devient 18,5.

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

33
Bureautique: Feuille de Calcul(Tableur Excel)

 Les opérateurs arithmétiques:

1. Somme : =C4+E7
2. Différence : =C4-E7
3. Produit : =C4*E7
4. Division : =C4/E7
5. Puissance : =C4^E7
6. Pourcentage : =C4/E7% idem que =C4/(E7/100)

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

34
Bureautique: Feuille de Calcul(Tableur Excel)

 L'ordre des opérations: On se base sur l’exemple précédant

1. Cliquez sur la cellule A1 pour l'activer.
2. Cliquez dans la barre de formule.
3. Insérez des parenthèses autour de 7 + 8.
4. Insérez des parenthèses autour de 3 / 2.
5. Insérez des parenthèses autour de (7 + 8) * (3 / 2),
comme illustré ci-dessous. Appuyez sur Entrée.
Dans la cellule A1, le résultat devient 18,5.

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

35
Bureautique: Feuille de Calcul(Tableur Excel)

Les références
La référence d’une cellule c’est le code qui nous permet de
l’identifier : A1, B3, C15, AA375 … Mais dans Excel, on ne
parle pas seulement de références, on parle de références
absolues, de références relatives et de références mixtes.

 Références de cellules relatives dans une formule:

 Une référence relative c’est une référence qui va varier
quand vous allez la recopier ; relative car les références ne
sont pas fixées.

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

36
Bureautique: Feuille de Calcul(Tableur Excel)

 Exemple: On se base sur l’exemple précédant

1. Cliquez sur la cellule B18.
2. Cliquez dans la barre de formule et remplacez 1 200 par la
cellule B3. Notez que la cellule B3 est mise en surbrillance et
entourée d'une bordure bleue lorsque vous modifiez la
formule (ci-dessous).
3. Appuyez sur Entrée. La formule de la cellule B18 utilise
maintenant une référence de cellule relative pour la
cellule B3.

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

37
Bureautique: Feuille de Calcul(Tableur Excel)

4. Copiez la cellule B18 dans la cellule B21. Le résultat affiché

devient 400.
5. Vous remarquerez que, dans la barre de formule, la formule
dans la cellule B21 est =B6+500-100, alors que
la formule que vous avez copiée est =B3+500-100. C'est
parce que la référence de cellule de départ, cellule B3,
a été remplacée par la cellule B6 quand vous avez copié
la formule trois cellules plus bas, et que la cellule B6 est
vide. La référence de cellule s'est ajustée par rapport
à sa position dans la feuille de calcul.
6. Une autre façon d'utiliser une référence de cellule consiste
à cliquer sur la cellule référencée pendant
la création ou la modification d'une formule. Avec la
cellule B21 toujours active, cliquez dans la barre de
formule, puis sélectionnez B6.
Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI
38
Bureautique: Feuille de Calcul(Tableur Excel)

7. Cliquez sur la cellule B3. La cellule B3 passe alors en

surbrillance et est entourée d'une bordure bleue en
pointillés, et la cellule B3 s'affiche dans la barre de formule
au lieu de la cellule B6. Appuyez sur Entrée.

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

39
Bureautique: Feuille de Calcul(Tableur Excel)

Les fonctions de calculs

 Pour les calculs « complexes », on peut utiliser une fonction
automatique.
 Une fonction automatique permet d’effectuer un calcul prédéfini
à partir de différents « arguments » qui sont les paramètres
d’utilisation de cette fonction.
 Pour utiliser une fonction prédéfinie, il suffit d’écrire la formule :
= nomdelafonction (arg1; arg2;…;argN)
 Exemple: la fonction SOMME
=SOMME(nombre1;nombre2;...)

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

40
Bureautique: Feuille de Calcul(Tableur Excel)

Les fonctions de calculs

Nom / Syntaxe Rôle Arguments
SOMME Additionne tous les nombre1, nombre2, ...
nombres contenus représentent de 1 à 30
dans une plage de arguments dont vous
voulez
=SOMME(nombre1;no cellules
calculer la valeur totale
mbre2;...) ou
somme

MOYENNE Renvoie la moyenne nombre1,nombre2, ...

(arithmétique) des représentent les 1 à 30
=MOYENNE(nombre1; arguments arguments numériques
dont
nombre2;...)
vous voulez obtenir la
moyenne

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

41
Bureautique: Feuille de Calcul(Tableur Excel)
Nom / Syntaxe Rôle Arguments
MIN Renvoie le plus nombre1, nombre2, …
petit nombre de représentent les 1 à 30
=MIN(nombre1;nombre2;... la série de nombres parmi lesquels
vous souhaitez trouver la
) valeurs
valeur minimale

MAX Renvoie le plus nombre1, nombre2, …

grand nombre représentent les 1 à 30
=MAX(nombre1;nombre2;.. de la série de nombres parmi lesquels
vous souhaitez trouver la
.) valeurs
valeur la plus grande
NB Détermine le valeur1,valeur2, ...
nombre de représentent les 1 à 30
=NB(valeur1;valeur2;...) cellules arguments qui peuvent
contenir ou référer à
contenant des
différents types de
nombres dans la données, mais seuls les
liste des nombres sont comptés
arguments
42
Bureautique: Feuille de Calcul(Tableur Excel)

Les fonctions de calculs

 Les fonctions de calcul Excel sont classées par catégories : statistiques,
mathématiques, logique, finance….

Logique Mathématique

Statistique

Texte …
Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI
43
Bureautique: Feuille de Calcul(Tableur Excel)

Gestion des plages de cellules

 Pour opérer sur de grandes quantités de données, les
fonctions de calcul (somme, moyenne, maximum…)
s’appliquent sur des plages de cellules.
 On appelle plage de cellules, un ensemble rectangulaire de
cellules contiguës, délimité par la cellule en haut à gauche
et la cellule en bas à droite.
 On note habituellement une plage par les références aux 2
coins séparés par le symbole « : ».

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

 44
Bureautique: Feuille de Calcul(Tableur Excel)

 Exemple:
 A1:A6 désigne les 6 premières cellules de la colonne A.
 B2:H2 désigne les cellules de la ligne 2 comprises entre les
colonnes B et H
 A1:D3 désigne les cellules contenues dans le rectangle entre
les coins A1 et D3 soit les cellules A1, A2, A3, B1, B2, B3, C1,
C2, C3, D1, D2 et D3.

Plage de cellule A1:D3

Plage de cellule B2:H2

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

45
Bureautique: Feuille de Calcul(Tableur Excel)
Tri des données
 Trier des données consiste à choisir une zone de données puis à en
trier les lignes (ou les colonnes) en fonction de l’ordre sur un ou
plusieurs critères – en ordre croissant ou décroissant selon la valeur
d’une ou plusieurs colonnes (ou lignes, si on trie des colonnes de
données).
 Trier des lignes de données permet de regrouper celles qui
partagent la même valeur dans une colonne particulière, si on
utilise cette colonne comme indice de tri.

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

46
Bureautique: Feuille de Calcul(Tableur Excel)

Filtre des données

 Filtrer des données consiste à sélectionner par un ou plusieurs
critères – les valeurs des colonnes sur lesquelles portent le filtre – les
lignes qui devront être visualisées et celles qui seront cachées.
 Filtrer permet de choisir de ne voir que telle partie des données, ce
qui peut s’avérer très utile pour commencer l’analyse d’un fichier
comportant beaucoup de données.
 Pour activer le filtre, sélectionner la plage des cellules contenant
les en-têtes de colonnes puis activer les filtres en cliquant
sur Données> Trier et Filtrer> Filtrer

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

47
Bureautique: Feuille de Calcul(Tableur Excel)

Création d’un graphique

Excel permet de créer facilement un graphique à
partir d’une série de données.
Le choix du type de graphique à utiliser :
histogramme, courbe, camembert ou radar, ne doit
pas être limité à de simples considérations
esthétiques.
La conception d’un graphique pertinent passe
d’abord par le choix des données à visualiser sans
oublier les entêtes de lignes et colonnes.

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

48
Bureautique: Feuille de Calcul(Tableur Excel)

Pour créer un graphique:

1. Sélectionnez les cellules qui contiennent les données
à utiliser pour le graphique.
2. Insertion > Graphiques > Choisissez le type de
graphique souhaité
3. puis cliquez sur le sous-type de graphique à utiliser.
4. Par défaut, le graphique est placé dans la feuille de
calcul sous la forme d’un graphique incorporé. Vous
pouvez le déplacer en le faisant glisser avec la
souris.
Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI
49

III. Introduction à HTML

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

50
Introduction à HTML: Historique

 1967 : Arpanet : réseau militaire

américain robuste aux pannes
 1973 : Apparition du TCP/IP
 1983 : Internet : Interconnexion
d’Arpanet et d’autres réseaux

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

51
Introduction à HTML: Historique

 Internet est le réseau informatique mondial

accessible au public.
 Le réseau Internet met en contact les utilisateurs
par le biais de leur matériel informatique respectif.
 Il existe plusieurs type de réseaux informatiques:
 PAN (Personal Area Network): un réseau informatique
restreint en matière d'équipements, généralement mis en
œuvre dans un espace d'une dizaine de mètres (réseau
domestique).
 LAN (Local Area Network): un réseau informatique qui
interconnecte des ordinateurs dans une zone limitée telle
qu'une résidence, une école, un laboratoire, un campus
universitaire ou un immeuble de bureaux.
Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI
52
Introduction à HTML: Modèle TCP/IP

Accès-réseau : liaison physique et de

données.
Internet : interconnexion des réseaux /
routage.
Transport : conversation.
Application : Telnet, TFTP, SMTP, HTTP.

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

53
Introduction à HTML: Couche applicative

Couche applicative: au sein de cette couche

se situent la plupart des programmes réseau:
HTTP : web
POP / SMTP : E-mail.
FTP / TFTP : transfert de fichiers.
DNS : correspondance entre noms et adresses IP.
DHCP: configuration des hôtes.
SSH : connexion à distance sécurisée.

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

54
Introduction à HTML: Couche applicative

Couche applicative: au sein de cette couche se situent la

plupart des programmes réseau:
HTTP : web
POP / SMTP : E-mail.
FTP / TFTP : transfert de fichiers.
DNS : correspondance entre noms et adresses IP.
DHCP: configuration des hôtes.
SSH : connexion à distance sécurisée.

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

55
Introduction à HTML: Web

Le protocole HTTP: Hypertext Transfer Protocol

 Un protocole de communication client-serveur développé pour le World
Wide Web.
 Un protocole de la couche application.
 Les clients HTTP les plus connus sont les navigateurs Web permettant à un
utilisateur d'accéder à un serveur contenant les données.

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

56
Introduction à HTML: Web

Fonctionnement du WEB
 C'est un mécanisme client-serveur: Le client demande un fichier, le serveur lui
donne tel qu'il est stocké – processus statique
 Le serveur peut aussi générer un fichier en fonction de la demande du client –
processus dynamique

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

57
Introduction à HTML: Web

Production sur le WEB

Définir le contenu
 Trouver une arborescence ergonomique
 Appliquer / Respecter la charte graphique
 Produire les pages
 Installer le site sur le serveur
 Maintenance, politique de mise à jour

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

58
Introduction à HTML: HTML

 HTML (HyperText Markup Language):

 Langage de balisage utilisé pour la création de pages web,
permettant notamment de définir des liens hypertextes.
 Son rôle est de gérer et organiser le contenu.
 HTML que vous écrirez ce qui doit être affiché sur une page web : du
texte, des liens, des images etc…
 CSS (Cascading Style Sheets, aussi appelées Feuilles de style) :
 Les feuilles de style en cascade, forment un langage informatique qui décrit
la présentation des documents HTML et XML.
 Son rôle est de gérer l'apparence de la page web (agencement,
positionnement, décoration, couleurs, taille du texte…).
 Ce langage est venu compléter le HTML en 1996.
Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI
 59
Introduction à HTML: HTML

1991 HTML first published

HTML 2.0
1995
Après la sortie de HTML 4.01, l'accent a été mis sur le
XHTML et ses normes plus strictes.
1997 HTML 3.2

1999 HTML 4.01 Le XHTML 2.0 avait des normes encore plus strictes que le
1.0, rejetant les pages web qui n'étaient pas conformes.
2000 XHTML 1.0 Il a progressivement perdu de sa popularité et a été
complètement abandonné en 2009.

2002
XHTML 2.0
HTML5 est beaucoup plus tolérant et peut gérer les
-
2009 balises de toutes les versions précédentes.

Bien que HTML5 ait été publié officiellement en 2012, il est en

2012 HTML5
cours de développement depuis 2004.

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

60
Introduction à HTML: HTML

 HTML 1 : Première version créée par Tim Berners-Lee en 1991.

 HTML 2 : Deuxième version du HTML apparu en 1994 et prend fin en
avec l'apparition du HTML 3.0. C'est cette version qui posera en fait les
bases des versions suivantes du HTML. Les règles et le fonctionnement
de cette version sont donné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 du HTML rajoute de
nombreuses possibilités au langage comme les tableaux, les applets,
les scripts, le positionnement du texte autour des images, etc.

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

61
Introduction à HTML: HTML

 HTML 4 : cette version aura été utilisée un long moment durant les
années Elle apparaît pour la première fois en 1998 et propose
l'utilisation de frames (qui découpent une page web en plusieurs
parties), des tableaux plus complexes, des améliorations sur les
formulaires, etc. Mais surtout, cette version permet pour la première fois
d'exploiter des feuilles de style, notre fameux CSS !
 HTML 5 : c'est LA dernière version. De plus en plus répandue, elle fait
beaucoup parler d'elle car elle apporte de nombreuses améliorations
comme la possibilité d'inclure facilement des vidéos, un meilleur
agencement du contenu, de nouvelles fonctionnalités pour les
formulaires, etc. C'est cette version que nous allons découvrir
ensemble.
Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI
62
Introduction à HTML: CSS

 CSS 1 : dès 1996, on dispose de la première version du CSS. Elle pose les
bases de ce langage qui permet de présenter sa page web, comme
les couleurs, les marges, les polices de caractères, etc.
 CSS 2 : apparue en 1999 puis complétée par CSS 2.1, cette nouvelle
version de CSS rajoute de nombreuses options. On peut désormais
utiliser des techniques de positionnement très précises, qui nous
permettent d'afficher des éléments où on le souhaite sur la page.
 CSS 3 : c'est la dernière version, qui apporte des fonctionnalités
particulièrement attendues comme les bordures arrondies, les
dégradés, les ombres, etc…

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

63
Introduction à HTML: Fonctionnement URL

 Mécanisme Client-Serveur:

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

64
Introduction à HTML: Fonctionnement URL

 URL (Uniform Resource Locator): est une chaîne de caractères uniforme

qui permet d'identifier une ressource du World Wide Web par son
emplacement et de préciser le protocole internet pour la récupérer.
Exemple: http://www.example.com/chemin/page.html?q=req
 HTTP: protocole
 www.example.com : hôte
 /chemin/ : chemin absolu sur le service
 page.html : nom de la page Web
 q=req : chaine de requête, transmise à la page

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

65
Introduction à HTML: Les principes HTML

 Il contient des commandes, implémentées par des balises pour

marquer les différents types de texte (titres, paragraphe, listes …) ,
pour inclure des images, des formulaires, des liens …
 C'est un langage à balisage qui décrit la structure logique d'un
document hypertexte.
 Le langage HTML permet de créer des documents interactifs grâce
à des liens hypertextes, qui relient votre document à d'autres
documents.
 En cliquant sur une zone de texte (ou une image, un logo) mise en
évidence, on peut accéder a un nouveau document situé sur un
autre ordinateur en n'importe quel point du globe.
Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI
66
Introduction à HTML: Ecrire des pages HTML

 Via un éditeur de texte:

❑ Bloc-note, Emacs ,WordPad …
 Via un logiciel « assistant » au code HTML
❑ PageSpinner sur MacOs, Amaya sur Unix, HTML-Kit sur
PC …
 Via un programme dit "WYSIWYG” (What you see
is what you get)
❑ Dreamweaver, Golive, Netscape composer, FrontPage,
Claris Homepage …
Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI
67
Introduction à HTML: Interpréter les pages HTML

 Le client doit pouvoir interpréter HTML et afficher le résultat. Ils sont

divers, tournant sur des systèmes différents:

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

68
Introduction à HTML: Principe de marquage

 Pour décrire un fichier hypertexte, le langage HTML insère des

balises dans le texte du document:
<balise> ici votre texte </balise>

Début de mise en forme Fin de mise en forme

 Ces balises peuvent être insérées n'importe où dans le texte, entre 2

phrases, mots, lettres …
<gras>Le <italique> cours </italique> HTML</gras>

Le cours HTML Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

69
Introduction à HTML: Principe de marquage

 Il faut respecter une logique d'imbrication:

Correct:

<gras><italique> Le cours HTML </italique></gras>

Incorrect:

<gras><italique> Le cours HTML</gras></italique>

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

70
Introduction à HTML: Principe de marquage

 Le langage HTML est sensible à la casse, toujours écrire en

minuscules.

Correct:

<gras><italique> Le cours HTML </italique></gras>

Incorrect:
<GRAS><italique> Le cours HTML </italique></GRAS>
<Gras><ITALIQUE> Le cours HTML </ITALIQUE></Gras>
<GRAS><ITALIQUE> Le cours HTML </italique></GRAS>

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

71
Introduction à HTML: Structure de base d'un fichier HTML

 <html> .. </html> : la balise

principale du code. Elle englobe
<html>
tout le contenu de votre page.
<head>
 <head> .. </head> : Entête du
document qui contient les méta- <title>Mon premier document html</title>
informations, ils ne sont pas </head>
affichés sur la page. <body>
 <title> . . </title>: Le Titre de votre Bonjour tout le monde
page car toute page doit avoir un
titre. </body>
</html>
 <body> . . </body>: Corps du
document. Tout ce que nous
écrirons ici sera affiché à l'écran.
Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI
72
Introduction à HTML: Structure de base d'un fichier HTML

Nom de la page

Titre

Contenu de la
page

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

73
Introduction à HTML: Organisation du texte

 Les balises de traitement du contenu:

Balise Signification
<p> … </p> Début et fin d’un paragraphe

<br> Saut de ligne

<h1> … </h1> <h2> … </h2> ….. Début et fin des titres de votre texte par ordre
d’importance (h1, h2, h3, … , hn) et sauter
une ligne
<em> … </em> ou bien Début et fin de zone en italique
<i> … </i>
<strong> … </strong> ou bien Début et fin de zone en gras
<b> … </b>
<mark> … </mark>

<u> … </u> Début et fin de zone souligné

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI
74
Introduction à HTML: Organisation du texte
Balise Signification
<center> … </center> Centrer le contenu

<font size=?> ... </font> Début et fin de zone avec cette taille

<font color="#$$$$$$"> ... </font> Début et fin de zone en couleur

Caractère Spéciaux Codage

Espace &nbsp;

© &copy;

é &eacute;

è &egrave;

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

75
Introduction à HTML: Organisation du texte

Les listes:
 On distingue entre deux types de liste:
 Liste non ordonnée(à puce): Une liste non numérotée est
définie de la même façon, sauf qu'elle est encadrée par les
balises <ul> et </ul>.
 Liste ordonnée(Numérotée):Une liste numérotée est délimitée
par les balises <ol> et </ol> entre lesquelles chaque élément
de la liste est délimité de la balise <li> et </li>.

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

76
Introduction à HTML: Organisation du texte

Les attributs des listes ordonnées

Attribut Rôle
start Définit l'indice à partir duquel les objets de la
liste sont numérotés
type Définit comment les nombres ordinaux
doivent être affichés:
A: Lettres majuscules
a: Lettres minuscules
i: Nombres romains en minuscules
I: Nombres romains en majuscules
1 : nombres
reversed Les objets listés par l'élément sont affichés
avec un ordre inversé

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

77
Introduction à HTML: Organisation du texte

Les listes imbriquées:

Ecrire un code en HTML afin de parvenir à afficher la liste suivante:

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

78
Introduction à HTML: Organisation du texte

Les liens hypertextes:

 Un lien hypertexte (ou hyperlien) est un envoi unidirectionnel
(dans un sens) vers un document électronique.
 Un clic sur un lien hypertexte permet de sauter entre différentes
parties textuelles d'un document ou entre différentes ressources
Web (interne ou externe)
 Les liens permettent de changer de page et sont, par défaut,
écrits en bleu et soulignés.

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

79
Introduction à HTML: Organisation du texte

 Les hyperliens sont implémentés en utilisant l'élément Anchor a

<a href="https://www.exemple.org"> Textedulien </a>
On distigue entre deux types d’hyperliens:
 Un lien interne est utilisé lorsque la hauteur (le défilement) de votre
page est plus grande que celle de l'écran.
 Un lien externe est utilisé lorsque vous voulez donner accès à une
ressource sur une page au sein du même site, ou une page sur un site
Balise hébergéRôle
sur le web.
<link> … </link> Utilisé exclusivement dans la zone d’en-tête (head) d’un document
HTML et permet de lier des documents HTML à d’autres ressources.

<a> … </a> Définit la position des hyperliens dans le corps HTML.

• href="Val" :chemin vers la page à afficher
• target="_blank" : Ouverture du lien dans une nouvelle fenêtre
Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI
80
Introduction à HTML: Organisation du texte

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

81
Introduction à HTML: Organisation du texte

Les images:
 HTML permet l’insertion des images au sein d’une page web via la balise
<img />
 Comme la balise <br />, elle ne peut avoir aucun contenu.
 La balise img s'utilise avec les attributs suivants :
Attribut Rôle
src (obligatoire) Définit le chemin vers le fichier image à afficher.

Alt (obligatoire) Précise un texte alternatif qui s'affichera si l'image ne peut s'afficher.

border Spécifie la largeur de la bordure de l'image (0 à n)

width et height Spécifie respectivement la largeur et la hauteur de l'image. Si ces attributs ne

sont pas renseignés, le navigateur calculera lui même la taille des images.
Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI
82
Introduction à HTML: Organisation du texte
Les tableaux:
 HTML permet de réaliser des tableaux avec réglage de
l'encadrement, de la taille et de l'espacement des cellules.
Chaque cellule peut contenir du texte, des listes, des images, des
liens hypertextes, des éléments de formulaire etc…
 Un tableau est décrit par différents balise :
 La balise <table>…</table> correspond au tableau lui-même.
 La balise <tr>…</tr> est utilisé pour définir chacune des lignes du
tableau.
 La balise <td>…</td> est utilisé pour chaque cellule.
 La balise <td> peut être remplacée par <th> si la case est un intitulé
de colonne. Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI
83
Introduction à HTML: Organisation du texte
<html>
<head>
<title>Mon premier tableau</title>
</head>
<body>
<table border=1>
<tr>
<td>Cellule 1</td>
<td>Cellule 2</td>
<td>Cellule 3</td>
</tr>
<tr>
<td>Cellule 4</td>
<td>Cellule 5</td>
<td>Cellule 6</td>
</tr>
</table>
</body>
</html>
Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI
84
Introduction à HTML: Organisation du texte
Balise Attributs possible

<table>…</table> o width: Précise la largeur du tableau via (entier ou un

pourcentage).
o cellpadding: détermine la marge d'une cellule. Cette marge est
la même de tous les cotés de chaque cellule. (entier).
o cellspacing: détermine la largeur en pixels entre chacune des
cellule (à l'extérieur de la cellule)(entier).
o border: Précise la largeur du trait des bords des cellules (entier)
o bgcolor: indique la couleur de fond du tableau
<td>…</td> o width: Précise la largeur de la cellule (entier)
o align: Précise l'alignement horizontal du texte (left, right, center)
o valign: Précise l'alignement vertical du texte (top, bottom,
middle)
o rowspan: Permet la fusion des lignes (entier)
o colspan: Permet la fusion des colonnes (entier)
o bgcolor: indique la couleur de fond de la cellule
Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI
85
Introduction à HTML: Organisation du texte
<html>
<head>
<title>Mon premier tableau</title>
</head>
<body>
<table border=1>
<tr> <td>Cel 1</td> <td>Cel 2</td>
<td>Cel 3</td> <td>Cel 4</td> <td>Cel 5</td>
</tr>
<tr> <td rowspan=2>Cel 6</td> <td>Cel
7</td> <td colspan=3>Cel 8</td> </tr>
<tr> <td>Cel 9</td> <td>Cel 10</td> <td
colspan=2 rowspan=2>Cel 11</td> </tr>
<tr> <td>Cel 12</td> <td>Cel 13</td>
<td>Cel 14</td> </tr>
</table>
</body>
</html> Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI
86
Introduction à HTML: Organisation du texte

Ecrire un code en HTML pour créer et remplir les tableaux suivants:

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

87
Introduction à HTML: Organisation du texte

Les frames(cadres):
 HTML permet de diviser l'écran du navigateur en plusieurs
zones. Chaque zone peut contenir une page html.
 Ce principe est surtout utilisé pour des barres de
navigations, des hauts de page (où sont placés des publicités
ou plus simplement le nom de la compagnie ou du site visité).
 Les frames tendent à se faire plus rares sur Internet:
o La mise à jour du site est plus difficile
o Accroissent sensiblement les temps de chargement pour les visiteurs

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

88
Introduction à HTML: Organisation du texte

 Dans le cas d'une page contenant deux frames, il faut au moins

trois fichiers (un fichier par cadre créé - son contenu) :
 L’élément <frameset>, celui qui répartit les cadres dans la fenêtre
 Deux fichiers HTML pour le contenu de chaque cadre
 L'élément FRAMESET:
 Il permet de définir le nombre de zones et leurs dimensions. Les
deux principaux attributs sont rows et cols.

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

89
Introduction à HTML: Organisation du texte

Les attributs de l’élément FRAMESET

Attribut Rôle
cols="pixels / %, crée des colonnes dont la largeur peut être spécifiée en pixels ou en
pixels / %" pourcentage de la fenêtre totale. il est possible d'indiquer le signe "*" pour
indiquer que la colonne occupe l'espace restant
rows="pixels / %, crée des cadres horizontaux (lignes). Il n'est pas possible d'utiliser cols et rows
pixels / %" dans le même frameset
framespacing=" indique l'espace entre les deux cadres.
pixels"
frameborder="pi Indique l’épaisseur de la bordure des cadres.
xels"
bordercolor Spécifie la couleur de la bordure des cadres

border="pixels" Spécifie l’épaisseur de la bordure entre les cadres.

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI
90
Introduction à HTML: Organisation du texte

Les attributs de l’élément FRAME

Attribut Rôle
Src indique le fichier initialement chargé dans la fenêtre.

name="texte" spécifie un nom pour la fenêtre créée. C'est particulièrement important car
vous ferez appel à ce nom lorsque vous voudrez charger un fichier dans
ladite fenêtre.
scrolling="yes / autorise ou non la présence de barre de défilement pour le cadre. "auto"
no / auto" laisse au navigateur le soin d'afficher des barres si besoin (c'est l'option par
défaut si rien n'est spécifié).
marginheight="p marges disposées en haut et en bas du cadre.
ixels"
marginwidth="pi marges disposées de chaque côté du cadre.
xels"

Cours Bureautique | EST Sidi Bennour | Pr. B. CHERKAOUI

Fin du cours
[email protected]