Fiche TD n 1 Le langage HTML 1 Introduction Le HTML est le langage utilisé pour formaliser l information échangée sur internet. Il est constitué de balises qui indiquent de quelle manière les informations doivent être affichées. Les fichiers écrits en HTML sont stockés sur des serveurs web. www.univ-lehavre.fr en est un. Les utilisateurs d internet (vous et moi) demandent aux serveurs des pages web par l intermédiaire d un navigateur (Netscape, Konqueror, Internet Explorer, Firefox,...). Les serveurs envoient les pages HTML via le réseau. Ces pages sont ensuite interprétées par le navigateur internet qui affiche le contenu informatif de la page. Un fichier HTML est un simple fichier textuel. On le nomme avec l extension.html. Voici un exemple de fichier HTML. 1 <!DOCTYPE html PUBLIC " //W3C / / DTD XHTML 1. 0 S t r i c t / / EN" 2 " h t t p : / / www. w3. org / TR / xhtml1 /DTD/ xhtml1 s t r i c t. d t d "> 3 <html xmlns=" h t t p : / / www. w3. org / 1 9 9 9 / xhtml "> 4 <head> 5 <meta h t t p e q u i v =" Content Type " c o n t e n t = 6 " t e x t / html ; c h a r s e t = i s o 8859 15" / > 7 < t i t l e > O u t i l s i n f o r m a t i q u e s pour l e Web< / t i t l e > 8 < / head> 9 <body> 10 <h1>td n 1 < / h1> 11 <p> 12 Et v o i l à v o t r e <b> p r e m i è r e < / b> page web! <br / > 13 F a c i l e! Non? 14 < / p> 15 < / body> 16 < / html> Le navigateur peut interpréter le fichier premierfichier. html pour produire la page web suivante : 1
2 Structure d un fichier HTML Comme on le constate avec l exemple précédent, le HTML consiste à entourer le texte à afficher de balises qui définissent comment afficher ce texte. Le HTML est bien un langage de mise en forme de documents. Voyons comment ces balises organisent le document. 2.1 Le fichier HTML minimal Ce simple fichier texte commence toujours par la balise <html> et se termine toujours par la balise </html>. C est entre ces 2 balises que le reste du code doit se trouver. Entre ces 2 balises on trouve 2 éléments. Un en-tête décrivant le titre de la page et un corps dans lequel se trouve le contenu de la page. L en-tête est délimité par les balises <head> et </head>. Dans cet en-tête on trouve le titre qui est entouré des balises < title > et </ title >. Le corps est délimité par les balises <body> et </body>. Ainsi toute page HTML s articule autour du squelette suivant : 1 <html > 2 3 <head> 4 < t i t l e > Le t i t r e < / t i t l e > 5 < / head> 6 7 <body> 8 Contenu de l a page 9 < / body> 10 11 < / html> 2
2.2 Le type de document S il est vrai que le HTML est le langage universel du web, il existe plusieurs normes et plusieurs variantes du langage. Afin de renseigner le navigateur internet sur la norme utilisée dans une page HTML, il faut ajouter au début de chaque fichier le prologue de type de document. C est une référence à un fichier (au format DTD) qui définit la norme utilisée. Nous utiliserons ici la norme stricte du xhtml 1.0. Il faut utiliser le prologue suivant : 1 <!DOCTYPE html PUBLIC " //W3C / / DTD XHTML 1. 0 S t r i c t / / EN" 2 "DTD/ xhtml1 s t r i c t. d t d "> Les balises HTML sont maintenant reconnues comme balises XML. D autres balises XML peuvent apparaitre dans une page Web. Pour distinguer les balises XML entre elles et savoir à quel langage elles appartiennent on utilise la notion de namespace. Il faut ajouter le namespace xhtml à la balise principale (<html>) : 1 <html xmlns=" h t t p : / / www. w3. org / 1 9 9 9 / xhtml "> L encodage est le type de caractère utilisé pour écrire le fichier texte de la page web. Les lettres simples utilisent les mêmes codes (ASCII). Les lettres accentuées et les caractère spéciaux eux varient en fonction de l encodage du fichier. Il faut spécifier explicitement l encodage pour éviter aux navigateurs des erreurs d interprétation. Pour spécifier l encodage d une page on ajoute une ligne comme celle-ci dans la section HEAD du document : 1 <meta h t t p e q u i v =" Content Type " c o n t e n t = 2 " t e x t / html ; c h a r s e t = i s o 8859 15" / > 2.3 Le texte C est ce que contiendra majoritairement le document. Plusieurs types de balises viennent agrémenter le texte. 2.3.1 Les éléments intégrés emphase, mise en valeur <i>... </i> <em>... </em> emphase forte (bold) <b>... </b> <strong>... </strong> citation ou référence à une autre source <cite>... </ cite > définition <dfn>... </dfn> extrait de code de programmation <code>... </code> extrait de trace d exécution <samp>... </samp> texte à saisir par l utilisateur <kbd>... </kbd> instance de variable ou argument d un programme <var>... </var> Ces éléments s intègrent au sein même d une phrase et mettent en valeur un ou plusieurs mots. Notez la présence de balises <b>... </b> dans l exemple du début pour afficher en gras le mot première. Remarque : La balise <span> fait aussi partie de la catégorie des éléments intégrés. Cette balise ne fait rien par défaut mais elle va nous servir plus loin dans le cours où nous allons redéfinir les attributs de cette balise. La balise <span> est dite générique. 3
2.3.2 Les éléments de bloc A l image des éléments intégrés qui s appliquent aux mots et aux phrases, les éléments de bloc s appliquent aux paragraphes. L élément p Il sert à délimiter les paragraphes d un texte. Entre les 2 balises <p> et </p> on peut insérer du texte ainsi que des éléments intégrés, mais pas de bloc. Considérons l exemple suivant : 1 <p> 2 V o i c i un p r e m i e r <em> p a r a g r a p h e < / em>. 3 < / p> 4 <p> 5 Et en v o i l à un second. 6 < / p> Voici ce que nous donne le navigateur : Voici un premier paragraphe. Et en voilà un second. L élément pre Les balises <pre>... </pre> affichent un texte dit préformaté. Le texte est affiché avec tous les espaces et les sauts de lignes qui se trouvent dans le code. On peut aussi insérer des éléments intégrés dans ces balises. Considérons l exemple suivant : 1 <pre> 2 Ce p a r a g r a p h e 3 e s t 4 <b>p r é f o r m a t é< / b>. 5 < / pre> Le navigateur va afficher le texte de la même manière : Ce paragraphe est p r é f o r m a t é. Si vous n êtes pas convaincus de l effet produit, recopiez l exemple et remplacez les balises pre par des balises p. L élément address Les balises <address>... </address> permettent la bonne mise en forme des adresses. L élément blockquote Les balises <blockquote>... </blockquote> servent à afficher des citations. 4
L élément div À l image de la balise span pour les éléments intégrés, la balise div est l élément générique du bloc. Elle sera sur-définie par la feuille de style. 2.3.3 Les éléments vides Les éléments vides sont des éléments particuliers. Contrairement aux autres, ils n entourent pas un bloc de texte entre 2 balises < balise >... </ balise >. Ces éléments s utilisent seuls et ne modifient pas l apparence du texte. L élément br La balise <br /> s utilise seule et contient un espace et un / après le r. Il n existe pas de balise </br>. Cette balise permet de marquer la fin d une ligne dans un texte. Elle force le retour à la ligne. L élément hr La balise <hr /> permet de tracer une ligne horizontale pour séparer deux paragraphes. L élément img La balise <img /> permet d afficher une image dans la page Web. Elle prend plusieurs paramètres : Texte alternatif alt=... phrase affichée quand l image ne peut être chargée. Ce paramètre est obligatoire. Dimensions width=... et height=... donnent les dimensions de l image en pixels. border=...bordure en pixels. align=... aligne l image par rapport à la ligne de texte courante. Il peut prendre les valeurs top, middle, bottom, left ou right. 2.4 Les titres Les titres sont des balises de bloc qui changent la taille du texte à afficher. Le but est de hiérarchiser les documents. Les balises de titre sont de la forme <hn>... </hn> avec n allant de 1 à 6 en fonction de l importance du titre. Les balises de titre sautent une ligne après la balise de fin. Un exemple est plus parlant : 1 <h1>grand t i t r e h1< / h1> 2 3 <h2>un sous t i t r e h2< / h2> 4 <h3>un <em> sous sous t i t r e < / em> h3< / h3> 5 <p> 6 Un peu de t e x t e normal. 7 < / p> 8 <h2>un a u t r e sous t i t r e h2< / h2> 9 <p> 10 Encore un peu de t e x t e. 11 < / p> 12 <h2>un d e r n i e r h2< / h2> 5
13 <p> 14 Et e n c o r e un peu de b l a b l a... 15 < / p> Côté navigateur : Grand titre h1 Un sous-titre h2 Un sous-sous-titre h3 Un peu de texte normal. Un autre sous-titre h2 Encore un peu de texte. Un dernier h2 Et encore un peu de blabla... Remarquez dans l exemple précédent que les zones de texte simple sont encapsulées dans des balises <p>... </p>. En effet, chaque portion de texte doit être incluse dans une balise afin de lever toute ambiguïté. 2.5 Les listes Les listes permettent également d ordonner l information d une page web. Il existe 3 types de listes en fonction de vos besoins : la liste numérotée, où chaque item de la liste porte un numéro, la liste à puces et la liste de définitions. Les balises <ul>... </ul> définissent une liste à puces. A l intérieur de ces balises on trouve les balises <li>... </ li > qui définissent les items de cette liste. Les balises <ol>... </ol> définissent une liste numérotée. A l intérieur de ces balises on utilise les mêmes items <li>... </ li >. Exemple : 1 V o i c i une l i s t e numérotée : 2 < o l > 3 < l i > i tem 1 < / l i > 4 < l i > i tem 2 < / l i > 5 < l i > i tem 3 < / l i > 6 < / o l > Coté navigateur : Voici une liste numérotée : 1. item 1 2. item 2 3. item 3 6
2.6 Les liens Toute la puissance et aussi tout l intérêt des pages web résident dans les liens qu elles contiennent. Les liens donnent la possibilité de lier des textes, des images graphiques, des objets multimédia aux documents. Les textes, les images, les objets peuvent se situer sur n importe quel site du web. On arrive ainsi à la métaphore de cette toile d araignée mondiale (World Wide Web), qui permet des parcours virtuels dans des documents tout aussi virtuels. C est la balise <a>... </a> qui permet la création d un lien. En voici un exemple : 1 <a href = h t t p : / / f r. w i k i p e d i a. org / > Wikipedia < / a>, l e n c y c l o p é d i e 2 l i b r e. Pour le navigateur : Wikipedia, l encyclopédie libre. Le mot Wikipedia est souligné, en cliquant dessus avec la souris, la page web indiquée dans le paramètre href va s afficher. Notez l importance de ce paramètre. 7