Le but de ce document est avant tout pragmatique : il s'agit de rendre le lecteur apte à produire des documents en HTML. Les éléments théoriques relatifs à HTML sont très peu abordés ici.
Documents HTML. Un document HTML se compose d'instructions de mise en formes et de contenu.
Plusieurs façons de créer un document HTML sont possibles.
Il existe des outils dit WYSIWIG : "What you see is what you get". Ces logiciels fournissent une interface graphique
dans laquelle il est alors possible de créer une page HTML. Certains traitements de texte présentent une fonctionalité
proche : les documents que l'on crée avec ces outils peuvent être transformés en document HTML, on trouve généralement une
instruction de type "Create Document HTML" dans les menus des traitemens de texte, ce type d'instruction crée un document
HTML qui ouvert avec un navigateur donnera le même rendu graphique que celui du document crée.
La dernière manière de produire des documents HTML est d'utiliser un éditeur de texte
(Notepad par exemple sous Windows) et d'enregister les documents produits au format HTML. Dans les deux premières
méthodes, un document source sera produit, remplit d'instructions de mises en formes et des éléments de contenu spécifiés
par le créateur du document. La visualisation de ce document à l'aide d'un navigateur donnera le même rendu que le document crée.
Il est possible de créer directement le code source qui correspond à un rendu graphique. C'est la démarche que nous proposons ici.
Les deux premières méthodes sont plus tentantes puisque elles n'exigent pas de maîtriser les instructions de mise en forme du langage
HTML.Cependant, ces méthodes présentent plusieurs limites par rapport à une méthode directe d'écriture du code. (1) faire générer du code
à un logiciel conduit à avoir un code bien plus volumineux que nécessaire. De fait, les modifications éventuelles que l'on peut apporter
à ce code sont minimes, de même que le code généré est difficilement réutilisable, (2) Intégrer les possiblilités de langages
comme Javascript ou PHP et se doter d'outils de développements plus puissants exige de connaître le fonctionnement du HTML.
| 4 | 5 |
| Rouge | Onirique |
Par exemple :Une utilisation où on renseigne une unique variable avec différents choix
Age : <input type="radio" name="age" value="true" >
Region Parisienne : <input type="radio" name="RegionParisienne" value="true" >
Etudiant : <input type="radio" name="etudiant" value="true" >
age entre 0 et 17 ans <input type="radio" name="age" value="1" >Ce qui donne :
age entre 18 et 60 ans <input type="radio" name="age" value="2" >
age entre 61 et 100 ans <input type="radio" name="age" value="3" >
age entre 0 et 17 ansVous constatez qu'en cliquant un bouton, vous annulez la sélection d'un autre bouton. Ceci est du au fait que les boutons renseignent une variable de même nom.
age entre 18 et 60 ans
age entre 61 et 100 ans
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> ... Balises d'en tête... </head> <body> ...Corps du document... </body> </html>
| <title> </title> : Spécification d'un titre pour la page |
| <meta name="Description" content="descritpion de la page"> |
| <meta name="Keywords" content="motCle1,motCle2,..."> |
| <meta name="Author" content="nom de l'auteur"> |
| <meta http-equiv="Content-language" content="fr"> Cette balise est d'autant plus utile qu'aujourd'hui les moteurs de recherche offrent la langue comme critère de sélection |
| <meta http-equiv="Reply-to" content="adresse e-mail"> Pour les utilisateurs qui veulent consulter le code source, ils pourront consulter cette balise et joindre l'auteur |
| <meta http-equiv="Refresh" content="x;URL=adresse de la page"> Ici la page spécifiée avec URL sera chargée au bout de x secondes. Utiliser cette balise en referençant l'adresse de la page courante permet de raffraichir cette page qui peut éventuellement avoir été modifiée (actualités par exemple) |
| <meta http-equiv="Pragma" content="no-cache"> Indique au navigateur de ne pas tenir la page dans son cache |
| etc... |
<html>
<head>
<script language="JavaScript">
function message(){
alert("Bonjour");
}
</script>
</head>
<body>
<form><input type="button" value="Aimez Vous" onClik="message()"></form>
</body>
</html>
Consulter le résultat du code<?xml version="1.0" encoding="UTF-8"?> <!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" xml:lang="fr" lang="fr"> <head> ... <title>...</title> ... </head> <body> ... </body> </html>La première ligne correspond à la filiation xml du xhtml. La déclaration de Doctype fait réference à la syntaxe HTML qui va être utilisée. La balise html est assortie d'attributs : xmlns qui renvoi à l'espace de nom utilisé.
| color="FF0000" | color="00FF00" | color="0000FF" | color="FFFF00" | color="FF00FF" | color="0000FF" |
<map name="mapName"> <area shape="shape" coords="coordinates" href="destination" alt="comments" target="nameFrame"> ...Autres balises <area> </area>... </map>L'attribut shape peut prendre comme valeurs : rect, circle, polygon.