Transcript Information Systems 1

IMS5401
Web-based Systems Development
Topic 2: Elements of the Web
(c) Formatting and displaying web pages:
Mark-up languages and browsers
Copyright 2004 Monash University
Agenda
1. Basic concepts of document formatting and
mark-up languages
2.
3. Evolution of mark-up languages for
document formatting
4. Browsers
5. Implications for developers
2
Copyright 2004 Monash University
Elements of the Web
Connecting
computers
Digital
representation
of documents
THE WEB
Linking
documents
3
Copyright 2004 Monash University
Display and
organisation of
documents
1. The Document Formatting Problem
Creator of
document
Write/
format
Audience
Document
format
•content
•layout
•style
Document
appearance
•content
•layout
•style
Document reader
Document
4
Copyright 2004 Monash University
Read
Document formatting issues



The writer: needs a set of standard formatting and
layout instructions which they can include with
their document to show how it should be displayed
The reader: needs a standard software package
capable of reading the formatting instructions and
displaying the document as the author intended
How can the writer and reader of a document be
sure that the reader sees it in the form in which the
writer wants them to see it?
• Formatting layout/structure
• Formatting appearance/style
• Formatting individual items of content
5
Copyright 2004 Monash University
‘Normal’ computer-based document
formatting





6
Writer uses a software package (like MS-Word)
which enables formatting instructions to be stored
as part of the document
Reader usually reads the document with the same
software that the writer used to create it (eg I use
MS-Word to view and read documents created in
MS-Word)
Formatting controls are unique to each software
package (copyright)
Software companies are generally reluctant to
support the formats used by other rival companies
Some ‘neutral’ formats such as .rtf, .txt, etc may be
more widely readable by software (though perhaps
with loss of formatting)
Copyright 2004 Monash University
Issues for web-based document
formatting

We want device independence for any writer and
reader anywhere in the world:
• Writer should be sure that his formatted document will be
able to be read by anyone;
• Reader should be sure that he can read any document;
• Both reader and writer should feel sure that the reader
sees the document exactly as the writer intended it



7
We want to support all possible document
formatting needs
We want to be able to handle documents with
content of all types - text, graphics, photos, sound,
film, etc
No translating - the document the user reads is a
copy of the original
Copyright 2004 Monash University
2. Mark-up Languages: The
basics
8
Copyright 2004 Monash University
What is a Mark-up Language?





9
A set of standard formatting symbols,
incorporated into a document to direct the
computer how to format and display it
Originally designed to describe document
layout (ie headings, paragraphs, titles, etc)
Extended to cover presentation (fonts,
margins, etc)
Further extended to cover style sheets,
templates, etc
(Also includes metadata - covered later in
lecture on organising and searching
documents)
Copyright 2004 Monash University
An example of a mark-up
language



10
Tags - all document elements are marked by
tags delimited by arrows; eg <p> means start
paragraph; </p> means end paragraph
Attributes - some tags can have attributes
which specify extra detail; eg <p align=
“center”> means start a new paragraph and
centre it on the page
Links - the anchor tag allows you to link an
element in the document to a location in
another web-based document eg <a
href=“www.sims.monash.edu.au>
Copyright 2004 Monash University
A Sample of a ML: Some Text ...
Test sample of a Mark-up Language
This brief piece of text aims to show how a mark-up language works by
including tags which show how the document should be displayed by
the computer.
Note how this text has been formatted by my word processor to include
features such as:
Headers/titles
Paragraphs;
Italics and Bolding
multiple fonts
Spacing and text alignment;
11
Copyright 2004 Monash University
... the HTML generated by MS-Word
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<META NAME="Generator" CONTENT="Microsoft Word 97/98">
<TITLE>Test sample of a Mark-up Language</TITLE>
</HEAD>
<BODY>
<B><FONT FACE="Times" SIZE=5><P ALIGN="CENTER">Test sample of a Mark-up
Language</P>
</B>
<P>This brief piece of text aims to show how a mark-up language works by
including tags which show how the document should be displayed by the computer.
</P>
<P>Note how this text has been formatted by my word processor to include
features such as:</P>
<P>Headers/titles</P>
<P>Paragraphs;</P>
<I><P>Italics and </I><B>Bolding</P>
</FONT><FONT FACE="Avant Garde" SIZE=5><P ALIGN="CENTER">multiple</FONT><FONT
FACE="Times" SIZE=5> </FONT><FONT FACE="Chicago" SIZE=5>fonts</P>
</B></FONT><FONT FACE="Times" SIZE=5><P ALIGN="RIGHT">Spacing and text
alignment;</P></FONT></BODY>
</HTML>
12
Copyright 2004 Monash University
3. Evolution of web mark-up
languages

From GML to HTML

HTML
CSS

13
Copyright 2004 Monash University
Evolution: From GML to XHTML




14
GML (general mark-up language): The
original mark-up language developed by IBM
Original purpose: to cope with problems of
multiple document formats within IBM
SGML (Standardised General Mark-up
Language) - an international standard for
mark-up based on GML
HTML (hypertext mark-up language) - a ‘quick
and dirty’ mark-up language developed by
Tim Berners-Lee for formatting documents
for display on his web
Copyright 2004 Monash University
HTML: Hypertext Mark-up Language






15
The original web ML
Grew from a very simple Version 1.0 (only 20
tags) to a large and complex ML
Four main versions:
• 2.0 (1994);
• 3.2 (1996);
• 4.0 (1997);
• 4.01 (1999)
Originally intended purely for document layout not appearance
Very simple; very ‘loose’!
No more up-grades after 4.01; replaced by XHTML
Copyright 2004 Monash University
Improving on HTML:Cascading Style
Sheets (CSS )




Developed to make up for inadequacies of HTML
for controlling document appearance/style
Works like templates and style sheets in Word,
Powerpoint, etc
Enables standard text style - fonts, typeface, etc
Followed by other variants of HTML also
developed to improve it, fix it, enhance it, etc
•
•
•
•
16
DHTML
MathML
VRML
etc
Copyright 2004 Monash University
Making HTML extensible

What do I do if I want to write a special type of
document which needs a special type of
formatting?
• Work around it within HTML?
• Build a new specialised ML?
• Get new tags built into HTML?



17
The concept of the extensible language
XHTML: A sort of HTML 5.0, but now with
extensibility built in - allows you create and
define your own tags
XML and XSL- further extensions of XHTML and
CSS including non-display aspects of
formatting - discuss next week
Copyright 2004 Monash University
Dealing with non-text elements of
documents



18
Berners-Lee envisaged the need to cater for
documents with non-text elements such as
graphics, sound, video, animation, etc
HTML permits the inclusion of these as
objects as part of the document
Standard file formats have evolved - covered
in digital representation lecture
Copyright 2004 Monash University
Evolution of HTML writing





19
Initially, web pages had to be written directly in
HTML
Then composer programs were developed Front Page, Dreamweaver, (MS-Word!), etc
Now Content Management Software can
manage composition of the design, layout,
content, etc of a web site
Much simpler for page developers, BUT,
different packages support different versions of
HTML and have their own local variations
Developer needs to choose a package which
suits their HTML requirements AND their users’
browser capabilities
Copyright 2004 Monash University
The HTML writing trade-off

Writing HTML directly:
• Tedious and error-prone;
• Requires knowledge and expertise
• BUT, you are in control of the HTML which is created, and
maintenance and enhancement is more manageable

Using a composer package:
• Quicker and less error-prone;
• Requires knowledge only of software
• BUT, you are no longer in control of the HTML, and
maintenance and enhancement are problematic

20
Many developers use both methods - develop
with composer software and patch manually
Copyright 2004 Monash University
4. Browsers



21
Reading pages with a browser
The commercial browser market
Plug-ins
Copyright 2004 Monash University
Role and evolution of the
browser


Berners-Lee’s Browser: a software package
which provided the interface between the user
and the web of documents.
The browser is designed to:
• send the user’s request for a document on the web;
• receive and assemble the document for viewing by the
user;
• display the document according to the formatting
instructions contained in the document’s ML


22
Ideally a browser should work in exactly the
same way on any computer
The browser is built to support a specific ML
Copyright 2004 Monash University
Browser Plug-ins




23
Software which extends the functionality of
the browser.
Enables browser to remain relatively simple
while still catering for a wide range of other
web-based applications, file formats, etc
Many plug-ins available - down-load for free
to support different applications. Browser
keeps them in plug-ins folder
Plug-ins for special display instructions
(egReal Player, Shockwave, Acrobat Reader,
Quicktime, Java, etc)
Copyright 2004 Monash University
Browsers and HTML Errors

What should a browser be designed to do when
it encounters mark-up instructions which are
wrong or which it doesn’t understand?
• Crash?
• Display the error on the screen?
• Ignore the instruction?


24
The HTML solution
The XML solution
Copyright 2004 Monash University
The commercial browser
market





25
The first browser - Tim Berners-Lee at CERN
Mosaic and its consequences
Netscape and Internet Explorer
There are many browsers available, but IE
has become dominant
Earlier versions of Netscape and IE are much
more significant user platforms to design for
than any other brand of browser
Copyright 2004 Monash University
5. A digression about markets

Some prejudices about technology,
technology ownership, commoditisation and
market forces
• The motor car and the oil industry

The commercial world invades web
technology
• Netscape Navigator
• Internet Explorer and the browser wars
• HTML composer software; CMS, etc


26
Microsoft, Apple and industry standards
Discuss further in a few weeks time
Copyright 2004 Monash University
6. Implications for web
systems/developers


27
The vision and the reality
Developing around the limits of HTML
Copyright 2004 Monash University
Vision
Document End
User End
Developer creates with...
Standard
universal mark-up
language
Standard
browser
(Mosaic)
(HTML)
28
User reads with...
Copyright 2004 Monash University
Actuality
User End
Document End
Developer creates with...
HTML
Netscape
Composer tools
which generate
marked-up
document:
DHTML
Internet Explorer
XHTML
Opera etc
XML
Eg Dreamweaver,
Front Page, CMS
+
… to display
‘standard’ media
+
plug-ins to display
other media
(Acrobat, Real
Player, etc)
Scripting
Languages
Other
media
+
Scripts
29
User accesses with...
Copyright 2004 Monash University
Developing around the limits of HTML
and browsers




30
How well can HTML and the browser support
what I want to display in my web page?
How much of a technical expert do I have to
become in order to publish material which
displays properly on the web?
To what extent will a reader’s choice of
browser affect their viewing of Web
documents?
How much of a technical expert does a reader
have to be to read material on the Web?
Copyright 2004 Monash University
The future




31
Can standards be developed to cater for all
document formatting needs?
Will the standards be accepted and adopted
by the big industry players?
Is the browser the right web access method?
What about web access from non-computerscreen devices?
Copyright 2004 Monash University