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
.com
.net
school
commercial company
network organisation
.mil
.org
.gov
.ac
military
an organisation
government organisation
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.
Hyperlinks
Clicking 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 tags
TAG
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 site
http://www.w3schools.com/html/default.asp