Principes

ISN. TP : HTML - Exemples d’utilisation des langages JavaScript et PHP
LANGAGES
Vous avez sans doute entendu quelqu’un dire : « j’utilise le PHP pour mon site . . . » . En effet les développeurs web utilisent
rarement le HTML mais préfèrent utiliser un langage qui génère du HTML : PHP.
Mais attention pour savoir écrire en PHP il faut maîtriser le HTML
Principes
2 JavaScript est un langage de programmation de scripts principalement utilisé dans les pages web interactives :
Toute page HTML peut lancer, lors de son chargement, l’exécution côté client de programmes en langage JavaScript.
On peut trouver ces programmes JavaScript dans l’entête du document HTML
– comme contenu d’une balise <script>
<script type="text/javascript">
// ici définition des fonctions du programme . . .
</script>
– dans un fichier auxiliaire référencé dans une balise <script> vide
<script src="monCode.js" type="text/javascript" charset="utf-8"></script>
On peut alors consulter le fichier monCode.js en le chargeant dans le navigateur.
– cette page http://math.et.info.free.fr/ProgrammerLeWeb/Exemples1.html montre comment modifier
dynamiquement le contenu d’une page HTML lors d’événements provoqués par l’utilisateur.
– cette page http://math.et.info.free.fr/ProgrammerLeWeb/Exemples2.html montre comment modifier
dynamiquement le style d’affichage d’une page HTML.
Lorsque vous consultez un site web, les fichiers HTML (extension .htm ou .html) sont envoyés à votre navigateur et
le code html est interprété sur VOTRE machine par VOTRE navigateur.
2 PHP (Hypertext Preprocessor) exécuté du côté serveur, est un langage interprété (un langage de scripts), principalement utilisé pour produire des pages Web dynamiques via un serveur HTTP.
HTML, CSS et JavaScript sont les trois langages du Web côté client. Mais attention un navigateur ne comprend pas
le PHP, il faut donc que l’ordinateur hébergeant le site adresse du HTML à l’ordinateur du visiteur !
Lorsqu’un internaute veut afficher une page en PHP, l’ordinateur hébergeant le site sait qu’il y a du PHP dans le code
(à cause de l’extension php) donc il génère le HTML à partir du PHP et adresse ce HTML au client (internaute) grâce à
un logiciel appelé serveur.
2 Si vous voulez tester une page avec du PHP à partir de votre PC il faut que vous ayez installé un serveur capable de
générer du HTML à partir du PHP tel le logiciel Apache (contenu dans le pack Wamp)
Pour comprendre comment HTML, CSS et JavaScript interagissent ?
http://math.et.info.free.fr/ProgrammerLeWeb/Exemples.html
1
Exemple d’utilisation de JavaScript : un code HTML5 compatible avec IE8
IE8 ignore les balises html5 header,nav,article, etc.
2 rappel sur la technique antérieure à HTML5 :
– On créait et définissait les différentes boîtes en CSS et on les identifiait de façon unique avec un ID.
– En HTML on appelait ces différentes boîtes via leur ID avec la balise générique de type block : div
Pour écrire un code CSS et HTML avec les nouvelles balises HTML5 mais compatible avec IE8
1. Ajouts dans la feuille de style externe :
/* #header{...} mise en forme pour la balise dont l’identifiant est header */
#header,#nav,#article{border: 1px solid navy; margin-top: 10px; background-color: aqua; }
#header{width: 100%; min-height: 60px; }
#nav{width: 29%; height: 600px; float: left; }
#article{width: 69%; height: 600px; overflow: auto; float: right; }
2. Ajouts dans la partie body du document html
http://lycee.lagrave.free.fr/isn
1
n
ISN. TP : HTML - Exemples d’utilisation des langages JavaScript et PHP
Listing 1: Ajouts dans la partie body
< body >
< header > <! --[ if IE ] > < div id = " header " > < ![ endif ] -- >
...
</ header > <! --[ if IE ] > </ div > < ![ endif ] -- >
< nav > <! --[ if IE ] > < div id = " nav " > < ![ endif ] -- >
...
</ nav > <! --[ if IE ] > </ div > < ![ endif ] -- >
< article > <! --[ if IE ] > < div id = " article " > < ![ endif ] -- >
...
</ article > <! --[ if IE ] > </ div > < ![ endif ] -- >
</ body >
</ html >
2 Internet explorer interprète les commentaires donc à chaque fois qu’on utilise une balise inconnue de IE8 on
ajoute un test sous forme d’un commentaire.
3. Une autre technique pour assurer la compatibilité qui est beaucoup plus simple et n’exige pas de modifier le CSS :
faire appel au JavaScript
Supprimer les ajouts précédents. Nous allons faire appel à un script existant et disponible chez GOOGLE
Listing 2: Ajouts dans la partie head
< link rel = " stylesheet " href = " css / style_screen . css " media = " screen " >
<! --[ if lt IE 9] > < script src = " http :// html5shiv . googlecode . com / svn / trunk /
html5 . js " > </ script > < ![ endif ] -- >
< link rel = " stylesheet " href = " css / style_print . css " media = " print " >
2 Si le navigateur est IE et une version antérieure à IE9 alors lien vers le fichier html5.js disponible sur le site :
http://html5shiv.googlecode.com.
On assure la compatibilité entre HTML5 et IE8 grâce a du code JavaScript qui crée de nouveaux éléments. Dans
chaque page, il n’y a qu’à ajouter qu’un commentaire juste après le lien vers la feuille de style externe.
on peut récupérer le fichier html5.js et le copier dans le dossier correspondant à votre site.
Dans la partie head il faut alors écrire :
Listing 3: modification dans la partie head
< link rel = " stylesheet " href = " css / style_screen . css " media = " screen " >
<! --[ if lt IE 9] > < script src = " html5 . js " > </ script > < ![ endif ] -- >
2 Remarque : la feuille de style pour impression peut avoir pour objectif de ne pas imprimer les images, les légendes
des images, le contenu des boîtes header et nav, les liens, etc.
*{font-size: 12pt; color: black; }
a,img,header,nav,h3.legende{display: none; }
article{width: 100%; }
On masque les liens, les images, les boîtes header et nav, les balises h3 associées à la classe légende.
2
Une fonction PHP bien pratique - Dans toutes les pages du site la partie head, les boîtes header et nav ont
strictement le même contenu.
Pour une éventuelle modification, on doit ouvrir toutes les pages du site et modifier successivement dans chacune des
pages ! ! !
Ce serait très fastidieux. PHP offre une solution : les fichiers d’inclusion. Nous allons en créer deux.
Il est d’usage de donner aux fichiers d’inclusion, l’extension inc.php
m
2
ISN. TP : HTML - Exemples d’utilisation des langages JavaScript et PHP
1. Le fichier nommé head.inc.php correspond à la partie head de chaque page :
Listing 4: le fichier head.inc.php
<! DOCTYPE html >
< html lang = " fr " >
< head >
< meta charset = " UTF -8 " / >
< title > Premier essai </ title >
< link rel = " stylesheet " href = " css / style_screen . css " media = " screen " >
<! --[ if lt IE 9] > < script src = " html5 . js " > </ script > < ![ endif ] -- >
< link rel = " stylesheet " href = " css / style_print . css " media = " print " >
</ head >
2. Le fichier nommé header_nav.inc.php correspond au début de la partie body de chaque page : contenu des
boîtes header et nav
Listing 5: le fichier header_nav.inc.php
< body >
< header >
< h1 > Nom de la page </ h1 >
<? php
echo " <h3 > nous sommes le : " . date ( " d / m / Y " ) . " </ h3 > " ;
?>
</ header >
< nav >
< ul >
< li > Menu 1 </ li >
< li > Menu 2 </ li >
< li > Menu 3 </ li >
< li > Menu 4 </ li >
</ ul >
</ nav >
Grâce au PHP on affiche la date via la fonction PHP date
Les pages du site on maintenant l’extension php puisqu’elles vont contenir un script PHP.
3. Un exemple de code pour la page index.php
Listing 6: le fichier index.php
<? php
include ( " head . inc . php " ) ;
?>
<! -- ici éventuellement < style > ... </ style > pour une feuille interne -- >
<? php
include ( " header_nav . inc . php " ) ;
?>
< section >
< article >
...
</ article >
< aside >
...
</ aside >
</ section >
< footer > Bas de page </ footer >
</ body >
</ html >
http://lycee.lagrave.free.fr/isn
3
n
ISN. TP : HTML - Exemples d’utilisation des langages JavaScript et PHP
3 Exemple d’utilisation de PHP - Dans une page web vous devez faire apparaître la table de multiplication par huit :
8×1 = 8
...
8 × 100 = 800
(100 lignes)
Le symbole × fait partie des caractères spéciaux en HTML (http://www.web1.pro/unicode.htm) on utilise l’entité de
caractère &times;
1. Solution HTML : la page a l’extension htm ou html
Listing 7: Extrait du code HTML (un tableau avec 100 lignes)
< table >
< tr > < td >8 </ td > < td >& times ; </ td > < td >1 </ td > < td >= </ td >8 < td > </ td > </ tr >
< tr > < td >8 </ td > < td >& times ; </ td > < td >2 </ td > < td >= </ td > 16 < td > </ td > </ tr >
...
< tr > < td >8 </ td > < td >& times ; </ td > < td > 100 </ td > < td >= </ td > 800 < td > </ td > </ tr >
</ table >
La production de ce code sera très très laborieuse !
2. Solution PHP : la page a l’extension php
Listing 8: Extrait du code PHP (un tableau avec 100 lignes)
< table >
<? php
for ( $i =1; $i <=100; $i ++;)
{// debut boucle - structure itérative
$resultat =8* $i ;
echo " <tr > " ;
echo " <td >8 </ td > " ;
echo " <td >& times ; </ td > " ;
echo " <td > $i </ td > " ;
echo " <td >= </ td > " ;
echo " <td > $resultat </ td > " ;
echo " </ tr > " ;
}// fin boucle
?>
</ table >
2 PHP est un vrai langage de programmation (à la différence de HTML la boucle sera effectué 100 fois.
La variable $i prend successivement les valeurs 1,2, . . . 100
La variable $resultat prend successivement les valeurs 8,16, . . . 800
À chaque passage dans la boucle on génère le code HTML d’une ligne de tableau avec à chaque fois 5 cellules.
echo "<tr>"; veut dire générer le code HTML <tr> . . . il n’y a qu’à demander au navigateur le code source de la
page affichée
Toutes les entités de caractère commencent par & et se terminent par ; il y en a deux à connaître : &lt ; et &gt ;
qui permettent de représenter < et > on peut donc écrire du code HTML qui soit simplement affiché et non pas
exécuté.
m
4