Computer Science : Information Systems Design and Development Unit Web Sites - National 4 / 5 St Andrew’s High School-Revised January 2013 Slide 1 St Andrew’s

St Andrew’s High School-Revised January 2013 Slide 1

Computer Science : Information Systems Design and Development UnitWeb Sites - National 4 / 5

St Andrew’s High School

Web Sites (J Walsh - Chapter 8)

National 4 / National 5



What is the WWW?

• It is a huge collection of multimedia information on the Internet

• Information is stored in web sites as web pages

• A web page is a single document (might need to scroll down to see it all!)

• Web sites are a great way of distributing information



Software needed to View WWW?

• A browser (eg internet explorer/netscape navigator) allows you to browse or surf the www

• The browser loads and displays web pages from other computers on the internet

• To access a web page you can enter the URL (Uniform Resource Locator) into the address line of your browser:



Software needed to View WWW?

• A web site is a collection of web pages on a particular subject

• A home page provides a starting point to explore a web site

• Hyperlinks provide links to other pages, files or web sites

• The ‘back’ and ‘forward’ buttons provide a quick way to navigate through a list of web pages recently visited



Question Time

• Now answer the questions from Exercise 1 in the Web Sites notes.

• Complete any outstanding questions for homework for next day.



Software needed to Create Web Pages

• HTML (HyperText Mark-up Language) is the language used to create web pages

• HTML is made up of a series of tags eg <B> Hello </B>

• These HTML commands would make Hello appear in bold.

• There must be an opening tag and a closing tag <B> Hello </B>



Software needed to Create Web Pages

• A text editor like Notepad/Simple Text can be used to create HTML documents.

• Documents are then saved with a .html extension.

• The good thing about text editors is that they are free

• Disadvantage of text editors – it is difficult to see how the final web page looks if you use a text editor as it is not WYSIWYG



Web Page Software to create Web pages

• It’s a WYSIWYG editor!• What You See Is What You Get!• Don’t need to know/create any HTML

code for these packages, it automatically creates the code for you

• Examples are Claris Home Page, MS Front Page, Macromedia Dreamweaver. Web page software is sometimes called Web Authoring Packages.

• Some web browsers let you create pages too



Wizards and Templates

• Using a Wizard allows you to step through the process of web page creation.

• Wizard - best for beginners.• A wizard will offer a choice of Templates. • Templates are ready made pages with

placeholders for text and graphics. • Templates speed up the web page

creation process as a standardised format and structure are already in place.



Question Time


• Complete any outstanding questions for homework for next day.



Other Software to create pages

• You can create web pages in Word, Publisher etc. Again you can usually load a template

• Once it is created choose ‘Save as’ then ‘web page’



Adding Graphics

• Graphics can be scanned, inserted from clipart, browsed for on the web, or created using a charting wizard (in SS or DB package)

• Graphics packages allows graphics to be saved as ‘web graphic’. This creates a low resolution graphic file suitable for the web, it has a small file size so it loads quickly

• Copyright – check this out! No problem for personal use, but if they’re going to be sold/used for advertising you must obtain permission from copyright holder



Adding Audio

• From a sound library, taken from an audio CD, recorded directly into the presentation using a microphone

• Add audio using a hyperlink or embedding the file into the web page

• Hyperlink audio – this loads the audio file• Embed audio – this becomes part of the web

page and gives you more control over the sound

• If you embed audio users must have the correct ‘plug-in’ to play the sound

• Embedded sound can be slow to load



Adding Video

• Video can be either embedded or hyperlinked to a web page

• Hyperlink video – this loads the video file• Embed video – can increase the file size,

slower to download and viewers need the ‘plug-in’

• Video can be created using a webcam, digital video camera, or downloaded from the web



Hyperlinks

• Hyperlinks – links to other web pages, another place in the current web page, or a file stored on a local disk

• Activated by clicking a piece of text• Text colour changes once the hyperlink

has been clicked on



Question Time


• Finish all these questions for homework for next day.



Adding Tables

• Information is displayed in tables to allow the user to quickly see the overall picture

• Data is arranged in columns and rows, like in a SS

Our School – Click a link to visit a dept

Computing Geography

English Art

Business Education

Music



Adding Hotspots

• Hotspots are special areas on web page, normally invisible, but changes to a hand when the mouse is floated over it – that’s because it is a hyperlink

• Graphics and picture hotspots are called Image Maps

• Eg if you had a map of the British Isles and hovered over Scotland the hotspot link could take you to the Scottish Tourist Board web site (to Irish one, etc)

• Can be used to reveal a hidden picture/text



Frames and Animations

• Some web pages are organised in frames• Some include animations downloaded

from the web• To view animations special plug-in

software may need to be installed• Real audio plug-in may be needed to use

a radio station’s web site



Frame Based Website

• Some web sites have their web pages organised in frames.

• Each frame holds a particular type of content which may, or may not, change from one web page to the next. Eg:• Menu area• Title or Logo area• Data area



Frame Based Websites

• In the previous example, the web page consisted of 3 frames:

– The Logo area, which does not change and allows the company name or logo to be permanently on view

– The menu area, a list of menu options dependant on the page on view

– The data area, where the main content for each web page is displayed, and thus changes from page to page



Question Time


• Finish all these questions for homework for next day.

• Copy out the key points from Chapter 8 of the J Walsh textbook.