site de Fabien Torre Notes de cours sur le langage HTML Motivations et principes du langage HTML pour la structuration de documents sur le web : éléments, balises, attributs, entités, métadonnées, nouveautés amenées htmls, codages de questionnaires sous forme de formulaires HTML, ete. (1. Principes généraux 1.1 Motivation initiale La motivation initiale est de pouvoir échanger des documents sur Internet en utilisant le protocole HTTP (HyperText Tranfer Protocol). est La solution proposée a été le langage HTML (HyperText Markup Language). Celui- indépendant de la machine et ouvert. Il ne s'agit pas d'un langage de programmation : HTML permet uniquement de structurer un document. Un fichier HTML est un simple fichier texte que I'on peut ouvrir et modifier avec un éditeur quelconque. Outre le texte du document, le fichier contient des balises qui vont préciser la structure ou I'apparence du document. Bali: t ut Une balise peut prendre trois formes. + La premiére, la plus simple, un simple nom d’élément encadré par les signes inférieur et supérieur : Ce sera le cas des éléments ar ou HR.+ Dans un deuxiéme temps, la balise peut porter sur une partie précise du document, auquel cas, elle doit s’ouvrir et se refermer : texte concerné igne / annonce la balise fermante. Voir par exemple I'élément 8 qui met le texte encapsulé en gras. + Enfin, il peut étre nécessaire de préciser le comportement de la balise, cela se fait avec des attributs, selon la syntaxe suivante : texte concerné Un attribut étant défini comme ceci : non_attribut="valeur" Ainsi, un paragraphe étant défini a l'aide de I'élément p, l'attribut ALIGN précisera sa justification . Structure d'un document Le squelette de base que l'on retrouvera dans tout document HTML est le sui en-téte du document corps du document Dans I'en-téte, on définira obligatoirement un titre a l'aide de l'élément TrTLe. Voir également les attributs de l'élément sooy pour la définition des couleurs du document et d'une éventuelle image de fond. Pour étre plus rigoureux, la premiére ligne d'un document HTML doit mentionner un DOCTYPE, c'est-a-dire le langage HTML que l'on va utiliser dans la suite. Les variations possibles sont :+ respecter ou pas les contraintes d'un langage XML : si oui, il s‘agit de xHTML, sinon de itm. 4.01; * se restreindre aux éléments purement sémantiques ou s'autoriser les éléments de mise en forme : dans le premier cas on fait du strict, sinon du Transitional. Une autre précision important est I'encodage utilisé pour les caractéres : i] pourrait s'agir de 1atin1, d'utfs, ete. Finalement, si l'on fait le choix d'un HTML avec contraintes XML, éléments de mise en forme et codage des caractéres en UTF8, le squelette du document devient : en-téte du document avec un title corps du document (. Eléments, balises et attributs 3.1 Eléments de base 8 [gras r italique v souligné 5 barré rr machine & écrire ar6 plus gros smaut [plus petit rout __ changement de police, taille et couleur Ha... H6|titre de niveau 1, niveau 2, ete. en mettre du texte en avant stone __ [mettre du texte en avant, plus fortement encore cenren [pour centrer PRE du texte déja mis en page Ko0__|texte tapé au dlavier suB fun indice suP in exposant aR passage & la ligne ° paragraphe HR tirer un trait ING insérer une image jase __|définir une abréviation BLINK [texte clignotant marquee [texte défilant 3.2 Liens hypertextes Un seul élément, l'élément 4, permet a partir d'un document de pointer sur un autre. Crest cet élément qui tisse les fils du web. Cet élément permet également de créer des liens & 'intérieur d'un document ou encore de proposer l'envoi d'un mail. 3.3 Listes lest possible en HTML de définir différents types de listes : * des listes non ordonné .s (6lément ut, élément Lx permet de définir chaque item) ; * des listes ordonnées (élément o1, I’élément Lt permet de définir chaque item) ; + des listes de définition (o1, Lx, oT et 00). I est naturellement possible d'imbriquer plusieurs listes, qu'elles soient de méme type ou pas.3.4 Caractéres spéciaux et réservés Les entités permettent d'obtenir des caractéres qui ne sont pas toujours accessibles depuis une combinaison de touches au clavier, ou des caractéres qui sont déja réservés par le langage HTML. Une entité est un code encadré par une esperluette (8) et un point-virgule (;). Quelques exemples : | aEacutes aoeligs engrave; copys accedil alts eet Elva lO >18 amp; 3.5-Tableaux Quatre éléments pour définir des tableaux : * Taste pour la définition du tableau ; + TR pour définir une ligne ; + Tu pour une case de titre ; + 1 pour une case de données, c'est-a-dire une case queleonque. 3.6 Images réactives La base est une image quelconque insérée avec I’élément 1¥6 en précisant, & l'aide de l'attribut USEMAP qu'une carte est associée a l'image. Les éléments map et area permettent ensuite de définir des régions dans l'image et d'associer des adresses A chacune de ces régions. En cas de superposition de deux zones, c'est la premiére définie qui sera activée si Vutilisateur vient & cliquer dans la partie commune aux deux zones. (4. Formulaires 4.1 Questions et réponses (name, value... et id!) Dans un formulaire, on trouve des questions et des réponses, elles seront respectivement codées par les attributs HTML nane et value. Ce sont les valeurs de ces attributs qui seront transmises lors de la validation du formulaire.Le nom d'une question donné dans un attribut nane peut se terminer par des crochets (}. Cela signifie que l'utilisateur pourra donner plusieurs réponses 4 une méme question et est une liste de valeurs qui sera transmise. Selon la forme que prend une question, son nane peut apparaitre une ou plusieurs fois. Lattribut value peut ne pas apparaitre du tout, ou il peut étre dans un élément qui porte Vélément nane, ou ailleurs ! Enfin, les attributs id peuvent aussi étre utilisés, pas spécifiquement pour le traitement des questions/réponses du formulaire, mais pour des mises en forme CSS et des manipulations JavaScript. Il faut alors une certaine discipline pour nommer et discerner Je name et I'to d'un méme élément ! 4.2 Le formulaire Un premier élément permet de délimiter le formulaire et de préciser le traitement qui devra étre effectué sur les données recueillies : FoR. I sutilise avec ses attributs action et method : le premier indique l'adresse du script auquel il faut transmettre les réponses, le second la méthode de transmission (cet OU post). 4.3.Les inputs La majorité des entrées (texte et boutons) peuvent étre réalisées avec élément 1NPUT. Son attribut type est & choisir parmi : © text :sa isie d'une ligne de texte, * radio, checkbox : des boutons & cocher, choix unique ou choix multiples, * submit / reset : boutons pour valider le formulaire ou le réinitialiser ('attribut value précise le texte visible sur le bouton), + range : valeur numérique sur un curseur hortizontal, * nunber : saisie d’un nombre, * hidden : champ caché a I'utilisateur, * (week, month, date), * (url), * (password). D'autres attributs peut étre précisé + nane pour donner le code de la question, * value pour fixer la réponse, + size pour fixer la taille du texte apparent, * checked pour cocher un bouton a l'avance, + placeholder pour donner une indication qui disparaitra a la saisie, * min, max, step.4.4 Listes déroulantes Pour une liste déroulante, il s'agira de I'élément setecr associé a l'élément option pour définir chacun des items de la liste. + labalise setect porte l'attribut name, + les balises orrzon portent les vatues. On peut sélectionner une option particuligre a I'avance avec I'attribut sevecteD. 4:5_Texte sur plus d'une ligne Sil'on a besoin d'une saisie de texte s'étendant sur plusieurs lignes, on utilisera ’élément TEXTAREA avec attributs NAME, COLS et Rows (les deux derniers permettant de préciser la taille apparente de la fenétre de saisic). 4.6 Structurations L'élément LaseL permet d'encadrer I'intitulé d'une question ou d'une réponse. L'attribut FoR permet de préciser I'to de la question/réponse associée au label. Les éléments FreLDsET et LeGeND permettent d'encadrer une question et ses options de réponse: Enfin, l'éément optorovp permet grouper des options dans une liste déroulante. Lattribut Laset permet de donner un titre A un groupe. 4.7 Essai de transmission ‘Vous pouvez tester vos propres formulaires en suivant les instructions de cette page. 5. Langage HTML5 On décrit ici les nouveautés HTMLs (simplications, nouveaux éléments sémantiques et microdata) qui ne concernant pas les aspects dynamiques. Pour les questions de canvas et de programmation Javascript, on se reportera au cours de JavaScript et ala page des travaux pratiques JavaScript. 5.1 Simplifications et nouveautés HTMLs introduit des simplifications du début des fichiers HTML, en particulier la premiére ligne de DOCTYPE, la déclaration du codage des caractéres utilisé, le lien vers Ia feuille de style et I'inclusion de code JavaScript. Ainsi, le squelette général d'une page HTMLs sera :