ppt - NUS School of Computing

Transcript ppt - NUS School of Computing

Internet & Web Pages
Aims & Objectives
•
•
•
•
Brief Intro and History of the Internet
Creating A Web Site
Introduction to HTML
Introduction to Information Architecture
History of the Internet
• ARPANET - the US department of defence
wanted to develop a computer network that
could withstand nuclear attack
• Unintended consequences: huge use of
Email
• Soon became the tissue of a huge network
and networks
Early Arpanet
• TCP/IP (unifying protocol)
– Transmission Control Protocol (how data is
broken up into packets and reassembled at the
end)
– Internet Protocol (how packets reach their
destination)
• FTP
• Email
• Telnet
The 7 Layers of the OSI Model
• OSI (Open System Interconnection) Model
consists of 7 layers
– Layer 1 (Physical): hardware
– Layer 2 (Data Link): handling errors of layer 1, flow
control, synchronisation
– Layer 3 (Network): switching and routing, logical
paths, virtual circuits
– Layer 4 (Transport): end-to-end system services,
ensures complete data transfer
– Layer 5 (Session): connections between applications
– Layer 6 (Presentation): independence from difference in
representation (syntax layer)
– Layer 7 (Application): end user processes (telnet, ftp)
Hypertext
• Vannevar Bush “As We May Think” 1945
•
Director of the Office of Scientific Research and Development
– The Memex
– http://www.theatlantic.com/unbound/flashbks/computer/bushf.htm
• Ted Nelson Literary Machines 1965
– Xanadu
• Led to Software such as Hypercard
The World Wide Web
• Created by Tim Berners Lee, a researcher
for CERN, in 1989
• Originally to aid researchers find
information through a linked texts
• Used HTTP for protocol and HTML for
content of pages
• Still no images at this point
Early Browsers
•
•
•
•
1993 only 100 web servers
First Browser well known called “Mosaic”
Could view images as well as text
Marc Andreesen one of the early developers
of Mosaic left to form Netscape
Early HTML
• Early HTML - only text, links and images
• Netscape 2.0 - could use tables and embed
3rd party applications (through plug-ins)
– shockwave, video (mpeg), real audio
• In 1996 Netscape 3.0 could see JAVA and
developed the scripting language javascript
Internet Explorer Catches Up
• Up till version 4.0 Internet Explorer inferior
to Netscape
• Then makes quantum leap through use of
– DHTML (Dynamic HTML)
– Style Sheets
– Java performance
• Netscape remains the only true cross
platform Browser
The Current Browsers
• Once upon a time, big separation of
browser/email/ftp
• Emacs: unified development environment
• Now browsers also can do it all
(monolithic)
Internet Explorer
Browser
Email (Outlook Express)
HTML Editor (Front Page
Express)
News Reader
Net Meeting
Netscape Communicator
Browser (Navigator)
Email (Messenger)
HTML Editor (Composer)
News Reader
Conference
Latest Developments
• File Sharing
– Napster, Gnutella, Morpheus
• Dot Net
– XML based Web Services
– “Semantic Net”
• Broadband
– Media Delivery over the Web
Create a Web Page
• Open MS Word
• Create new document or open existing one
•
Save as HTML
Page Edited
The Page in HTML
• <HTML>
• <HEAD>
• <META HTTP-EQUIV="Content-Type"
CONTENT="text/html; charset=windows-1252">
• <META NAME="Generator" CONTENT="Microsoft Word
97">
• <TITLE>Steve's HTML Page</TITLE>
• </HEAD>
• <BODY>
• Steve's HTML Page
• 
• </BODY>
• </HTML>
Tags
• HTML is a markup language
• Tags are items surrounded by angle brackets
containing codes indicating how text should
be displayed
• E.G. Hello appears Hello
• is the start-tag and is the end tag
Editor vs Handwritten HTML
• Using Editor is imprecise but easier
• Writing HTML code by hand is laborious
but more powerful
More HTML
• Classic HTML works on a principle of
semantic coding - markup is based on
meaning (e.g this is emphasised, this is a
heading, this is a subheading) rather than
look (this is font size 16)
• However pure HTML doesn’t really exist
any more
Headings
• H1 to H6 used to indicate importance of
topic
• In practice we rarely use less than H3
• Using tag to emphasize severely
frowned on
– users cannot control the display of the text
– speech browsers cannot register the importance
of the section
Emphasis
• The tags and are identical in as
much as they produce italics, but the 
is more classical and better style
(semantics!)
• The tags and are identical in
as much as they produce bold text but again
the is more classical
Lists
• Two types:
– <OL> ordered list, which numbers the items of
the list
– <UL> unordered list, which separates items
with bullet points
• List items are enclosed with the tags
– <li> and </li>
Paragraphs
• Used with the tags
• Also the tag is used to create simple
line breaks within the same paragraph
Hyperlinks
• What makes the web the web - a document
can link to another document
• Links can be either absolute or relative
• Absolute specifies a full URL e.g.
– http://www.microsoft.com
• Relative specifies a file relative to the
current file e.g
– index2.htm
Structure of a Hyperlink
• Hyperlink uses the following syntax
– <A HREF=”index2.htm”>My second page</A>
• Where HREF = hypertext reference i.e.
• The file to link to
• “My second page” is the text being clicked
Tags with Attributes
• The <A> (anchor) tag is interesting in that it
has an attribute (HREF) which has to be
specified
• The tag is similar as is
• The <IMG> tag
• The <BODY> tag
Font Tag
• 
• Remember that the use of the FONT tag is
frowned upon and so should be used
sparingly
IMG Tag
• <IMG SRC=“next.gif” WIDTH=200
HEIGHT=360 BORDER=0 ALT=“Go to
Next Page”>
– width and height specify the size the image will
take up within the page (not constrained by the
original size of the image)
– border is not normally used except when the
image is to be a hyperlink itself
– ALT a very important tag meaning alternative
text I.E when the browser cannot display the
image
Images for Hyperlinking
• Used all the time in navigation bars
• You must specify the border to be 0
otherwise an unpleasant blue border will
appear around the image
The Body Tag
• Very important tag which determines the
background of the page
• <BODY BGCOLOR=“#ff00ff”
BACKGROUND=“waves.gif”>
• If a colour is specified, that becomes the
background colour, but if a background
image is also specified this will override the
colour
The META Tag
• Technically relevant tag controlling the
behaviour of browsers and robots
• Two possible attributes
• <META HTTP-EQUIV="name"
CONTENT="content"> controls browser
display (equivalent to http header)
• <META NAME="name"
CONTENT="content"> controls other
aspects; not clearly separated
Distribution
• Each HTML file exists only as a node
within a vast network
• Each image that appears on it comes from a
separate file which is not part of it
Back To Word
• Adding a picture using
Insert>Object>Microsoft Word Picture
Look at the HTML now
• Steve's HTML
Page
• <IMG SRC="Image16.gif"
WIDTH=288 HEIGHT=192>
</BODY>
• Image now automatically generated by
Word
Adding a second HTML file
• Create a new file in word
• Save that has HTML in the same directory
as the first file
• Make a link to it from the first file
– (write some text, select it, click on the
globe+link icon, then select the file you’ve just
created as being the linked file)
What is a web site?
• A lot of linked documents, a heterogeneous
information space
• A machine of meaning for a variety of users
• It therefore requires thought regarding
– Intended Audience
– Design Motifs
– Information Architecture
How To Structure a Web Site
• Hierarchical
– tree structure, categories, sub categories
• Data Driven
– database with pages dynamically created
• Hypertextual
– pages with random, content driven links to
other pages
Hierarchical
Simple Hierarchical Model
Plants
Flowers
Annuals
Perennials
Trees
Conifers
Deciduous
Hierarchical
• The most common form of web site because
mental model can be easily created by
human beings
• Problematical because of items which cross
categories (tomato in fruit/vegetable
schemas)
• Design challenges (narrow and deep or
broad and shallow)
• Maintenance might not be easy
Data Driven (see FEIS site)
• Usually for subsections of web sites
– e.g staff directories, telephone numbers,
knowledge bases
• Advantage is separation of content and form
– visual appearance of site can be redesigned at
will
• Often rigid and bland
Hypertextual
• Links pages in web sites
• Or whole sites (academic)
• Good for serendipitous searching (we want
to find something but we’re not sure what it
is)
• Can be disorienting (we don’t know where
we or or how to get back to where we came
from)
Hybrid Sites
Simple Hierarchical Model
Plants
Flowers
Annuals
Perennials
Trees
Conifers
Deciduous
Searchable
Plant Database
Database
Links Page
What Next
• Read Parker
– Module Networks (Chapter 8 and 9) pp 295-388
• Read Unit 6 on the Web Site

ppt - NUS School of Computing

Transcript ppt - NUS School of Computing

Directory