Remerciez-le!

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

Technologies du web * Langage HTML * K. ABAINIA Faculty of Sciences and Technol

Technologies du web * Langage HTML * K. ABAINIA Faculty of Sciences and Technology Telecommunications & electronics Department Last update: 16/01/2021 Definition 2 HTML ! C’est quoi ? HTML = Hyper Text Markup Language Langage de balisage hyper text K. Abainia N’est pas un langage de programmation (pas de variable) Technologies du web - Langage HTML Langage de présentation et création des pages web Langage standard compréhensible par tous les navigateurs Décrit la structure d’une page web Definition 3 Structure d’une page HTML K. Abainia Technologies du web - Langage HTML Page web = ensemble d’éléments structurés Header/Entête Body/Corps Méta-information + Scripts + Ressources extérieures Corps de la page Page HTML Blanc, espace, tabulation et retour à la ligne sont kifkif et leur nombre n’est pas important (1 seul compté) Definition 4 Elément K. Abainia Technologies du web - Langage HTML Informe le navigateur sur la mise en forme Différencie les différentes parties du document (entête, paragraphe, tableau, etc.) Est défini par des balises (ouvrante et fermante) <élément>....</élément> Peut contenir des attributs définissant son comportement et la manière dont il est interprété (élément) Peut être imbriqué dans un autre Definition 5 Attribut K. Abainia Technologies du web - Langage HTML Se met à l’intérieur de la balise ouvrante Nom en miniscule = valeur en miniscule entre deux cotes/guillemets <élément attribut=“valeur” attribut=“valeur”>....</élément> Definition 6 Page HTML (1) K. Abainia Technologies du web - Langage HTML <html> <head> ... </head> <body> ... </body> </html> Header/Entête Body/Corps Definition 7 Page HTML (2) K. Abainia Technologies du web - Langage HTML Chaque balise doit avoir une balise fermante Commentaire est dénoté par  qui ne sera pas interprété ni affiché par le navigateur Certaines balise n’ont pas de contenu et peuvent être renfermées implicitement Chaque document HTML doit contenir une déclaration DOCTYPE Definition 8 Déclaration DOCTYPE / DTD K. Abainia Technologies du web - Langage HTML Définit la version de HTML utilisée pour informer le navigateur sur comment l’interpréter <!DOCTYPE html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Balise se met au début de la page HTML 5 Definition 9 C’est quoi le DTD ? K. Abainia Technologies du web - Langage HTML N’est pas destiné aux navigateurs pour lire le contenu et comprendre les balises, mais pour le bon affichage DTD = Document Type Definition Sert à indiquer les régles d’écriture à obéir par un code HTML Indispensable aux validateurs (W3C) pour savoir le type de règles utilisé Code non validé peut causer des distorsions d’affichage différentes d’un navigateur à un autre Definition 10 Catégories de DTD K. Abainia Technologies du web - Langage HTML DTD Transitional HTML Strict Framese t XHTML HTML XHTML HTML XHTML Différence réside dans la présence/absence de quelques balises et attributs Definition 11 HTML 5 K. Abainia Technologies du web - Langage HTML <!DOCTYPE html> Definition 12 HTML 4.01 Transitional K. Abainia Technologies du web - Langage HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Ne peut pas être traité comme XML Pas de balises propriétaires (bgsound, layer, embed, etc.) Fermeture de quelques balises est optionnelle (liste limitée) Balise peut être écrite en majuscule ou minuscule Guillements des attributs peuvent être omis Attributs peuvent être minimisés (sans valeurs) Attribut target est autorisé Eléments iframe sont autorisés Eléments (basefont, font, center, u, strike et s) sont autorisés Attributs (alink, background, bgcolor, link, vlink, text) de l’élément body sont autorisés et quelques autres Definition 13 HTML 4.01 Strict K. Abainia Technologies du web - Langage HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Ne peut pas être traité comme XML Pas de balises propriétaires (bgsound, layer, embed, etc.) Fermeture de quelques balises est optionnelle (liste limitée) Balise peut être écrite en majuscule ou minuscule Guillements des attributs peuvent être omis Attributs peuvent être minimisés (sans valeurs) Attribut target n’est pas autorisé Eléments iframe sont autorisés Eléments (basefont, font, center, u, strike et s) ne sont pas autorisés et doivent être remplacés par des styles CSS Attributs (alink, background, bgcolor, link, vlink, text) de l’élément body ne sont pas autorisés et quelques autres Definition 14 HTML 4.01 Frameset K. Abainia Technologies du web - Langage HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> Comme HTML 4.01 Transitional, mais l’élément body n’existe pas et est remplacé par l’élément frameset qui contient des éléments frame Definition 15 XHTML 1.0 Transitional K. Abainia Technologies du web - Langage HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Document peut être traité comme XML ou HTML Pas de balises propriétaires (bgsound, layer, embed, etc.) Toutes les balises doivent être fermées Tous les éléments et leurs attributs doivent être en minuscule Guillements des attributs sont obligatoires Attributs ne peuvent pas être minimisés Attribut target est autorisé Eléments iframe sont autorisés Eléments (basefont, font, center, u, strike et s) sont autorisés Attributs (alink, background, bgcolor, link, vlink, text) de l’élément body sont autorisés et quelques autres Definition 16 XHTML 1.0 Strict K. Abainia Technologies du web - Langage HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Document peut être traité comme XML ou HTML Pas de balises propriétaires (bgsound, layer, embed, etc.) Toutes les balises doivent être fermées Tous les éléments et leurs attributs doivent être en minuscule Guillements des attributs sont obligatoires Attributs ne peuvent pas être minimisés Attribut target n’est pas autorisé Eléments iframe ne sont pas autorisés Eléments (basefont, font, center, u, strike et s) ne sont pas autorisés Attributs (alink, background, bgcolor, link, vlink, text) de l’élément body ne sont pas autorisés et quelques autres Definition 17 XHTML 1.0 Frameset K. Abainia Technologies du web - Langage HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> Comme XHTML 1.0 Transitional, mais la balise body n’existe pas et est remplacée par la balise frameset Definition 18 Langage XML (1) K. Abainia Technologies du web - Langage HTML Abréviation de Extensible Markup Language (langage à balise étendu) Semble beaucoup plus au HTML, mais il a la capacité de définir des nouvelles balise et attributs Il peut décrire n’importe quel domaine grâce à son extensibilité Il permet de structurer et organiser les informations Il sert comme un moyen d’échange d’information entre des applications hétérogènes Definition 19 Langage XML (2) K. Abainia Technologies du web - Langage HTML Il sert comme une base de données pour sauvegarder des informations Décrit les données et non les représenter Nécessite d’autres langage de représentation comme CSS, XSL et XSLT Informations structurées en arbre et document validé par un DTD On peut créer un nouveau DTD Document XML commence par la balise <?xml> Definition 20 Exemple Document XML K. Abainia Technologies du web - Langage HTML <?xml version="1.0" encoding="UTF-8"?> <classe> <etudiant> <nom>Jaja</nom> <prenom>Jiji</prenom> <matricule>198405</matricule> </etudiant> <etudiant> <nom>bibou</nom> <prenom>doudou</prenom> <matricule>768304</matricule> <adresse>guelma</adresse> </etudiant> </classe> Definition 21 Inconvénients de XML K. Abainia Technologies du web - Langage HTML Manipulation du document est gourmande Présence de caractères spéciaux cause des problèmes d’interprétation des balises Utilisation de <!CDATA[ bla bla bla]]> pour écrire des textes avec des caractères spéciaux Definition 22 Galaxie de XML K. Abainia Technologies du web - Langage HTML XML XSLT XPath XQuaery XML DTD XML Schema XPointer XML Namespace Definition 23 Structure d’un document HTML K. Abainia Technologies du web - Langage HTML Déclaration du DTD au début (selon la version) Déclaration de la balise html qui va contenir le tout Déclaration de la balise head qui contient des méta- informations Déclaration de la balise body qui contient le corps de la page Fichier porte l’extension .htm ou html Definition 24 Balises/éléments HTML K. Abainia Technologies du web - Langage HTML Invisible à l’utilisateur Indique la nature du contenu (texte, image, tableau, etc.) Indique la manière dont le contenu est rendu (affiché) Toujours en paire même si le contenu est vide, sauf quelques balises particulières ou orphelines ( , <hr/>, etc.) Definition 25 Balises de mise en forme (1) K. Abainia Technologies du web - Langage HTML Balise Description ... Mettre le texte en gras ... Mettre le texte en italique ... Subscript ou mettre le texte comme indice ... Superscript ou mettre le texte comme exposant ... Souligner un texte ... Séparer un long texte en plusieurs lignes si nécessaire ... Comme mais avec une sémantique (emphasized) <del> ... </del> Barrer le texte pour indiquer qu’il est supprimé <var> ... </var> Définir une variable dans une équation mathématique ... Surligner (highlight) le texte Definition 26 Balises de mise en forme (2) K. Abainia Technologies du web - Langage HTML <html> <head> </head> <body> Un exemple de gras Un exemple d’italique Un exemple de soulignement La spécification de <del>DTD</del> est absente dans HTML5 f(x)i = <var>x</var>i2 + 1 Un exemple de texte surligné </body> </html> Definition 27 Balises de mise en forme (3) K. Abainia Technologies du web - Langage HTML Balise Description <h1> Texte large <h2> ... <h3> ... <h4> ... <h5> ... <h6> uploads/Science et Technologie/ 2-html.pdf