Web Page Design

Web Page Design
1.
2.
3.
4.
Four important features:

The number of pages needed
The content of each page
A site map
The layout of each page
Think about how many web pages will
be needed and their content. All websites
need a home page. This is the parent
page where all other pages link to. The
home page usually gives an overview of
the function and purpose of the website.
A site map is a graphical

representation of all pages in a
website and how they link to each
other. You should think about how you
want each page to link to the other
pages in the website.
Layout of each page - plan where you
will place the text and images, where
you want links to appear, what styles
you are going to use, etc.
NOTE:
1. Avoid using too many different colours, fonts,
animations and styles. Avoid very bright
colours as this makes the page difficult to read.
2. Do not use too many photos and graphics in
high resolution. File size will be too large so it
will take a long time to open in a browser.
3. Make links visible and group them together.
Every web page should have a link back to the
home page.
4. Headings or titles should be across the top of
the page.
5. Keep things as simple as possible.
Terms
Website a collection of web pages.
Web server a computer that is connected to the internet. Internet content is stored
on the web server.
Upload when you put content on a web server for other people to look at or use.
Download when you take content from a web server on to your computer.
Web browser software used to connect to the Internet.
Uniform Resource Locator(URL) address of a webpage. Also called the domain
name. This identifies where the webpage is hosted and who controls or owns the
website.
Web page document that appears in the browser window which can include text,
images and animated or interactive content.
Hypertext transfer protocol (HTTP) communication protocol for the Internet.
Web authoring tools

These provide an easy-to-use interface for building a
website without having to do any of the coding yourself.
The program writes the code for you.
Examples:
1. Microsoft FrontPage 2003 has been replaced by
Microsoft Expression Studio since Office 2007.
Expression Studio is a separate suite of web authoring
applications, whereas FrontPage was part of the Office
suite.
2. Microsoft Publisher for very basic websites.
3. Adobe Dreamweaver for professional web designers
but very expensive.
4. NetObjects Fusion used by professional web designers
because it allows you to control all aspects of website
creation, design and management.
HTML is a language for describing web pages.

HTML stands for Hyper Text Markup
Language.
HTML is not a programming language, it is a
markup language.
A markup language is a set of markup tags.
HTML uses markup tags to describe web
pages. A web browser (like Internet Explorer
or Firefox) reads HTML documents and
displays them as web pages. The browser
does not display the HTML tags, but uses the
tags to interpret the content of the page.
Introduction
HTML tags are keywords surrounded by angle brackets like <html>

HTML tags normally come in pairs like and 
The first tag in a pair is the start tag, the second tag is the end tag
Start and end tags are also called opening tags and closing tags
When you save an HTML file, you can use either the .htm or the .html
file extension
Steps for creating a webpage

1. Decide on the information to be presented on the Web.
2. Collect the information and arrange it in the form of
pages, headings and paragraphs.
3. Decide on the graphics to be inserted.
4. Create a HTML file containing the information as well
as the HTML tags using a text editor such as Notepad.
5. Run your web browser such as Microsoft Internet
Explorer and open the HTML file.
6. Check the presentation style and information displayed
on the Webpage.
7. Edit the HTML text file if required.
8. Contact the Internet webmaster with whom you have
an Internet account to load the webpage onto the
Internet.
Example of HTML tags

<html>
<body>
<h1> My First Heading</h1>
My first paragraph.
</body>
</html>
The
The
The
The
text
text
text
text
between
between
between
between
<html> and </html> describes the web page

<body> and </body> is the visible page content
<h1> and </h1> is displayed as a heading
 and is displayed as a paragraph
<html>
<body>
The hr tag defines a horizontal rule:
<hr />
This is a paragraph
<hr />
<hr />
</body>
</html>
NOTE: Some HTML elements have empty content. HTML
elements with no content are called empty elements. Empty
elements are closed in the start tag. For example, <hr>
(the <hr> tag creates a horizontal line) is an empty element
without a closing tag. Adding a dash inside the start tag, like
<hr/>, is the proper way of closing empty elements.
Text alignment
<html>
<body>
<h1 ALIGN=CENTER>Center-aligned heading</h1>
This is a paragraph.
</body>
</html>
Text formatting
<html>
<body>
This text is bold
This text is strong
<big>This text is big</big>
This text is italic
This text is emphasized
<code>This is computer output</code>
This is subscript and superscript
</body>
</html>
Fonts
<html>
<body>


This paragraph is in Arial, size 5, and in red text color.




This paragraph is in Verdana, size 3, and in blue text color.


</body>
</html>
Background colour
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is
a heading</h2>
This
is a paragraph.
</body>
</html>
Hyperlinks
A hyperlink, or link, is a piece of text or part of a picture that you
can click and it takes you to another web page, to another
section of a web page, to an e-mail address, to an external web
page or to a user-created file.
<html>
<body>
<a href="http://www.w3schools.com" target="_blank">Visit
W3Schools.com!</a>
If you set the target attribute to "_blank", the link will open in
a new browser window/tab.
</body>
</html>
Images
<html>
<body>
<IMG SRC = filepath.jpg height=200
width=200> 
</body>
</html>
Tables
<table border="1">
<tr>
<td>row 1, cell 1</td>
</tr>
<tr>
</tr>
</table>
Additional tags
<!--> - Defines a comment
Use the tag if you want a line
break (a new line) without starting a
new paragraph.
Testing a website
Test the website to see whether the
website works properly in different
internet browsers.
1. Check that the layout is correct
nothing is chopped off.
2. Check that the text displays correctly.
3. Check that your pictures display
correctly. It is best to use common
image types such as JPEG.
4. Test all hyperlinks on every page to
ensure that they work and link to the
Publishing your website

This is transferring your website to a
host computer on the Internet. You
would have to upload your web files to
the new web server space. Once all
files are uploaded, click the Home File
or the index.htm file to view your home
page . Your website is now on the
Internet.

Web Page Design

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Page Design

Uploaded by

Copyright:

Available Formats

Web Page Design

Four important features:

A site map is a graphical

Web authoring tools

HTML is a language for describing web pages.

HTML tags are keywords surrounded by angle brackets like <html>

Steps for creating a webpage

Example of HTML tags

<html> and </html> describes the web page

Publishing your website

You might also like