Langage balises

1
Langage à balises
Cours 7
Le langage html
É. Delozanne, M1-S2-IASV, Paris 5,
2004-05 Elisabeth.Delozanne_at_math-info.univ-paris5.
fr http//www.math-info.univ-paris5.fr/delozanne
/siteCoursIHM04/AccueilIhmISV.htm
2
Plan

• Introduction
• Internet et le Web
• Hypertexte
• HTML définition et environnement dexécution
• Le langage HTML
• Structure, Divisions, Listes, Styles
• Images, Mise en page
• Liens
• Feuilles de style
• Formulaires
• Tableaux
• Frame
• Méta-informations

3
Internet et le web

• Internet
• Historique
• Point technique
• le World Wide Web
• Historique
• Point technique

4
Internet Historique

• 1957 mise en place de l agence ARPA
  (Département de Défense Américain)
• but recherches scientifiques à des fins
  militaires
• 1962 établissement du schéma de base du futur
  réseau mondial
• 1969 bases du système TCP
• faire communiquer des machines de différents
  types
• 1971 naissance d'ARPANET avec la liaison de 4
  supercalculateurs
• e-mail
• 1972 une quarantaine de machines sur le réseau
• 1983 Utilisation d'Arpanet comme réseau de
  recherche
• 1000 machines connectées
• 1989 Internet se profile comme "Le" Réseau de
  recherche
• 1992 invention du WWW au Cern, 1 million de
  machines connectées

5
Caractéristiques du réseau de départ

• capable de résister à nimporte quelle attaque
  ennemie
• contexte de la Guerre Froide
• fonctionne quel que soit le type de machine
  utilisée
• ne doit pas être articulé autour d un "cerveau
  central"
• trop vulnérable
• concepts de base qui vont marquer ce que
  deviendra Internet
• Un réseau décentralisé
• Chaque machine peut parler avec n'importe quelle
  autre !

6
Apparition des premières applications

• Très vite
• courrier électronique (mail)
• forums (newsgroups)
• transfert de fichiers à distance
• FTP, File transfert Protocol
• puis, internationalisation du Réseau
• 1988 première connexion française au réseau
  mondial

7
INTERNET /--

• Avantages
• réseau immense et hétérogène
• international, informations de source directe
• esprit Internet ( Internet Spirit  )
• Disponibilité, gratuité, tout le monde peut
  participer
• Pas d'organisation centrale
• Utilisations multiples
• communication (courrier, chat etc.)
• distribution et échanges de fichiers
• travail interactif à distance
• commerce
• Inconvénients
• labyrinthe
• tout et nimporte quoi
• service non garanti

8
Qu'est-ce qu'INTERNET ?

• INTER-NET Interconnection of networks
• un réseaux de réseaux
• un réseau est composée de 3 couches
• Conducteurs Ex.
• téléphone (signal analogique)
• ISDN/RNIS (signal digital)
• Ethernet (coaxial)
• fibres optiques
• paquets de données protocoles de transfert Ex.
  
• TCP/IP
• Appletalk
• Services Ex.
• courrier électronique (mail, mél), news

9
Internet (2)?

• Différents réseaux
• Intranet, Renater, WWW
• Des machines (PC, Mac etc.) sont en réseau quand
  elles sont reliées entre elles par des liaisons
  réseau
• Des machines spéciales servent de portes d'accès
  entre les réseaux par exemple entre l'extérieur
  et les réseaux locaux (les "routers")
• Des convertisseurs de signaux sont nécessaires
  pour faire passer les paquets de données
  (numérique) dans les conducteurs
• par exemple
• un modem assure la traduction numérique/analogique

10
TCP/IP ?

• Chaque machine sur Internet est repérée par une
  adresse
• Son IP qui est un nombre
• les réseaux locaux ont des noms symboliques
  (wanadoo.fr ou www.math-info.univ-paris5.fr)
• La communication par ordinateur se fait par envoi
  de messages morcelés en paquets de données
• Le protocole internet (IP) permet d'envoyer un
  paquet de données via les nuds du réseau
• un paquet possède
• une adresse d'émetteur,
• une adresse de destinataire,
• un numéro de position (par rapport au message
  entier)
• une partie données
• TCP (Transfer Control Protocol) assure que tous
  les paquets d'un message arrivent

11
TCP/IP ?

• TCP Transmission Control Protocol
• IP Internet Protocol
• TCP/IP est le protocole de communication entre
  les machines de lInternet
• Chaque ordinateur a une adresse unique au monde
  son adresse IP ex
  129.88.32.30suite de 4 entiers compris entre 0
  et 255

12
Adresse symbolique dune machine

• Forme domainisée du nom dune machine
• www.math-info.univ-paris5.fr

Nom de la machine sur le réseau local
nom du top level domain
noms de pays de, uk,it,jp ou gov, edu,
com par défaut org
Nom de lorganisation
13
Le routage des messages

• Chaque message est découpé en paquets
  dinformations (datagrammes) qui contiennent
  outre les données à transmettre, le nom de la
  machine de départ et celle darrivée
• Les machines intermédiaires (ROUTEURS) décident
  à la réception dun paquet, vers quelle autre
  machine intermédiaire le transmettre
• Le chemin que suit un paquet nest pas déterminé
  au départ, mais construit de proche en proche

14
Par où passent les octets (1)
15
Par où passent les octets (2)
16
WWW en trois perspectives

• Intégrateur d'informations
• toutes les ressources sur le web ont une adresse
  URL
• pour accéder à un fichier, un service, un
  programme, il suffit de connaître son adresse
  (son URL)
• Hypertexte distribué
• un hypertexte est un document (texte, image)
  relié à d'autres documents par des liens
• les documents sont localisés n'importe où sur le
  réseau et accessibles à partir de leur adresse
• cet hypertexte est construit dans un langage HTML
  (Hypertext Markup Language)
• le protocole pour transférer cet hypertext sur le
  réseau s'appelle HTTP (HyperText Transfert
  Protocol)
• Interface pour un programme quelconque
• Il suffit de cliquer sur un lien pour accéder à
  une ressource

17
Le (World Wide)Web

• Le WWW est un hypertexte particulier
• dont chaque page est un fichier au format HTML
  (Hyper Text Markup Language) se trouvant sur le
  disque dur de certaines machines dInternet
  appelées serveurs WEB (ou hôtes)
• Lensemble des pages WEB localisées sur un même
  serveur sappelle un site WEB
• Pour naviguer (surfer) sur le WEB, on utilise
  sur sa machine un logiciel appelé Navigateur
  (browser)
• Celui-ci est un logiciel client qui permet
• de télécharger les pages WEB se trouvant sur les
  serveurs WEB
• et de les visualiser sur sa machine
• Pour que la machine cliente envoie une requête à
  un serveur il suffit que lutilisateur clique sur
  un lien de la page courante

18
W3 Historique

• 1989 1ier prototype au CERN (Tim Berners Lee)
• Début des années 1990 connexion au Réseau du
  grand public
• 1991
• apparition des premiers fournisseurs d'accès à
  Internet (providers)
• popularisation d'Internet avec l'invention du
  World Wide Web (au CERN)
• 1991 à 1993 augmentation de 340 du trafic sur
  Internet
• 1993 L'utilisation du Web devient simple
  (Mosaic)
• 1995 Premières commercialisations
• 1996 Consolidation ( gt 50 Millions
  d'utilisateurs)
• 1998 Banalisation
• A l'origine Internet surtout utilisé par les
  universitaires
• Aujourd'hui
• plusieurs millions d'ordinateurs dans plus de 200
  pays
• nouveau mode de socialisation

19
Les serveurs

• définition
• un ordinateur (ou un programme) qui met à
  disposition ses ressources pour d'autres
  ordinateurs (ou programmes) qui sont appelés
  clients
• exemples
• les serveurs www
• mettent des informations à disposition pour un
  "browser"
• les serveurs de courrier (Mail Servers)
• permettent de recevoir et d'envoyer des courriers
  électroniques
• pour être accessible un serveur est allumé (et
  connecté) 24 H/24

20
Architecture client serveur
Serveur
Client
requête
ressource

• Le logiciel client
• appelle un serveur et émet des requêtes
• Le logiciel serveur
• attend les commandes des clients et fournit les
  ressources
• Le protocole de communication dépend du type de
  service
• http pour le Web
• smtp pour le mail
• ftp pour le transfert de fichiers

21
Le concept dhypertexte
Inventé par Vannevar Bush (1945)
page 1
page 8
page 5
qsfqf sqfsfqsf sfsf aller page 8 qsfsf
qsfqf sqfsfqsf sfsf aller page 5 qsfsf
qsfqf sqfsfqsf sfsf aller page 1 qsfsf
Des liens (links) permettent de naviguer
dune page à une autre plusieurs chemins de
lecture possibles navigation Le concept a été
étendu à des types de documents différents
(texte, vidéo, image etc.)
22
URL ?
Chaque page du WEB ( un fichier au format HTML)
a un nom unique au monde son adresse sur le web,
son URL (Uniform Resource Locator)
/public/enseignants/toto.html
http//www.math-info.univ-paris5.fr
adresse IP du serveur WEB
chemin daccès au fichier HTML sur le disque
dur du serveur WEB
préfixe indiquant le type de protocole HyperTextTr
ansferProtocol
Attention pas despaces entre les caractères !!
23
Plan

• Introduction
• Internet et le Web
• Hypertexte
• HTML définition et environnement dexécution
• Le langage HTML
• Structure, Divisions, Listes, Styles
• Images, Mise en page
• Liens
• Feuilles de style
• Formulaires
• Tableaux
• Frame
• Méta-informations

24
HTML ?

• HTML Hypertext Markup Language
• Est le format utilisé pour les documents diffusés
  par les serveurs web
• Cest un ensemble de commande
• De structuration
• Et de formatage des documents pour le Web
• Cest un langage de balises (tag en anglais)
• Source html chacune des différentes structures
  est encadrée par une balise de début et une
  balise de fin qui caractérise la structure et
  décrit sa présentation dans un navigateur
• Ces commandes sont interprétées par un navigateur
  qui affiche le document à lécran

25
Créer un document HTML

• Avec un éditeur de texte quelconque
• Avec un traitement de texte en sauvegardant au
  format html
• Génère du code très lourd
• Rédiger un texte imprimé très différent texte
  écran
• Problèmes
• génère du code lourd
• difficulté d'introduire des éléments interactifs
• pas d'analyse structurelle du fichier
• pas toujours compatible avec les 2 principaux
  navigateurs
• Avec un éditeur spécialisé
• 1st Page 2000 gratuit, très complet, niveau
  débutant et expert
• www.evrsoft.com/
• Avec un programme de création de sites web
• Wysiwyg
• Ne nécessite pas de rédiger du html qui est
  généré automatiquement
• Ex. Frontpage, Dreamweaver, Golive

26
HTML Historique

• Inventé par Tim Berners Lee (CERN) vers 1990
• Application de SGML (Standard Markup Generalized
  Markup Language)
• Langage en évolution sous légide du consortium
  W3C
• Actuellement HTML 4.0 (depuis 97)
• Spécifications à
• http//www.w3.org/TR/html4
• Norme HTML
• World Wide Web Consortium (W3C)
• http//www.w3.org

27
Ma première page HTML

• ltHTMLgt
• ltHEADgt
• ltTITLEgt Ma première page HTMLlt/TITLEgt
• lt/HEADgt
• ltBODYgt lth1gt Hello world lt/h1gt
• lt/BODYgt
• lt/HTMLgt

28
Word to HTML

• / 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-family"Times New Roman"
• _at_page Section1
• size595.3pt 841.9pt
• margin70.85pt 70.85pt 70.85pt 70.85pt
• mso-header-margin35.4pt
• mso-footer-margin35.4pt
• mso-paper-source0
• div.Section1
• pageSection1
• --gt
• lt/stylegt

• 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"Hello20world_fichiers/f
  ilelist.xml"gt
• lttitlegtHello worldlt/titlegt
• lt!--if gte mso 9gtltxmlgt
• ltoDocumentPropertiesgt
• ltoAuthorgtLIUMlt/oAuthorgt
• ltoTemplategtNormallt/oTemplategt
• ltoLastAuthorgtLIUMlt/oLastAuthorgt
• ltoRevisiongt1lt/oRevisiongt
• ltoTotalTimegt1lt/oTotalTimegt
• ltoCreatedgt2003-11-11T155500Zlt/oCreatedgt

29
Pour créer un fichier html

• Ouvrir un éditeur de texte
• Écrire le code Html
• Enregistrer au format html (par ex. toto.html)
• Ouvrir un navigateur
• Dans le menu fichier, ouvrir et sélectionner le
  fichier (ex. toto.html)
• Le document saffiche dans le navigateur

30
Les balises

• délimitées par les caractères lt et gt
• généralement une balise ouvrante et une balise
  fermante
• ltbalisegt et lt/balisegt
• les balises vides ne nécessitent pas de balise
  fermante
• ltbalisevide/gt
• pas de distinction minuscules/majuscules dans les
  balises
• Conseils pour la lisibilité
• Écrire les balises en majuscules
• Indenter les programmes
• Commentaires
• syntaxe lt!--ceci est un commentaire --gt
• mais
• lt!-- Attention -- ceci nest pas valide! --gt
• ltP -- ceci non plus! --gt

31
Attributs des balises

• Certaines balises admettent des attributs
• séparés par des espaces
• s'il y a une valeur attribut valeur
• si la valeur est alphanumérique, il faut la
  mettre entre " " (guillemets)
• Ex
• ltpre width50gt
• lta href "/home/default.html"gt

32
Caractères

• ASCII 7 bits
• En France nous utilisons le jeu de caractères
• Latin 1 dont les codes de remplacement sont
  donnés par ISO-8559-1
• lettres accentuées et autres symboles
• utilisation de codage obligatoire pour affichage
  correct sur les navigateurs étrangers
• é -gt eacute ê -gt ecirc
• Des utilitaires de nettoyage (Tidy) remplace les
  caractères spéciaux par leur code
• Échappement de caractère
• lt lt
• gt gt
• " quot
• procédé général pour utiliser les symboles
  réservés

33
Codage des caractères
34
Structure minimale d'un document

• ltHTMLgt
• ltHEADgt
• ltTITLEgt . lt/TITLEgt
• lt/HEADgt
• ltBODYgt .
• lt/BODYgt
• lt/HTMLgt
• ltHTMLgt balise de début obligatoire
• lt/HTMLgt balise de fin obligatoire

35
Une section de déclaration la Tête

• Head
• Title
• Obligatoire
• Le titre est celui qui s'affichera dans la barre
  de titre de la fenêtre dans le navigateur
• Meta
• Facultative
• Utilisée par les moteurs de recherche
• ltHEADgt
• ltTITLEgt exemple HTML 4.0lt/TITLEgt
• ltMETA name"Author" content"Elisabeth
  Delozanne"gt
• lt/HEADgt

36
Le corps du document

• Tout ce qui est entre ltBODYgt et lt/BODY/gt sera
  affiché par le navigateur
• Composé de 2 catégories d'éléments
• Les blocs (qui produisent des ruptures de
  paragraphes)
• Le texte
• Attributs de BODY
• BACKGROUND une image de fond dans la page
• BGCOLOR couleur de l'arrière plan
• TEXT couleur du text
• LINK couleur des liens
• ALINK couleur des liens sélectionnés
• VLINK couleur des liens déjà visités
• BG SOUND pour insérer un son en fond de page
• AUTOSTART"True or False" permet de déclarer le
  lancement du son à l'ouverture de la page.
• LOOP"un nombre " permet de déterminer le nombre
  de fois où le son va être joué. La valeur -1
  signifie que le son sera répété à l'infini

37
Exemples

• ltBODY BACKGROUND"cahier.gif"gt
• ltBODY BGCOLOR"000000" TEXT"FFFFFF"
  LINK"FF00FF"gt
• Le fond sera noir, le texte blanc et les liens en
  rose
• ltBG SOUND"son.wav" AUTOSTART"true" LOOP"-1"gt
• Le son est répété à l'infini

38
Titres, Paragraphes et lignes

• Niveaux de titres
• ltH1gt à ltH6gt (et lt/H1gt à lt/H6gt)
• Paragraphes
• ltPgt et lt/Pgt
• Ligne vide
• ltHR /gt balise finale intégrée
• Saut de ligne
• ltBR /gt balise finale intégrée

39
Mise en forme des paragraphes

• Attributs des titres, lignes et paragraphes
• ALIGN"left" ou "right" ou "center" ou "justify"
• ltP ALIGN "right"gt
• WIDTH valeur
• Valeur absolue en pixels
• ltHR WIDTH"300" ALIGN "left"gt
• Valeur relative en de la largeur de la fenêtre
• ltHR WIDTH"30" ALIGN "left"gt

40
Plan

• Introduction
• Internet et le Web
• Hypertexte
• HTML définition et environnement dexécution
• Le langage HTML
• Structure, Divisions
• Listes, Styles
• Images, Mise en page, Liens,
• Feuilles de style
• Formulaires
• Tableaux
• Frame
• Méta-informations

41
Listes

• Exemples des trois types de listes

42
Listes
lth4gtListe descriptive lt/h4gt ltdlgt ltdtgtCafélt/dtgt ltdd
gtnoir ou avec laitlt/ddgt ltdtgtthélt/dtgt ltddgtsucré ou
nonlt/ddgt lt/dlgt ltBRgt lth4gtListe numérotée
lt/h4gt ltolgt ltligtCafélt/ligt ltligtLaitlt/ligt lt/olgt
lth4gtListe non numérotée lt/h4gt ltulgt
ltligtCafélt/ligt ltligtThélt/ligt ltligtLaitlt/ligt lt/ulgt
ltBRgt

• Listes descriptives (descriptive list) avec titre
  et définition
• ltDLgt et lt/DLgt
• Les titres sont placés entre
• ltDTgt et lt/DTgt
• Les définitions sont placées entre
• ltDDgt et lt/DDgt
• Listes numérotées (ordered list OL)
• ltOLgt et lt/OLgt
• Listes à puces (unordered list UL)
• ltULgt et lt/ULgt
• Dans ces 2 cas, les différents éléments de la
  liste sont placés entre les balises
• ltLIgt et lt/LIgt

43
Mise en forme du texte

• Police
• ltFONTgt et lt/FONTgt
• Attributs FACE, SIZE, COLOR
• Style
• ltBgt et lt/Bgt (bold, gras),
• ltIgt et lt/Igt (italic),
• ltUgt et lt/Ugt (underlign, souligné)
• Exemples
• ltBgtltFONT SIZE1gtBienvenue.lt/FONTgtlt/Bgt
•  Le texte est centré (par défaut), en gras avec
  une police d'une taille supérieure à la taille
  standard
• ltFONT FACE"arial" SIZE"3"gt
• type et taille de police
• ltFONT COLOR"YELLOW"gtou COLOR"RRVVBB" lt/FONTgt
• couleur de police

44
Les images

• Formats standards
• GIF (Graphics Interchange Format)
• JPEG (Joint Picture Group)
• Insertion d'une image
• Balise IMG et attribut SRC obligatoire
• ltIMG SRC chemin absolu ou chemin relatifgt
• Attributs
• ALIGN TOP, MIDDLE OU BOTTOM
• aligne la partie de l'image désignée sur la ligne
  de texte
• LEFT et RIGHT met du texte à côté de l'image
• WIDTH et HEIGHT redéfinit la taille de l'image
• HSPACE et VSPACE détermine l'espace autour de
  l'image
• BORDER met un cadre noir autour de l'image
• Navigateur non graphique
• Attribut ALT permet d'insérer un texte à la
  place de l'image

45
Exemple

• lthtmlgt
• ltheadgt
• lttitlegt mon premier album photo
• lt/titlegt
• lt/headgt
• ltbodygt
• lth4gtVivent les vacances lt/h4gt
• ltpgt Voici une photo renversante.lt/pgt
• ltimg src"indianaj.jpg" align "left"
• alt "sur cette photo notre professeure
• suspendue au-dessus du vide"/gt
• ltpgt Remarquez que le texte habille
• l'image par la droite lt/Pgt
• lt/bodygt
• lt/htmlgt

46
Plan

• Introduction
• Internet et le Web
• Hypertexte
• HTML définition et environnement dexécution
• Le langage HTML
• Structure, Divisions, Listes, Styles
• Images, Mise en page
• Liens
• Feuilles de style
• Formulaires
• Tableaux
• Frame
• Méta-informations

47
Les liens

• Un hypertexte
• ensemble de documents reliés par des liens
• Un lien
• spécifié par une ancre (anchor) de départ et une
  ancre d'arrivée
• Ancre de départ
• Zone active sur laquelle l'utilisateur va cliquer
  pour accéder à une nouvelle page (texte ou image)
• Ancre d'arrivée
• Zone inactive qui constitue le point de
  destination d'un lien hypertexte
• Une adresse (Lien externe)
• Une étiquette (Lien interne)
• Plusieurs cas
• Lien vers des pages html de votre site ou non
• Lien vers un fichier
• Renvoi au sein de la même page
• Lien vers un service web (client de courriel etc.)

48
Liens vers d'autres pages web

• Balise ltAgt (Anchor)
• Un lien vers une page d'un autre site
• lta href"http//www.math-info.univ-paris5.fr/"gtUFR
  de Mathématiques et d'informatiquelt/agt
• Un lien vers une page de mon site
• lta href"Ma premierepage.html"gtPour admirer ma
  première pagelt/agt
• Conseil
• donnez une adresse relative
• prévoir la navigation dans votre site
• Un lien graphique
• lta href"http//www.australie.com.au/french/home.h
  tml"gt ltIMG SRC"kangourou.jpg" width"80"
  height"80"/gtlt/agt

49
Lien vers un autre fichier, un service

• Vers un fichier
• Pour mettre à disposition des fichiers,
  l'internaute n'aura qu'à cliquer sur le lien pour
  télécharger le fichier
• lta href"Balise-html.doc"gt
• La liste des balises html (.doc, 75 Ko)lt/agt
• ltpgtUn lien graphique vers une image Cliquez sur
  la vignette pour la voir s'agrandirlta
  href"kangourou.jpg"gt ltIMG SRC"kangourou.jpg"
  width"80" height"80"/gtlt/agt lt/pgt
• Conseils
• Indiquer à l'utilisateur
• Le type du fichier et sa taille
• Une indication sur son contenu
• Vers un service
• Exemple courrier électronique
• lta href"mailtoelisabeth.delozanne_at_math-info.univ
  -paris5.fr"gt Contactez-moilt/agt

50
Renvois sur une même page

• Définir un point d'ancrage
• Placer à l'endroit où vous voulez pouvoir arriver
  une balise d'ancre avec l'attribut name
• Par exemple définir une ancre en haut de la page
  et l'appeler haut
• Placer à l'endroit où vous voulez pouvoir cliquer
  pour vous rendre à ce point d'ancrage une balise
  d'ancre avec l'attribut herf, le nom de la cible
  étant précédé d'un pour indiquer qu'il s'agit
  d'une étiquette dans la page
• ltbodygtlta name"haut"gtlt/agt
• ..
• lta href"haut"gtHautlt/agt
• lt/bodygt
• lt/htmlgt

51
Plan

• Introduction
• Internet et le Web
• Hypertexte
• HTML définition et environnement dexécution
• Le langage HTML
• Structure, Divisions, Listes, Styles
• Liens, Images, Mise en page
• Feuilles de style
• Formulaires
• Tableaux
• Frame
• Méta-informations

52
Feuilles de style (Cascading Style Sheets CSS)

• Idée de base
• Distinguer le fond et la forme
• Séparer la présentation d'un document du document
  lui-même
• Intérêt
• Permet de définir en un seul endroit la mise en
  forme et la présentation de plusieurs pages web
• Charte graphique
• Homogénéité du site
• Modifier le look partout
• Principe
• Créer une feuille de style externe ou interne qui
  définit les propriétés de certaines balises
• Lier les pages web avec les feuilles de style
  correspondantes
• Ex http//mammouthland.free.fr/index.php

53
Créer une feuille de style

• Deux normes CSS et Javascript
• CSS
• Un style se définit par le nom de la balise,
  suivi entre des propriétés de cette balise
• On peut définir
• un style pour plusieurs balises séparées par des
  virgules
• des styles contextuels indiquer qu'un style ne
  s'applique à une balise que si elle est incluse
  dans une autre balise celles-ci sont alors
  séparées par des espaces
• H1 P colorred
• Les paragraphes sont écrits en rouge que
  lorsqu'ils sont dans une balise H1

54
Exemple

• html,body background-color white
• p,ul,li,td font-size 100 font-family
  Verdana, Arial,
• Helvetica, sans-serif color black
  background-color white

h1 font-size 200 font-family Verdana,
Arial, Helvetica, sans-serifcolor navy
text-align center
55
Lier la feuille de style à une page web

• Enregistrer la feuille de style dans un fichier
  .css
• Par exemple
• "Mafeuilledestyle.css"
• Dans chaque page web où vous voulez appliquer la
  feuille de style, insérer entre les balises
  ltHEADgt et lt/HEADgt
• Balise LINK
• permet de référencer des fichiers externes
• Attribut REL"stylesheet"
• Indique que le fichier est une feuille de style
• Attribut TYPE
• Indique la norme de définitions de styles (CSS ou
  JavaScript)
• ltlink href"Mafeuilledestyle.css"
  rel"stylesheet" type"text/css"gt

56
Classes de styles l'attribut CLASS

• Pour appliquer un style particulier à certains
  éléments d'une page web, créer une classe de
  balise particulière
• Exemple pour le paragraphe d'introduction et
  pour les paragraphes importants définir un style
  différent des autres paragraphes
• (balise P)
• définir des classes de balise
• P.intro
• P.important
• Définition du style
• P.introfont-styleitalic text-aligncenter
• Utilisation l'attribut class
• ltp class"intro"gtblablablalt/pgt
• Classe générique
• .rouge colorred
• lth1 class"rouge"gtce titre s'affichera en
  rougelt/h1gt
• lth1 class"intro"gtce titre ne sera ni italic ni
  centré car intro ne s'applique qu'aux balise
  Plt/h1gt

57
Sous classes de style l'attribut ID

• Cet attribut est utilisé
• pour réaliser une exception
• Ou bien seul et dans ce cas il se comporte comme
  une classe
• Exemple
• Dans la feuille de style
• .principalcolorred font-size 20pt
• vert colorgreen
• Pbleucolorblue (bleu ne s'applique qu'aux P)
• Dans le fichier html
• ltP class"principal"gt ce texte sera rouge et en
  20lt/Pgt
• ltP class"principal" ID"vert"gt ce texte sera
  vert et en 20lt/Pgt
• ltP IDvertgt ce texte sera vert et utilise la
  police par défautlt/Pgt

58
A l'extérieur de balise

• La balise SPAN permet d'appliquer un style pour
  une partie non balisée
• Exemple
• ltPgt Une ltSPAN CLASS"nouveauTerme"gt feuille de
  style interne lt/SPANgt fait partie intégrante
  d'une page web. Une ltSPAN CLASS"nouveauTerme"gt
  feuille de style externe lt/SPANgt est mémorisée
  dans un fichier indépendant et peut s'appliquer à
  plusieurs pages web lt/Pgt
• SPAN.nouveauTerme font-weightboldfont-styleita
  lic

59
CSS, propriétés (1)

• pour la police de caractères
• font-size (en pts), font-style (normal, italic,
  oblique), font-family, font-weight, font-stretch,
  font-variant (normal ou petites capitales),
  font-size-adjust (none, number)
• pour les textes
• color, direction (IE5.0, rtl,ltr),
  letter-spacing, line-height, text-align,
  text-indent, text-decoration(none, underline,
  overline, line-through, blink), text-transform
  (none, capitalize, uppercase, lowercase),
  word-spacing
• pour les marges
• margin (marge d'un bloc)
• ou margin-right, margin-left, margin-top,
  margin-bottom

60
CSS, propriétés (2)

• Pour les côtés un par un
• border-bottom
• ou border-bottom-color border-bottom-style
  border-bottom-width
• border-left
• ou border-left-color border-left-style
  border-left-width
• border-right
• ou border-right-color border-right-style
  border-right-width
• border-top
• ou border-top-color border-top-style
  border-top-width
• Pour les 4 côtés (en même temps ou on donne 4
  valeurs)
• border
• ou border-width border-color border-style
  (valeur none hidden dotted dashed solid double
  groove ridge inset outset)

61
CSS, propriétés (3)

• pour les marges intérieures
• padding (marge à l'intérieur d'un bloc)
• padding-right, padding-left, padding-top,
  padding-bottom
• pour l'arrière plan
• background (pour l'ensemble des propriétés)
• background-color (color-rgb color-hex color-name,
  transparent)
• background-image ( url none)
• background-repeat (repeat repeat-x repeat-y
  no-repeat)
• background-attachment (fixed or scrolls)
• background-position
• top left top center top right center left center
  center center right bottom left bottom center
  bottom right x- y- x-pos y-pos

62
CSS propriétés (4)

• pour les dimensions d'un élément
• height (auto length )
• line-height (normal number length )
• max-height (none length )
• max-width (none length )
• min-height (length )
• min-width (length )
• width (auto length )
• pour le positionnement
• left (auto length) right (auto
  length)
• top (auto length) bottom (auto
  length)
• clip (shape auto )
• overflow (visible hidden scroll auto )
• vertical-align (baseline sub super top text-top
  middle bottom text-bottom length )

63
Encadrement

• Attribut border
• Définit les 3 propriétés et s'applique à tous les
  côtés
• Exemple
• p border thin dotted 00FF00
• Attribut border-bottom
• Définit les 3 propriétés
• S'applique qu'à la ligne du bas
• Exemple
• table border-bottom thin dotted 00FF00
• Attribut border-bottom-color
• S'applique qu'à la ligne en bas
• Ne définit qu'une propriété
• table border-bottom-color ff3366

64
Plan

• Introduction
• Internet et le Web
• Hypertexte
• HTML définition et environnement dexécution
• Le langage HTML
• Structure, Divisions, Listes, Styles
• Liens, Images, Mise en page
• Feuilles de style
• Formulaires
• Tableaux
• Frame
• Méta-informations

65
Les formulaires

• Zones de dialogue
• sur le poste client vérification de la saisie
  avec JavaScript
• sur le poste serveur script CGI en C, Perl,
  PHP, Tcl,...
• 3 catégories d'éléments input, select, textarea
• Balise ltFORMgt
• Attributs
• METHOD ( valeur GET ou POST) indique la méthode
  de transfert
• ACTION contient l'URL du script CGI à exécuter
• NAME indique le nom du formulaire
• TARGET indique la fenêtre ou la frame dans
  laquelle s'affiche la page résultat

66
Composants d'un formulaire (1)

• Balise ltINPUTgt
• Attributs
• TYPE TEXT zone d'entrée simple
• TYPE PASSWORD zone d'entrée confidentielle
• TYPE SUBMIT bouton pour envoyer les champs
  du formulaire
• TYPE CHECKBOX zone de cases à cocher
• TYPE RADIO bouton radio
• TYPE RESET effacer toutes les données
  saisies
• TYPE BUTTON pour lancer un script JavaScript
  (pas de valeur envoyée au serveur)
• TYPE HIDDEN pour passer des valeurs d'un
  formulaire à un autre sans les montrer

67
Exemple (1) bouton

• ltFORMgtltINPUT type"button" value"Maths-Info-P5"
  onclick"window.location.hrefhttp//www.math-info
  .univ-paris5.fr/"gt
• lt/FORMgt

68
Composants d'un formulaire (2)

• Balises ltSELECTgt et ltOPTIONgt
• création de listes à choix simple ou à choix
  multiples
• la balise ltOPTIONgt permet de définir chaque item
  de la liste
• Attribut SIZE
• si la valeur est inférieure à 2 menu déroulant
• sinon fenêtre avec ascenseur
• Attribut MULTIPLE pour permettre des choix
  multiples
• Balise ltTEXTAREAgt
• création d'une fenêtre avec ascenseurs
• Attribut ROWS et COLS
• comportement identique à celui du type TEXT

69
Exemple (2) saisie de texte

• ltH2gt Simple ligne de texte lt/H2gt
• ltINPUT type"text" NAME"A-remplir"gtltBRgt
• ltH2gt Zone de texte plus grande lt/H2gt
• lttextarea NAME"A-remplir" rows"4" value"tapez
  votre texte"gt lt/textareagt ltBRgt
• ltH3gt Entrée de type password" lt/H3gt
• ltINPUT type"password" NAME"code-secret"gt

70
Exemple (3) case à cocher, boutons

• Choisissez une ou plusieurs valeurs ltBRgt
• ltINPUT type"checkbox" NAME"A-cocher" value"
  Paris"gtParisltBRgt
• ltINPUT type"checkbox" NAME"A-cocher" value"
  Lille"gtLilleltBRgtltBRgt
• ltINPUT type"button" NAME"B2" value"clicker sur
  le bouton"
• onClick"sayaurevoir()"/gtltBRgtltBRgt
• ltINPUT type"reset" NAME"init" value"remise à
  zéro"gtltBRgt
• ltINPUT type"hidden" NAME"pas-vu"gtltBRgt
• lt!--
• function sayaurevoir ()
• alert("fin !")
• close()
• //--gt

71
Listes

• 2 types de listes
• listes à ascenseur
• type gt1 ou attribut multiple
• plusieurs choix possibles
• menus déroulants
• type 1 ou non présent
• 1 seul choix possible
• ltH3gt Choisissez une ou plusieurs options lt/H3gt
• ltSELECT NAMEsélectionner-1" multiple gt
• ltoptiongt Math ltoptiongt Informatique
• ltoptiongt Anglais lt/SELECTgt
• ltH3gt Choisissez une seule option lt/H3gt
• ltSELECT NAMEsélectionner-2" gt
• ltoptiongt Math ltoptiongt Informatique
• ltoptiongt Anglais lt/SELECTgt

72
Traitement du formulaire

• 2 solutions
• Par CGI ou par courriel
• Programme CGI (Common Gateway Interface)
• Terme pour désigner les programmes installés sur
  un serveur web et réagissant de façon interactive
  aux saisies de l'utilisateur
• Écrits en Perl, en C, en Tcl, en Ruby
• Exemple L'éditeur 1st Page fournit toutes une
  bibliothèques de scripts prédéfinis
• Si votre hébergeur ne vous autorise pas à
  installer des scripts CGI, vous pouvez vous faire
  envoyer le contenu du formulaire par courriel
• ltform action mailtomonadresse_at_serveur.fr
  method"post" enctype"text/plain"gt

73
Formulaires et CGI

• Encodage des données
• Construction d'une chaîne de caractères
• contenant l'ensemble des couples (nom du champ,
  valeur saisie)
• séparateur entre les couples
• séparateur entre le nom du champ et la valeur
• Chaîne URL-encodée
• espaces remplacés par des
• caractères spéciaux remplacés par leur valeur
  hexadécimale xx
• Décodage de la chaîne
• Utilisation de libairies communes pour les 2
  méthodes
• en Perl cgi-lib.pl (http//wwwbio.cam.ac.uk/we
  b/form.html)
• en Tcl tcl-cgi (http//ruulst.let.ruu.nl2000/tc
  l-cgi-1.1.tar.gz)
• en C libcgi (http//wsk.eit.com/wsk/dist/doc/lki
  bcgi/libcgi.html)

74
Plan

• Introduction
• Internet et le Web
• Hypertexte
• HTML définition et environnement dexécution
• Le langage HTML
• Structure, Divisions, Listes, Styles
• Liens, Images, Mise en page
• Feuilles de style
• Formulaires
• Tableaux
• Frame
• Méta-informations

75
Les tableaux (1)

• Création
• Balise ltTABLEgt
• Attributs
• BORDER
• CELLSPACING
• WIDTH
• définit la largeur du tableau relativement à
  celle du navigateur
• BGCOLOR
• Création des lignes
• Balise ltTRgt
• Attributs
• VALIGN Alignement vertical
• valeurs possibles TOP, BOTTOM, MIDDLE
• ALIGN Alignement horizontal
• valeurs possibles RIGHT, LEFT, CENTER

76
Les tableaux (2)

• Création des colonnes
• Balise ltTDgt
• donc, une cellule du tableau puisque cela vient
  après la ligne
• Attributs
• VALIGN et ALIGN
• COLSPAN et ROWSPAN
• regroupe plusieurs cellules en une seule
• NOWRAP
• empêche de diviser le texte de la cellule en
  plusieurs lignes
• Titre d'un tableau
• Balise ltCAPTIONgt
• Attribut ALIGN avec les valeurs TOP ou BOTTOM
• Remarque
• les éditeurs spécialisés sont très efficaces pour
  créer des tableaux

77
Plan

• Introduction
• Internet et le Web
• Hypertexte
• HTML définition et environnement dexécution
• Le langage HTML
• Structure, Divisions, Listes, Styles
• Liens, Images, Mise en page
• Feuilles de style
• Formulaires
• Tableaux
• Frame
• Méta-informations

78
Les frames (1)

• Découpage d'une fenêtre en frames
• Document HTML spécifique ne pouvant contenir que
  3 balises
• FRAMESET
• FRAME
• NOFRAMES
• Le contenu des frames est défini par d'autres
  fichiers HTML
• Balise ltFRAMESETgt
• Attributs
• ROWS hauteur1, hauteur2,...hauteur-n
• COLS largeur1, largeur2,...largeur-n
• Pour les navigateurs ne gérant pas les frames
• Balise ltNOFRAMESgt
• indiquer le texte que doivent afficher les
  navigateurs incapables de gérer les frames

79
Exemple

• ltHTMLgt
• ltHEADgtlt/HEADgt
• ltFRAMESET ROWS"30,70"gt
• ltFRAMEgt
• ltFRAMEgt
• lt/FRAMESETgt
• lt/HTMLgt
• ltFRAMESET ROWS"30,70"gt
• ltFRAME SRC"A.htm"gt
• ltFRAMEgt
• ltFRAMESET COLS"30,70"gt
• ltFRAME SRC"B.htm"gt
• ltFRAME SRC"C.htm"NAME"fenetreC"gt
• lt/FRAMESETgt
• lt/FRAMESETgt

80
Configuration des frames

• Balise ltFRAMEgt
• Attributs
• SRC URL indique le document à afficher dans
  la frame
• NAME nom indique le nom de la frame.
• Indispensable pour que la frame puisse être
  utilisée comme cible d'un lien hypertexte
• MARGINWIDTH et MARGINHEIGHT définissent
  l'espace entre le document et les bords de la
  frame
• SCROLLING yes ou no ou auto
• NORESIZE indique à l'utilisateur qu'il est
  impossible de redimensionner la frame

81
Tableau ou frame
82
Page avec Frame

• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
  Transitional//EN"gt lt!-- saved from
  url(0054)http//devernay.free.fr/cours/internet/h
  tml/sitef.html --gt lt?xml version"1.0"
  encoding"iso-8859-1"?gtlthtml langen
  xmllang"en" xmlns"http//www.w3.org/TR/1999/REC
  -html-in-xml"gt
• ltheadgtlttitlegtExemple de site avec frameslt/titlegt
  ltmeta content"MSHTML 5.00.3502.5390"
  nameGENERATORgt ltmeta content"text/html
  charsetiso-8859-1" http-equivContent-Typegtlt/head
  gt
• ltframeset border0 frameBorder0 frameSpacing0
  rows50,gtltframe frameBorder0 nametitre
  scrollingno src"Exemple de site avec
  frames_fichiers/siteftitre.htm"gtltframeset
  cols20,gtltframe frameBorder0 nametdm
  src"Exemple de site avec frames_fichiers/siteftdm
  .htm"gtltframe frameBorder0 namecontenu
  src"Exemple de site avec frames_fichiers/sitefcon
  tenu.htm"gtlt/framesetgtltnoframesgt
• ltbodygt ltpgtCet ensemble de frames contient lt/pgt
  ltulgt ltligtlta href"siteftitre.html"gtTitrelt/agtlt/ligt
  ltligtlta href"siteftdm.html"gtTable des
  matièreslt/agtlt/ligt ltligtlta href"sitefcontenu.html"gt
  Contenult/agtlt/ligt lt/ulgt lt/bodygt lt/noframesgtlt/frames
  etgtlt/htmlgt

83
Page avec tableau

• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
  Transitional//EN"gt lt!-- saved from
  url(0053)http//devernay.free.fr/cours/internet/h
  tml/site.html --gt lt?xml version"1.0"
  encoding"iso-8859-1"?gtlthtml xmlns"http//www.w3.
  org/1999/xhtml"gtltheadgtlttitlegtExemple de
  sitelt/titlegt ltmeta content"text/html
  charsetwindows-1252" http-equivContent-Typegt
  ltmeta content"MSHTML 5.00.3502.5390"
  nameGENERATORgt ltstyle typetext/cssgtBODY
  BACKGROUND-COLOR white BACKGROUND-IMAGE
  url(fd2.png) BACKGROUND-REPEAT repeat-y
  TABLE.principale BACKGROUND red TABLE.titre
  BACKGROUND blue TABLE.tdm BACKGROUND red
  TABLE.contenu BACKGROUND-COLOR yellow H1
  FONT-FAMILY Arial, Helvetica, sans-serif
  FONT-SIZE 24pt TEXT-ALIGN center lt/STYLEgt
  lt/headgt ltbodygt lttable border0 cellPadding0
  cellSpacing0 classprincipale summary""gt
  lttbodygt lttrgt lttd colSpan2gt lttable border0
  cellPadding10 cellSpacing0 classtitre
  width"100" summary""gt lttbodygt lttrgt lttdgt
  lth1gtTitrelt/h1gtlt/tdgtlt/trgtlt/tbodygtlt/tablegtlt/tdgtlt/trgt
  lttr vAligntopgt lttd width"20"gt lttable border0
  cellPadding10 cellSpacing0 classtdm
  width"100" summary""gt lttbodygt lttrgt lttdgtlta
  href"http//devernay.free.fr/cours/internet/html/
  lien1.html"gtlien 1lt/agtltbrgtlta href"http//devernay
  .free.fr/cours/internet/html/lien2.html"gtlien
  2lt/agtltbrgtlta href"http//devernay.free.fr/cours/in
  ternet/html/lien3.html"gtlien 3lt/agtltbrgtlta
  href"http//devernay.free.fr/cours/internet/html/
  lien4.html"gtlien 4lt/agtltbrgtlt/tdgtlt/trgtlt/tbodygtlt/tabl
  egtlt/tdgt lttdgt lttable border0 cellPadding10
  cellSpacing0 classcontenu width"100"
  summary""gt lttbodygt lttrgt lttdgt lth2gtle contenult/h2gt
  lt!-- hhmts start --gtLast modified Tue Feb 19
  140505 MET 2002 lt!-- hhmts end
  --gtlt/tdgtlt/trgtlt/tbodygtlt/tablegtlt/tdgtlt/trgtlt/tbodygtlt/t
  ablegtlt/bodygtlt/htmlgt

84
Pour en savoir plus

• http//www.ccim.be/ccim328/htmlplus/idx.htm
• http//www.evrsoft.com/
• 1st Page 2000 un éditeur d'Html gratuit
  recommandé par W3C
• Cours de Jean-Marc Labat DESS IA-SV 2002
• Cours de Michel Futtersack, Paris 5
• Philippe Chaléat, Dominique Charnay,
• HTML et JavaScript, Eyrolles
• Johann C. Hanke
• HTML 4, XML, Micro-Application
• Des cours HTML sur le web.