HTML et XHTML

1
HTML et XHTML

• Florence Mendes
• Année 2005-2006

2
Sommaire

• HTML Introduction
• XHTML Règles Générales
• Création d'une page XHTML
• Mise en forme du texte
• L'attribut style
• Mise en forme du texte (suite)
• Navigation
• Tableaux
• Insertion d'images ou graphiques
• Cadres et jeux de cadres
• Feuilles de style CSS
• Insertion de Formulaires
• Introduction Scripts

3
Langage HTML Introduction

• Conçu par Tim Berners-Lee
• Utilisé pour écrire des pages web
• Format de texte en clair
• n'importe quel éditeur de texte
• programmes puissants spécialisés dans l'édition
  de HTML
• peut être généré à l'aide de programmes (scripts
  CGI)
• Langage de balisage
• HyperText Markup Language
• sert à décrire les parties logiques d'un document

4
HTML ou XHTML ?
5
HTML ou XHTML ?

• Recommandation W3C 26 Janvier 2000
• XHTML est une famille de types de documents
  futurs et actuels et de modules qui reproduit,
  détermine des sous-ensembles, et étends HTML 4
  HTML.
• La famille XHTML des types de documents est basée
  sur XML, et est conçue finalement pour
  fonctionner en accord avec les agents
  utilisateurs supportant XML
• La famille XHTML est la prochaine étape de
  l'évolution d'internet.

6
XHTML Règles générales

• Les fichiers (X)HTML sont des fichiers texte
  composés d'ensembles (ou éléments) délimités par
  des balises (ou TAGS).
• Le balisage avec deux délimiteurs se présente
  sous la forme ltnombalisegt portion de texte
  lt/nombalisegt
• Exple ltemgtIl fait beau ce matinlt/emgt

• toutes les balises doivent être fermées
• les noms de balises sont en minuscule

7
XHTML Règles générales

• Des éléments peuvent être imbriqués les uns dans
  les autres
• structure hiérarchique

ltbgtltigtBonne imbricationlt/igtlt/bgt
ltTOTOgt texte1 ltTITIgt texte2 lt/TOTOgt  texte3
lt/TITIgt
8
XHTML Règles générales

• Dans certaines balises on peut adjoindre un
  attribut
• Syntaxe
• ltnombalise attribut"valeur"gt portion de texte
  lt/nombalisegt
• Exple ltp id"Introduction"gttextelt/pgt

• Toutes les valeurs des attributs doivent figurer
  entre guillemets.
• Les noms des attributs sont en minuscules
• Formes abrégées interdites

9
XHTML Règles générales

• insérer des commentaires dans des pages (X)HTML
• lt!--  commentaires --gt
• code ASCII standard pour linterprétation des
  caractères
• pas de caractère accentué
• caractères spéciaux sont repérés avec
  lapparition de et terminés par
• Aigu acute Grave graveCirconflexe
  circ Tréma uml

10
XHTML Règles générales
11
XHTML Règles générales

• Définir les couleurs en XHTML
• valeurs RGB de la couleur désirée sous forme
  hexadécimale
• Syntaxe XXXXXX
• indépendant du navigateur - 16,7 Millions de
  couleurs
• en donnant leur nom
• Plus simple
• seulement 16 noms de couleurs sont officiellement
  standardisés
• Il y a d'autres noms de couleurs, mais ceux-ci
  dépendent du navigateur.

12
XHTML Règles générales
16 couleurs VGA
13
XHTML Règles générales

• Règles pour les noms de fichiers
• noms tapés en minuscules (certains navigateurs
  interprètent minuscules et majuscules)
• Pas daccents
• Pas despaces
• Noms de  longueur raisonnable 
• notion de chapitres ? un dossier pour chacun des
  chapitres
• Un dossier pour toutes les images, un pour les
  logos, etc
• La plupart des navigateurs sont paramétrés pour
  considérer les fichiers nommés welcome.htm(l),
  accueil.html, index.html comme des pages
  daccueil.

14
Création dune page XHTML Strict

• Déclaration de la DTD (Définition du Type de
  Document)
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN" "http//www.w3.org/TR/xhtml1/DTD/xhtml
  1-strict.dtd"gt
• Toute page HTML est contenue entre deux balises
  lthtmlgt
• En XHTML, déclaration de lespace de noms XML
  (XMLNS) 
• lthtml xmlns"http//www.w3.org/1999/xhtml"gt

15
Création dune page XHTML Strict En-tête

• Encadré par les balises ltheadgt et lt/headgt
• Contient le titre encadré par lttitlegt et lt/titlegt
• Affiché dans la barre de titre du navigateur
• Utilisé par les moteurs de recherche
• Balises ltmetagt facultatives
• ltmeta name"author" content"lt!-- Insérer votre
  nom --gt" /gt
• ltmeta http-equiv"Content-Type"
  content"text/htmlcharsetISO-8859-1" /gt
• ltmeta http-equiv"Content-Language" content"fr"
  /gt
• ltmeta name"keywords" lang"fr" content"lt!--
  mots-clefs de votre page--gt"/gt

16
Squelette dune page XHTML Strict

• lt?xml version"1.0" encoding"UTF-8"?gt
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN" "http//www.w3.org/TR/xhtml1/DTD/xhtml
  1-strict.dtd"gt
• lthtml xmlns"http//www.w3.org/1999/xhtml"gt
• ltheadgt
• lttitlegtlt!-- insérer le titre --gtlt/titlegt
• lt/headgt
• ltbodygt
• lt!-- Ici c'est le corps de la page --gt
• lt/bodygt
• lt/htmlgt

17
Squelette dune page HTML

• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
  Transitional//EN"
• "http//www.w3.org/TR/html4/transitional.dtd"gt
• lthtmlgt
• ltheadgt
• lttitlegtTexte du titrelt/titlegt
• lt/headgt
• ltbodygt
• lt!-- Ici c'est le corps de la page --gt
• lt/bodygt
• lt/htmlgt

18
Le validateur du W3C

• Aller sur http//validator.w3.org/
• Indiquer l'URL de votre page web
• Ou le chemin du fichier sur votre disque dur
• Faire les corrections nécessaires
• Votre document est conforme, bravo !

19
Mise en forme du texte

• Elément ltbodygt contient le corps du document
• Il doit posséder une structure organisée
• Titres de différents niveaux
• Paragraphes

20
Balises de Titres
21
Paragraphes de texte

• La balise ltpgt marque le début dun paragraphe
• La fermeture de lélément paragraphe est
  optionnelle en HTML mais obligatoire en XHTML
• Pour créer un nouveau paragraphe
• Insérer des sauts de ligne ltbr /gt
• Encadrer le texte par les balises ltpgt et lt/pgt

22
Saut de ligne ltbr /gt

• Insére un saut de ligne à l'intérieur d'un
  paragraphe de texte
• En HTML , on peut écrire ltbrgt ou ltBRgt
• En XHTML, on écrit ltbr /gt

23
Attribut d'alignement align en HTML
Déconseillé
24
Un mot sur les feuilles de style CSS

• Améliorent la séparation entre structure et
  présentation
• Peuvent être mises en uvre de plusieurs manières
  
• dans un élément
• dans l'élément ltheadgt du document
• dans une feuille de style externe
• spécifications du W3C CSS2 ? CSS3
• ajout d'un élément ltmetagt précisant l'emploi de
  CSS
• ltmeta http-equiv"Content-Style-Type"
  content"text/css"/gt

25
Attribut style dans un élément

• Employé avec tous les éléments HTML sauf
  BASE,BASEFONT,HEAD,HTML,META,PARAM,SCRIPT,STYLE
  et TITLE
• Syntaxe
• style"propriété1 valeur propriété2 valeur
  "

26
Propriétés CSS pour texte et police

• color couleur de texte
• background-color couleur de fond
• font-style type de police, valeurs normal,
  italic et oblique
• font-weight graisse de la police, de 100 à 900,
  ou normal, bold, bolder, lighter
• font-size taille de la police, en points ou
  mots-clés xx-large,x-large, medium, small,
  x-small, xx-small, ou valeur relative larger ou
  smaller, ou en pourcentage
• font-family type de police, fonte spécifique ou
  famille générique
• exple font-family Arial, Helvetica,
  sans-serif
• font-variant normal ou small-caps (petites
  majuscules)

27
Propriétés CSS pour élément

• margin px
• margin-top, margin-right, margin-left,
  margin-bottom
• margin haut droit bas gauche
• border-width haut droit bas gauche
• valeurs thin, thick,medium ou en points
• border-style style de bordure
• valeurs none, dotted, dashed, solid, double,
  groove, ridge, inset, outset
• border-color idem color
• border border-width border-style color
• padding idem margin

28
Propriétés CSS pour élément

• float (left, right, none) élément dans
  rectangle flottant
• position (absolute, relative, static) position
  fixe ou en fonction de son voisin
• top (valeur ou pourcentage) distance de
  l'élément parent ou du haut du document
• left (longueur ou pourcentage) distance de la
  gauche du document ou de l'élément parent
• clip (shape (haut droit bas gauche)
  rognage-forme et nbre de pixels
• overflow (visible, hidden, auto, scroll) barre
  de défilement visible ou non

29
Attribut d'alignement align
30
Mise en forme

• lthr/gt Elément de type bloc insérant une ligne
  horizontale à l'écran. En HTML, on peut écrire
  ltHRgt, en XHTML, il faut écrire lthr /gt
• Pour structurer le document, éléments ltdivgt (type
  bloc) et ltspangt (type ligne) utilisables avec les
  attributs id et class. Essentiellement employés
  avec les feuilles de style.
• Elément ltpregt pour définir un bloc de texte comme
  préformaté. Utile pour respect des espaces
  vierges, police à espacement non proportionnel,
  retour à la ligne non automatique, L'élément de
  type ligne correspondant est ltttgt

31
Mise en forme

• Pour une citation ltblockquotegt (type bloc) et
  ltqgt (type ligne)
• Syntaxe
• ltblockquote lang"code_langue"cite"URI_source
  "gt
• ltq lang"code_langue"cite"URI_source"gt
• Source indiquée grâce à l'élément ltcitegt
• Elément ltaddressgt pour des informations de
  contact applicables au document (par exemple la
  personne à contacter en cas de problème technique
  écrit en bas de page et en petits caractères)

32
Mise en forme

• Mettre l'accent sur une portion de texte ltemgt
  et ltstronggt
• Signaler abréviations et acronymes ltabbrgt et
  ltacronymgt
• Exple ltABBR title"World Wide Web"gt WWW lt/ABBRgt
• ltACRONYM lang"fr" title"Régie Autonome des
  Transports Parisiens"gt RATP lt/ACRONYMgt
• Pour des exemples de code de programme CODE
  (type ligne), SAMP(exemple de sortie de
  programme), KBD (signale du texte devant être
  saisi au clavier), VAR (variable ou paramètre
  d'un programme, peu employé)

33
Mise en forme
Déconseillé
Déconseillé
34
Modifier les couleurs

• Attributs de l'élément BODY
• Style background-color définit la couleur
  d'arrière-plan
• Style color définit la couleur du texte
• link définit la couleur des liens (HTML)
• vlink définit la couleur des liens visités (HTML)
• alink définit la couleur des liens sélectionnés
  (HTML)

35
TraceRoute

• VisualRoute (shareware)
• http//visualroute.visualware.com/
• 3D TraceRoute
• ..
• Permettent de visualiser graphiquement l'effet de
  certaines commandes réseau telles que ping ou
  traceroute.

36
Feuille de style interne

• Insertion de l'élément ltstylegt dans l'en-tête du
  document permet de rassembler les règles de style
  de tout le document
• Déclaration pour
• toutes les instances d'un élément HTML
  particulier (ltpgt,lth1gt,etc.)
• toutes les instances d'une classe (même valeur de
  l'attribut class)
• instances uniques d'un élément (valeur spécifie
  de l'attribut id)

37
Style pour un type d'élément exemple

• ltstyle type"text/css"gt
• h1 border-width 1 border solid text-align
  center font-size 32pt color green
• h2font-size 20pt text-align center
• pfont-size 16pt text-align center
• ulfont-size 16pt text-align center
• lifont-size 14pt text-align left
  margin-left 40
• lt/stylegt

38
Style pour une classe d'éléments

• Dans ltstylegt
• nom_element.nom_classe propriété1 valeur
  propriété2 valeur
• Ajout de l'attribut class"nom_classe" dans les
  éléments concernés

39
Style pour une occurrence d'un élément

• Dans ltstylegt
• nom_id propriété1 valeur propriété2
  valeur
• Ajout de l'attribut id"nom_id" dans l'élément
  concerné

40
Attribut media

• Attribut de l'élément style permettant de
  spécifier le média de destination désiré pour les
  informations de style
• Valeur par défaut screen
• Valeurs possibles screen, Tty (telex), Tv,
  Projection, Handheld, Print, Braille, Aural, All
• On peut définir plusieurs éléments ltstylegt pour
  plusieurs médias de destination (screen et print
  par exemple)

41
Feuille de style externe

• Partager des feuilles de style entre plusieurs
  documents
• Modifier le style sans modifier le document
• Chargement d'un style en fonction des
  descriptions des médias
• Très puissant www.csszengarden.com
• Le fichier style.css contient les mêmes
  informations que l'élément ltstylegt d'une feuille
  de style interne
• L'élément ltstylegt est remplacé par
• ltlink rel"stylesheet" type"text/css"
  href"style.css"gt

42
Listes

• Listes ordonnées, listes numérotées
• Listes non ordonnées, listes à puces
• Listes de définitions
• Les listes peuvent êtres imbriquées, qu'elles
  soient de même type ou non

43
Liste ordonnée

• ltolgt
• ltligt Premier élément lt/ligt
• ltligt Deuxième élément lt/ligt
• lt/olgt

44
Liste ordonnée

• Style list-style-type pour définir le type de
  numérotation
• decimal chiffres arabes
• decimal-leading-zero chiffres avec zéro initial
• lower-alpha lettres minuscules
• upper-alpha lettres majuscules
• lower-roman chiffres romains minuscules
• upper-roman chiffres romains majuscules
• lower-greek .
• Utilisé sur l'élément ltligt, il ne modifie que cet
  élément
• Utilisé sur l'élément ltolgt, il agit sur toute la
  liste

45
Liste ordonnée

• Style list-style-type
• Utilisé sur l'élément ltligt, il ne modifie que cet
  élément
• Utilisé sur l'élément ltolgt, il agit sur toute la
  liste

46
Liste à puces

• ltulgt
• ltligt Premier élément lt/ligt
• ltligt Deuxième élément lt/ligt
• lt/ulgt

47
Liste à puces

• Style list-style-type pour définir le type de
  puce
• disc Rond plein (par défaut)
• square Carré plein
• circle Cercle vide

48
Liste de définitions

• ltdlgt
• ltdtgt Element terme de définition lt/dtgt
• ltddgt Elément description de définition lt/ddgt
• lt/dlgt

49
Liens hypertexte

• Element ltagt (Anchor ou Ancre)
• Crée un lien entre une partie dune page web et
  nimporte quelle autre ressource
• Sur la même page
• Sur une autre page du même site
• Sur un autre site
• Vers un fichier ou une image
• Syntaxe
• lta name"nom_lien" id"id_lien"
  href"emplacement_ressource(URI)"gt
• Contenu servant de lien
• lt/agt

50
Liens hypertexte URI

• Une URI (Uniform Resource Identifi er) est une
  chaîne de caractères utiliser pour identifier les
  ressources sur le web
• 3 parties nom du protocole, nom de la machine,
  chemin d'accès à la ressource
• Exples
• http//staracademy.tf1.fr/
• http//www.marmiton.org/recettes/recette.cfm?num_r
  ecette11459
• mailtoMarc.Mongenet_at_freesurf.fr
• ftp//ftp.rfc-editor.org/in-notes/rfc2396.txt
• http//www.novaplanet.com/radio-nova/player/radion
  ovalive.php?pwmp

51
Liens hypertexte URI relative

• Localisation d'un document selon sa relation avec
  le document actuellement visualisé
• Exemples
• lta href"cible.html"gt (dans le même dossier)
• lta href"../cible.html"gt (un niveau plus haut
  dans l'arborescence des fichiers)
• lta href"../dossier/cible.html"gt (dans un autre
  dossier)
• lta href"/cible.html"gt (racine du domaine)

52
Liens hypertexte Attributs name et id

• Optionnels
• Spécifient un nom ou un identifiant, pour que
  l'ancre puisse être ciblée par un autre lien
• id peut être employé avec tous les éléments
• Exple
• .
• ltpgt lta href"intro"gtIntroductionlt/agtltbr/gt
• lta href"chap1"gtChapitre 1 lt/agtltbr/gt
• .
• lth2 id"intro"gt Introduction lt/h2gt

53
Liens hypertexte mailto

• Lien déclenchant l'envoi d'un courrier
  électronique
• Syntaxe
• lta "mailtonom_proprietaire_at_nom_FAI.fr"gtTexte
  apparaissant à l'écran lt/agt

54
Tableaux

• Composés de cellules
• Contiennent titres de colonnes élément ltthgt
  (table header)
• Contiennent données élément lttdgt (table data)
• Permettent de présenter des données organisées en
  lignes et en colonnes
• Peuvent être imbriqués
• Outils de présentation ? pages web complexes

Déconseillé
55
Tableau simple

• lttablegt
• ltcaptiongtTitre du tableault/captiongt
• lttrgt
• ltthgt1ère colonnelt/thgt
• ltthgt2ème colonnelt/thgt
• ltthgt3ème colonnelt/thgt
• lt/trgt
• lttrgt
• lttdgtAlt/tdgt
• lttdgtBlt/tdgt
• lttdgtClt/tdgt
• lt/trgt
• lttrgt
• lttdgtDlt/tdgt
• lttdgtElt/tdgt
• lttdgtFlt/tdgt
• lt/trgt
• lt/tablegt

56
Tableau simple

• lttablegt pour définir le tableau en entier.
• lttrgt (table row) pour définir une ligne du
  tableau.
• lttdgt (table data) pour définir une cellule de
  données du tableau. Le contenu peut être de
  nature quelconque, le plus souvent texte ou
  nombre, un mot ou une succession de paragraphes,
  mais aussi image ltimg src"..".gt, hyperlien lta
  href".."gt, liste et même tableau.
• ltthgt (table header) pour définir une cellule de
  titre du tableau.Intérêt l' élément situé
  entre ltthgt..lt/thgt, est automatiquement centré et
  mis en gras.
• ltcaptiongt pour définir une légende au tableau

57
Bordures de tableau
58
Bordures de tableau
59
Espacement

• Attribut cellspacing espace laissé entre les
  côtés du tableau et les côtés des lignes et
  colonnes du tableau
• Attribut cellpadding espace compris entre le
  contenu de la cellule et la bordure du tableau ou
  la règle en pixels ou en pourcentage
• Alignement style text-align pour l'alignement
  horizontal et vertical-align pour l'alignement
  vertical (top, bottom, middle, baseline)

60
Largeur des colonnes

• Style width
• largeur fixe en pixels
• Pourcentage fondé sur le pourcentage d'espace
  horizontal disponible pour le tableau
• Proportionnelle se rapporte aux portions
  d'espace horizontal nécessaire au tableau
• width peut aussi être employé pour la taille
  totale du tableau, avec l'élément lttablegt

61
Fusion de cellules

• rowspan réalise une fusion verticale, spécifie le
  nombre de lignes couvertes par la cellule
  courante.
• Valeur par défaut 1, valeur O signifie que la
  cellule couvre toutes les lignes du groupe
• colspan réalise une fusion horizontale, spécifie
  le nombre de colonnes couvertes par la cellule
  courante.
• Valeur par défaut 1, valeur 0 signifie que la
  cellule couvre toutes les colonnes du groupe

62
Regroupements

• Regroupement des lignes en sections
• en-tête lttheadgt
• Corps de tableau lttbodygt
• pied de tableau lttfootgt
• Regroupement structurel de colonnes avec
  ltcolgroupgt, définition d'attributs partagés avec
  ltcolgt
• Attribut span spécifie le nombre de colonnes
  concernées
• Style width spécifie la largeur de colonnes par
  défaut(pixels, pourcentage, valeur relative, "O")

63
Insertion d'images

• Formats d'image
• GIF (Graphic Interchange Format) 16,7 millions de
  couleurs
• JPEG (Join Photographic Experts Group) 256
  couleurs
• PNG (Portable Network Graphic)
• En pratique, on choisit selon l'image le format
  permettant la meilleure compression, pour limiter
  les temps de chargement des pages

64
Image d'arrière-plan

• Syntaxe HTML
• ltbody background"nomfichier"gt
• Effet de mosaïque
• Effet de bordure
• Eviter les grands graphismes

Déconseillé
65
Image insérée dans une page web

• Elément ltimggt
• Syntaxe minimale
• ltimg src"URI de l image" /gt en XHTML
• Attributs optionnels
• width et height en pixels (préciser un seul pour
  réduction proportionnelle)
• alt alternative textuelle pour agents non
  visuels
• title commentaire sur l'image
• long desc description détaillée
• Style border largeur du cadre de l'image
• Style align

66
Image animée (GIF)

• Insertion identique à celle d'une image fixe
• Création de gifs animés
• Microsoft Gif Animator (gratuit)

67
Image cliquable

• Deux types
• côté client
• côté serveur

68
Image cliquable côté client

• Eléments ltmapgt et ltareagt, attribut usemap de
  l'élément ltimggt
• Syntaxe
• ltimg src"URI_image" usemap"nom_map" /gt
• ltmap name"nom_map"gt
• ltarea shape"forme" coords"coordonnees"
  href"URI_cible" /gt
• lt/mapgt

69
Image cliquable côté client

• Attribut shape
• default toute l'image
• rect rectangle, coordonnées haut-gauche et
  bas-droite nécessaires
• circle cercle, coordonnées centre et rayon
  nécessaires
• polygon polygone, coordonnées de chaque sommet
  nécessaires, le dernier sommet est identique au
  premier
• Récupération des coordonnées (x,y) à l'aide d'un
  logiciel de dessin (Paint, The Gimp, )
• En cas de chevauchement de zones, la première
  zone définie est prioritaire

70
Image cliquable côté serveur

• lta href"URI_script" gtltimg src"URI_image" ismap
  /gtlt/agt
• dans script.map, un script ASCII définit chaque
  forme, cible, coordonnées
• deux formats NCSA et CERN
• inaccessibles par navigateurs texte seulement et
  par moteurs de recherche
• W3C Elément ltimggt désormais déconseillé ?
  élément ltobjectgt

71
Inclusion générique d'images

• Elément ltobjectgt (type ligne)
• Syntaxe
• ltobject data"URI_donnée" type"image/gif"
  width,height,title gt
• texte de remplacement
• lt/objectgt
• Objets peuvent être imbriqués le navigateur
  affiche le premier objet reconnu

72
Inclusion générique d'images

• Images cliquables
• ltobject data"URI_image" datatype"image/gif"
  usemap"nom_map"gt
• ltmap namenom_mapgt
• lta href"cible" shape"forme"
  coords"coordonnées"gt
• nom_alt_lien lt/agt
• lt/mapgt
• lt/objectgt

73
Cadres ou Frames

• Fréquemment utilisés sur le web
• Permettent des présentations multiples
• menu
• fenêtres indépendantes
• sous-fenêtres

74
Jeu d'encadrement

• Fichier de définition de jeu d'encadrement
• En-tête différent
• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
  Frameset//EN" http//www.w3.org/TR/html4/frameset.
  dtdgt
• ltbodygt remplacé par ltframesetgt
• contient la définition de l'ensemble de cadres

75
Jeu d'encadrement

• ltframeset rows"50, "gt
• ltframe src"URI_cadre1" name"nom_cadre1"/gt
• ltframe src"URI_cadre2" name"nom_cadre2"/gt
• lt/framesetgt
• ltframeset cols"50, "gt
• ltframe src"URI_cadre1" name"nom_cadre1"/gt
• ltframe src"URI_cadre2" name"nom_cadre2"/gt
• lt/framesetgt

76
Jeu d'encadrement

• Taille du cadre spécifiée en pixels ou en
  pourcentage
• rows et cols peuvent être combinés
• ltnoframesgt offre une alternative au jeu de cadres
  lt/noframesgt

77
Attributs de l'élément FRAME

• name nom du cadre courant
• src localisation du contenu initial à placer
  dans le cadre
• noresize booléen pour un cadre non
  redimensionnable
• scrolling valeur "yes","no","auto" pour
  autoriser ou interdire la présence de barres de
  défilement
• frameborder 0 ou 1, avec ou sans bordure avec
  autres cadres
• marginwidth, marginheight marges en pixels
• target cible par défaut pour tous les liens de
  ce cadre
• id,class,title,style,longdesc

78
Détermination du cadre cible

• Attribut target permet d'ouvrir la nouvelle page
  
• dans le même cadre
• dans un autre cadre du jeu d'encadrement
• dans un autre cadre à l'intérieur d'un cadre
  parent ou enfant
• dans un nouveau jeu d'encadrement remplaçant
  totalement l'ancien
• dans une nouvelle fenêtre du navigateur
• dans la fenêtre actuelle

79
Noms réservés

• _blank ouvre une page dans une nouvelle fenêtre
• _self ouvre une page dans le cadre actif
• _parent cible le cadre parent dans le cas de
  cadres imbriqués
• _top ouvre le lien dans la fenêtre en cours, en
  remplaçant le jeu d'encadrement

80
Jeux de cadres

• Cible par défaut définir dans l'en-tête du
  document un élément ltbasegt
• Exple ltbase href"monsite" target"affichage"gt
• Les jeux d'encadrement peuvent être imbriqués,
  certains cadres deviennent parents des autres

81
Cadres en ligne

• L'élément ltiframegt insère un cadre dans un bloc
  de texte
• Exemple
• ltiframe src"URI_cadre" width"400"
  height"500"gt
• Mêmes attributs que ltframegt, sauf noresize

82
Encodage du document

• Le terme encodage (encoding) désigne la façon
  dont les caractères dans un ensemble ou un
  sous-ensemble dun alphabet donné, sont convertis
  en octets dans un fichier informatique (et
  vice-versa).

83
Encodage du document

• encodages les plus courants
• iso-8859-1 (méthode dencodage très limitatif
  dun jeu partiel des caractères de lalphabet
  latin ISO Latin 1)
• utf-8 (méthode dencodage dun jeu universel de
  caractères Unicode pour toutes les langues)
• windows-1252 (méthode dencodage du jeu partiel
  des caractères de lalphabet latin ANSI - ou
  Windows Latin 1)
• macintosh (méthode dencodage du jeu partiel des
  caractères de lalphabet latin Mac OS Roman)

84
Encodage du document

• En HTML déclaration dans ltHEADgt
• ltmeta http-equiv"content-type"
  content"text/html charsetutf-8" /gt
• En XHTML ou XML déclaration dès la première
  ligne du document
• lt?xml version"1.0" encoding"UTF-8"?gt

85
Encodage du document

• Quel encodage choisir ?
• Lencodage utf-8 est de loin le meilleur choix.
• Utf-8 permet dencoder tous les caractères
  Unicode, pour tous les environnements
  informatiques, dans toutes les langues.
• La variété des polices unicodes est de plus en
  plus étendue, notamment disponibles au format
  .otf (Open Type Face) ou dans une moindre mesure,
  au format .ttf (True Type).

86
Formulaires

• Un formulaire ajoute de l'interactivité au site
  web
• Constitué d'un contenu normal, d'un balisage, de
  commandes et de labels (étiquettes)
• Après remplissage par utilisateur, le formulaire
  est traité
• Créé grâce à l'élément ltformgt qui spécifie
• La disposition du formulaire
• Le programme qui va manipuler les données
• La méthode selon laquelle les données sont
  envoyées au serveur
• L'encodage des caractères

87
Formulaires
88
Attributs principaux d'un formulaire

• action URI de l'agent du traitement du
  formulaire
• method méthode HTTP d'envoi (get ou post)
• id nom de l'élément
• enctype type d'encodage du contenu
• accept-charset liste d'encodages acceptés par
  le serveur
• accept liste des types de contenus pris en
  charge par le serveur

89
Commandes d'un formulaire

• nom de commande spécifié par attribut name dont
  la portée est l'élément ltformgt
• chaque commande a une valeur initiale, spécifiée
  avec l'attribut value, et une valeur courante
• la valeur courante est d'abord égale à la valeur
  initiale, puis modifiée par les actions de
  l'utilisateur et les scripts
• la valeur initiale n'est jamais modifiée
• quand le formulaire est soumis, les couples
  nom-valeur de certaines commandes sont envoyés au
  serveur

90
Types principaux de commandes

• Boutons d'action (ltbuttongt ou ltinputgt)
  déclenchent une action
• soumission du formulaire
• réinitialisation du formulaire
• lancement d'un script particulier
• Cases à cocher créées avec l'élément ltinputgt et
  activées avec l'attribut checked
• Boutons d'option (boutons radio) idem mais
  mutuellement exclusifs
• Menus créés avec l'élément ltselectgt combiné à
  ltoptgroupgt et ltoptiongt
• Saisie de texte avec lttextareagt
• Sélection d'un fichier
• Commandes cachées
• Commandes d'objets

91
Formulaires
Saisie de texte
Menu
Boutons radio
92
Elément ltinputgt

• Permet de créer de nombreuses commandes
• Syntaxe
• ltinput typevaleur namevaleur valuevaleur
  sizevaleurgt
• L'attribut type spécifie le type de commande à
  créer. Par défaut, sa valeur est text (saisie de
  texte sur 1 ligne)
• L'attribut size indique la largeur initiale de la
  commande en nb de caractères
• L'attribut complémentaire maxlength précise le
  nombre maxi de caractères que l'utilisateur peut
  saisir

93
Elément ltinputgt

• Si typepassword, saisie de texte sur une ligne,
  de type mot de passe (masqué). Fonctionne avec
  attributs size et maxlength.
• Si typecheckbox, case à cocher attribut
  checked si case cochée - attribut value
  obligatoire
• Si typeradio, bouton radio - attribut checked si
  case cochée attribut value obligatoire
• Les boutons peuvent être rassemblés dans un même
  groupe, en donnant la même valeur à l'attribut
  name

94
Elément ltinputgt

• Le type submit crée un bouton de soumission du
  formulaire
• Effectue l'action définie dans l'élément ltformgt
• Le type reset crée un bouton de réinitialisation
  du formulaire
• Le type image crée un bouton de soumission
  graphique, alors l'attribut src spécifie l'URI de
  l'image, alt donne une alternative
• Le type button crée un bouton d'action
• ltinput type"button" name"nom"
  value"texte_bouton"gt
• Le type hidden crée une commande cachée
• Le type file crée une commande de sélection de
  fichier

95
Formulaires
Submit
Reset
96
Elément ltbuttongt

• Comme ltinputgt accepte contenu
• ltbuttongtlt/buttongt
• Attributs
• Name nom commande
• Value valeur initiale
• Type submit,reset,button
• Attention Pas de usemap dans l'image d'un button

97
Elément ltselectgt

• Crée un menu
• Syntaxe
• ltselect name"nom"gt
• ltoptiongt.
• ..
• lt/selectgt
• Chaque option représentée par un élément ltoptiongt
• Attributs
• Name
• Size ?nombre de lignes de menu
• Multiple booléen facultatif pour sélection
  multiple

98
Elément ltoptiongt

• Correspond à un choix dans un menu
• Attributs
• Label ?intitulé
• Value ? valeur initiale facultative
• Selected?booléen facultatif pour préselection

99
Elément ltoptgroupgt

• Permet de regrouper des options
• Syntaxe
• ltselect name"nom menu"gt
• ltoptgroup label"groupe 1"gt
• ltoption label"choix1"gt choix1 lt/optiongt
• lt/optgroupgt
• ltoptiongt .
• lt/selectgt

100
Elément lttextareagt

• Crée une zone de texte multiligne
• Attributs
• Name
• Rows ? nombre de lignes visibles
• Cols ? largeur visible
• Readonly ? booleen pour mode lecture seule

Intérêt soumission par formulaire
101
Elément ltlabelgt

• Permet d'ajouter des libellés
• Attribut optionnel for permet de lier le label à
  la commande par son attribut id
• ltlabel for"prenom"gtPreacutenomlt/labelgt
• ltinput type"text" name"commande prenom"
  id"prenom"gt

102
Formulaires
Label
Label
Label
Label
103
Eléments ltfieldsetgt et ltlegendgt

• ltfieldsetgt permet de rassembler par thème
  certains éléments d'un formulaire
• ltlegendgt permet d'associer une légende à ce
  groupe d'éléments

104
Soumission du formulaire

• Protocole HTTP
• Get ? préféré quand pas d'effets secondaires
  (type recherche)
• Post ? quand la soumission du formulaire a un
  effet (ajout dans une base de données)
• Type de contenu
• Application/x-www-form-urlencoded
• Multipart/form-data (fichiers,données non
  ASCII,données binaires)

105
Feuilles de style alternatives

• Attribut rel indique si la feuille de style est
  persistante, préférée, ou alternative
• stylesheet ? feuille préférée si title est
  spécifié, persistante sinon
• alternate stylesheet title ? feuille
  alternative
• Attribut type indique le langage de la ressource
  (CSS ou autre)
• Attribut href indique l'URI de la feuille de
  style
• Feuille de style préférée
• ltmeta http-equiv"Default-style"
  content"nom_preferee"gt

106
Cascade et héritage

• Cascade quand plusieurs règles pour un élément ?
  classement et sinon valeur par défaut
• Si propriété héritable et pas de valeur,
  l'élément englobant est examiné, jusqu'à
  identifier une règle applicable
• Ordre héritage
• Propriétés définies par utilisateur de élément
  courant (exnavigateur)
• Feuille de style externe de l'élément parent
• Feuille de style locale de l'élément parent
• Style de ligne de l'élément parent
• Propriétés de feuille de style externe de
  l'élément courant
• Propriétés de feuille de style locale de
  l'élément courant
• Styles de ligne de l'élément courant