Creating Web Pages for the WWW Margaret Farren Ken Maher School of Computer Applications.

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 … we’ll show you how, later

4

Overview of courseAs 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

• You’ll 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”

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


Servers

Browsers

Servers are given names like www.dcu.ie, www.berkeley.edu, etc.

11

How is it done ?• The “web” … over 1000,000,000 connected or

linked documents .. text, image, etc.

12


Servers

Browsers

Most links are within a site/sever but some across sites

Servers hold documents

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 you’ll never need to see it.• <html>• <head>• <meta http-equiv="Content-Type” content="text/html; charset=iso-8859-1">• <meta name="GENERATOR" content="Microsoft FrontPage Express 2.0">• <title>timetable</title>• </head>• <body bgcolor="#FFFFFF">• <div align="center"><center>• <table border="0" cellpadding="0" cellspacing="0" width="665"• bgcolor="#0000FF" bordercolor="#0000FF">• <tr>• <td align="middle" width="68"><a• href="http://www.dcu.ie/"><img src="dculogo.gif"• alt="Dublin City University" border="0" width="54"• height="55"></a></td>

• 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


Servers

Browsers

Servers deliver HTML documents to browsers using http

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


Servers

Browsers

DCU intranet

www.dcu.ie www.eeng.dcu.ie www.berkeley.edu www.microsoft.com

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 … it’s 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/

Nielsen’s 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 author’s 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 person’s 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/<filename> and <filename> 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

The End !

Creating Web Pages for the WWW Margaret Farren Ken Maher School of Computer Applications.

Documents

Transcript of Creating Web Pages for the WWW Margaret Farren Ken Maher School of Computer Applications.