Website Design

We are going to look at the basics of creating a website. We will get a chance to see a bit of HTML, the building blocks of all websites, and then get a change to design a much more advanced website using some pre-built templates.

Part 1 - HTML Basics

What is a website? How do web browsers know what to display?

      • HTML stands for Hyper-Text Markup Language.

      • The Origins of Webpages

      • Making our first webpages using Notepad.

Here are some examples of web pages from the early days, before we had high speed internet and advanced interactive features:

Tips and Tricks

Adding Images

    • use the Image tag: <img src="put location of file here">

        • you can also specify a size for the image using: height="size in pixels" width="size in pixels"

        • <img src="put location of file here" height="200" width="300">

    • You can center an image (and text) by surrounding it by the <center>/<center> tags

Adding Links

    1. Specify the target in the <a href="link address here">

    2. Then add the text that should work as a link. You can also put an image here.

    3. Finally add an </a> tag to indicate where the link ends.

Changing Background Color

    • use the Body tag, and add a 'style =' property: <body style="background-color:#FF0000;"> </body>

    • you can specify the color by setting the RGB values in Hexadecimal (similar to binary, but base 16)

    • the above example makes the background red : #FF0000;

    • see the link below to get the RGB values in Hexadecimal:

Change Font Color

  • put a <font></font> tag around any text that you want to change the color of:

  • <font color="#FF0000"> SOME TEXT HERE </font>

  • The above example makes the font color red: #FF0000

  • see the link below to get the RGB values in Hexadecimal:

Part 2 Do's and Don'ts of web design and Making our first page.

      • What NOT to do on your website.

What makes a person leave your website in 3 seconds infographic?

      • Good design features.

5 Principals of good design.

What to do:

      • Complete the research handout on Principals of Good Website Design

      • Create a website using a website builder(see below for details):

            • Wix (recommended, not because it is the best, but because it is the only one I have used)

            • Website Builder (I've heard good things)

            • Weebly (I've heard good things)

            • Google Sites (very limited options, not recommended)

            • Any other of your choosing... (at your own risk)

Here are some examples of bad website design:

You are going to make a website. Make it about you, or your interest(s). The point of this is to experiment with the website builder, and the various features available. See the assignment sheet for details.

Try to add the following:

      • Background picture(s)

      • Images, Gallery, Slideshow

      • Video(s)

      • Button(s)

      • Links (from a button or a picture to another place on the web)

      • Text

      • Try to ‘embed’ one of your scratch programs

      • Change the menu by adding or removing pages

      • Calendar

      • Interactive element

      • Anything that catches your eye in the editor.

Part 3 - Create Your Own Charity

      • Use the website builder of your choice to build a full website for a fictional charity of your own invention.

      • Follow the assignment outline to make sure your site meet all requirements.

            • logo

            • slogan

            • mission statement

            • required pages

            • statistics

            • goals

            • professional looking

            • ...

Here are some links to past creations:

Mission Statement Formula