2. Pratique de l'édition des pages Web
Il est très instructif de connaitre les principales balises pour bien comprendre comment fonctionnent les navigateurs comme Opera, FireFox ou Internet Explorer. Pour les mémoriser, le mieux reste encore la pratique de la technique : "j'écris donc j'apprends !" Nous vous conseillons donc dans un premier temps d'écrire avec Notepad les balises qui suivent et de tester ce qu'elles affichent... Ensuite, et pour des développements conséquents, il faut investir dans l'utilisation d'un logiciel, en privilégiant ce qui vous intéresse (les scritps, les animations, l'intégration de la vidéo...).
On se méfiera du point suivant : certaines balises fonctionnent en couple, l'une ouvrante et l'autre fermante. Ouvrir et ne pas fermer (notamment pour un tableau) perturbe alors le navigateur mais il ne le dit pas forcément... Certains éditeurs, certains logiciels sont capables de détecter de telles erreurs. Une bonne pratique pour éviter ce problème consiste à écrire les deux balises puis à insérer le reste du code entre les deux.
2.1 Structure d'un document HTML
Un document HTML se compose d'un en-tête (head) en anglais et d'un corps de document (body). L'en-tête se réduit en général au titre mais peut comporter des "meta". Un document minimal est donc celui qui correspond au texte suivant
<html> <head> <title> ceci est le titre du document </title> </head> <body> ceci est le corps du document. <!-- ici un commentaire (texte qui n'est pas affiché) --> </body> </html>
Il faut se rappeler que les espaces multiples ne sont pas pris en compte, pas plus que les retours à la ligne. Ainsi le texte précédent sera interprété de la même façon même si on le réécrit en
<html> <head> <title> ceci est le titre du document </title> </head> <body> ceci est le corps du document. <!-- ici un commentaire (texte qui n'est pas affiché) --> </body> </html>
ou même en
<html><head><title>ceci est le titre du document</title></head><body> ceci est le corps du document.<!-- ici un commentaire (texte qui n'est pas affiché) --> </body></html>
Comme grammaires, nous conseillons XHTML Strict et transitionnel. On viendra donc mettre, au choix
<?xml version="1.0" encoding="ISO-8859-1" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
ou
<?xml version="1.0" encoding="ISO-8859-1" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
à la place de la simple balise <html>. Utiliser la grammaire strict est sans doute mieux car toute la mise en forme par des styles externes et l'attribut class. Toutefois, lorsqu'on écrit de "petites pages" juste pour apprendre les mises en forme, la grammaire transitional est plus simple à utiliser.
Remarques sur le vocabulaire : <body> et </body> sont deux balises, l'une ouvrante et l'autre fermante pour le même élément nommé body. Une balise peut avoir des attributs qui fonctionnent selon la syntaxe : nom="valeur" où les guillemets sont obligatoires. Un slash en fin de balise ferme la balise, comme par exemple : <img src="tit.jpg" alt="titi" class="zimageu" id="gh1235" />.
2.2 Les principales balises
Nous ne faisons qu'énumérer quelques balises. Il est conseillé de consulter la page rexSwainSampler dont une copie locale est ici pour voir l'influence de chaque balise et en particulier pour les formulaires, le positionnement et le retaillage des images.
Nous ne couvrons pas les balises META utiles entre autres pour le référencement des sites mais la page META citée dans le rexSwainSampler devrait être suffisante pour détailler ces balises.
De la même façon, nous passons sous silence le codage des caractères accentués et des caractères spéciaux. Nous renvoyons à la page nommée iso8859 à l'adresse
pour plus de renseignements.
On peut résumer les balises à l'aide des caractérisations suivantes :
Les titres sont gérés par les balises <hi> et </hi> où i est un nombre entre 1 et 6, <h1> est le titre le plus gros.
Les styles des polices de caractères sont gérés par les balises <b> et </b> pour le gras, <em> et </em> pour la mise en évidence.
Les listes ordonnées sont définies par les balises <ol> et </ol> alors que les listes non ordonnées sont définies par les balises <ul> et </ul>, les items de liste étant définis par la balise <li>. Une liste de définitions dl utilise les éléments dt (terme) et dd (définition).
La découpe effective du texte se fait avec la balise <p> pour un paragraphe, avec la balise <br> pour un simple passage à la ligne. On notera que la balise <hr> permet de tracer un trait horizontal paramétrable. Les paragraphes peuvent être inclus dans des divisions (<div>).
Un lien se fait avec les balises <a href=...> et </a>, le a signifiant "ancre". Consulter SELFHTML pour en savoir plus.
On indique une image à afficher avec la balise <img src=...>. Il est obligatoire de mettre un texte alternatif avec alt=... au cas où l'image ne serait pas affichée (ou non affichable sur l'ordinateur client). On peut inclure une image dans une ancre.
On pourra consulter la documentation sur les images et graphiques en français à l'URL http://fr.selfhtml.org/navigation/html.htm#graphiques.Un script est en général géré par les balises <script> et </script> mais certains langages ont leurs propres balises. Ainsi PHP utilise les balises <?php et ?>.
2.3 Les balises de tableau
Un tableau se définit à l'aide des balises <table> et </table>. Une ligne (ROW en anglais) se définit à l'aide des balises <tr> et </tr> alors qu'une colonne (COLUMN en anglais) se définit à l'aide des balises <td> et </td> parce qu'il s'agit d'une division de la ligne. Les balises <caption> et </caption> gèrent la légende du tableau et l'élément <th> permet d'afficher les en-tête des colonnes.
Pour la balise <table> l'attribut cellspacing gère l'espace entre les cases (ou "cellules") du tableau, l'attribut cellpadding gère l'espace entre une case et le texte qu'elle contient, l'attribut height règle la hauteur des lignes.
Par contre, pour la balise <td> l'attribut align règle le positionnement horizontal de l'élément à l'intérieur de la case du tableau et l'attribut valign son positionnement vertical.
On notera qu'un tableau peut contenir un autre tableau. On pourra par exemple essayer de reproduire le tableau suivant (cliquer sur l'image pour aggrandir). Comme c'est une image, vous ne pouvez donc pas faire un "copier-coller" de la source après avoir enregistré ce fichier sur votre ordinateur :
Vous pouvez par contre essayer de "réparer" le fichier tab.htm contenu dans l'archive car il contient presque tout le tableau à quelques erreurs flagrantes près...
On notera qu'il est possible d'étendre une case (ou "cellule") d'un tableau sur plusieurs lignes ou plusieurs colonnes à l'aide des attributs colspan et rowspan.
2.4 Feuilles de style
Les styles pour les pages Web peuvent être internes c'est à dire mis dans la même page que le texte ou externes c'est à dire stockés dans un autre fichier que le texte (ce qui est très fortement conseillé).
Un script interne se définit à l'aide des balises <style> et </style>. Par exemple ce document utilise les styles nommés cadre, grouge, gbleu et it définis par
<style type="text/css"><!-- .cadre { border: thin solid; margin-left: 30p; background-color: #EEEEEE; } .grouge { font-weight : bold ; color: #990000 ; } .gbleu { font-weight : bold ; color: blue ; } .it { font-style : italic } --></style>
L'utilisation du style cadre, qui affiche les exemples de codes HTML se fait à l'aide d'une balise DIV avec un attribut CADRE. Par exemple pour produire
Des belles étoiles comme *** ** ***.
il suffit d'écrire
<br> <div class="cadre"><pre> Des belles étoiles comme *** ** ***. </pre></div><br>
Un style externe est en général mis dans un fichier dont l'extension est CSS et on l'utilise via une balise <link> avec un attribut <rel> comme par exemple
<link rel="stylesheet" type="text/css" href="EXEMPLE.CSS" />
si le fichier des styles est nommé EXEMPLE.CSS
Lorsqu'on a défini des styles, on peut les utiliser pour des éléments entiers ou pour des portions de texte. Avoir définir des styles signifie qu'on a mis des noms symboliques sur les mises en forme, comme gb pour "en grand et en bleu", pv pour "en petit et en vert"... L'interêt est que ces noms symboliques sont associés à une mise en forme qui est spécifiée en un seul endroit pour toutes les pages qui utilisent cette feuille de style avec <link ...
Pour appliquer un style à une portion de texte, on passe le nom du style comme valeur d'attribut de class à l'élément span ; en voici un exemple : < span class="gbleu".... Avec la construction <span class="STYLE">TEXTE</span> tout le TEXTE délimité par l'élément span utilisera la mise en forme définie par STYLE. Pour appliquer un style à tout un élément, c'est encore plus simple : on utiliser l'attribut class et on lui donne le nom du style comme valeur d'attribut. Exemples :
<h1 class="mtam">... <p class="usdp">... <table class="bt"> <tr class="ligne2"> <td class="colRGx" ...
CSS permet bien sur de rédéfinir les valeurs par défaut, de définir des styles pour des éléments seulement quand ils sont dans d'autres éléments, etc. On trouvera ici une liste détaillée des propriétés gérées par CSS. Pour une introduction courte aux feuilles de style, on pourra lire l'article 200 et pour quelques mots sur CSS2, on pourra lire css2/intro.html.
Signalons enfin que pour les gens pressés (ou pour vérifier un point de détail), on peut utiliser un style local "à la volée", via l'attribut style. Exemple : pour redéfinir l'interligne du paragraphe en cours, on pourra écrire : <p style="line-height:100pt">... ou même pour des tests <span style="prop1 : val1 ; prop2 : val2...">TEXTE</span>.
La définition d'un style utilise un nom de propriété, sa ou ses valeurs. Il faut le symbole deux-points entre le nom de la propriété et ses valeurs, on met un point-virgule pour passer à une autre propriété. On peut appliquer (on dit encore sélectionner) les éléments pour lesquels la définition des styles s'applique dans les feuilles de style externes. Voici par exemple un extrait de fichier .CSS qui "dérange" Internet Explorer :
DIV.IE { background:#ffc; color:blue; border-color:blue; border-width:thin; border-style:solid; margin:25px; padding:25px; } HTML>BODY DIV.IE { display:none; } div.page { margin-left: 19%; margin-right: 4%; margin-left: 22%; padding-bottom: 0.5em; padding-left: 2em; padding-top: 0.5em; text-align: left; } DIV.MENU { float: left; margin-left: 1.0em; margin-top: 1.5em; position: fixed; width: 20%; background:#EEEEEE; padding:0.5em; border-color:black; border-width:thin; border-style:solid; text-align:right; top:1.5em; }
Le résultat de ce style est une page avec menu.
Ce menu est fixe à gauche sous Firefox, avec menu gauche qui se déplace avec la page sous Internet Explorer. Il faut savoir qu'un élément de type bloc en ligne (ou "boite") comporte une marge externe nommée margin, une marge interne nommé padding et un contenu, sans oublier une bordure nommée border. Les unités sont plus ou moins relatives comme les pourcents (mais sans espace : il faut écrire 80% et surtout pas 80 %), les valeurs en taille de x ou de m, les pixels, les points... Des propriétés "évidentes" comme la largeur (width) et la hauteur (height) sont bien sur aussi disponibles. La notion de positionnement d'éléments dans le flux (propriétés float, posiiton et clear) est par contre une notion délicate dont le rendu est pour le moins délicat suivant les navigateurs alors que les propriétés left, right, top, bottom sont censées être plus "évidentes" qund tout va bien.
Pour en savoir plus sur les propriétés CSS, lisez la faq9_49 du site "le coin des experts".
2.5 Formulaires et Scripts
Afficher un formulaire, c'est d'une certaine façon poser une ou plusieurs questions à l'utilisateur, lui fournir un moyen d'interagir avec l'ordinateur. Il est possible en mode local de gérer les réponses de l'utilisateur à l'aide de Javascript soit en affichant un résultat, un calcul ou en indiquant s'il y a des erreurs dans les réponses. On peut aussi utiliser les données du formulaire en mode distant, à l'aide d'un script, par exemple écrit en Php. Javascript permet de gérer toute la page Web (éléments, attributs, styles, propriétés) via des fonctions qui ciblent les éléments d'un type particulier (tous les <h1> par exemple) ou qui repèrent un élément unique (via son id). Php, quant à lui permet de faire de gros calculs, autorise la production de graphiques, l'interrogation de bases de données...
Qui dit formulaire dit donc noms de champs, vérification des propriétés des champ, traitemements des champs. La rigueur et l'utilisation de fonctions sophistiquées comme celles liées aux expressions régulières et aux tables de hachage devient vite une obligation pour ne rien laisser passer, en mode GET comme en mode POST.
En termes d'éléments et d'attributs, un formulaire est un élément form qui contient des éléments input, select ou textarea. Le seul attribut obligatoire pour l' élément form est l'attribut action qui indique quel programme ou quelle page il faut charger lorsqu'on soumet le formulaire. Cette "action" est obligatoire, mais javascript peut empêcher qu'on l'utilise (voir plus loin). Les valeurs de l'attribut type pour l' élément input sont nombreux et donnent toute une gamme de saisie (champ texte, bouton radio, case à cocher, champ invisible, bouton d'envoi, champ de type mot de passe...). On consultera la page d'exemples de R. Swain pour le détail de ces attributs.
Javascript, via l'attribut onsubmit de l'élément form, permet d'intercepter la communication entre le formulaire et son action. Si le code javascript mis dans ce onsubmit se termine par return false, l'action n'est pas exécutée. Javascript peut écrire dans les champs-texte (définis par input type="text") : à l'intérieur d'un formulaire, si un champ est nommé age par exemple (input type="text" name="age") alors this.age.value désigne la valeur contenue dans le champ. On peut l'utiliser en lecture comme en écriture. Ainsi a=this.age.value*2 met en mémoire dans la variable a (non liée à un formulaire) le double de la valeur dans le champ age et this.age.value=0 force à 0 ce champ age. Comme Javascript dialogue en permanence avec le nvaigateur, toute modification de la valeur d'un champ est immédiatement affichée...
Un script n'est jamais qu'un programme qui écrit du texte avec des balises... Ce peut être un programme mis à l'intérieur de la page Web et interprété localement comme les scripts en javascript. Ce peut être aussi un programme externe (C, Pascal, Rexx..) qui produit des pages fixes, à contenu variable ou dynamique. Enfin, ce peut être un programme mis à l'intérieur de la page Web et interprété sur le serveur comme pour un script php. On pourra consulter
On pourra consulter la documentation sur les formulaires en français à l'URL http://fr.selfhtml.org/navigation/html.htm#formulaires.- un tuteur de scripts cgi:
http://forge.info.univ-angers.fr/~gh/vitrine/Democgi/cgiprogs.htm- sa page multi-langages
http://www.info.univ-angers.fr/~gh/vitrine/Democgi/xmps.htm- un tuteur PHP
http://www.info.univ-angers.fr/pub/gh/tuteurs/tutphp.htm- un tuteur javascript
http://www.info.univ-angers.fr/pub/gh/tuteurs/tutjs.htm2.6 Principes de gestion des pages
Avant de se lancer dans l'écriture de pages Web ou dans la réalisation d'un site Web, en intranet ou extranet, il est bon de se rappeler les principes suivants.Il n' y a rien de plus énervant que de consulter une page qui indique "page en construction" et qui reste en construction pendant des années.
A cause de l'incompatibilité entre certains "browsers" il faut privilégier la simplicité dans la construction des pages web.
Ecrire 100 pages pour le Web peut être assez rapide à effectuer, mais les modifier deux mois plus tard est beaucoup long.
Les graphismes demandent toujours beaucoup de temps et d'efforts. En particulier les images et graphiques haute résolution doivent être toujours être adaptés ou convertis pour être rapidement visualisés.
Il existe des outils pour automatiser la vérification comme "cse Html validator", weblint, checkUrl.
Gérer une base de données (Access, MySql...) via des scripts (asp, jsp, php...) demande un niveau technique beaucoup élevé que celui d'une simple page Web. De plus, il y a certainement des autorisations, des droits d'accès à gérer, notamment dans le cas de mise à jour à distance via des utilisateurs multiples autorisés.
Retour au document général sur les pages web
