Sommaire du site
Présentation
Comment apprendre
L'équipement
La page web
Styles et CSS
HTML, structure de la page
HTML, éléments du corps
Le langage JavaScript
JavaScript, objets "core"
JavaScript, DOM, les bases
JavaScript, DOM, node
JavaScript, compléments
Le langage PHP, les bases
PHP, fonctions utiles
PHP pour le web
PHP, compléments
SQL, introduction
MySQL et PHP pour le web
MySQL, plus loin...
Applications AJAX
Annexes utiles
Fichier .htaccess
Sécurité des sites web
Conception d'un site web
Référencement,
syndication
Page mise à jour le : 12-08-2015
Il ne s'agit pas ici de présenter toutes les spécificités de HTML mais d'indiquer la structure de ce langage et de voir l'essentiel de ses possibilités.
Lors de la consultation d'une page web par un utilisateur, le serveur envoie à son navigateur le contenu de la page sous la forme d'un fichier texte contenant, outre le contenu de la page les informations de sa présentation. Cette description est faite en HTML.
HTML signifie " HyperText Markup Language " : langage de balises (pour) hyper-texte. C'est un langage de description de page et pas un langage de programmation.
Le langage est normalisé par un organisme international le " World Wide Web Consortium " (ou W3C) afin que les pages soient affichées de la même manière indépendamment des machines et des navigateurs. Cet objectif n'est pas vraiment atteint car la plupart des navigateurs n'implémentent pas toutes les fonctionnalités requises par la norme et, certains en ajoutent qui leur sont propres.
* Le langage est constitué de caractères lisibles, à l'origine du " pur ASCII ", donc pas de caractères nationaux (é, à, ç...) ceux-ci sont remplacés par des codes spécifiques ('é' pour 'é').
Désormais cette codification est devenue inutile car il est maintenant possible d'informer le navigateur de la
page de code à utiliser pour l'affichage.
On utilise toujours certains codes spéciaux qui ne sont pas représentables tels " " (espace insécable)
ou pour des caractères qui ont une signification particulière en HTML comme '<' pour la caractère '<'.
* Les sauts de ligne et espace multiples sont présentés comme un espace unique.
* La structure du langage est organisée en éléments HTML identifiés par les balises. Celles-ci ont
un nom encadré par les caractères < et >.
La plupart des balises existent en deux exemplaires : balise ouvrante pour marquer le début d'un passage et
balise fermante pour la fin, celle-ci comporte le même nom que la balise ouvrante mais préfixé par une barre
oblique /. Pour quelques unes la balise fermante n'existe pas.
<i> ce texte est en italique</i>
* Les éléments peuvent comporter des "attributs" qui spécifient un comportement particulier. Ceux-ci suivent le nom de l'élément dans la balise ouvrante. Normalement les attributs sont associés à une valeur qui doit être encadrée de guillemets ou d'apostrophes.
<p align="center"> Ce paragraphe est au centre. </p>
* Le nom de la balise et ses attributs peut être en majuscules ou minuscules.
* Si le navigateur ne reconnaît pas (ou ne sait pas traiter) un élément, il l'ignore. Cependant il prend en compte ce qui est entre la balise ouvrante et la fermante.
* Les balises peuvent être imbriquées, mais ne doivent pas se chevaucher.
<p> Il y a de l'<i>italique</i> dans ce paragraphe. </p>
* Si le navigateur trouve des erreurs dans la structure, il "se débrouille au mieux" mais n'affiche pas de message d'erreur.
En tout début de page (il ne doit y avoir rien d'écrit avant) on trouve une ligne indiquant le type de document. Généralement c'est :
Cela indique que la page est en HTML 4.01 de transition et que la page est structurée selon le document "http://www.w3.org/TR/html4/loose.dtd".
Le reste de la page qui doit se trouvé encadré par le jeu de balises <html>...</html> est constitué de deux parties : la tête et le corps.
La tête : balise <head>, indique les spécifications globales pour la page. Normalement aucun affichage ne se fait dans cette partie.
Le corps : balise <body> est le contenu effectif de la page.
Qui affiche tout simplement "Bonjour à tous";
Il est possible et souvent utile de placer des commentaires dans la page. Il s'agit de textes qui ne seront pas affichés le navigateur.
Les commentaires sont identifiés par un système de "balises" particulier. Le commentaire est encadré par "<!--" et "-->"..
Leur balise n'a pas d'équivalent de fermeture, toutes les informations sont dans les attributs.
Il y en a de toutes sortes, pour indiquer l'auteur de la page, le résumé de son contenu à l'usage des robots des moteurs de recherche, etc.
En voici un assez importante et destinée au navigateur.
Cet élément 'META' indique par ses attributs qu'il s'agit d'un fichier texte-html contenant des caractères du jeu " UTF-8 ". Ainsi on pourra utiliser les caractères accentués sans problèmes.
Certains utilisent 'meta' pour rediriger la page, par exemple :
<meta http-equiv="refresh" content="2; URL=http://www.ailleurs.org/">
Ainsi la page courante ne sera affichée que pendant 2 secondes puis remplacée par la page du site spécifié.
Cette pratique est contestée, tout au moins dans le cas où l'on veut changer de page. Pour cela, il vaut mieux utiliser un mécanisme de redirection sur le serveur.
En revanche, cette technique est intéressante dans les cas où les contenus de la page sont fréquemment modifiés, on souhaite que la page se recharge automatiquement régulièrement. On utilise alors la forme simplifiée :
<meta http-equiv="refresh" content="60">
Ainsi la page sera rechargée chaque minute.
Il indique le titre de page qui s'affichera dans la fenêtre du navigateur. Cette mention est importante car ce titre sera aussi celui de la fenêtre du navigateur et celui du raccourci (signet, favori) si l'utilisateur en place un sur cette page.
Feuille de style interne, elle est introduite par l'élément 'style' :
Qui crée un style de paragraphe et une classe "avertissement".
Feuille de style externe avec l'élément 'link' :
La feuille de style est dans le même répertoire que la page, son nom de fichier est "global.css".
Cette technique consiste à partager la fenêtre du navigateur en plusieurs "sous-fenêtres" : cadres ou frames. Celles-ci accueillent chacune leur propre document HTML.
Pour réaliser ce partage, on crée un document HTML "principal" : la page de cadres qui indique la forme du partage et les pages HTML à placer dans chaque cadre.
Cette technique, bien que définie et non déconseillée par le W3C, est très controversée car elle peut poser quelques problèmes aux utilisateurs.
* L'adresse de la page, indiquée dans la barre d'adresse du navigateur, ainsi que le titre de la page de la barre
de titre sont ceux de la page de cadre. Par conséquent si l'on utilise des liens qui modifient le contenu d'un
des cadres ce changement n'est pas répercuté dans les informations directement visibles du navigateur.
En particulier si l'utilisateur place un signet / favori / raccourci dans ce contexte celui-ci l'amènera toujours
à la configuration de départ du système de cadres.
* Si l'utilisateur imprime la page, il risque d'être surpris car son navigateur peut imprimer une seule des pages d'un des cadres et ce ne sera pas nécessairement celle souhaitée.
* Certains navigateurs ne gèrent pas correctement les pages de cadres et n'afficheront rien. Ce n'est pas très grave car de tels navigateurs ne sont plus utilisés, sauf....
Remarquons que cette structure peut être remplacée dans la plupart des cas par l'utilisation des styles de boîte qui donnera une visualisation du même ordre en évitant les inconvénients cités.
Naturellement, il faut réaliser "classiquement" les pages qui seront placées dans les cadres. Seule la page de cadre, qui décrit l'agencement est particulière.
Pour la réaliser, on utilise à la place de l'élément <body>, l'élément 'frameset'.
Celui-ci, par ses attributs, indique la composition de page : nombre de lignes et de colonnes.
Les "frameset" peuvent être imbriqués : il peut y avoir des cadres dans des cadres.
Et à l'intérieur de 'frameset' on utilise, pour chaque cadre, un élément 'frame' (sans balise de fermeture) qui donne, par l'attribut "src=" l'adresse de la page à placer dans le cadre.
A la suite de l'élément 'frameset' il est possible de placer un élément 'noframes' qui contiendra un texte s'affichant si le navigateur ne gère pas les cadres.
Voici un exemple.