Slides badge

Website structure

Starter

Write down two things that makes a good user interface

Learning Intentions

  • Understand the idea of site structure and how important it is to get it right

  • Understand the concept of a sitemap and how to create one

Success Criteria

  • I can explain the concept of site structure
  • I can build a sitemap of a given website

The World Wide Web and the Internet

  • The Internet is a collection of computers and servers connected together. The Internet can be used to share files including music, videos and photos as well as computer programs.
  • The Internet also is built up of servers called web servers which host webpages.
  • The world wide web (WWW or W3) is a platform in which we build webpages and host files that will be available on the Internet.

Accessing files or webpages on the Internet

  • To access a file or webpage on the Internet we use something called a URL or Uniform Resource Locator.
  • Most websites are built up of many webpages that are linked together using hyperlinks.
  • Navigation bars, featured on most websites, often use links to other webpages on the website.

URL

A URL can give us a lot about a website’s structure:

  • https://www.example.com/
    https://www.example.com/documentation/
    https://www.example.com/documentation/policy.pdf

Sitemaps

  • When a website designer/developer first looks at what a client requires them to build, one of the first steps that the designer/developer takes is developing a map of all the pages, often this is done on paper.
  • This is called a sitemap.

Sitemaps

There are two kinds of navigation structures:

  • Linear
    • E.g. page 1 goes to page 2 and page 2 goes to page 3 etc
  • Hierarchical
    • Main navigation bar goes to any page on the site

Hierarchical sitemap

Linear sitemap

  1. Complete the Site Map task worksheet.
  2. Build a site map for one of the following websites:
    • apple.com
    • amazon.com
    • rbs.co.uk

Task

URL format

  • URLs need to be formatted in a specific way to ensure that the web browser and any other program that uses the URL can understand it. URLs are therefore standardised.
  • Some rules to note:
    • URLs should not contain spaces (use dashes [-] instead)
    • A forward slash in a URL is a key character and has a special meaning
    • Emojis can actually be used in a URL (meaning you can name files with Emojis!)
    • URL should be as descriptive as possible

URL format

http

://

www

.

google

.

co.uk

/

searches

/

?qry=windows

#2

URL format

http

://

www

.

google

.

co.uk

/

searches

/

?qry=windows

#2

URL scheme / Protocol

URL format

Subdomain

http

://

www

.

google

.

co.uk

/

searches

/

?qry=windows

#2

URL format

Domain / Organisation

http

://

www

.

google

.

co.uk

/

searches

/

?qry=windows

#2

URL format

Top Level Domain (TLD)

http

://

www

.

google

.

co.uk

/

searches

/

?qry=windows

#2

URL format

Path

http

://

www

.

google

.

co.uk

/

searches

/

?qry=windows

#2

URL format

Query

http

://

www

.

google

.

co.uk

/

searches

/

?qry=windows

#2

URL format

Fragment

http

://

www

.

google

.

co.uk

/

searches

/

?qry=windows

#2

An example

http://www.buy.com/about/products

Where does this URL take us? What do we know about the page from the URL?

Creating a URL

When you are creating a URL, follow several rules;

  1. Keep the URL short
  2. Use keywords in the URL, e.g. if the page is about searching then name it appropriately
  3. URLs should not contain spaces, use the dash instead.

Create a URL for your new website (http://www.myname.co.uk/) that takes the user to a page for each of the following:

  • About me
  • What I sell
  • What I sell : Product 1
  • Blog
  • Blog : Post 3

Task

Presentation Overview
Close
JB
Website structure
© 2020 - 2024 J Balfour
15:57 | 23-05-2024
Join Live Session
Start Remote
Save Progress
Slideshow Outline
Presenter Mode
Widget Screen
Canvas Controls
Random Selector
Timer
Volume Meter
Binary Converter
Python Editor
Show Knox 90
Provide Feedback
Help
!
Keywords
    DragonDocs Management
    Random selector
    Sections
      Binary conversion
      Denary to binary conversion
      Binary to denary conversion
      Feedback 👍
      Accessibility

      Apply a filter:

      ×
      All slideshow files