Scribd
Upload
18 views

Web Design

Uploaded by

aijikamedard
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
18 views

Web Design

Uploaded by

aijikamedard
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

A PRACTICAL GUIDE TO WEB DESIGN

BY

MUHUMUZA ONAN

WEB DESIGN.

GUIDE & QUESTIONS FOR Web design P a g e 1 | 11


Introduction
Web design is a process of planning and creating a website. While designing
websites, texts, images, digital media, interactive elements and tables can be used
by the web designer to produce an outstanding website that can be seen on the
web browser.
Web design basically deals with developing preliminary web pages
A web design program/application is a computer program that is used to create,
edit and upload web pages and websites.
Examples of web design software/application include;

i. Html-kit tools.
ii. Serif web Plus
iii. Coffee Cup Visual Site Designer.
iv. Web Easy Professional.
v. Net Object Fusion
vi. Adobe Dream Weaver Cs.5.
vii. Ace HTML 6 Pro
viii. Ultra Edit.
ix. Web studio
What is a web site?
One can define a web site as a collection of related web pages.
Or
This is a document available on the World Wide Web that is created using html
(Hyper Text Markup Language) and can be viewed with an internet browser. For
instance Google, Netscape, explorer among others.

A web page can contain graphics, image, text, links and other multimedia
components. A web page can be made up of a number of separate paged
documents. It is normally a collection of documents that make up a website.
A home page: this is main page or the cover page of the web document that
contains an index or table of content to the rest of the documents.
Usually, a web site after being fully developed/designed, it is hosted on at least
one web server that is accessible via a network such as a the internet network, or
any other available private network.

The most common way to get a web site is to feed in or enter that Uniform
Resource Locator (URL).

GUIDE & QUESTIONS FOR Web design P a g e 2 | 11


• A Uniform Resource Locator is a unique address of the file that is accessible
over the internet.

INTRODUCTION TO BASIC HTML.


A html stand for Hyper Text Markup Language. It is specifically a language for
displaying web pages. It is not a programming language but a markuplanguage.
A markup language is a set of markup tags.
Tags majorly give the browser instructions on page display. They include
thestarting tag (<) and the closing tag (>) they are normally enclosed in angle
brackets i.e.
<Html>. They normally come in pairs e.g. <h1> and </h1>. The first tag in the pair
is the “start tag” and the second is the “end tag”.
A html file is a text containing small markup tags.
A markup tag is one that tells the web browser how to display the page. AHTML
must have an htm or html file extension. A HTML file can he created using a simple
text editor.
Let‟s try to work out with HTML
In window environment, follow the following steps.

1. Click start on the task bar


2. Select all programs 3. Select accessories
4. Select notepad.
Here, the first tag on your html document is <html>. This tells your browserthat
this is the start of an html document.
The last tag should be </html>. This tag tells your browser that this is the end of
the html document.
The text between the <head> tag and </head> tag is the header information.
Header information is not displayed in the browser window.
The text between the <title> ta and </title> tag is the title of your document. The
title is displayed in your browsers‘ caption (title bar).
The text between the <body> tag and Thody> tag is the text that will be displayed
in your browser.
Example;
<Html>
GUIDE & QUESTIONS FOR Web design P a g e 3 | 11
<Head>
<Title> title of the page </ title>
</head>
<Body>
This is my first home page <b> this text is bold </b>
</body>
</html>
Save the file as ―home page.htm‖ or homepage.html‖ on your desktop.
Elaboration;
In the above example <b> tag and </b> tag makes the text between bold.
Open the file you have just created by using the browser on your computer.
(Internet explorer, Firefox or opera)
You should then be able to see an address in the dialog box for example
“C:/desktop/homepage.htm” this is if you are using windows XP. And for
windows
7, one hou1d be able to see file:///C:users/usernarne/Dsektop/homepage. htm
Saving a html file:

➢ Select file (Alt + F) then you will be presented with a dialog box ➢ Select
Save As.
➢ Make a new folder and name it whichever name you want. Then open it.
➢ Type ―page 1‖.html on file name ➢ Select the destination/file location ➢
Then save.
Changing colors:
To change background colors, keep the other line written and follow the following
steps;

➢ <BODY BGCOLOR= ―#CCFFCC‖>


</BODY>.
Note: if the background colors are specified that is not one of the known colors,
thenthe browser will usually pick the closest of these colors to use.
Formatting tags. (Bolding)
We can make things bold by

➢ = <BODY>something or what you want to bold <B>cool</B></BODY>


➢ Cool

GUIDE & QUESTIONS FOR Web design P a g e 4 | 11


➢ What we are trying to tell the browser is that at the <B> start making things
bold
➢ And at the </B>stop making things bold.
Formatting tags (italics)
The same principal applies to italics

➢ <BODY>something<
➢ rz‘ <B>cool</B>‘</BODY>.

Something really cool.

Underlining

➢ <BODY><U>something or what you want to underline </U></>really</ I>


➢ <B>cool</B></BODY>
Something really cool

Font sizing

To change the font size, you need to first add the font tag

➢ First add the <FONT> tags.


➢ <BODY>something to font size
➢ <FONT>cool</FONT></BODY then specify a SIZE attribute.
➢ <BODY> something really <FONTSIZE=6>cool</FONT></BODY>

i.e. something really cool

RESOURCE QUESTIONS FOR WEB DESIGN.

1. Using any available web publishing software, design a web page for a hotel.
Make sure our home page is impressive but not too slow to download.

You are expected to include:

a) page title
GUIDE & QUESTIONS FOR Web design P a g e 5 | 11
b) less graphics
c) Work (text) text between 150 — 200.
d) not more than two links
e) an ordered list (6 hobbies)
f) good designing
g) Creativity.

as a member of the environment club you are assigned to design a web page‖ on
the effects of pollution on society‖

You are expected.

Include the following

i. page title
ii. less graphics
iii. not more than 100 words
iv. one link to environ@yahoo.com
v. creativity
vi. date/source/feed back

b. the pages should be well linked

c. save your work as ―My web‖


2. Using any available web publishing software, design a website for the
ministry of education.

You are expected to include the following:

a. A page title
b. Appropriate graphics
c. A 100-120 word text
d. 1 link(for the ministry‘s email address)
e. Table showing the duties of the ministry
f. Layout
g. Creative designing
h. Save your work as education ministry.
GUIDE & QUESTIONS FOR Web design P a g e 6 | 11
3. You are contracted to design a web page for Mukono industries. As a web
master, you are required to include:

i. A page title
ii. Appropriate graphics
iii. Not more than 120 words on the company and its products
iv. A link for each of the products
v. A layout
vi. The author of the text who can be contracted•
vii. Creativity
viii. Save your web site as Mukono.
4. Using any available web publishing software, design a two page web site for
your former primary school:
i. The first page is the index or home page, it should include:

a. The name of the school and the school logo.(the logo does not have to be the
actual logo of the school)
b. Any introduction information
c. Address of the school (does not have to be the actual address)
d. A facility for visitors to sd an e-mail to the school.
e. Navigation bars
(ii) The second page should contain a bulleted list of the department in the school,
and a table showing at least four teachers indicating the classes and the respective
subjects they teach.

The two pages must be linked together.

• Save your website as name primary school.


• Print out the home page and the linked pages.
5. Using web design software of your choice, design a web site for your former
primary school which includes:

a. An index page with the name of the school and a picture of an important
feature in the school. (The picture does not have to be the actual one but
should be closely related.)
b. One page on the,

GUIDE & QUESTIONS FOR Web design P a g e 7 | 11


i. Different subjects offered
ii. School admission
iii. Sports and co- curricular activities. iv. Neighboring community.

6. Using any available publishing software design a school home page .make
sure the home page is very impressive but too slow to download.

You are expected to include the following,

a. A page title
b. Appropriate graphics
c. A 100-l20 word text
d. 1 link (for the school email address)
e. Table — showing at least four years UCE performance by the school. f.
Layout
g. Creative designing
h. Save your work as my school

7. A company called atekere milk production and accessories is willing to


employ your services as a website authorizing specialist to design a website for
them. This will include the following:

The page should have,

I. Provision for inserting the company‘s products picture.


II. Eight departments i.e.
• Director‘s office
• Production department‘s Office
• Human resource office
• Accounts office
• Welfare department
• Engineering department
• Security department
• Transport office

GUIDE & QUESTIONS FOR Web design P a g e 8 | 11


a. Create a link on the production department in (a) (ii) above that will lead you to
page explaining what the department does.

b. Include the company‘s vision, mission, and core values‘ statement at the bottom
of the index page.

c. Provision should be made for originality, creativity innovation andappropriate


use of graphics.

d. Save your work in your name and index number

e. Print your work.

8. Using any available web publishing software, design your school‘s home page
make sure that your school is well represented in this project.

You are expected to include the following:

a. Page title
b. Less graphics
c. Word (text) between 100-1 10.
d. 1 link (for the school‘s e-mail address.)
e. Table -showing four departments of your school.
f. Designing
g. Creativity.

9. You are contracted to design a web page for Mukwano industries. As a web
master, you are required to include:

a. Page title.
b. Appropriate graphics
c. Not more than 120 words on the company and its products.
d. A link for each of the products.
e. A layout.
f. The author of the text who can be contacted.
g. Creativity.
GUIDE & QUESTIONS FOR Web design P a g e 9 | 11
h. Save your work as on a RW CD as Mukwano.

10. The great lakes region is moving into a political, economical and social
federation. The three countries are determined to form the most powerful
cooperation.

Using any availab1e web publishing software, design a web page for this
community Make sure your home page is impressive, creative arid has appropriate
graphics,and not too download.

a. The home page should have a short story about


b. The home page should have a link of four countries.
c. Each link page in (ii) above should have a short story about that country.
d. Indicate your name index number as footer.
e. Save your work GRELAR
f. Print your work including your skills.

11. As a professional web designer, you are contracted to design a web page Mr.
M&J hotel Bwebajja. This should include among others,

I. Provision for inserting the company‘s products picture.


II. Eight departmentsi.e.
• Director‘s office.
• Procurement department.
• Human resource office Account‘s office.
• Operation‘s department
• Engineering department

• Security department Transport office.


a. Create a link of the operations department in (a)(ii)above that will lead you
to page explaining what the department does.
b. Include the company‘s vision, mission and core values‘ stamen at the
bottom of the index page.
c. Provision should be made for originality, creativity, innovation and
appropriate use of graphics.
GUIDE & QUESTIONS FOR Web design P a g e 10 | 11
d. Save your work in your name and index number.
e. Print your work.

12. Using any available publishing software, design a website about your personal
information. ).

a. Create a home page for your personal information with appropriate links to
other following pages.
b. Create other pages with the following information.

Page I: page title, bio-data e.g. name, age, nationality and religion.

Page II: a table of schools attended, period of attendance and qualifications


acquired.

Page III: a bulleted list of activities and responsibilities held e.g. had prefect.

Page IV: hobbies and special skills.

Note:

I. Create a moving (marquee) page title.


II. Use appropriate graphics.
III. Insert a personal e-mail address (e-mail hyperlink) of the page.

GUIDE & QUESTIONS FOR Web design P a g e 11 | 11

You might also like