Page Web et HTML

1
Page Web et HTML

• IFT6800 E 2008
• Pierre Poulin

2
Navigation sur le Web

• Outils
• Navigateurs firefox, Explorer, netscape,
• Indiquer une adresse URL (Uniform Resource
  Locator)
• Download le document correspondant à lURL
• Interpréter et afficher

3
URL

• Chaque ressource (document, programme, ) sur le
  Web correspond à une adresse URL
• URL adresse du serveur Web adresse de la
  ressource sur le site
• www.iro.umontreal.ca/nie/IFT6800/index.htm
• Adresse sur un site
• Hiérarchique, comme lorganisation des
  répertoires et fichiers sur Unix

www.iro.umontreal.ca
nie
Répertoire HTML dans le compte de lusager nie
IFT6800
index.htm
4
Savoir comment afficher un document

• Comment afficher le document  index.htm ?
• Formatage, couleur, taille de caractères,
• Il faut que le document soit décrit dans un
  langage standard, compris par tous les
  navigateurs du Web
• HTML Hyper-Text Markup Language
• Un document écrit dans ce langage a une extension
  .html ou .htm

5
Exemple simple
Tag/Balise, Markup/Marqueur

• ltHTMLgt
• ltHEADgt
• C'est le conteneur de l'entête.
• lt/HEADgt
• ltBODYgt
• C'est le conteneur du corps. C'est ici que
  nous écrirons.
• lt/BODYgt
• lt/HTMLgt

Contenu
Une paire de balises
6
Comment mettre une page sur le Web?

• Un serveur Web (e.g. www.iro.umontreal.ca)
• Permission dajouter une page dans un répertoire
  accessible
• Éditer une page Web
• Stocker la page dans un répertoire accessible par
  le serveur Web
• (la page devient accessible vérifier les
  permissions)
• Pour être à partir dautres pages, la page peut
  être référencée par dautres pages (lien
  hypertexte vers la page)

7
Principe de HTML

• En plus du contenu, on ajoute les balises pour
  indiquer
• rôle de chaque segment de contenu (e.g. ltH1gt,
  ltHEADgt, ),
• format daffichage (e.g. ltfont color"whitegt),
• type de données (e.g. ltscript language
  "javascript"gtlt/scriptgt )
• Essentiellement, HTML vise à indiquer le format
  daffichage et des extensions pour intégrer
  certains programmes

8
À propos de HTML

• Hypertext lien entre des objets, documents,
• Markup ajout sur des documents pour indiquer
  comment afficher
• Historique
• 1980 Tim Berners-Lee a développé un système
  prototype hypertexte ENQUIRE au CERN (Centre
  européen de recherche nucléaire)
• 1989 Système hypertexte pour Internet (Robert
  Caillau)
• 1991 première version de HTML (une application
  de SGML)
• 1994 fondation du W3C
• 1995 HTML 2.0
• 1999 HTML 4.01 (dernière version)
• 2000 HTML devient un standard international
  (ISO/IEC 154452000 )

9
Éditer une page Web

• Amaya editor (WYSIWYG)

10
Editeur

• Dreamweaver

11
Editeur

• Frontpage ?SharePoint Designer Expression Web

12
Word

• Créer un document Word
• Stocker comme un document .htm ou .html
• Beaucoup de balises et informations ajoutées

13

• lthtml xmlnso"urnschemas-microsoft-comofficeof
  fice"
• xmlnsw"urnschemas-microsoft-comofficeword"
• xmlns"http//www.w3.org/TR/REC-html40"gt
• ltheadgt
• ltmeta http-equivContent-Type content"text/html
  charsetwindows-1252"gt
• ltmeta nameProgId contentWord.Documentgt
• ltmeta nameGenerator content"Microsoft Word 10"gt
• ltmeta nameOriginator content"Microsoft Word
  10"gt
• ltlink relFile-List href"Bonjour_files/filelist.x
  ml"gt
• lttitlegtBonjourlt/titlegt
• lt!--if gte mso 9gtltxmlgt
• ltoDocumentPropertiesgt
• ltoAuthorgtnielt/oAuthorgt
• ltoLastAuthorgtnielt/oLastAuthorgt
• ltoRevisiongt1lt/oRevisiongt
• ltoTotalTimegt0lt/oTotalTimegt
• ltoCreatedgt2007-08-15T044000Zlt/oCreatedgt
• ltoLastSavedgt2007-08-15T044000Zlt/oLastSavedgt

• _at_font-face
• font-family"\_at_SimSun"
• panose-12 1 6 0 3 1 1 1 1 1
• mso-font-charset134
• mso-generic-font-familyauto
• mso-font-pitchvariable
• mso-font-signature3 135135232 16 0 262145 0
• / Style Definitions /
• p.MsoNormal, li.MsoNormal, div.MsoNormal
• mso-style-parent""
• margin0cm
• margin-bottom.0001pt
• mso-paginationwidow-orphan
• font-size12.0pt
• font-family"Times New Roman"
• mso-fareast-font-familySimSun
• mso-ansi-languageEN-CA
• _at_page Section1
• size612.0pt 792.0pt

14
But du cours

• Apprendre à comprendre les codes HTML
• Savoir comment ajouter des éléments
  supplémentaires (code JavaScript)
• lthtmlgt
• ltheadgt
• lttitlegt bonjour lt/titlegt
• lt/headgt
• ltbodygt
• Bonjour!
• lt/bodygt
• lt/htmlgt

15
Un autre exemple
html

• lt!DOCTYPE html PUBLIC "-//IETF//DTD HTML
  2.0//EN"gt
• lthtmlgt
• ltheadgt
• lttitlegt Exemple de HTML lt/titlegt
• lt/headgt
• ltbodygt Ceci est une phrase avec un
• lta href"cible.html"gthyperlienlt/agt.
• ltpgt Ceci est un paragraphe ougrave il n'y a
  pas d'hyperlien. lt/pgt
• lt/bodygt
• lt/htmlgt

head
title
texte
body
texte
a
texte
p
texte
16
Les éléments HTML
Emboîtement
17
Les éléments en détails

• lthtmlgtlt/htmlgt
• Délimite le document en HTML
• ltheadgtlt/headgt
• Section en-tête
• ltbodygtlt/bodygt
• Corps du document

18
En-tête

• lttitlegtlt/titlegt
• Titre du document (au plus un par document)
• ltbase /gt
• ltbase href"http//www.w3schools.com/gt
• Spécifie lURL de base à partir de laquelle les
  références relatives sont interprétées
• ltlink /gt
• Spécifie les liens vers dautres documents (e.g.
  précédent, suivant, stylesheet, )
• ltscriptgtlt/scriptgt
• Pour ajouter JavaScript
• ltstylegtlt/stylegt
• ltstyle type"text/css"gtlt/stylegt
• Spécifie le style du document
• ltobjectgtlt/objectgt
• Utilisé pour inclure des objets génériques
• ltmeta /gt
• Utilisé pour spécifier des méta-données (e.g.
  auteur, date, )
• ltMETA NAME"Author" LANG"fr" CONTENT"Hugo
  ETIEVANT"gt ltMETA NAME"Publisher" CONTENT"Hugo
  ETIEVANT"gt ltMETA NAME"Reply-to"
  CONTENT"cyberzoide_at_monsite.com (Hugo ETIEVANT)"gt

empty element tag balise sans contenu
19
Corps

• Éléments dans des phrases
• ltemgtlt/emgt emphasis
• ltstronggtlt/stronggt strong emphasis
• ltqgtlt/qgt quotation
• ltcitegtlt/citegt citation
• Pour des codes
• ltcodegtlt/codegt code snippet
• ltsampgtlt/sampgt sample
• Formatage spécial
• ltsubgtlt/subgt ltsupgtlt/supgt index ou exposant
• ltbrgt line break
• Lien
• ltagtlt/agt lta href"URL" title"additional
  information"gtlink textlt/agt
• Image et objet
• ltimg /gt, ltobjectgtlt/objectgt
• Bloc
• ltpgtlt/pgt paragraphe

20
Affichage du corps

• ltBODY BGCOLOR"purple"gtlt/BODYgt couleur de fond
• ltBODY BACKGROUND"../images/fond.gif"gt
• lt/BODYgt image de fond
• ltBODY TEXT"black"gtlt/BODYgt couleur du texte
• ltBODY LINK"navy"gtlt/BODYgt couleur des liens
• ltBODY VLINK"808080"gtlt/BODYgt couleur des liens
  visités
• ltBODY TOPMARGIN"50" BOTTOMMARGIN"50"
  LEFTMARGIN"40" RIGHTMARGIN"40" gtlt/BODYgt les
  marges

couleur un nom, trois
hexadécimal, un rgb(0-255,0-255,0-255)
21
Lien

• ltA HREF"adresse_destination"gt Texte_ou_image_à_cl
  iquer lt/Agt
• ltA HREF"intro.txt"gtIntroductionlt/Agt
  Introduction
• ltA HREF"html/intro.php3" TARGET"cadre1"gtltIMG
  SRC"images/a1.gif"gtlt/Agt
• Lien interne
• Départ ltA HREF"mot_clé"gtTexte_ou_image_à_cliqu
  erlt/Agt
• Arrivée ltA NAME"mot_clé"gtTexte_ou_imagelt/Agt
• Email
• ltA HREF"mailtocyberzoide_at_multimania.com"gt
  Ecrivez-moi lt/Agt Ecrivez-moi
• ltA HREF"mailtovotre_email?subject
  sujet_du_message"gt Texte_ou_image_à_cliquer lt/Agt
• ltA HREF"mailtovotre_email?body
  corps_du_message"gt Texte_ou_image_à_cliquer lt/Agt

22
Type de protocole pour un lien

• ltA HREF""gt
• HTTPltA HREF""gt
• ltA HREF"http//"gt
• ltA HREF"pnm//"gt
• ltA HREF"ftp//"gt
• ltA HREF"mailto"gt
• ltA HREF"news"gt
• ltA HREF"telnet//"gt
• ltA HREF"gopher//"gt plus désuet
• ltA HREF"wais//"gt plus désuet
• ltA HREF"file//"gt

23
Tableau

• Exemple un tableau de 3 lignes et 2 colonnes
  (bordure)
• ltTABLE BORDERgtltTRgt
• ltTDgtligne 1, colonne1lt/TDgtltTDgtligne1,
  colonne2lt/TDgt
• lt/TRgtltTRgt
• ltTDgtligne 2, colonne1lt/TDgtltTDgtligne 2,
  colonne2lt/TDgt
• lt/TRgtltTRgt
• ltTDgtligne 3, colonne1lt/TDgtltTDgtligne 3,
  colonne2lt/TDgt
• lt/TRgt
• lt/TABLEgt

24
Autres éléments de tableau

• ltCAPTIONgtlégende en haut
• lt/CAPTIONgt légende en haut
• ltCAPTION ALIGN"bottom"gtlégende en bas
• lt/CAPTIONgt légende en bas
• ltTRgtltTHgtcolonne 1lt/THgtltTHgtcolonne 2lt/THgt
• lt/TRgt définir les en-têtes des colonnes
• ltTABLE BORDER WIDTH100 HEIGHT100gt Taille
• ltTD VALIGN"top"gtaligné en haut
• lt/TDgt alignement dans la cellule dun tableau
• ltTABLE BORDER BGCOLOR"red"gt couleur de fond

25
Cadre

• ltFRAMESET ROWS"15,"gtltFRAME NAME"menu"
  SRC"menu0.php3"gtltFRAMESET COLS"50,"gt  
  ltFRAME NAME"sommaire" SRC"sommaire.php3"gt  
  ltFRAME NAME"article" SRC"article1.php3"gtlt/FRAME
  SETgt
• lt/FRAMESETgt
• menu primaire
• som-maire article

26
Formulaire

• ltFORM NAME"cyberformulaire" ACTION"mailtocyberz
  oide_at_chezmoi.com" METHOD"post"
  ENCTYPE"text/plain"gt le contenu du formulaire à
  envoyer par email à votre adresse emaillt/FORMgt
• Votre nom
• Votre nom ltINPUT TYPE"text" NAME"nom"
  SIZE"20" MAXLENGTH"30" VALUE"Isidor"gt
• Votre code secret
• Votre code secret ltINPUT TYPE"password"
  NAME"secret" SIZE"8" MAXLENGTH"8"gt
• Votre qualité ltBRgtltINPUT TYPE"radio"
  NAME"qualite" VALUE"M" CHECKEDgtMonsieurltBRgtltINP
  UT TYPE"radio" NAME"qualite" VALUE"Mme"gtMadamelt
  BRgtltINPUT TYPE"radio" NAME"qualite"
  VALUE"Mlle"gtMademoiselleltBRgt

Isidor

27
Image

• ltIMG SRC"adresse_de_l'image" NAME"nom_de_l'image
  " WIDTH"largeur" HEIGHT"hauteur"
  ALT"commentaire" BORDER"épaisseur_de_la_bordure"
  ALIGN"alignement" HSPACE"marge_horizonale"
  VSPACE"marge_verticale" USEMAP"nom_de_la_carte"
  gt.
• ltIMG SRC"images/logo.gif NAME"logo-html"
  WIDTH161 HEIGHT68 ALT"Le point sur les balises
  HTML" BORDER1 ALIGN"right" HSPACE20gt

28
Zone

• ltMAP NAME"bulles"gtltAREA SHAPE"circle"
  COORDS"50,50,40" HREF"bulles"gtlt/MAPgtltIMG
  SRC"images/map1.gif" WIDTH180 HEIGHT100
  BORDER0 USEMAP"bulles"gt

On peut cliquer ici
29
Feuille de style

• CSS Cascading Style Sheets
• Définir votre propre style pour chaque type de
  données
• Permet de faire un changement global
• Réutilisation
• Syntaxe
• ltBALISE style"propriétévaleur"gt
• Pour une seule instance
• ltH1 style"color FF0000"gt
• Le texte inclus dans ce conteneur ltH1gt sera de
  couleur rouge.
• Pour tout
• ltHEADgtltSTYLE type"text/css"gt    lt!--    BALISE
  propriétévaleur     --gtlt/STYLEgtlt/HEADgt
• Importer une feuille de style
• ltHEADgtltSTYLE type"text/css"gt_at_import
  url(adresse)lt/STYLEgtlt/HEADgt
• ltHEADgtltLINK href"adresse" rel"stylesheet"
  type"text/css"gtlt/HEADgt
• E.g. ltHEADgt ltLINK href"../styles/toto.css"
  rel"stylesheet" type"text/css"gt
  lt/HEADgt

30
Inclure du code JavaScript

• JavaScript un langage script qui sera exécuté
  suite à lactivation par lutilisateur (e.g. en
  bougeant le curseur, en cliquant, )
• Permet un certain dynamisme à la page
• Langage dérivé de Java
• Syntaxe pour inclure du code dans une page
• ltscript language"javascript"gtvotre code
  javascript icilt/scriptgt
• ltscript type"text/javascript"gtvotre code
  javascript icilt/scriptgt
• ltscript src"mon_script.js" type"text/javascript"
  /gt
• mon_script.js fichier qui contient le code

31
Premier exemple

• ltscript language"javascript"gtdocument.write('bon
  jour')lt/scriptgt
• Afficher  bonjour 
•  document  document courant
•  write 
• lta href"javascriptalert("Allo!")"gticilt/agt
• Afficher  Allo!  dans une petite fenêtre
  message
• lta href"javascriptconfirm("Daccord?")"gtQlt/agt
• OK, ANNULER

32
Variable

• ltscript language"javascript"gtvar ss
  'bonjour'document.write(s)lt/scriptgt
• Fait la même chose que le script précédent

33
Fonction

• ltscript language"javascript"gt
• function afficherBonjour()  s
  'bonjour' document.write(s)
• afficherBonjour()
• lt/scriptgt

Définition
Appel
34
Fonction avec un paramètre

• ltscript language"javascript"gt
• function afficher(i)
• document.write('ltpgtVotre nombre , i, ' est
  ')
• if (ilt100)
• document.write('inferieur a 100 ltbrgt')
• else
• document.write('superieur a 100 ltbrgt')
• afficher(25)
• afficher(125)
• lt/scriptgt

35
Afficher la date et lheure

• ltscript language"javascript"gttoday new
  Date()document.write("Nous sommes le",
  today.getDate(), "/", today.getMonth()1, "/",
  today.getFullYear(), ".ltbrgt")document.write("Il
  est ", today.getHours(), "", today.getMinutes(),
  "", today.getSeconds(),  ".ltbrgt")lt/scriptgt
• Nous sommes le 15/8/2007.
• Il est 0254.
• today une variable
• getDate() obtenir la date courante

today.getYear débute en 1900 sur certains
navigateurs!
today.getMonth retourne 0 pour janvier.
36
Rollover

• lta href"index.php3" onMouseOver"document.ex1.
  src'../images/milieu_.gif'" onMouseOut"document.
  ex1.src'../images/milieu.gif'"gt
• ltimg src"../images/milieu.gif" width"15"
  height"17" border"0" name"ex1" /gtlt/agt
• Changer une image à une autre selon la position
  du curseur

37
Popup

• lta href"javascriptvoid(0) " onClick"window.ope
  n(document.location, 'Mapopup',
  'width200,height300')"gtCliquez ici !lt/agt
• Paramètre de open
• l'URL de la page à ouvrir
• le titre que devra porter cette nouvelle fenêtre
• et divers paramètres
• void(0) permet le popup dêtre désactivé

38
Que fait ce code?

• ltscript language"javascript"gt
• function verif_email()
• if(document.inscription.email.value '')
• alert("Vous devez saisir votre adresse de
  messagerie électronique !")
• return false
• else
• return true
• lt/scriptgt
• ltform   action"mailtovous_at_labas.fr"
    method"POST"   enctype"text/plain"
    name"inscription"   onSubmit"return
  verif_email()"gt    Votre email ltinput
  type"text" name"email" /gt ltinput type"submit"
  value"Je m'abonne !" /gt
• lt/formgt

39
Caractères spéciaux

• Par défaut UTF-8 caractères sans accent
• Pour les caractères spéciaux nom
• accent grave grave
• accent aigu acute
• accent circonflexe circ
• cédille cedil
• tréma uml
• tilde tilde
• E.g.
• à agrave
• À Agrave
• ç ccedil
• é eacute
• É Eacute

40
Références

• HTML
• http//www.iro.umontreal.ca/pift6800/Cours/Cours4
  /HTML.htm
• http//www.iro.umontreal.ca/pift1146/default.htm
• http//www.iro.umontreal.ca/pift1945/