Ecriture de pages Web

1
Ecriture de pages Web

• Le langage HTML / XHTML
• Lionel LAFITTE
• llafitte_at_pasteur.fr
• 5 Novembre 2004

2
Comment fonctionne le Web ?

• C'est un mécanisme client-serveur.
• Le client demande un fichier, le serveur lui
  donne tel qu'il est stocké processus statique
• Le serveur peut aussi générer un fichier en
  fonction de la demande du client processus
  dynamique

3
Écrire pour le Web

• Ce n'est pas uniquement écrire des pages en HTML,
  il faut penser en terme de projet
• Définir, écrire le contenu.
• Trouver une arborescence ergonomique
• Équilibre menus/sous-menus.
• Appliquer / Respecter la charte graphique
• Utiliser, adapter les propositions graphiques.
• Produire et intégrer les pages.
• Installer le site sur le serveur.
• Politique de maintenance et de mise à jour.

4
Comment écrire en HTML?

• A la main, avec un éditeur de texte
• A l'aide d'un programme qui génère le code HTML
  pour vous
• Assistant au code HTML.
• Éditeur dit  WYSIWYG  ou graphique.
• Filtres.
• Application de   Content Management .

5
Que choisir pour écrire de l' HTML?

• A la main, avec un éditeur de texte
• Simple Text, Bbedit,Emacs ,WordPad
• Avec un logiciel  assistant  au code HTML
• PageSpinner sur MacIntosh, Amaya sur Unix,
  HTML-Kit sur PC
• A l'aide d'un programme dit "WYSIWYG"
• Dreamweaver , Golive, Netscape composer,
  FrontPage, Claris Homepage ...
• A l'aide d'un filtre
• Les commandes enregistrer sous html, que l'on
  trouve dans les suites bureautiques, dans
  certains logiciels de P.A.O.
• Application  CMS 
• SPIP, Lutèce, Plone et un grand nombre
  dapplications commerciales.
• Conversion HTML vers XHTML avec HTML Tidy
• Disponible dans de nombreuses versions sur le
  site du W3C

6
Que choisir pour lire HTML?

• Le client doit pouvoir interpréter HTML et
  afficher le résultat. Ils sont divers, tournant
  sur des systèmes différents
• Mozilla, Netscape Navigator, Internet explorer,
  Safari, Firefox, Opéra, iCab, Emacs mode www,
  Amaya, Lynx, links, w3m
• Note Les clients web ne possèdent pas tous un
  processeur XML capable d'interpréter correctement
  le XHTML. Pour une meilleure compatibilité
• utiliser les versions les plus récentes des
  navigateurs.
• pour les plus anciens, faire en sorte qu'ils
  affichent la page comme du HTML en omettant les
  déclarations XML qui pourraient les perturber.

7
HTML, l'origine

• HTML Hyper Text Markup Language est né en 1989
  sous l'impulsion de Tim Berners Lee, " inventeur
  " du Web.
• HTML est basé sur SGML (Structured Markup
  Language), qui est une vieille norme utilisée
  pour la description de documents.Elle est conçue
  pour les grosses documentations techniques.
• HTML est une instance de SGML.

8
HTML, les principes

• Il contient des commandes, implémentées par des
  balises pour marquer les différents types de
  texte (titres, paragraphe, listes ) , pour
  inclure des images, des formulaires, des liens
• C'est un langage à balisage qui décrit la
  structure logique d'un document hypertexte. Il a
  volontairement été conçu pour être simple.
• Il a évolué vers un langage de description de
  pages offrant des possibilités plus proches de la
  P.A.O.

9
L'hypertexte

• Le langage HTML permet de créer des documents
  interactifs grâce à des liens hypertextes, qui
  relient votre document à d'autres documents.
• En cliquant sur une zone de texte (ou une image,
  un logo) mise en évidence, on peut accéder a un
  nouveau document situé sur un autre ordinateur en
  n'importe quel point du globe.

10
XHTML

• XHTML 1.0, est une reformulation de HTML en une
  application XML et trois DTDs correspondant à
  celles définies par HTML 4. La norme actuelle est
  XHTML 1.1.
• La compatibilité avec les agents utilisateurs
  (les "clients") HTML actuels est possible en
  suivant un ensemble raisonnable de règles.
• La sémantique des éléments et de leurs attributs
  sont définis dans la Recommendation W3C pour le
  HTML.
• Le site du W3C http//www.w3c.org.

11
Arbre généalogique
SGML
XML
HTML
Docbook

XHTML
SMIL
MathML

12
Les balises - 1

• Pour décrire un fichier hypertexte, le langage
  HTML insère des balises dans le texte du document
  
• Début de mise en forme Fin de mise en
  forme

ltmarqueurgt ici votre texte lt/marqueurgt

• Synonymes marqueur, élément, tag.

13
Les balises - 2

• Ces balises peuvent être insérées n'importe où
  dans le texte, entre 2 phrases, mots, lettres
• ltgrasgtLe ltitaliquegt cours lt/italiquegt
  HTMLlt/grasgt

Le cours HTML
14
Les balises - 3

• Il faut respecter une logique d'imbrication
• Bon
• Mauvais
• ltgrasgtltitaliquegt Le cours HTMLlt/grasgtlt/italiquegt
  

ltgrasgtltitaliquegt Le cours HTML lt/italiquegt
lt/grasgt
15
Les balises - 4

• Le langage HTML est insensible à la casse, mais
  comme XHTML l'est, toujours écrire en minuscules.
• Bon
• Mauvais
• ltGRASgtltitaliquegt Le cours HTML lt/italiquegt
  lt/GRASgt
• ltGrasgtltITALIQUEgt Le cours HTML lt/ITALIQUEgt
  lt/Grasgt
• ltGRASgtltITALIQUEgt Le cours HTML
  lt/italiquegt lt/GRASgt

ltgrasgtltitaliquegt Le cours HTML lt/italiquegt
lt/grasgt
16
Les attributs

• Les balises peuvent posséder un ou plusieurs
  attributs qui permettent de spécifier l'action de
  la balise. Toujours mettre la valeur de
  l'attribut entre guillemets.

ltmarqueur attribut"argument"gttextelt/marqueurgt lt
marqueur attribut1"argument" attribut2"argument"
gttextelt/marqueurgt
17
Caractères accentués

• Vous pouvez rencontrer le codage ASCII sur 7 bits
  spécifié par la norme pour afficher les
  caractères accentués ou spéciaux. Ceux ci devront
  faire l'objet d'un codage spécial au sein du
  fichier HTML.
• é s'écrit eacute être s'écrit eacirctre
• Les serveurs Web accepte les caractères accentués
  de la norme iso-8859-1. On spécifie l'encodage
  dans le fichier HTML.
• ltmeta http-equiv"Content-Type"
  content"text/html charsetiso-8859-1" /gt

18
Les DTDs HTML / XHTML

• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN" "http//www.w3.org/TR/xhtml1/DTD/xhtml
  1-strict.dtd"gt
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Transitional//EN" "http//www.w3.org/TR/xhtml1/DTD
  /xhtml1-transitional.dtd"gt
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http//www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"gt
• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http//www.w3.org/TR/html4/strict.dtd"gt

19
Un fichier HTML
lt!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0.1
Transitional//EN "http//www.w3.org/TR/html4/loose
.dtd"gt lthtmlgt ltheadgt lttitlegtmon premier
fichierlt/titlegt lt/headgt ltbodygt hello
world lt/bodygt lt/htmlgt
20
Un fichier XHTML
lt?xml version"1.0" encoding"iso-8859-1"?gt lt!DOCT
YPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http//www.w3.org/TR/xhtml1/DTD
/xhtml1-transitional.dtd"gt lthtml
xmlns"http//www.w3.org/1999/xhtml" lang"fr"
xmllang"fr"gt ltheadgt lttitlegtmon premier
fichierlt/titlegt lt/headgt ltbodygt hello
world lt/bodygt lt/htmlgt
21
Un fichier HTML

• Un fichier HTML doit comporter au minimum ces 4
  balises
• lthtmlgt
• ltheadgt
• lttitlegt
• ltbodygt
• Expert un fichier XHTML doit comporter ces 4
  balises les déclarations XML et DTD.

22
Analyse des balises

• lthtmlgt .. lt/htmlgt Délimite le début et la fin du
  document
• ltheadgt . . lt/headgt Entête du document
• lttitlegt . .lt/titlegt Titre du document
• ltbodygt . . lt/bodygt Corps du document

23
Rappels

• Les noms d' éléments sont sensibles à la casse et
  sont écrits en minuscules.
• Les noms d'attributs sont sensibles à la casse,
  doivent être écrits en minuscules et encadrées
  par des guillemets. Tous les attributs doivent
  recevoir une valeur.
• Les balises fermantes sont obligatoires.
• Expert Les documents XHTML strictement conformes
  doivent comporter une déclaration DOCTYPE
  (sémantique). La balise lthtmlgt doit déclarer
  l'espace de noms (syntaxe) de la spécification
  XHTML.

24
Exercices

• On utilisera PageSpinner
• Présentation de l'interface

25
Exercices

• Créer un fichier HTML 4.01 Transitional.
• Ajouter du contenu
• Enregistrer et visualiser le fichier avec un
  navigateur

26
Un peu plus loin dans l' HTML
lthtmlgt ltheadgt lttitlegtMon deuxieme
fichierlt/titlegt lt/headgt ltbodygt lth2gtHello
Worldlt/h2gt ltpgt L'emplacement de votre nouveau
mateacuteriel est-il agrave proximiteacute
(moins de 5m) d'une prise reacuteseau libre ?
Si oui, relevez le numeacutero de la prise (il
est eacutecrit sur une plaque de
ceacuteramique bleue, il faut respecter la
distinction entre lettres majuscules et
minuscules). Sinon, il faut faire installer une
nouvelle prise par le Service Travaux, auquel
vous devrez adresser un bon de cession interne.
La suite des opeacuterations aura lieu quand
vous aurez une prise disponible. Dans le doute,
interrogez par courrier eacutelectronique
netadm_at_pasteur.fr. lt/pgt ltpgtVotre demande doit
nous parvenir par l'intermeacutediaire du
correspondant informatique de votre Uniteacute.
Elle se composera de deux parties un bon de
cession interne envoyeacute au Service
Informatique Scientifique et un courrier
eacutelectronique adresseacute agrave
netadm_at_pasteur.fr qui contiendra toutes les
informations utiles (dont le numeacutero du bon
de cession). lt/pgt ltolgt ltligt le premier
eacuteleacutementlt/ligt ltligt le
deuxiegraveme eacuteleacutementlt/ligt ltligt
le troisiegraveme eacuteleacutementlt/ligt lt/o
lgt ltpgtlta href"http//www.pasteur.fr/infosci/utili
nfo/FAQ.htmlQ1"gtVous trouverez ici la suite du
texte !! lt/agtlt/pgt lt/bodygt lt/htmlgt
27
Les titres et paragraphes

• lthngt . . lt/hngt Titre de niveau n, de 1 à 6
• ltpgt . . lt/pgt Paragraphe

28
Les listes

• ltulgt . . lt/ulgt Liste non triée, liste à puces
• ltolgt . . lt/olgt Liste triée, liste à numéros
• ltligt . . lt/ligt Elément de la liste

29
Les liens - 1

• ltagt . . lt/agt
• Création d'un lien hypertexte, ou vers un point
  d'ancrage du document
• Principaux attributs
• href url
• name chaîne de caractères
• lta href "http//www.pasteur.fr"gtL'Institut
  Pasteurlt/Agt

30
Les liens - 2

• lta name "ref" gtréférencelt/Agt
• ltpgt
• .
• ltpgt
• .
• .
• .
• ltpgt
• .
• lta href "monfichier.htmlref"gtVers la
  référencelt/agt

31
Les adresses URL

• Les adresses du Web ou URL ( Uniform Resource
  Locator ) sont du type
• http//bioweb.pasteur.fr/seqanal/alignment/intro-f
  r.htmlLASSAP
• Le protocole http
• Le serveur bioweb.pasteur.fr
• Le fichier /seqanal/alignment/ intro-fr.html
• Un ancrage LASSAP

32
Les adresses URL

• L'adresse indiquée dans le lien ( URL) peut être
  absolue, elle inclut tout le chemin en commençant
  par le protocole
• http//www.pasteur.fr/monfichier.html
• Ou relative, elle n'inclut qu'une partie du
  chemin
• Mon_repertoire/monfichier.html

33
Autres balises utiles
ltbgttexte graslt/bgt texte gras ltigttexte
italiquelt/igt texte italique ltbiggttexte
groslt/biggt texte gros ltsmallgttexte
petitlt/smallgt texte petit
34
Exercices

• Écrire un fichier en utilisant les nouveaux
  marqueurs.
• Faites des petites modifications de code pour
  voir le résultat
• Créez des liens vers d'autres pages, du serveur
  Pasteur, de serveurs extérieurs, de vos propres
  pages.

35
Encore plus loin dans l' HTML

• ltdiv style"text-align center"gt
• lttable border"1" cellspacing"0"
  cellpadding"10"gt
• lttrgt
• ltthgtltimg src"Images/fleche-in-1.gif" width"65"
  height"35" align"Middle" /gtPour Maclt/thgt
• ltthgtltimg src"Images/fleche-in-2.gif" width"100"
  height"60" align"Middle" /gtPour PClt/thgt
• ltthgtltimg src"Images/fleche-in-3.gif" width"150"
  height"71" align"Middle" /gtPour Linuxlt/thgt
• lt/trgt
• lttrgt
• lttdgt
• ltulgt
• ltligtlta href"http//proxad.mac.tucows.com/blueberr
  y/htmltextmac.html"gtMode texte lt/agtlt/ligt
• ltligt lta href"http//proxad.mac.tucows.com/blueber
  ry/beginnermac.html"gtSimples lt/agtlt/ligt
• ltligtlta href"http//proxad.mac.tucows.com/blueberr
  y/htmleditmac.html"gtAvanceacuteslt/agtlt/ligt
• lt/ulgt
• lt/tdgt
• lttdgt
• ltulgt
• ltligtlta href"http//proxad.tucows.com/htmltext95.h
  tml"gtMode texte lt/agtlt/ligt
• ltligt lta href"http//proxad.tucows.com/htmlbeginne
  r95.html"gtSimples lt/agtlt/ligt

36
Les tableaux -1

• lttablegt . . lt/tablegt
• Définit un tableau
• Principaux attributs (certains ne sont pas
  valides en XHTML 1.1)
• align position
• bgcolor color
• border n
• cellpadding n
• cellspacing n
• width n

37
Les tableaux -2

• lttrgt . . lt/trgt
• Définit une ligne d'un tableau
• Principaux attributs (certains ne sont pas
  valides en XHTML 1.1)
• align left,center,right
• valign top, middle, bottom
• bgcolor color
• border n

38
Les tableaux -3

• lttdgt . . lt/tdgt
• Définit une cellule de données
• Principaux attributs (certains ne sont pas
  valides en XHTML 1.1)
• align type
• valign type
• bgcolor color
• colspan, rowspan n
• height, width n

39
Les images -1

• ltimggt . . lt/imggt
• Insère une image
• Principaux attributs
• align left, bottom, middle, top, right
• alt text
• border n
• height, width n
• src url

40
Les images - 2

• Attention au poids des images, il est important
  d'optimiser son fichier image.
• Deux formats sont lus par les navigateurs, GIF (
  Graphics Interchange Format ) et JFIF ( JPEG File
  Interchange Format).On utilise le GIF pour les
  illustrations, le JPEG pour les photos.

41
Les droits d'auteurs

• Attention aux droits sur les images.La seule
  image qui vous appartient est celle que vous avez
  prise avec votre matériel photo. Il faut aussi
  l'autorisation des personnes figurant sur la
  photo.
• Attention à la portée des droits d'auteurs,
  surtout pour une utilisation web.
• Attention aux images "libres de droits".
• Lire les recommandations juridiques sur
  l'intranet.

42
Exercices

• Importez une image
• Créez un tableau.
• Créez un tableau contenant une image et du texte.

43
Les feuilles de styles CSS

• Elles permettent de changer la mise en forme
  d'une page HTML ou XHTML sans en modifier son
  contenu.
• Le langage CSS spécifie l'apparence des blocs de
  texte ou image, mais il peut contrôler d'une
  manière très précise le positionnement des
  objets, les bordures, les marges
• La norme est consultable sur le site du
  consortium Web. Les navigateurs n'implémentent
  qu'une petite partie du langage.

44
Les feuilles de styles CSS Les règles

• Une feuille de style consiste en un ensemble de
  règles qui définissent
• le formatage des éléments (balises) d'un document
  XHTML.

Règle Sélecteur Déclarations Déclaration
Propriété Valeurs
h1 color blue
Sélecteur(s)
Propriété(s)
Valeur(s)
h3, h4 font-weight bold font-family
arial
45
Les feuilles de styles CSS

• En externe, c'est un fichier indépendant du
  fichier HTML, on utilise dans l'entête du
  document la balise link
• ltlink href"ma_feuille_de_style"
  rel"stylesheet" type"text/css"gt
• En interne, dans l' entête de document, le style
  est spécifié pour tout le document entre les
  balises style
• ltstyle type"text/css"gt
• h1 font-family Arial, Helvetica,
  sans-serif
• lt/stylegt
• En interne, dans le corps du document, le style
  est appliqué localement au texte
• lth1 style"font-family "Courier New", Courier,
  monospace"gtlt/h1gt

46
Les feuilles de styles CSS les classes

• On peut créer ses propres classes que l'on
  appliquera avec l' attribut "class"
• Dans l'entête
• ltstyle type"text/css"gt
• maclasse font-family Arial, Helvetica,
  sans-serif
• font-size larger
• font-style italic
• text-align center
• color 4169E1
• lt/stylegt
• Dans le corps du document
• ltspan class"maclasse"gtla partie du texte
  formatée suivant ma classelt/spangt
• ltp class"maclasse"gtun paragraphe formaté
  suivant ma classelt/pgt

47
Exercice

• Ajoutez des styles à l'un de vos fichiers HTML

48
Un fichier différent

• lthtmlgt
• ltheadgt
• lttitlegtdes cadreslt/titlegt
• lt/headgt
• ltframeset cols"25,75"gt
• ltframe name"menu" src"menu.html"
  scrolling"yes"gt
• ltframe name"cible" src"cible.html"
  scrolling"no"gt
• ltnoframesgt
• ltbodygt
• message pour les navigateurs ne supportant pas
  les cadres
• lt/bodygt
• lt/noframesgt
• lt/framesetgt
• lt/htmlgt

49
Les cadres

• Ils permettent de diviser la fenêtre principale
  du navigateur en plusieurs sous fenêtres de
  taille réduite, chacune d'entre elles affichant
  un document différent.
• Certains navigateurs ne les supportent pas, il
  est possible de les désactiver, il faut donc
  prévoir un fichier de substitution inscrit entres
  les balises
• ltnoframesgt .. lt/noframesgt

50
XHTML compatible HTML

• Eviter les sections CDATA.
• Pas d'instructions de traitement.
• Ajouter un caractère d'espacement avant la barre
  oblique d'une balise d'élément vide ( ltbr /gt ) .
• Spécifier l'encodage de caractères de deux façons
  ( entête xml et balise méta)
• lt?xml version"1.0" encoding" iso-8859-1"?gt
• ltmeta http-equiv"Content-type"
  content"text/html charsetiso-8859-1"gt
• Spécifier les cibles d'hyperliens (balise a) en
  utilisant à la fois les attributs id et name.
• Assigner une valeur aux attributs HTML booléens.
• ltinput type"radio" checked"checked"gt

51
Les limites d' HTML / XHTML

• Langage de base du Web
• Langage simple, limité et statique
• D'autres langages, extensions,programmes sont
  venus se greffer à l'HTML pour en augmenter les
  possibilités.
• XHTML offre les aspects XML mais ce n'est pas
  suffisant pour toutes les applications que l'on
  souhaite mettre en uvre sur le web.

52
CGI - SSI - ePerl PHP - JSP

• Common Gateway Interface, est un programme qui
  s'exécute sur le serveur.
• SSI sont des fonctions spécifiques du serveur
  Apache. ePerl, PHP sont des modules que l'on
  installe sur le serveur.
• On insère des "morceaux de codes" dans la page
  HTML, qui la rendent "dynamique".
• Le code est interprété par le serveur
• ex affichage personnalisé pour un client,
  filtrage, connexion à des bases de données ..

53
Javascript

• Il s'agit d'un langage de script qui permet
  d'agir sur le contenu d'une page HTML.
• Le code est directement inséré dans la page HTML
  et est interprété par le client.