INFORMATIQUE

GÉNÉRALE

Prof. Efrem MBAKI LUZAYISU

[email protected]
Bonjour!
Je suis Efrem MBAKI LUZAYISU

 Licencié en Mathématiques (UNIKIN)

 Licencié en Informatique (FUNDP)
 Docteur en Sciences de l’Ingénieur (UCL)
OUTILS PEDAGOGIQUES:

- Exposés Théoriques (Ex-Cathédra)

- Exercices d’Auto-Formation (Web Campus)
- Travaux Pratiques
PROGRESSION
1. INTRODUCTION
2. INFORMATIQUE
3. TRAITEMENTS
4. ORDINATEURS

5. PROGRAMMATION WEB
6. HTML
1. INTRODUCTION (1/2)
• Cette formation s’adresse aux personnes
débutantes en Informatique
• Avec quatre OBJECTIFS :
1. Donner / Rappeler les définitions de base
(AXE THÉORIQUE)
2. Sensibiliser les Etudiants quant au progrès de
l’informatique dans leur domaine (AXE DE
SENSIBILISATION)
3. Expliquer le fonctionnement des machines
intelligentes (AXE DU RAISONNEMENT)
4. Faire de la programmation Web
(AXE DE L’IMPLÉMENTATION)
1. INTRODUCTION (2/2)
• Trois Outils pédagogiques :
1. Exposés Présentiels (Ex cathedra)
2. Exposés Virtuels et/ou Distanciels ( Vidéos,
Présentations commentées, Ressources ou
Activités (Evaluations Formatives) via le Web
Campus)
3. Travaux Pratiques et Evaluations Sommatives

• Paradigme Pédagogique :
LEARNING BY DOING
PROGRESSION
1. INTRODUCTION
2. INFORMATIQUE
3. TRAITEMENTS
4. ORDINATEURS

5. PROGRAMMATION WEB
6. HTML
2. INFORMATIQUE (1/8) - DÉFINITION

• Le terme « informatique » résulte de l'association

des trois premières syllabes du terme
« information » et des deux dernières syllabes du
terme « automatique »

• Deux champs d’application:

1. « Théorique » : Calculabilité, algorithmique,
Modélisation…
2. « Pratique » : Programmation, Interaction
(IHM),…
2. INFORMATIQUE (2/8) SCIENCE?

• Science ou Technique?
• N’est pas une Science des Ordinateurs!
• Définition :
SCIENCES DU TRAITEMENT AUTOMATIQUE ET RATIONNEL
DE L’INFORMATION PAR DES MACHINES

Input Traitement Output

Consultation
2. INFORMATIQUE (3/8) DONNÉE ET INFORMATION

• Le terme "donnée" (en anglais "data") est souvent

préféré au terme "information". Bien que ces deux
mots puissent être synonymes on les utilise
souvent comme s'ils désignaient deux concepts
distincts :
• Donnée = la forme de l'information, le code qui la
représente
• Information = signification, renseignement,
connaissance qu'elle apporte
2. INFORMATIQUE (4/8) TRAITEMENT

• Les informations traitées par l'informatique sont de

différentes natures ; des nombres, du texte, des
sons, des images, des clips vidéo etc. mais aussi
les instructions des programmes informatiques qui
traitent tous ces types d'informations.

• Le traitement de l'information est le processus de

changement de l'information de toute manière
détectable par un observateur
2. INFORMATIQUE (5/8) SUPPORT DE CONNAISSANCE

• Science du traitement automatique et rationnel de

l'information considérée comme support des
connaissances et des communications
• le support de la connaissance et non pas la
connaissance elle-même
• des tables, sortes de grilles où sont rangés les
codes destinés à représenter ces données.
L'ordinateur est incapable de savoir ce que
représentent ces codes mais cela ne l'empêche
pas de savoir les trier, y chercher un code
particulier, les compter, les comparer etc.
2. INFORMATIQUE (6/8) UNE SCIENCE

• L’Informatique est une science (lire Alain Cardon)

• L’informatique puisent ses sources des
mathématiques, de l’algorithmique, de la logique,
du raisonnement automatique
• L’informatique est la science des modèles
calculables et de leurs réalisations effectives
• L’Informatique Respecte les principes Logiques:
Identité, tiers-exclus, non-contradiction…)
2. INFORMATIQUE (7/8) UN LEVIER

• L'informatique est un domaine d'activité

scientifique, technique et industriel concernant le
traitement automatique de l'information via
l’exécution de programmes informatiques par des
machines : des systèmes embarqués, des
ordinateurs, des robots, des automates, etc.
• Informatique, un levier important pour toutes les
sciences, de la biologie à la physique et sans doute
même pour tout ce qui ne peut pas encore être
appelé science
2. INFORMATIQUE (8/8) NON, PAS RÉPARATATEUR

• L’informatique, la vraie, n’a pas beaucoup à voir

avec les bidouillages quotidiens sur notre
ordinateur
• La traduction anglaise Computer Sciences est
réductrice!!!

• En résumé: L'Informatique est à la fois

une Science ET un ensemble des techniques
et/ou des Outils au service de l’humanité
3. INFORMATIQUE
• Les machines numériques «ne fonctionnent
qu’avec des 0 et des 1 »

• Unité la plus petite : le bit , binary digit (0 ou 1)

Favorise une omniprésence de la numération
en base 2

• Unité usuelle : l'octet (= 8 bits)

Permet de représenter 28 = 256 valeurs
différentes
3. INFORMATIQUE
• 0101 = 0*2^3 + 1*2^2 + 0*2^1 + 1*2^0=5
• 11111=1*2^4 + 1*2^3 + 1*2^2 + 1*2^1+1*2^0=5
=16 + 8 + 4 + 2 + 1 =31
• 27=1*2^4 + 1*2^3+0*2^2+1*2^1+1*2^0
=11011
• 10=1*2^3+0*2^2+1*2^1+0*2^0
=8+0+2+0
3. INFORMATIQUE
3. INFORMATIQUE
3. INFORMATIQUE
• Un kilooctet (ko ou kB) = 1000 octets
• Un Mégaoctet (Mo ou MB) = 1000 ko = 1 000 000
octets
• Un Gigaoctet (Go ou GB) = 1000 Mo = 1 000 000
000 octets
• Un Téraoctet (To) = 1000 Go = 1 000 000 000 000
octets
PROGRESSION
1. INTRODUCTION
2. INFORMATIQUE
3. TRAITEMENTS
4. ORDINATEURS

5. PROGRAMMATION WEB
6. HTML
3. TRAITEMENTS
• Tout programme est décrit par:
1. Les données qu’il manipule
2. Les traitements sur les données

A priori, un programme sous-entend un algorithme;

3. TRAITEMENT
3. TRAITEMENTS
• Algorithme
• Une démarche, une suite d’instructions pour
résoudre un problème
• Une méthode systématique définie étape par étape
et permettant de résoudre à coup sûr et en un
nombre fini d’étapes une certaine classe de
problèmes ou de répondre à une certaine classe
de questions
3. TRAITEMENTS
• 10ème/23 problème de Hilbert
• Une équation diophantienne s’exprime sous la
forme d’un polynôme dont les coefficients sont des
nombres entiers et dont on cherche les racines
entières.
• Problème:
«Existe-t-il une méthode pour résoudre n’importe
quelle équation diophantienne?».
3. TRAITEMENTS
• Existe-t-il toujours un algorithme pour résoudre un
problème?
• En d’autres termes, tout problème est décidable?
• Indécidabilibilité à la Turing
• Problème de l’Arrêt
• Lemme de Church
PROGRESSION
1. INTRODUCTION
2. INFORMATIQUE
3. TRAITEMENTS

4. ORDINATEURS
5. PROGRAMMATION WEB
6. HTML
4. LES ORDINATEURS
PROGRESSION
1. INTRODUCTION
2. INFORMATIQUE
3. TRAITEMENTS
4. ORDINATEURS

5. PROGRAMMATION WEB
6. HTML
5. INTRODUCTION À LA
PROGRAMMATION WEB

• On appelle «Web» (nom anglais signifiant «toile»),

contraction de «World Wide Web»
(d'où l'acronyme www),
• une des possibilités offertes par le réseau
Internet de naviguer entre des documents
reliés par des liens hypertextes.
5. INTRODUCTION À LA
PROGRAMMATION WEB

• Le concept du Web a été mis au point en 1991 au

CERN (Centre Européen
de Recherche Nucléaire)
• Par une équipe de chercheurs à laquelle
appartenaient Tim-Berners LEE,
• le créateur du concept d'hyperlien,
considéré aujourd'hui comme le père
fondateur du Web.
5. INTRODUCTION À LA
PROGRAMMATION WEB

• Le principe de web repose sur l'utilisation

d'hyperliens pour naviguer entre
des documents (appelés «pages web»)
• grâce à un logiciel appelé navigateur
(parfois également appelé fureteur
ou butineur ou en anglais browser).
5. INTRODUCTION À LA
PROGRAMMATION WEB

• Sur Internet les documents sont ainsi repérés

par une adresse unique, appelée URL,
permettant de localiser une ressource
sur n'importe quel serveur du réseau internet

• URL vient de l'abbréviation anglaise U.R.L :

Uniform Resource Locator, qui signifie
« localisateur uniforme de ressource ».
5. INTRODUCTION À LA
PROGRAMMATION WEB

• L’URL désigne en fait l'adresse Internet d'un fichier,

d'une image, ou tout autre élément et
désigne aussi souvent le nom de domaine
d'un site.

La barre d’adresse
5. INTRODUCTION À LA
PROGRAMMATION WEB

• Un protocole est une méthode standard qui permet

la communication entre des processus
(s'exécutant éventuellement sur
différentes machines),

• Un ensemble de règles et de procédures à

respecter pour émettre et recevoir
des données sur un réseau.
5. INTRODUCTION À LA
PROGRAMMATION WEB

• Au-delà des liens reliant des documents formatés,

le web prend tout son sens avec le protocole
HTTP permettant de lier des documents
hébergés par des ordinateurs distants
(appelés serveurs web, par opposition
au client que représente le navigateur).

• HTTP : hypertext transfer protocol

• HTTPS : hypertext transfer protocol secure
5. INTRODUCTION À LA
PROGRAMMATION WEB

• Un site web (aussi appelé site internet ou page perso

dans le cas d'un site internet à but personnel)
est un ensemble de fichiers HTML stockés
sur un ordinateur connecté en permanence
à internet et hébergeant les pages web
(serveur web).
5. INTRODUCTION À LA
PROGRAMMATION WEB

• Un site web est habituellement architecturé

autour d'une page centrale,
appelée «page d'accueil» et proposant
des liens vers un ensemble d'autres pages
hébergées sur le même serveur,
• Et parfois des liens dits «externes» vers
des pages hébergées par
un autre serveur
5. INTRODUCTION À LA
PROGRAMMATION WEB

• Les navigateurs web permettent de surfer sur

le web. Les plus célèbres sont Internet
Explorer de Microsoft, Firefox de la fondation
Mozilla, Chrome de Google et Safari de Apple
5. INTRODUCTION À LA
PROGRAMMATION WEB

• Les aspirateurs de sites

(comme par exemple le célèbre Httrack)
permettent de parcourir un site afin d'en
avoir une copie sur son disque dur
5. INTRODUCTION À LA
PROGRAMMATION WEB

• Les éditeurs HTML comme NVU ou Matizha Sublime

permettent de créer facilement un site web,
qu'il faudra ensuite héberger sur un serveur
5. INTRODUCTION À LA
PROGRAMMATION WEB

• Les plateformes de blog proposent des outils

clés en main pour publier du contenu sur le web,
sans avoir à se soucier des détails techniques.
Voir la fiche expliquant comment choisir
un hébergeur de blog et créer son blog
5. INTRODUCTION À LA
PROGRAMMATION WEB

• Le «navigateur» est l'outil de l'internaute,

lui permettant de surfer entre les pages web
de ses sites préférés.
• Il s'agit d'un logiciel possédant une interface
graphique composée de boutons de
navigation, d'une barre d'adresse,
d'une barre d'état (généralement en bas de fenêtre)
et dont la majeure partie de la surface sert à afficher
les pages web.
5. INTRODUCTION À LA
PROGRAMMATION WEB
5. INTRODUCTION À LA
PROGRAMMATION WEB

• Moteur de recherche…
• Il existe une énorme quantité d'informations sur Internet
(plusieurs millions ou milliards de documents),
et ces informations sont pour la plupart
renouvelées quotidiennement.
• Un moteur de recherche (Search engine en anglais)
est un service en ligne permettant de trouver
facilement une page grâce à un ou plusieurs
mots-clés dans un formulaire de recherche
5. INTRODUCTION À LA
PROGRAMMATION WEB

• Un moteur de recherche fonctionne grâce à un

grand nombre de serveurs appelés robots
(ou encore crawlers ou spiders, en français araignées)
chargés de parcourir la toile en suivant
récursivement les liens des millions de pages
Web et indexant le contenu dans de
gigantesques bases de données afin de permettre
leur interrogation.
5. INTRODUCTION À LA
PROGRAMMATION WEB

• Les Smiles ou Emoticones sont des astuces exploitées

Pour passer des sentiments
PROGRESSION
1. INTRODUCTION
2. INFORMATIQUE
3. TRAITEMENTS
4. ORDINATEURS

5. PROGRAMMATION WEB
6. HTML
6. PROGRAMMATION WEB (HTML SEULEMENT)

• Le HTML (« HyperText Mark-Up Language ») est un

langage dit de « marquage » (de « structuration »
ou de « balisage ») dont le rôle est de formaliser
l'écriture d'un document avec des balises de formatage.

• Les balises permettent d'indiquer la façon dont

doit être présenté le document et les liens qu'il
établit avec d'autres documents.
Langage HTML
6. PROGRAMMATION WEB (HTML SEULEMENT)

• Le langage HTML permet notamment la lecture de

documents sur Internet à partir de machines différentes,
grâce au protocole HTTP, permettant d'accéder
via le réseau à des documents repérés par
une adresse unique, appelée URL.
6. PROGRAMMATION WEB (HTML SEULEMENT)

• Le HTML n'est pas 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.
6. PROGRAMMATION WEB (HTML SEULEMENT)

• Une page HTML est un simple fichier contenant du texte

formaté avec des balises HTML.

• Par convention l'extension donnée au fichier est

.htm ou .html, mais une page web peut potentiellement
porter n'importe quelle extension.
6. PROGRAMMATION WEB (HTML SEULEMENT)

• Les éditeurs WYSIWYG

(«What You See Is What You Get», littéralement
«ce que vous voyez est ce que vous obtenez»)

• Sont des éditeurs graphiques permettant de travailler

sur une page web telle qu'elle sera affichée sur
un navigateur à quelques détails près
6. PROGRAMMATION WEB (HTML SEULEMENT)

• Le HTML n'est pas 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
6. PROGRAMMATION WEB (HTML SEULEMENT)

• 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 !
6. PROGRAMMATION WEB (HTML SEULEMENT)

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

6. PROGRAMMATION WEB (HTML SEULEMENT)

• Les balises HTML ont la particularité de pouvoir être

imbriquées de manière hiérarchique afin de
permettre le cumul de leur propriétés.
• En contrepartie le chevauchement de balises n'est
pas toléré par le standard HTML.
6. PROGRAMMATION WEB (HTML SEULEMENT)

• Un attribut est un élément, présent au sein de la

balise ouvrante, permettant de définir des propriétés
supplémentaires.

• Les attributs se présentent la plupart

du temps comme une paire clé=valeur, mais
certains attributs ne sont parfois définis
que par la clé.
6. PROGRAMMATION WEB (HTML SEULEMENT)

• Les balises de style modifient la typographie du texte.

Elles peuvent être imbriquées dans d'autres balises
de style de la même façon qu'on le ferait avec
un traitement de texte.
• <ABBREV>, <ACRONYM>, <AU>, <B>,<BIG>,
<BLINK> (propre à Netscape), <CITE>,<CODE>
<DEL>, <DFN>, <EM>, <I>, <INS>,<KBD>,
<PERSON>, <Q>, <S>,<SAMP>, <SMALL>,
<STRONG>, <STRIKE>, <SUB>,<SUP>,<TT>
<VAR>
6. PROGRAMMATION WEB (HTML SEULEMENT)

• Le langage HTML définit 6 niveaux de

titre (en anglais heading),
afin de définir une structuration
hiérarchique des paragraphes
dans un texte
6. PROGRAMMATION WEB (HTML SEULEMENT)

• Liste Ordonnée • Liste Non-Ordonnée

• <ol> • <ul>
• <li> Introduction • <li> Introduction
• <li> Développement • <li> Développement
• <li> Conclusion • <li> Conclusion
• </ol> • </ul>
6. PROGRAMMATION WEB (HTML SEULEMENT)
6. PROGRAMMATION WEB (HTML SEULEMENT)

• Un tableau doit respecter les quelques règles suivantes :

Le tableau est encadré par les balises <TABLE>.
• Le titre du tableau est encadré par <Caption>
• Chaque ligne est encadrée par <TR> (Table Row)
• Les cellules d'en-tête sont encadrées par <TH> (Table Head)
• les cellules de valeur sont encadrées par <TD> (Table Data)
6. PROGRAMMATION WEB (HTML SEULEMENT)
• Les liens hypertextes (ancrages) sont les liens
hypertextes qui permettent de lier
des pages Web entre elles.
• Ils permettent notamment de naviguer :
vers un autre endroit du document.
vers un fichier HTML situé
à un emplacement différent sur la machine
qui héberge la page. vers une autre machine.
L'attribut principal des ancrages est href.
• <a href="Adresse ou URL"> .. </a>
6. PROGRAMMATION WEB (HTML SEULEMENT)
• Les liens hypertextes (ancrages) sont les liens
hypertextes qui permettent de lier
des pages Web entre elles.
• Ils permettent notamment de naviguer :
vers un autre endroit du document.
vers un fichier HTML situé
à un emplacement différent sur la machine
qui héberge la page. vers une autre machine.
L'attribut principal des ancrages est href.
• <a href="Adresse ou URL"> .. </a>
6. PROGRAMMATION WEB (HTML SEULEMENT)
• Les principaux attributs de la balise IMG sont les suivants :
SRC: l'emplacement de l'image (il est obligatoire)
ALIGN: l'alignement de l'image. Il peut prendre
les valeurs: TOP, MIDDLE, et BOTTOM
(au-dessus, au milieu et en-dessous)
ALT: texte alternatif
TITLE: affiche une infobulle lors du survol
de l'image par le curseur.
WIDTH: spécifie la largeur de l'image.
HEIGHT: spécifie la hauteur de l'image.
6. PROGRAMMATION WEB (HTML SEULEMENT)
• Il est possible de définir une image d'arrière-plan
pour la page web grâce aux attributs de
la balise <BODY>
6. PROGRAMMATION WEB (HTML SEULEMENT)
• Grâce aux frames (en français "cadres")
il est possible d'afficher plusieurs pages HTML
dans différentes zones (ou cadres).
6. PROGRAMMATION WEB (HTML SEULEMENT)
6. PROGRAMMATION WEB (HTML SEULEMENT)
• Pour faire afficher des liens dans un des cadres,
il suffit d'utiliser l'attribut target dans la balise
<A HREF ..> pour spécifier le nom du cadre
qui a été spécifié dans la balise <FRAME>
par l'attribut NAME.
MERCI!
Je recois vos questions à mon
adresse mail: [email protected]
Ou via le Web Campus:
www.efremmbaki.com/Moodle