The Internet & The World Wide Web Notes

Information Systems Design & Development:Structures and links, User interfaces, media types & Coding

ContentsThe Internet & The World Wide W

eb Questions

How To Design A Website Questions

Testing A Website & Uploading It Questions

The Internet and the World Wide Web are not the same thing!

The Internet is a worldwide network of computer networks.

Computers all over the world can communicate information with each other, in a variety of different ways. The world wide web is only one way that information is communicated on The Internet.

So just what is The Internet

The world wide web is a collection of multimedia hypertext web pages.

Multimedia means that information is presented in different ways – text, pictures, sound and videos are all used on the world wide web.

Hypertext means that the pages are all connected to each other and you can navigate between them via hyperlinks

And the World Wide Web?

Useful things to know…1. Every page has an unique identifiers called Uniform

Resource Locators or URLsURLs only ever point to one web page, although multiple URLS can point to the same page

2. Every page is made up with the Hyper Text Markup Language or HTMLMark up languages extend English by adding tags that tell the computer how to process them

3. Pages are transmitted over The Internet using the Hyper Text Transfer Protocol or HTTPRemember, the Internet also uses other transfer protocols for other types of information aside from webpages

Browsers and ServersA web browser is a software application that displays webpages.Web browsers use URLs to send a request for a certain webpage to the appropriate web server. When the browser receives the page, it interprets the HTML to display the page on your screen

A web server is a software application that stores and transmits web pages to browsers across the world.When a web server receives a request for a page, it finds it in its storage and then sends a copy of that page to the browser that asked for it

URL

HTML Document

Here’s how it all worksThe HTML code of a web page allows the URLs of other web pages to be embedded into the page. These are Hyperlinks, or sometimes Hotspots if embedded into a graphic.

When the user clicks on a link, the web browser detects it and uses the URL to find and download the appropriate web page from its web server.

A link that takes the user to a different website – a web page stored on a different web server – is an external hyperlink.

A link that takes the user to another web page on the same site – a page stored on the same web server as the current page – is an internal hyperlink.

Questions – Internet & WWWAnswer questions in full sentences!1. What is the Internet?2. What is the World Wide Web?3. How are web pages written and stored?4. What is a web browser?5. What is a web server?6. What is needed to uniquely identify a web page?7. What set of rules govern the transfer of web

pages from server to browser?8. Explain the difference between an internal and

external hyperlink?9. Why can a page have several URLs, but a URL

cannot point to several pages?

Hierarchical StructuresThe first step in designing a website is to draw a hierarchical structure diagram.

A Hierarchical Structure Diagram shows all the pages in a website and how they relate to each other.

This diagram shows the structure for a web site about a movie:

Home Page

PlotCharacters

Photos

Clips

HeroBad Guy

Individual PagesOnce the structure is created, individual pages have to be designed. This is done by creating wireframes for each page.

A wireframe design shows where individual elements of a page will be placed on the page.

Wireframe designs don’t cover the content of a page, except to not very briefly what the content in each frame will be. This wireframe shows what the home page might look like: Navigation Bar

Picture from film

Brief description of the film

The User Interface: NavigationThe user interface is how the user interacts with a computer application. In a website the designer has to think about how to make the website easy for the user to navigate.

Navigation bars and buttons are controls that the user can click on to take them to specific pages in a website.The navigation bar for the movie website might look like this:

Breadcrumbs show the trail the user has taken to get to a page and their position in the hierarchical structureA breadcrumb trail for the movie website might look like this:Home >> Characters >> Bad Guy

Home Characters Photos Clips

Mobile devices are different!Websites often have different versions for viewing the site from a mobile phone or tablet than from a desktop computer. The design of a mobile version of page has to take account of different factors:1. Screen size: Mobile screens are small. Putting too

many elements on a page makes it cluttered. Putting too much text on a page might make it too small to read

2. No Keyboard: Typing is difficult on a mobile, so text input is difficult. Drop down menu selection is better. The on screen virtual keyboard effectively makes the screen even smaller

3. Mobile Input Devices: Navigation can more easily be controlled by icons on a touch screen. Remember to account for fat fingers though!

Questions – Website DesignAnswer questions in full sentences!1. What is meant by a hierarchical structure diagram?2. How are the individual pages of a website designed?3. Describe what a navigation bar is.4. Explain how breadcrumbs aid the navigation of a

website.5. How does the size of the screen affect the

development of websites for mobile devices?6. How would you make the navigation of a website

suitable for a mobile device?7. Why might navigation buttons be included at the

bottom of a web page as well as the top?8. Use the method described in question 2 to design

another page of the movies website.

Testing, Testing…After a website has been created, three tests must be applied to ensure that it is correct:1. Does the structure of the website match the

hierarchical structure diagram drawn during the design stage.

2. Does each page match the wireframe design drawn of it.

3. Does each and every hyperlink and hotspot work correctly, taking the user to the correct page.

A website should only be uploaded to a web server once it has passed all these tests!

Anatomy of a URLOnce a website has been uploaded, its URL needs to be considered. The movie website homepage might be given the URL:

https://www.somegreatmovie.com/home.html

The URL is made up of three component parts:

Protocol: States how the information is to be transferred, for example:

http:// - over the internet from a web server

https:// - over the internet, using encryption to transfer the information securely

file:// - from backing storage on your computer

Protocol Domain Path

Domain NamesThe domain name of a website identifies the website as a whole and where on the internet it is found

Domain names uniquely identify a specific web server. When a browser is using a URL to find a web page, it uses the domain name to work out which web server to send its request to. There are special servers on the Internet called domain name servers which contain lists of which web server stores the websites for which domain name.

Every website must have a domain name. Domain names are bought and registered. They must be renewed periodically, or you run the risk of someone buying your domain name out from under you – known as cybersquatting.

Paths & AddressingThe path of a URL identifies the location of the web page on the web server.

It is possible to create a hyperlink that just use the path part of a URL:

Relative addressing is when a hyperlink gives the path from the current page to the destination page

Internal hyperlinks use relative addressing. This means you can test a website from a directory on hard disc before uploading it to a web server. The web page designer would not have to make any changes, as the relative addresses of the pages on the website are unchanged

Absolute addressing is when a hyperlink specifies all parts of the URL: protocol, domain and path.

External hyperlinks must use absolute addressing as they point to a different web server.

Questions – Testing & Uploading a WebsiteAnswer questions in full sentences!1. Describe fully each of the three steps that must be taken

to test a website is working correctly2. What are the three component parts of a URL?3. Explain the difference between http:// and https://.

When would you use https://?4. What is meant by a domain name?5. What is meant by a path?6. Why does a webpage URL need both a domain name and

a path?7. Explain the difference between absolute a relative

addressing8. Identify the protocol, domain name and path from the

following website:https://kincorthcomputing.wikispaces.com/National+4+%26+5+Computing+Science