Scribd
Upload
130 views

Internet & Web Pages

The document provides a history of the internet and the development of web technologies. It discusses how ARPANET was developed by the US Department of Defense to create a resilient network, and how this led to the widespread adoption of email and the internet. It describes the development of key internet protocols like TCP/IP and the introduction of early applications. The document then covers the development of HTML and web browsers like Mosaic and Netscape, and how these led to the creation of the World Wide Web. It concludes with discussions of web site structure and information architecture.

Uploaded by

TiwariG16
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
130 views

Internet & Web Pages

The document provides a history of the internet and the development of web technologies. It discusses how ARPANET was developed by the US Department of Defense to create a resilient network, and how this led to the widespread adoption of email and the internet. It describes the development of key internet protocols like TCP/IP and the introduction of early applications. The document then covers the development of HTML and web browsers like Mosaic and Netscape, and how these led to the creation of the World Wide Web. It concludes with discussions of web site structure and information architecture.

Uploaded by

TiwariG16
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 42

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> <P><FONT SIZE=6><P>Steve's HTML Page </FONT> </P> </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. <B>Hello</B> appears Hello <B> is the start-tag and </B> 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 doesnt really exist any more

Headings
H1 to H6 used to indicate importance of topic In practice we rarely use less than H3 Using <font> 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 <em> and <I> are identical in as much as they produce italics, but the <em> is more classical and better style (semantics!) The tags <strong> and <b> are identical in as much as they produce bold text but again the <strong> 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 <P></P> tags Also the <BR> 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 <FONT> tag is similar as is The <IMG> tag The <BODY> tag

Font Tag
<FONT SIZE=16 FACE=Times New Roman COLOR=00FFFF> 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


<FONT SIZE=6><P>Steve's HTML Page</P> <P><IMG SRC="Image16.gif" WIDTH=288 HEIGHT=192> </P></FONT></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 youve 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 Trees

Annuals

Perennials

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 were not sure what it is) Can be disorienting (we dont know where we or or how to get back to where we came from)

Hybrid Sites
Simple Hierarchical Model Plants

Flowers

Trees

Searchable Plant Database

Links Page

Annuals

Perennials

Conifers

Deciduous

Database

What Next
Read Parker
Module Networks (Chapter 8 and 9) pp 295-388
Read Unit 6 on the Web Site

You might also like