Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

H.NOUI 2020-2021 H.NOUI 2020-2021 Université de BATNA 2 Département d’informati

H.NOUI 2020-2021 H.NOUI 2020-2021 Université de BATNA 2 Département d’informatique Technologies Web, M1, RSD 1 2. HTML 2.2 ÉLÉMENTS HTML H.NOUI 2020-2021 2 STRUCTURE HTML TABLE DE MATIÈRE 1. STRUCTURE D’UN ÉLÉMENT HTML 2. COMMENTAIRE HTML 3. EN-TÊTE (HEADING) 4. PARAGRAPHE 5. SAUT DE LIGNE 6. LISTE ORDONNÉE 7. LISTE NON ORDONNÉE 8. IMAGE 9. FIGURE 10. LIEN HYPERTEXTE 11. TABLEAU 12. FORMULAIRES 13. MÉDIAS INTÉGRÉS H.NOUI 2020-2021 ÉLÉMENT HTML STRUCTURE D’UN ÉLÉMENT HTML balise d'ouverture <p style="color:red">Content</p> contenu balise de fermeture Élément HTML attribut valeur • Format général d’un élément HTML H.NOUI 2020-2021 ÉLÉMENT HTML COMMENTAIRE HTML • Les commentaires HTML ne sont pas affichés dans le navigateur, mais ils peuvent aider à documenter votre code source HTML. • Format:  H.NOUI 2020-2021 ÉLÉMENT HTML TITRE (HEADING) • Les éléments TITRES (Heading) sont organisés en six niveaux: h1 à h6. • La taille du texte est la plus grande pour <h1> (appelée balise heading 1) et la plus petite pour <h6> (appelée balise heading 6). H.NOUI 2020-2021 ÉLÉMENT HTML PARAGRAPHE • L'élément paragraphe est utilisé pour regrouper des phrases et des sections de texte. • Le texte contenu dans les balises <p> et </p> s'affiche comme un "bloc". H.NOUI 2020-2021 ÉLÉMENT HTML SAUT DE LIGNE • L'élément de saut de ligne fait passer le navigateur à la ligne suivante avant d'afficher l'élément ou la partie de texte suivante sur une page web. • La balise de saut de ligne n'est pas codée comme une paire de balises d'ouverture et de fermeture. C'est un élément autonome et codé comme <br> Saut de ligne H.NOUI 2020-2021 ÉLÉMENT HTML LISTE ORDONNÉE • HTML peut être utilisé pour créer trois types de listes; listes de description, listes ordonnées et listes non ordonnées. • Les éléments de la liste ordonnée doivent être lus dans un ordre donné et seront donc numérotés H.NOUI 2020-2021 ÉLÉMENT HTML LISTE NON ORDONNÉE • Une liste non ordonnée affiche une puce ou un marqueur de liste avant chaque entrée • Cette puce peut être de plusieurs types: disque (par défaut), carré et cercle. H.NOUI 2020-2021 ÉLÉMENT HTML LISTE DE DESCRIPTION • Utile pour organiser les termes et leurs descriptions. Les termes se démarquent et leurs descriptions peuvent être aussi longues que nécessaire pour transmettre votre message. • Exemple d’utilisation: organiser les questions fréquemment posées (FAQ) et leurs réponses. H.NOUI 2020-2021 ÉLÉMENT HTML IMAGE • En vue d'insérer une image, la balise image est utilisée comme suit: <img src="HTML5.png"> • La balise d'image se ferme automatiquement et n'a pas besoin d'être fermée • Pour l'élément image, il ne suffit pas de fournir une balise d'image. Vous devez également spécifier la source de l'image en modifiant l’attribut src. • La source peut être une URL, l’image est donc à récupérer sur Internet ou localement dans le même répertoire que votre site Web. • L'attribut alt est utilisé pour le texte alternatif affiché au cas où le navigateur ne peut pas rendre l'image • Ex. <img src="HTML5.png" alt="logo HTML5" > H.NOUI 2020-2021 ÉLÉMENT HTML FIGURE • L'élément HTML <figure>, représente un contenu autonome, potentiellement avec une légende facultative, qui est spécifiée à l'aide de l'élément <figcaption>. • L'élément figure, sa légende et son contenu sont référencés comme une seule unité. H.NOUI 2020-2021 ÉLÉMENT HTML LIEN HYPERTEXTE • Lier le Web commence par l'élément « a », ou ancre, l'un des plus anciens éléments - peut-être le plus ancien - du HTML. • Pour être valide, un élément d'ancrage doit avoir une balise de début et une balise de fin. • La mise en œuvre la plus élémentaire d'un élément d'ancrage est : <a href = " URL"> Un espace réservé hyperlien </a> • L'attribut href («href» étant l'abréviation de «référence hypertexte») de l'élément d'ancrage définit l'URL de destination du lien hypertexte H.NOUI 2020-2021 ÉLÉMENT HTML TABLEAU • L'élément tableau fournit une structure basée sur le balisage pour les données tabulaires. • Les tableaux HTML, comme les feuilles de calcul, sont constitués de cellules organisées en colonnes et en lignes • L'attribut "border", entièrement facultatif, peut être mise à 1 afin d’appliquer une bordure à l’ensemble du tableau Nous utilisons une balise <table> pour commencer le tableau Voici la première ligne, que nous commençons par un <tr>. Notez que les titres des tableaux sont énumérés les uns après les autres. Bien qu'ils semblent constituer une colonne dans le HTML, nous définissons en fait la ligne entière des titres de table. Début de la seconde ligne Chaque élément <td> contient une cellule du tableau, et chaque cellule constitue une colonne distincte. Tous ces <td>s forment une rangée. Et voici la troisième ligne. H.NOUI 2020-2021 ÉLÉMENTS STRUCTURELS TABLEAUX POUR LA MISE EN PAGE • Avant que l'utilisation des CSS ne soit largement répandue, les développeurs web avaient peu d'autres options que les tableaux pour créer des conceptions visuelles complexes. • Cela a conduit à toutes sortes de mauvaises pratiques, à des pages web peu accessibles et à un code bouffi et difficile à maintenir. • En vue d’organiser le texte à droite de l’image, nous avons dû créer un tableau (sans bordures) avec 1 ligne, 3 colonnes • Une cellule pour l’image, une cellule de séparation, une troisième cellule pour le texte. H.NOUI 2020-2021 ÉLÉMENTS STRUCTURELS DIV • L'élément div est utilisé pour configurer une zone structurelle ou "division" sur une page web sous forme de bloc d'affichage avec des espace en haut et en bas. • Un élément div commence par une balise <div> et se termine par une balise </div>. • Utilisez un élément div lorsque vous devez formater une zone d'un site web qui peut contenir d'autres éléments d'affichage en bloc tels que des titres, paragraphes, des listes non ordonnées, et même d'autres éléments de div. • Nous verrons plus tard comment nous appliquons les feuilles de style (CSS) pour styliser et configurer la couleur, la police et la disposition des éléments HTML… H.NOUI 2020-2021 17 FORMULAIRES H.NOUI 2020-2021 FORMULAIRES PRÉSENTATION • Les formulaires sont utilisés à de nombreuses fins sur l'ensemble du Web. Ils sont utilisés par les moteurs de recherche pour accepter des mots clés et par les magasins en ligne pour traiter les paniers d'achat du commerce électronique. • Les sites web utilisent des formulaires pour aider à remplir diverses fonctions, notamment accepter les commentaires des visiteurs, encourager les visiteurs à envoyer un article à un ami , collecter des adresses électroniques pour un bulletin d'information, accepter des informations de commandes en ligne, des information de création de comptes, … • De nombreux éléments des formulaires sont encore fondamentaux et parfaitement valables et ne sont pas remplacés. Ils seront encore largement utilisés dans le développement de HTML5 et de formulaires • Même s'il existe plusieurs nouveaux éléments HTML5, la principale nouveauté est sans doute la validation de formulaire intégrée qu'offre HTML5, sans avoir à utiliser un script JavaScript sophistiqué pour vérifier le contenu des données saisies H.NOUI 2020-2021 FORMULAIRES TYPES DE SAISIE HTML 4 1. Élément form • L'élément form contient un formulaire sur une page web. • La balise <form> spécifie le début d'une zone de formulaire. La balise de fermeture </form> spécifie la fin d'une zone de formulaire. • Il peut y avoir plusieurs formulaires sur une page web, mais ils ne peuvent pas être imbriqués les uns dans les autres. H.NOUI 2020-2021 FORMULAIRES TYPES DE SAISIE HTML 4 Attributs form Attribut valeur Objet action (Obligatoire) URL ou nom de fichier/chemin du script à exécuter indique où envoyer les informations du formulaire lors de la soumission autocomplete (Attribut HTML5) On (valeur par défaut) le navigateur utilise la saisie automatique pour remplir les champs du formulaire Off le navigateur n'utilise pas la saisie automatique pour remplir le formulaire Id (Facultatif ) Alphanumérique, sans espace ; la valeur doit être unique sur la page web fournit un identifiant unique pour le formulaire method get (valeur par défaut) Avec get les données du formulaire sont ajoutées à l'URL et envoyées au serveur web post Cette méthode est plus privée et transmet les données du formulaire dans le corps de la réponse HTTP ; (préférée par le W3C) name (Facultatif ) Alphanumérique, sans espace, commence par une lettre nommez le formulaire de manière à ce qu'il soit facilement accessible par les langages de script H.NOUI 2020-2021 2. Élément fieldset • L'élément HTML <fieldset> est utilisé pour regrouper plusieurs contrôles ainsi que des étiquettes (<label>) dans un formulaire web. FORMULAIRES TYPES DE SAISIE HTML 4 3. Élément legend • L'élément HTML <legend> représente une légende pour le contenu de son parent <fieldset>. 4. Élément input type text • Les éléments <input> de type texte créent des champs de texte de base d'une seule ligne. H.NOUI 2020-2021 Attributs input Attribut valeur Objet type texte Configurer une zone de texte Id (Facultatif ) Alphanumérique, sans espace, commence par une lettre fournit un identifiant unique pour l’élément du formulaire name (Facultatif ) Alphanumérique, sans espace, commence par une lettre nommez le l’élément de manière à ce qu'il soit facilement accessible par les langages uploads/Ingenierie_Lourd/ 2-2-element-html.pdf