Principle of a good web design

Good News and Bad News

• The good news is that anyone can create a Web page or Web site.

• The bad news is that anyone can create a Web page or Web site.

Regardless of whether you use Macromedia Dreamweaver, Microsoft FrontPage, or simply code by hand,
there are some guiding principles you need to remember whenever you design anything for the web.

Why we need a principles?

• Some bristle at the thought of codified guidelines for good design, concerned that such
guidelines stifle individual creativity.

• They don’t realize what you and I already know: bad web design isn’t creative, it’s bloody

• ANNOYING!

Part One:
Top Ten Guidelines for Homepage Usability
Make the Site's Purpose Clear:
Explain Who You Are and What You Do

1. Include a one-sentence tagline. - A short, easily remembered phrase that a company uses in its
advertisements, especially on television or the internet.
 This is more for unexpected visitors than students
2. Write a window title with good visibility in both search engines and, more importantly,
bookmark lists.
3. Group all “school business” information in one distinct area.
4. Emphasize your site’s top high-priority tasks.
 Homework lists, special announcements, class calendars, etc. should be prominent – located
higher on your homepage than CVs, personal photos, etc.
5. Include a search input box.
6. Show examples of real site content.
 Use pull quotes where possible.
7. Begin link names with the most important keyword.
8. Offer easy access to recent homepage features.
 If you change your site frequently, have an archive of the stuff you’ve recently removed or
updated.
9. Don't over-format critical content, such as navigation areas
10. Use meaningful graphics
 Part Two:
Designing GOOD Web Sites from the Start

- It is easy, as long as you follow a few basic steps.

The “Paper” Rule

• The first step to good web design is to turn off your computer and pull out a couple of pieces
of paper.
• Most poorly designed sites are poorly designed from the start.

The Three Parts of Web Design

1. Information design
2. Interaction design
3. Presentation design

The Audience Is Key

• Once you identify your audience, designing the web page or web site is a snap!
Example: the Bertrand Russell Intermediate High School Concert Choir

Part Three:
Basic Design Rules

Homepage Usability
• Most of the tips you are about to see come straight from Homepage

Oh sure, it LOOKS good...

Reading from a computer screen is about 25% slower than reading from paper.

Serif versus sans-serif

• On paper, we are all used to reading serif fonts – fonts with a “tail” (like Times
New Roman.)
• On screens, however, sans-serif fonts are easier to read.
• The most readable screen font is Verdana (which ships with Internet Explorer.)

The Basic Scheme

• For the main content area of your pages, ALWAYS use black text on a white background.
– The rest of your page can be colored, but leave the main content area
alone!
• If you have to change fonts, use a sans-serif font like Verdana, Helvetica, or Arial.
 – Or, if you code by hand, use a font family like <font face="Verdana, Arial,
Helvetica, sans-serif“>
– Better still, use CSS [which we’ll talk about in a bit.]
• Don’t change the link colors!

How wide?
• While bigger monitors continue to pop-up, most people are still using 800 by 600.

• You have to account for the scroll bars.

• Stay under 760 pixels wide, especially with your graphics (600 wide if you are making something
for Blackboard or WebCT.)

How big?
• Try to follow the “30/30 rule”: keep your main homepage – graphics and everything – to under
30 kilobytes in size. That way it will load in under 30 seconds over a very slow dial-up.

• Your secondary pages can be larger.

• I break this rule ALL the time.

Communicating Information about Your School or Department

• If you’re making a site for your school or department, include a homepage link to an
“About <name of organization>” section.

• Include a “Contact Me” or “Contact Us” link on the homepage that goes to a page with
all contact information for you or your organization .

Links
• Differentiate links and make them easy to scan.
– By default, links are differentiated by being blue and underlined. DON’T
CHANGE THIS!
• Don’t use generic instructions, such as “Click Here” as a link name.
• Don’t use generic links, such as “More …” at the end of list items.
• If a link does something other than go to another Web page … make sure the
link explicitly indicates what will happen.
Stay away from frames...
• Many browsers cannot print framed pages appropriately.
• Frames are so hard to learn that many authors write buggy code when they try to use
them.
• Search engines have trouble with frames because they don’t know what composites of
frames to include in their index.
• Some browsers make it difficult to bookmark frames.

• Many Websites that offer users a choice between regular and framed versions have
found that most users prefer frames-free designs.

Use CSS
• CSS separates the style from the content
• CSS makes your pages download faster
– Browsers multitask downloads
• CSS makes your site more accessible
• CSS guarantees a consistent look-and-feel across your entire site
• CSS is a sneaky way to make printer-friendly pages
• The new Macromedia Dreamweaver MX 2004 automatically supports CSS out of the
box!

Part Four:
Accessibility
• If you can make your Web pages more accessible, especially to people with
disabilities (like, say, Auburn University alumni), more people are going to be
able to visit your Web pages.
Web Technologies
Technologies Overview List of Technologies

 Client Side Technologies

HTML, CSS, JavaScript, VBScript ,XHTML, DHTML, WML, AJAX ,FLASH
 Server Side Technologies
ASP, PHP, Perl, JSP ,ASP.NET, Java ,MySQL, SQL Server, Access
How to choose a Technology?
Depends on:
 What is the type of content?
 Who is your audience?
 Who will modify your content?
 What are your Future Plans?
 Availability of technology?
 Your previous experience?
 Portability and Data sharing?

HTML – Hyper Text Markup Language

 HTML documents describe web pages (Static Web Page)
 HTML tags are keywords surrounded by angle brackets like <html>
 HTML tags normally come in pairs like <b> and </b>
 The first tag in a pair is the start tag (opening tags), the second tag is the end
tag(closing tags)

IMPLEMEN TATION
WHERE WE WRITE C OD E
1. Text Editor
 notepad (In Windows OS)
2. FrontPage or Dreamweaver

WHERE WE EXECUTE:

1. Double Click that HTML File.

2. Right click – Open with Internet Explorer
Example Code: Output

<html>
<body>
<h1>College of Computer Studies</h1>
<p>John Rey Boaquiña</p>
</body>
</html>

<html>…</html> described the webpage

<body>…</body> is the visible page content

Link Tag

Html links:
Html Links are defined with the tag <a> tag
Syntax:
<a href="http://www.gmil.com">Gmail</a>

Example:
<html>
<body>
<a href="http://www.gmail.com">Gmail</a>
</body>
</html>

Output:
If we click this link it goes to Gmail account

Image Tag

HTML Images: HTML images are defined with the <img> tag.
Syntax: <img src =”cpsu.png” width= “100” height=”80”/>

Output:
HTML Rules

HTML Rules (Lines):

The <hr/> tag is used to create a horizontal rule (line).

Example:
<html>
<body>
<h3>College of Computer Studies</h3>
<hr />
<h3>Safety John Rey Boaquiña</h3>
</body></html>

HTML Comments

Comments can be inserted in the HTML code to make it more readable and understandable.
Comments are ignored by the browser and are not displayed.
S yn ta x S yn ta x : <!-- some text →

Example:
<html>
<body> <!--It will not be displayed-->
<h3>John Rey Boaquiña </h3>
</body>
</html>

HTML TEXT FORMATTING

Some Formatting Tags are Output
1. b-Bold
2. i-Italic
3. code-Computer code
4. sub-Subscript
5. sup-Superscript

<html>
<body>
<b>Confidence</b><br />
<big>Hardwork</big><br />
<i>Preseverance</i><br />
<code>Samsung CRT</code><br />
This is_subscript<br />
This is^superscript
</body>
</html>
HTML Styles Attributes

Tags Description
<center> Defines center Content
<font> Defines Html Fonts
<s> and <strike> Defines Strikeout
<u> Defines underlined text
Attributes Description
Align Defines the alignment of text
Bgcolor Defines the background color
Color Defines the text color

Example:
<html>
<h1 style="text-align:center">Bokz</h1>
<body style="background-color:blue">
<p style="font-family:Arial;color:red">Plant Tree</p>
<p style="font-family:times;color:red">Save Our Generation</p>
<p style="font-size:40">Value Our Students</p>
</body>
</html>

HTML tables

 Tables are defined with the <table> tag.

 A table is divided into rows (with the <tr> tag)
 Each row is divided into data cells (with the <td> tag). The letters td stands for "table data,"
which is the content of a data cell.
 Headings in a table are defined with the <th> tag.

Example
!DOCTYPE html>
<html>
<body>

<h2>Basic HTML Table</h2>

<table border="1" cellpadding="3" cellspacing="10">

<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
 </tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>

</body>
</html>

Html List
Html supports ordered, unordered and definition and description list.

Unordered HTML List

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

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

Example
<ul>
<li>ANA</li>
<li>BEN</li>
<li>CARLO</li>
</ul>
Choose List Item Marker

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

square Sets the list item marker to a square

none The list items will not be marked

Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default:

Example
<ol>
<li>ANA</li>
<li>BEN</li>
<li>CARLO</li>
</ol>

Ordered HTML List

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

HTML Description Lists

HTML also supports description lists.

A description list is a list of terms, with a description of each term.

The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes
each term:

Example
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
HTML Forms

Html forms are used to select different kinds of user input.

 A form is an area that can contain form elements

 Form elements are elements that allow the user to enter information like:
1. Text fields
2. Text area fields
3. Drop-down menus
4. Radio buttons
5. Checkboxes
6. Action Attribute and the submit button, Etc.

Text Fields – are used when you want the user to type letters, numbers, etc. in a
form.
 Example
<form>
First Name: <input type=”text” name=”firstname”/><br/>
Last Name: <input type=”text” name=”lastname”/>
</form>

Radio and Checkbox

Radio Button
Example
<form>
<input type=”radio” name=”sex” value=”male”/>Male<br/>
<input type=”radio” name=”sex” value=”female”/>Female<br/>
</form>

Checkbox Button
Example
<form>
BSIT3A: <input type=”checkbox” name=”student” value=”BSIT3A”/><br/>
BSIT3B: <input type=”checkbox” name=”student” value=”BSIT3B”/>
</form>

Form Action Attribute

Action Attribute and the Submit Button

 When the user clicks on the “Submit” button, the content of the form is sent to the server.
 The form’s action attribute defines the name of the file to send the content to.
 It depends on PHP file.

Example:
<form name=”input” action=”html_form_submit.php” method=”POST”>

Username:<input type=”text” name=”username”/>

Password:<input type=”password” name=”password name=”password””/>

<input type=”submit” value=”Submit”>

</form>