Slides badge

Website Design

Learning Intentions

  • Understand the basic structure of a webpage

  • Be able to use tags in HTML effectively

Success Criteria

  • I am able to build the basic structure of a webpage using HTML
  • I can use some HTML tags

What this unit is

  • The next unit of learning we are going to work on is web design and development, but rather than developing your website with a website builder like Google Sites, you are going to build it with code.

  • This unit will start off with a very gentle introduction to web development and will move on to the more advanced parts of it.

  • The lesson structure for this unit is flexible and designed to give you as much time as possible to develop your own skills, encouraging you to better yourself at using HTML and CSS.

What this unit is

  • You are expected to complete 1 web development task each week. To assess what you’ve learned, you will also be given a worksheet at the end of every lesson.

  • At the end of the unit there will be a short test as well as practical project. You may start working on the practical project at anytime when you have finished (details to follow).

More about the project

Web development project

  • Your final project task will be to build a website with several HTML pages and an external CSS file linked into it.

  • You will be provided with the basic structure of a website with a linked CSS file.

  • You will work on this using the Trinket editor and share it with your teacher when you are done.

How do we create a webpage?

  • Websites are created using multiple webpages. These webpages are created using HTML or Hyper Text Markup Language.

  • When a webpage is viewed in a browser such as Google Chrome or Microsoft Edge, the webpage is rendered by the browser. When the webpage is rendered the code is transformed into objects and the page is known as a web document.

  • A webpage is made up of HTML tags such as <p> or <a>. When the webpage is rendered these tags are transformed to elements.

How do we create a webpage?

<!doctype html>
<html>
<head>
<title>Sample webpage</title>
</head>
<body>
<h1>My website</h1>
<p>
Welcome to my website!
</p>
</body>
</html>

How do we create a webpage?

Starting out - identifying the requirements

  • The first step to develop a website is to identify the requirements of the website.
  • This stage is called analysis or requirements gathering.
  • These requirements will be defined by several things, including:
    • Who the users of the website are
    • What the website is about
    • How the website will be used

The purpose of the website

  • The purpose the website is one of the very first things to consider when building a website. For example, a website about archeology is no good to a user if it discusses politics.
  • As a result, the purpose of the website should be well-thought out, with the intentions of the website being carried out throughout its development.

Target audience

  • When developing a website, one of the very first things that the developers think of is the target audience for their website.
  • For example, Apple might target users who are interested in the latest technology whereas Amazon might target multiple different users for their website.
  • Another way that the audience can be identified is by the country the website is targeting. For example, a .co.uk website is only intended for people in the UK whereas a .com is world-wide.
  • Websites may also target specific age groups, for example a website for retirement homes might specifically target elderly users.

URLs

  • A URL or Uniform Resource Locator is simply a full path to a webpage or file.
  • For example https://www.amazon.co.uk/ is the full URL of Amazon's UK homepage. This is sometimes known as a web address.

lINKS

  • A link or hyperlink is the method of navigating the web.
  • A user moves from one page to another via a collection of these links.
  • If a link points directly to a page (e.g. https://www.amazon.co.uk) then it is an absolute link.
  • If a link points to a file in relation to where that file is (e.g. images/image1.png) then it is a relative link.
  • When links point to the same website, it is called an internal link.
  • When they point to another website they are called an external link.

Search engines

  • The world wide web is made easier to navigate by the use of search engines such as Google.
  • A search engine crawls the web and websites looking for keywords to identify the webpage.
  • If a user types in something they want to find, the search engine looks through its database to see for webpages that match that criteria.

Select four of the websites below and identify the purpose and target audience of each website.

  • next.co.uk
  • amazon.co.uk
  • apple.com
  • diy.com
  • mcdonalds.co.uk
  • hp.com
  • homeenergyscotland.org
  • pcworld.co.uk

Task

Presentation Overview
Close
JB
Website design
© J Balfour
04:12 | 06-12-2023
Join Live Session
Start Remote
Save Progress
Slideshow Outline
Presenter Mode
Widget Screen
Canvas Controls
Dark Mode
Bold Text
Random Selector
Timer
Binary Converter
Python Editor
Show Knox 90
Provide Feedback
Help
!
Keywords
    Random selector
    Sections
      Binary conversion
      Denary to binary conversion
      Binary to denary conversion
      Feedback 👍
      Accessibility

      Apply a filter:

      ×
      All slideshow files