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 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 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 The Internet … and the WWW Servers Browsers Servers are given names like etc.

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 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. timetable <table border="0" cellpadding="0" cellspacing="0" width="665" bgcolor="#0000FF" bordercolor="#0000FF"> <a href=" 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 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 The Internet … and the WWW Servers Browsers DCU intranet

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 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 A PP eAre nce of information - checks your HTML conforms with current standards

25 Resources for new Web users Design a Web Page Usability of Web Sites Nielsen’s site Before getting involved in large scale web site design

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 ( Each person has a “personal space” on denoted 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 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 (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 !