An introduction to 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).

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 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. 
  • 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.

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

JB
7 Web Development : 1.1 An introduction to web design
© J Balfour
Tools