S4-Chap4-TW Module: Technologie Web PDF

Département de Mathématiques et Informatique Module: Technologie Web Licence MIP Semestre 3 PR SARA OUAHABI MAIL:S3.OUAHABI@GMA...

Département de Mathématiques et Informatique Module: Technologie Web Licence MIP Semestre 3 PR SARA OUAHABI MAIL:[email protected] A N N É E U N I V E R S I TA I R E : 2 0 2 4 - 2 0 2 5 Partie1: Développement Web avec HTML5 PR S.OUAHABI 2  Objectifs : Manipuler les balises permettant d’ajouter Chapitre 4: différents contenus: Enrichissement d’une  Les tableaux page HTML  Documents multimédias: image, audio, video  Autre types de documents: PDF, une page html…  Figures: Diagramme, citation… Pr S.OUAHABI 3  Les tableaux Un tableau est un ensemble structuré de données (table de données) présentées en lignes et colonnes. Un tableau vous permet de retrouver rapidement et facilement des valeurs au croisement entre différents types de données. Insérer un tableau sur une page web est notamment utile pour classer des données par catégories, pour comparer des produits et des services ou encore pour résumer ou aérer un texte long. PR S.OUAHABI 4  Code HTML Pour faire un tableau HTML, il faut utiliser les balises suivantes : La balise < table > : elle indique au navigateur qu'il faut afficher un tableau. Tout ce qui se trouve entre les balises < table > < /table > est organisé en lignes et en colonnes. La balise < tr >, pour « table row » : elle désigne une ligne du tableau. Les éléments renseignés à l'intérieur des balises < tr > < /tr > s'affichent sur une ligne. La balise < td >, pour « table data » : elle permet de remplir le contenu d'une cellule. La balise < caption >, renseignée juste après la balise < table >, permet de donner un titre au tableau. Le titre apparaît centré au-dessus du tableau. La balise < th >, renseignée sur la première ligne du tableau, remplace la balise < td > pour indiquer au navigateur qu'il s'agit de la ligne en-tête. Alors que le contenu des cellules < td > est aligné à gauche par défaut, le contenu des cellules < th > est affiché en gras et centré. PR S.OUAHABI 5  Remarque Le tableau HTML se construit ligne par ligne. Après avoir inséré la balise < table >, il faut coder chaque ligne du tableau l'une après l'autre. Le nombre de colonnes est déterminé par le nombre de balises < td > de chaque ligne.  indique le début et la fin d'une ligne du tableau ;  indique le début et la fin du contenu d'une cellule. PR S.OUAHABI 6  Insertion d’un tableau Th Nom Prénom Ville Tr OUAHABI SARA Casablanca Td Tr Alaoui Sofia Rabat Tr Tadaloui Adil Tetaoun Tr PR S.OUAHABI 7  Insertion d’un tableau Code Résultat PR S.OUAHABI 8  Ajout d’un entête Code Résultat PR S.OUAHABI 9  Légender un tableau Code Résultat PR S.OUAHABI 10  Bordures Code Résultat PR S.OUAHABI 11  Espacement des cellules L’attribut "cellspacing" permet de définir l'espacement entre les cellules du tableau. l'attribut "cellpadding" permet de définir l'espacement entre le contenu de la cellule et ses bords. Exemple : PR S.OUAHABI 12 Exemple cellspacing cellpadding PR S.OUAHABI 13  Fusion des cellules L’attribut rowspan permet d'étendre une celulle sur plusieurs ligne L’attribut colspan permet d'étendre une cellule sur plusieurs colonnes Les attributs colspan="" et rowspan="" se placent uniquement sur la balise PR S.OUAHABI 14  Exemple Exemple : On souhaite que la première cellule du tableau prenne toute la largeur de la ligne. Elle doit donc déborder sur 3 cellules horizontales Colspan=3 signifie que la cellule prendra la place de 3 autres cellules sur 3 colonnes. PR S.OUAHABI 15  Structurer un tableau Pour l’instant, nous avons créé un tableau relativement simple, avec une seule zone, que nous n’avions même pas spécifié. Si l’on souhaite structurer un peu plus nos informations dans le tableau, il est possible d’utiliser trois balises afin de délimiter des zones précises : Thead: pour la tête du tableau Tbody: pour le corps du tableau Tfoot: pour le pied du tableau. PR S.OUAHABI 16 Exemple PR S.OUAHABI 17 Les balises multimédia (images, audio, vidéo) Le HTML5 a apporté son lot de nouveautés, notamment au niveau du contenu multimédia. En effet, avant, il était bien souvent nécessaire de faire appel à des conteneurs lourds comme Flash. Dorénavant, des balises dédiées à ces usages ont été introduites PR S.OUAHABI 18  Les balises multimédia : Image la Balise : est la manière standard et la plus simple d'insérer une image dans une page web. Elle permet d'afficher une seule image, généralement en spécifiant son URL via l'attribut src Code HTML: Attributs à ajouter dans la balise img L’attribut alt :Texte alternatif (Texte s'affichant en cas de problème avec l'image, nécessaire) L’attribut width définit la largeur de l'image (facultatif) L’attribut Height définit la Hauteur de l'image(facultatif) L'attribut title permet d'afficher une bulle d'aide, sauf il fallait évitez les accents, majuscules et espaces dans vos noms de fichiers et même de dossiers  L'attribut srcset (facultatif) : Permet de spécifier différentes résolutions d'image en fonction de la taille de l'écran ou du dispositif. PR S.OUAHABI 19  Les balises multimédia : Image La balise : permet d’avoir plus de contrôle sur les images affichées, en offrant la possibilité de spécifier plusieurs sources d'images et de sélectionner la plus appropriée en fonction de certains critères, comme : la résolution de l’écran la taille de l'affichage les conditions réseau. PR S.OUAHABI 20 Exemple : Indique les différentes sources d'images. Chaque balise peut avoir : srcset : Fournit l'image à utiliser si les conditions spécifiées par l'attribut media sont respectées. media : Permet de définir des conditions pour sélectionner l’image (par exemple, selon la largeur de l’écran). type : Spécifie le type MIME de l’image (par exemple, image/webp). : Doit toujours être inclus comme image de secours (fallback), au cas où aucune des conditions des ne serait remplie ou si le navigateur ne supporte pas la balise. PR S.OUAHABI 21  Les balises multimédia : La balise L'élément permet de lire un fichier audio dans la page HTML Controls : pour afficher les boutons play, stop, preview… Autoplay : pour démarrer la lecture automatique de l'audio lors du chargement de la page web. Le navigateur essaie de lire la première source. En cas d'erreur, il passe à la deuxième source. Si le navigateur ne prend pas en charge l'élément , il affiche le message en bas. Exemple : Votre navigateur ne supporte pas la balise "audio". PR S.OUAHABI 22  Les balises multimédia : La balise L'élément permet d'incorporer une vidéo dans une page Web. Controls : pour afficher les boutons play, stop, … Autoplay : pour démarrer la lecture automatique de la vidéo lors du chargement de la page web. Le navigateur essaie de lire la première source. En cas d'erreur, il passe à la deuxième source. Si le navigateur ne prend pas en charge l'élément , il affiche le message en bas. Exemple : Votre navigateur ne supporte pas la balise "video". PR S.OUAHABI 23  Les balises multimédia :La balise La balise représente un contexte de navigation imbriqué qui permet en fait d'obtenir une page HTML intégrée dans la page courante.. Utilisation principale : Intégrer une autre page web dans une page. Charger des widgets ou des contenus externes, comme des cartes Google Maps, des vidéos YouTube, des widgets de réseaux sociaux, etc. Comme il permet d’afficher une vidéo, pour ce faire, on peut utiliser l’identifiant de la vidéo pour y faire référence dans le code HTML. PR S.OUAHABI 24  Les balises multimédia :La balise Exemple : Exemple d'utilisation d'un pour intégrer une carte Google Maps : PR S.OUAHABI 25  Ajout d’autres documents: La balise L'élément est une solution polyvalente pour inclure des objets génériques. Cet élément permet aux auteurs HTML de spécifier tout ce qui est requis par un objet pour sa présentation par un agent utilisateur. Elle permet d’intégrer tout type de contenu: Des documents Des images Des vidéos Des animations Flash (obsolètes) Des fichiers PDF Des pages HTML PR S.OUAHABI 26  Exemple Exemple 1 : intégrer un document HTML dans un autre document HTML alt : test.html Ici, l'attribut « alt » apparaitra si le navigateur ne prend pas en charge la balise d'objet. Exemple 2 : intégrer un document PDF dans un document HTML alt : test.html PR S.OUAHABI 27  Ajout de figure: La balise Les figures sont des éléments qui permettent d’illustrer le texte et compléter les informations de la page. Les figures peuvent être de différents types : une image une illustration un diagramme un fragment de code Citation ou autre PR S.OUAHABI 28  Exemple Pour ajouter une légende, utilisez la balise à l'intérieur de la balise PR S.OUAHABI 29  Rôle sémantique de La balise a un rôle avant tout sémantique. Cela veut dire qu'elle indique à l'ordinateur que l'image a du sens et qu'elle est importante pour la bonne compréhension du texte. Cela peut permettre à un programme de récupérer toutes les figures du texte et de les référencer dans une table des figures, par exemple. Une figure peut très bien comporter plusieurs images PR S.OUAHABI 30 Exemple PR S.OUAHABI 31  Questions Cherchez les extensions les plus flexibles à télécharger pour : La vidéo Image audio PR S.OUAHABI 32