Chapitre II: Élément et attributs HTML5 PDF

Introduction Structurer sa page Premier exemple d’une page HTML structurée Organiser son texte Créer des liens Images et Figures Autres éléments...

Introduction Structurer sa page Premier exemple d’une page HTML structurée Organiser son texte Créer des liens Images et Figures Autres éléments Bibliographie & Webographie Chapitre II: Elément et attributs HTML5 Professeure Manal ZETTAM Ecole Nationale des Sciences Appliquées de Safi Université Cadi Ayyad - Marrakech Année Universitaire : 2024-2025 Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 1 / 53  Introduction Structurer sa page Premier exemple d’une page HTML structurée Organiser son texte Créer des liens Images et Figures Autres éléments Bibliographie & Webographie Plan 1 Introduction 2 Structurer sa page : l’en-tête : le pied de page : principaux liens de navigation : une section de page : informations complémentaires : un article indépendant 3 Premier exemple d’une page HTML structurée Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 2 / 53  Introduction Structurer sa page Premier exemple d’une page HTML structurée Organiser son texte Créer des liens Images et Figures Autres éléments Bibliographie & Webographie Plan 4 Organiser son texte Les paragraphes Les titres La mise en valeur Les listes 5 Créer des liens Un lien vers un autre site Un lien vers une autre page de son site Un lien vers une ancre Cas pratiques d’utilisation des liens Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 3 / 53  Introduction Structurer sa page Premier exemple d’une page HTML structurée Organiser son texte Créer des liens Images et Figures Autres éléments Bibliographie & Webographie Plan 6 Images et Figures 7 Autres éléments 8 Bibliographie & Webographie Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 4 / 53  Introduction Structurer sa page Premier exemple d’une page HTML structurée Organiser son texte Créer des liens Images et Figures Autres éléments Bibliographie & Webographie Introduction Au cours de ce chapitre nous allons présenter quelques balises HTML5 pour la création d’une page web. Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 5 / 53  Introduction Structurer sa page : l’en-tête Premier exemple d’une page HTML structurée : le pied de page Organiser son texte : principaux liens de navigation Créer des liens : une section de page Images et Figures : informations complémentaires Autres éléments : un article indépendant Bibliographie & Webographie Structurer sa page Figure: Structure d’une page HTML Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 6 / 53  Introduction Structurer sa page : l’en-tête Premier exemple d’une page HTML structurée : le pied de page Organiser son texte : principaux liens de navigation Créer des liens : une section de page Images et Figures : informations complémentaires Autres éléments : un article indépendant Bibliographie & Webographie : l’en-tête L’en-tête peut contenir toute sorte d’élément(images, liens, textes... ). Le header contient un logo, une bannière,... Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 7 / 53  Introduction Structurer sa page : l’en-tête Premier exemple d’une page HTML structurée : le pied de page Organiser son texte : principaux liens de navigation Créer des liens : une section de page Images et Figures : informations complémentaires Autres éléments : un article indépendant Bibliographie & Webographie : l’en-tête Figure: Exemple d’en-tête d’une page HTML Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 8 / 53  Introduction Structurer sa page : l’en-tête Premier exemple d’une page HTML structurée : le pied de page Organiser son texte : principaux liens de navigation Créer des liens : une section de page Images et Figures : informations complémentaires Autres éléments : un article indépendant Bibliographie & Webographie : le pied de page Le pied de page se trouve tout en bas du document. Le plus souvent le footer contient des liens de contact, le nom de l’auteur, les men-tions légales, etc. Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 9 / 53  Introduction Structurer sa page : l’en-tête Premier exemple d’une page HTML structurée : le pied de page Organiser son texte : principaux liens de navigation Créer des liens : une section de page Images et Figures : informations complémentaires Autres éléments : un article indépendant Bibliographie & Webographie : le pied de page Figure: Exemple de pied d’une page HTML Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 10 / 53  Introduction Structurer sa page : l’en-tête Premier exemple d’une page HTML structurée : le pied de page Organiser son texte : principaux liens de navigation Créer des liens : une section de page Images et Figures : informations complémentaires Autres éléments : un article indépendant Bibliographie & Webographie Structurer sa page Figure: Structure d’une page HTML Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 11 / 53  Introduction Structurer sa page : l’en-tête Premier exemple d’une page HTML structurée : le pied de page Organiser son texte : principaux liens de navigation Créer des liens : une section de page Images et Figures : informations complémentaires Autres éléments : un article indépendant Bibliographie & Webographie : principaux liens de navigation Accueil Forum Contact La balise doit regrouper tous les principaux liens de navigation. Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 12 / 53  Introduction Structurer sa page : l’en-tête Premier exemple d’une page HTML structurée : le pied de page Organiser son texte : principaux liens de navigation Créer des liens : une section de page Images et Figures : informations complémentaires Autres éléments : un article indépendant Bibliographie & Webographie : principaux liens de navigation Figure: Exemple de liens de navigation d’une page HTML Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 13 / 53  Introduction Structurer sa page : l’en-tête Premier exemple d’une page HTML structurée : le pied de page Organiser son texte : principaux liens de navigation Créer des liens : une section de page Images et Figures : informations complémentaires Autres éléments : un article indépendant Bibliographie & Webographie Structurer sa page Figure: Structure d’une page HTML Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 14 / 53  Introduction Structurer sa page : l’en-tête Premier exemple d’une page HTML structurée : le pied de page Organiser son texte : principaux liens de navigation Créer des liens : une section de page Images et Figures : informations complémentaires Autres éléments : un article indépendant Bibliographie & Webographie : une section de page Ma section de page Bla bla bla bla La balise sert à regrouper des contenus en fonc- tion de leur thématique. Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 15 / 53  Introduction Structurer sa page : l’en-tête Premier exemple d’une page HTML structurée : le pied de page Organiser son texte : principaux liens de navigation Créer des liens : une section de page Images et Figures : informations complémentaires Autres éléments : un article indépendant Bibliographie & Webographie Structurer sa page Figure: Structure d’une page HTML Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 16 / 53  Introduction Structurer sa page : l’en-tête Premier exemple d’une page HTML structurée : le pied de page Organiser son texte : principaux liens de navigation Créer des liens : une section de page Images et Figures : informations complémentaires Autres éléments : un article indépendant Bibliographie & Webographie : informations complémentaires La balise est conçue pour contenir des informations complémentaires au document qu’on visualise. Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 17 / 53  Introduction Structurer sa page : l’en-tête Premier exemple d’une page HTML structurée : le pied de page Organiser son texte : principaux liens de navigation Créer des liens : une section de page Images et Figures : informations complémentaires Autres éléments : un article indépendant Bibliographie & Webographie Structurer sa page Figure: Structure d’une page HTML Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 18 / 53  Introduction Structurer sa page : l’en-tête Premier exemple d’une page HTML structurée : le pied de page Organiser son texte : principaux liens de navigation Créer des liens : une section de page Images et Figures : informations complémentaires Autres éléments : un article indépendant Bibliographie & Webographie : un article indépendant Mon article Bla bla bla bla La balise sert à englober des articles, du texte ou tout autre contenu. Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 19 / 53  Introduction Structurer sa page Premier exemple d’une page HTML structurée Organiser son texte Créer des liens Images et Figures Autres éléments Bibliographie & Webographie Premier exemple d’une page HTML structurée Olivia Gazalé - Le Site Web Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 20 / 53  Introduction Structurer sa page Premier exemple d’une page HTML structurée Organiser son texte Créer des liens Images et Figures Autres éléments Bibliographie & Webographie Premier exemple d’une page HTML structurée : L’entête Olivia Gazalé Biographie et ouvrages Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 21 / 53  Introduction Structurer sa page Premier exemple d’une page HTML structurée Organiser son texte Créer des liens Images et Figures Autres éléments Bibliographie & Webographie Premier exemple d’une page HTML structurée : principaux lien de navigation Accueil Ouvrages Documentaires Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 22 / 53  Introduction Structurer sa page Premier exemple d’une page HTML structurée Organiser son texte Créer des liens Images et Figures Autres éléments Bibliographie & Webographie Premier exemple d’une page HTML structurée , et À propos d'Olivia Gazalé Olivia Gazal... Je t'aime à la philo Qu'est-ce qu'un coup... Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 23 / 53  Introduction Structurer sa page Premier exemple d’une page HTML structurée Organiser son texte Créer des liens Images et Figures Autres éléments Bibliographie & Webographie Premier exemple d’une page HTML structurée : pied de la page Copyright - Tous droits réservés Me contacter Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 24 / 53  Introduction Structurer sa page Premier exemple d’une page HTML structurée Organiser son texte Créer des liens Images et Figures Autres éléments Bibliographie & Webographie Premier exemple d’une page HTML structurée Figure: Exemple d’une page HTML. Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 25 / 53  Introduction Structurer sa page Premier exemple d’une page HTML structurée Les paragraphes Organiser son texte Les titres Créer des liens La mise en valeur Images et Figures Les listes Autres éléments Bibliographie & Webographie Les paragraphes Le langage HTML introduit la balise pour délimiter un paragraphe. Ceci est un paragraphe. Pour sauter une ligne le langage HTML permet d’utiliser la balise à l’intérieur d’un paragraphe. Ceci est un paragraphe. deuxième ligne. Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 26 / 53  Introduction Structurer sa page Premier exemple d’une page HTML structurée Les paragraphes Organiser son texte Les titres Créer des liens La mise en valeur Images et Figures Les listes Autres éléments Bibliographie & Webographie Les titres En HTML, on a six niveaux de titres différents. Titre très important Titre important Titre un peu moins important Titre encore moins important Titre pas important Titre vraiment pas important du tout Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 27 / 53  Introduction Structurer sa page Premier exemple d’une page HTML structurée Les paragraphes Organiser son texte Les titres Créer des liens La mise en valeur Images et Figures Les listes Autres éléments Bibliographie & Webographie Les titres Figure: Les six niveaux de titres. Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 28 / 53  Introduction Structurer sa page Premier exemple d’une page HTML structurée Les paragraphes Organiser son texte Les titres Créer des liens La mise en valeur Images et Figures Les listes Autres éléments Bibliographie & Webographie La mise en valeur En HTML, on peut mettre un texte en valeur de trois manières différentes. Italique Important Surligné Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 29 / 53  Introduction Structurer sa page Premier exemple d’une page HTML structurée Les paragraphes Organiser son texte Les titres Créer des liens La mise en valeur Images et Figures Les listes Autres éléments Bibliographie & Webographie La mise en valeur Figure: Texte mis en valeur. Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 30 / 53  Introduction Structurer sa page Premier exemple d’une page HTML structurée Les paragraphes Organiser son texte Les titres Créer des liens La mise en valeur Images et Figures Les listes Autres éléments Bibliographie & Webographie Les listes Les listes aident à mieux structurer le texte et à ordonner les informations. HTML définit deux types de listes : Les listes non ordonnées. Les listes ordonnées. Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 31 / 53  Introduction Structurer sa page Premier exemple d’une page HTML structurée Les paragraphes Organiser son texte Les titres Créer des liens La mise en valeur Images et Figures Les listes Autres éléments Bibliographie & Webographie Les listes Exemple de liste non ordonnée: Soufi,mon amour La B^ atarde d'Istanbul Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 32 / 53  Introduction Structurer sa page Premier exemple d’une page HTML structurée Les paragraphes Organiser son texte Les titres Créer des liens La mise en valeur Images et Figures Les listes Autres éléments Bibliographie & Webographie Les listes Figure: Exemple de liste non ordonnée Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 33 / 53  Introduction Structurer sa page Premier exemple d’une page HTML structurée Les paragraphes Organiser son texte Les titres Créer des liens La mise en valeur Images et Figures Les listes Autres éléments Bibliographie & Webographie Les listes Exemple de liste ordonnée: La B^ atarde d'Istanbul(2007) Bonbon Palace(2008) Lait noir(2009) Soufi,mon amour(2010) Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 34 / 53  Introduction Structurer sa page Premier exemple d’une page HTML structurée Les paragraphes Organiser son texte Les titres Créer des liens La mise en valeur Images et Figures Les listes Autres éléments Bibliographie & Webographie Les listes Figure: Exemple de liste ordonnée. Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 35 / 53  Introduction Structurer sa page Premier exemple d’une page HTML structurée Un lien vers un autre site Organiser son texte Un lien vers une autre page de son site Créer des liens Un lien vers une ancre Images et Figures Cas pratiques d’utilisation des liens Autres éléments Bibliographie & Webographie Un lien vers un autre site Pour créer un lien en HTML 5, il suffit d’utiliser la balise avec l’attribut href. OpenClassrooms Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 36 / 53  Introduction Structurer sa page Premier exemple d’une page HTML structurée Un lien vers un autre site Organiser son texte Un lien vers une autre page de son site Créer des liens Un lien vers une ancre Images et Figures Cas pratiques d’utilisation des liens Autres éléments Bibliographie & Webographie Un lien vers une autre page de son site Deux pages situées dans un même dossier Créer deux fichiers page1.html et page2.html dans le même dossier. Puis ajouter la balise suivante pour créer un lien vers la page2.html: la page 2 Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 37 / 53  Introduction Structurer sa page Premier exemple d’une page HTML structurée Un lien vers un autre site Organiser son texte Un lien vers une autre page de son site Créer des liens Un lien vers une ancre Images et Figures Cas pratiques d’utilisation des liens Autres éléments Bibliographie & Webographie Un lien vers une autre page de son site Deux pages situées dans des dossiers différents Dans le cas où la page2.html se trouve dans un sous-dossier appelé contenu. Il suffit d’écrire deux points pour remonter d’un niveau: Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 38 / 53  Introduction Structurer sa page Premier exemple d’une page HTML structurée Un lien vers un autre site Organiser son texte Un lien vers une autre page de son site Créer des liens Un lien vers une ancre Images et Figures Cas pratiques d’utilisation des liens Autres éléments Bibliographie & Webographie Un lien vers une autre page de son site Figure: Les différents liens relatifs. Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 39 / 53  Introduction Structurer sa page Premier exemple d’une page HTML structurée Un lien vers un autre site Organiser son texte Un lien vers une autre page de son site Créer des liens Un lien vers une ancre Images et Figures Cas pratiques d’utilisation des liens Autres éléments Bibliographie & Webographie Un lien vers une ancre Ancre en HTML Une ancre est une sorte de point de repère placé dans une longue page HTML. L’ancre permet au visiteur de sauter directement à la partie qui l’intéresse dans la page HTML. Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 40 / 53  Introduction Structurer sa page Premier exemple d’une page HTML structurée Un lien vers un autre site Organiser son texte Un lien vers une autre page de son site Créer des liens Un lien vers une ancre Images et Figures Cas pratiques d’utilisation des liens Autres éléments Bibliographie & Webographie Un lien vers une ancre Pour créer une ancre, il suffit d’ajouter l’attribut id à une balise: Titre Ensuite, il suffit de créer un lien comme suit: Aller vers l'ancre Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 41 / 53  Introduction Structurer sa page Premier exemple d’une page HTML structurée Un lien vers un autre site Organiser son texte Un lien vers une autre page de son site Créer des liens Un lien vers une ancre Images et Figures Cas pratiques d’utilisation des liens Autres éléments Bibliographie & Webographie Un lien vers une ancre Exemple de lien vers une ancre située dans une autre page Les ouvrages d'Olivia Gazalé : Le Mythe de la virilité Je t'aime à la philo Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 42 / 53  Introduction Structurer sa page Premier exemple d’une page HTML structurée Un lien vers un autre site Organiser son texte Un lien vers une autre page de son site Créer des liens Un lien vers une ancre Images et Figures Cas pratiques d’utilisation des liens Autres éléments Bibliographie & Webographie Cas pratiques d’utilisation des liens Un lien qui affiche une infobulle au survol Site Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 43 / 53  Introduction Structurer sa page Premier exemple d’une page HTML structurée Un lien vers un autre site Organiser son texte Un lien vers une autre page de son site Créer des liens Un lien vers une ancre Images et Figures Cas pratiques d’utilisation des liens Autres éléments Bibliographie & Webographie Cas pratiques d’utilisation des liens Un lien qui ouvre une nouvelle fenêtre Site Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 44 / 53  Introduction Structurer sa page Premier exemple d’une page HTML structurée Un lien vers un autre site Organiser son texte Un lien vers une autre page de son site Créer des liens Un lien vers une ancre Images et Figures Cas pratiques d’utilisation des liens Autres éléments Bibliographie & Webographie Cas pratiques d’utilisation des liens Un lien pour envoyer un courriel Envoyez-moi un courriel ! Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 45 / 53  Introduction Structurer sa page Premier exemple d’une page HTML structurée Un lien vers un autre site Organiser son texte Un lien vers une autre page de son site Créer des liens Un lien vers une ancre Images et Figures Cas pratiques d’utilisation des liens Autres éléments Bibliographie & Webographie Cas pratiques d’utilisation des liens Un lien pour télécharger un fichier Télécharger le fichier Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 46 / 53  Introduction Structurer sa page Premier exemple d’une page HTML structurée Organiser son texte Créer des liens Images et Figures Autres éléments Bibliographie & Webographie Images et Figures Pour insérer une image en HTML il suffit d’utiliser la balise img comme suit: Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 47 / 53  Introduction Structurer sa page Premier exemple d’une page HTML structurée Organiser son texte Créer des liens Images et Figures Autres éléments Bibliographie & Webographie Images et Figures Pour insérer une figure on peut utiliser le code suivant: Le logiciel Bloc-Notes Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 48 / 53  Introduction Structurer sa page Premier exemple d’une page HTML structurée Organiser son texte Créer des liens Images et Figures Autres éléments Bibliographie & Webographie Autres éléments Je vous invite à consulter le site https: //developer.mozilla.org/fr/docs/Web/HTML/Element/. Par exemple vous pouvez voir l’élément iframe et comment l’utiliser https://developer.mozilla.org/fr/docs/Web/HTML/ Element/iframe. Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 49 / 53  Introduction Structurer sa page Premier exemple d’une page HTML structurée Organiser son texte Créer des liens Images et Figures Autres éléments Bibliographie & Webographie Autres éléments Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 50 / 53  Introduction Structurer sa page Premier exemple d’une page HTML structurée Organiser son texte Créer des liens Images et Figures Autres éléments Bibliographie & Webographie Autres éléments Eléments à voir 1 , 2 , 3 , 4 , 5 , 6 Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 51 / 53  Introduction Structurer sa page Premier exemple d’une page HTML structurée Organiser son texte Créer des liens Images et Figures Autres éléments Bibliographie & Webographie Bibliographie & Webographie Réalisez votre site web avec HTML 5 et CSS 3 Ed. 3 (Eyrolles), Nebra, Mathieu (2023). HTML 5 : Une référence pour le développeur web Ed. 3 (Eyrolles),Rimelé, Rodolphe (2017). XHTML et CSS : Cours et exercices (EYROLLES), Jean Engels (2006). Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 52 / 53  Introduction Structurer sa page Premier exemple d’une page HTML structurée Organiser son texte Créer des liens Images et Figures Autres éléments Bibliographie & Webographie Bibliographie & Webographie https://www.w3.org/TR/2009/WD-html5-20090825/ introduction.html https://fr.wikipedia.org/wiki/Extensible_ Hypertext_Markup_Language https://www.irif.fr/~carton/Enseignement/XML/ Cours/Annexes/presentation.html https://developer.mozilla.org/fr/docs/Learn/HTML Professeure Manal ZETTAM Chapitre II: Elément et attributs HTML5 53 / 53