Cours Application Web3

Dr K.
APPOH
0707930589
TECHNOLOGIES DU WEB
DEVELOPPEMENT WEB I (Partie 1 )

Partie 1 : HTML, CSS (XSL) ET JAVASCRIPT, JQUERY
Partie 2 : PHP, MySQL
DEVELOPPEMENT APPLICATION WEB Partie I : HTML, CSS, XSL, JavaScript ou JS et Jquery
Objectifs :
-Comprendre le site web et ses enjeux ;
-Maitriser la programmation web à travers la syntaxe de HTML et d’autres langages de script en
général (CSS, XSL, Javascript).
LIMINAIRES :
Concepts : Système, information, système d’information (finalités et fonctions), système
informatique, Web, Internet, Application, Application web, logiciel, progiciel ; ;
Algorithmique (LDFA) et Langage de programmation informatique ;
POO (OOP).
HTML ET INTERNET : Historique, intérêt ;

METHODE : Etapes clé de conception d’un site web ;
HTML
CSS, XSL : STYLE ET MISE EN FORME ;
JAVASCRIPT et JQuery : objets à effet dynamique et calculatoire.
1
Dr APPOH 0707930589
Historique du HTML
Offre de service web de l’Internet :

-vitrine de visibilité;
-capacité d’accéder à son site et application web quel que ce soit le lieu où l’on se trouve pour vue
qu’on dispose d’une connexion internet ;
- transactions typiques des échanges : B to B, B to C, C to B, B to G, G to C, C to G, ...
Origine de html : De SGML à HTML 5 via HTML et XHTML ;
URI (URL) et navigateur ;
Un fichier Html est d’extension .html ou .htm mais .html est recommandé. Son auteur est Tim
Berners-Lee. Créé depuis 1990
Méthode de conception de site web, intérêt et Syntaxe pour codification
Parties prenantes : Expertises techniques et Entreprises d’acquisition des offres de services web
(Application web) ;
Conception, structuration arborescence et étapes de construction d’un site web ;
Livrables ;
Mise en ligne de production et maintenance ;
Codification en HTML, Style CSS, XSL et script JavaScript
CSS (Feuilles de style en cascade, Cascading Style Sheets),

XSL (Langage de style extensible, eXtensible Style Sheets Language)
Dans le concept général de script, il faut entendre code. C’est pourquoi pour être ici précis, nous tirons
deux concepts clés de script. Nous avons les styles et les scripts à proprement dit.
L'un des objectifs majeurs du langage de style comme CSS et XSL, est de travailler à la mise en forme ou
simplement consiste à la mise en page des textes et des documents. Il est par exemple possible de ne décrire
que la structure d'un document relatif à cette mise en forme. On y a recours souvent à partir de Html, de la
balise style. Pour ce qui relève du script pur (à proprement dit), nous avons JavaScript, PHP, VBScript.
Pour ce qui concerne ce cours ci, JavaScript est concerné. Pour JavaScript dans HTML, on a recours
souvent à la balise Script.
XSL est une recommandation du W3C depuis janvier 2000 et est issu de DSSSL et de CSS2:
DSSSL signifie Document Style Semantics and Specification Language ou Langage de sémantique et de
spécification du style de document. Il est la norme internationale ISO 10179 (International standard
organisation, ISO) de feuilles de style pour le SGML (Standard Generalized Markup Language , Langage
normalisé de balisage généralisé) duquel découle html.
XSL et XML
• Réutiliser les données : on peut appliquer une feuille de style XSL à plusieurs documents Html comme
à XML (Extensible Markup Language, XML n’est pas abordé ici). Appliqué sur XML, XSL en plus de
la mise en forme, a trois déclinaisons notamment XSLT, Xpath et XSL-FO.
2
Dr APPOH 0707930589
I-LIMINAIRES
Quelques préalables propres à la programmation sont importants pour ce travail de construction de sites et
d’application web.
I-1 Système d’information, Système informatique, (voir l’extrait SI)

Concepts : Système, information, système d’information (finalités et fonctions), système informatique;
Internet, Web, Application, Application web, logiciel, progiciel.
Internet, Web (voir l’extrait Internet).
I-2 Algorithmique et Algorithme, Programmation et Programme

Tout programme informatique achevé pour un but précis donne lieu à un logiciel. Deux activités
importantes à cet achèvement sont l’algorithmique et la programmation.
L’entame de ces activités nécessite d’analyser en profondeur la préoccupation posée et de bien la cerner.
I-2-1-Principe Algorithmique et Langage de programmation informatique

Le processus de construction des programmes informatiques (logiciels) jusqu’à leur exécution obéit à un
parcours.
Un programme informatique découle d’un ensemble d’instructions organisées en séquence dit algorithme.
Il est l’équivalent du logiciel. Plus précisément, par logiciel, entendons un programme informatique en vue
d’accomplir une tâche spécifique. Les systèmes d’exploitation (SE/OS), les texteurs, les langages de
programmation sont entre autres des manifestations de ces programmes informatiques.
Le Système d’exploitation (SE) (OS, operating system en anglais), bien que gestionnaire de l’ensemble des
ressources de l’ordinateur, est vu comme le socle du développement et de l’exécution de tout logiciel. Lui-
même est aussi un logiciel comme nous venons de le signaler.
-Cheminement de la conception et de la réalisation d’un logiciel jusqu’à son utilisation.
Algorithmique Programmation ou codification
Programme objet,
Problème Analyse Algorithme Programme exécutable, binaire
posé (LDFA)
Programmatique
Processus d’écriture d’un programme (logiciel)
3
Dr APPOH 0707930589
-Composantes structurantes d’un langage informatique dit langage de programmation ou encore langage de
programmation informatique
Exécution
Programme source
Programme objet (Programme ou fichier,
binaire ou Programme exécutable)
Appel à des librairies, des bibliothèques,

Processus
des modules ou unités (SE/OS …)
d’exécution
d’un Traducteur : compilateur et/ou
programme interpréteur
Edition de lien (linker ou binder)
-Processus ou instance d’exécution d’un programme : chargement en mémoire RAM, mémoire de travail, du
programme suivi de son exécution.
Programme objet (Programme ou fichier, binaire
Traducteur : ou Programme exécutable)
Programme
compilateur
source
et/ou Edition de lien (linker ou binder)
interpréteur
Appel à des librairies, des

Exécution
bibliothèques, des modules
ou unités (SE/OS …)
Processus d’exécution d’un programme
I-2-2- Structure d’un algorithme
L’algorithme est écrit en LDFA1. Au terme de l’analyse d’un problème à résoudre au moyen d’un logiciel
d’ordinateur, un modèle conceptuel plus ou moins formel annonçant l’ordinateur et non compris par cette
machine est créé. C’est l’algorithme, un ensemble d’instructions organisées en séquence. Il comprend un
entête (en-tête) et un corps.
I-2-2- 1- Entête et corps
Entête et corps constituent l’ossature structurelle d’un algorithme.
L’entête porte le nom de l’algorithme ou du programme via un identificateur.
1
LDFA : Langage de description formelle d’algorithme
4
Dr APPOH 0707930589
Le Corps comprend la partie déclaration et la partie instruction. Ce sont deux parties dont l’une
déclarative, la première en général et l’autre instructive.
- La partie Déclaration comprend la spécification des unités, des librairies ou bibliothèques, des
patrons et bien l’appel à d’autres programmes. Elle comprend la définition des constantes, des
variables, des types, des fonctions et procédures, des étiquettes ou labels. Ici, en somme, on a
l’indication ou la détermination des objets qui seront convoqués puis utilisés par la partie instructive.
- La partie Instruction a un commencent et une fin. Elle est en général délimitée par DEBUT et par
FIN. On parl aussi de bloc pour certains langages spécifiques (C, java, ..). Elle contient les
Instructions devant manipuler les objets déclarés ou définis précédemment dans la partie déclaration.
NB : Il existe une bibliothèque par défaut quand bien même aucune librairie n’est explicitement déclarée.
Cette bibliothèque contient les primitives de bases et les mots clés dont l’utilsation pour noter et définir les
identificateurs d’objets est interdite.
Pour de telles primitives de base, il faut comprendre : lire (ou saisir), écrire, assigner/affecter, instructions
conditionnelles, instructions itératives, , certaines fonctions mathématiques standard, mots clés.
Lire est une affectation particulière. Cette lecture fait recours à l’intervention d’un périphérique extérieur
(lecture de données entrées ou saies par un utilisateur).
Au plus structurel, tout logiciel est à l’image de la machine ordinateur, avec une unité des entrées,
une unité de transformation ou de traitement, une unité des sorties.
Algorithme en schéma
Exemple d’algorithme
Algorithme de calcul de xn
(voir fichier exemple : Exemple LDFAProgrammePuissanceRecur.pdf)
Exercice : Exemple : xn
Programme PuissanceRecur ; (*sans recursivité*)
Variable
a : réel ;
nombre : entier ;
fonction puiss (données : x : reel, n : entier) : reel ;
variable
p,i : entier ;
début
p1 ;i1
Si x=0 alors puis  0 ;
5
Dr APPOH 0707930589
sinon
si n =0 alors puis  1
sinon
pour i1 à n faire
p  p*x ;
finpour
Finsi
Finsi
puissp ;
fin
(*pp: programme principal*)
début
écrire (« calcul de la puissance d’un nombre : donner un nombre ») ;
saisir a ;
écrire (« donner un l’exposant ») ;
saisir nombre ;
afficher (« Puissance de », a, « exposant », nombre, « = » , puiss (a, nombre ) ) ;
fin
-----------------------------------------------------------------------------------------------------------
Programme PuissanceRecur1 ; (*avec récursivité*)
Variable
a :réel ;
nombre : entier ;
fonction puiss (données : x : reel, n : entier) : reel ;

début
si x = 0 alors puiss 0
sinon
si n = 0 alors puiss 1 ;
sinon
puiss  x * puiss(x, n-1) ;
finsi
finsi
fin
(*pp*)
début
écrire (« calcul de la puissance d’un nombre : donner un nombre ») ;
saisir a ;
écrire (« donner l’exposant ») ;
saisir nombre ;
afficher (« Puissance de », a, « exposant », nombre, « = » , puiss (a, nombre ) ) ;
fin
Dans le cadre de la récursivité, un choix judicieux d’un jeu d’essais dit déroulement de l’algorithme, permet de
valider l’application algorithmique.
Calcul de a= 5 et nombre = 4 : 54 :
6
Dr APPOH 0707930589
a Nombre puiss (a, nombre) autrement : a nombre
5 4 5 x puis(5,3)
5 4 5 x 5 x puis(5,2)
5 4 5 x 5 x 5 x puis(5,1)
5 4 5 x 5 x 5 x 5 puis(5,0)
5 4 5 x 5 x 5 x 5 x 1 = 54 = 625
En tant qu’un modèle conceptuel, l’algorithme est traductible dans un langage de programmation
comme pascal, java, python, php, ...
7
Dr APPOH 0707930589
II-HTML
Introduction
Vu l’intérêt du web actuel, presque toutes les applications tant anciennes, nouvelles qu’en construction sont
en totale migration vers une contexture web. Véritablement, le web devient de plus en plus le support des
applications toujours plus nombreuses. Considéré comme le grand service de l’internet, le web "parle" le
HTML, l’HyperText Markup Language. HMTL est un langage de balisage, de marquage conçu pour
représenter les pages web. Il permet d’écrire l’hypertexte donnant lieu à une navigation via l’hyperlien.
Quelques navigateurs web sont appelés logiciels navigateurs ou encore logiciels de navigation Internet. Ils
prennent aussi les noms tout courts d’explorateur, de fureteur, de browser, de butiner. En occurrences de
navigateur web, nous avons entre autres : Firefox Mozilla, Chrome, Microsoft Edge (ex Internet explorer),
Tor, Vivaldi, Brave, Netscape Navigator, ....
II-1- Aperçu synoptique HTML et structure de la balise

Html et HTML 5 comprennent les éléments structurants suivants : Balise, expression, chevron, élément,
attribut, valeur.
HTML est un langage de marquage ou de balisage. Il est donc composé de balises. Ces balises sont aussi
appelés tags, conteneur ou marqueurs.
Le concept de contenu du site porte en objet sur la partie visible par l’utilisateur via un navigateur.
HTML est du type de langage de programmation déclaratif au même titre que le CSS. Il est donc moins
procédural. En outre, Javascript est à la fois les deux. Par incrustation dans le HTML, d’autres langages
prennent leur sens entier. Ils sont multiples sous forme de script ou de style, en occurrence, PHP, CSS,
Javascript, XSLT, XSL, RDF, . ... OWL.
Les SGBD intégrant le web en partie ou complétement: Mysql, PostGress, Mongo DB, oracle, Microsoft
SQL Server, MariaDB .... (MariaDB est le dernier nom de mysql).
NB : Javascript inventé et créé 1995 par l’américain Brendan Eich, l’un des cofondateurs de Mozilla. Java de Sun
MicroSystem a été racheté en avril 2009, par Oracle. Javascript et Java sont bien distincts quand bien même, ils ont
des éléments communs.
Du même style que Javascript, on a VbScript, créé en 1996 par Microsoft.

Si les langages de style sont plus axés sur la mise en forme, les scripts quant à eux, renforcent la dynamicité
et l’interactivité des pages web. En plus, les scripts comprennent des techniques calculatoires intégrant des
fonctions mathématiques.
JavaScript repose le standard ECMAScript (ES). ES est un ensemble de normes concernant les langages de
programmation de type script et standardisées par Ecma International dans le cadre de la spécification
ECMA-262.
Il s'agit donc d'un standard, dont les spécifications sont mises en œuvre dans différents langages de script,
comme JavaScript ou ActionScript. C'est un langage de programmation orienté prototype.
8
Dr APPOH 0707930589
STYLES ( CSS /XSL) et SCRIPT (Javascript (JS) / VbScript (ASP, active server page))
CSS (style en cascade, en anglais Cascading Style Sheets),

XSL (eXtensible Stylesheet Language)
Programmes Scripts (Javascript/VbScript, Servlet/Applet java ...).
Editeurs html
Quelques-uns des éditeurs html sont représentés via leur logos et icônes dans la figure ci-après.
figure 1 Quelques éditeurs Html, PHP, JS

Déploiement
Toutes les pages sont déployées en ligne (online) sur un serveur notamment dit Server Web ou Serveur
Http. Pour exemple de serveur http, on a : Apache, Tomcat de J2EE (Java 2 Enterprise Edition). J2ME et
J2SE complètent à trois les éditions java. Un autre Serveur web est OC4J (ex C4J) pour Oracle Application
Server. Ceci sera plus explicité dans la partie 2 des technologies du web (programmation web 2).
L’installation de la suite ou package XAMPP (cross platform Apache MySQL PHP and PERL) facilite
celle du serveur web ou serveur http comme apache.
[ XAMPP est un acronyme, dans lequel "X" signifie Multiplatform, "A" signifie serveur Apache, "M"
signifie MariaDB, "P" signifie Perl (perl -v), et "P" signifie PHP].
Il en va de même de la suite WAMP server (Windows Apache MySQL PHP).
Nous utiliserons XAMPP dans ce cours.
Architecture N-tiers
Un exemple de l’architecture N-tiers est l’application à trois composantes structurales d’un point de vue de
la répartition des charges et de regroupement modulaire. On parle simplement d’application 3- tiers. On a
ainsi un triplet composé d’un Serveur web, d’un Serveur de présentation/application et d’un Serveur de
base de données.
Au plan pratique un correspondant à l’architecture 3 tiers est le triplet, (Apache, Php, Mysql). Apache, Php
et Mysql sont rassemblés dans XamPP comme dans Wamp.
9
Dr APPOH 0707930589
Tableau de correspondance des composants de l’architecture 3 tiers aux plans définition et pratique
Composants trois tiers
Au plan structurel et définitionnel Au plan pratique et opérationnel
Serveur web ou serveur http Apache
Serveur de présentation/application Php
Serveur de base de données Mysql
NB : Apache, Php, Mysql sont autant compris dans la suite XAMPP que dans celle de WamP (plus
ancien).
WAMP fonctionne sous Windows. Cependant, XAMPP est multi-plateforme (Unix, Ms-Windows, Linux,
...).
Dans la progression (1) HTML / DHTML / XHTML / XML/ … RDFS / OWL, la croissance structurelle
des langages du web se justifie par une augmentation de l’expressivité et de la sémantique.
HTML 5
figure 2 :Deux vues de DHTML (Dynamic html), (A) et (B)
(A) (B)
Remarque
NB1 : Les CMS, Content Management System signifiant, pour dire Système de Gestion des contenus
documentaires, sont des outils de gestion documentaire. Une dizaine d’années après l’apparition du web de
l’Internet (1992 -1994), les CMS furent vite intégrés jusqu’à nos jours.
Trois CMS de référence sont WordPress, Zoomla (couplage XamPP/Joomla pendant longtemps) et Drupal
avec les mêmes principes de base structurelle et de marquage/balisage avec Html (pas du cours, mais facile
à maitriser sur la base du cours).
NB2 : PHP et MySql sont très succinctement présentés ou pas du tout et seront abordés dans la deuxième
partie de la programmation web (DEVELOPPEMENT APPLICATION WEB Partie 2).
II-2-Site web dynamique
Au début de la conception des pages web (1992-94), on avait que des pages statiques. Quelques années
après, le dynamisme des pages a émergé.
Il est arrêté l’idée de page web statique comme une page où l’interaction est univoque et unidirectionnelle.
L’information va de la machine vers le visiteur, l’internaute qui ne pouvait interagir que par cliquage sur
les hyperliens. Ce visiteur n’avait qu’un rôle de récepteur de l’information. La création de site web statique
est révolue et n’a plus droit d’être citée, d’être mentionnée. La communication statique ou unidirectionnelle
de la machine vers l’internaute est plus que révolue actuellement.
10
Dr APPOH 0707930589
La page web dynamique va améliorer cette situation par l’instauration d’une communication
bidirectionnelle entre le serveur de pages web et le visiteur, l’utilisateur internaute. C’est l’avènement de
l’usage de formulaires, de bases de données offrant la possibilité à cet internaute de saisir et d’envoyer des
informations ou données aux serveurs qui les traitent et les relaient à différentes fins (pour d’autres
internautes ou pas). Il est fait usage d’une forte intégration des bases de données.
A l’heure actuelle distinguer une page web statique d’une page web dynamique importe peu. Cela dénote
aucune d’importance, tout simplement. Presque tous les sites web hébergent des pages web dynamiques. Ils
sont dits sites web dynamiques. Un site se définit comme un regroupement de page reliées par des liens
hypertexte. On parle de référencement dans le contexte des hyperliens, lorsqu’il est donné la possibilité de
naviguer d’une page à une autre, les deux pages étant de sites web différents. L’un des intérêts du
référencement consiste à promouvoir un site moins visité par celui de popularité plus grande.
II-3 Historique HTML
Toutes les applications anciennes, nouvelles ou en construction sont en totale migration vers une contexture
web à l’heure actuelle. Considéré comme le grand service de l’Internet, le web "parle " l’Hypertext Markup
Language, HTML. HMTL est le langage de balisage conçu pour représenter les pages web. Il permet
d’écrire l’hypertexte donnant lieu à une navigation via l’hyperlien via des ancres.
Quelques navigateurs web ou logiciels navigateurs ou encore logiciels de navigation Internet, prennent
aussi les noms tout courts d’explorateur, de fureteur, de browser, de butiner. En instances, nous avons
Firefox Mozilla, Chrome, Microsoft Edge (ex :Internet explorer, IE), Vivaldi, Opera, Tor browser,
Chromium, Netscape Navigator, ..
Dans les années 1989-1990, Tim Berners-Lee, un informaticien de renom, invente le Worl Wide Web
(WWW). Le HTML est une des trois inventions issues du WWW, les deux autres étant le Hypertext
Transfer Protocol (HTTP) et les adresses web (TCP/IP).
La pile ou famille TCP/IP (OSI, open system interconnexion), très révolutionnaire, elle l’a été. C’est grâce
à l’IP que le voyage par transmission de données de nature à la fois texte, parole et vidéo sur le même
signal est devenu possible.
HTML comprend le titre du document, la structuration du texte en titres, sous-titres, listes ou texte brut, les
hyperliens et aussi un principe de référencement (navigation d’un site à un autre principalement).
HTML se fonde sur le SGML (Standard Generalized Markup Language) qui est un langage généralisé des
balises standardisées. Aussi SGML a joué un rôle d'attraction des entreprises sur le HTML, plus détaillé.
Tim Berners-Lee invente également le web sémantique (RDF) vers les années 2000 (1998). Le RDF
matérialise et consacre le web sémantique. Il n’est pas traité dans ce cours.
II-3-1 Provenance ou origine de HTML
figure 2:de la provenance de HTML
SGML
(Standardized Generalised Markup Language)
HTML XML
HTML 5 XHTML WML MathML
11
Dr APPOH 0707930589
SGML : Standardized Generalised Markup Language
HTstatic3ML : Hypertext Markup Language = Langage de balisage
WML : Wireless Markup Language
Ces langages tous visualisables au moyen d’un navigateur. Quelques navigateurs en vogue sont Internet
explorer (IE) de Microsoft devenu (Edge), Firefox Mozilla, Chrome, Tor browser, Vivaldi, déjà listés.
D’autres termes existent pour désigner le navigateur notamment butineur, fureteur, browser, arpenteur,
fouineur ou encore explorateur.
Cette visualisation dans le navigateur doit indiquer une URI (URL ou/et URN)
Les codes sources HTML sont non séparables des exécutions de présentations contrairement aux langages
compilés.
figure 3 : Extrait du spectre de langages web.
RDF => RDFS => OWL ....

RDF : resources description framework
RDFS : resources description framework schema (formalisation de RDF en classes de la POO et plus)
OWL : ontology web language
XPTR (XML Pointer Language (XPointer)), (https://www.w3.org/TR/WD-xptr): image web
SVG : Scalable Vector Graphics, image vectorielle sous Inkscape for web, compatible RD
(https://www.w3schools.com/html/html 5_svg.asp)
XSL: (eXtensible Stylesheet Language).
Figure 2 : Généalogie des Langages web (Markup languages) et leurs structures propriétaire et habilitantes
correspondantes :
12
Dr APPOH 0707930589
SVG: Scalable Vector Graphics
SMIL : Synchronized Multimedia Integration Language
HDML : Handheld Device Markup Language for mobile phone
Figure 3 : HTML pour l’émergence d’autres langages de balisage xml, ...owl
Figure 4 : figure 3 avec dates associées
II-3-2 URI, URL et URN

Dans leur fonctionnement toutes les applications web se réfèrent à des Uniform Resource Identifier
(URI) pour l’accès aux ressources. Tout comme XML, HTML n’en est pas donc épargné.
Dans les URI nous rencontrons des Uniform Resource Locators (URL) et Uniform Resources
Names (URN ) comme le décrite graphiquement la figure suivante.
Figure 5 : URI
13
Dr APPOH 0707930589
L’URI est l’identificateur international de ressources.
II-3-3 Relations entre URI, URL et URN
La notion la plus générale est celle d'URI. Les URI comprennent les URL et les URN même si certains URI
peuvent être simultanément des URL et des URN. Les liens entre ces différents termes sont illustrés à la
Figure 5. Un URI est un identifiant qui permet de désigner sans ambiguïté un document ou plus
généralement une ressource. Cet identifiant doit donc être unique de manière universelle. Une URL
identifie un document en spécifiant un mécanisme pour le retrouver. Elle est composée d'un protocole suivi
d'une adresse permettant de récupérer le document avec le protocole. Un URN est, au contraire, un nom
donné à un document indépendamment de la façon d'accéder au document. Un exemple typique d'URN est
l'URN formé à partir du numéro ISBN (International Standard Book Identifier) d'un livre comme
urn:isbn:978-2-7117-2077-4. Cet URN identifie le livre Langages formels, calculabilité et complexité
mais n'indique pas comment l'obtenir.
La syntaxe générale des URI prend la forme scheme:ident où scheme est un schéma d'URI et où ident est
un identifiant obéissant à une syntaxe propre au schéma scheme. Chaque schéma définit un sous-espace des
URI. Dans le cas d'une URL, le schéma est un protocole d'accès au document comme http, sip, imap ou
ldap. Le schéma utilisé pour tous les URN est URN. Il est généralement suivi de l'identificateur d'un espace
de noms comme isbn. Sont donnés ci-dessous des exemples d'URI dont les deux derniers de la liste (L) sont
des URN.
liste (L) :
http://www.liafa.jussieu.fr/~carton/
sftp://carton@liafa.jussieu.fr
tel:+33-1-57-27-92-54
sip:0957279254@freephonie.net
file://home/carton/Enseignement/XML/Cours/XSLT
urn:oasis:names:tc:docbook:dtd:xml:docbook:5.1
urn:publicid:-:W3C:DTD+HTML+4.0:EN
Dans la pratique, la plupart des URIs utilisées sont des URL et les deux termes peuvent
pratiquement être considérés comme synonymes.
(A)
(A)
(B)
(B)
:
Structure d’un URL (uniform resource locator)
(A) et (B) symbolisent respectivement l’accès aux fichiers via un serveur et l’accès au fichier sans
serveur.
14
Dr APPOH 0707930589
Pérennité et lisibilité des URL
Exemple : http://fr.wikipedia.org/wiki/url
● Sens d’être des URLs (URIs) :

-permet et uniformise un accès direct à une date donnée ;
- facilite la citation de ressources bibliographique et d’indication de source ;
- facilite l’indexation dans les moteurs de recherche
- Moissonnage OAI
Autres URN
Protocole ARK : Archival Resource Key
- Mis en place par la BnF pour Gallica et BN Opale Plus (bnf is a generic specification of url)
- protocole créé et maintenu par la California Digital Library ;
- Faciliter la citation et le référencement de documents numériques ;
- Différents niveaux de granularité :
– Page précise d'un document ;
– Une image dans un lot d'images.
Protocole DOI : Digital Object Identifier (1998)

● Sous-partie d'un élément plus important : handle ;
● Gérés par Crossref pour le domaine de la recherche (scientifique) ;
● Fin 2009 : 43 millions d'enregistrements.
15
Dr APPOH 0707930589
XML /XMLS (Xml Name Space)
Contrairement à la liste décrétée de balises de formatage du HTML, le XML permet aux auteurs Web de définir leurs
propres balises et, par conséquent, leurs propres formats de document, sous réserve d'une syntaxe spécifiée dans la
recommandation XML.
À l'origine, ces définitions de balises étaient enregistrées dans un document distinct appelé Document Type Definition
(DTD). Cependant, ce système a été remplacé par XML Schema.
16
Dr APPOH 0707930589
III- Méthode pour une approche de construction ou d’élaboration d’un site
web et application web.
Deux techniques méthodiques d’enchaînements des activités conférées au développement d’application
web sont décrites. Une des méthode plus succincte est en 05 étapes et l’autre nettement plus fleuve ou
détaillée, en 10 étapes.
III-1 Approche succincte : conception et élaboration en Cinq (05) étapes

E1. Planification stratégique
Identifier les besoins de votre organisme et le public cible (formuler ou fixer les objectifs en se
posant les bonnes questions), Cahier des charges (contrat entre parties prenantes dans un projets,
dans un programme, dans une politique).
E2. Conception
Structurer : créer une arborescence cohérente des pages.
• proposer une structure de site cohérente
• indiquer le contenu à disposer sur le site et le décomposer par page
•Ergonomie
• si nécessaire identifier les technologies et outils utiles à la
Exemples de structuration arborescente des pages
NB : En vue de ne pas surcharger l’arbre diagrammatique, il n’est rendu qu’explicites les liens qui montrent
qu’on a effectivement fait le tour de la question. En d’autres termes, sont ici mis en relief explicitement, les
liens forts qui assurent l’exhaustivité des informations répondant aux préoccupations de vitrine
fonctionnelle du site une fois en service.
Il est donc possible de permettre la navigation de choix souhaitée d’une quelconque page à une autre soit à
durée convenable (temporairement ou durablement). La revue structurelle du site dans sa globalité permet
une amélioration après un temps d’utilisation (3 à 5 ans).
17
Dr APPOH 0707930589
Exemple de structuration tabulaire des liens entre pages (accueil page 1)
La page source est celle où se trouve l’ancre (ou ancrage) et la page cible, est celle obtenue après clic sur
l’ancre. Il peut s’agir de partie de page.
Exemple de six (6 pages) d’un site où x matérialise un lien ancre (ancrage) entre deux (2) pages dont l’une est la
source et la seconde la cible (< a Href >) :
Page cible
1 2 3 4 5 6
1 x x x x
2 x x
3 x x
Page source
4 x
5 x x x x
6 x x x
E3-Réalisation technique et artistique

Disposer des technologies et outils pour la réalisation/développement
Identifier et classer les contenus,
Rédiger pour le web et pour être lu.
Produire et éviter les redondances
E4. Mise en ligne
Déploiement et lancement pilotes et ensuite d’envergure (généralisation)
18
Dr APPOH 0707930589
E5. Exploitation
Maintenance et optimisation.
III-2 Approche détaillée : Elaboration plus explicite et détaillée en 10 étapes d’un site web,
son référencement et sa promotion
Précision liminaire : Cas de référencement

Il s’agit d’augmenter la visibilité d’un site à travers un autre plus visible (en principe suite à un accord entre
référenceur et référencé.
Le rôle du référenceur n’est pas de filouter les moteurs de recherche. Le principe est d’aider des machines à
comprendre les subtilités de la communication humaine.
NB : Eviter des sous tutelles de site sans lien de référencement avec la tutelle.
Parler d’une structure à un certain niveau d’intérêt sans que cette structure ne soit informée n’est pas
recevable. Il faut un lien de référencement.
19
Dr APPOH 0707930589
1 / Définir les cibles et modes de communication : Qui sont vos visiteurs, quels langages ou jargons
utilisent-ils ?
Selon la cible choisie, le type de discours, le niveau de complexité ou le vocabulaire utilisé seront
différents. La présentation graphique et le rédactionnel sont à adapter à la cible. On ne s’adresse pas de la
même manière à des adolescents ou des scientifiques, la communication B to B est différente du B to C.
2 / Définir l’offre : Qu’allez-vous proposer à vos visiteurs, de quoi allez-vous parler ?

Quels produits ou services souhaitez-vous mettre en avant ? Devez-vous tout présenter, tout dire ? Que
font vos concurrents ? Le font-ils bien ? Comment améliorer son site dans le temps? Qu’est-ce qui vous
différencie de vos concurrents? Définissez à l’écrit vos offres et prestations. En quoi êtes-vous meilleurs
qu’eux ?
3 / Définir les expressions clés : que vont taper les internautes qui recherchent votre offre ?
Qui recherche vos solutions, produits, services ? Comment l’expriment t-ils lorsqu’ils font une recherche
sur Google ? Quels sont les mots-clés de vos concurrents ? Quelles sont les expressions les plus
importantes pour votre positionnement. Le travail de référencement commence dès cette étape ! Plusieurs
outils peuvent vous aider : (analyse rapide référencement).
4 / Regrouper les thématiques : Comment organiser le discours pour reprendre les expressions-clés
choisies ?
Segmentez vos expressions-clés selon les services ou solutions que vous proposez. Regroupez les
expressions-clés par grands thèmes et à nouveau par ordre d’importance.
5 / Définir l’arborescence : Quelles seront les rubriques, sous rubriques, pages du site, vous
permettant d’organiser votre contenu de manière agréable en intégrant vos expressions-clés ?
Rédiger les grandes idées maitresses pour chaque page (tout en conservant à l’esprit vos
expressions-clés). Devez-vous diviser les contenus, créer plus de sous rubriques, plus de pages,
pour garder une idée maitresse par page et optimiser chacune d’entre elles pour une expression-clé
majeure ? Définir alors l’arborescence du site.
6 / Rédiger les textes : En respectant vos objectifs d’expressions-clés, finalisez les textes, validez le
volume de chacun d’entre eux.
Intégrer les expressions-clés, dans les Title, H1, H2, paragraphes. Ne pas oublier les synonymes, la
proxémie des mots dans les textes. Soignez vos descriptions. Vous rédigez pour le web, faites de petits
paragraphes distincts, plutôt que de longs blocs fastidieux. A lire : rédiger ses textes, importance des textes
pour le positionnement.
7 / Concevoir le graphisme : Présentez les contenus (textes et images) en fonction de leur importance
stratégique respective et de leur volume.
Le visuel est au service du contenu, pas l’inverse. Utilisez des artifices graphiques pour mettre en valeur les
points importants de celui-ci. Sauf exception, le graphisme ne doit pas être une démonstration artistique de
designer mais avant tout rendre agréable la visite du site. L’ergonomie du site va se jouer lors de la création
graphique. Gardez systématiquement à l’esprit l’aspect pratique, fonctionnel, instinctif que doit avoir le
design sur la navigation et la facilité de repérage dans le site. Le « référenceur » garde un œil sur toute cette
phase.
20
Dr APPOH 0707930589
8 / Développer le site : Réalisez l’intégration du contenu statique et pré- optimisez le contenu
dynamique, mettez en ligne.
Si possible, distinguez la forme du fond (CSS) pour faciliter les modifications ultérieures. Un codage
conforme aux recommandations du W3C assurera une meilleure pérennité au site. Pour les parties
dynamiques, pensez à optimiser les champs prévus en amont (titre de produit ou d’article, ancre des liens,
…).
9 / Promouvoir le site : recherche de partenaires, inscription sur sites externes, communiqués de
presse, buzz, achat d’espaces.
Une fois le site lancé, celui-ci nécessitera un travail de promotion et référencement Offpage. La recherche
de partenaires de thématiques connexes ou complémentaires permettra de travailler l’affichage publicitaire
ou l’échange de liens. Certains annuaires peuvent vous apporter du trafic ou de la notoriété. Les sites de
communiqués de presse, les blogs, les comparateurs pourront être des relais d’informations
supplémentaires. L’achat de mot-clé (référencement sponsorisés (naturel avec une image parlante) pourra
être un bon moyen de booster le trafic au lancement du site, ou pour des opérations ponctuelles ultérieures.
Un lien naturel (photo) est plus cliqué qu’un lien avec texte.
10 / Mesurer / corriger / développer : Exploitez les statistiques, ré-optimisez Onpage et Offpage selon
les résultats et ambitions.
Pas de bilan sans mesure. Un outil de statistiques adapté à votre site vous permettra de mieux comprendre
et connaître vos visiteurs. D’où viennent-ils, quels mots clés ont permis d’accéder à votre site, quelles
pages ou rubriques sont les plus souvent affichées ? Si cette provenance, mots-clés, pages consultées, ne
correspond pas à vos attentes, découvrez pourquoi et adaptez, modifiez, corrigez votre site ou la
communication faite autour de lui pour corriger le tir.
Et puis après …
Rappelez-vous toujours que dans de très nombreux cas, votre site web ne doit pas être votre
unique moyen de communication, mais puisque cela reste le sujet de notre propos, imaginez
d’autres solutions de promotion du site.
• Un blog de vrais conseils connexes à votre activité peut être un excellent moyen d’attirer
des visiteurs vers votre site.
• Une stratégie de présence sur les portails adaptés peut démultiplier vos visites.
• Une newsletter bien conçue peut générer un trafic non négligeable.
• Rejoignez les réseaux sociaux et utilisez-les pour promouvoir votre activité et votre site.
• Mettez en place un concours, proposez un outil gratuit, buzzez au moyen d’une vidéo, …
Et parce qu’il n’y a pas que le web …
• Utilisez des objets promotionnels, sponsorisez un programme télé, achetez un dirigeable,

repeignez l’Élysée, le siège de TF1, la tour Eiffel…
21
Dr APPOH 0707930589
VI- CODIFICATION EN LANGAGES À BALISAGE ET D’INCRUSTATION
Arborescence des balises (tag) :
Génération de langages de programmation : de 1 à 5
5GL
Langae à base de contrainte : prolog (inférence)
4GL
Langages : database queries SQL, report generators, data manipulation, analysis and reporting, screen painters
and generators, GUI creators, mathematical optimization, web development and general purpose languages
(css, html, script, …)
5
-Objet orientated, VL (visual language)
4 -Even driven : Langage évenementiel
(graphique)
3
Fondé sur un courant linguistique, culturel et social, le langage utilisé par l’homme, est bien la manière de
parler et de s’exprimer. Il est dit langage naturel. C’est une forme de langage qui n'est pas celle des
machines (e.g : ordinateurs).
Depuis l'apparition de l'ordinateur (aux environs de 1950), au moins cinq (5) générations de langages
informatiques afférentes (1GL, 2GL, 3GL, 4GL, 5GL) existent et se succédant par vaque.
Inspirés ou conçus sur le modèle de factorisation modulaire, les quatre (4) dernières générations de
langages (2GL, 3GL, 4GL, 5GL) sont superposables via une transformation structurelle (translation) au
langage machine binaire (la 1GL). Il en va de même d'une génération à la suivante (ou à l'autre).
Tous les langages écrits sont à différentes échelles de formalisme fondé sur une théorie (intuitive,
axiomatique ou axiomatique formelle) (MARCUS, Mathématique et linguistique, dans mathématique et
sciences humaines).
22
Dr APPOH 0707930589
3GL est la vague des langages dits langages évolués. C’est partir de ces langages que l’apprentissage des
langages informatiques d’ordinateur par enseignement et formation étendus a commencé.
3GL est propre à l’assemblage (assembler). Le binaire (langage machine) est la 1GL.
IV-1-HTML , XHTML, HTMLL 5
Le langage HTML (HyperText Markup Language) : langage de balisage principal pour les pages Web.
Les éléments HTML constituent la base fondamentale des pages Web. Le standard HTML a été créé par le
consortium World Wide Web (W3C).
HTML 5 est un langage de balisage permettant de structurer et de présenter du contenu pour le World
Wide Web (www ou w3). C’est une technologie de base d'Internet proposée à l'origine par Opera Software.
C'est la cinquième révision du standard HTML à laquelle s’ajoutent plusieurs éléments différentiels.
Date d’apparition de html 4 et html 5
Html 4 : 1999
Html 5 : 2015
Dans ce cours nous utiliserons HTML 5.

IV-2 DIFFÉRENCE ENTRE HTML ET HTML 5
La technologie Web est une norme qui permet de développer des applications Web à l'aide d'ensembles
prédéfinis de classes, d'objets, de méthodes et de propriétés disponibles dans un langage de balisage, un
langage de feuille de style ou un langage de programmation. Il fournit également une interface permettant
le partage d'informations entre un serveur Web et les clients.
Xhtml est plus rigoureux que html surtout dans la définition des balises (les entêtes y sont obligatoires :
<html>, <head>, <title>, and <body>)
Html simple commence souvent par
<html>
HTML 5 plus rigoureux avec XHTML car dispose de plus de spécifications commençant par :
<!DOCTYPE html> DTD
<HTML>
Encore plus rigoureux :
<!DOCTYPE html public ".//w3c/DTD XHTML 1.0 Strict // EN"

"http://www.w3.org/TR/xhtml/DTD/xhtml1-strict.dtd">
<HTML xmlsns=http://www.w3.org/1999/xhtml lang="fr" xml:lang="fr">
Bref.
• XHTML stands for EXtensible HyperText Markup Language
• XHTML is almost identical to HTML
• XHTML is stricter than HTML
• XHTML is HTML defined as an XML application
• XHTML is supported by all major browsers
23
Dr APPOH 0707930589
XHTML is a combination of HTML and XML. XMTL est sensible à la casse. Ce qui n’est pas le cas avec HTML
5. HTML 5 est la version 5 de HTML. Cependant XHTML et HTML5 convergent avec DTD.
Avec html 5 et xhtml, on a l’obligation d’indiquer <!DOCTYPE html> DTD.
HTML5 sémantiquement plus riche et plus expressif.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
De html à html 5, la syntaxe intègre de manière progressive des balises de plus en plus formelles et
rigoureuses dans leur écriture. Le nombre de balises augmente également avec html5.
Ainsi par exemple avec html5, le Doctype s’insère en tout début de page et ce de manière obligatoire. Il
sert à définir le type du document afin qu’il soit correctement interprété par le navigateur. La balise
correspondante est à la première ligne du code HTML. Plus précisément, Le Doctype (type of document),
<!DOCTYPE html>, doit toujours se situer avant la balise <HTML>.
IV-3-STYLES ET SCRIPTS
Style comme (CSS et XSL) renforcent les aspects d’apparence de mise en forme.
Les scripts (JavaScript, vbScript) renforcent les possibilités d’actions de calcul et autres (dynamiques).
Comment les incruste-t-on dans le html ?
Il y a en gros deux grandes possibilités d’utiliser un style ou un script à savoir :
- Par un fichier externe de sorte que plusieurs fichiers html peuvent faire usage de ce même fichier.
- Sans usage de fichier de style ou de script externe : par intégration ou incrustation directe de code de
styles ou/et de scripts.
Styles
Il y a plusieurs possibilités : style comme attribut ou style comme balise de head de html
-Dans <head>
La feuille de style déclarée dans l’en-tête via la balise <head> comme le schéma suivant :
<head> <head>
<style type="text/xsl"> <style type="text/css">
Style xsl code Style css code
</style> </ style>
</head> </head>
Déclarés style comme attribut d’un élément (eg : h1) pour insérer du CSS.
Exemple : style comme attribut de h1
---
<h1 style="font-family: Arial; font-style: italic;”>
Un texte qui se retrouvera en arial italique
<h1>
---
24
Dr APPOH 0707930589
Style peut être directement introduit dans le corps html via <span>, un élément inline.
Concernant CSS, en somme trois possibilités de son usage dans html : interne, externe (fichier css externe)
et inline-block (selon la balise).
Exemple :
<p>My mother has <span style="color:blue">blue</span> eyes.</p> My mother has blue eyes.
"color:blue" répond à du code CSS.

Un exemple de fichier externe CSS est bien " mystyle1.css " dont le contenu est :
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Ce fichier peut être appelé par plusieurs page html via dans l’élément head de html comme suit :
<link rel="stylesheet" href=" mystyle1.css">
<html>
<head>
<link rel="stylesheet" href=" mystyle1.css">
</head>
<body>
</body>
</html>
25
Dr APPOH 0707930589
<html>
<head>
<link rel="stylesheet" href=" style1.css"> <!—par fichier extene -->

</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
<style>
</style>
<h1 style ="font-family: arial font-style: italic">Afoue sidonie</>
<h2 {"font-family: arial font-style: italic, color:blue"}>Afoue boitini dakrome datte</h2>
<p>My mother has <span style="color:blue">blue</span> eyes.</p>
<style>
body {
background-color: lightblue;
}
h2 {
color: navy;
margin-left: 20px;
}
</style>
</body>
</html>
La balise style pouvait être dans head, ou partout dans le corps.
Héritage des styles
Lorsqu'on imbrique d'autres balises à l'intérieur de balises définissant un style, elles héritent du style défini
dans les balises de niveau supérieur.
Scripts
Exemple d’incrustation de javaScript
<head>
<script type="text/javascript">
java Script code
</script>
26
Dr APPOH 0707930589
Par fichier externe : <script type="text/javascript" src="script.js"></script>
IV-3-Quelques meilleurs éditeurs HTML gratuits.

Qu’est-ce qu’un éditeur HTML
Pour créer un site web, donc des pages web dites pages html ou d’en modifier le code il va de soi de disposer
d’un éditeur HTML. Il en va de même pour un système de gestion de contenu (SGC) ou en anglais, content
management system (CMS), comme WordPress . .
Ces éditeurs sont des logiciels d’aide à la création et à la conception de pages HTML.
Principalement, il existe deux types d’éditeurs HTML : éditeurs HTML WYSIWYG et éditeurs HTML de
codes.
• Les éditeurs HTML WYSIWYG, « What you see is what you get » Ce sont des éditeurs pour lesquels, il
n’est pas nécessaire de connaitre le langage HTML ou CSS. Néanmoins, il est bon d’avoir quelques notions
dans ce domaine, pour corriger d’éventuels bugs.
• Les éditeurs HTML de codes sont la deuxième catégorie d’éditeurs HTML. Ils ne permettent que d’afficher
le code. Mais, ils ont souvent très pratiques pour trouver des erreurs ou rechercher des mots dans une page et
des extensions très utiles comme emmet.
( Emmet est un plugin pour éditeurs de textes qui vous aide à créer HTML et CSS plus rapidement.
Pour créer un site web de A à Z, il est plus indiqué d’utiliser les éditeurs de code html. Les logos et
dénominations de quelques meilleurs éditeurs (simple rappel).
27
Dr APPOH 0707930589
IV-4- Structure d’une balise HTML
Il est possible d’admettre des fichiers de script javascript (js) et de style (cf entête du code html ci-après).
Structure de base pour html5

<!doctype html>
<html lang="fr">
<head>
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style.xsl">
<script type="text/javascript" src="script.js"></script> (1)
</head>
<body>
...

...
</body>
</html>
NB : <script type="text/javascript" src="script.js"> </script>
(1)ou <script src="script.js" type="text/javascript"> </script>
Explication
Html comprend trois grandes parties structurantes : prologue, entête et corps

(prologue )
<!doctype html> DTD (Document type definition)
<html lang="fr"> ou <HTML>
(entête)
<head>
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">

<script src="script.js" type="text/javascript"> </script>
</head>
(corps)
<body>
...
Commentaire
28
Dr APPOH 0707930589

...
</body>
</html>
Par incrustation directe de css dans l’élément head du html
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
h2, h3 {color:green;}
</style>
</head>
<body>
<h3>This, a heading, go well</h3>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<h2>Man and woman work for This heading</h2>
</body>
</html>
Intégration de CSS par fichier CSS externe dans le html

essaiHtmlStyl3.html
styl3.css
h1 {color:red;} <html>
<head>
p {color:blue;} <link rel="stylesheet" href="styl3.css">

</head>
<body>
<h1> This is a paragraph </h1>
<p> This is a paragraph.</p>
</body>
</html>
DTD : définition de type de document

Il indique le type de document traité.
29
Dr APPOH 0707930589
Les balises <!doctype html> (DTD : définition de type de document), <HTML>, <head> et <body> sont
obligatoires en html 5. Ce qui n’est pas le cas pour html où il est seulement tenu obligatoire la deuxième et
la quatrième.
Une DTD est une définition de type de document. Une DTD définit la structure et les éléments et attributs
juridiques d'un document XML. Ceci prédispose HTML via <!doctype html> pour la prise en compte de
xml dans HTML 5.
STRUCTUREL D’ARBRE EN HTML

Cette formalisation en code html bien utilise des balises ou tags. La structure des balises répond à une
arborescence ou à une hiérarchie de ces balises.
Illustration via Syntaxe HTML et approche arborescente
Ponction de code html (arbre)
Aperçu d’arbre 2
Approche de structure corrélative des pages arbre (graphe)

On a une page par nœud. Le nœud racine est pour la page d’accueil, comme le montre le cas transport ci-
après. Mais ici ce sont les thématiques traités et non des balises.
30
Dr APPOH 0707930589
On a une corrélation (bidirectionnelle ou unidirectionnelle) par href de liens hiérarchiques comme le
montre la figure juste au-dessus. (En outre, cette structuration pourrait être assignée à des balises XML).
Également des liens horizontaux peuvent être ajoutés et de tout ordre, au regard des intérêts qui se
dégagent.
En outre, on peut établir des liens de référencement de sites. Ce référencement consiste en des liens
hypertextes hors site. Par exemple, ce sont des liens établis pour des sites moins visité ou plus visité.
l’enjeu principal est l’intérêt de vitrine et de visibilité sur des activités, des découvertes, des offres
commerciales, de recherche, de partage, d’apprentissage, de projet, de propagande ...
Pour gagner en visibilité, les responsables d’un site peuvent solliciter un référencement à partir d’un site
populaire, suffisamment visités par les internautes.
V-Syntaxe à balises (Tags ou catégories)

Balise, expression, chevron, élément, attribut et valeur assignée à l’attribut, sont les composantes syntaxiques de
HTML (Html 5). Ce sont les éléments structuraux d’une balise ou tag HTML ou simplement de composition
structurelle d’une balise HTML .
Un conteneur est une balise X qui dispose d’une ouverture et une fermeture : < X > </X> .
Des balises vides, sans contenu existent comme <LINK> d’attributs rel et href.
Tout ce qui s’aperçoit dans le navigateur est le contenu.
Une balise est délimitée par deux chevrons dont l’un ouvrant (<) et l’autre fermant (>) à l’intérieur
desquels est disposé une expression.
<expression>
L’expression est constituée du nom de la balise (chaîne de caractères) appelé élément suivi éventuellement
d’un espace et d’un couple couples (attribut, valeur) tel que attribut = " valeur " ou de plusieurs couples.
Soit n tel que pour chaque i de 1 à n on a (attribut_i, valeur_i) traduit en pratique par attribut_i = valeur_i.
Ces couples sont séparés entre eux par des espaces. Ainsi une valeur est associée à chaque attribut.
De manière plus explicite, une balise HTML est constituée :
31
Dr APPOH 0707930589
• d’un chevron ouvrant (<) ;
• du nom de la balise (chaîne de caractères) appelé élément ;
• éventuellement suivi d’un couple attribut_1="valeur_1" ou de plusieurs couples attribut_i =
"valeur_i" (un espace sépare l’élément et le premier couple attribut_1="valeur_1" ainsi que les
couples attribut_i="valeur_i" entre eux) qui servent à préciser des caractéristiques.
NB : Les attributs sont également appelés propriétés ou paramètres ;
• d’un chevron fermant (>).
Ainsi, la syntaxe minimale d’une balise est : <élément>

Et la syntaxe générale d’une balise est :
<élément attribut1="valeur1" attribut2="valeur2" … attribut_i="valeur_i" …>
L’élément est donc la chaîne de caractères qui se retrouve entre le chevron ouvrant (<) et le chevron
fermant (>) ou un espace (" ").
Un fichier html a pour extension de fichier .html ou .htm

Un fichier xhtml a pour extension de fichier .xhtml
Un fichier xml a pour extension de fichier .xml
"Xml" s’affiche dans un navigateur au moyen d’une feuille de style (.css ou .xsl).
.css et .xsl sont des extensions de fichier correspondantes aux feuilles de styles.
Les feuilles de style classiques sont :

- Classic Style Sheet ou Cascading Style Sheets (CSS);
- et eXtensible Style sheet Language (XSL).
Une page web peut contenir : du texte, des images, des tableaux, des formulaires, etc.
◮ Le code source est basé sur des éléments repérés par des balises. Ils apportent un complément
d’information à la balise.
◮ En XHTML, les attributs s’écrivent en minuscules, sans espace, ni accent.
◮ Directement suivis de = et de guillemets.
◮ Les guillemets encadrent la valeur de l’attribut (pas de rèegle pour la valeur).
◮ <mabalise monattribut=”valeur”>
Mettre son texte en valeur avec <em> et <strong> à l’intérieur d’un paragraphe <p>.
Précision concernant les Attributs (propriétés)

Quelques aspects des attributs des balises HTML, relatifs aux arguments peuvent désormais être
facilement être remplacés par une feuille de style (XSL ou CSS).
Chaque balise HTML, qu’elle soit du type marqueur ou conteneur, peut recevoir ce qu’on appelle un
attribut. Un attribut, c’est en quelques sortes une propriété. Et comme toute propriété, on peut leur affecter
une valeur.
Voici un exemple d'une liste, les marqueurs de la liste (<ul>) sont des conteneurs alors que ceux des
éléments (<li>) sont vides:
32
Dr APPOH 0707930589
Exemple 1
<ul>
<li> trois chaises
<li> un fauteuil
<li> un canapé
</ul>
Les éléments vides ne sont pas des conteneurs. Ils sont sans fermeture.
Pour exemple, on a : <br> et <li> <ol> ne sont pas des contenant.
Exemple 2 (tdulliol.html)
<html>
<B>Utilisation de puces</B>
<ul>
<li> trois chaises
<li> un fauteuil
<li> un canapé
</ul>
<B>Des numeros à la place des puces</B>

<ol type="1">
<li> trois chaises
<li> un fauteuil
<li> un canapé
</ol>
</html>
Marqueur conteneur est un élément contenant d’autres éléments (div, span, spam ..)
Exemple div
Se référant au couple (attribut, valeur), pour affecter une valeur à un attribut, on utilise le signe = (égal). Ce
qui donne attribut="valeur", avec pour attribut le nom de l’attribut et pour valeur, la valeur que l’on souhaite
lui affecter (assigner).
Selon le type d’attribut, la valeur peut être soit du texte, soit numérique, soit un des deux, soit un peu des
deux, soit ne pas avoir de valeur du tout et se suffire à lui-même.
Les attributs (ou paramètres) qui sont inclus dans la balise précisent des caractéristiques en leur attribuant
des valeurs.
Les attributs s’insèrent après l’élément de la balise et avant le chevron (>).

Les attributs ne se placent que dans la balise d’ouverture, jamais dans celle de fermeture.
< > : balise d’ouverture

...... corps
......
</ > ou < /> : balise de fermeture
33
Dr APPOH 0707930589
Certains attributs sont indispensables comme par exemple le nom du fichier-image pour l’élément image
img :
<img src = "nom_image.gif" /> : src est un attribut de l’élément img.
Quand il y a plusieurs attributs, ils sont séparés par un espace les uns à la suite des autres, dans un ordre
quelconque, par exemple :
<img src="nom_image.gif" width="100" height ="250" alt="Ceci est la description de l'image">
La valeur de l’attribut est entourée par des guillemets. Le XHTML nécessite obligatoirement des guillemets
alors qu’en HTML, ils pouvaient être omis dans certains cas (nombres, alignements, noms de fichiers…).
Le guillemet peut être double (code décimal ASCII 34) ou simple (code décimal ASCII 39). On peut
l’obtenir en faisant alt +34 selon les ordinateurs.
Les nombres expriment en général des valeurs en pixels. Si l’unité est le pourcentage de la fenêtre, il faut le
préciser en mettant le signe % après le chiffre.
<hr width = "50" /> pour une ligne horizontale de 50 pixels

<hr width = "50%" /> pour une ligne horizontale de 50% de la largeur de fenêtre de l'utilisateur.
Les attributs les plus courants sont align, width, height et color :
• align="center" (ou « right » ou « left » ou « justify ») : alignement de ligne, paragraphe, tableau,
cellule…
• width="120" ou width="80%" : longueur de ligne, largeur d’image, de cellule…
• height="100" : hauteur d’image
• color="#FF3399" ou color="white" : couleur de bordure, de police, de cellule…
Attributs génériques (communs)

Ce sont des attributs que toutes les balises HTML (sauf exception, bien sûr) peuvent recevoir. Ainsi, on a
par exemple les trois attributs style, class et id spécifiques aux CSS :
• style : Cet argument permet d’appliquer un style directement sur l’élément.
• class : Cet argument contient le nom d’une classe qui a été définie à l’aide de feuilles de styles.
• id : Cet argument définit un identificateur, un peu ce que l’on appelle une étiquette dans les
langages de programmation.
En contexte de mise en forme par css et xsl, claas et id sont très utilisées pour factoriser des lots de mises
en forme par balise. Alors que class peut être répété dans la même page, id est une seule foi utilisée.
Elle est redondante (plusieurs id).
Trois autres attributs souvent utilisés dir, lang et title :
• dir : Il indique dans quel sens doivent être écrits les mots (gauche-droite, droite-gauche).
• lang : identificateur de langue. Cet attribut spécifie dans quelle langue de base sont écrits les
valeurs d’attribut et le contenu textuel d’un élément. La valeur par défaut de cet attribut est
inconnue.
• title : à ne pas confondre avec la balise <TITLE>. Il affiche dans une infobulle le texte placé à sa
suite. L’infobulle, c’est le petit texte qui s’affiche lorsque l’on reste un certain temps en
stationnement au-dessus d’un élément.
34
Dr APPOH 0707930589
Ainsi, sur un titre de niveau 5, on peut par exemple utiliser l’attribut title pour afficher une infobulle
lorsque le lecteur de vos pages stationnera un temps plus ou moins long sur votre titre :
<HTML>
<HEAD>
<TITLE>Exemple d'utilisation d'un attribut commun</TITLE> <!- - titre comme balise ou tag -- >
</HEAD>
<BODY>
<H5 title="Ceci est une infobulle">Placez votre souris sur ce titre pour voir l'infobulle</H5>
</BODY>
</HTML>
Exemple de l’attribut dir.
<p dir="rtl">This paragraph is in English but goes right to left.</p>

<p dir="ltr">This paragraph is in English and goes left to right.</p>
Autrement pour dir
<br>
<p style = "direction: ltr;">
whiteboards are so often at the core of a process.. ok2
</p>
<p style = "direction: rtl;">
whiteboards are so often at the core of a process ok1
</p>
….
<html>
<B>Utilisation de puces</B>
<ul>
<li> trois chaises
<li> un fauteuil
<li> un canapé
</ul>
<B>Des numeros à la place des puces</B>
<ol type="1">
<li> trois chaises
<li> un fauteuil
<li> un canapé
</ol>
<p dir="rtl">This paragraph is in English but goes right to left.</p>
<p dir="ltr">This paragraph is in English and goes left to right.</p>
<br>
<p style = "direction: ltr;">
whiteboards are so often at the core of a process ..ok2
</p>
<p style = "direction: rtl;">
whiteboards are so often at the core of a process.. ok1
</p>
<br><B style="color:blue">Autrement encore et ..encore</B>
<br><br>
<p align="right">Titre à droite</p>
<H4 align="right">Titre à droite</h4>
<H3 align="left">Titre à gauche</H3>
</html>
……
35
Dr APPOH 0707930589
Attributs de la balise <BODY>
BGCOLOR
L’attribut bgcolor fixe la couleur d’arrière-plan de la page.
Exemple :.
<HTML>
<HEAD>
<TITLE>L'attribut BGCOLOR dans BODY</TITLE>
</HEAD>
<BODY bgcolor=”black”>
</BODY>
</HTML>
TEXT
<HTML>
<HEAD>
<TITLE>L'attribut TEXT dans BODY</TITLE>
</HEAD>
<BODY bgcolor=black text=white>
Ceci est du texte blanc écrit sur un fond noir
</BODY>
</HTML>
BACKGROUND
L’attribut background permet d’afficher une image en arrière-plan. Il faut pour cela indiquer
l’URL de l’image correspondante ou chemin.
<HTML>
<HEAD>
<TITLE>L'attribut BACKGROUND dans BODY</TITLE>
</HEAD>
<BODY background="http://pcwarrior.multimania.com/images/bromelfe.jpg">
</BODY>
</HTML>
L’image mise ainsi est multipliée de sorte à couvrir toute la page.

Couleur de texte avec la balise font
Toujours dans Body
</body>
….
<font color="red">This is
<font color="green"> Ogou goes to market</font>
some text here!</font>
bien

36
Dr APPOH 0707930589
<br>Autres possibilit&eacutes; de spécification de couleur
<font color="#ff0000"> Og goes to market Agbèyeko</font>
<font color= rgb(255,0,0)> Og goes to market</font>
....
</body>
BALISE <LINK>
L'élément HTML <link> définit la relation entre le document courant et une ressource externe. Cet élément peut être
utilisé pour définir un lien vers une feuille de style, vers les icônes utilisées en barre de titre ou comme icône
d'application sur les appareils mobiles. Il est sans contenu et n’a que des attributs, rel, href.
[
The <link> tag defines the relationship between the current document and an external resource.
The <link> tag is most often used to link to external style sheets.
The <link> element is an empty element; it contains attributes only.
]
Exemple :
<head>
<link rel="stylesheet" href="styles.css">
</head>
Attributs : LINK, ALINK, VLINK

L’attribut link permet de fixer la couleur que l’on veut attribuer au lien de la page. L’attribut alink fixe
celle des liens actifs, vlink concerne les liens visités.
<HTML>
<HEAD>
<TITLE>Les attributs LINK, ALINK et VLINK dans BODY</TITLE>
</HEAD>
<BODY link=red alink=blue vlink=black>

</BODY>
</HTML>
Attributs des balises <H1> à <H6>

Il n’existe qu’un seul et unique argument pour les titres et sous-titres (hormis les attributs communs, bien
sûr) : l’attribut align (Aligne un titre à gauche, au centre, à droite ou le justifie). Il définit l’alignement
horizontal du titre. Il peut prendre quatre valeurs :
• left aligne le titre à gauche (option par défaut)
• center aligne le titre au centre
• right aligne le titre à droite
• justify justifie le titre
Syntaxe
<H1 Align=left|center|right|justify> ... </H1>
Exemple :
<H3 align="right">Titre à droite</H3>
37
Dr APPOH 0707930589
D’une manière générale, l’attribut align s’applique aux balises des éléments h1 à h6, p, div, sub, sup, tab,
hr, img, fig, table, tr, th, td, caption, input, select, textarea, array, item, div, …
VI-Codage des couleurs en HTML

Notation hexadécimale standard
Les chiffres hexadécimaux (base 16) vont de 0 à F (16 valeurs).
• Les chiffres de 0 à 9 correspondent à nos chiffres décimaux.
• Les lettres de A, B, C, D, E à F correspondent respectivement à 10, 11, 12, 13, 14, 15 en décimal.
Les couleurs sont codées en HTML sous la forme d’un dièse # suivi de 6 chiffres hexadécimaux. Les 6
chiffres se composent de 3 groupes de 2 chiffres selon le principe de la synthèse additive (composition à
partir de 3 couleurs fondamentales) RVB (Rouge Vert Bleu) ou RGB ( Red Green Blue). Les 2 premiers
chiffres codent le canal rouge, les 2 suivant le canal vert, les 2 derniers le canal bleu, soit #RRVVBB
(ex : #528F0B).
Le codage d’une couleur fondamentale (R ou V ou B) avec deux chiffres hexadécimaux permet d’obtenir
16 x 16, soit 256 valeurs d’intensité différente (de 0 à 255) de cette couleur ce qui permet de coder environ
16 millions de couleurs différentes (256 x 256 x 256). 00 correspond à l’intensité minimale de la couleur
fondamentale considérée (R ou V ou B), FF à l’intensité maximale de cette couleur. Considérons ces deux
valeurs extremes:
• RR=00 soit une valeur du canal Rouge = 0 donc une couleur noire, RR = FF soit une valeur du
canal Rouge = 255 donc une couleur rouge.
• VV=00 soit une valeur du canal Vert = 0 donc une couleur noire, VV = FF soit une valeur du canal
Vert = 255 donc une couleur verte.
• BB=00 soit une valeur du canal Bleu = 0 donc une couleur noire, BB = FF soit une valeur du canal
Bleu = 255 donc une couleur bleue.
Notation hexadécimale abrégée à suivre.
Break pour rappel très succinct
Notation binaire {0,1] avec deux symboles. C’est le langage binaire ou encore langage machine
Deuxième génération de langage à même de mapper le binaire est l’assembler ou langage d’assemblage
(add jump, move .... ) . On programme ici avec les objets directement liés aux processeurs registres
(accumulateurs), flag (drapeaux)...
Troisième langage générationnel (compilateurs, interpréteurs) : les langages évolués qui mappent à leur
tour l’assembleur. Quelques instances de langage évolués : ada, pascal, cobol, c, lisp, prolog, langages de
programmation objet (simula, smalltalk), delphi ....
Les langages de quatrième génération (graphique, les RAD) : VB
Après les langages de troisième génération, on a une multiplication de langages alliant convivialité,
complexité, et simulation de la réalité au mieux, tout en étant conscient de ne jamais pouvoir l’atteindre.
Mais un effort sans cesse est fait pour s’en rapprocher.
On a les langages de programmation orientés objet (POO) comme Java (interpréteur et compilateur), c++,
j++, python (procédural et POO).
Java est créé par Sun Microsystem racheté en début des années 2010 par Oracle (leader SGBD).
Langages graphiques : VB de Micosoft, PowerBuilder de Sybase.
Les RAD (rapide application development),
Les langages du web (interpréteur la plupart) et les scripts (vbscript, javascript)
Technologies jsp et asp (Microsoft).
38
Dr APPOH 0707930589
Voir code ascii et système de numération
Décimal : base 10 à 10 chiffres ou 10 digits B = {0 ;1 ;2 ;3 ;4 ;5 ;6 ;7 ;8 ;9 }
Binaire ou base 2 avec B={0 ;1) 2 chiffres ou digits
Octal ou base 8 avec B={0 ;1 ;2 ;3 ;4 ;5 ;6 ;7 } 8 chiffres ou digits
Hexadécimal base 16 avec B={0 ;1 ;2 ;3 ;4 ;5 ;6 ;7 ;8 ;9 ; A, B, C, D, E ; F } 16 chiffres ou digits
Voir cours système de numération :

Bref !!!!
Notation hexadécimale abrégée suite

Il existe aussi une notation abrégée #RVB qui correspond en fait à #RRVVBB (#7D4 correspond à
#77DD44).
Les couleurs communes aux navigateurs entre autres, Internet Explorer, Netscape Navigator et
chrome autres, sur PC ou Macintosh sont dites Web-safe.
Cette palette de base comporte 216 couleurs en théorie (212 en pratique) qui utilise exclusivement
des combinaisons de 00 33 66 99 CC FF pour le codage RVB.
16 couleurs peuvent être aussi désignées par leur nom en langue anglaise : aqua, black, blue, fuchsia,
gray, green, lime, brown, maroon, navy, olive, purple, red, silver, teal, white et yellow .
Codage de couleurs en html
Couleurs web-safe (Populaire) Couleurs non web-safe
Gris : gray =
Noir : black = "#000000" Blanc : white = "#FFFFFF" Pourpre : purple = "#800080"
"#808080"
Argent : silver = Marron : maroon =

Rouge : red = "#FF0000" Cyan : aqua (ou cyan) = "#00FFFF"
"#C0C0C0" "#800000"
Vert-jaune : lime = Vert olive : olive =

Magenta : fuchsia = "#FF00FF" Vert : green = "#008000"
"#00FF00" "#808000"
Bleu foncé : navy =

Bleu : blue = "#0000FF" Jaune : yellow = "#FFFF00" Turquoise : teal = "#008080"
"#000080"
Codage des couleurs en CSS

En CSS, les deux codages précédents restent valables, de plus on peut coder la couleur par la
fonction rgb(x,y,z) qui précise la valeur de chaque canal de couleur RVB de deux manières
différentes :
• par un pourcentage (de 0% à 100%) : rgb(0.5%,52.5%,100%)
• par un nombre de 0 à 255 : rgb (1,129,255)
39
Dr APPOH 0707930589
Une vision synthétique du codage des couleurs pour les CSS : cinq manières de spécifier
les valeurs d’une couleur sont à noter:
• #RRVVBB
• #RVB
• #rgb(rrr.rr%,vvv.vv%,bbb.bb%)
• rgb (rrr,vvv,bbb)
• keyword : l’un des 16 mots-clés reconnus pour désigner une couleur empruntée à la palette VGA
originale de Windows : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red,
silver, teal, white et yellow.
VII-Tableaux (Table in english)

The table tag displays information in rows and columns.
Tag Description Description, emploi de "il" pour tag
<table> Defines a table Il définit le tableau
<th> Defines a header cell in a table Il définit les entêtes de cellules
<tr> Defines a row in a table Il définit la ligne du tableau
<td> Defines a cell in a table Il définit la cellule du tableau
The following code:
<table>
<tr>
<td>Row 1 - Col 1</td>
</tr>
<tr>
</tr>
</table>
Produces a table that looks like:
Row 1 - Col 1 Row 1 - Col 2

Inside the <table> tag are <tr> or table row tags which in turn contain <td> or table cell tags.
Data goes in the <td> cell. That data can be text, other tags or whatever. Remember that first comes
<table>, then <tr>, then <td>, then and only then, data.
See good tutorials at :
40
Dr APPOH 0707930589
http://www.html-5-tutorial.com/p-tag.htm.
https://www.html-5-tutorial.com/table-tag.htm
https://www.html-5-tutorial.com/about-html.htm
Below I added some CSS and the border attribute (border="1") to better display the rows and
columns.
Here's the rub. There has to be the same number of cells in each row unless you indicate a table
cell spans multiple columns and/or rows.
Multiple columns :
<table border="1">
<tr>
<td colspan="2">Row 1 - Col 1 & Col 2</td>
</tr>
<tr>
</tr>
</table>
Row 1 - Col 1 & Col 2
Multiple rows :
<table border="1">
<tr>
<td rowspan="2">Row 1 & Row 2 - Col 2</td>
</tr>
<tr>
</tr>
</table>
Row 1 - Col 1
Row 1 & Row 2 - Col 2
Row 2 - Col 1
Or a combination of both:
<table border="1">
<tr>
41
Dr APPOH 0707930589
<td rowspan="4">Row 1, 2, 3 & 4 - Col 4</td>
</tr>
<tr>
<td colspan="2" rowspan="3">Row 2, 3 & 4 - Col 2 & 3</td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td colspan="2">Row 5 - Col 1 & 2</td>
<td colspan="2">Row 5 - Col 3 & 4</td>
</tr>
<tr>
<td colspan="4">Row 6 - Col 1, 2, 3 & 4</td>
</tr>
</table>
Row 1 - Col 1 Row 1 - Col 2 Row 1 - Col 3
Row 2 - Col 1
Row 1, 2, 3 & 4 - Col 4
Row 3 - Col 1 Row 2, 3 & 4 - Col 2 & 3
Row 4 - Col 1
Row 5 - Col 1 & 2 Row 5 - Col 3 & 4
Row 6 - Col 1, 2, 3 & 4
As I said, tables can get tricky – and I'm not done. In addition to the <tr> and <td> tags there are:
• <th> - Table header

• <colgroup> - Column Group
• <thead> - Table head
• <tbody> - Table body
• <tfoot> - Table foot
Also, you should know that in HTML 4.01 tables could have various attributes. The opening table tag
looked something like this:
<table cellpadding="5" cellspacing="5" border="1">
In HTML 5 most attributes (eg. cellpadding="5") have been eliminated.
42
Dr APPOH 0707930589
Exemple table
<!DOCTYPE html> <!- - Suite - - >

<html>
<head> <h2>Vertical Headings:</h2>
<style> <table style="width:100%">
table, th, td { <tr>
border: 1px solid black; <th>Name:</th>
border-collapse: collapse; <td>Bill Gates</td>
} </tr>
th, td { <tr>
padding: 5px; <th>Telephone:</th>
text-align: left; <td>555 77 854</td>
} </tr>
</style> <tr>
</head> <th>Telephone:</th>
<body> <td>555 77 855</td>
<h2>Horizontal Headings:</h2> </tr>
<table style="width:100%"> </table>
<tr>
<th>Name</th> </body>
<th>Telephone</th> </html>
<th>Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
https://www.w3schools.com/htmL/tryit.asp?filename=tryhtml_table_headers
Travaux du F:\cours\php\html css php jqury javacript\tdtpA ou tdtp
43
Dr APPOH 0707930589
Page web, Web, html et balises tous sont intrinsèquement liées.
Via <Style>, le style a pour but d’améliorer la mise en forme.

<script> pour incruster des programmes exécutables dans le navigateur
Infobulle
<BODY>
<H5 title="Ceci est une infobulle">Placez votre souris sur ce titre pour voir l'infobulle</H5>
</BODY>
title dans ce context précis n’est plus une balise mais un attribut. Nettement, infobulle va avec title qui n’a rien à avoir
avec <title> contenu</title>
VIII-CSS ET XSL
CSS ET XSL : div, class, id
Tout id en CSS se crée accompagné de (#).

Tout class en CSS est créé accompagné de (.)
Style styleA :
Mise en forme pour une balise (e.g : H5 )

H5 {
background-color: Blue;
color : orange;
margin: 20px 0 20px 0;
padding: 20px;
}
Une seule mise en forme pour plusieurs balises (H3 et B) :

H3, B {
color : orange;
padding: 20px;
}
L’écriture " H3, B " peut être remplacée par " H3 B ". L’ordre importe peu.
On crée une id via #ideef de mise en forme qui s’appliquera à un élément (balise).
#ideef {
}
On pourra en créer plusieurs mais un par élément balise.
On crée une classe via .idee2 de mise en forme qui s’appliquera à plusieurs éléments (balises).
.idee2 {
44
Dr APPOH 0707930589
color : orange;
padding: 20px;
}
p.idee {
color : orange;
padding: 20px;
}
div.cities {
background-color: greenyellow;
color : blue;
padding: 20px;
}
div.cities2 {
background-color: greenyellow;
color : white;
padding: 20px;
}
H5 balise
Partout où il y a :
<H5> contenu</H5>, s’appliquera le style pour l’élément h5 est défini dans styleA
Cities et cities2 sont des classes de mise en forme. Pour appliquer par exemple cities d’une part et cities2
d’autre part, on fera :
<p class="cities">
Contenu
</p>
<div class="cities2">
contenu
</div>
<div id="ideef">
contenu
</div>
<p class="idee">
contenu
</p>
-idee2 prend plusieurs bases
45
Dr APPOH 0707930589
<p class="idee2">
contenu
</p>
<a class="idee2">
contenu
</a>
<a > est inscrutable partout : dans les blocks, les inlines et dans les deux à la fois.
Les conteneurs sont les balises. Les contenus constituent ce qui est attendu d’être affiché dans le
navigateur aux yeux de l’usager (internaute). <BR> est une balise mais vide comme également <li>. Il
donne à aller à la ligne comme on le fera en c (" \n"). Il signifie break et est sans fermeeture.
IX-Liaison par href de l’élément balise a : lien hypertexte par ancrage ou

ancre (lien singulier).
Le lien hypertexte est la raison principale d’un texte hyper ou simplement hypertext, différent des textes
classiques.
Quelle est la longueur limite d’une seule page web ? On peut en faire un débat. Mais ce n’est pas essentiel
tant que nous avons de la mémoire.
Alors un lien hypertexte, pour dire texte géant presque "sans limite ".
Il basé sur l’élément balise <a> avec comme attribut href. Href (hyper référence) crée un ancrage ou un
lien hypertext.
Un lien hypertexte se crée au moyen de la balise < a > et de l’attribut href et le nom du fichier cible.
En exemple :
<a href= "cible.html " > monDuLienVisible </ a >
Orthogonalement à l’ hypertexte, une ancre est créée via la balise < a >, l’attribut href et #.
En exemple : < a href="#nomAncre"> ancrevisible1 </ a >
L’ancrage consiste en un repère vers un autre endroit d’une page web. C’est un identificateur qui
servira notamment pour les liens (à des endroits plus localisés sur une page).
En utilité, l’ancrage joue deux rôles principaux. Il est réflexif, c’est-à-dire sur la même page web. Le
second rôle s’accompagne d’un lien hypertexte ciblant un endroit précis d’une autre page (page cible).
Dans ce dernier cas, on obtient une combinaison des deux codes syntaxiques précédentes.
Exemple :
<a href= "cible.html# nom_de_l_ancre " > mon lien </a >
la syntaxe combine les deux précédentes
Types de liens
On a quatre (4) liens de base pour créer un ancrage :
-lien entre deux parties d’une même page web (par le moyen d’une ancre) ;
46
Dr APPOH 0707930589
-lien entre pages web entre deux fichiers. C’est un lien binaire hypertexte;
-lien entre deux parties dont l’une est sur une page web et l’autre sur une deuxième page web
-lien entre deux pages web avec une page par sites. Ce dernier est aussi dit un référencement.
Sur la même page web : Exemple de l’ancre intro .
<ol type="1">
<li><a href="#intro">Pourquoi les formulaires ?</a></li> (aa1)
<li><a href="#form">La balise principale</a></li>
<li><a href="#txt">Champ de saisie simple</a></li>
<li><a href="#txt2">Champ de saisie multi-lignes</a></li>
<li><a href="#hidden">Champ caché</a></li>
<li><a href="#radio">Bouton radio</a></li>
<li><a href="#checkbox">Bouton checkbox</a></li>
<li><a href="#list">Listes</a></li>
<li><a href="#jointe">Pièces jointes</a></li>
<li><a href="#button">Boutons de fonction</a></li>
<li><a href="#plus">Encore plus...</a></li>
</ol>
En cliquant sur " Pourquoi les formulaires ? " de (aa1) comme l’indique la première ligne du code
précédent, on est conduit en conséquence dans le texte à l’endroit où il est indiqué intro repéré par id ou
par name, des attributs de < a > et bien évidemment dans la partie ciblée (aa2)
<a name ="intro">Pourquoi les formulaires ?</a>(aa2)

Ou
<a id="intro">Pourquoi les formulaires ?</a>> (aa2)
Par clic sur " Pourquoi les formulaires ? " on arrive sur la description détaillée avec pour objet " Pourquoi
les formulaires " (aa2) .
En somme, par un clic sur (Pourquoi les formulaires ?) de (aa1), on accède au contenu de la page à l’endroit
où est définie l’ancre intro soit avec name soit avec id (aa2)
Exemple (voir Ancre.html)
Ancre sur une autre page : Indication vers un endroit d’une autre page web.
<a href= "cible.html# nom_de_l_ancre " > mon lien </a >
Ancrage pour indication vers un fichier, vers une autre page web


<ul class="navbar">
<li><a href="index.html">Home page</a>
<li><a href="reflexions.html">Réflexions</a>
<li><a href="ville.html">Ma ville</a>
<li><a href="liens.html">Liens</a>
</ul>
Par clic sur (Home page), on a accès au contenu du fichier index.html via un navigateur.
47
Dr APPOH 0707930589
Indication vers un autre site
Ce type d’indication est appelé référencement.

<a href="http://www.developpez.net/forums/" title=" Forums">Forums</a>
Liens relatifs (suite)

◮ Si mes pages sont dans le dossier page1.
◮ <a href= "t.html ">signifie qu’on va chercher le fichier t dans page1.
◮ Si page1 contient un dossier truc contenant le fichier toto.html, pour y accéder : :
<a href= "truc/toto.html ">
◮ Si toto.html est contenu dans un dossier contenant page1, on tape <a href= "../toto.html ">
(voir DlDdDtElementsCheminGood.html)
Liens absolus
Un lien absolu constitue l’adresse complète de la page cible.
Pour les pages extérieurs à votre site, il faut préciser L’URL (adresse du site, dossier et sous-dossiers).
Images
◮ Plusieurs formats. Oubliez bmp, préférez jpg, jpeg, png, gif. svg
◮ Balise <img >.
<img src=”monImage.png” alt=”descriptif” />
2 attributs obligatoires :
◮ src la source de l’image (extension comprise) en chemin absolu ou relatif.
◮ alt le texte alternatif `a l’image en cas de non affichage. Il est de taille limitée et peut être vide : ””
On peut mettre une info bulle avec l’attribut title.

◮ <img scr=”mon image” alt=”descriptif” title=”info bulle” />
Images liens (ancrage)
◮ On peut faire d’une image un lien.

◮ Ilsuffit d’imbriquer la balise <a >et la balise <img/ >
◮ <a href=”mon lien”> <img src=”mon_image.jpg” alt=”descriptif” title=”info bulle” /></a >
class et id selector
En CSS, la différence entre un ID (précédé de # ) et une classe (précédé de . ) est qu'un ID peut être utilisé
pour identifier un élément, alors qu'une classe peut être utilisée pour en identifier plusieurs éléments.
48
Dr APPOH 0707930589
Exemples : les fichiers t1.css et uset1a.html
uset1a.html
t1a.css
<!DOCTYPE html>
#top {
<html>
background-color: #dff;
<head>
padding: 20px <link rel="stylesheet" href="t1.css">
} <style> h3 {color:green;}</style>
.intro { </head>
color: red;
font-weight: bold; <body>
} <div id="top">
p.intro1{ <h1>Chocolate curry</h1>
color: green; <p class="intro">This is my recipe for making curry
purely with chocolate</p>
font-weight: bold;
<h1 class ="intro">ffddd</h1>
}
</div>
.intro2 {
<p class="intro2">Mmm mm mmmmm</p>
color: brown; <p>ffddd</p>
font-weight: bold;
} <div id="top">
<a href="../../ancre.html#banane">Bananes de
Yakro</a>
<br>Baker charles
Bah
</div>
<h1 class ="intro2">ffdddKacou Bia</h1>
<p class ="intro1">ffddd Kacou Bia</p>
<h3>ffdddKacou Bia</h3>
</body>
</html>
Résultat :
file:///C:/xampp/htdocs/www/tdtpA/kk/tk/useT1a.html
49
Dr APPOH 0707930589
X-CARACTÈRES SPÉCIAUX
car signifie ici Caractère .
Car Html en français En Anglais
â â a minuscule accent circonflexe small a, circumflex accent
à à a minuscule accent grave small a, grave accent
é é e minuscule accent aigu small e, acute accent
ê ê e minuscule accent circonflexe small e, circumflex accent
è è e minuscule accent grave small e, grave accent
ë ë e minuscule tréma small e, dieresis or umlaut mark
î î i minuscule accent circonflexe small i, circumflex accent
ï ï i minuscule tréma small i, dieresis or umlaut mark
ô ô o minuscule accent circonflexe small o, circumflex accent
œ &oelig; o e minuscule liés small o e diphthong (ligature)
û û u minuscule accent circonflexe small u, circumflex accent
ù ù u minuscule accent grave small u, grave accent
ü ü u minuscule tréma small u, dieresis or umlaut mark
ç ç c cedille minuscule small c, cedilla
< < inférieur à less than
> > supérieur à greater than
ß ß sz minuscule lié Allemand small sharp s, German (sz ligature)
ø ø o minuscule rayé small o, slash
Ω Ω Omega en grec grand O Omega
Ð Ð inférieur à capital Eth, Icelandic
Ø Ø O majuscule rayé capital O, slash
Þ Þ THORN majuscule Islandais Þ capital THORN, Icelandic
þ þ thorn minuscule Islandais small thorn, Icelandic
Å Å a majuscule anneau capital a, ring
Ces caractères spéciaux sont aussi codés en Unicode décimal et en Unicode hexadécimal également.
Exemple de Nom du code Unicode décimal Unicode hexadécimal

é é é é
50
Dr APPOH 0707930589
<!DOCTYPE html>
<html>
<style>
body {
font-size: 20px;
}
</style>
<body>
<span style='font-size:100px;'>é</span>
<p>I will display é</p>




</body>
</html>
Exemple
<html>
<B> âpre , pas du tout, Ok bon </B> <BR>
Temps de partir à l'école. Du travail pour ces personnes
</html>
âpre; ce n'est pas vrai. Pas du tout.

Résultat : Temps de partir à l'école. Du travail pour ces personnes
NB : <meta charset="utf-8">
En dépit de l’avancée de la codification ou de l’encodage des caractères spéciaux qui sont des caractères
et lettres de l’alphabet français ne se trouvant pas dans l’alphabet anglais américain, html 5 prend en
compte directement plusieurs caractères spéciaux sans leurs codes équivalents. L’attribut charset et sa
utf-8 permet de le faire effectivement.
<head>
<meta charset="UTF-8">
</head>
UTF-8 signifie Universal Character Set Transformation Format - 8 bits
La Charset est un attribut de la balise (ou du tag ou de l’élément) Meta qui détermine la façon dont le texte
est transmis et stocké.
51
Dr APPOH 0707930589
XI-INDICE, EXPOSANT, SOULIGNER, SURLIGNER
Indice, exposant
◮ <sub >en indice </sub >
◮ <sup >en exposant </sup >
é pour é; &egrave pour è;
<html>
<body>
<p> 1 <sup>ère </sup>molécule : H <sub>2</sub>O</P>
</body>
</html>
Résultat : l ère molécule : H 2O

Souligner : <u>texte à souligner</u>
<!DOCTYPE html>
<html>
<body>
<h4>The u element</h4>
<p>This is some <u>misspeled</u> text.</p>
</body>
</html>
The u element
Résultat :
This is some misspeled text.
This is some misspeled text. => Voici un texte mal orthographié.
Surligner : <mark>texte à surligner</mark>
<!DOCTYPE html>
<html>
<body>
<h4>The mark element</h4>
<p>This is some <mark>misspeled texte</mark> for next monday.</p>
</body>
</html>
The mark element

Résultat :
This is some misspeled text for next monday.
fieldset
<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday"><br><br>
52
Dr APPOH 0707930589
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
Résultat
XII-DIV ET ID
En style CSS, Div et id sont utilisés pour les besoins de mise en place d’un ancrage hyperlien mais
également pour la mise en forme à travers l’attribut style de la balise ou tag <DIV>).
Contextes d’utilisation de style
-incrustation directe : par balise ( <style> ) ou par attribut (style) de balise html dans une balise
html (inline opposé à block) ;
-par fichier externe CSS.
En html, a, href, name, id et # sont utilisés pour les besoins d’hyperlien ou de lien par ancre.
XIII-Éléments : INLINE ET BLOCK
in-line ou inline est pour un élément (balise) alors que block est pour un ou plusieurs éléments (balises) de
préférence.
Pour exemples, on a :
- inline (A, SPAN, EM, STRONG, IMG, BR, INPUT, ...);
- block (DIV, P, H1...H6, UL, OL, TABLE, PRE, …).
Les inline restent dans le texte et s’appliquent en général sur un seul élément.
Les blocs (block) ont au-delà pour prendre en compte plusieurs éléments (balises), block et/ou inline.
Les éléments de type "block" sont généralement ceux que l'on utilise pour la mise en page, alors que les
éléments "inline" sont surtout utilisés pour attribuer un style à une portion de texte.
block
53
Dr APPOH 0707930589
Un élément de niveau bloc commence toujours sur une nouvelle ligne et occupe toute la largeur
disponible ; Il s'étend à gauche et à droite autant que possible (A block-level element always starts on a
new line and takes up the full width available. It stretches out to the left and right as far as it can).
Une balise de type block sur votre page web crée automatiquement un retour à la ligne avant et après.
Votre page web sera en fait constituée d'une série de blocs les uns à la suite des autres. Mais vous verrez
qu'en plus, il est possible de mettre un bloc à l'intérieur d'un autre, ce qui va augmenter considérablement
les possibilités pour créer le design du site web.
inline
Un élément en ligne ne démarre pas sur une nouvelle ligne et ne prend que la largeur nécessaire. (An inline
element does not start on a new line and it only takes up as much width as necessary).
une balise de type inline se trouve obligatoirement à l'intérieur d'une balise block. Une balise inline ne crée pas de
retour à la ligne, le texte qui se trouve à l'intérieur s'écrit donc à la suite du texte précédent, sur la même ligne (c'est
pour cela que l'on parle de balise « en ligne »).
Les caractéristiques d'un élément de type block
• Les éléments de type block peuvent contenir à la fois d'autres éléments de type block, des éléments de
type inline ou du texte1.
• Il est possible de fixer une largeur et une hauteur à ces éléments
• Par défaut, la largeur d'un élément de type block est aussi grande que celle de son conteneur.
• Ils s'empilent naturellement les uns au-dessus des autres, dans l'ordre du flux HTML (Dans un flux de
texte, ils passent à la ligne et forcent le retour à la ligne des éléments qui les suivent, les caractères
invisibles présents avant et après sont ignorés).
Les caractéristiques d'un élément de type inline
• Les éléments de type inline ne peuvent contenir que d'autres éléments de type inline ou du texte encore
moins de type block
• Il n'est pas possible de définir une largeur et une hauteur explicite pour ces éléments
• Par défaut, leur largeur et leur hauteur dépendent du contenu de l'élément
• Ils s'écoulent selon le flux du texte HTML
Liste plus large des éléments HTML : Block, inline (ou in-line)
- Block elements in HTML
<address> <div> <figure> <nav> <section>

<article> <dl><dt> <footer> <noscript> <table>
<aside> <fieldset> <form> <ol> <tfoot>
<blockquote> <figcaption> <hr> <p> <ul>
<canvas> <h1>-<h6> <li> <pre> <video>
<dd> <header> <main>
Eléments de type "block" couramment utilisés
- <div> : balise multi-usage. Cette balise est souvent utilisée pour positionner un contenu dans la page.
- <h1> ... <h6> : encadre un titre ou un sous-titre.
- <p> : paragraphe.
- <ul>, <ol>, <dl> : listes (non ordonnée, ordonnée ou avec définition).
54
Dr APPOH 0707930589
- <li>, <dt>, <dd> : élément de liste, définition, et titre de définition.
- <table> : tableau.
- <blockquote> : paragraphe indenté (décalé à droite) normalement utilisé pour présenter une citation.
- <pre> : bloc de code préformaté.
- <form> : formulaire de saisie.
-Inline elements in HTML

<a> <button> <input> <samp> <sub>
<abbr> <cite> <kbd> <script> <sup>
<acronym> <code> <label> <select> <textarea>
<b> <dfn> <map> <small> <time>
<bdo> <em> <object> <span> <tt>
<big> <i> <output> <strong> <var>
<br> <img> <q>
Eléments de type "inline" couramment utilisés
- <span> : balise multi-usage, très pratique pour appliquer un style CSS à une portion de texte, par
exemple.
- <a> : ancre, permet de créer un lien sortant ou permet de spécifier un point précis de la page vers lequel
on veut diriger un lien.
- <strong> : utilisé pour marquer l'importance particulière d'une portion de texte. Tous les navigateurs
actuels afficheront cette portion en gras. NOTE : l'ancienne balise <b> (bold) est obsolète et ne doit plus
être utilisée.
- <em> : utilisé pour accentuer l'importance d'une portion de texte (de façon moins forte que <strong>).
Tous les navigateurs actuels afficheront cette portion en italique. NOTE : l'ancienne balise <i> (italic) est
obsolète et ne doit plus être utilisée.
- <img> : image, permet de placer une image au milieu du flux de texte.
- <br> : saut de ligne. Voilà un cas tout à fait particulier d'élément en-ligne, qui provoque un saut de
ligne. Malgré cette particularité, <br> n'est définitivement pas un bloc et doit être classé comme élément
en-ligne.
- <input> : champs de saisie dans un formulaire, tel que
- <abbr> : signale une abréviation (placez votre curseur dessus pour voir le fonctionnement).
EXEMPLES PRATIQUES sur élément inline et block
1-Block-level elements avec DIV
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_block_div
55
Dr APPOH 0707930589
2-Inline element avec SPAN
Cas1
Cas 2
3-inline-block, un mélange des deux

Avec cette valeur de la propriété display, vous allez avoir des éléments qui vont se comporter à la fois
comme s'ils étaient de type block et de type inline les caractéristiques de inline-block sont les suivantes :
• Les éléments de type inline-block peuvent contenir à la fois d'autres éléments de type block, des
éléments de type inline ou du texte.
• Il est possible de fixer une largeur est une hauteur à ces éléments
• Par défaut, leurs largeurs et leurs hauteurs dépendent du contenu de l'élément
• Ils s'écoulent selon le flux du texte HTML
Exemple de inline
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.inline, .inline-block {
width:100px;
height:100px;
border:1px solid #000;
background:red;
display:inline-block;
}
.inline { display:inline }
</style>
</head>
<body>
<h1>Inline elements</h1>
<div class="inline"> I am an element with a display of inline </div>
<div class="inline"> I am an element with a display of inline</div>
56
Dr APPOH 0707930589
<h2>Inline-block elements</h2>
<div class="inline-block"> I am an element with a display of inline-block</div>
</body>
</html>
A sauver : inlineblock.html
XIV- BALISES META

La balise <meta> définit des métadonnées relatives à un document HTML. Entre autres rôles aiguillés par
différents attributs, cette balise META sert à placer des métadonnées (metadata) dans une page HTML. En
occurrence il est possible de s’en servir pour fixer ou lister des mots clés (attribut keywords) en termes de
référents dans la recherche via un moteur de recherche.
Ces informations sont à placer dans l’élément head. Elles ne seront pas affichées sur la page en tant que
contenus.
Ces mots clés ne sont ni contenus, ni contenants. Cependant ils s’apparentent à plus du contenu caché donc
non vus explicitement par l’internaute utilisateur sur un client navigateur.
A quels outils doivent servir ou être destinées ces informations?

Elles sont destinées aux outils susceptibles de les exploiter, notamment :
- les navigateurs web ;
- les moteurs de recherche;
- et plus largement, à tous les outils d’indexation (c’est-à-dire les analyseurs des pages web pour y
identifier diverses informations).
<head>
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="refresh" content="30"> :
</head>
Dans ce qui précède, les mots clés sont : HTML,CSS et JavaScript
Autre exemple pour la définition de mot-clés via l’élément meta et les attributs name et content
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> in html 4, replaced in
html 5, with Unicode UTF-8, by <meta charset="UTF-8">
The Unicode Consortium develops the Unicode Standard. Their goal is to replace the existing character sets
with its standard Unicode Transformation Format (UTF).
<meta name="keywords" content="connaissances, péniche, écluses, paquebot, crise, décroissance" />
Les termes de mot-clés sont d’office indexés. Ils facilitent la recherche de votre site à partir d’un moteur de
recherche via l’un ou plusieurs de ces mots-clés.
L’exemple ici défini se base sur les mots clés : connaissances, péniche, écluses, paquebot, crise,
décroissance.
57
Dr APPOH 0707930589
DOM AVEC JAVASCRIPT ET CALCUL
Javascript est fonctionnel en mode Shell. En mode graphique, il est aussi employé en vue de soutenir
l’interactivité entre l’internaute et une page web. A cet effet, formulaire et zone de saisie HTML scellent
une communication bidirectionnelle inhérente aux pages web dynamiques sans référencer obligatoirement
une base de données. Dans le cas d’espèce, des entrées et sorties à but calculatoire sont possibles.
Ainsi, en mode graphique html par incrustation ou invocation externe de Javascript, est utilisé, un objet
basique incontournable dans la vision de la POO. Cet objet de javascript est le modèle objet de document
(Document Object Model en abrégé DOM). Il est doté comme en java de méthodes en termes d’assignation
définitionnelle et d’affichage. On parle d’obtention et de définition d’attribut de DOM (Getting and
Setting DOM Attributes). Cet objet comme instance de DOM est document dont une de ses méthodes est
getElementById(). (e.g : document. getElementById() dans l’exercice de calcul javascript en section
suivante).
NB : innerHTML est une propriété de tout élément HTML qui désigne le contenu qui se trouve entre la
balise entrante et la balise fermante. On l'utilise pour lire pour insérer dynamiquement un contenu dans une
page.
[ https://waytolearnx.com/2019/09/somme-de-deux-nombres-en-javascript.html]
Exemple d’utilisation de innerHTML
Nous allons ramener par affichage un contenu d’une balise (h1) par DOM Javascript via l’attribut
html qui id,
tdJsTDIddocument.html
<!DOCTYPE html>
<html>
Resultat
<body>
< !—h1 et son contenu identifié par id -->
<h1 id="id01">Yao Dakrom est à sa première page </h1>
< !—affichage de ce même contenu dans l’élément p -->
<p style="color:#0F0FBA"; id="id02"></p>

<h2 style="color:#FF0000"; id="id03"></h2>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").innerHTML;
document.getElementById("id03").innerHTML = document.getElementById("id02").innerHTML;
</script>
</body>
</html>
Remarque
Une assignation d’un id à un autre est une solution permettant de faire une copie en raison de
l’irrecevabilité de la duplicabilité de l’id.
58
Dr APPOH 0707930589
tdJsTDIddocument2.html
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTMLDOM</h2>
<p><B>Displaying</B> document.body</p>

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = document.body.innerHTML;
</script>
</body>
</html>
Autre exemple
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.documentElement</p>
<I>koffi </I>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = document.documentElement.innerHTML;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1 id="demo">The Document Object</h1>
<h2>La méthode getElementById() en HTML DOM </h2>
<script>
document.getElementById("demo").style.color = "red";
</script>
</body>
</html>
Résultat
The Document Object
La méthode getElementById() en HTML DOM
Liste de quelques travaux en JS utilisé en mode graphique (html)
59
Dr APPOH 0707930589
Création de serveur web par JS (mode shell), et affichage du contenu graphique
En dehors du package XamPP, il est possible de créer un serveur web.
tdServer.js
var http = require('http');

http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World!');
}).listen(8080);
Exécution de tdServer.js:
1-F:\TravauxPHP19>node tdServer.js
2-Saisir dans le client l’url localhost:8080
On obtient le résultat comme suit.
Résultat
A scruter (The next one to look at) :

https://www.digitalocean.com/community/tutorials/how-to-create-a-web-server-in-node-js-with-the-http-
module
https://www.w3schools.com/nodejs/ref_http.asp
Calcul avec Javascript par DOM via l’attribut, id
CALCUL AVEC JavaScript

<!doctype html>
<html>
<head>
<script>
function somme(){
var nbr1, nbr2, sum;
nbr1 = Number(document.getElementById("nbr1").value);
nbr2 = Number(document.getElementById("nbr2").value);
sum = nbr1 + nbr2;
document.getElementById("sum").value = sum;
}
</script>
</head>
<body>
Javascript : distinction
<input id="nbr1"> <BR> + <BR> = = et = = =
= ,id="nbr2"><BR>
entre<input
<button onclick="somme()">Calculer la somme</button><BR>
= <input id="sum">
</body>
</html>
60
Dr APPOH 0707930589
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button" onclick="document.getElementById('demo').innerHTML = 'Hello
JavaScript!'">Click Me!</button>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>My First JavaScript</h2>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p id="demo"></p>
<script>
// Create an object:
const car = {type:"Fiat", model:"500", color:"white"};
// Display some data from the object:
document.getElementById("demo").innerHTML = "The car type is " + car.type;
</script>
</body>
</html>
Listes non exhaustives de méthodes et de propriétés de DOM Javascript (ou Javascript DOM)
En POO, tout objet est muni par définition de propriétés et toujours de méthodes (au moins le constructeur
non explicite dit constructeur par défaut). En liaison applicative avec les balises html ou autres, listons
quelques propriétés et méthodes de Dom dont l’objet document, souvent utilisées.
61
Dr APPOH 0707930589
Propriétés de document
Propriété de document Représentant dans html

document.head (élément) : la balise HTML <head>.
document.body (élément) : la balise HTML <body>.
toutes les ancres du document (sont considérées comme ancres toutes
document.anchors (collection)
les balises <a> ayant un attribut name bien qu'une ancre puisse aussi
:
être atteinte par son attribut id).
représente tous les éléments correspondants aux balises HTML
document.embeds (collection) :
<embed>.
document.forms (collection) : tous les formulaires du document.
document.images (collection) : toutes les images du document (balises HTML <img /> uniquement).
tous les liens hypertexte du document (balises HTML <area> et <a>
document.links (collection) :
ayant un attribut href)
document.scripts (collection) : toutes les images du document (balises HTML <script>).
Méthodes de document
Les méthodes de l'objet document et/ou HTMLElement. Il est aussi possible de récupérer des éléments ou
des collections à partir soit de l'objet document, soit d'un objet HTMLElement.
Méthodes de document représentant dans html

récupère l'élément dont l'identifiant vaut la valeur passée en
getElementById(id) (élément) : paramètre. Cette méthode ne renvoie qu'un élément car un id doit
être unique dans le document. Ne s'applique qu'à l'objet document.
cette méthode prend en paramètre une chaine de caractères
querySelector(sélecteur CSS)
correspondant à une syntaxe de sélecteur CSS et renvoie le
(élément) :
premier élément du document correspondant à ce sélecteur.
getElementsByName(name) : récupère tous les éléments du document ayant un attribut HTML
(collection) name correspondant au paramètre passé.
getElementsByTagName(name) récupère tous les éléments du document dont le nom de balise
(collection) : correspond au paramètre passé.
getElementsByClassName(classe) récupère tous les éléments du document ayant un attribut HTML
(collection) :. class correspondant au paramètre passé
cette méthode prend en paramètre une chaine de caractères
querySelectorAll(sélecteur CSS)
correspondant à une syntaxe de sélecteur CSS et renvoie tous les
(collection) :
éléments du document correspondant à ce sélecteur.
Opérations
Opération Manifestation Résultat Description

assignation Nombre =12 affectation
Comparaison sans type avec promotion Nombre = = 12 true Les deux nombre et 12 deux sont
ou ajustement égaux
Comparaison avec promotion Nombre = = "12" true Les deux nombre et 12 deux sont
numérique (conversion égaux
systématique) du texte "12"
Comparaison stricte tenant compte du Nombre = = = “12” false Les deux nombre et 12 ne sont
type pas égaux
Comparaison stricte tenant compte du Nombre = = = 12 true Les deux nombre et 12 ne sont
type pas égaux
62
Dr APPOH 0707930589
Récupération de données d’un formulaire par js après saisie et clic sur bouton.
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script> Resultat
$(document).ready(function(){
$("#get").click(function () {
$("#output").html(
$("#txt").val() + "<br/>" +
$("input:radio[name=s]:checked").val()
);
});
});
</script>
</head>
<body>
Nom : <input id="txt"/>
<br /><br />
Sexe : <input type="radio" name="s" value="homme"/> Homme
<input type="radio" name="s" value="femme"/> Femme
<br /><br />
<input id="get" type="button" value="Récupérer les valeurs"/>
<p id="output"></p>
</body>
</html>
Idem pour le résultat avec le programme suivant.
<!DOCTYPE html> 

<html>
<head>
<script src="F:\cours\php\html css php jquery javacript\docetudiant\tdtpA/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#get").click(function () {
$("#output").html(
$("#txt").val() + "<br/>" +
$("input:radio[name=s]:checked").val()
);
});
});
</script>
</head>
<body>
Nom : <input id="txt"/>
<br /><br />
Sexe : <input type="radio" name="s" value="homme"/> Homme
<input type="radio" name="s" value="femme"/> Femme
<br /><br />
<input id="get" type="button" value="Récupérer les valeurs"/>
Javascript : console.log par shell et document.write et document.writeln par html
<p id="output"></p>
</body>
</html>
63
Dr APPOH 0707930589
Dans l’écriture à l’écran (affichage) les deux procédures console.log et document.writeln sont
différemment utilisées.
Alors que console.log s’utilise sous shell (interpréteur de commande de MS Windows 10),
document.writeln ou document.write est utilisée par incrustation de javascript dans html via la balise
<script>.
(1) Javascript via node sous Shell MS Windows console.log("Hi thеrе. Thiѕ tеxt iѕ writtеn uѕing
=> JavaScript!")
(2) JavaScript par incrustation dans Html via la balise document.write ("Hi thеrе. Thiѕ tеxt iѕ writtеn
<script> => uѕing JavaScript!")
Soit ma fonction: mafonction.js
sayHello() {
return "Hello World! <BR>";
}
(2) est en exemple pour tout ce qui est fait déjà. Un exemple de (1) suit, tpjs1.js.
Node Version showing :
Node -v
or =>
Node --verion
Pour quitter node.js en mode Shell, il suffit de faire : process.exit();

Exemple de code JS en mode shell
tpjs1.js au contenu :
console.log("Hi thеrе. Thiѕ tеxt iѕ writtеn uѕing JavaScript!");
console.log("Bien or good. Get starting well on");
_\travaux node \travauxJs\tpjs1.js =>

NB :
JQuery est un ensemble de bibliothèques JavaScript, dont un exemple est jquery.min.js
Node.js et jquery.min.js sont tous à télécharger.
Le Node.js, avant d’être utilisé, doit être installé.
Fonctions fléchées en Javascript
Les fonctions fléchées (arrow function en anglais) ont été introduites avec ES6 comme nouvelle syntaxe
pour écrire des fonctions JavaScript. Elles font gagner du temps de codage et simplifient la portée des
fonctions. Regardons l’évolution des syntaxes de fonction en JavaScript.
Fonction régulière : Fonction avec ES5 : Fonction avec ES6 :

function sayHello() { sayHello = function() { sayHello = ( ) => "Hello World!";
return "Hello World!"; return "Hello World!";
} }
De la syntaxe normale à la syntaxe ES6

64
Dr APPOH 0707930589
NB : ECMAS (European Computer Manufacturers Association Script) 5 en abrégé ES5 ou ECMAScript,
est une révision évolutive du script java.
Récupérer le nom, taille et type d’un fichier en JavaScript
<!—code html-->
<input type="file" id="myFile" onchange="getFileInfo()"/>
<!—code javascript-->
<script>
function getFileInfo(){
var name = document.getElementById('myFile').files[0].name;
var size = document.getElementById('myFile').files[0].size;
var type = document.getElementById('myFile').files[0].type;
var date = document.getElementById('myFile').files[0].lastModifiedDate;
var info = name+" "+size+" "+type+" "+date;
alert(info);
}
</script>
Récupérer le nom du fichier :
document.getElementById('myFile').files[0].name
Récupérer la taille du fichier
document.getElementById('myFile').files[0].size
Récupérer le type du fichier
document.getElementById('myFile').files[0].type
Création de pdf
http://www.fpdf.org/fr/tutorial/index.php
Suite De Fibonacci : fn+2 = fn+1 + fn

F0 f1 f2 f3 f4 f5 f6 f7 f8 f9 f10 f11 f12 ... fn+2
0 1 1 2 3 5 8 13 21 34 55 89 144 ... fn+1 + fn
Limite (fn+1 / fn ) == > 1,6
pour n de plus en plus grand
function fibonacci (nbr) {

var n1 = 0;
var n2 = 1;
var somme = 0;
for(let i = 2; i <= nbr; i++){
//somme des deux derniers nombres
somme = n1 + n2;
//assigner la dernière valeur à la première
n1 = n2; =>
//attribuer la somme au dernier
n2 = somme;
}
return nbr ? n2 : n1;
}
console.log(fibonacci(8));
65
Dr APPOH 0707930589
function fibonacci(nbr) {
var n1 = 0;
var n2 = 1;
var somme = 0;
for(let i = 2; i <= nbr; i++){

//somme des deux derniers nombres
somme = n1 + n2;
//assigner la dernière valeur à la première
n1 = n2;
//attribuer la somme au dernier
n2 = somme; =>
}
return nbr ? n2 : n1;

}
console.log("fibonacci(8)");
console.log("fibonacci(9)");
console.log("fibonacci(9)/fibonacci(8)");
console.log(fibonacci(9)/fibonacci(8));
https://www.codeur.com/blog/meilleures-librairies-javascript/#formulaire-localisation
Parseur (parser) ou analyseur
NB : Pour application de HTML, HTML avec CSS, XSL puis XHTML, XML et plus, il existe de
nombreux exercices avec parser (validator). Voir site https://www.w3schools.com/
Bootstrap : ensemble de styles (CSS, XLT) ou de fonctions script (.js) sous formes de bibliothèques dits
librairies (voir w3school).
66
Dr APPOH 0707930589
Exemple d’utilisation de bootstrap (CSs, Js)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">

<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<h3>Column 2</h3>
</div>
<h3>Column 3</h3>
</div>
</div>
</div>
</body>
</html>
67
Dr APPOH 0707930589
Quelques meilleurs Frameworks de développement Web ( 2020, 2021)
Quelques frameworks de développement web sont : Ruby on Rails, Laravel, Spring, Angular, Backbone,
backend, Ember, Express, frameworks, frontend, React, vue, flash.
Au nombre de 10, des frameworks sont estimés être les meilleurs après étude. ils sont classés en deux (02)
catégories : backend (back-end ) et frontend (front-end).
Frameworks Back-End (côté serveur) Frameworks Front-End (côté client)

Express JS Angular (mobile and desktop)
Django React
Ruby on Rails Vue
Laravel Ember
Spring Backbone
Remarque
Frontend developers primarily use three languages : HTML, CSS, JavaScript.
Over the past few years, the role of the frontend developer has evolved, and so professional frontend devs
might also want to consider developing some more intermediate to advanced JavaScript skills, as well as
building up experience using command-line tools and a framework such as React.
Backend developers need to be proficient in programming languages that render on the server-side of a
website or application. The most popular backend programming languages are PHP, Ruby, Python,
Node.js, and Java. Typically a good backend developer will be a master at one of these languages, but
familiar enough to code in a 2, 3 or more programming languages. Backend developers will also need to
proficient (capable, compétent) in working with databases like MySQL, Oracle, and SQL Server.
ATTENTION : NE PAS CONFONDE FRONT END ET FRONT OFFICE puis BACK END ET BACK OFFICE
BACK END et FRONT END, tous les deux concernent les développeurs aux points de vue de la conception,
de construction/développement et des modifications.
Quant aux concepts de BackOffice et de FrontOffice, seul le premier cité, concerne les développeurs et le
second les utilisateurs finaux.
En fait, FrontOffice est la partie visible de l’appli (application) par l’utilisateur final.
Les modifications se font principalement depuis le Back Office (e.g. depuis l’interface de WordPress).
Elles sont ensuite visibles par les internautes (utilisateurs finaux) sur le Front Office du site (le site
internet).
== > BackOffice Côté développeur et FrontOffice côté utilisateur.
68
Dr APPOH 0707930589
HTML Layout Elements
HTML has several semantic elements that define the different parts of a web page:
•<header> - Defines a header for a document or a section
•<nav> - Defines a set of navigation links
•<section> - Defines a section in a document
•<article> - Defines an independent, self-contained content
•<aside> - Defines content aside from the content (like a sidebar)
•<footer> - Defines a footer for a document or a section
•<details> - Defines additional details that the user can open and close on
•<summary> - Defines a heading for the <details> element
You can read more about semantic elements in our HTML Semantics chapter.
<!DOCTYPE html>
<html lang="en">
<head> < !—suite -->
<title>CSS Template</title> /* Style the list inside the menu */
<meta charset="utf-8"> nav ul {
<meta name="viewport" content="width=device-width, list-style-type: none;
initial-scale=1"> padding: 0;
<style> }
*{
/* Style the content */
box-sizing: border-box;
article {
}
-webkit-flex: 3;
body { -ms-flex: 3;
font-family: Arial, Helvetica, sans-serif; flex: 3;
} background-color: #f1f1f1;
padding: 10px;
/* Style the header */ }
header {
background-color: #666; /* Style the footer */
padding: 30px; footer {
text-align: center; background-color: #777;
font-size: 35px; padding: 10px;
color: white; text-align: center;
} color: white;
}
/* Container for flexboxes */
section {
/* Responsive layout - makes the menu and the content (inside
display: -webkit-flex;
the section) sit on top of each other instead of next to each other
display: flex;
*/
}
@media (max-width: 600px) {
/* Style the navigation menu */ section {
nav { -webkit-flex-direction: column;
-webkit-flex: 1; flex-direction: column;
-ms-flex: 1; }
flex: 1; }
background: #ccc; </style>
padding: 20px; </head>
} <body>
69
Dr APPOH 0707930589
< !—suite -->
<h2>CSS Layout Flexbox</h2>
<p>In this example, we have created a header, two columns/boxes
and a footer. On smaller screens, the columns will stack on top of
each other.</p>
<p>Resize the browser window to see the responsive effect.</p>
<p><strong>Note:</strong> Flexbox is not supported in Internet
Explorer 10 and earlier versions.</p>
<header>
<h2>Cities</h2>
</header>
<section>
<nav>
<ul>
<li><a href="#">London</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Tokyo</a></li>
</ul>
</nav>
<article>
<h1>London</h1>
<p>London is the capital city of England. It is the most populous
city in the United Kingdom, with a metropolitan area of over 13
million inhabitants.</p>
<p>Standing on the River Thames, London has been a major
settlement for two millennia, its history going back to its founding by
the Romans, who named it Londinium.</p>
</article>
</section>
<footer>
<p>Footer</p>
</footer>
</body>
</html>
70
Dr APPOH 0707930589
UTILISATION DE L’ARBORESCENCE DES RÉPERTOIRES DE FICHIERS
DANS LA NAVIGATION ( via HREF de A)
Pour créer un lien hypertexte, le répertoire par défaut est celui dans lequel se trouverait l’ensemble des
fichiers. Dans un tel contexte, les fichiers ne sont pas en différents répertoires.
Si les fichiers sont dispersés en différents dossiers, alors on a deux grandes possibilités d’adressage. L’une
consiste à indiquer de manière exhaustive le chemin (chemin complet) du fichier solliciter (chemin absolu).
L’autre possibilité est d’utiliser les techniques d’adressage d’hiérarchie ingénieuses ou futées selon la
descendance ou l’ascendance.
Descendance :
Aller dans le ../chemin/nomfichierHtml
sous dossier
Ascendance : ../../nomfichierHtml
Remonter dans
(Nombre d’hiérarchies antérieures : 2)
les parents
Parenté2Deparenté1/parenté1/nomfichierHtml
Pour cette pratique, nous mettons en jeu, les fichiers ancre.html et useT1.html .
C:/xampp/htdocs/www/tdtpA/kk/tk/uset1.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../../t1.css">
<style>
<-- h1 {color:red;}-->
h3 {color:green;}
</style>
71
Dr APPOH 0707930589
</head>
<body>
<div id="top">
<h1>Chocolate curry</h1>
<p class="intro">This is my recipe for making curry purely with chocolate</p>
<h1 class ="intro">ffddd</h1>
</div>
<div style="color:blue;">NOUVEAU Arrivage de produits laitiers </div>
<p>ffddd</p>
<a href="../../DlDdDtElementsCheminGood.html">Grand Retour vers DlDdDtElementsCheminGood ...ok
</a>
<h3>retour à DlDdDtElement, blabla non plutot allons vers ancre</<h3><br>
<a href="../../ancre.html#txt2">En route pour un ...endroit précis txt2 de ancre</a>
<br><br>
<a href="../../ancre.html#banane">Bananes de Yakro</a>
</body>
</html>
C:/xampp/htdocs/www/tdtpA/ancre.html#txt2 => Extrait code de ancre.html :
<a id="txt2"><h2 style="color: blue"><u>Champ de saisie multi-lignes AppohhGer</u> <h2></a>

<b style="color: georgian">Nous presentons les formulaires dans ce qui suit.</b>
<h5> <i>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor
in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros
et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi.
</i></h5>
<BR>
<a href="#haut">Exemple des sélecteurs "name" et "id</a><br>
<h5><a href="../tdtpA/kk/tk/uset1.html">Quittons ancre pour useT1</a>
72
Dr APPOH 0707930589
Affichage de C:/xampp/htdocs/www/tdtpA/kk/tk/uset1.html
Extrait Affichage de C:/xampp/htdocs/www/tdtpA/ancre.html#txt2
73
Dr APPOH 0707930589
74
Dr APPOH 0707930589
Héritage dans JavaScript
Exemple via classJavaScriptTptdpoo1.html
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Class Inheritance</h2>
<p>Use the "extends" keyword to inherit all methods from another class.</p>
<p>Use the "super" method to call the parent's constructor function.</p>
<p id="demo"></p>
<script>
class Car {
constructor(brand) {
this.carname = brand;
}
present() {
return 'I have a ' + this.carname;
}
}
class Model extends Car {
constructor(brand, mod) {
super(brand);
this.model = mod;
}
show() {
return this.present() + ', it is a ' + this.model;
}
}
<!- - programme appellant -->
mycar = new Model("Ford", "Mustang");

document.getElementById("demo").innerHTML = mycar.show();
</script>
</body>
</html>
Resultat
75
Dr APPOH 0707930589
Tutorial de référence pour les travaux, voir les sites via les liens URL :
https://www.tutorialrepublic.com
https://www.w3schools.com/html/ (avec parser )
https://www.tutorialrepublic.com/html-tutorial/html5-svg.php (avec parser )
https://waytolearnx.com/2019/09/somme-de-deux-nombres-en-javascript.html
https://waytolearnx.com/2019/10/executer-javascript-en-ligne-de-commande.html (node.js)
https://waytolearnx.com/category/javascript
http://www.tutorialrepublic.com/php-tutorial/php-date-and-time.php
https://w3schools.sinsixx.com/js/js_examples_3.asp.htm
Caroline DEVRED, Université d’Angers, développement web
76
Dr APPOH 0707930589
POO (Simula, Smalltalk, Java, ...)
JavaScript n’est pas Java et vice versa, bien que ces deux langages ont en commun certaines structures de
données.
Java
JavaSCript
Javacsript
77
Dr APPOH 0707930589
Javacript vs Jquery (node.js, bootstrap)
Table de comparaison
JAVASCRIPT JQUERY
Type Langage de programmation. Bibliothèque JavaScript, Librairie
JavaScript est un langage interprété, Utilise les ressources fournies par JavaScript pour
Langage
écrit en C. faciliter les choses.
Avec JavaScript, il est nécessaire de
gérer la compatibilité avec tous les
Compatibilité JQuery est une bibliothèque multi-navigateurs.
navigateurs en écrivant leur propre
code.
Avec JavaScript, il faut écrire plus de Avec JQuery, il faut écrire moins de lignes de code
Longueur du code
lignes de code. que JavaScript.
Côté client/serveur Couramment utilisé côté client
https://www.cours-gratuit.com/
http://php.net/manual/en/function.include.php
Formulaire et saisie dans html <Form> et <input>

http://www.html-form-guide.com/php-form/php-form-variables.html
http://www.html-form-guide.com/html-form/html-form-input.html
script4.php
<?php
// déclaration de variables
$nom = "Olivier" ; /* nom de l'utilisateur*/
$titre_page = "Les éditions ENI présentent ....." ; //titre de la page et résumé
?>
<html> php
<head> html
<title> <?php echo $titre_page ?></title> php
</head> javascript
<Body> html
<?php
//génération du code javascript chargé de l'affichage echo
echo "<SCRIPT LANGUAGE=\"Javascript\">\n";
echo "aujourdhui = new Date()\n";
echo "document.write('Bonjour <B> $nom</B> ! <BR>')\n";
echo "document.write('Nous sommes le ')\n" ;
echo "document.write('aujourdhui .getDate(),'/ ')\n" ;
echo "document.write('aujourdhui .getMonth()+1, '/ ')\n" ;
echo "document.write('aujourdhui .getYear(),' ; ')\n" ;
echo "document.write('il est ' )\n" ;
echo "document.write('aujourdhui .getHours(),' : ' )\n" ;
echo "document.write('aujourdhui .getMinutes(),' : ' )\n" ;
echo "document.write('aujourdhui .getSeconds(),' . ' )\n" ;
echo "</SCRIPT>\n";
?>
</Body>
</html
78
Dr APPOH 0707930589
script4.php
<?php
// déclaration de variables
$nom = "Olivier" ; /* nom de l'utilisateur*/
$titre_page = "Les éditions ENI présentent ....." ; //titre de la page et résumé
?>
<html>
<head>
php
<title> <?php echo $titre_page ?></title>
html
</head>
php
<Body>
javascript
<?php
html
//génération du code javascript chargé de l'affichage echo
echo "<SCRIPT LANGUAGE=\"Javascript\">\n";
echo "aujourdhui = new Date()\n";
echo "document.write('Bonjour <B> $nom</B> ! <BR>')\n";
echo "document.write('Nous sommes le ')\n" ;
echo "document.write('aujourdhui .getDate(),'/ ')\n" ;
echo "document.write('aujourdhui .getMonth()+1, '/ ')\n" ;
echo "document.write('aujourdhui .getYear(),' ; ')\n" ;
echo "document.write('il est ' )\n" ;
echo "document.write('aujourdhui .getHours(),' : ' )\n" ;
echo "document.write('aujourdhui .getMinutes(),' : ' )\n" ;
echo "document.write('aujourdhui .getSeconds(),' . ' )\n" ;
echo "</SCRIPT>\n";
?>
</Body>
</html
http://algor.chez.com/math/math.htm
79
Dr APPOH 0707930589
AJAX
Voir AJAX-asynchronous-javascript-and-xmlBon.pdf
Définition de AJAX
AJAX est un acronyme signifiant Asynchronous JavaScript And XML ("XML et Javascript
asynchrones "), et désignant une solution informatique libre pour le développement d'applications
Web.
● À l'image de DHTML, AJAX n'est pas une technologie en elle-même, mais un terme qui évoque
l'utilisation conjointe d'un ensemble de technologies libres en usage courant sur le Web :
● HTML (ou XHTML) pour la structure sémantique des informations ;
● CSS pour la présentation des informations ;
● DOM et JavaScript pour afficher et interagir dynamiquement avec l'information
présentée ;
● l'objet XMLHttpRequest pour échanger et manipuler les données de manière asynchrone
avec le serveur Web.

● XML pour remplacer le format des données informatives (JSON) et visuelles (HTML)
Historique (AJAX)
● 1989-1990 : Web
Le World Wide Web a été créé en 1989, et popularisé dans les années 1990.
● 1996 : Javascript
Le langage de programmation Javascript est apparu pour la première fois en 1996, dans le navigateur
Web Netscape Navigator.
● 1998 : Document Object Model (DOM)
L'interface de programmation Document Object Model (DOM) a été normalisée par le W3C en 1998.
● 1998 : XMLHttpRequest
XMLHttpRequest est initialement un composant ActiveX créé en 1998 par Microsoft pour leur application
web Outlook Web Access, puis il a été ajouté à la norme ECMAScript relative au langage Javascript
et mis en oeuvre sur la plupart des navigateurs du marché entre 2002 et 2005.
● 2005 : Le terme Ajax est introduit par Jesse James Garrett
XMLHttttpRequest de AJAX
● XMLHttpRequest est un objet ActiveX ou Javascript qui permet d'obtenir des données au format XML,
mais aussi HTML, ou encore texte simple à l'aide de requêtes HTTP.
● L'avantage principal est dans le côté asynchrone. La page entière ne doit plus être rechargée en totalité
lorsqu'une partie doit changer ce qui entraîne un gain de temps et une meilleure interaction avec le serveur
et donc le client.
Le XMLHttpRequest est un objet de programmation, utilisé dans les programmes en langage Javascript
pour assurer la communication entre le navigateur et un serveur Web. Il est utilisé pour envoyer les
requêtes vers le serveur et déclenche des opérations lors de la réception de réponses de celui-ci.
80
Dr APPOH 0707930589
Principe
Dans une application Web, la méthode classique de dialogue entre un navigateur et un serveur est la
suivante : le client émet une requête HTTP et le serveur envoie une réponse sous forme d'une page Web à
destination du client.
● Chaque manipulation entraîne la transmission d'une requête et l'affichage d'une nouvelle page et
l'utilisateur doit attendre l'arrivée de la réponse pour effectuer d'autres manipulations.
● En utilisant Ajax, le dialogue entre le navigateur et le serveur se déroule la plupart du temps de la
manière suivante : un programme écrit en langage de programmation Javascript, incorporé dans une page
web et exécuté par le navigateur, envoie des demandes au serveur Web, puis modifie le contenu de la page
actuellement affichée par le navigateur Web en fonction du résultat reçu du serveur, évitant ainsi la
transmission et l'affichage d'une nouvelle page.
Intérêts de Ajax
● Dans les applications Web en Ajax, une page Web est typiquement envoyée une seule fois. La page
envoyée contiendra un programme écrit en langage Javascript.
Lors des manipulations effectuées sur la page par l'utilisateur, le programme en Javascript envoie des
requêtes au serveur Web, le serveur répondra aux requêtes en envoyant un document au format XML, ce
document ne contient pas d'information de présentation et le nombre d'informations qu'il contient est
souvent réduit, d'où des temps de latence typiquement plus réduits que ceux d'une application Web
classique.
● Ajax permet de mettre en oeuvre des fonctionnalités qui se rencontrent uniquement dans les Rich Internet
Application.
Avantages
81
Dr APPOH 0707930589
Le but recherché d'Ajax est la diminution des temps de latence, l'apport de nouvelles fonctionnalités et
l'augmentation de la réactivité de l'application Web. Les applications Web qui possèdent ces qualités sont
appelées Rich Internet Application (RIA).
● Par rapport à des produits concurrents, tels que Adobe Flash/Flex ou Silverlight, qui nécessitent
l'installation d'un plug-in, Ajax fait usage de technologies présentes de série sur la plupart des navigateurs
Web sur le marché.
Inconvénients
● Javascript est un langage de programmation souvent utilisé pour réaliser et répandre des virus
informatiques et des logiciels malveillants.
Les clients peuvent parfois interdire l'exécution des programmes écrits en Javascript et cela empêche les
applications Web en Ajax de fonctionner.
● Les robots d'indexation (des moteurs de recherche) exploitent les mécanismes classiques du web et
n'exécutent pas les programmes en Javascript. Par conséquent, le contenu des pages créées par un
programme Javascript ne sera pas ajouté à l'index du moteur de recherche. Le même problème se pose avec
les produits c
Web : Ensemble des données reliées par des liens hypertextes sur Internet.
Il fait référence au système hypertexte fonctionnant sur le réseau informatique mondial Internet.
Par abus de langage, le Web désigne de façon plus large tout ce qui se rapproche à cet univers internet.
On ne fait plus toujours aujourd'hui la distinction technique entre ce que définit le Web et ce que définit
Internet.
Inventé par Tim Berners-Lee et Robert Cailliaud à la fin des années 1980.
Internet : Réseau informatique mondial.

Internet : Réseau informatique mondial ou encore le réseau d’ordinateurs connectés à l’échelle mondiale.
Internet est le réseau informatique mondial accessible au public. C'est un réseau de réseaux, à commutation
de paquets, sans centre névralgique, composé de millions de réseaux aussi bien publics que privés,
universitaires, commerciaux et gouvernementaux, eux-mêmes regroupés en réseaux autonomes (il y en
avait 47 000 en 2014). L'information est transmise par Internet grâce à un ensemble standardisé de
protocoles de transfert de données, qui permet des applications variées comme le courrier électronique, la
messagerie instantanée, le pair-à-pair et le World Wide Web. Internet ayant été popularisé par l'apparition
du World Wide Web, les deux sont parfois confondus par le public non averti.
SQL (DDL, DML)
82
Dr APPOH 0707930589
Oracle administration : rman lsnrctl emctl
Curation de contenu
La curation de contenu (étymologiquement du latin curare : prendre soin et de l'anglais content
curation ou data curation) est un néologisme en français correspondant à une pratique qui consiste à
sélectionner, éditer et partager les contenus les plus pertinents du Web pour une requête ou un sujet
donné. La curation est utilisée et revendiquée par des sites qui souhaitent offrir une plus grande visibilité et
une meilleure lisibilité à des contenus (textes, documents, images, vidéos, sons…) qu'ils jugent utiles aux
internautes et dont le partage peut les aider ou les intéresser.
La curation est également une manière rapide et peu coûteuse d'alimenter un site sans produire soi-même
de contenu. Le contenu ainsi mis en avant permet non seulement d'alimenter le site - même si dans la
plupart des cas le site renvoie sur la source originale mais également d'obtenir un meilleur référencement
du site de curation par les moteurs de recherche.
Remarque (php)
Problème d’injection SQL (avec le where )

Dans la qualification du where d’une requête SQL, il est possible (en rajoutant de code scripting (php )
faire n’importe quoi .
Zend Framework (server) pour PHP
JS vs jQuery
jQuery Selectors
jQuery HTML
jQuery CSS
jQuery DOM
83
Dr APPOH 0707930589
oncurrents comme Adobe Flash/Flex et Microsoft Silverlight.
84
Dr APPOH 0707930589

Cours Application Web3

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours Application Web3

Transféré par

Droits d'auteur :

Formats disponibles

Dr K.

DEVELOPPEMENT WEB I (Partie 1 )

DEVELOPPEMENT APPLICATION WEB Partie I : HTML, CSS, XSL, JavaScript ou JS et Jquery

HTML ET INTERNET : Historique, intérêt ;

Offre de service web de l’Internet :

Méthode de conception de site web, intérêt et Syntaxe pour codification

Codification en HTML, Style CSS, XSL et script JavaScript

CSS (Feuilles de style en cascade, Cascading Style Sheets),

I-1 Système d’information, Système informatique, (voir l’extrait SI)

I-2 Algorithmique et Algorithme, Programmation et Programme

I-2-1-Principe Algorithmique et Langage de programmation informatique

Algorithmique Programmation ou codification

Appel à des librairies, des bibliothèques,

Edition de lien (linker ou binder)

Appel à des librairies, des

Processus d’exécution d’un programme

I-2-2- Structure d’un algorithme

fonction puiss (données : x : reel, n : entier) : reel ;

II-1- Aperçu synoptique HTML et structure de la balise

Du même style que Javascript, on a VbScript, créé en 1996 par Microsoft.

CSS (style en cascade, en anglais Cascading Style Sheets),

figure 1 Quelques éditeurs Html, PHP, JS

II-3 Historique HTML

HTML 5 XHTML WML MathML

figure 3 : Extrait du spectre de langages web.

RDF => RDFS => OWL ....

Figure 3 : HTML pour l’émergence d’autres langages de balisage xml, ...owl

Figure 4 : figure 3 avec dates associées

II-3-2 URI, URL et URN

● Sens d’être des URLs (URIs) :

Protocole DOI : Digital Object Identifier (1998)

III-1 Approche succincte : conception et élaboration en Cinq (05) étapes

Exemples de structuration arborescente des pages

E3-Réalisation technique et artistique

Précision liminaire : Cas de référencement

2 / Définir l’offre : Qu’allez-vous proposer à vos visiteurs, de quoi allez-vous parler ?

Et parce qu’il n’y a pas que le web …

• Utilisez des objets promotionnels, sponsorisez un programme télé, achetez un dirigeable,

Arborescence des balises (tag) :

Génération de langages de programmation : de 1 à 5

IV-1-HTML , XHTML, HTMLL 5

Dans ce cours nous utiliserons HTML 5.

Html simple commence souvent par

<!DOCTYPE html public ".//w3c/DTD XHTML 1.0 Strict // EN"

"color:blue" répond à du code CSS.

La balise style pouvait être dans head, ou partout dans le corps.

Héritage des styles

IV-3-Quelques meilleurs éditeurs HTML gratuits.

management system (CMS), comme WordPress . .

Structure de base pour html5

NB : <script type="text/javascript" src="script.js"> </script>

(1)ou <script src="script.js" type="text/javascript"> </script>

Html comprend trois grandes parties structurantes : prologue, entête et corps

<html lang="fr"> ou <HTML>

Par incrustation directe de css dans l’élément head du html

Intégration de CSS par fichier CSS externe dans le html

DTD : définition de type de document

STRUCTUREL D’ARBRE EN HTML

Approche de structure corrélative des pages arbre (graphe)

V-Syntaxe à balises (Tags ou catégories)

Ainsi, la syntaxe minimale d’une balise est : <élément>

<élément attribut1="valeur1" attribut2="valeur2" … attribut_i="valeur_i" …>

Un fichier html a pour extension de fichier .html ou .htm

â â a minuscule accent circonflexe small a, circumflex accent

à à a minuscule accent grave small a, grave accent

é é e minuscule accent aigu small e, acute accent

ê ê e minuscule accent circonflexe small e, circumflex accent

è è e minuscule accent grave small e, grave accent

ë ë e minuscule tréma small e, dieresis or umlaut mark

î î i minuscule accent circonflexe small i, circumflex accent

ï ï i minuscule tréma small i, dieresis or umlaut mark