Creating Web Pages for the WWW

1
Creating Web Pages for the WWW

• Margaret Farren
• Ken Maher
• School of Computer Applications

2
Introductions

• We are Margaret, Ken, Niall, tutors
• This is a hands-on WORKSHOP, not a lecture
  so we show you how, then you do it.
• You make personal notes on how, and you are able
  to do it back at your desk

3
Aim

• Aim create, edit and update a set of web pages
  for your home page, from your own desktop/PC.
• Computers in front of you are not your
  desktop/PC, these desktops are configured to work
  here, so you will have some adjusting to do
  well show you how, later

4
Overview of course

• As a result of this short course you will
• Understand the web, browsers, HTML and http, web
  servers, intranet, internet, PDF, plug-ins
• Create and maintain simple web pages
• Youll also be able to save PowerPoint and WORD
  documents directly onto the web

5
Outline of Presentation

• (A) Internet and World Wide Web (WWW)
• (B) MicroSoft Front Page
• (C) Plan and Design of Web Site
• (D) FrontPage workshop

6
(A) The Internet

The Internet
7
The Internet

• The Information Superhighway carries all sorts of
  traffic. There is a place for everything from
  the heavily loaded lorry to the moped with a
  parcel strapped to the seat. There is also the
  choice of routes, and unlike some other
  superhighways, learner drivers are allowed on
  too!!

8
The Internet

big and little computers all connected
9
The Internet and the WWW

Servers
Browsers
10
The Internet and the WWW

Servers
Servers are given names like www.dcu.ie,
www.berkeley.edu, etc.
Browsers
11
How is it done ?

• The web over 1000,000,000 connected or linked
  documents .. text, image, etc.

12
The Internet and the WWW

Servers hold documents
Servers
Most links are within a site/sever but some
across sites
Browsers
By default FrontPage uses the Internet Explorer
browser
13
How is it done ...

• Documents are encoded or written in HTML
  (Hypertext Markup Language).
• HTML is horrible, but youll never need to see
  it.
• content"text/html charsetiso-8859-1"
• FrontPage Express 2.0"
• timetable
• width"665"
• bgcolor"0000FF" bordercolor"0000FF"
• href"http//www.dcu.ie/"src"dculogo.gif"
• alt"Dublin City University" border"0"
  width"54"
• height"55"
• HTML documents look pretty

14
How is it done ...

• HTML documents sit on servers, powerful, unseen
  machines that serve the documents
• HTML documents are viewed by people, using
  browsers e.g. Netscape and Internet Explorer
  Both run on PCs/Macs in DCU
• HTML documents are transferred to browsers using
  the hypertext transfer protocol (http)

15
The Internet and the WWW

Servers
Servers deliver HTML documents to browsers using
http
Browsers
16
How is it done ...

• HTML (or other) documents provided by servers for
  use in an organisation (eg DCU) are intranet
  documents, e.g. minutes of certain DCU meetings
• HTML (or other) documents provided by servers for
  global use are internet documents, e.g. most DCU
  documents

17
The Internet and the WWW

www.dcu.ie www.eeng.dcu.ie
www.berkeley.edu www.microsoft.com
Servers
DCU intranet
Browsers
18
How is it done Browsers

• Basic web browsers are enhanced with extra
  software (programs) to allow them to show
  documents in other formats audio, video, etc.
• HTML as a markup language is powerful, but not
  quite powerful enough to make a document always
  look the same, so other formats are popular eg.
  PDF (Portable Document Format) is becoming very
  popular, especially in DCU, - documents will
  always look the same, but this requires the
  Acrobat reader plug-in from Adobe

19
(B) Front Page

• Microsoft FrontPage 98 is a tool for creating and
  managing a Web site on Internet or Intranet.
• FrontPage 98 comprises an Explorer and an Editor.
• FrontPage Explorer enables the creation,
  conception and management of a Web site
• FrontPage Editor allow for the creation and
  modification of Web pages without having to learn
  HTML
• We will be using FrontPage Editor

20
(C) Design a Web Page

• Six steps for creating a content-rich, visually
  appealing webpage
• 1. Gather information
• 2. Determine the Intended Audience
• 3. Create a Storyboard
• 4. Plan you Navigational Tools
• 5. Create an Aesthetically Appealing Webpage
• 6. Establish Credibility

21
Creating some pages

• FrontPage its like a dumbed down version of
  WORD
• text
• different fonts
• font styles and sizes
• indenting
• background colours
• title field for page
• simple tables, borders, coloured cells
• bullets and numbering
• add some images, logos

22
Basic Design Tips

• Create an effective title and main heading
• Use horizontal rules to separate sections
• Use text highlighting e.g. italic, bold
  sparingly
• Give the date when We page was last updated
• Keep pages short - create a series of short
  related that each fit on a single
• Many users use 13 monitor, avoid creating Web
  pages bigger than 640x480 pixels

23
More Design Tips

• Using the same images in several places helps the
  browser work faster
• Use a small thumbnail linked to a larger images
• Check spelling and proofread your document
• Use a footer at bottom of page for general
  information such as e-mail address
• If your page is moved to a new site, leave a
  notice at the old location directing readers to
  new site

24
Challenges

• Graphics - does it take long to download page?
• Use of Hypertext links - quality of links?
• Use of Frames - not advisable...
• Software requirements may limit access e.g.
• Browsers can alter the APPeArence of
  information
• http//www.w3.org - checks your HTML conforms
  with current standards

25
Resources for new Web users

• Design a Web Page http//www.siec.k12.in.us/west/
  online/
• Usability of Web Sites http//www.useit.com/
• Nielsens site
• Before getting involved in large scale web site
  design http//www.photo.net/wtr/thebook

26
Web based resources

• Criteria is needed to evaluate Web resources
• traditional evaluation criteria is useful
• new criteria is also needed
• Five Traditional Evaluation Criteria
• Authority
• Accuracy
• Objectivity
• Currency
• Coverage
• (Alexander Tate)

27
Criterion 1 Authority

• Who is responsible for the contents
• of the page?
• What are the authors qualification
• for writing on the subject?
• Is there a way of checking the
• legitimacy of the author?

28
Criterion 2 Accuracy

• Almost anyone can publish on
• the Web.
• Are the sources for factual information
• listed?
• Is the information free of grammatical,
• spelling and other typographical errors?

29
Criterion 3 Objectivity

• Is the information trying to
• sway the opinions of the audience?
• Are the persons biases clearly stated?
• Often the aims of person not clearly stated.

30
Criterion 4 Currency

• Is the material kept up to date?
• Are there dates on the page to indicate
• When the page was written?
• When the page was first placed on the Web?
• When the page was last revised?

Date???
31
Criterion 5 Coverage

• What topics are included in the work?
• To what depth are topics explained?
• Is there an indication that the page has been
  completed or is it still under construction?

32
Creating some pages

• Now lets do something...
• We will create HTML pages on PCs, save to local
  disk (C\ drive) and then export to the DCU web
  server (www.dcu.ie)
• Each person has a personal space on www.dcu.ie
  denoted www.dcu.ie/dohare/ and
  must be created (here) and then moved
  to that server machine to make it available on
  the web

33
Creating some pages

• We use FrontPage from Microsoft to create, edit,
  and then publish or push HTML pages from these
  PCs onto www.dcu.ie
• FrontPage will be available from Computer
  Services on your desktop machine Niall ?
• First, you need to tell the PC, where to
  publish, i.e. to distinguish us all from
  dohare
• launch FrontPage
• configure FrontPage to publish as YOU

34
Saving some pages

• Now save those pages
• Now check they exist on the web ...
• Welcome to the list of those who have published.
• Now try adding some embedded text links to DCU
  home page, school page, anywhere
• Add some links to your email (http vs. mailto)
• Check some PDF documents and the plug-in

35
HTML from other applications

• It is possible to save a PowerPoint document into
  HTML or a WORD document (not advisable because
  conversion not great)
• To create HTML documents, use a real HTML editor,
  not a converter

36
The End !