COURS INITIATION A L'ALGORITHME ET PROGRAMMATION.06.12.21.pptx

INITIATION A L’ALGORITHMIQUE ET A LA PROGRAMMATION
24/01/2023 KNP 1
Animateur: KAMGAING NOUBISSI PATRICK

24/01/2023 KNP 2

I. NOTIONS DE BASE EN ALGORYTHMIQUE
II. COMPRENDRE LES FONDAMENTAUX DE LA PROGRAMMATION
III. UTILISER LES LANGAGES DE PROGRAMMATION DANS DES
DOMAINES SPECIFIQUES
24/01/2023 KNP 3
OBJECTIFS

I. Introduction
II. Définitions
III. Quelques Langages de programmation
IV. Généralités du Langage Algorithmique
V. Structures conditionnelles et itératives
24/01/2023 KNP 5

VI. LANGAGE HTML et Mise en place d’un BLOG
VII. VBA et Cas pratiques
VIII. Algorithmes Excel et cas pratiques
24/01/2023 KNP 6

Depuis que l’homme a ressenti le besoin de différencier
et de dénombrer, soit les êtres de son espèces, soit des
objets et des animaux qu’il chassait ou qui
représentaient un danger sur sa vie, il a créé des outils
pour l’aider à faire les calculs.
Depuis des milliers d’années différents outils ont été
utilisés, le plus anciens est probablement l’os.
24/01/2023 KNP 8
INTRODUCTION

Des outils plus complexes furent inventés au fur et à mesure,
tel l’abaque, ensuite le boulier (utilisé à nos jours), la
Pascaline (Première machine à calculer inventée en 1645 par
Blaise pascal).
Avant d’entamer les définitions, nous allons faire un petit
rappel chronologique non exhaustif d’un certain nombre
d’évènements majeurs ayant contribué au développement ou
carrément à la fondation de l’informatique, telle que nous la
connaissons aujourd’hui.
Du caillou au Bit ; des millénaires d’interrogations, de
découvertes et d’apprentissage.
24/01/2023 KNP 9

Ci-dessous quelques évènements marquants sur l’apparition
et le développement de l’informatique et de l’ordinateur :
- 1642 :l’invention de la Pascaline par Blaise Pascal.
- 1821 :invention de la machine à différences par Charles Babbage.
- 1840 Ada Lovelace (mathématicienne) nomme le processus logique
d’exécution d’un programme : Algorithme, en l’honneur à Al-Khawarizmi.
- 1854: Boole publie"An Investigation In to the Laws of Thought",ouvrage
fondateur de l’algèbre de Boole .1946: premier ordinateur l’ENIAC.
- 1947 :apparition du transistor (laboratoires Bell Téléphone).
- 1964 lancement de la série 360 d’ordinateurs d’IBM; ordinateurs compatibles
entres eux.
- 1968 : apparition du Langage PASCAL, créé par Niklaus Wirth.
- 1981 à nos jours : âge des micro-ordinateurs et des supercalculateurs.
24/01/2023 KNP 10

 Algorithme : Selon Larousse , Il s’agit d’un ensemble de
règles opératoire dont l’application permet de résoudre un
problème énoncé au moyen d’un nombre fini d’opérations.
 Un algorithme peut être traduit, grâce à un langage de
programmation , en un programme exécutable par un
ordinateur. Mot dérivé du nom du mathématicien
Al_Khwarizmi qui a vécu au 9ème siècle, était membre de
l’académie des sciences à Bagdad . Un algorithme prend
des données en entrée, exprime un traitement particulier
et fournit des données en sortie.
24/01/2023 KNP 12

 Programmation : Ensemble des activités liées à la
définition , l ’écriture, la mise au point et l ’exécution de
programmes informatiques; séquence des ordres auxquels
doit obéir un dispositif.
24/01/2023 KNP 13

QUELQUES VISUELS
24/01/2023 KNP 14
PASCALINE
BOULIER
OU ABAQUE

 Langages de programmation :
 Ce sont des notations artificielles, destinées à exprimer des
algorithmes et produire des programmes.
 D’une manière similaire à une langue naturelle, un langage
de programmation est fait d’un alphabet, un vocabulaire et
des règles de grammaire.
 Il existe une multitude évolutive des langage de
programmation parmi lesquels on peu citer:
 Assembleur ,Basic , Pascal ,Turbo Pascal, Perl, Ada, Algol,
Visual Basic, Delphi, C, C + +, Java, Html, XML, D-Base,
Matlab, Scilab, Fortran, python , etc.).
24/01/2023 KNP 16

HTML/CSS
 Ce sont 2 langages complémentaires. Ils représentent
le b.a.-ba du développement web.
 De son côté, HTML a pour rôle de structurer la page
web. Il permet de constituer son squelette. C'est sur
cette base que le développeur peut intégrer des
éléments graphiques et visuels à partir du langage CSS,
puis les positionner les uns par rapport aux autres.
24/01/2023 KNP 17

 HTML présente l'avantage d'être universel, et
indépendant de tout système d'exploitation.
 Il fonctionne sur la base d'une structure distribuée,
c'est-à-dire que les liens externes s'y intègrent
parfaitement.
 Cela rend possible la modification d'un élément sans
modifier la page où il se trouve. Enfin, HTML permet
d'intégrer à la fois des éléments locaux et distants, via
la connexion à un serveur.
24/01/2023 KNP 18

 En tant que langage universel et simplifié, HTML peut
s'avérer limité en termes de mise en forme d'une page.
Si vous souhaitez stocker vos données en local, il n'est
également pas totalement adapté.
 Qui plus est, le stockage peut vite être alourdi, en
fonction du nombre de pages de votre site web.
24/01/2023 KNP 19

JavaScript
 JavaScript est un langage de programmation dit
interprété. Il a la particularité de s'activer côté client.
Cela signifie que lorsque l'utilisateur ouvre une page
web, le navigateur active le code afin d'afficher la page.
 JavaScript permet d'intégrer des scripts entre les
éléments HTML de la page, généralement pour ajouter
une animation ou un effet visuel. C'est un langage utile
pour améliorer l'expérience utilisateur, car il permet
d'ajouter de l'interactivité sans pour autant ralentir la
page.
24/01/2023 KNP 20

 Le principal avantage de JavaScript réside dans sa
sécurité. En effet, si votre navigateur peut récupérer un
script dans une page HTML, il n'y a en revanche aucun
risque qu'il accède à vos fichiers.
 En tant que langage interprété par les navigateurs,
JavaScript peut justement être interprété de différentes
manières, d'un navigateur à un autre.
 Certains navigateurs, trop anciens, ne suivent pas les
évolutions du langage et peuvent ne pas être en
mesure d'afficher les scripts.
24/01/2023 KNP 21

PHP
 PHP est un langage de script qui, contrairement à
JavaScript, est exécuté côté serveur. Il est très lié à
HTML, les balises PHP s'intégrant au cœur du code
HTML. Pour le client, il est d'ailleurs impossible de
voir si du PHP a été utilisé.
 Le rôle principal de PHP est de développer une bonne
communication entre la page web et le serveur. En ce
sens, PHP garantit la bonne stabilité des pages web.
24/01/2023 KNP 22

 Les principaux avantages de PHP sont sa grande
flexibilité ainsi que sa compatibilité avec de
nombreuses bases de données, mais aussi avec la
plupart des systèmes d'exploitation.
 PHP peut présenter l'inconvénient de générer des URL
aléatoires, qu'il est nécessaire de réécrire pour ne pas
voir vos pages pénalisées par les robots des moteurs de
recherche.
24/01/2023 KNP 23

Ruby
 Ruby est un langage de programmation open source
relativement simple, flexible et facile d'accès,
notamment pour les débutants. Il est dit interprété,
orienté objet et multi paradigme et se voit de plus en
plus utilisé. Il présente en effet une vision différente du
développement.
 Si Ruby peut s'apprendre assez vite par la pratique, il
s'agit d'un langage dont la syntaxe est très différente
des autres. Ruby est probablement le langage le plus
orienté objet, dans le sens où la communication entre
les différents éléments de langage est très flexible.
24/01/2023 KNP 24

Java
 Le langage Java est adapté au développement d'une
application mobile native sur Android. Il dispose d'une
documentation importante, étant partagé par une
grande communauté de développeurs dans le monde.
 En prenant en compte le fait que Java est pensé pour
Android, vous aurez besoin d'un environnement 100 %
Android pour développer l'application.
 Néanmoins, il est de plus en plus facile d'exécuter votre
application à partir d'un système d'exploitation iOS ou
Windows.
24/01/2023 KNP 25

 Même si Java est un langage générique, il faut
distinguer :
 JVM (Java Virtual Machine).
 JDK (Java Development Kit).
 JRE (Java Runtime Environment).
 En effet, il est important de vous assurer que toutes les
équipes de développement travaillent sur le même kit,
particulièrement lorsqu'une partie du développement
est sous-traité, même si la majorité des professionnels
s'accommodent du JDK.
24/01/2023 KNP 26

Swift
 Swift a été créé par Apple spécialement pour
développer des applications pour iOS, mais aussi pour
Mac.
 C'est un langage open source de plus en plus utilisé, en
passe de dépasser les langages traditionnels pour le
développement d'applications pour téléphones. Swift
se base sur le langage Objective-C.
 Les éléments Swift peuvent s'y intégrer directement.
24/01/2023 KNP 27

 L'avantage de Swift est qu'il existe une documentation
de plus en plus dense, nourrie par les développeurs qui
s'y intéressent. Apple met également un grand nombre
de ressources à disposition des professionnels et des
étudiants.
 Pour l'instant, l'inconvénient de Swift peut être le fait
qu'il se limite à Apple. Cela ne devrait pas durer
longtemps, puisqu'il est prévu que le langage s'adapte
également à Linux. Du côté des performances, il
semble que Swift ait encore une marge de progression.
24/01/2023 KNP 28

Langages de programmation pour l'intelligence
artificielle
 Java et Python sont les 2 codes les plus utilisés en
programmation d'intelligence artificielle.
 De son côté, Python compile de nombreux avantages :
il est rapide, léger, facile à installer, et compatible avec
la plupart des systèmes d'exploitation. En revanche, il
ne s'adapte pas au développement d’une intelligence
artificielle pour application mobile.
 S'il peut présenter l'inconvénient d'être plus lent, Java
est simple à apprendre et à utiliser. De plus, il s'adapte
également à toutes les plateformes de développement.
24/01/2023 KNP 29

 La présentation d’un algorithme sous forme de bloc est
très proche du langage de programmation. Sa structure est
la suivante :
24/01/2023 KNP 31

 Notons que chaque partie de l’algorithme possède des
mots clés spécifiant la nature ainsi que l’étape de
description.
1- En-tête
 L’en-tête d’un algorithme est de la forme suivante :
24/01/2023 KNP 32

 Où Algorithme est un mot clé indiquant le début d’un
algorithme (en Pascal on utilise le mot Program) et
identificateur_nom c’est le nom donné par le
programmeur. Généralement, on choisit un nom évoquant
le rôle de l’algorithme.
 Notons que le point-virgule (; ) indique la fin de l’en- tête.
Il permet de séparer l’en-tête du reste de l’algorithme.
 2- Partie déclaration
 Elle contient la déclaration de tous les objets manipulés
(constantes et variables) par un algorithme.
 Elle associe à chaque objet un nom (identificateur), un
type et éventuellement une valeur (pour les constantes).
24/01/2023 KNP 33

 Identificateurs : C’est un nom que l’on attribue à toute
entité manipulée dans un programme. Les identificateurs
sont choisis librement, par l’utilisateur, toutefois ils
obéissent à certaines règles :
 1. Un nom doit commencer par une lettre et non par un
chiffre.
 Exemple 1 : d1 ou D1 et non 1D;
 Un algorithme prend des données en entrée, exprime un
traitement particulier et fournit des données en sortie.
 2. Doit être constitué uniquement de lettres, de chiffres et
du soulignement (éviter les caractères de ponctuation et
les espaces),
 Exemple 2 : SM2013,USTHBetnonSM2013,USTHB.
24/01/2023 KNP 34

 3. Doit être différent des mots clés réservés au langage
(par exemple en Pascal : Var, begin, sqrt, write . ..).
 Types de base (simples) :
24/01/2023 KNP 35

24/01/2023 KNP 56
Ce sont des instructions qui permettent d’exécuter une ou plusieurs
actions en fonction d’une condition.
Types d’instructions conditionnelles :
1. L’instruction alternative simple (si...alors...) Ce type d’instruction
présente une seule possibilité; elle ne s’exécute que dans le cas où la
condition est vérifiée. Le cas contraire entraîne une sortie immédiate de
l’instruction en ignorant le reste des actions qui viennent.

24/01/2023 KNP 58
Ce sont des instructions qui permettent d’exécuter une ou plusieurs
actions en fonction d’une condition.
Types d’instructions conditionnelles :
1. L’instruction alternative simple (si...alors...) Ce type d’instruction
présente une seule possibilité; elle ne s’exécute que dans le cas où la
condition est vérifiée. Le cas contraire entraîne une sortie immédiate de
l’instruction en ignorant le reste des actions qui viennent.

Où Cond est une expression booléenne.
24/01/2023 KNP 59

HTML, l'origine
HTML Hyper Text Markup Language est né en 1989
sous l'impulsion de Tim Berners Lee, " inventeur " du
Web.
HTML est basé sur SGML (Structured Markup
Language), qui est une vieille norme utilisée pour la
description de documents.Elle est conçue pour les
grosses documentations techniques.
HTML est une instance de SGML.
24/01/2023 KNP 69

HTML, les principes
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. Il a volontairement été conçu
pour être simple.
Il a évolué vers un langage de description de pages offrant des
possibilités plus proches de la P.A.O.
24/01/2023 KNP 70

L'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.
24/01/2023 KNP 71

Arbre généalogique
SGML
XML
HTML
Docbook
…
XHTML
SMIL
MathML
…
24/01/2023 KNP 72

Introduction au marquage - 1
Pour décrire un fichier hypertexte, le langage HTML insère
des balises dans le texte du document :
Début de mise en forme Fin de
mise en forme
<marqueur> ici votre texte </marqueur>
Synonymes: marqueur, élément, tag.
24/01/2023 KNP 73

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
24/01/2023 KNP 74

Il faut respecter une logique d'imbrication:
Bon:
Mauvais:
<gras><italique> Le cours HTML</gras></italique>
<gras><italique> Le cours HTML </italique> </gras>
24/01/2023 KNP 75

Le langage HTML est sensible à la casse, toujours
écrire en minuscules.
Bon:
Mauvais:
<GRAS><italique> Le cours HTML </italique> </GRAS>
<Gras><ITALIQUE> Le cours HTML </ITALIQUE> </Gras>
<GRAS><ITALIQUE> Le cours HTML </italique> </GRAS>
<gras><italique> Le cours HTML </italique> </gras>
24/01/2023 KNP 76

Les attributs
Les balises peuvent posséder un ou plusieurs attributs qui
permettent de spécifier l'action de la balise. Toujours mettre la
valeur de l'attribut entre guillemets.
<marqueur attribut="argument">texte</marqueur>
<marqueur attribut1="argument" attribut2="argument">texte</marqueur>
24/01/2023 KNP 77

Les commentaires
<!–- Voici un commentaire HTML -->
<!–-
Voici un commentaire HTML qui
peut se placer sur plusieurs lignes
-->
24/01/2023 KNP 78

Que choisir pour écrire de l' XHTML?
A la main, avec un éditeur de texte
Bolc Notes, Simple Text, Bbedit,Emacs ,WordPad …
Avec un logiciel « assistant » au code HTML
PageSpinner sur MacIntosh, Amaya sur Unix, HTML-Kit sur PC …
A l'aide d'un programme dit "WYSIWYG"
Dreamweaver , Golive, Netscape composer, FrontPage, …
A l'aide d'un filtre
Les commandes enregistrer sous html, que l'on trouve dans les suites bureautiques (Word, OpenOffice, …), dans certains logiciels de
P.A.O.
Conversion HTML vers XHTML avec HTML Tidy
Disponible dans de nombreuses versions sur le site du W3C
24/01/2023 KNP 79

Le client doit pouvoir interpréter
HTML et afficher le résultat. Ils
sont divers, tournant sur des
systèmes différents:
 Netscape Navigator, Mozilla,
Internet explorer, Safari, Opéra,
iCab, Emacs mode www, Amaya,
Lynx, links, w3m …
Que choisir pour lire HTML?
24/01/2023 KNP 80

Note sur les caractères accentués
Vous pouvez rencontrer le codage ASCII sur 7 bits spécifié
par la norme pour afficher les caractères accentués ou
spéciaux. Ceux ci devront faire l'objet d'un codage spécial au
sein du fichier HTML.
é s'écrit é être s'écrit &eacirc;tre
Les serveurs Web accepte les caractères accentués de la
norme iso-8859-1. On spécifie l'encodage dans le fichier
HTML.
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
24/01/2023 KNP 81

Structure de base d'un fichier
HTML
<html>
<head>
… <title>Mon premier document html</title>
</head>
<body>
… Bonjour tout le monde
</body>
</html>
.
Une balise <html> contenant une seule balise <head> et une seule balise <body>.
Les balises que l'on va trouver dans le corps divisent le contenu en sections logiques,
sous forme de blocs ( paragraphes, tableaux …). On parle d'éléments de niveau bloc.
Les éléments qui représentent les propriétés du texte (strong, i) qui figurent dans un bloc
sont dits "éléments de ligne".
24/01/2023 KNP 82

Analyse des balises
<html> .. </html> Délimite le début et la fin du document
<head> .. </head> Entête du document, contient des méta-
informations
<body> . . </body> Corps du document
<title>. .</title> titre du document
<meta> . .</meta> méta-informations
<script> . .</script> script ou référence
24/01/2023 KNP 83

Analyse des balises
<html> .. </html> Délimite le début et la fin du document
<head> .. </head> Entête du document, contient des méta-
informations
<body> . . </body> Corps du document
24/01/2023 KNP 84

Rappels
Les noms d' éléments sont sensibles à la casse et sont écrits
en minuscules.
Les noms d'attributs sont sensibles à la casse, doivent être
écrits en minuscules et encadrées par des guillemets.
Tous les attributs doivent recevoir une valeur.
Les balises fermantes sont obligatoires.
Les éléments vides sont signalés par une balise spéciale. (
ex: <br />)
24/01/2023 KNP 85

Un peu plus loin dans HTML
<html>
<head>
<title>Mon deuxieme fichier</title>
</head>
<body>
<h2>Hello World</h2>
<p>
L'emplacement de votre nouveau matériel est-il à proximité (moins de 5m) d'une prise réseau
libre ? Si oui, relevez le numéro de la prise (il est écrit sur une plaque de céramique bleue, il faut
respecter la distinction entre lettres majuscules et minuscules). Sinon, il faut faire installer une nouvelle prise par le
Service Travaux, auquel vous devrez adresser un bon de cession interne. La suite des opérations aura lieu quand vous
aurez une prise disponible. Dans le doute, interrogez par courrier électronique netadm@pasteur.fr. </p>
<p>Votre demande doit nous parvenir par l'intermédiaire du correspondant informatique de votre Unité. Elle se
composera de deux parties : un bon de cession interne envoyé au Service Informatique Scientifique et un courrier
électronique adressé à netadm@pasteur.fr qui contiendra toutes les informations utiles (dont le
numéro du bon de cession). </p>
<ol>
<li> le premier élément</li>
<li> le deuxième élément</li>
<li> le troisième élément</li>
</ol>
<p><a href="http://www.pasteur.fr/infosci/utilinfo/FAQ.html#Q1">Vous trouverez ici la suite du texte !! </a></p>
</body>
</html>
24/01/2023 KNP 86

Eléments de niveau bloc
<hn> . . </hn> Titre de niveau n, de 1 à 6
<p> . . </p> Paragraphe
Et aussi: address, blockquote, div, hr, pre sans oublier body !
24/01/2023 KNP 87

Eléments de listes
<ul> . . </ul> Liste non triée, liste à puces
<ol> . . </ol> Liste triée, liste à numéros
<li> . . </li> Elément de la liste
Et aussi: dl, dt, dd
24/01/2023 KNP 88

Les liens sur un texte …ou sur
autre chose !
<a> . . </a>
Création d'un lien hypertexte, ou vers un point
d'ancrage du document
Principaux attributs:
href = url
name = chaîne de caractères
<a href = "http://www.u-cergy.fr">Université de Cergy
Pontoise</a>
24/01/2023 KNP 89

Les liens intra-pages
<a name = "chats" >Texte sur les chats</A>
<p>
.
<p>
.
<p>
.
<a href = "#chats"> En savoir plus sur les chats </a>
<a href = "autrepage.html#refautrepage">Vers la
référence d’une autre page</a>
24/01/2023 KNP 90

Les adresses URL
Les adresses du Web ou URL ( Uniform Resource Locator )
sont du type:
http://depinfo.u-cergy.fr/licence/l1/introinfo.html#cours
Le protocole: http
Le serveur (sous domaine + nom de domaine): depinfo.u-cergy.fr
Le fichier avec son chemin: licence/l1/introinfo.html
Un ancrage: #cours
24/01/2023 KNP 91

L'adresse indiquée dans le lien ( URL) peut être absolue,
elle inclut tout le chemin en commençant par le
protocole:
http://www.u-cergy.fr/monfichier.html
Ou relative, elle n'inclut qu'une partie du chemin:
Pages_chats/monfichier.html
Les adresses URL
24/01/2023 KNP 92

<b>texte gras</b> texte gras
<i>texte italique</i> texte italique
<big>texte gros</big> texte gros
<small>texte petit</small> texte petit
Eléments de ligne
Et aussi: br (pour sauter des lignes), code, sub, sup,
span, u (pour underline/soulignement), strike …
24/01/2023 KNP 93

Encore plus loin dans l' HTML
<div style="text-align: center;">
<table border="1" cellspacing="0" cellpadding="10">
<tr>
<th><img src="Images/fleche-in-1.gif" width="65" height="35" align="Middle" />Pour Mac</th>
<th><img src="Images/fleche-in-2.gif" width="100" height="60" align="Middle" />Pour PC</th>
<th><img src="Images/fleche-in-3.gif" width="150" height="71" align="Middle" />Pour Linux</th>
</tr>
<tr>
<td>
<ul>
<li><a href="http://proxad.mac.tucows.com/blueberry/htmltextmac.html">Mode texte </a></li>
<li> <a href="http://proxad.mac.tucows.com/blueberry/beginnermac.html">Simples </a></li>
<li><a href="http://proxad.mac.tucows.com/blueberry/htmleditmac.html">Avancés</a></li>
</ul>
</td>
<td>
<ul>
<li><a href="http://proxad.tucows.com/htmltext95.html">Mode texte </a></li>
<li> <a href="http://proxad.tucows.com/htmlbeginner95.html">Simples </a></li>
<li><a href="http://proxad.tucows.com/htmledit95.html">Avancés </a></li>
</ul>
</td>
<td>
<ul>
<li><a href="http://proxad.linux.tucows.com/x11html/off_html.html">Linuxberg</a></li>
</ul>
</td>
</tr>
</table>
</div>
24/01/2023 KNP 94

Les tableaux -1
<table> . . </table>
Définit un tableau
align = position
bgcolor = color
border = n
cellpadding = n
cellspacing = n
width = n
24/01/2023 KNP 95

Les tableaux -2
<tr> . . </tr>
Définit une ligne d'un tableau
Principaux attributs :
align = left,center,right
valign = top, middle, bottom
bgcolor = color
border = n
24/01/2023 KNP 96

Les tableaux -3
<td> . . </td>
Définit une cellule de données
Principaux attributs :
align = type
valign = type
bgcolor = color
colspan, rowspan = n
height, width = n
24/01/2023 KNP 97

Les tableaux -4
<table>
<tr>
<td> A</td>
<td> B </td>
<td> C </td>
</tr>
<tr>
<td> D</td>
<td> E </td>
<td> F </td>
</tr>
</table>
A B C
D E F
24/01/2023 KNP 98

Les images -1
<img> . . </img>
Insère une image
align = left, bottom, middle, top, right
alt = text
border = n
height, width = n
src = url
<img src=‘’monimage.jpg’’ />
<img src=‘’monimage.jpg’’ width=‘’5’’ width=‘’10%’’/>
24/01/2023 KNP 99

Les images - 2
Attention au poids des images, il est
important d'optimiser son fichier
image.
Deux formats sont lus par les
navigateurs, GIF ( Graphics
Interchange Format ) et JFIF ( JPEG
File Interchange Format).On utilise le
GIF pour les illustrations, le JPEG
pour les photos.
Attention à l’agrandissement de vos images….une image de 10x10 affichée en 100x100
grâce à width et height devient pixellisée !
24/01/2023 KNP 100

Les droits d'auteurs
Attention aux droits sur les images. La seule image qui vous
appartient est celle que vous avez prise avec votre matériel photo.Il
faut aussi l'autorisation des personnes figurant sur la photo.
Attention à la portée des droits d'auteurs, surtout pour une utilisation
web (Pensez à faire une déclaration à la CNIL si besoin)
Attention aux images "libres de droits"
Lire les recommandations juridiques sur l'intranet.
Attention aux images externes…
<img src=« http://www.autresite.com/image.jpg »/>
24/01/2023 KNP 101

Un fichier différent …
<html>
<head>
<title>des cadres</title>
</head>
<frameset cols="25%,75%">
<frame name="menu" src="menu.html"
scrolling="yes">
<frame name="cible" src="cible.html"
scrolling="no">
<noframes>
<body>
message pour les navigateurs ne supportant
pas les cadres
</body>
</noframes>
</frameset>
</html>
Menu.html Cible.html
24/01/2023 KNP 102

Exercices
Ecrire le code d’une texte possèdant un lien sur le mot Cergy Pontoise et qui
pointe vers le site de l’université
Donnez le code pour afficher une image de nom pixel.gif et de l’afficher à 50%
de sa taille
Donnez le code pour écrire un lien sur une image
Créez un tableau à 3 colonnes , 2 lignes.
Faire en sorte que ce tableau possède du texte en rouge dans ces cases
Créez un tableau à 1 ligne , 2 colonnes contenant une image et du texte.
24/01/2023 KNP 103

Les cadres
Ils permettent de diviser la fenêtre principale du
navigateur en plusieurs sous fenêtres de taille réduite,
chacune d'entre elles affichant un document différent.
Certains navigateurs ne les supportent pas, il est possible
de les désactiver, il faut donc prévoir un fichier de
substitution inscrit entres les balises:
<noframes> .. </noframes>
24/01/2023 KNP 104

Internet et la composition de pages
Web
Partie 2: HTML Dynamique
24/01/2023 KNP 105

XHTML
XHTML 1.0, est une reformulation de HTML en une
application XML et trois DTDs (Document Type
Definition)correspondant à celles définies par HTML 4.
La compatibilité avec les agents utilisateurs (les "clients")
HTML actuels est possible en suivant un ensemble
raisonnable de règles.
La sémantique des éléments et de leurs attributs sont
définis dans la Recommandation W3C pour le HTML.
La norme actuelle est XHTML 1.1
Le site du W3C: http://www.w3c.org.
24/01/2023 KNP 106

Conclusion: XHTML compatible
HTML
Écrire en minuscules.
Mettre les attributs entre guillemets.
Ajouter un caractère d'espacement avant la barre oblique d'une
balise d'élément vide ( <br /> ) .
Spécifier l'encodage de caractères de deux façons ( entête xml
et balise méta)
<?xml version"1.0" encoding=" iso-8859-1"?>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
Spécifier les cibles d'hyperliens (balise a) en utilisant à la fois
les attributs id et name.
Assigner une valeur aux attributs HTML booléens.
<input type="radio" checked="checked">
24/01/2023 KNP 107

Les limites d' HTML / XHTML
Langage de base du Web
Langage simple, limité et statique
D'autres langages, extensions,programmes sont venus se
greffer à XHTML pour en augmenter les possibilités.
XHTML offre les aspects XML mais ce n'est pas suffisant pour
toutes les applications que l'on souhaite mettre en œuvre sur
le web.
24/01/2023 KNP 108

Les formulaires
L'élément <form> permet de créer des formulaires, qui peuvent
contenir des cases à cocher, des boutons radio, des listes
déroulantes … les données recueillies sont transmises à un
programme qui s'exécutera sur le serveur web et vous
retournera le résultat.
<form action="mon_programme.php">
… éléments du formulaire
</form>
24/01/2023 KNP 109

Eléments de formulaire
<form name="mon_formulaire" action="mon_programme.php">
<input type="text" name="nom" value="" size="60" />
<input type="radio" name="rad1" value="" size="60" />choix1
<input type="radio" name="rad2" value="" size="60" />choix2
<input type="checkbox" name="chk1" value="" size="60" />choix1
<input type="checkbox" name="chk2" value="" size="60" />choix2
<select name="liste">
<option value="1">1</option>
</select>
<input type="submit" name="envoyer" value="envoyer" />
</form>
24/01/2023 KNP 110

<form name="my_form" action="mon_programme.php"> … </form>
Principaux attributs
name = "chaine" spécifie le nom sous lequel le formulaire peut-être identifié, par
exemple en Javascript , je peux y faire référence avec l'expression: document.my_form
action = "URL" spécifie l'URL à laquelle le contenu est envoyé
method= "GET" ou "POST", spécifie la méthode HTTP utilisée pour transmettre les
données. Avec GET elles sont ajoutées à l'URL, avec POST elles sont envoyées au
serveur dans le corps du message.
24/01/2023 KNP 111

<input name="my_choice" type="radio"> … </input>
name = "chaine", associe un nom aux données entrées dans cet élément input ( ex:
civilite pour un choix Mme, Mlle, Mr de type radio, on affectera dans le script PHP la
valeur cochée à la variable civilite, ce qui donne en PHP:
$civilite=$_POST[civilite]
Types possibles = "button, checkbox, file, hidden, image, radio, reset, submit, text …"
Définit les entrées de données dans le formulaire
24/01/2023 KNP 112

<select name="my_list">
</select>
name = "chaine", associe un nom aux données entrées dans cet élément select
value = "valeur", spécifie la valeur de l'élément option. Si cet élément est omis, c'est le
contenu de l'élément option qui est envoyé au CGI.
Liste d'options sélectionnables
24/01/2023 KNP 113

Introduction AU VBA
 Le VBA (Visual Basic for Applications) est un langage
proche du Visual Basic qui nécessite une application
hôte pour s'exécuter (Excel dans notre cas).
 Grâce au VBA nous allons pouvoir réaliser à peu près
tout ce que l'on souhaite avec Excel ...
 Mais avant de démarrer, commençons par afficher les
outils qui nous seront utiles.
24/01/2023 KNP 115

Première macro
 Il est possible d'automatiser certaines tâches en toute
simplicité grâce à l'enregistreur de macros.
 Pour prendre un exemple simple, nous allons
automatiser les opérations suivantes :
 Effacer le contenu des colonnes A et C
 Déplacer le contenu de la colonne B dans la colonne A
 Déplacer le contenu de la colonne D dans la colonne C
24/01/2023 KNP 119

 Pour les versions d'Excel inférieures à 2007 : Outils >
Macros > Nouvelle macro
24/01/2023 KNP 121

COURS INITIATION A L'ALGORITHME ET PROGRAMMATION.06.12.21.pptx

Contenu connexe

Tendances

Similaire à COURS INITIATION A L'ALGORITHME ET PROGRAMMATION.06.12.21.pptx

COURS INITIATION A L'ALGORITHME ET PROGRAMMATION.06.12.21.pptx