The Internet & The World Wide Web Notes 3 theory lessons of notes on web pages Information Systems Design & Development: Structures and links, User interfaces, media types & Coding

Contents The Internet & The World Wide Web How To Design A Website Questions How To Design A Website Testing A Website & Uploading It Contents page with links to lesson topics

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. Refer to also: Military historical context Other communication methods over 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 Refer to also: Development of web by Tim Berners-Lee

Useful things to know… 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 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 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 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 In practice – its more complicated with DNSes playing a part

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! What is the Internet? What is the World Wide Web? How are web pages written and stored? What is a web browser? What is a web server? What is needed to uniquely identify a web page? What set of rules govern the transfer of web pages from server to browser? Explain the difference between an internal and external hyperlink? 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 Plot Characters Photos Clips The structure is often reflected in the file structure of the web server. Hero Bad Guy

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 Diagonal lines are a common way of specifying a frame is made up of media (pictures, sound video) rather than text

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: 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 Home Characters Photos Clips You might also include site search features. Mention also including hyperlinks organically in text (The text would read exactly the same without the links as with, but the links are sufficiently clearly labelled such that it’s clear what page they go to)

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: 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 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 Mobile Input Devices: Navigation can more easily be controlled by icons on a touch screen. Remember to account for fat fingers though! Compare different versions of same site?

Questions – Website Design Answer questions in full sentences! What is meant by a hierarchical structure diagram? How are the individual pages of a website designed? Describe what a navigation bar is. Explain how breadcrumbs aid the navigation of a website. How does the size of the screen affect the development of websites for mobile devices? How would you make the navigation of a website suitable for a mobile device? Why might navigation buttons be included at the bottom of a web page as well as the top? 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: Does the structure of the website match the hierarchical structure diagram drawn during the design stage. Does each page match the wireframe design drawn of it. 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 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 Other protocols such as ftp have fallen out of use

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! Describe fully each of the three steps that must be taken to test a website is working correctly What are the three component parts of a URL? Explain the difference between http:// and https://. When would you use https://? What is meant by a domain name? What is meant by a path? Why does a webpage URL need both a domain name and a path? Explain the difference between absolute a relative addressing Identify the protocol, domain name and path from the following website: https://kincorthcomputing.wikispaces.com/National+4+%26+5+Computing+Science