The Internet & The World Wide
Web Notes
Information Systems Design & Development:
Structures and links, User interfaces, media types &
Coding
Contents

The Internet & The World Wide Web
 Questions

How To Design A Website
 Questions

Testing A Website & Uploading It
 Questions
So just what is The Internet
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.
And the World Wide Web?
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
Useful things to know…
1.
Every page has an unique identifiers called Uniform
Resource Locators or URLs
URLs 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 HTML
Mark 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 HTTP
Remember, the Internet also uses other transfer protocols
for other types of information aside from webpages
Browsers and Servers
A 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
URL
HTML Document
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
Here’s how it all works
The 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 & WWW
Answer 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 Structures
The 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
Charac
ters
Plot
Hero
Bad
Guy
Photos
Clips
Individual Pages
Once 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: Navigation
The 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:
Home
Characters
Photos
Clips
Breadcrumbs show the trail the user has taken to get to a
page and their position in the hierarchical structure
A breadcrumb trail for the movie website might look like this:
Home >> Characters >> Bad Guy
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 Design
Answer 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 URL
Once 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
Protocol
Domain
Path
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
Domain Names
The 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 & Addressing
The 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
Website
Answer questions in full sentences!
1. Describe fully each of the three steps that must be taken to
test a website is working correctly
2. 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
addressing
8. Identify the protocol, domain name and path from the
following website:
https://kincorthcomputing.wikispaces.com/National+4+%26+5+Computing+Science