HTML5 : Institut supérieur de gestion 2020-2021 PDF

HTML : Hyper Text Markup Language Institut supérieur de gestion 2020-2021 Moez Hammami 1 Plan  Le fonctionnement des sites web  Versions et historique de HTML  Editeurs de texte  Navigateurs  Les balises HTML  Structure générale d’un doc...

HTML : Hyper Text Markup Language Institut supérieur de gestion 2020-2021 Moez Hammami 1 Plan  Le fonctionnement des sites web  Versions et historique de HTML  Editeurs de texte  Navigateurs  Les balises HTML  Structure générale d’un document HTML  Organisation du texte ◦ Les paragraphes ◦ Les titres  Listes non ordonnées  Listes ordonnées  Liste de description 2 Plan  Images  Liens  Tableaux  Formulaires ◦ Les attributs d’un formulaire ◦ Les zones de saisie basiques ◦ Les éléments d'options  fichiers audio  fichiers vidéo  Integration d’objets (fichiers pdf, flash)  Les frames  Les balises structurantes de HTML5 3 Le fonctionnement des sites web  Pour créer un site web, on doit donner des instructions à l'ordinateur. il faut aussi indiquer où placer ce texte, insérer des images, faire des liens entre les pages, etc.il va falloir utiliser un langage pour pouvoir donner des instructions à l’ordinateur :Plutôt deux langages HTML+CSS à cela s’ajoute JavaScript pour ajouter de l’interactivité à la page web.  HTML (HyperText Markup Language) : apparu dès 1991 lors du lancement du Web. Son rôle est de gérer et organiser le contenu: du texte, des liens, des images, des formulaires  CSS (Cascading Style Sheets, aussi appelées feuilles de style) : le rôle du CSS est de gérer l'apparence de la page web (agencement, positionnement, décoration, couleurs, taille du texte…). Ce langage est venu compléter le HTML en 1996.  JavaScript est un langage de programmation qui ajoute de l'interactivité au site web (par exemple : jeux, réponses quand on clique sur un bouton ou des données entrées dans des formulaires, animations.. 4 Pourquoi CSS+HTML :  CSS améliore fortement le rendu de la page web. Le HTML définit le contenu. Le CSS permet, lui, d'arranger le contenu et de définir la présentation : couleurs, image de fond, marges, taille du texte…  Voici un site utilisant HTML+CSS 5 Pourquoi CSS+HTML :  CSS améliore fortement le rendu de la page web. Le HTML définit le contenu. Le CSS permet, lui, d'arranger le contenu et de définir la présentation : couleurs, image de fond, marges, taille du texte…  Le même site en utilisant HTML uniquement( on peut désactiver le CSS en installant le addon « web developer » et en désactivant tous les styles) 6 Versions et historique de HTML  HTML1 : première version créée par Tim Berners-Lee sur la base du langage SGML en 1991.  HTML2 : deuxième version, apparue en 1994. Avec l’apparition de Netscape Navigator 0.9 le 13 octobre 1994, le support de nombreux éléments de présentation est ajouté : attributs de texte, clignotement, centrage  HTML3 : En mars 1995, le World Wide Web Consortium (W3C) nouvellement fondé propose le résultat de ses recherches sur HTML+ il aboutit en 1996 au HTML3.0 avec plusieurs nouveautés comme les tableaux, les scripts, le positionnement du texte autour des images, le support des expressions mathématiques etc.  HTML4 : apparue en 1998 avec la possibilité d’utiliser les frames (découpage d’une page en plusieurs parties), des améliorations sur les formulaires, utilisation des feuilles de style (CSS).  HTML5 : finalisée en octobre 2014 et permet :d’inclure facilement des vidéos, d’ajouter plus de précisions sur les champs d’un formulaire. 7 Editeurs de texte Sublime text  est un éditeur de texte gratuit prenant en charge plusieurs langages de programmation différents, dont CSS, HTML, XML, XSL, JavaScript, etc. Sublime Text intègre la plupart des fonctionnalités de base d'un éditeur de texte, dont la coloration syntaxique personnalisable, l’auto complétion, un système de plugins… 8 Editeurs de texte Autre éditeurs  Notepad++ ;  Brackets ;  jEdit ;  PSPad ;  ConTEXT ;  ATOM  Codepen : solution en ligne offrant 3 éditeurs en parallèle HTML CSS et Javascript avec interprétation instantanée. (pas besoin de basculer vers un navigateur pour pouvoir exécuter le programme) 9 Navigateurs  Le navigateur est le programme qui nous permet de voir les sites web. le travail du navigateur est de lire le code HTML et CSS pour afficher un résultat visuel à l'écran. Il est conseillé d'installer plusieurs navigateurs sur son ordinateur pour s'assurer que son site fonctionne correctement sur chacun d'eux. De manière générale, il est conseillé de tester son site web régulièrement au moins sur Google Chrome, Mozilla Firefox et Internet Explorer/Edge. Safari opera chrome Firefox sous ios 10 Les balises HTML  Les balises HTML structurent le contenu du document, en délimitant des blocs qui seront amenés à contenir des paragraphes, des titres, différents types de médias (images, sons, vidéos), des contrôles de formulaires ou encore des liens hypertextes.  Une balise débute par le signe « inférieur à », et finit par le signe « supérieur à » ; on parle aussi de chevrons. Il s’agit alors d’une balise ouvrante :  Son nom, indiqué entre les chevrons, définit son rôle. Ici, marque le début d’un paragraphe.  Pour marquer la fin du paragraphe, on fait appel à une balise fermante dont le nom est cette fois-ci précédé du caractère slash :  Tout ce qui se situe entre les deux, représente le contenu de l’élément HTML. Ceci est un paragraphe. 11 Les balises HTML  Il existe des balises autofermantes ou orphelines définies en tant que telles pour ne posséder aucun contenu particulier. C’est le cas de  qui correspond à une séparation horizontale, mais qui ne peut contenir aucun texte ou aucun autre élément,  qui correspond à un saut de ligne.  Elles peuvent servir aussi à insérer un élément à un endroit précis (par exemple une image). Il n'est pas nécessaire de délimiter le début et la fin de l'image, on veut juste dire à l'ordinateur « Insère une image ici ». 12 Les balises HTML  Les commentaires :À l’instar des autres langages, HTML comprend la possibilité d’annoter le document par des commentaires. Ceux-ci ne seront pas affichés par le navigateur. Ils pourront vous servir d’aide-mémoire, ou d’indications pour suivre l’imbrication de balises lorsque le document devient plus conséquent. Un commentaire débute par 13 Les balises HTML Propriétés  Les balises doivent être ouvertes puis fermées récursivement, comme des parentheses ([...]{(...)})elles doivent être fermées dans le sens inverse de leur ouverture. Un exemple : : correct.  Une balise qui est ouverte à l'intérieur d'une autre doit aussi être fermée à l'intérieur. : incorrect, les balises s'entremêlent.  Tout ce qui est entouré par deux balises s’appelle élément  Un élément peut éventuellement contenir du texte, liens, balises...  Un texte en clair (non-entouré par une balise) est affiché  Les balises non reconnues seront ignorées  Les commentaires en HTML sont ignorés par le navigateur  Les commentaires ne sont pas affichés mais restent visibles dans le code source de la page et ne doivent donc jamais contenir une information confidentielle. 14 Structure générale d’un document HTML  Le document HTML possède par défaut une tête et un corps.  La tête (élément head) définit les propriétés globales du document (titre, apparence, méta-informations)  le corps (élément body) renferme des balises de contenu.  Voici la structure minimale d’un document HTML :  DOCTYPE : C’est une directive permettant de préciser qu’il s’agit d’un document HTML 15 Structure générale d’un document HTML Que peut contenir ? !  titre du document (affiché par le navigateur en haut de la page souvent dans l’onglet de la page)  pour réferencer un fichier (CSS par exemple)  pour inclure du code CSS  peut contenir : ◦ des informations sur l'encodage (pour la gestion des caractères spéciaux, UTF-8. Cette méthode d'encodage permet d'afficher sans aucun problème pratiquement tous les symboles de toutes les langues) ◦ des informations pour les moteurs de recherche pour référencer le site 16 Structure générale d’un document HTML Que peut contenir ? !  texte  tableau  image/vidéo/document  menu  lien  formulaire  liste ... 17 Structure générale d’un document HTML Les attributs  Les attributs sont les options des balises. Ils leur donnent des informations supplémentaires. L'attribut se place après le nom de la balise ouvrante et a le plus souvent une valeur, comme ceci :   Par exmple la balise Seule, elle ne sert pas à grand-chose. On pourrait rajouter un attribut qui indique le nom de l'image à afficher :  L'ordinateur comprend alors qu'il doit afficher l'image contenue dans le fichier photo.jpg.  Dans le cas d'une balise fonctionnant « par paire », on ne met les attributs que dans la balise ouvrante et pas dans la balise fermante. Par exemple, 18 Structure générale d’un document HTML Les attributs  On peut avoir plusieurs formes d’attributs ... ... ...  Quelques attributs standards ◦ class : nom de classe ( à voir dans la partie CSS) ◦ id : identifiant unique dans la page ( à voir dans la partie CSS) ◦ style : style CSS de l’élement ◦ value : pour la valeur à afficher ( à voir dans les formulaires)  Exemple ◦ style="font-size:60%;" : pour la taille du texte ◦ style="text-align:center;" : pour l’alignement du texte  Remarque il est déconseillé d’utiliser cette propriété dans HTML, pour des raisons de clarté du code, le formatage du texte sera géré dans CSS. Il ne faut jamais oublier qu’on utilise HTML pour la structure et CSS pour le style 19 Organisation du texte Les paragraphes  Le langage HTML propose la balise pour délimiter les paragraphes. ◦ signifie « Début du paragraphe » ; ◦ signifie « Fin du paragraphe ».  Le navigateur effectue automatiquement un saut de ligne et un espacement vertical à chaque nouveau paragraphe Remarque  Bien que le texte ’flottant’ (non inclus dans un élément de la page) soit affiché par les navigateurs, il vaut mieux pour des raisons de ’style’ inclure la totalité du texte utile de la page dans des balises, notamment. 20 Organisation du texte Les paragraphes  Exemple avec deux paragraphes 21 Organisation du texte Les paragraphes  Aller à la ligne dans un paragraphe ◦ C'est une balise orpheline qui sert juste à indiquer qu'on doit aller à la ligne :. Elle doit obligatoirement être mise à l'intérieur d'un paragraphe. 22 Organisation du texte Les paragraphes  D’autres balises de format du texte ◦... : pour mettre un texte en gras ◦... : pour souligner un texte ◦... : pour mettre un texte en italic ◦ : pour afficher une ligne horizontale 23 Organisation du texte Les paragraphes  La mise en valeur ◦... : pour mettre un texte bien en valeur ◦... : pour mettre un texte un peu en valeur ◦... : pour marquer un texte 24 Organisation du texte Les paragraphes  Remarque : utiliser la balise a pour conséquence de mettre le texte en italique. Et la balise a pour conséquence de mettre le texte en gras. En fait, c'est le navigateur qui choisit comment afficher les mots. On lui dit que les mots sont assez ou très importants et, pour faire ressortir cette information, il change l'apparence du texte en utilisant l'italique ou le gras. On pourra décider plus tard, en CSS, d'afficher les mots « importants » d'une autre façon que le gras ou l’italique si on le souhaite.  N'oubliez pas : HTML pour le fond, CSS pour la forme 25 Organisation du texte Les paragraphes  Autres balises de formatage ◦ : abréviation ◦ : adresse formatée (en italique) ◦ : citation (en italique) ◦ : élément de code informatique ◦ : texte pré-formaté, représente du texte préformaté, généralement écrit avec une police à chasse fixe (dans laquelle tous les caractères ont la même largeur). Le texte est affiché tel quel, les espaces utilisés dans le document HTML seront retranscrits 26 Organisation du texte Les paragraphes  Autres balises de formatage ◦ : texte supprimé dans un document (barré) : texte inséré dans un document (souligé) : texte en indice : texte en exposant 27 Organisation du texte Les titres  En HTML on a le droit d'utiliser six niveaux de titres différents. On a donc six balises de titres différentes : ◦ : signifie « titre très important ». En général, on s'en sert pour afficher le titre de la page au début de celle-ci ; ◦ : signifie « titre important » ; ◦ : pareil, c'est un titre un peu moins important (un « sous-titre ) ◦ : titre encore moins important ; ◦ : titre pas important ; ◦ : titre vraiment, mais alors là vraiment pas important du tout. 28 Organisation du texte Les titres  En HTML on a le droit d'utiliser six niveaux de titres différents. On a donc six balises de titres différentes : ◦ : signifie « titre très important ». En général, on s'en sert pour afficher le titre de la page au début de celle-ci ; ◦ : signifie « titre important » ; ◦ : pareil, c'est un titre un peu moins important (un « sous-titre ) ◦ : titre encore moins important ; ◦ : titre pas important ; ◦ : titre vraiment, mais alors là vraiment pas important du tout.  Remarque :Ne choisissez pas votre balise de titre en fonction de la taille qu'elle applique au texte ! Il faut impérativement bien structurer sa page en commençant par un titre de niveau 1 ( ), puis un titre de niveau 2 ( ), etc. Il ne devrait pas y avoir de sous-titre sans titre principal ! on peut modifier la taille du texte, sa police ou sa couleur, avec CSS un peu plus tard. 29 Les listes Listes non ordonnées ... : une liste non-ordonnée (non-numérotée)  on va écrire chacun des éléments de la liste entre deux balises. Chacune de ces balises doit se trouver entre et 30 Les listes Listes ordonnées ... : une liste ordonnée (numérotée), les éléments de la liste utilisent la même balise utilisée dans la liste non ordonnée 31 Les listes Listes ordonnées  on veut remplacer les chiffres par des lettres en ajoutant l’attribut type 32 Les listes Listes ordonnées  Pour commencer d’un autre chiffre que 1 on utilise l’attribut start 33 Les listes Listes ordonnées  Il est possible d’imbriquer les listes 34 Les listes Liste de description  L'élément HTML représente une liste de descriptions sous la forme d'une liste de paires associant des termes (fournis par des éléments ) et leurs descriptions ou définitions (fournies par des éléments ). On utilisera par exemple cet élément pour implémenter un glossaire. 35 Images  La balise orpheline permet d’insérer une image (PNG,JPG,GIF, GIF animé..) Cette balise a deux attributs obligatoires :  src : il permet d'indiquer où se trouve l'image que l'on veut insérer.Vous pouvez soit mettre un chemin absolu (ex. http://www.wolswagen.com/voiture.png ), soit mettre le chemin en relatif. Ainsi, si votre image est dans un sous-dossier images , vous devrez taper : src="images/voiture.png"  alt : cela signifie « texte alternatif ». On doit toujours indiquer un texte alternatif à l'image, c'est-à-dire un court texte qui décrit ce que contient l'image. Ce texte sera affiché à la place de l'image si celle-ci ne peut pas être téléchargée , ou dans les navigateurs de personnes non-voyants. Cela aide aussi les robots des moteurs de recherche pour les recherches d'images. Pour une voiture, on mettrait par exemple alt="Une voiture"  On peut aussi fixer les dimensions de l’image avec les attributs height et width.  Pour ajouter une légende à une image, on ajoute les deux balises figure et figcaption  On peut aussi ajouter une infobulle à l’image qui apparait lorsqu’on passe la souris sur l’image. l'attribut permettant d'afficher une bulle d'aide est title. Cet attribut est facultatif 36 Images 37 Images Il existe un format adapté à chaque image voici quel format adopter en fonction de l'image que vous avez :  Une photo : utilisez un JPEG.  N'importe quel graphique avec peu de couleurs (moins de 256) : utilisez un PNG 8 bits, ou éventuellement un GIF.  N'importe quel graphique avec beaucoup de couleurs : utilisez un PNG 24 bits.  Une image animée : utilisez un GIF animé.  Les autres formats non cités ici, comme le format BITMAP ( *.bmp ) sont à bannir car bien souvent ils ne sont pas compressés, donc trop gros. Ils ne sont pas du tout adaptés au Web. 38 Les liens ... : insérer un lien (interne ou externe)  pour créer un lien vers un autre document local ou distant  ou pour pointer vers un signet (’name’ ou ’id’) dans un document 39 href est l’attribut de l’élément le plus important puisqu’il indique la destination du lien. Liens spéciaux Lien pour télécharger un fichier : Lien pour ouvrir une nouvelle fenêtre : Pour définir une base pour tous les liens de la page Ainsi, on peut simplifier la création de liens  En cliquant sur ce lien, on se redirige vers http://www.isg.rnu.tn/content/informatique-de-gestion  En cliquant sur ce lien, on se redirige vers  http://www.isg.rnu.tn/content/marketing-et-communication 40 Les tableaux  Nous allons commencer par construire des tableaux basiques, puis nous les complexifierons au fur et à mesure : fusion de cellules, division en multiples sections… Un tableau simple  La première balise à connaître est. C'est cette balise qui permet d'indiquer le début et la fin d'un tableau. Cette balise est de type bloc, il faut donc la placer en dehors d'un paragraphe.  Nous avons aussi besoin des balises :  : indique le début et la fin d'une ligne du tableau ;  : indique le début et la fin du contenu d'une cellule.  En HTML, un tableau se construit ligne par ligne. Dans chaque ligne ( ), on indique le contenu des différentes cellules ( ). 41 Les tableaux  Schématiquement, un tableau se construit comme à la figure suivante.  Exemple :  On a une balise de ligne ( ) qui englobe un groupe de cellules ( ) 42 Les tableaux Le tableau est encore sans entête ni bordure 43 Les tableaux La ligne d'en-tête, la légende et les bordures  La ligne d'en-tête se crée avec un comme on l'a fait jusqu'ici, mais les cellules qu'elle contient sont, cette fois, encadrées par des balises et non pas  On va aussi ajouter les bordures avec l’attribut border  On va ajouter une légendre au tableau grâce à la balise 44 Les tableaux Fusionner des cellules d’un tableau  Supposons que dans la dernière ligne on veut ajouter le total de la facture  On doit pouvoir ajouter une ligne et fusionner ses trois premières cellules pour afficher le mot « Total »  Pour effectuer une fusion, on rajoute un attribut à la balise. Il faut savoir qu'il existe deux types de fusion :  la fusion de colonnes : c'est ce que nous allons faire dans cet exemple. La fusion s'effectue horizontalement. On utilisera l'attribut colspan ;  la fusion de lignes : là, deux lignes seront groupées entre elles. La fusion s'effectuera verticalement. On utilisera l'attribut rowspan.  nous devons donner une valeur à l'attribut (que ce soit colspan ou rowspan ). Il faut indiquer le nombre de cellules à fusionner entre elles. Dans notre exemple, nous avons fusionné trois cellules : 45 Les tableaux Fusionner des cellules d’un tableau  46 Les tableaux Fusionner des cellules d’un tableau  Nous allons dans cet exemple fusionner des colonnes 47 Les tableaux Un tableau structuré Pour les gros tableaux, il est préférable de les diviser en trois parties afin de faciliter la mise en forme avec CSS:  L’en-tête (en haut) : il se définit avec les balises ;  le corps (au centre) : il se définit avec les balises ;  le pied du tableau (en bas) : il se définit avec les balises Pour l’instant l’affiche ne change pas mais avec l’utilisation de CSS chaque partie pourra avoir un format spécifique 48 Les tableaux Autres attributs de la balise  padding : espace entre le contenu de la cellule et les frontières (la bordure)  border-spacing : espace entre les cellules  width : pour définir la largeur  height : pour la hauteur  align : pour l’alignement du texte dans une cellule  valign : pour l’alignement vertical du texte dans une cellule Remarque  Les tables ont été largement utilisées dans le passé pour organiser les pages des sites web. Cet usage est aujourd’hui obsolète et absolument découragé.  On utilise pour cela les balises et les styles CSS qui seront vus plus loin. 49 Les formulaires  Une page HTML peut être enrichie par des formulaires interactifs, qui permettent aux utilisateurs de renseigner des informations : saisir du texte, sélectionner des options, valider avec un bouton… le traitement des résultats doit s'effectuer dans un autre langage, par exemple le JavaScript, Php  Création du formulaire  Il faut commencer par utiliser la balise. C'est la balise principale du formulaire, elle permet d'en indiquer le début et la fin.  50 Les formulaires Les attributs d’un formulaire  method : concerne l’envoi de données et peut prendre deux valeurs. ◦ get : non fréquemment utilisée car limitée à 255 caractères. En plus, les informations envoyées seront visibles dans la zone d’adresse. ◦ post : plus utilisée que get car elle permet d’envoyer un grand nombre d’informations et les données saisies dans le formulaire ne transitent pas par la barre d’adresse.  action : indique l’adresse de la page où du programme qui va traiter les informations (généralement avec un langage autre que HTML, javaScript ou php par exemple). C'est cette page qui sera appelée lorsque le visiteur cliquera sur le bouton d'envoi du formulaire. 51 Les formulaires Les zones de saisie basiques Il suffit de donner à l'attribut type de la balise  Une zone de saisie monoligne : on ne peut y écrire qu'une seule ligne. Elle sert à saisir des textes courts, par exemple un pseudo  On peut donner un nom au champ pour pouvoir ultérieurement traiter son contenu  On peut associer un libellé à une zone de saisie : dans l’attribut for on mentionne le id de la zone input qu’on veut libeller.  l'id est utilisé pour identifier l'élément HTML pour pouvoir y accéder et le manipuler. Il est donc unique pour cet élément. Le name , lui, réfère à la variable du formulaire que l’élément concerne. Ici, il n’y a qu’un seul élément qui pourra référer à la variable « nom zone texte » ; name et id auront donc la même valeur. Mais lorsque nous utiliserons des checkbox ou des radio , plusieurs éléments correspondront à la même variable. Par exemple, la variable couleur avec un élément pour rouge, un pour bleu et un pour vert. Ils auront donc le même name , mais pas le même id. 52 Les formulaires Les zones de saisie basiques  Une zone de saisie multiligne : cette zone de texte permet d'écrire une quantité importante de texte sur plusieurs lignes. Pour créer une zone de texte multiligne, on change de balise : nous allons utiliser   on peut ajouter les attributs rows et cols à la balise. Le premier indique le nombre de lignes de texte qui peuvent être affichées simultanément, et le second la largeur visible de la zone texte. 53 Les formulaires Les zones de saisie basiques  Avec HTML 5, les 3 écritures suivantes sont équivalentes  Voici un exemple contenant une zone de saisie texte et une zone multi- ligne 54 Les formulaires Les zones de saisie basiques  Quelques attributs supplémentaires  on peut agrandir le champ avec size ;  on peut limiter le nombre de caractères que l'on peut saisir avec maxlength ;  on peut préremplir le champ avec une valeur par défaut à l'aide de value ;  on peut donner une indication sur le contenu du champ avec placeholder. Cette indication disparaîtra dès que le visiteur aura cliqué à l'intérieur du champ.  Exemple 55 Les formulaires Les zones de saisie basiques  Zone de mot de passe c'est-à-dire une zone où on ne voit pas à l'écran les caractères saisis.  Pour créer ce type de zone de saisie, utilisez l'attribut type="password" 56 Les formulaires Les zones de saisie basiques  E-mail  Pour créer ce type de zone de saisie, utilisez l'attribut type=email"  le champ vous semblera a priori identique, mais votre navigateur sait désormais que l'utilisateur doit saisir une adresse e-mail. Il peut afficher une indication si l'adresse n'est pas un e-mail ; c'est ce que fait Firefox, par exemple  Certains navigateurs, comme les navigateurs mobiles sur iPhone et Android, affichent un clavier adapté à la saisie d'e-mail (figure suivante). 57 Les formulaires Les zones de saisie basiques  Une URL  Le navigateur comprend bel et bien que le visiteur est censé saisir une adresse. Les navigateurs mobiles affichent par exemple un clavier adapté à la saisie d'URL (figure suivante). Clavier de saisie d'URL sur iPhone 58 Les formulaires Les zones de saisie basiques  Numéro de téléphone Ce champ est dédié à la saisie de numéros de téléphone :  Sur iPhone, par exemple, un clavier adapté s'affiche lorsqu'on doit remplir le champ (figure suivante). Clavier de saisie de numéro de téléphone sur un iPhone 59 Les formulaires Les zones de saisie basiques  Nombre permet de saisir un nombre entier :  On peut personnaliser le fonctionnement du champ avec les attributs suivants :  min : valeur minimale autorisée ;  max : valeur maximale autorisée ;  step : c'est le « pas » de déplacement. Si vous indiquez un pas de 2, le champ n'acceptera que des valeurs de 2 en 2 (par exemple 0, 2, 4, 6…). 60 Les formulaires Les zones de saisie basiques  Un curseur Le type range permet de sélectionner un nombre avec un curseur (aussi appelé slider), On peut utiliser là aussi les attributs min , max et step pour restreindre les valeurs disponibles.  comme à la figure suivante  Une couleur : le type color 61 Les formulaires Les zones de saisie basiques  Une date : Différents types de champs de sélection de date existent : ◦ date : pour la date (05/08/2020 par exemple) ; ◦ time : pour l'heure (14:20 par exemple) ; ◦ week : pour la semaine ; ◦ month : pour le mois ; ◦ datetime-local pour la date et l'heure (sans gestion du décalage horaire). 62 Les formulaires Les zones de saisie basiques  Une zone de recherche : On peut créer un champ de recherche comme ceci :  Le navigateur décide ensuite comment afficher le champ de recherche. Ainsi, il peut ajouter une petite loupe au champ pour signifier que c'est un champ de recherche, et éventuellement suggérer les dernières recherches effectuées par le visiteur. 63 Les formulaires Les éléments d'options Ce sont des éléments qui demandent au visiteur de faire un choix parmi une liste de possibilités. Nous allons passer en revue :  les cases à cocher  les zones d'options  les listes déroulantes  Les data list 64 Les formulaires Les éléments d'options Les cases à cocher Pour créer une case à cocher, nous allons réutiliser la balise , en spécifiant cette fois le type checkbox : On peut donner un nom différent à chaque case à cocher, cela permettra d'identifier plus tard lesquelles ont été cochées par le visiteur. On peut faire en sorte qu'une case soit cochée par défaut, avec l'attribut checked : 65 Les formulaires Les éléments d'options  Les zones d'options (radio) Les zones d'options permettent de faire un choix (et un seul) parmi une liste de possibilités. Elles ressemblent un peu aux cases à cocher, elles doivent être organisées en groupes. Les options d'un même groupe possèdent le même nom ( name ), mais chaque option doit avoir une valeur ( value ) différente.  La balise à utiliser est toujours un , avec cette fois la valeur radio pour l'attribut type. 66 Les formulaires Les éléments d'options  Les zones d'options (radio) Vous noterez que cette fois on a choisi un id différent de name. En effet, les valeurs de name étant identiques, on n'aurait pas pu les différencier car un id doit être unique 67 Les formulaires Les éléments d'options  Les listes déroulantes : Les listes déroulantes sont un autre moyen élégant de faire un choix parmi plusieurs possibilités. Le fonctionnement est un peu différent. On va utiliser la balise qui indique le début et la fin de la liste déroulante. On ajoute l'attribut name à la balise pour donner un nom à la liste.  Puis, à l'intérieur du , nous allons placer plusieurs balises (une par choix possible). On ajoute à chacune d'elles un attribut value pour pouvoir identifier ce que le visiteur a choisi.  Voici un exemple d'utilisation : 68 Les formulaires Les éléments d'options  Les listes déroulantes :  Si vous voulez qu'une option soit sélectionnée par défaut, utilisez cette fois l'attribut selected :  Vous pouvez aussi grouper vos options avec la balise. Dans notre exemple, pourquoi ne pas séparer les instituts en fonction de leur université. 69 Les formulaires Les éléments d'options  Les data List : est un élément de formulaire permettant de lier une liste de choix à un élément input. Il est voué à fournir des fonctionnalités d'auto- complétion ou d'auto-suggestion  Exemple 70 Les formulaires Les éléments d'options  Les data List : est un élément de formulaire permettant de lier une liste de choix à un élément input. Il est voué à fournir des fonctionnalités d'auto- complétion ou d'auto-suggestion  Exemple Quand on tape la chaine « La » la fonction d’auto- complétion affiche les mots commençant par « La » 71 Les formulaires autres attributs  required : pour indiquer qu’un champ est obligatoire  autofocus : pour placer le curseur dans cet élément dès le chargement de la page  autocomplete : Une chaîne de caractères qui indique le type d'autocomplétion à utiliser. Cette autocomplétion peut notamment provenir des valeurs précédemment saisies dans le champ. D'autres méthodes plus complexes peuvent être utilisées : un navigateur pourra par exemple interagir avec la liste des contacts de l'appareil afin de proposer l'autocomplétion pour les adresses électroniques.  placeholder : pour afficher un message indicatif dans un champ  readonly : pour rendre le champ en lecture seule 72 Les formulaires Finaliser et envoyer le formulaire  Regrouper les champs: Lorsque le nombre de champs à saisir est grand et varié il est utile de les regrouper au sein de plusieurs balises. Chaque peut contenir une légende avec la balise Exemple 73 Les formulaires Finaliser et envoyer le formulaire  Regrouper les champs: Lorsque le nombre de champs à saisir est grand et varié il est utile de les regrouper au sein de plusieurs balises. Chaque peut contenir une légende avec la balise Exemple 74 Les formulaires Finaliser et envoyer le formulaire  Le bouton d'envoi : Le bouton est créé avec la balise. Elle existe en quatre versions : ◦ type="submit" : le principal bouton d'envoi de formulaire. C'est celui que vous utiliserez le plus souvent. Le visiteur sera conduit à la page indiquée dans l'attribut action du formulaire ; ◦ type="reset" : remise à zéro du formulaire ; ◦ type="image" : équivalent du bouton submit , présenté cette fois sous forme d'image. Rajoutez l'attribut src pour indiquer l'URL de l'image ; ◦ type="button" : bouton générique, qui n'aura (par défaut) aucun effet. En général, ce bouton est géré en JavaScript pour exécuter des actions sur la page.  On peut changer le texte affiché à l'intérieur des boutons avec l'attribut value. 75 Les fichiers audios  On utilise la balise pour insérer un controle audio dans la page : Pour écouter la musique il faut enrichir la balise par certains attributs :  controls : cet attribut est indisponsable pour ajouter les boutons « Lecture », « Pause » et la barre de défilement  width : pour modifier la largeur de l'outil de lecture audio ;  loop : la musique sera jouée en boucle ;  autoplay : la musique sera jouée dès le chargement de la page  preload : indique si la musique peut être préchargée dès le chargement de la page ou non. Cet attribut peut prendre les valeurs : ◦ auto (par défaut) : le navigateur décide s'il doit précharger toute la musique, uniquement les métadonnées ou rien du tout, ◦ metadata : charge uniquement les métadonnées (durée, etc.), ◦ none : pas de préchargement. Utile si vous ne voulez pas gaspiller de bande passante sur votre site. 76 Les fichiers audios  Avant de fermer la balise on peut ajouter un message pour proposer une solution de secours pour les navigateurs qui ne gèrent pas cette nouvelle balise.  Le navigateur ne gère pas le MP3, comment faire ? Il faut proposer plusieurs versions du fichier audio. 77 Insertion d'une vidéo  On utilise la balise pour insérer une vidéo dans la page :  attributs:  poster : image à afficher à la place de la vidéo tant que celle-ci n'est pas lancée.  controls : pour ajouter les boutons « Lecture », « Pause » et la barre de défilement.  width : pour modifier la largeur de la vidéo.  height : pour modifier la hauteur de la vidéo.  loop : la vidéo sera jouée en boucle.  autoplay : la vidéo sera jouée dès le chargement de la page.  preload : (voir audio) 78 Insertion d'une vidéo  Attention Les navigateurs ne supportent pas tous les formats vidéos existants  Pour éviter ce problème : définir plusieurs formats : 79 Insertion d'une vidéo  Une deuxième solution consiste à héberger la vidéo sur YouTube, copier le code d’intégration en cliquant droite sur la vidéo. 80 Integration d’objets (fichiers pdf, flash)  La balise object permettant d’intégrer plusieurs types de contenu dans un document HTML (compatible avec tous les navigateurs mais dépréciée depuis 2015) 81 Les frames Le tag était utilisé en HTML 4 pour définir les frames mais il n’est plus utilisé dans HTML5. Dans html5 on utilise pluôt On utilise la balise pour intégrer un autre document ou page web dans le document HTML courant 82 Structuration d’une page web Les balises structurantes de HTML5  Généralement une page web est constituée d'un en-tête (tout en haut), de menus de navigation (en haut ou sur les côtés), de différentes sections au centre… et d'un pied de page (tout en bas).  Dans HTML5 on a introduit de nouvelles balises HTML dédiées à la structuration du site.  Il ne s’agit pas ici de faire la mise en page il s’agit plutôt de préparer notre document HTML pour être mis en page avec CSS. 83 Structuration d’une page web Les balises structurantes de HTML5  : l'en-tête  La plupart des sites web possèdent en général un en-tête, appelé header en anglais. On y place généralement un logo, une bannière, le slogan de votre site…  Vous devrez placer ces informations à l'intérieur de la balise : 84 Structuration d’une page web Les balises structurantes de HTML5  : l'en-tête 85 Structuration d’une page web Les balises structurantes de HTML5  : le pied de page  Le pied de page se trouve en général tout en bas du document. On y trouve des informations comme des liens de contact, le nom de l'auteur, les droits d’auteur etc 86 Structuration d’une page web Les balises structurantes de HTML5  : principaux liens de navigation  La balise doit regrouper tous les principaux liens de navigation du site. On y placerez par exemple le menu principal de votre site.  Généralement, le menu est réalisé sous forme de liste à puces à l'intérieur de la balise : 87 Structuration d’une page web Les balises structurantes de HTML5  : principaux liens de navigation 88 Structuration d’une page web Les balises structurantes de HTML5  : une section de page  La balise sert à regrouper des contenus en fonction de leur thématique. Elle englobe généralement une portion du contenu au centre de la page. 89 Structuration d’une page web Les balises structurantes de HTML5  : informations complémentaires  La balise est conçue pour contenir des informations complémentaires au document que l'on visualise. Ces informations sont généralement placées sur le côté. 90 Structuration d’une page web Les balises structurantes de HTML5  : un article indépendant  Il est le plus souvent utilisé pour contenir des informations qui peuvent être distribuées indépendamment du reste du site ou de l'application dans laquelle elles apparaissent 91 Structuration d’une page web Les balises structurantes de HTML5  Résumé  Voici un schéma qui résume la structuration des pages web 92