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.
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 :
Indépendamment du navigateur sur lequel vous êtes, vous pouvez consuler le code source du présent document.
<Balise attribut1="val1" attribut2="" ... >...</Balise>
<Balise attribut1="val1" attribut2="" ... > est appellée balise d'ouverture, </Balise> est appellée balise de fermeture. Le texte compris entre ces deux balises sera mis en forme à l'affichage dans le navigateur.
Les instructions de mise en forme et le texte à mettre en forme peuvent être saisis dans un éditeur de texte (et non pas un logiciel de traitement de texte). Pour l'enregistrement, il doit se faire au format .html, sous Windows, pour enregistrer au format .html : dans le champ qui demande le nom de fichier, on écrit "nomFichier.html".
Ce code donne :
| 4 | 5 |
| Rouge | Onirique |
Exemple : <a href="http://www.google.fr">Lien vers Google </a> va faire apparaitre : Lien vers Google. Le lien apparaît par défaut affiché en bleu souligné, il est possible de modifier ce comportement par défaut.
Par exemple, dans le présent document, ont été définies les ancres de noms 'Demarage', 'MiseEnForme', etc... Pour faire réference à cette section à partir d'un document extérieur il faut utiliser :
<a href="http://www.up2.fr/M1/td/ressources/ElementsHTML.html#Liens">
Cet attribut peut prendre différentes valeurs qui vont modifier le comportement du lien au moment où il est cliquer :
Par exemple: <a href="mailto:aa@yahoo.fr">Ecrire</a> crée un lien qui déclanchera en envoie de mail vers l'adresse spécifiée.
Un tel code donne un champ de ce type:
On constate qu'il est possible de taper du texte dans le champ qui apparaît.
Pour associer une variable à ce champ : <input type="test" name="nomVariable">. Ici, les caractères saisis dans le champ seront conservés dans la variable de nom nomVariable.
Pour préciser à l'utilisateur quel type d'informations sont attendus, il faut ajouter du texte devant le champ de saisie :
ceci qui donne :
L'utilisateur est ici invité à saisir son nom. Le code HTML induira que ce qu'il saisi sera affecté à la variable nomVariable
On peut donner une valeur prédéfinie au champ :
ce qui donne :
ce qui donne :
Lorsque le bouton est cliqué, la variable nomVar prend la valeur correspondante (val1 ou val2). Vous 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 et permettent de choisir une unique valeur pour cette variable.
On peut faire qu'un choix soit préselectionné :
ce qui donne :
ce qui donne:
Ce bouton envoie les informations vers le script et va appeler son exécution avec les variables définies dans le formulaire
Soit un fichier vacances.JPG qui est une photo : l'affichage sera appelé par :
Deux attributs sont possibles : height et width, qui correspondent respectivement à la hauteur et à la largeur exprimés en pixels.
Un document html doit être compris entre les deux balises : <html> et </html>. Ces balises ne sont pas obligatoires cependant. Le header html et la balise body avec ses attributs. bgcolor pour une couleur de fond d'écran, background="nomPhoto" pour une photo que l'on veut mettre en fond d'écran.
La forme générale d'un document HTML :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> ... Balises d'en tête... </head> <body> ...Corps du document... </body> </html>
Les balises comprises entre <head> et </head> sont des balises qui ont un contenu qui ne sera pas affiché. Ces balises seront utilisées par les moteurs de recherche en revanche. Les différentes balises que l'on peut spécifier :
| <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... |
Les feuillles CSS définissent un style. Une page HTML peut réferencer une feuille CSS (fichier CSS) qui définit un comportement par défaut
Par exemple, pour redefinir la balise h2 :
Pour incorporer des feuilles CSS : utiliser dans le header la balise <link rel="stylesheet" href="fichier.css"gt;
Langage imbriqué dans le HTML. Langage de script. L'exécution se fait côté navigateur sans intervention des ressources du serveur. Javascript permet une certaine interactivité des pages Web, il permet de valider des données rentrées par l'utilisateur par exemple.
Un exemple d'utilisation :
<html>
<head>
<script language="JavaScript">
function message(){
alert("Bonjour");
}
</script>
</head>
<body>
<form><input type="button" value="Aimez Vous" onClik="message()"></form>
</body>
</html>
Il est possible de faire réference à un fichier javascript externe, par exemple : <script src="message.js"></script> dans le header.
Quelques fonctions : open() pour ouvrir une fenêtre, close() pour fermer la fenêtre courante, etc...
Pour une réference plus complète sur le javascript : javasc.html
Le W3C a décidé de ne pas poursuivre l'évolution du langage HTML au dela des normes HTML 4. La norme XHTML 1.0 date de 2000. Les balises HTML sont reprises, mais des régles de syntaxe plus strictes ont été adoptées, celles du XML. Les documents, pour répondre à la norme XHTML, devront être bien formés, ie répondre à des règles de syntaxes. On donne ces règles dans ce qui suit :
<?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é.
Pour renseigner un attribut couleur (que ce soit pour le fond d'écran, pour une police ou autre), il existe deux manières de procéder. La première est de faire appel à une couleur prédéfinie : color='blue', color='red' etc... ou bien, on peut spécifier soit même une couleur. La définit d'une couleur suit ici la norme RGB (Red-Green-Blue), en réference aux couleurs de base effectivement perçues par l'oeil. On définit le niveau de chaque composante par 2 chiffres hexadécimaux, ie des chiffres dans l'ensemble {0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F}. Les deux premiers chiffres définissent la composante de rouge, les deux suivants la composante de vert et les deux derniers la composantes de bleu. De fait :
| color="FF0000" | color="00FF00" | color="0000FF" | color="FFFF00" | color="FF00FF" | color="00FFFF" |
On peut ensuite envisager de faire des variations à partir de ces bases.
Balise de l'image réactive : <img src="file" usemap="#map">, pour une carte dans le même fichier.
La carte est divisée en zones (area). Par exemple :
<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.
L'attribut coords donne les coordonées qui permettent de reconstituer la forme géométrique. Pour un rectangle : coords="x1,y1,x2,y2", pour un cercle coords="xc,yc,rayon", pour un polygone : coords="x1,y1,x2,y2,x3,y3,x4,y4".
L'attribut href associe à la zone un fichier.
L'attribut alt permet d'ajouter un commentaire.
Pour introduire du son à l'ouverture de la page : <bgsound src="fichier son">.
Pour introduire un lien vers des ressources de son : <a href="fichier">Nom du lien</a>
De la même façon, on pourrait introduire d'autre type de fichiers qui seront exécutés avec le type de logiciel pertinent.