Website design and structure

Website design and structure

• A Website is a collection of webpages that are linked together.

• Webpages contain text, graphics, sound and video clips.

• The first page which links to all the others is called the home page.

Website Structure

• Here are 3 common ways to structure your website:

• Linear structure• Hierarchical structure• Mesh structure

Linear Website Structure

• This is the simplest way to structure your website: One page simple leads onto the next

Hierarchical / TREE Website structure

• This structure is more complex and has different levels

Mesh Website Structure

• This structure is very complex and can be confusing to a user

Website:

What kind of structure does this website have?

Uniform Resource Locator(URL)

• A Uniform Resource Locator(URL) points to a resource on the Internet, usually a website.

• For example: http://www.bbc.co.uk/• This is divided into 3 parts• The 1st part is the protocol. The most common

one is http. This stands for Hypertext Transfer Protocol. It is used in transferring web pages to your computer. Some URLs begin with ftp. This stands for File Transfer Protocol and is used to transfer files across the Internet.

URL

• The 2nd part indicates which server the web page is stored on e.g. the particular server where the web page is stored on e.g. www.bbc

• The 3rd part indicates the type of organisation that is storing the web pages e.g. . co.uk for a company in the UK. Here are some examples of the 3rd part of the URL

URL

3rd part Type of Organisation

.sch school

.com commercial company

.net network organisation

.mil military

.org an organisation

.gov government organisation

.ac An academic organisation such as a university or college.

Hyperlink

• Web pages are linked together using hyperlinks.

• Hyperlinks can take the form of underlined text or a graphic. Clicking on the hyperlink then displays the linked web page.

HyperlinksClicking on the underlined text will display the webpage on winter sports.

Clicking on the graphics will display web pages with video clips

Internal Hyperlinks

• Internal hyperlinks link to other pages on the same website

External Hyperlinks

• External Hyperlinks link to web pages on another website:

Hyperlink absolute addressing

• An absolute web address: specifies exactly where the web page is stored. It directs you to the server on which it is stored and always includes: http://www

• E.g. http://www.metoffice.gov.uk/public/weather/forecast/?tab=fiveDay

Hyperlink: Relative addressing

• A relative web address can be used to • link a web page to other web pages on the

same website = an internal hyperlink. • point to a file or a file path on the computer in

which it is being developed e.g. help/articles/creating_web_pages.html

Web Browsers

• A browser is a program that helps you navigate the World Wide Web. You use a browser to move between and look at web pages.

• There is a wide choice of browsers to choose from: can you name these 4?

Web Browser Features

• The web browser allows the user to – find and look at web pages– to navigate between web pages and web sites.– To move backwards and forwards between web

pages using the back and forward buttons– Bookmark your favourite pages– Remember which pages you have visited using the

‘history’ function

Search Engines

• Search engines are used to look for web pages.

• The search engine will find all the web pages related to a topic and send the results to your computer for your browser to display them.

Search results

There are lots of search engines

Scripting Languages

• Scripts are small programs that can be used to– automate tasks by creating a Macro or– generate dynamic content for web pages.

• Commonly used scripting languages are:• VB Script, applescript, javascript

Javascript

• Javascript has many of the standard features of a programming language such as:– setting up and assigning variables– repeat loops– if + conditions– arithmetic – operators.

• Javascript is usually embedded directly into HTML pages

Java example

Try Javascript for yourself: visit http://www.w3schools.com/js/default.asp

HTML

• HTML – is a language used to create web pages.– uses ‘TAGS’ to create the pages

• Tags are codes that refer to – parts of a document e.g. a paragraph or the title.– The style and formatting of text

HTML Tags

• Here are some commonly used tagsTAG What the TAG identifies

<HTML>…<HTML> Start and end of an HTML file

<HEAD>…<HEAD> Start and end of the HEAD section

<TITLE>…<TITLE> Page title

<BODY>…<BODY> Start and end of the content of a page

<Hx>… <Hx> Headers numbered 1-6

<I>…<I> Italics style

<B>…<B> Boldface style

<center>…<Center> Centre alignment

<P>...<P> Paragraph

HTML

• Here is an example of some simple code:<p style="text-align:left;">Left</p><p style="text-align:center;">Center</p><p style="text-align:right;">Right</p>

Try your own HTML code: visit this sitehttp://www.w3schools.com/html/default.asp