Remerciez-le!

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

1 HyperText Markup Language Extensible HyperText Markup Language HTML - XHTML 2

1 HyperText Markup Language Extensible HyperText Markup Language HTML - XHTML 2 HTML : HyperText Markup Langage Inventé par Tim Berners-Lee au CERN pour faciliter l’échange de documents de recherche entre chercheurs de différentes universités.  Recommandations du W3C (World Wide Web Consortium) HTML 1.0 : 1991-1993 (texte, hyperliens) HTML 2.0 : novembre 1995 (images, formulaires) HTML 3.2 : janvier 1997 (tableaux et éléments de présentation) HTML 4.0 : décembre 1997 (feuilles de style et cadres) HTML 4.01 : décembre 1999 (amélioration de HTML 4.0) XHTML 1.0 : janvier 2000 - W3C Recommendation (reformulation de HTML à l’aide du balisage XML) XHTML 2.0 - W3C Working Draft 26 July 2006 3 HTML : HyperText Markup Langage HTML5 : Janvier 2008 - Web applications du WHATWG (Working Draft) HTML5 : October 2014 - W3C Recommendation https://www.w3.org/TR/2018/SPSD-html5-20180327/ HTML 5.1 : W3C Recommendation, 1 November 2016 https://www.w3.org/TR/2016/REC-html51-20161101/ HTML 5.2 - W3C Recommendation, 14 December 2017 https://www.w3.org/TR/2017/REC-html52-20171214/ HTML5 - A vocabulary and associated APIs for HTML and XHTML W3C Recommendation 28 October 2014 superseded 27 March 2018 HTML - Living Standard — Last Updated 24 November 2021 https://html.spec.whatwg.org/multipage/ 4 HTML : HyperText Markup Langage Fondé en particulier sur la notion de lien hypertexte,  Hyper # linéaire  naviguer librement et confortablement d'une page à une autre. Utilise un balisage descriptif et procédural  Mélange la structure logique (ex. <h1> et <p>) et les aspects d’affichage (ex. <i> et <b>) des documents. Portabilité  Basé sur format texte 5 HTML et SGML  HTML suit une norme spécifiée par une DTD (Document Type Definition) SGML qui détermine la structure et la syntaxe du document HTML.  SGML (Standard Generalised Markup Langage) : Métalangage : permet de définir des langages de balisage (comme HTML et XML). Décrit la structure des documents (et non pas leur forme) 6 HTML - DOCTYPE Au début du document HTML, on doit déclarer le type de document "DOCTYPE " Pour déterminer la version du langage utilisé (facultatif mais recommandé) : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 7 HTML - DOCTYPE <! Indique le début d'une instruction SGML DOCTYPE Nom de l'instruction HTML Nom du premier élément du document désigné PUBLIC Méthode de résolution du FPI qui suit "-//W3C//DTD HTML 4.01 Transitional//EN" FPI > Fin de l'instruction 8 HTML – DOCTYPE - FPI  La référence à une DTD particulière s'appelle "formal public identifier" ou FPI  C'est l'identificateur public qui fait la résolution vers la DTD désignée.  Voici la syntaxe du FPI deHTML tel que décrit dans la norme ISO 8879 – SGML  Le FPI doit être inséré au tout début du fichier HTML dans l'instruction SGML <!DOCTYPE> pour être valide. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> …</html> 9 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" <html> <head> <title>…</title> </head> <body> … </body> </html> Prologue Instance Entête Corps Structure d’un document HTML La partie d'un fichier HTML où on insère cette référence à une DTD se nomme "le prologue" Le reste du document se nomme "l’instance" 10 Structure d’un document HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <TITLE>Ceci est le titre de ma page Web</TITLE> <META name="author" content="…" > <META name="description" content="…" > <META name="keywords" content="…" > <META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <LINK REL=stylesheet TYPE="text/css" HREF="styles.css"> </HEAD> <BODY> <H1>Titre du document</H1> <H2>Sous-titre de niveau 2</H2> <P>Paragraphe <P>Paragraphe <H2>Sous-titre de niveau 2</H2> <P>Paragraphe </BODY> </HTML> 11 <HTML> <HEAD> <BODY> <TITLE> <META> <LINK> <H1> <H2> <H2> <P> <P> <P> Structure d’un document HTML 12 Structure d’un document HTML 13 L’élément HTML chapeaute tout le document, qui doit commencer par l’étiquette <HTML> et se terminer par l’étiquette </HTML> Le document comprend deux parties : l’entête : <HEAD> </HEAD> (information sur le fichier html) le corps : <BODY> </BODY> (contenu du fichier html) Structure d’un document HTML 14 En-tête du document : HEAD  Les informations incluses dans l’en-tête sont ignorées par les navigateurs lors de l’affichage de la page Web  L’en-tête peut inclure les éléments suivants :  Le Titre : <TITLE> </TITLE> obligatoire. Apparaît sur la barre de titre du navigateur comme titre de la page Web  Les metadonnées : <META> (pas d’étiquette finale). Optionnelles Servent à l’indexation (référencement) de la page Web 15 En-tête du document : HEAD  Exemple d’en-tête : <HEAD> <TITLE> Page d’accueil du cours…</TITLE> <META name="author" content="…" > <META name="description" content="…" > <META name="keywords" content="…" > <META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <LINK REL=stylesheet TYPE="text/css" HREF="styles.css"> </HEAD> 16 Balises META  Servent au référencement. Fournissent des meta- informations qui permettent aux moteurs de recherches de mieux indexer la page Web : <meta name='title' content='Titre de votre document'> <meta name='description' content='description'> <meta name='keywords' content='mots, clés, séparés, par, des, virgules'> <meta name='author' content='Votre_Nom'> <meta name='copyright' content='Copyright_depot'> <meta name='identifier-url' content='http://www.votre_site.net'> <meta name=robots' content='all'>  Permettent aussi de spécifier :  le jeux de caractères (l’encodage) adopté : <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  La langue du document : <meta http-equiv='content-language' content='fr'>  La Référence à une feuille de style au moyen de l’étiquette <LINK>: <LINK REL=stylesheet TYPE="text/css" HREF=" 17 Corps du document : BODY  L’élément <BODY></BODY>:  Englobe le contenu de la page Web (ce qui est affiché par le navigateur)  Introduit le corps d'un document HTML par son étiquette d’ouverture et le termine par son étiquette de fermeture  Permet de définir l'aspect général du document : couleur du texte, couleur des liens, fond du document…  Attributs de l’étiquette <BODY>  bgcolor ="couleur" : permet de définir une couleur d'arrière plan.  background ="…" : permet de spécifier l’URL de l’image de fond  text="couleur" : couleur du texte.  link="couleur" : couleur des liens avant activation.  alink="couleur" : couleur des liens lorsqu'ils sont actifs.  vlink="couleur" : couleur des liens visités. 18 Eléments Un élément est une suite d’entités HTML délimitée par des étiquettes (balises ou "tags" en anglais) et représente une unité structurelle du document : titre, liste, paragraphe, ... 1. une étiquette initiale : <NOM-ELEMENT> 2. un contenu (éventuellement vide) 3. une étiquette finale </NOM-ELEMENT> Exemple : <H1> contenu </H1> Le nom d’un élément est insensible à la casse Certaines étiquettes finales sont optionnelles, d’autres indispensables, d’autres proscrites (selon la DTD adoptée). 19 Attributs  Les attributs sont des propriétés ou options possibles pour un élément.  Prennent des valeurs par défaut ou définies explicitement  La valeur est définie par : NOM-ATTRIBUT=valeur  Les paires attributs/valeurs apparaissent avant le signe ”>” de l’étiquette de début d’un élément  Plusieurs paires attributs/valeurs (autorisées dans l’élément) peuvent apparaître (séparées par des espaces) – Exemples : <IMG src="rabat.gif" alt="une photo de Rabat"> <HTML lang="fr"> Information </HTML>  Il existe des attributs "booléen" <OPTION selected> 20 Attributs Les attributs suivants sont applicables à presque tous les éléments HTML : CLASS / ID : indique le nom ou le style à appliquer (exemple: class="monSyle"). LANG : indique le code de langage ISO à utiliser (exemple: lang="fr"). STYLE : définit le style (exemple: style="font- family: arial; font-size: 10px" TITLE : crée une info-bulle lorsque la souris survol le texte (exemple: title="aide"). 21 Commentaires On peut insérer des commentaires dans le code source d’un document HTML. Les commentaires n’apparaissent pas à la visualisation Aident à bien organiser et contrôler le code Exemple :  <!– Ceci est le même commentaire sur deux lignes --> 22 Caractères et références des caractères  Le jeu de caractères ASCII n’est pas suffisant pour représenter les milliers de caractères utilisés sur le Web.  HTML utilise le UCS (Jeu de caractères universel). Norme [ISO10646].  Les caractères qui ne figurent pas sur l’encodage utilisé peuvent être représentés par des références de caractères (exemple: les lettres accentuées du Latin dans le cas d’un jeu de caractère autre que ISO- 8859-1 (ISO-Latin-1)).  Le plus souvent, on utilise la forme suivante: &lettreaccent; – Exemple : Français (Français) élève (élève) – Caractères particuliers : Signe < Signe > signe " Signe & < > " & 23 24 HML - caractéristiques HTML 4.0 est une DTD de SGML (tous les éléments et attributs autorisés sont définis dans cette DTD). HTML est restrictif : Définit un ensemble d‘éléments et attributs fixe. L'ajout de nouveaux éléments est impossible. Permet de décrire un document simple 25 Les documents HTML sont rarement conformes aux règles établies par la DTD les attributs sont rarement entre guillemets les éléments ne sont pas toujours correctement imbriqués...  Même en cas d‘absence de la balise <html> ou <body>, le code enregistré dans un fichier texte avec l’extension .htm ou .html s’affiche sur le navigateur (Internet Explorer) ! HTML n'est pas assez flexible pour prendre en compte les divers supports d’affichage des pages Web qu’on a actuellement: ordinateurs de poche, téléphones mobiles, consoles de jeux vidéo, etc. HML - caractéristiques 26 À l'origine, HTML = outil d'échange de données indépendant des plate- formes et de l'affichage :  HTML devait décrire les différentes parties d'un document simple à l'aide des éléments : Hn, P, STRONG, CITE, ...  Les navigateurs devaient se charger uploads/s1/ html-xhtml 1 .pdf