Formation Langage Html

Participez au vote ☆☆☆☆☆★★★★★

Aller au Téléchargement

Formation avance pour maitriser le langage Html

...

Langage HTML

1.1 Introduction

Le langage “HTML” (HyperText Markup Language = langage de marques hypertextes) est un langage permettant de décrire le comportement d'un document HTML ou page Web destiné à être visualisé par un navigateur.

Cette page Web peut afficher aussi bien du texte que des éléments multimédias (images, sons, etc…). Mais en réalité, le fichier écrit dans ce langage de description n’est autre qu'un fichier texte interprété par le navigateur.

Ce langage est né dans sa première version en 1992, de manière parallèlement à avec d’autres techniques telles que le protocole HTTP, l’adresse URL, et les navigateurs.

Ce langage, créé par par Berners Lee (créateur du Web), est issu d’un langage déjà existant : le langage SGML (Standard General Markup Language). Ce dernier permet d’effectuer des échanges de données informatiques (EDI) de manière structurée et complexe.

1.2 Langage SGML

Le langage SGML, produit en 1986 par l'ISO (International Standards Organization), correspond à une norme de représentation des documents. Elle explique que les documents (au sens large) peuvent être partagés en deux parties :

* celle contenant l'information et sa structure

* celle contenant la mise en forme de l'information

Le langage SGML est en fait un métalangage qui permet de créer des balises adaptées à une terminologie, un type de données "métier", par exemple : l'enseignement, l'aspect juridique,....

Le langage SGML n'est pas un système de formatage :

- le langage DSSL (Document Style Semantics and Specifications Language) est généralement utilisé pour le formatage de documents SGML.

- le document SGML sera accompagné de sa DTD (Définition de Type de Document).

En conclusion, le SGML est un langage complexe à mettre en œuvre. Il n'est donc pas adapté à la publication d'informations sur les réseaux, mais plutôt utilisé dans l'édition de documents imprimés ou électroniques.

1.3 Caractéristiques et Evolutions du Langage HTML

Le langage HTML a pour but de permettre au grand public (à monsieur tout le monde) de créer un site Web en toute convivialité, aussi est-ce une version volontairement simplifiée du langage SGML.

Le langage HTML est donc un langage simple devenu le standard de la publication de données non seulement sur les réseaux (Internet et Intranet), mais aussi sur d'autres supports (CD-ROM, télévision, téléphone portable, synthétiseur vocal, etc…).

Les documents HTML sont le plus souvent constitués d'un mélange d'informations et d'instructions de formatage, il est donc difficile d'en analyser le contenu sémantique.

Contrairement au langage SGML ou au langage XML, le langage HTML ne permet pas de créer ses propres balises. La liste des balises est définie strictement par des recommandations du W3C (World Wide Web Consortium).

Le langage HTML est donc le format idéal de présentation de l'information mais n'est pas toujours adapté à la structuration des données.

Le langage a connu plusieurs versions. La version HTML 2.0, développée par l'IETF, fit l'objet du RFC 1866 en novembre 1995. La version la plus couramment utilisée du langage HTML reste la version 3.2 normalisée en janvier 1997.

Elle précéda de peu la version 4.0 officialisée en décembre 1997. Cette version fut corrigée à plusieurs reprises, notamment en décembre 1999 par la version 4.01.

Si la version 3.2 est accessible au grand public à travers les éditeurs disponibles sur le marché, la version 4.0 s'adresse plus à des professionnels de l'informatique et donc du Web. Aussi est-ce la raison pour laquelle l'ensemble des chapitres du présent document s'appuie sur la version 3.2, la version 4.0 étant étudiée dans un chapitre complémentaire.

En dehors de la notion de version, le document de référence est le RFC 2854 publié en juin 2000.

Ces normes sont consultables directement sur le site www.w3.org, ainsi que sur le site des RFC : www.rfc-editor.org.

Autres langages de description

Depuis, d’autres langages sont apparus.

Le langage DHTML (Dynamic HMTL) n'en est pas un, car il n'est pas normalisé. Il ne fait que rassembler plusieurs techniques afin de rendre encore plus dynamique le comportement de votre page Web : version 4.0 du langage HTML, langages de scripts, feuilles de style, programmation utilisant les objets DOM (Document Object Model). Il est principalement utilisé par les sites de publicités tournantes.
Le langage XML (eXtensible Markup Language) en 1998 permettant de retrouver le côté formalisateur du langage d’origine (SGML). Il permet de plus de personnaliser ses propres éléments de description (possibilité de créer ses propres balises). Il est présenté comme le nouveau format universel pour les documents structurés accessibles sur le Web. Il est complété par le langage XSL (eXtensible Stylesheet Language), un langage de formatage des documents équivalent du CSS (Cascading Style Sheets) pour le langage HTML. On utilisera le langage XML si les données (au moins une condition) représentent un volume important, ou font l'objet d'une fréquente mise à jour, ou sont échangées avec d'autres systèmes d'exploitation.
Le langage XHTML avalisé en janvier 2000 par le consortium w3c, visant d’une part à formaliser le langage HTML, et d’autre part à être considéré comme un langage intermédiaire entre HMTL et XML. Il s'agit en fait d'une reformulation de la version 4 du langage HTML en tant qu'application XML 1.0. Sa conception modulaire permet une gestion plus facile de données type graphiques vectoriels, formules mathématiques ; des navigateurs utilisés sur un nombre de plate-formes croissant (mobiles, assistants numériques personnels....).

En raison de l’apparition de ces nouveaux langages, le langage HTML ne connaît plus d’évolutions au profit du langage XML.

En conclusion, la ressemblance entre les documents SGML et XML est le signe d'un lien de parenté étroit entre les deux langages, de même que les documents HTML et XHTML.

Principes

Les navigateurs Web proposent tous une fonction "Afficher le source" (ou "source", ou "code source") permettant de visualiser le code HTML de la page en cours.

Pour apprendre le HTML, il faut prendre le temps d'analyser quelques pages.

3.1 Balises

Ce langage de description de pages utilise des marques - ou balises (ou tags en anglais) - pour spécifier la façon dont un élément doit apparaître, pour afficher des images ou définir des actions.

Ces balises sont toujours placées entre les signes “<” et “>”, sans espace de séparation. Elles agissent très souvent par paire.

La première spécifie le début d’application du style (ou de l’action).

La seconde, qui comporte en plus le signe "/" juste derrière le signe "<", marque la fin d’application du style (ou de l’action).

Exemple :

<balise>texte</balise>

texte en gras

Ne pas oublier cette balise de fin, car le style ou l’action défini est actif tant que le navigateur ne rencontre pas la balise de fin.

Ainsi, si une balise “mettre en italique” est utilisée au début de votre document et que la balise “enlever l’italique” est oubliée, tout le document apparaîtra en italique !

Remarque 1 :

L'ensemble des deux balises s'appelle un élément du langage HTML.

Remarque 2 :

Les balises peuvent être saisies indifféremment en majuscules ou minuscules.

Tous les éditeurs de documents HTML (dont Microsoft Frontpage, Netscape Composer, etc.), ainsi que les navigateurs, reconnaissent les deux syntaxes.

Remarque 3 :

Le navigateur MSIE, quelle que soit sa version, interprète toutes les balises, alors que le navigateur Netscape 4.x n’interprète pas celles de MSIE. La version 6.0 de Netscape est censée régler les problèmes de compatibilité.

Remarque 4 :

Il est possible d'oublier certaines balises de fermeture sans altérer l'interprétation du code :

(paragraphe), </li> (article de liste), </td> (cellule de tableau), etc…

Remarque 5 :

Les balises peuvent s'imbriquer les unes dans les autres. L'exemple suivant consiste à rendre le mot contenu en style gras (b) et italique (i) : contenu.

Elles peuvent même se chevaucher, comme dans l'exemple ci-dessous, alors que le langage XHTML l'interdit : contenu.

Remarque 6 :

Les navigateurs ignorent ce qu'ils ne reconnaissent pas. Ils ne provoquent pas d'erreurs. Il peut survenir les phénomènes suivants : ce qui n'est pas interprété peut ne pas être affiché, un mauvais code fait que le code lui-même peut être affiché.

3.2 Attributs

Un glossaire sur les balises HTML présente chacune d'entre elles disposant d'un certain nombre d'attributs paramétrables dans un format spécifique.

Ces attributs sont insérés juste après le nom de la balise de début de style, séparé de ce dernier par un espace.

Chaque attribut est suivi du caractère “=” et d’une valeur. Le langage HTML offre la liberté d'encadrer ou non la valeur par des guillemets (ou double quote) alors que le langage XHTML l'impose.

La dernière valeur d'attribut doit être immédiatement suivie du signe ">" de fin de balise.

Exemple 1 :

<balise attribut="valeur">texte</balise>

texte taille 5

Le concepteur de pages Web emploie tout ou partie des attributs proposés (le minimum) en fonction de l'effet désiré.

Ainsi, le deuxième exemple ci-dessous permet de fixer pour le texte encadré, non seulement la taille de la police utilisée, mais aussi la couleur. Les couples attributs-valeurs successifs sont séparés par un caractère espace.

Exemple 2 :

<balise attr1="val1" attr2="val2"...>texte</balise>

texte taille couleur

La première tâche d'un concepteur néophyte consiste à comprendre la structure d'une page. Celle-ci se découpe en deux parties : une affichée par le navigateur (le corps), une invisible du visiteur (l'entête).

La conception d’une page relevant d’une démarche de communication, celle-ci doit être la plus esthétique possible pour attirer l’internaute et le fidéliser.

En conséquence, dans un deuxième temps, le concepteur sera amené à effectuer une première mise en forme du corps de la page : découpage en sections et paragraphes, et ajout de couleur.

C'est le propos du prochain chapitre.

Chapitre 2 : Outils

Navigateurs

1.1 Rôle des navigateurs

La présentation des navigateurs n'est pas envisagée ici, mais plutôt dans le module consacré aux services Internet. Le but de ce paragraphe est de rappeler brièvement le fonctionnement de cet outil et son rôle vis à vis de la page web.

Le navigateur est un logiciel client susceptible de communiquer avec l'ensemble des serveurs Internet. Par défaut, il reste dédié au service d'informations Web. C'est lui qui va lire la page web et en afficher le résultat.

Une fois que l'utilisateur valide une adresse URL dans la barre d'adresses du navigateur, ce dernier lance une requête HTTP auprès du serveur Web qui héberge le site désiré. Le serveur effectue une réponse HTTP en renvoyant la page demandée vers le client. Le navigateur du client la télécharge dans son cache interne, puis entame l'interprétation du code source associé à la page de manière séquentielle.

Le premier rôle attendu des navigateurs est donc d’interpréter les langages de description décrits dans le paragraphe précédent en fonction de l’extension donnée au fichier.

1.2 Extensions des fichiers

Tout fichier ayant pour extension *.htm (Windows 3.11) ou *.html (Windows 95 et plus…) sera interprété comme une page Web écrite en langage HTML.

Il en est de même pour un fichier ayant comme extension *.dhtml ou *.xhtml, ou *.xml.

Dans la famille du langage HTML, on rencontre d'autres extensions : *.shtml pour les pages incluant des appels aux scripts SSI (Server Side Includes), *.mhtml pour les pages aux multiples formats de données (type MIME), etc…

1.3 Navigateurs du marché

Le navigateur le plus connu du marché est Microsoft Internet Explorer (MSIE) : 90%. Deux autres navigateurs se partagent les 10% : Netscape Navigator (Netscape) et Opera de ...

Les sociétés cachées derrière les deux premiers navigateurs ont participé fortement à l'évolution du web, et de son langage premier, le langage HTML.

Elles ont développé chacune de leur côté des éléments de description (ou balises), voire des propriétés ou attributs spécifiques aux balises.

Au fur et à mesure du temps, ces balises "propriétaires" ont été soit normalisées par le consortium W3C, soit abandonnées.

Les navigateurs, par défaut, interprètent toutes les balises normalisées, ainsi que leurs balises spécifiques. Le navigateur « Internet Explorer », a plutôt tendance à interpréter toutes les balises. Le navigateur Netscape, en revanche, a tendance à interpréter les mêmes balises que le navigateur « Internet Explorer », mais avec une version de retard.

De plus, le rendu d'une même balise peut être différent d'un navigateur à l'autre.

Pour toutes ces raisons, il faut se soucier de la validité des éléments décrits dans sa page pour assurer une portabilité maximale de sa page ou de son site. En effet, le concepteur ne sait pas à l'avance de quel navigateur dispose le visiteur du site. Dans l'absolu, il doit s'assurer que les éléments décrits dans la page ne posent pas de problème d'interprétation par l'un quelconque des navigateurs cités.

En réalité, dans un premier temps, les concepteurs débutants s'attachent à travailler le meilleur rendu sous Internet Explorer en prenant la précaution de ne pas utiliser des éléments spécifiques. Dans un deuxième temps, les concepteurs avancés, connaissant les différences et les moyens de les contourner, incluent dans les pages des scripts adéquats.

Editeurs

2.1 Page statique ou dynamique

Avant de décrire les différentes possibilités en matière d'édition, il faut expliciter deux définitions : le Web Statique, le Web Dynamique. Si la première nécessite seulement un éditeur, la deuxième oblige à mettre en œuvre une véritable plate-forme de développement.

Le Web Statique consiste à fabriquer toutes les pages d'un site. Chaque changement impose une édition manuelle des pages à modifier. Les données sont contenues dans une collection de fichiers HTML situés sur un serveur Web. Le serveur met à la disposition du public l'ensemble des pages d'un site qu'il gère de manière indépendante. On dit qu'il héberge le site publié par tel ou tel concepteur.

Le Web Dynamique consiste à faire générer par des programmes les pages à la demande. L'utilisation de langages de scripts mettant en relation le programme avec des bases de données est incontournable. Une plate-forme minimale comprend successivement : un gestionnaire de bases de données (SGBD), un serveur web, un langage de script interprétable par le serveur. Les deux plate-formes les plus couramment utilisées, sont :

* MySQL/Apache/PHP

* Access/IIS/ASP

Le contenu de cette partie s'attache à décrire uniquement les éditeurs de pages statiques.

2.2 Editeurs de texte

Pour réaliser un document, il faut disposer d’un éditeur de texte.

Deux solutions s’offrent au concepteur :

Ecrire les balises de sa page à la manière d’un vrai programmeur
Ecrire sa page de manière conviviale à l’aide d’un éditeur avancé

Pour la première solution, le concepteur dispose de Bloc-Notes (NotePad) ou WordPad sous Windows, de Vi ou Emacs sous UNIX.

L'inconvénient réside dans le fait que chaque balise doit être saisie à la main. L'avantage vient du fait que tous les ordinateurs ont un éditeur de texte.

2.3 Editeurs HTML

Pour la deuxième solution, il dispose sous Windows du logiciel bureautique de Microsoft Word (Nouveau / onglet Page Web), du logiciel Microsoft Frontpage aussi bien dans sa version allégée (version Express livrée avec le navigateur MSIE) que dans sa version lourde (version 98 ou 2000 payante).

Sous Windows, d’autres logiciels font concurrence à ceux de Microsoft : Dreamweaver (version 4.0) de Macromédia, Adobe Golive 5.0, NamoWeb Editor, WebExpert, etc…

Ces éditeurs spécialisés bénéficient de fonctions d'édition automatisées. La structuration et le formatage des documents sont réalisés par l'intermédiaire du couple de moyens menu/icône.

L'intervention dans le code source n'a donc lieu que dans le cas où le formatage désiré n'est pas disponible dans les fonctions du logiciel. Il peut arriver aussi que des modifications de formatage soient plus aisées à travers le code source que directement dans la zone d'édition.

Avantages

Les avantages sont doubles.

Le premier est de permettre au débutant de réaliser des pages web en se limitant à une connaissance sommaire du langage HTML. Cela est possible grâce à l'édition par menus, icônes ou assistants.

Le deuxième trouve son origine dans l'intégration d'outils de gestion de site au sein de l'éditeur. Il bénéficie à la fois, d'une vision arborescente du site de développement (voire du site publié), d'un fonction de transfert de fichiers (client FTP) pour publier le site sur le serveur web, de moyens de vérification technique du site (liens hypertextes par exemple),...

Inconvénients

Les langages évoluent. Il faut donc mettre à jour le logiciel ou faire l'impasse sur les nouvelles possibilités. La conséquence en est un risque de dépendance vis-à-vis du logiciel.

Il faut veiller à ne pas utiliser de code et d'extensions propriétaires pour formater les documents.

Remarque :

Les éditeurs avancés ne sont pas présentés ici dans ce module. Ils peuvent faire l'objet d'un guide utilisateur simplifié dans un proche avenir. La description complète des fonctionnalités des éditeurs oblige le lecteur à connaître au préalable toutes les techniques du web. En conséquence, l'assimilation, ou tout au moins le parcours des deux modules consacrés au langage HTML paraît nécessaire avant d'aller travailler sous l'éditeur de son choix.

2.4 Convertisseurs

Un des chapitres complémentaires du document montre qu’il est possible de convertir les fichiers élaborés sous chacun des logiciels de la suite bureautique Pack Office de Microsoft en pages Web sans aucune difficulté.

Le but est d'obtenir des pages HTML à partir de documents non-HTML.

Le code produit n'est pas optimisé, et nécessite parfois des corrections avant publication sur un site Web.

En dehors du Pack Office, il existe un certain nombre de logiciels gratuits ou partagiciels permettant de transformer ou de convertir n'importe quel format de fichier en page web : rtf2html pour le format rtf, acrobat reader 5.0 pour le format pdf,...

Pour ceux qui ne seraient pas satisfaits, le consortium W3C tient à jour une liste d'autres outils (www.w3.org/pub/WWW/Tools/Filters.html) permettant la conversion : de Framemaker..., de troff..., de LateX..., de QuarkXPress..., de PageMaker..., d'AmiPro..., etc...

Systèmes Répartis INTERNET Langage HTML

Chapitre 3 : Document HTML

Réalisation d’un document HTML

1.1 Structure d'un document HTML

L'élément html (HTML 2.0) sert à préciser que le contenu du document est écrit en langage HTML. Il n'a pas de réelle utilité dans le cas où le langage HTML est le seul employé dans le document. Par contre, dans un document comportant des éléments écrits dans un autre langage, un langage de script par exemple, il sert à délimiter les portions écrites en HTML.

L'élément head (HTML 2.0), imbriqué dans le précédent, correspond à l'entête de la page, et contient des données invisibles pour le navigateur. Seul l'élément title voit son contenu s'afficher en guise de titre de document dans la barre de titre du navigateur. Ces données circulent au sein des entêtes protocolaires http.

L'élément body (HTML 2.0) définit le corps du document imbriqué dans l'élément html. Seul le contenu de cette section sera affiché par le navigateur.

On peut rencontrer l'élément !DOCTYPE (HTML 2.0) tiré du langage SGML. Placé avant l'élément HTML, il indique la spécification HTML respectée par le document, et éventuellement l'adresse du « validateur » de format. Même si le tableau suivant informe sur le contenu de cet élément en fonction de la version du langage, il reste plutôt utilisé dans les documents à partir de la norme HTML v4.0. Si la présence de cet élément est optionnelle dans les documents HTML, elle est par contre indispensable dans les documents XHTML.

Commande. Version HTML.

<!DOCTYPE HTML PUBLIC "-//IETF//DTD Level1//EN"> HTML 1.0

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> HTML 2.0

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.0//EN"> HTML 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> HTML 3.2

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<html>

<head>

…

</head>

<body>

texte

</body>

</html>

Remarque : en fait, aucune balise n'est obligatoire sous Windows. Seul le fait de donner comme extension au fichier *.htm ou *.html suffit au navigateur pour interpréter par défaut le document comme une page HMTL et afficher le texte inséré sans balises.

Systèmes Répartis INTERNET Langage HTML

1.2 Réalisation d'un premier document avec titre

Pour reprendre une tradition, le premier document HTML à élaborer peut comporter le texte suivant.

Exemple 1 : “Hello world !”

<html>

<body>

Hello world !

</body>

</html>

La réalisation de cette page s’effectue en trois étapes :

copier ce bloc de texte dans un simple éditeur de texte style Bloc-Notes
« enregistrer sous » le fichier en choisissant "Tous fichiers" et en forçant l’extension de type soit “htm” (version Windows 3.11) ou “html” (si le système l’autorise) : exemple hello.htm
visualiser le résultat obtenu en ouvrant cette première page Web avec le navigateur (double cliquer sur le fichier précédemment enregistré "hello.htm" dans l'explorateur)
si le résultat n’est pas satisfaisant, modifier dans l'éditeur le fichier "*.htm", enregistrer les modifications et actualiser l'affichage dans le navigateur (icône idoine), et ainsi de suite...

Pour modifier le code source de la page Web, il est possible de le faire depuis le navigateur. Dans MS Internet Explorer, l'action du menu « Affichage / Source » ouvre le code source de la page sous Bloc-notes.

Le résultat est le suivant :

Hello world !

L'entête permet en premier lieu de définir le titre du document apparaissant dans la barre de titre du navigateur à la place du nom de fichier, ceci à l'aide de l'élément title comme dans l’exemple ci-dessous.

Exemple 2 : “Premier document”

<HTML>

<head>

<title>Mon premier document HTML</title>

</head>

<body>

Systèmes Répartis INTERNET Langage HTML

Hello world !

</body>

</HTML>

Résultat :

L'absence de l'élément title (HTML 2.0) fait que le navigateur affiche le nom du fichier à la place du titre de la page.

Les moteurs de recherche prennent en compte cet élément. Pour représenter une page web au niveau des favoris, le navigateur choisit cet élément comme substitut à l'adresse URL de la page.

Voici un premier document HTML, rudimentaire certes mais prêt à être publié sur le Web et ainsi rendu accessible à des millions d’internautes sur toute la planète.

1.3 La balise de commentaire

Il est possible d'insérer des commentaires (HTML 2.0) dans le document à l'aide de la syntaxe suivante.

Les commentaires ne sont pas affichés par les navigateurs. Tout ce qui est placé entre  est donc ignoré.

Structurer le corps de la page

Un document lu est avant tout un document aéré. Pour cela, il faut diviser le contenu de votre texte en plusieurs paragraphes. Divers moyens sont à la disposition du concepteur pour diviser son document, pour séparer les différents éléments selon des interlignes différents ou par une ligne de séparation.

2.1 Paragraphes

Dans l'éditeur HTML, le simple fait de valider la touche <Entrée> crée un nouveau paragraphe.

L'élément p (HTML 2.0) définit un paragraphe. Le navigateur interprète cette balise en effectuant un saut de ligne et un retour en début de ligne.

La balise de fermeture est obligatoire dans la mesure où le paragraphe court sur plus d'une ligne. Sans elle, le résultat risque de devenir imprévisible.

Systèmes Répartis INTERNET Langage HTML

Attributs

align = mots prédéfinis Alignement du texte avec les valeurs : center, left, right.

width = nombre Largeur du paragraphe par défaut à 80 colonnes.

texte du paragraphe

Conventions :

Dans le tableau ci-dessus, l'élément p est présenté avec l'ensemble de ses attributs ou propriétés intrinsèques.

Derrière le signe "=" est indiqué le type de valeur attendu. La troisième colonne est là non seulement pour définir cet attribut, mais aussi pour donner les valeurs prédéfinies.

Les attributs faisant appel à des notions approfondies du langage ne seront pas commentés dans les chapitres consacrés aux bases du langage HTML.

Il en sera de même pour toutes les balises du langage dans la suite du module.

Exemple :

Ceci est un exemple de texte :

Né en 1992, le Web est aujourd'hui le service le plus utilisé d'Internet.

Résultat :

2.2 Sections

L'élément div (HTML 3.2) est utilisé pour diviser un document en différentes sections comme des chapitres, des extraits et des annexes.

Une division peut englober plusieurs paragraphes, images, ou titres. Elle peut aussi encadrer des séries de tableaux.

Il est possible d'emboîter une division dans une autre pour mieux gérer l'alignement ou d'autres effets de style pour un groupe de paragraphes déterminé.