(X)HTML fpetit/aigeme/TPdebut/HTML-CSS/tp... (X)HTML UMLV / F. Petit 1 1 HTML - XHTML Florence Petit...

Click here to load reader

  • date post

    08-Jan-2020
  • Category

    Documents

  • view

    2
  • download

    0

Embed Size (px)

Transcript of (X)HTML fpetit/aigeme/TPdebut/HTML-CSS/tp... (X)HTML UMLV / F. Petit 1 1 HTML - XHTML Florence Petit...

  • (X)HTML

    UMLV / F. Petit 1

    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 ...

  • (X)HTML

    UMLV / F. Petit 2

    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 :

  • (X)HTML

    UMLV / F. Petit 3

    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

    …… ….

  • (X)HTML

    UMLV / F. Petit 4

    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

  • (X)HTML

    UMLV / F. Petit 5

    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 -> ?

  • (X)HTML

    UMLV / F. Petit 6

    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 (

  • (X)HTML

    UMLV / F. Petit 7

    37

    Feuilles de style CSS adaptées

    � Pour différents périphériques de sortie

    38

    Balises situées dans le corps

    ...

    39