Exposé - étude de cas - Le HTML
origines Le HTML est né en 1989 sous l'impulsion de Tim Berners Lee , créateur du web. Le HTML a été conçu comme un sous-ensemble figé du SGML pour les documents hypertextes. But : simplification du SGML pour le web.
DTD de SGML Une DTD ( Document Type Definition ) est un « document définissant de façon formelle la syntaxe d'un langage ».( Michel Dreyfus ). Le HTML se définit comme DTD publiques du SGML. Pour la version 4.0, la DTD est: <!DOCTYPE HTML PUBLIC « -//W3C//DTD HTML 4.0//EN »>.
Langage Standard Le HTML est un standard défini par le W3C. Il existe donc des règles préconisées. Le W3C ( world wide web consortium ) est l'organisme ayant en charge l'élaboration des recommandations et des spécifications concernant le Web.
Recommandations du W3C Ces recommandations décrivent les instructions du HTML et non leur implémentation, autrement dit leur traduction en programmes d'ordinateur. La consultation des pages web se fait donc indépendamment du système d'exploitation ou de la structure de l'ordinateur.
Marge de liberté des navigateurs Il existe malgré ces recommandations une marge de liberté des navigateurs ( naviagteurs qui eux dépendent d'un sytème d'exploitation) ce qui explique pourquoi une même page web puisse être différente d'un navigateur à l'autre. Instructions HTML propriétaires ajoutés par des éditeurs de logiciel.Ces instructions peuvent ne pas être comprises d'un navigateur à l'autre.
Les principes du HTML Le HTML n'est pas un langage de programmation Langage de balisage ( cf : balisage structurel ). Langage de balisage, Langage de structuration, Langage de présentation.
Caractéristiques du HTML La structure du HTML ne permet pas la séparation des éléments de description physique et le contenu même des documents. Hypertexte: Système de renvois permettant de passer directement d'une partie d'un document électronique à un autre ou d'un document à d'autres documents choisis
Ecrire une page en HTML Les fichiers HTML sont composés de texte ASCII ce qui assure l'indépendance des pages web par rapport à la plateforme. Créer une page HTML à l'aide de simple éditeur de texte tel que BlocNote à condition de l'enregistrer avec une extension .HTML ou .HTM
L'extension .html ou .htm est primordiale, au point d'avoir remplacé la déclaration DTD.
Comment s'écrit une page HTML ? Balises de début ou de fin : <HTML> </HTML> <HEAD> </HEAD> : ces balises contiennent des informations concernant le document et sont destinées aux navigateurs. Ces informations ne s'affichent pas. On retrouve à l'intérieur la balise <TITLE> </TITLE> ( information qui s'affiche dans la barre outils du client www. ) et la balise <META> </META> pour les métadonnées. La balise <BODY> </BODY> contient tout le corps du document
<TITLE>Exemple</TITLE> Structure de base <HTML> <HEAD> <TITLE>Exemple</TITLE> </HEAD> <BODY> ... </HTML>
Règles syntaxiques Les balises vont par deux : une balise de début < > et une balise de fin </ > Elles peuvent contenir des attributs pour spécifier l'action de la balise. Chaque attribut possède une valeur qui est mise en guillemets. Il faut respecter des règles d'imbrication. Pour vérifier l'écriture d'une page en HTML, il existe des services de validation du W3C : http://validator.w3.org/check/referer
Exemples : <p align= « center »><font color= « #800040 » size= « 7 »> (...)
Balises de marquages physiques du texte / balises stylistiques <b>...</b> ( = bold ) pour mettre en gras <i>...</i> ( = italic ) pour mettre en italique. <u>...</u> ( = underline ) permet de souligner le texte. <font>...</font> : balise auquel on associe les attributs suivants : color, face, size <hr> instaure une ligne de séparation. Ses attributions sont : align, size, width, color
Balises de mise en forme du texte. <P> </P> : paragraphe. attributs : align=«eft / center / right/ justify» . <br> : passage à la ligne. <FRAME> : cadre <FRAMESET> : jeu de cadre <TABLE> : un tableau qui structure la page mais qui ne se voit pas. <UL Type=circle > : pour faire des listes à puces. → <p>ceci est une liste </p> <UL Type=disc> <LI>premier élément</LI> ect... </UL>
Balises de mise en forme de la page <BACKGROUND> : image utilisé en fond de page. <BGCOLOR> : couleur de fond de la page.
L'hypertexte Les liens internes : ils gèrent la fragmentation des documents ( aller d'une entête à une table des matières ... ). Ils facilitent la navigation à l'intérieur d'un même document HTML. Deux instructions sont nécessaires : poser une ancre et pointer vers cette ancre.
Ecrire une ancre Il faut d'abord marquer l'endroit du lien vers lequel on veut pointer. En HTML, ces endroits s'appellent ancres et sont représenté par le caractère a dans la balise : <a> (a = anchor = ancre). Le texte proposé à l'utilisateur comme lien est situé entre les balises <a> et </a>. Exemple de balise : <a name= «ancre1»>ceci est une ancre</a> ( nb : le texte a l'intérieur de l'ancre permet l'affichage de l'ancre par la naviagteur ).
Pointer vers une ancre Il faut ensuite poser les renvois. Il peut y avoir plusieurs liens pointant vers la même ancre ( exemple : la table des matières). Pour que cet élément devienne un lien, l'attribut href est nécessaire (href = hyper reference = référence hyper(texte)). L'attribut href prend comme valeur la cible du lien vers lequel on sohaite pointer. Exemple : <a href = «#ancre1»>ceci est un lien vers l'ancre 1 </a>
Les différents types de liens locaux liens vers un même fichier ( voir exemple au dessus ), liens relatif vers un fichier situé dans un autre dossier ( valeur de l'attribut a href sera «le chemin du fichier») des liens absolus vers des fichiers d'un autre dossier ( exemple : lien absolu local sur un ordinateur : «file://» )
Les liens universels Ces liens permettent des renvois vers des fichiers HTML situés sur des serveurs distants. La valeur de l'attribut a href sera l'adresse url du lien. Exemple : <a href= «http://www.yahoo.fr»>ceci est un lien vers yahoo</a>
Multimédia Une page HTML permet d'inclure du texte, des images, des animations. On obtient donc des documents multimédias. La balise <img> permet d'afficher une image en idiquant sa source grâce à l'attribut scr= «image.gif».
Outils pour éditer Les éditeurs de texte : WYSIWIG Les navigateurs Bloc-notes HAPedit dreamweaver
Avantages du HTML Langage simplifié du SGML Langage adapté au document hypertexte. Création de documents multimédias Indépendance par rapport au système d'exploitation.
Limites du HTML les éléments prédéfinis du HTML ont des significations de nature diverses : signification sur la nature même de leur contenu ( h1-h6, title, address... ), on parle alors de sémantique, description de la mise en page souhaitée par l'auteur ( center, div, i , big, small... ).
Limites du HTML Jusqu'à une certaine époque le HTML était caractérisé par le mélange de ces deux types de balises. Ce mélange conduit à deux difficultés majeures : les documents ont une espérance de vie courte, un même document ne peut pas être facilement réalisé selon des modèles physiques différents.
Limites du HTML Ensemble prédéfini de balises, les balises disponibles en HTML et la sémantique qui leur est associée sont prédéfinies par la norme, l'utilisateur n'a aucune possibilité de définir ses propres balises dans le but de mieux décrire la structure des documents.
Perte de l'information sémantique. En html l'information sur la sémantique est perdue d'autant plus si le lecteurs n'a pas les mêmes repères culturels ( exemple du code postal ). Le HTML ne permet donc pas un traitement automatique des informations.
Difficulté de mise à jour Le HTML est un sous ensemble figé du SGML. Contrairement au SGML, le HTML ne permet pas une séparation de la structure, de la mise en page et du contenu du document. Il en résulte alors une difficulté de mise à jour.
Evolutions Les balises de pure mise en forme tendent à disparaître, laissant place à des feuilles de style ( css ). Il est recommandé de ne plus utilisé ces balises car à l'avenir, elles ne seront plus supporter par les navigateurs. Le html servira à décrire le contenu et les feuilles de style à décrire la forme du document.