HTML - XHTML › ~fpetit › aigeme › TPdebut › HTML-CSS › preao...

Click here to load reader

  • date post

    26-Jun-2020
  • Category

    Documents

  • view

    1
  • download

    0

Embed Size (px)

Transcript of HTML - XHTML › ~fpetit › aigeme › TPdebut › HTML-CSS › preao...

  • 1

    HTML - XHTML

    Florence Petit

    Université Paris-Est Marne-la-Vallée

    24 novembre 2009

  • 2

    Page HTML et navigateur

    � Une page de site web est souvent un fichier HTML (extension .htm ou .html).

    � Le fichier est écrit en code HTML ou XHTML (code source).

    � Le fichier comporte du texte et du marquage de texte. � Il peut être visualisé dans un navigateur. � Un navigateur est un logiciel qui :

    - reconnaît le marquage (X)HTML grâce à un analyseur syntaxique (ou Parser)

    - le transcrit en document structuré et l'affiche. � Un navigateur est un agent-utilisateur (user-agent).

  • 3

    (X)HTML : HTML et XHTML

    � Langages standards de documents pour le web • HTML : HyperText Markup Language

    Langage de marquage hypertexte • XHTML : eXtensible HyperText Markup Language

    Langage de marquage hypertexte extensible � Langages avec des commandes sous forme de balises � Balise (tag) : élément encadré de chevrons

    texte

  • 4

    HTML : origine

    � Créé en 1989, publié en 1991 par Tim Berners-Lee au CERN

    � Issu du métalangage SGML né en 1986 � Famille des langages de marquage (ou balisage) :

    HTML, XHTML, SGML, XML…

  • 5

    World Wide Web Consortium

    � En abrégé : W3C � http://www.w3.org � Ensemble d'organisations, instituts et entreprises

    intervenants dans le Web � Créé en octobre 1994 (directeur : Tim Berners-Lee) � Missions :

    • Conduit les développements du web, gère son évolution et garantit son interopérabilité

    • Définit les spécifications du web ("recommandations")

    • Assure la promotion des technologies du web : HTML, CSS, XML, RDF, PNG, SVG, SOAP…

  • 6

    Evolution du HTML vers le (X)HTML

    � 1991 : HTML � 1995 : HTML 2 � 1996 : CSS 1 � 1997 : HTML 3.2 (pas de v.3) � 1997 : HTML 4 (HTML + CSS) � 1998 : CSS 2 � 1999 : HTML 4.01

    � norme ISO/IEC 15445:2000 � 2000 : XHTML 1

    � Reformulation du HTML en XML � 2001 : XHTML 1.1

    � XHTML 1 strict) � 2009 : Vers (X)HTML5 et non XHTML2

    Evolution des

    navigateurs

    IE Safari FireFox Mozilla

    SeaMonkey ...

  • 7

    (X)HTML et CSS

    (X)HTML � Structure du contenu

    •titres, sous-titres •paragraphes •listes •tableaux •liens •...

    CSS � Mise en forme

    •couleurs •polices, taille •alignement de texte •position des éléments •...

  • 8

    (X)HTML : balise et élément

    • Exemples :

    Texte d'un paragraphe

    Titre d'un paragraphe d'en-tête

    • Balise • balise ouvrante : • balise fermante :

    • Elément : terme employé dans 2 sens : • nom de la balise

    ex : élément p • unité structurante du document

    balise ouvrante + contenu + balise fermante

  • 9

    Emboîtement sans Chevauchement

    texte sans grastexte en gras

    texte en grastexte sans gras

    N O N

    O U I

    O U I

    texte gras italique

    texte gras italique

    texte sans gras texte gras

    texte gras texte sans gras

    N O N

  • 10

    Elément et attributs

    � Attribut : paramètre précisant un élément �

    ... •

    � Exemples : •

    Texte du paragraphe

    Texte du paragraphe

    � Placé dans la balise d'ouverture, mais jamais dans la balise de fermeture

    � Ordre des attributs sans importance syntaxique.

  • 11

    Attributs génériques

    � S'appliquent à (presque) toutes les balises � id : identifiant unique d'un élément dans le document � class : pour associer une classe (une "catégorie") à

    l'élément � title : titre (affiché souvent sous forme de post-it) � Choix des valeurs d'id, class et name :

    • Lettre (min ou maj) au début puis lettres ou chiffres ou signes - _ : .

    • Ne pas débuter par un chiffre • Pas d'espace !

    � Exemple :

    ….

  • 12

    XHTML et élément vide

    � Elément avec contenu : contenu

    � Elément vide en HTML :

    ou

    � Elément vide en XHTML : Exemples :

    � Exemples : br, hr, img, input, meta…

    Simplification de l'écriture :

  • 13

    Différences XHTML-HTML

    � Eléments et attributs en minuscules au lieu de

    � Balise de fermeture obligatoire (élément non vide)

    … …

    � Elément vide
    au lieu de
    ou
    � Guillemets " ..." (ou simple quote '...')

    autour des valeurs d'attribut : attribut="valeur" au lieu de

    � Valeur d'attribut obligatoire checked="checked" au lieu de checked

    � id remplace l'attribut name : - dans a, applet, form, frame, iframe, img, map,… - mais name reste utilisé dans input, select…

  • 14

    Balises et attributs généraux

    Structure générale DTD Balises de commentaire Attributs génériques

  • 15

    Structure simplifiée d'un document HTML

    Taper le titre

    Taper ici le contenu du document…

  • 16

    DTD ou doctype

    � DTD ou "doctype" : Document Type Definition Déclaration de Type de Document : grammaire du langage (éléments, attributs)

    � Détail sur : http://www.alsacreations.com/article/lire/560-dtd-html- xhtml-comment-choisir.html

  • 17

    (X)HTML et DTD

    � DTD HTML 4.01 • Strict

    ni frame (cadre), ni d'éléments dépréciés. • Transitional ou loose

    éléments dépréciés en XHTML (font, s, u, dir, strike, applet, center….)

    • Frameset accepte frames et éléments dépréciés

    � DTD XHTML 1.0 • Strict

    ni frame (cadre), ni d'éléments dépréciés. • Transitional

    éléments dépréciés en XHTML (font, s, u, dir, strike, applet, center….)

    • Frameset accepte frames et éléments dépréciés

    � DTD XHTML 1.1 • correspond + ou - au XHTML1.0 Strict

  • 18

    Structure d'un document XHTML1.1

    …… ….

  • 19

    Structure d'un document XHTML1.0 strict

    …… ….

  • 20

    Structure d'un document HTML4 strict

    ……

    ….

  • 21

    Structure d'un document HTML4 transitionnel

    ……

    ….

  • 22

    A quoi sert la DTD ?

    � à pouvoir vérifier le code (X)HTML au validateur

    � Avec DTD, les navigateurs appliquent le rendu correspondant à la DTD (mode Standards ).

    � Sans DTD reconnu, les navigateurs (IE, Firefox, Opera…même de dernière génération) passent en mode Quirks (bizarreries) ou mode compatibilité, afin de pouvoir interpréter les "vieux" codes.

  • 23

    DTD et validation

    Un validateur permet de vérifier la syntaxe d’un document HTML (X)HTML http://validator.w3.org/

  • 24

    Commentaire de code

  • 25

    Balises situées dans l'en-tête

    ...

  • 26

    � Située dans la partie … � Située avant la partie … � Partie qui contient des méta-informations

    • titre de la fenêtre du document • jeu de caractères utilisé • mots-clés • description (résumé) du document • ….

  • 27

    Codage des caractères

    � Code ASCII • -> sur 7 bits, 128 caractères (dont 95 affichables) • -> Pas de caractères diacritiques..

    � Jeux de caractères (charsets) • -> ASCII étendu • -> sur 8 bits (256 caractères )

    Plusieurs jeux de caractères selon la langue et ses accents (ex du latin 1 : iso-8859-15) …

    • -> UTF8 (sur 1 ou 2 octets) - 0 devant le codage des caractères ASCII - 1 + 15 bits (32768 caractères) plus long à traiter, plus de volume

  • 28

    Entités et caractères spéciaux Caractère entité valeur décimale < < < > > > » » »

    (espace insécable)     & & & " " " Ê Ê Ê û û û è è è é é é ï ï ï ç ç ç ñ ñ ñ œ œ œ • · · © © © € € €

    Indépendance

    texte / plateforme

  • 29

    Déclaration du jeu de caractères

    � Doit correspondre à l'encodage du fichier (cf. éditeur de texte)

    � Caractères latins (Europe occidentale)

    � Caractères latin avec symbole €, œ...

    � Caractères Unicode

  • 30

    Les problèmes d’accents…

    � Document encodé en UTF-8 lu en ISO-8859-15 caractères accentués -> é

    � Document encodé en ISO-8859-15 lu en UTF-8 caractères accentués -> ?

  • 31

    Problème du saut de ligne dans les éditeurs

    � Caractères ASCII non imprimables, de contrôle CR (Carriage Return ou retour chariot) : code 0D (13) LF (Line Feed ou saut de ligne) : code 0A (10)

    � Passage à la ligne dans un fichier texte : UNIX : LF (\n caractère d'échappement New line) Windows : CR LF (\r\n) Mac OS (

  • 32