ARDENNE HIGH SCHOOL

WEB PAGE DESIGN HANDOUT

GRADE 11

What is Web Page Design?

Web pages are what make up the World Wide Web. It is a hypertext document connected to the
World Wide Web. These documents are written in HTML (hypertext markup language) and are
translated by your Web browser. Web pages can either be static or dynamic. A static webpage
doesn’t change while a dynamic webpage is constantly being updated with content. The first page you
see when you enter a website is called a home page. This is the main page from which all other pages on
the website is accessible.

Reasons for a Website

A group of web pages together forms a website. Websites must be created with a sole purpose in
mind. Reasons may include:

1. It’s an online brochure for most businesses. Instead of creating brochures and
distributing them, your customers can find out about you online.
2. Attract more customers because many people use the internet daily.
3. Your website can be your marketing tool with other businesses.
4. 24 hours access
5. Instant communication
6. Cost savings as it costs very little to maintain.

These are a few of the reasons why web pages are created, however, when creating your web
page you must have a sole purpose in mind for creating it so that when constructing your site
map you already know what your web page will do. Remember the number of web pages
desired is not limited and depends on how wide your product or business is.

Intended Audience
What's a target audience and who are you designing for anyway? In the rush and excitement of building a
website, it's easy to focus on being impressive and trying to “blow away” the competition. That's natural,
and we all recognize the value of representing yourself well. But this ignores possibly the most important
element of Internet marketing, one that has everything to do with the potential and future success not only
of the website but of your company's ventures both online and off. Representing your company well, that
is, the impression you convey to website visitors, is usually the first and foremost concern of companies
seeking to promote, or promote more effectively, on the Internet. Regardless of whether you're designing
a “brochure” website (pages that simply give information) or a full-fledged e-commerce website, websites
are about communication. The question is: who are you communicating to?

The answer is, of course: the audience for whom you intend it. Your customers, your readership,
whomever you wish to view what you have to say. Your target audience. The idea is to meet those
people looking for your product or service with your presentation of your product/service, and one that
will convince them to buy from you.

Who are your customers?

What kind of presentation would seem “right” to these particular people?

Those are the two basic questions: who buys your product and service, and what approach, look, appeal
would seem “right” to them. These questions alone open the door to designing more effective websites,
advertising and promotional materials that appeal more specifically to your target audience.

It's an unfortunate fact that many website designers do not consider these issues when building websites,
preferring instead to concentrate on the “design” aspects of their work and letting their clients come up
with the actual marketing. While design may be the most “fun” aspect of web design for many web
designers, the fact is that you're then relying on clients to know what is the best way to approach their
target audiences.

Content of your Web Page

A typical visitor will NOT read the entire content of your Web page. No matter how much
useful information you put into a Web page, a visitor will only spend a few seconds scanning it
before they decide whether to leave or to stay. Be sure to make your point in the very first
sentence of the page, after that, try to keep the user occupied with short paragraphs, and new
headers down the page, less is more. You must:

 Keep the paragraphs as short as possible.

 Keep the pages as short as possible. (No more than 3 is desired for your IT class purpose)
 Use a lot of space! Pages overloaded with text will kill your audience.
 If you have a lot to say, break your information into smaller chunks and place it on
different pages!
Layout of the Webpage

1. Header - Visible at the top of every page on the site. Contains information relevant to all pages
(like site name or logo) and an easy-to-use navigation system.
2. Main Content - The biggest region, containing content unique to the current page.
3. Stuff on the side - 1) Information complementing the main content; 2) information shared among
a subset of pages; 3) alternative navigation system. In fact, everything not absolutely required by
the page's main content.
4. Footer - Visible at the bottom of every page on the site. Like the header, contains less prominent
global information like legal notices or contact info.

These elements are quite common in all form factors, but they can be laid out different ways.
Here are some examples (1 represents header, 2 footer; A main content; B1, B2 things on the
side):

1. Column layout. Especially important for mobile browsers so you don't clutter the small
screen up.

2. Column layout. Often used to target tablets, since they have medium-size screens.

3. Column layouts. Only suitable for desktops with big screens. (Even many desktop-users
prefer viewing things in small windows rather than full-screen.)
    

4. The real fun begins when you start mixing them all together:

     

These are just examples and you're quite free to lay things out as you want. You may notice that,
while the content can move around on the screen, we always keep the header (1) on top and the
footer (2) at the bottom. Also, the main content (A) matters most, so give it most of the space.

Choosing an appropriate Design for a Web Page

Effective web design is judged by the users of the website and not the website owners. There are
many factors that affect the usability of a website, and it is not just about form (how good it
looks), but also function (how easy is it to use). What makes a good design?

1. Purpose - Good web design always caters to the needs of the user. Are your web visitors
looking for information, entertainment, some type of interaction, or to transact with your
business? Each page of your website needs to have a clear purpose, and to fulfill a
specific need for your website users in the most effective way possible.

2. Communication - People on the web tend to want information quickly, so it is important

to communicate clearly, and make your information easy to read and digest. Some
 effective tactics to include in your web design include: organising information using
headlines and sub headlines and using bullet points instead of long windy sentencee.

3. Colours - A well thought out colour palette can go a long way to enhance the user
experience. Complementary colours create balance and harmony. Using contrasting
colours for the text and background will make reading easier on the eye. Vibrant colours
create emotion and should be used sparingly (e.g. for buttons and call to actions). Last but
not least, white space/ negative space is very effective at giving your website a modern
and uncluttered look.

4. Images - A picture can speak a thousand words, and choosing the right images for your
website can help with brand positioning and connecting with your target audience. If you
don’t have high quality professional photos on hand, consider purchasing stock photos to
lift the look of your website. Also consider using infographics, videos and graphics as
these can be much more effective at communicating than even the most well written
piece of text.

5. Navigation - Navigation is about how easy it is for people to take action and move
around your website. Some tactics for effective navigation include a logical page
hierarchy, using bread crumbs, designing clickable buttons, and following the ‘three click
rule’ which means users will be able to find the information they are looking for within
three clicks.

6. Grid Based Layouts - Placing content randomly on your web page can end up with a
haphazard appearance that is messy. Grid based layouts arrange content into sections,
columns and boxes that line up and feel balanced, which leads to a better looking website
design.

7. F Pattern Design - Eye tracking studies have identified that people scan computer
screens in an “F” pattern. Most of what people see is in the top and left of the screen and
the right side of the screen is rarely seen. Rather than trying to force the viewer’s visual
flow, effectively designed websites will work with a reader’s natural behaviour and
display information in order of importance (left to right, and top to bottom).
Creating Simple Web Pages

HTML Tags

A web page is created using a language called, Hypertext Markup Language, better known as
HTML Code. You can write your own coding within a plain text editor, such as Note Pad, or use
an HTML editor, which will write the code for you. When saving your html document form
notepad ensure you put the “.html” extension on the filename. E.g. World.html.
HTML tags are element names surrounded by angle brackets:

HTML codes, also referred to as HTML tags, are enclosed by the lesser than (<) and greater than
(>) brackets and may be written in capital or lowercase letters.
The opening bracket is followed by an element, which is a browser command, and ends with the
closing bracket.

<tagname>content goes here...</tagname>

HTML tags normally come in pairs like <p> and </p>

The first tag in a pair is the start tag, the second tag is the end tag.

The end tag is written like the start tag, but with a forward slash inserted before the tag name

Tip: The start tag is also called the opening tag, and the end tag the closing tag.

Basic HTML Document Code Structure

Begin writing your HTML tags by creating your document's basic layout.

Always begin and end your web page with the html tag as shown below. The header/title of
your web page should go in a head tag. Once you open the head tag, the title tag proceeds with
the title after which you close both tags. See example below. The body tag is where the content
of your webpage is outlined. To start the content of your webpage you open a body tag followed
by the content of your web page. If you desire a background color or image in your web page
then this is contained within the body tag. See example below. You close the body tag once you
are finished typing your content. Please note the body starts after you have closed your head tag
containing your title.
<html>
<head>
<title>Your Page Title</title>
</head>
<body bgcolor = “red” text = “blue”>

</html>

Formatting the Body of your Web Page

Heading

<h1> Put your header here </h1>. A size 1 header is larger than a size 2. You can begin with
any size you choose, designated by h1, h2, h3, for example. 

Example

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

Paragraph

 <p> - This tag signifies a paragraph. No final paragraph tag is needed. Final tags, when used,
have a "/" in front of the html letters.

Example

<p>This is a paragraph</p>
<p>This is another paragraph</p>

<p>This is a paragraph.</p>

Block Quote
Used to indent text in a paragraph. <blockquote> I am a Boy. </blockquote>

Creating Line Spacing

<br> - This tag at the end of a line signifies a line break.

Changing Font Size and Color

Use the following tag to adjust the font size of your text if desired: <font size = “2”>

Any number can be used, the higher the number the bigger the font desired.

E.g. <font size = “10” color = “blue” My name is Jack </font>

Most tags open must be closed. We close a tag by putting the tag itself with a back slash inside
the tag.

Bolding your Content

You can bold your content by using the bold tag: <b>.
E.g. <b> My name is Jack </b>

Centering Text

To center text on the page use the following tag:

<center> - Text between these two symbols will be centered on the page.</center>

For example, if you place these tags along with the <H2>,</H2> tags, your heading will be
centered.

E.g. <H2> <center> This is my Heading </center> </H2>

Point to Note: When you use more than one tags together, the last tag you open is the first
tag you close.

Inserting a Horizontal Line

<hr>_________________________________________________________________
The hr symbol placed in between sections of text makes a horizontal divider bar to separate
material on your page. The line you see above emulates the line that will appear in your home
page if you use the <HR> option.

Italizing

<i> Words between these tags will show as italicized text</i>

Making an Unordered List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The CSS list-style-type property is used to define the style of the list item marker:

Value Description

disc Sets the list item marker to a bullet (default)

circle Sets the list item marker to a circle

squar Sets the list item marker to a square

e

none The list items will not be marked

The list items will be marked with bullets (small black circles) by default:

<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

E.g.
  Coffee
 Tea
 Milk

Ordered HTML List - The Type Attribute

The type attribute of the <ol> tag, defines the type of the list item marker:

Type Description

type="1" The list items will be numbered with numbers (default)

type="A The list items will be numbered with uppercase letters

"

type="a" The list items will be numbered with lowercase letters

type="I" The list items will be numbered with uppercase roman numbers

type="i" The list items will be numbered with lowercase roman numbers

<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Insert Graphics Files

To insert pictures use the following tag:

<img src="picture.jpg" align=left> - Graphics usually have a .jpg or .gif file extension. Insert

the name of your image file between the quotation marks to replace the "picture.jpg" filename. 

The file could have a .gif extension. The "ALIGN =left" tag signifies the image is to be aligned

to the left of the web page. You can choose left, right, center.

Wrapping Text with Image

<p> <img style = "padding: 0 15px; float: left;" src = "http://jamaica-

gleaner.com/sites/default/files/styles/jg_article_image/public/media/article_images/2016/03/09/

ArdenneHighE20160309IA.jpg?itok=BOzug9aR" alt="canvas_stack.jpg" width="180" height

="170"/> </p?

<p style ="margin-top: 20px;"> </p>

<p> I want my text wrapped around the image </p>

<p>What are the steps to do this </p>

To have text wrap around the image you will need to insert style="padding: 0 15px; float: left;"
after <p> <img and before the Image Reference.
Note:  You can change the float attribute to "right" if you want the image on the right with text
wrapping around it, or "center" if you want the image in the center of the text.
You will also have to add
<p style="margin-top: 20px;"> </p>
after the </p> proceeding the Image Reference
Here are some basic HTML tags that show how a web page is created.

<html>

<head>
<title> favorites / bookmark title goes here </title>
</head>

<body bgcolor="white" text="blue">

<h1> My first page </h1>

This is my first web page and I can say anything I want in here - I do that by putting text or
images in the body section - where I'm typing right now :)

<center> <b> <i> THIS IS THE END </i> </b> </center>

</body>

</html>

Creating Hyperlinks
In web terms, a hyperlink is a reference (an address) to a resource on the web.

Hyperlinks can point to any resource on the web: an HTML page, an image, a sound file, a
movie, etc. An anchor is a term used to define a hyperlink destination inside a document.

HTML links are defined with the <a> tag.

Example

<a href="http://www.w3schools.com">This is a link</a>

This is how you create a tag that will allow someone using your Web page to click and be taken
to another Web page or Web site, link to another web page, link to an email address, user files
etc.  Replace the http:// address between the quotation marks with the exact address of the web
document to which you want to link. The web address will not be displayed on your web page
but only the name which you give the address.
The href attribute defines the link "address".

This <a> element defines a link to W3Schools:

Forms
A form is an area that can contain form elements.

Form elements are elements that allow the user to enter information (like text fields, textarea
fields, drop-down menus, radio buttons, checkboxes, etc.) in a form.

A form is defined with the <form> tag.

<form>
First name:
<input type="text" name="firstname" />
<br />
Last name:
<input type="text" name="lastname" />
</form>

Steps to create a website

1. Choose a Domain Name - Your domain name forms part of your site URL or address
and it's the name by which your site will come to be known by visitors. e.g.
www.google.com

2. Pick a Hosting Plan – A web host, or web hosting service provider, is a business that
provides the technologies and services needed for the website or webpage to be viewed
in the Internet. Websites are hosted, or stored, on special computers called servers.

3. Choose a platform

4. Design your webpages or site map – this is a plan or layout of what your website will
look like.

5. Pick a Theme

6. Create your webpages

7. Upload Your Content

Consideration for Publishing a Website
When launching a website, you can often forget a number of things in your eagerness to make it live,

so it’s useful to have a checklist to look through as you make your final touches and before you

announce your website to the world:

1. TITLES AND META DATA

Your page title is the most important element and is also important so that users know what’s
on the page. Make sure it changes on every page and relates to that page’s content.

2. CROSS-BROWSER CHECKS

Just when you think your design looks great, pixel perfect, you check it and see that

everything is broken. It’s important that your website works across browsers. It doesn’t have

to be pixel perfect, but everything should work, and the user shouldn’t see any problems. The

most popular browsers to check are Internet Explorer 6, 7 and 8, Firefox 3, Safari 3, Chrome,

Opera and the iPhone.

3. PROOFREAD

Read everything. Even if you’ve already read it, read it again. Get someone else to read it.

There’s always something you’ll pick up on and have to change. See if you can reduce the

amount of text by keeping it specific. Break up large text blocks into shorter paragraphs. Add

clear headings throughout, and use lists so that users can scan easily. Don’t forget about

dynamic text too, such as alert boxes as well as ensuring that your information is up-to-date.
4. LINKS

Don’t just assume all your links work. Click on them. You may often forget to add “http://”

to links to external websites. Make sure your logo links to the home page, a common

convention.

Also, think about how your links work. Is it obvious to new users that they are links? They

should stand out from the other text on the page. Don’t underline text that isn’t a link because

it will confuse users. And what happens to visited links?