Sommaire
I – Initiation au XHTML et aux CSS
Le XHTML et les propriétés CSS sont le sujet de livres entiers. Je recommande aussi la lecture des excellents tutoriels d’un webmaster alsacien.
Certains logiciels essaient d’apporter des interfaces graphiques au développeur Web : DreamWeaver, FrontPage, Nvu… Mais aucun n’est capable de générer du code HTML normalisé avec une bonne séparation du fond et de la forme. La seule solution propre est d’effectuer ce travail manuellement. Pour cela, l’environnement de développement Eclipse (en version pour PHP) est un bon outil. Il est complété efficacement par le navigateur Firefox doté de ses extensions « Firebug » et « Web developer ». En outre, tout au long du travail de conception, un navigateur Internet Explorer doit être utilisé afin de maintenir avec lui la compatibilité du site.
En-tête XHTML, encodage UTF-8
Voici à quoi peut ressembler un document XHTML :
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-fr" lang="fr-fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Le titre de la page</title>
<link rel="stylesheet" type="text/css" href="mes-styles-css.css"/>
<link rel="stylesheet" type="text/css" href="des-styles-pour-imprimer.css" media="print"/>
<script type="text/javascript" src="mes-scripts-javascript.js"></script>
</head>
<body>
<!– Ici le corps du document XHTML. –>
</body>
</html>
L’encodage du fichier est précisé depuis la balise « meta » dans l’élément « header ». Je recommande l’usage de l’encodage UTF-8 qui s’impose de plus en plus chez les développeurs. Les anciens encodages « iso-latin-N » (ISO-8859-1 par exemple) sont trop spécifiques aux langues latines, UTF-8 est plus général. Attention : ceci implique toutefois de disposer d’un éditeur capable de travailler en UTF-8, ce qui n’est pas le cas du bloc-notes (Notepad) de Windows. Un bon développeur doit se trouver de bons outils. Eclipse travaille correctement en UTF-8.
On voit aussi dans cet exemple comment définir le titre du document XHTML (avec la balise « title »), comment ajouter un fichier de feuilles de styles CSS — et un autre utilisé uniquement pour imprimer —, et comment ajouter un fichier contenant des scripts JavaScript.
Entités HTML
La syntaxe du langage HTML donne un sens particulier à certains caractères spéciaux. Aussi, des entités HTML devront parfois être utilisées à leur place :
| Entité HTML | Caractère représenté |
|---|---|
|
<
|
<
|
|
>
|
>
|
|
&
|
&
|
|
|
[espace insécable]
|
|
"
|
"
|
Élements « bloc » et « en ligne », positionnement en CSS
Les éléments du corps d’un document XHTML se répartissent dans deux grandes catégories : les éléments « bloc » sont positionnés par défaut les uns en dessous des autres dans leur ordre d’apparition. Les éléments « en ligne » sont contenus dans un élément « bloc », ils sont positionnés à l’intérieur même du flux de texte.
Exemples d’éléments « bloc » : p, div, ul, li, hr, h1, h2.
Exemples d’éléments « en ligne » : em, strong, a, span, br, img.
Remarquons en passant que la balise de saut de ligne (br) est une balise « en ligne », contrairement à la balise de paragraphe qui est de type « bloc ».
Cette répartition des éléments en type « bloc » ou « en ligne » est modifiable grâce à la propriété CSS « display ». On peut par exemple forcer l’affichage d’une balise « a » en tant qu’élément « bloc ».
Les éléments de type « bloc » peuvent être sortis du flux du positionnement normal et être positionnés relativement à un élément parent dont la position est « absolute » ou « relative » :
position: relative;
}
div.enfant {
position: absolute;
top: 123px;
right: 123px;
}
On peut aussi faire flotter à gauche ou à droite les éléments « bloc » et « en ligne » grâce à la propriété « float ». C’est de cette manière que du texte peut « couler » autour d’une image alignée à gauche ou à droite.
float: left;
}
Les propriétés CSS « margin » et « padding »
Chaque élément « bloc » dispose de deux propriétés d’espacement par rapport aux autres éléments « bloc » : les propriétés « margin » et « padding ». À cause de la mauvaise interprétation de la norme par les anciennes version d’Internet Explorer, il est déconseillé d’utiliser simultanément ces deux propriétés.
margin: 2px 0;
}
Les identifiants XHTML et les ancres HTML
Le HTML fournit un moyen de créer des liens vers l’intérieur d’une page Web : les ancres. Un exemple :
Le XHTML introduit une nouvelle manière de faire : les identifiants de n’importe quel élément servent aussi d’ancre.
Attention toutefois : un identifiant est unique, il ne doit pas apparaître deux fois dans un même document XHTML.
II – Notions de JavaScript avec JQuery
Insérer un script JavaScript dans une page Web
Un script (ou « programme ») JavaScript est inséré dans un document HTML au moyen de la balise « script ». Cela peut se faire en regroupant les scripts dans un fichier dédié auquel on fait référence dans l’élément « header » du document HTML :
Ou bien avec un script embarqué :
// Ici le programme JavaScript.
//–></script>
Les variables et les chaînes de caractères
En JavaScript, les variables se déclarent au moyen du mot-clé « var ». Les chaînes de caractères sont encadrées indifféremment par des guillemets anglaises (« " ») ou des apostrophes (« ' »). L’opérateur de concaténation est le signe plus (« + »). Exemple :
alert(mot1 + ' World!');
Utiliser JQuery
JQuery est une bibliothèque de programmation qui apporte des fonctionnalités JavaScript dans la manipulation d’éléments du document HTML. Elle est elle-même un script JavaScript. JQuery est un logiciel libre. L’apprentissage de JQuery se fait avec un peu de persévérance grâce aux multiples sites Internet qui lui sont dédiés.
Afin d’ajouter JQuery à une page Web, il faut copier le fichier « jquery.js » sur notre site, puis le déclarer dans l’élément « header » du document HTML :
JQuery fournit une classe (un type d’objet) dont le nom est le signe du dollar : « $ ». Chaque instance de cette classe pointe vers un ou des éléments du document HTML, on fournit à cet effet à son constructeur un sélecteur dont la syntaxe est proche de celle des CSS. Ensuite, de nombreuses méthodes (encore appelées « fonctions ») nous permettent d’agir sur ces éléments. La documentation des API, c’est-à-dire la description exhaustive des méthodes de JQuery, est consultable sur le site officiel.
Voici un exemple de script utilisant JQuery (à inclure dans une page HTML) :
<p><a class="toggle-accueil" href="#">Montrer ou cacher le message d’accueil</a></p>
<script type="text/javascript">//<!–
$(document).ready(function() {
$("a.toggle-accueil").click(function(e) {
e.preventDefault();
$("p.accueil").slideToggle();
});
});
//–></script>
On remarque qu’un script utilisant JQuery est en réalité exécuté en tant qu’événement « ready » sur tout le document, cela permet d’être certain que la page Web est entièrement chargée avant que le script ne soit exécuté. Puis, un événement « click » est associé à l’ensemble des balises de lien (« a ») de classe « toggle-accueil ». Lors de l’exécution de cet événement, on annule l’exécution normale du clic à l’aide de la méthode JavaScript « preventDefault », et on exécute l’action JQuery « slideToggle », qui plie ou déplie des éléments, sur les paragraphes de classe « accueil ».
III – Notions de PHP
La maîtrise de PHP requiert la lecture de l’un des massifs ouvrages qui lui sont consacrés.
Les délimiteurs du code PHP
Le code HTML, les feuilles de styles CSS, les scripts JavaScript, sont traités par le navigateur de l’internaute. PHP est au contraire un langage de programmation interprété par le serveur Web. À l’instar des JSP (la technologie Java de Sun Microsystem, Oracle maintenant) ou des ASP.Net (la technologie DotNet de Microsoft), les PHP imbriquent des traitements dans du code HTML. Voici les marqueurs de début et de fin du code PHP :
<?php
// Ici un bout de programme PHP.
?>
<!– Ici du code HTML –>
Les variables et les chaînes de caractères
En PHP, les variables ne se déclarent pas, elles sont implicitement créées à leur première apparition, leur nom débute par le signe dollar (« $ »). Les chaînes de caractères peuvent être encadrées par deux délimiteurs. Mais ils ne sont pas équivalents. Les apostrophes (« ' ») délimitent une chaîne de caractères normale. Les guillemets anglaises (« " ») autorisent l’interprétation de variables à l’intérieur de la chaîne.
L’opérateur de concaténation est le point : « . ». Attention car le signe plus (« + ») force la conversion des opérandes en numérique et génère un résultat numérique sans afficher de message d’erreur !
Un exemple :
echo $mot1 . ' World!';
… est équivalent à :
echo "$mot1 World!";
Un exemple de page PHP
Voici l’exemple d’un tableau (« array ») dont le contenu est affiché (« echo ») par une boucle « foreach » (ce code est à placer dans un fichier d’extension « .php ») :
// Voici une liste des produits à afficher
$produits = array('Chaise', 'Lit', 'Table', 'Tabouret');
?>
<html><body>
<ul>
<?php foreach ($produits as $prod) : ?>
<li>Produit : <?php echo $prod; ?></li>
<?php endforeach; ?>
</ul>
</body></html>
Le code HTML récupéré par le navigateur sera :
<ul>
<li>Produit : Chaise</li>
<li>Produit : Lit</li>
<li>Produit : Table</li>
<li>Produit : Tabouret</li>
</ul>
</body></html>