HTML - HyperText Markup Language - Développement Web 1 - IAIL S3 PDF

Développement Web 1 IAIL S3 HTML - HyperText Markup Language 1. Structure de Base d'un Document HTML HTML, ou HyperText Markup Language, est le langage standard uti...

Développement Web 1 IAIL S3 HTML - HyperText Markup Language 1. Structure de Base d'un Document HTML HTML, ou HyperText Markup Language, est le langage standard utilisé pour la création et la structuration des pages web. Il définit la structure des documents en utilisant des éléments et des balises, permettant aux navigateurs web de présenter le contenu de manière cohérente. Les Éléments de Base Un document HTML est structuré autour de plusieurs éléments essentiels. Voici les principaux composants d'un document HTML typique : métadonnées, les liens vers les feuilles de : C'est l'élément racine qui style, et le titre de la page. encapsule tout le contenu de la page web. Tous les autres éléments HTML sont inclus dans cet élément. : Cet élément contient le contenu visible de la page web, comme les titres, les paragraphes, les images, et les liens. Il est : Situé à l'intérieur de l'élément également inclus dans l'élément. , l'élément contient des informations sur le document, telles que les Méta-Informations Les méta-informations fournissent des détails supplémentaires sur le document et sont placées à l'intérieur de l'élément. Voici les balises couramment utilisées : : La balise définit le titre de la page web, qui : La balise fournit des informations sur le apparaît dans l'onglet du navigateur et est utilisé par document, telles que la description, les mots-clés, et les moteurs de recherche pour indexer la page. les paramètres de codage des caractères. Ces informations ne sont pas affichées directement sur la Mon Page Web page web mais sont utilisées par les navigateurs et les moteurs de recherche. : La balise est utilisée pour relier des ressources externes, telles que des feuilles de style généralement dans l'élément. 23 2024-2025 FPO Squelettes HTML Voici un exemple de squelette HTML minimal qui constitue la base pour une page web simple : Mon Page Web Bienvenue sur ma page web Ceci est un paragraphe de texte. Visitez Example.com : Indique au navigateur que le document est un document HTML5. : L'attribut lang spécifie la langue du document. : Définit le jeu de caractères du document. : Assure que la page est bien affichée sur les appareils mobiles. : Définit un titre principal. : Définit un paragraphe.  Développement Web 1 IAIL S3 2. Éléments et Balises : Titres, Paragraphes, Listes, Liens Titres et Paragraphes Sous-section Titres ( à ) : Les balises de titre sont utilisées pour définir des titres et sous- Détail titres dans un document HTML. représente le titre le plus important, tandis Dernier Niveau que représente le titre le moins Paragraphes () : La balise est important. Les titres aident à structurer le contenu et sont importants pour le utilisée pour définir des paragraphes de référencement (SEO). texte. Les paragraphes sont automatiquement espacés les uns des autres Titre Principal pour une meilleure lisibilité. Sous-titre Voici un autre paragraphe pour montrer comment plusieurs paragraphes Section sont affichés. Listes Listes Ordonnées () : Les listes ordonnées Listes Imbriquées : Les listes peuvent être sont utilisées pour afficher des éléments dans un imbriquées pour créer des sous-listes. ordre spécifique, généralement numéroté. Élément 1 Premier élément Élément 2 Deuxième élément Sous-élément 2.1 Sous-élément 2.2 Listes Non Ordonnées () : Les listes non ordonnées sont utilisées pour afficher des éléments sans ordre spécifique, souvent avec des puces. Élément 3 Premier élément Deuxième élément 25 2024-2025 FPO  Développement Web 1 IAIL S3 Liens Hypertexte Balise : La balise est utilisée pour créer des liens hypertexte, permettant aux utilisateurs de naviguer vers d'autres pages web, sections d'une même page, ou adresses email. Le lien est défini par l'attribut href qui spécifie l'URL de la destination. Attribut href : Spécifie l'URL vers laquelle le lien doit diriger. Il peut s'agir d'une URL absolue (ex. https://www.example.com) ou relative (ex. page.html). Attribut target : Détermine où le lien doit ouvrir la page destination. Les valeurs courantes sont : ○ _self : Ouvre le lien dans le même onglet ou fenêtre (valeur par défaut). ○ _blank : Ouvre le lien dans un nouvel onglet ou fenêtre. ○ _parent : Ouvre le lien dans le cadre parent (si le document est dans un cadre). ○ _top : Ouvre le lien dans la fenêtre entière, en supprimant tous les cadres. Exemple : Ouvrir Example.com dans un nouvel onglet 3. Attributs et Valeurs HTML Attributs Communs Contenu Attribut id : L'attribut id est utilisé pour principal assigner un identifiant unique à un élément HTML. Cet identifiant peut être Texte utilisé pour cibler l'élément avec des secondaire. styles CSS ou pour manipuler l'élément avec JavaScript. Attribut style : L'attribut style est utilisé En-tête pour appliquer des styles CSS en ligne directement à un élément. Bien que cela Premier soit possible, il est généralement paragraphe. recommandé d'utiliser des feuilles de style externes ou internes pour séparer le Attribut class : L'attribut class est utilisé contenu du style. pour attribuer une ou plusieurs classes Texte avec style en permettent de regrouper des éléments ligne. pour appliquer des styles communs. 26 2024-2025 FPO  Développement Web 1 IAIL S3 4. Travailler avec des Images et des Multimédias Éléments Images Balise : La balise est utilisée pour afficher des images sur une page web. Elle est une balise auto-clôturante, ce qui signifie qu'elle ne nécessite pas de balise de fermeture. ○ Attributs courants : src : Spécifie l'URL de l'image à afficher. C'est un attribut requis. Exemple : alt : Fournit un texte alternatif qui est affiché si l'image ne peut pas être chargée. Cet attribut est essentiel pour l'accessibilité. Exemple : width : Définit la largeur de l'image en pixels ou en pourcentage. Il peut également être spécifié en utilisant des unités CSS comme em ou rem. Exemple : height : Définit la hauteur de l'image en pixels ou en pourcentage. Comme pour la largeur, des unités CSS peuvent être utilisées. Exemple : Éléments Audio et Vidéo Balise : La balise permet d'intégrer des fichiers audio dans une page web. Elle supporte plusieurs formats audio comme MP3, WAV, et OGG. ○ Attributs courants : src : Spécifie l'URL du fichier audio. Exemple : controls : Ajoute des contrôles de lecture (lecture, pause, volume) au lecteur audio. Exemple : Votre navigateur ne supporte pas la balise audio. autoplay : Joue le fichier audio automatiquement lorsque la page est chargée. loop : Reprend la lecture automatiquement après la fin du fichier audio. 27 2024-2025 FPO Développement Web 1 IAIL S3 Balise : La balise permet d'intégrer des fichiers vidéo dans une page web. Elle supporte divers formats comme MP4, WebM, et Ogg. ○ Attributs courants : src : Spécifie l'URL du fichier vidéo. Exemple : controls : Ajoute des contrôles de lecture (lecture, pause, volume) au lecteur vidéo. Exemple : Votre navigateur ne supporte pas la balise vidéo. autoplay : Lance la lecture de la vidéo automatiquement lorsque la page est chargée. loop : Reprend la lecture automatiquement après la fin de la vidéo. muted : Démarre la vidéo sans son. Autres Médias Intégrés Balise : La balise permet d'intégrer des documents ou des contenus externes dans une page web. Elle est souvent utilisée pour intégrer des vidéos de YouTube, des cartes Google Maps, ou des applications tierces. ○ Attributs courants : src : Spécifie l'URL du document ou du contenu à afficher dans l'iframe. Exemple : width et height : Définissent les dimensions de l'iframe. frameborder : Spécifie la largeur de la bordure autour de l'iframe (0 pour aucune bordure). allowfullscreen : Permet à l'iframe de passer en mode plein écran. 28 2024-2025 FPO  Développement Web 1 IAIL S3 5. Tableau, Formulaires et Éléments de Saisie Éléments de base des tables : C'est l'élément racine pour toute table. Tous les éléments liés à la table sont placés à l'intérieur de cet élément. Il définit la structure générale et la disposition de la table. (Ligne de Table) : Représente une ligne dans la table. À l'intérieur d'un , vous placez les en-têtes de table () et les données de table (). Chaque peut avoir un nombre différent de cellules ou. (Cellule d'En-tête de Table) : Définit une cellule d'en-tête. Ces cellules sont généralement utilisées pour étiqueter les colonnes ou les lignes. Par défaut, elles sont en gras et centrées. (Cellule de Données de Table) : Définit une cellule standard qui contient des données. Ces cellules constituent la majorité du contenu de la table. : Cet élément est utilisé pour regrouper le contenu d'en-tête d'une table en une tête de table. Il contient un ou plusieurs éléments. : Utilisé pour regrouper le contenu principal d'une table. Il contient un ou plusieurs éléments. Cet élément est utile pour appliquer des styles ou des scripts uniquement au corps de la table. : Utilisé pour regrouper le contenu de pied de page. Il contient souvent des informations de synthèse ou des calculs basés sur les données de la table. Il peut contenir un ou plusieurs éléments. Attributs pour les tables et les éléments associés Les tables et leurs éléments associés possèdent divers attributs qui contrôlent leur apparence et leur comportement : border : Spécifie la largeur de la bordure de la table. En HTML moderne, il est préférable d'utiliser CSS pour le style des bordures. Par exemple :. cellpadding : Ajoute de l'espace à l'intérieur de chaque cellule, entre le contenu de la cellule et la bordure de la cellule. cellspacing : Ajoute de l'espace entre les cellules de la table. Comme cellpadding, il est préférable de le gérer avec CSS. colspan : Cet attribut est utilisé dans les éléments ou pour faire en sorte qu'une cellule s'étende sur plusieurs colonnes. Par exemple :. rowspan : Semblable à colspan, mais fait en sorte que la cellule s'étende sur plusieurs lignes. Par exemple :. align : Utilisé pour aligner le contenu de la table, mais ceci est déprécié au profit de CSS. Par exemple, align="center". valign : Spécifie l'alignement vertical, mais cela est également déprécié au profit de CSS. Par exemple, valign="top". 29 2024-2025 FPO Développement Web 1 IAIL S3 Fonctionnalités avancées des tables Fusionner les cellules : Utilisation de colspan et rowspan Ces attributs aident à fusionner plusieurs cellules en une seule cellule, ce qui peut aider à créer des dispositions de table complexes. Nom Informations de Contact Jean Dupont Email Téléphone Marie Durand Email Téléphone Email 2 Téléphone 2 colspan="2" dans la première ligne fait en sorte que l'en-tête "Informations de Contact" s'étende sur deux colonnes. rowspan="2" dans la deuxième ligne fait en sorte que la cellule "Marie Durand" s'étende sur deux lignes. Groupement des colonnes : Utilisation de et Les éléments et permettent d'appliquer des styles ou de définir des attributs à des colonnes entières plutôt qu'à des cellules individuelles. 30 Nom 2024-2025 FPO Développement Web 1 IAIL S3 Email Téléphone Jean Dupont [email protected] 555-1234 définit un groupe de colonnes au sein d'une table. définit les attributs pour une seule colonne. Dans cet exemple, la première colonne a un fond bleu clair et les deux autres colonnes ont un fond vert clair. Considérations d'accessibilité L'accessibilité est cruciale lors de la création de tables, en particulier pour les utilisateurs qui dépendent des lecteurs d'écran. Voici quelques bonnes pratiques : Utiliser : Cet élément fournit un titre ou un résumé de ce que la table représente. Il aide les utilisateurs à comprendre l'objectif de la table. Placez-le directement après l'élément. Notes des Étudiants Utiliser l'attribut scope : Cet attribut peut être utilisé dans les éléments pour spécifier si un en-tête s'applique à une ligne ou à une colonne, améliorant ainsi la navigation des lecteurs d'écran. Nom Matière Note Alice Mathématiques A 31 Associer les en-têtes avec les données : Pour les tables complexes, vous pouvez utiliser l'attribut headers sur les éléments pour les associer explicitement aux éléments. 2024-2025 FPO Développement Web 1 IAIL S3 Nom Matière Note Alice Mathématiques A Éléments de base des Formulaires Balise : La balise est utilisée pour créer un formulaire sur une page web. Elle encapsule tous les éléments de saisie et les boutons nécessaires pour la collecte des données utilisateur. ○ Attributs courants : action : Spécifie l'URL où les données du formulaire seront envoyées lors de la soumission. Exemple : method : Détermine la méthode HTTP utilisée pour envoyer les données (GET ou POST). Exemple : Éléments de formulaire courants : ○ Balise : Utilisée pour divers types de saisie utilisateur. Exemple : Attribut name (pour les éléments de formulaire) : L'attribut name attribue un nom à un élément de formulaire, ce qui est utilisé lors de la soumission des données pour identifier les champs du formulaire. Attribut value (pour les éléments de formulaire) : L'attribut value définit la valeur par défaut d'un élément de formulaire, comme un champ de texte ou un bouton radio. Il est également utilisé pour transmettre les valeurs des champs lorsqu'un formulaire est soumis. 32 2024-2025 FPO Développement Web 1 IAIL S3 Attribut placeholder (pour les champs de saisie) : L'attribut placeholder fournit un texte d'indication dans un champ de saisie lorsque celui-ci est vide. Ce texte est affiché en gris et disparaît lorsque l'utilisateur commence à taper. Types de Champs Champs de Texte : ○ type="text" : Permet la saisie de texte simple. Exemple : Champs de Mot de Passe : ○ type="password" : Masque le texte saisi pour des champs de mot de passe. Exemple : Champs d’Email : ○ type="email" : Permet la saisie d'adresses email et valide le format de l'email. Exemple : Cases à Cocher : ○ type="checkbox" : Permet de sélectionner plusieurs options. Exemple : Boutons Radio : ○ type="radio" : Permet de sélectionner une seule option parmi plusieurs. Exemple : Homme Champs de Sélection : ○ : Permet de choisir parmi une liste d'options. Exemple :... ○ Balise : Permet de créer une zone de texte multilignes pour des entrées plus longues. Exemple : ○ Balise : Crée une liste déroulante permettant à l'utilisateur de sélectionner une option parmi plusieurs. Exemple : France États-Unis Royaume-Uni ○ Balise : Utilisée pour créer des boutons dans un formulaire, tels que les boutons de soumission. 33 Exemple : Envoyer Réinitialiser 2024-2025 FPO Développement Web 1 IAIL S3 Validation des Formulaires Attributs HTML5 pour la Validation : ○ required : Rend un champ obligatoire. Le formulaire ne peut pas être soumis si ce champ est vide. Exemple : ○ pattern : Définit une expression régulière pour valider le format des données saisies. Exemple : ○ maxlength : Définit le nombre maximal de caractères autorisés dans un champ de texte. Exemple : ○ minlength : Définit le nombre minimal de caractères requis dans un champ de texte. Exemple : Exemple complet de formulaire avec validation : Nom d'utilisateur: Email: Mot de passe: Commentaires: Envoyer 34 2024-2025 FPO  Développement Web 1 IAIL S3 6. HTML Sémantique et Accessibilité Éléments Sémantiques Définition : HTML sémantique fait référence à l'utilisation d'éléments HTML qui apportent une signification spécifique au contenu qu'ils entourent, améliorant ainsi la structure et la lisibilité du code pour les développeurs et les outils d'analyse. Éléments Sémantiques : ○ : Utilisé pour définir l’en-tête d’une section ou d’un document. Il contient généralement les titres, sous-titres, et autres éléments d’introduction. Exemple : Mon Site Web Accueil À propos Contact ○ : Utilisé pour définir le pied de page d’une section ou d’un document. Il contient souvent des informations de contact, des crédits, ou des liens de navigation. Exemple : © 2024 Mon Site Web. Tous droits réservés. ○ : Utilisé pour représenter un contenu autonome qui pourrait être distribué indépendamment, comme un article de blog ou une actualité. Exemple : Article Titre Contenu de l'article... ○ : Utilisé pour définir une section du document avec un thème ou une fonction spécifique, comme une section d'un blog ou un chapitre d'un livre. Exemple : 35 Section Titre 2024-2025 FPO Développement Web 1 IAIL S3 Contenu de la section... ○ : Utilisé pour définir une zone de navigation, comme un menu de liens ou un ensemble de liens de navigation. Exemple : Accueil Services Contact L’utilisation de ces techniques permet de créer des sites web qui sont non seulement mieux structurés et plus faciles à maintenir, mais aussi plus inclusifs pour les utilisateurs ayant des besoins spécifiques. 36 2024-2025 FPO