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 High School Web Sites (J Walsh - Chapter 8) National 4 / National 5

Computer Science : Information Systems Design and Development Unit Web Sites - National 4 / 5 St Andrew’s High School-Revised January 2013 Slide 2 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

Computer Science : Information Systems Design and Development Unit Web Sites - National 4 / 5 St Andrew’s High School-Revised January 2013 Slide 3 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:

Computer Science : Information Systems Design and Development Unit Web Sites - National 4 / 5 St Andrew’s High School-Revised January 2013 Slide 4 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

Computer Science : Information Systems Design and Development Unit Web Sites - National 4 / 5 St Andrew’s High School-Revised January 2013 Slide 5 Question Time Now answer the questions from Exercise 1 in the Web Sites notes. Complete any outstanding questions for homework for next day.

Computer Science : Information Systems Design and Development Unit Web Sites - National 4 / 5 St Andrew’s High School-Revised January 2013 Slide 6 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 Hello These HTML commands would make Hello appear in bold. There must be an opening tag and a closing tag Hello

Computer Science : Information Systems Design and Development Unit Web Sites - National 4 / 5 St Andrew’s High School-Revised January 2013 Slide 7 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

Computer Science : Information Systems Design and Development Unit Web Sites - National 4 / 5 St Andrew’s High School-Revised January 2013 Slide 8 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

Computer Science : Information Systems Design and Development Unit Web Sites - National 4 / 5 St Andrew’s High School-Revised January 2013 Slide 9 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.

Computer Science : Information Systems Design and Development Unit Web Sites - National 4 / 5 St Andrew’s High School-Revised January 2013 Slide 10 Question Time Now answer the questions from Exercise 2 in the Web Sites notes. Complete any outstanding questions for homework for next day.

Computer Science : Information Systems Design and Development Unit Web Sites - National 4 / 5 St Andrew’s High School-Revised January 2013 Slide 11 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’

Computer Science : Information Systems Design and Development Unit Web Sites - National 4 / 5 St Andrew’s High School-Revised January 2013 Slide 12 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

Computer Science : Information Systems Design and Development Unit Web Sites - National 4 / 5 St Andrew’s High School-Revised January 2013 Slide 13 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

Computer Science : Information Systems Design and Development Unit Web Sites - National 4 / 5 St Andrew’s High School-Revised January 2013 Slide 14 Adding Video Video can be either embedded or hyperlinked to a web pagehyperlinked 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

Computer Science : Information Systems Design and Development Unit Web Sites - National 4 / 5 St Andrew’s High School-Revised January 2013 Slide 15 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

Computer Science : Information Systems Design and Development Unit Web Sites - National 4 / 5 St Andrew’s High School-Revised January 2013 Slide 16 Question Time Now answer the questions from Exercise 3 in the Web Sites notes. Finish all these questions for homework for next day.

Computer Science : Information Systems Design and Development Unit Web Sites - National 4 / 5 St Andrew’s High School-Revised January 2013 Slide 17 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 ComputingGeography EnglishArt Business Education Music

Computer Science : Information Systems Design and Development Unit Web Sites - National 4 / 5 St Andrew’s High School-Revised January 2013 Slide 18 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

Computer Science : Information Systems Design and Development Unit Web Sites - National 4 / 5 St Andrew’s High School-Revised January 2013 Slide 19 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

Computer Science : Information Systems Design and Development Unit Web Sites - National 4 / 5 St Andrew’s High School-Revised January 2013 Slide 20 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

Computer Science : Information Systems Design and Development Unit Web Sites - National 4 / 5 St Andrew’s High School-Revised January 2013 Slide 21 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

Computer Science : Information Systems Design and Development Unit Web Sites - National 4 / 5 St Andrew’s High School-Revised January 2013 Slide 22 Question Time Now answer the questions from Exercise 4 in the Web Sites notes. Finish all these questions for homework for next day. Copy out the key points from Chapter 8 of the J Walsh textbook.