Web Design

CONTENTS
TASKS PAGE NO
Task 1 - 4 - 16
Task 2
- 17 - 28
Task 3 - 29 - 30
Task 4 - 31 - 40
Reference - 41
1
Task 1
1.1
RESEARCH
Available Information of Badmintons Websites.
 http://www.clearleadinc.com/site/badminton.html
 http://www.badminton-information.com/rules-of-badminton.html
 http://docgerrytan.com/2006/08/01/the-benefits-of-playing-badminton
 http://news.bbc.co.uk/sport2/hi/other_sports/badminton/4172220.stm
Followings are the screenshots of reference websites.
 This web site has pluses and minuses. It has consistence design but it’s not clearly
organize and it’s also hasn't proper font size for some headings.
 In this page they can add more pictures of badminton. The pictures that they have put is
not good
2
 In the contact us page it has a contact form and it not provide a good error prevention
technique and also after submit that form it not provide any navigation to return home .
 The colors they have added is not attractive.
not good
3
http://docgerrytan.com/2006/08/01/the-benefits-of-playing-badminton
not good or poor
 In the contact us page and about us pages are not provide a good error prevention
technique and also after submit that form it not provide any navigation to return home.
4
 The font size and the colors are very poor.
not good or poor
 In the contact us page and about us pages are not provide a good error prevention
technique and also after submit that form it not provide any navigation to return home.
 The font size and the colors are very poor.
 In this side they have put some video clips but when we click in it it , it is not working.
5
http://www.clearleadinc.com/site/badminton.html
not good
6
 The colors they have added are not attractive.
http://www.badminton-information.com/rules-of-badminton.html
 This web site has pluses and minuses. It has consistence design but maximum they have
done it.
little attractive.
7
 The font color and the sizes are not suitable and it is very poor.
These are ten general principles for user interface design. They are called "heuristics" .
1. Visibility of system status
 The system should always keep users informed about what is going on,
through appropriate feedback within reasonable time.
2. Match between system and the real world
 The system should speak the users' language, with words, phrases and
concepts familiar to the user, rather than system-oriented terms. Follow real-
world conventions, making information appear in a natural and logical order.
3. User control and freedom
 Users often choose system functions by mistake and will need a clearly
marked "emergency exit" to leave the unwanted state without having to go
through an extended dialogue. Support undoo and redoo.
4. Consistency and standards
 Users should not have to wonder whether different words, situations, or

actions mean the same thing. Follow platform conventions.
5. Error prevention
 Even better than good error messages is a careful design which prevents a
problem from occurring in the first place. Either eliminate error-prone
8
conditions or check for them and present users with a confirmation option
before they commit to the action.
6. Recognition rather than recall
 Minimize the user's memory load by making objects, actions, and options
visible. The user should not have to remember information from one part of
the dialogue to another. Instructions for use of the system should be visible or
easily retrievable whenever appropriate.
7. Flexibility and efficiency of use
 Accelerators -- unseen by the novice user -- may often speed up the interaction
for the expert user such that the system can cater to both inexperienced and
experienced users. Allow users to tailor frequent actions.
8. Aesthetic and minimalist design
 Dialogues should not contain information which is irrelevant or rarely needed.

Every extra unit of information in a dialogue competes with the relevant units
of information and diminishes their relative visibility.
9. Help users recognize, diagnose, and recover from errors
 Error messages should be expressed in plain language (no codes), precisely

indicate the problem, and constructively suggest a solution.
10. Help and documentation
 Even though it is better if the system can be used without documentation, it

may be necessary to provide help and documentation. Any such information
should be easy to search, focused on the user's task, list concrete steps to be
carried out, and not be too large.
Principles of Interaction Design.
 Anticipation
Applications should attempt to anticipate the user’s wants and needs. Do not expect
users to search for or gather information or evoke necessary tools. Bring to the user all
the information and tools needed for each step of the process.
 Autonomy
9
 The computer, the interface, and the task environment all "belong" to
the user, but user-autonomy doesn’t mean we abandon rules.
 Use status mechanisms to keep users aware and informed.
 Keep status information up to date and within easy view.
 Color Blindness
Any time you use color to convey information in the interface, you should
also use clear, secondary cues to convey the information to those who won't
be experiencing any color coding today.
 Consistency
The following principles, taken together, offer the interaction designer

tremendous latitude in the evolution of a product without seriously disrupting
those areas of consistency most important to the user.
 Levels of consistency
 Inconsistency
 The most important consistency is consistency with user expectations.
 Defaults
 Defaults should be easy to "blow away:" Fields containing defaults

should come up selected, so users can replace the default contents with
new material quickly and easily.
 Defaults should be "intelligent" and responsive.
 Do not use the word "default" in an application or service. Replace
with "Standard," "Use Customary Settings," "Restore Initial Settings,"
or some other more specific terms describing what will actually
happen.
 Efficiency of the User
 Look at the user's productivity, not the computers.

 Keep the user occupied.
10
 To maximize the efficiency of a business or other organization you must
maximize everyone’s efficiency, not just the efficiency of a single
group.
 The great efficiency breakthroughs in software are to be found in the
fundamental architecture of the system, not in the surface design of the
interface.
 Write help messages tightly and make them responsive to the problem:
good writing pays off big in comprehension and efficiency.
 Readability
 Text that must be read should have high contrast.

 Use font sizes that are large enough to be readable on standard monitors.
 Pay particular attention to the needs of older people.
Task 3
3.1 Mark-up languages
SGML
SGML was developed and standardized in 1986 by International Organization for

Standards. It indicates the rules for tagging elements. The tags can be interpreted to
format element in different way. SGML is used commonly to manage large documents.
HTML
Definition of HTML is Hyper Text Markup Language. It is a computer language which

is used to create web pages, and this is the basic language of a webpage. It helps to insert
information into the webpage. HTML has many various types of codes, and these codes
are known as HTML tags. These tags are only written with text. The texts are written
between the angle bracket (<>). Different tags have different functions. This HTML
further developed as XHTML, DHTML, XML, WML, and etc.
DHTML
Enhanced version of HTML that allows greater control over the visual structure. (Fonts,
line spacing, layout, etc.) Of an electronic (hypertext) document. It employs Java script
for greater interaction between a webpage and its user without having to repeatedly
communicate with the host website's server.
11
XML
An XML Document Type Definition is a formal expression (in XML) of the structural
constraints for a class of XML documents. The DTD language constructs are element
and attribute-list declarations. Element declarations name the elements allowed within a
document of this type, and specify whether and how declared elements and runs of
character data may be contained within each element. Attribute-list declarations name
the permitted attributes for each declared element, including the type of each attribute
value, if not an explicit set of valid value(s). A DTD is associated with an XML
document via a Document Type Declaration, which is a tag that appears near the start of
the XML document. The declaration establishes that the document is an instance of the
type defined by the referenced DTD.
XML does not "build" like HTML does. It is just a bunch of tags and words until put into
a feed that churns XML into user-friendly data. Also, therefore, CSS cannot design
XML, since XML does not initially "Output" anything but the raw source.
WML
WML is a mark-up language inherited from HTML, but WML is based on XML. It is
much stricter than HTML.WML is used to create pages that can be displayed in a
Wireless Application Protocol browser. Pages in WML are called DECKS.
Scripting Languages
Web scripting languages are a form of high-level programming language. High-level
programming languages are much closer to human language than machine language,
through which computer hardware accepts commands. High-level programming
languages, like C and C++, rely on programs called compilers or interpreters so they can
be converted to machine language (mainly zeroes and ones). Programs written in
scripting languages, called scripts, are not compiled ahead of time for specific computer
systems like many high-level languages. Instead, the plain text that constitutes a script
gets interpreted into computer commands while a program runs.
Scripts are used to add interactivity to otherwise static Web pages. They also can
perform repetitive tasks like automatically filling out parts of Web-based forms, among
other uses. Encyclozine.com described the capabilities of JavaScript, a popular Web
scripting language: "Without any network transmission, an HTML page with embedded
JavaScript can interpret the entered text and alert the user with a message dialog if the
input is invalid. Or you can use JavaScript to perform an action (such as play an audio
file, execute an applet or communicate with a plug-in) in response to the user opening or
exiting a page.
Scripting languages normally are interpreted by Web browsers like Microsoft Internet
Explorer or Netscape Navigator. Web browsers interpret scripts along with Hypertext
12
Markup language (HTML), the language in which Web pages are written. This can be
done in one of two ways. In one scenario, programs written in scripting languages can
run directly from a server. Otherwise, a script can be included with or directly in an
HTML Web page that someone downloads to a computer. In either case, the Web
browser is used to access the program.
In server-based situations, the Common Gateway Interface (CGI) allows users (clients)
to run programs located on Web servers. CGI scripts are small programs written in a
variety of different programming languages (including C, C++, and Perl) that run in real-
time, which makes them ideal for such things as stock tickers, weather reports, or query
results from a database that appear in the form of a Web page. In the 2000s, other
methods-like Java servlets (Java programs that reside on Web servers) and Microsoft's
Active Server Pages-began to replace CGI scripts.
JavaScript and Microsoft's Visual Basic Scripting Edition (VBScript) were two popular
types of scripting languages in the early 2000s. JavaScript was created by Sun
Microsystems and Netscape. It is based on the Java programming language, but was
developed independently. JavaScript has the ability to interact with HTML code,
enabling developers to create more interactive, appealing Web sites without having to
learn a complicated programming language. JavaScript is used in Web browsers from
both Nets-cape and Microsoft (Microsoft used its own version called Jscript). The
language can be used for both client and server-based programs. Similar in many regards
to JavaScript, Microsoft's Visual Basic Scripting Edition is based on the company's
Visual Basic programming language. Among the benefits of Visual Basic Scripting
Edition are its portability and speed. Not only is the language used by Web browsers, it
also is used for other kinds of applications.
3.2 Commercial web authoring tools
Fireworks
Fireworks are a commercial raster and vector graphics editor hybrid from Adobe that’s
available for the Mac and Windows operating systems. Designed specifically for web
designers (unlike Photoshop), Fireworks brings you a plethora of tools and options that
make full web layout prototyping a breeze.
Among its notable features are: "slices" for slicing and dicing a design mockup into
HTML/CSS for rapidly creating prototypes (though you should avoid using auto-
generated source code for the end-build), the ability to package an entire site design as a
PDF with clickable components for interactive and impressive site prototypes, and
optimization tools for making your web graphics as lightweight as possible.
Dreamweaver
Adobe Dreamweaver is a commercial application for web development that’s available

for the Mac and Windows operating systems. Its featured-packed suite of tools and
options include: syntax highlighting and very smart Code Hinting, a built-in FTP client,
project management and workflow options that make team work effortless, and Live
13
View – which shows you a preview of your source code. Dreamweaver tightly integrates
with other popular Adobe products such as Photoshop, allowing you to share Smart
Objects for quick and easy updating and editing of graphics components.
Adobe Dreamweaver CS3 is the first rollout of this Web design application since Adobe
acquired Macromedia. Is it the same Dreamweaver as before?
Installation time has doubled, not including Adobe's mandatory registration process.
Once installed, Dreamweaver looks more like Adobe's other products, but it will be
familiar to users of previous versions. There are some new, dock able palettes for new
features, but the Welcome screen, toolbars, and main window are largely unchanged.
CSS support now features a large array of templates and new tools to help manage
styles, and commentary on how best to use the CSS--including Internet Explorer
workarounds. Improved integration means you can drag a Photoshop file directly to
Dreamweaver, and select and copy any area of a PS image, including layers, and paste it
into Dreamweaver.
Adobe's new spry framework for Ajax is a JavaScript library of code snippets that makes
it easy to add client-side behaviors. It's broken into Effects, which are animations, Data,
which binds dynamic data to HTML, and Widgets, which create interactive elements
such as pop-up menus.
Those learning the baby steps of Web design should take a class or read some books
before diving in. Dreamweaver's advanced features won't be intuitive for anyone who
hasn't studied them first. But because of the high price tag, we don't recommend
upgrading to CS3 as a standalone product.
Panic Coda
Panic Coda is a shareware web development application for the Mac OS X operating
system. It seeks to reduce the amount of applications (such as an FTP client, CSS editor,
a version control system, etc.) you need to develop websites and to improve your team’s
workflow. Coda’s one-window web development philosophy uses a tabbed interface for
text editing, file transfers, SVN, CSS, and even "Books" which embeds web books that
are searchable (it comes with The Web Programmer’s Desk Reference but you can add
your own).
It’s simple and intuitive interface allowed Coda to garner the Apple Design Awards Best
Mac OS X User Experience in 2007.
Photoshop
Adobe Photoshop is a very popular commercial graphics editor available for the Mac
and Windows operating system. Created for professional photographers and designers, it
is the ideal application for manipulating images and creating web graphics. Photoshop
has all the necessary tools and options you need such as: Filters – which automatically
adds effects to your image or a selected section of your image, extensibility and
automation with Brushes, Actions and Scripting, and workflow enhancement features
like Layer Comps and the Revert option.
Firebug
14
Firebug is a free, open source in-browser web development tool for the Firefox web
browser. It’s many features include: on-the-fly HTML and CSS editing for tweaking or
debugging, a Console for logging, analyzing and debugging JavaScript, and an intuitive
Document Object Model (DOM) inspection tool to help you quickly see how the
elements of a web page relates to one another. Firebug’s popularity is so immense it’s
one of the few Firefox extensions that have its own extensions (like YSlow and Fire
PHP).
Micro Soft Word
Microsoft Word is a word processor designed by Microsoft. It was first released in 1983
under the name Multi-Tool Word for Xenix systems. Subsequent versions were later
written for several other platforms including IBM PCs running DOS (1983), the Apple
Macintosh (1984), the AT&T UNIX PC (1985), Atari ST (1986), SCO UNIX, OS/2, and
Microsoft Windows (1989). It is a component of the Microsoft Office system; however,
it is also sold as a standalone product and included in Microsoft Works Suite. Beginning
with the 2003 version, the branding was revised to emphasize Word's identity as a
component within the Office suite on PC versions; Microsoft began calling it Microsoft
Office Word instead of merely Microsoft Word. The 2010 version appears to be branded
as Microsoft Word, once again.
3.3
Rules and heuristics for good website design
The Web is a visual medium. For a Web site to work, first and foremost, it must be well
designed. Your design must trigger the curiosity of your visitors and make them want for
more. Once inside, they must be informed, entertained and convinced of your products
or services. Your design must allow them to travel from page to page with the greatest of
ease. More importantly, your site must convince them that coming back will be
beneficial and rewarding as well.
Creating a Web site that works starts with its design. Good design means having quality
content, while allowing your visitors options and pathways to investigate what you have
to offer. To succeed in creating an effective web site, you must first understand the basic
rules governing Web design.
1. The Web is About Content.
Your goal in designing your Web site is primarily to convey information. Whether your business
deals with fishing, web hosting, online calendar or Java scripts, your Web site must be clear in
conveying what you have to say or offer. This entails having content that is useful to your
visitors, and ensuring that your visitors can find the information you have to offer.
a) Visitors must know what your site contains.

Content should clearly come up on every single page. Remember, first time
visitors of your web site do not know what you have in store for them. It is
15
important to bring up content to your front page - to let visitors know what they
can find from your site. Do not make them plow through four levels of buttons
to discover on the fifth page that your site contains links and resources pages.
They may not have the patience to discover information that might be essential
to them and could pull them back to your site repeatedly.
b) Provide quality and relevant content.

Use quality content relevant to your business. Be original as much as possible,
although it is also good to have content from contributing authors who wish to
promote their works at your web site. This count on your popularity and can
generate more visitors while you also help giving traffic to the web site of your
contributors. Remember, in the Internet, "No Man is an Island;" it is "Live and
Let Live."
2. The Web is About Skim and Surf
People will only read what catches their attention. You are kidding yourself if you think
that your visitors will read every single word on your Web site. Here is the reality:
nobody reads everything on the Web. Either people are too busy or they simply have
limited attention span. Some studies show that it only takes nine seconds for a visitor to
click away from your site. When they come across a Web site, they want to get
something - and fast! If you do not give them something quickly, they absorb nothing.
They don't really care about your groovy images. They visit a site to get something out
of it. If they don't find what they want in an instant (even though you swear that the
information is there buried 10 layers below your front page), they are gone! Many
interactive Web designers still deny this cardinal truth.
a) Guide your visitors well.

Navigation bars are a must-have of every Web site. The nav bars serves as a
"guide" or "direction tool" for your visitors, helping them finds your content
easily. In addition to nav bars, other sites place drop-down menus for more
specific listing of the topics and a site map. These tools are meant to help your
visitors find the information they need from your site. Use these tools to organize
your site in a clear and simple way.
The story changes, however, when you have 300 pages or more. Navigation then
becomes a challenge. You simply cannot put a button in your front page for each of your
300 pages. In this case, you will have to make some editorial decisions as to the
hierarchies of information. Your goal in designing your main page will be to balance the
fact that your site is not easy to digest (your site oozes with tons of useful information)
but which looks appealing enough to begin.
One word of caution: never assume that your navigation structure is clear to your users.
What for you may be an organized way of arranging information and content, may
appear as a maze to some users. Pre-testing your site is crucial to give you some
objective feedback needed to further improve your Web site.
b) Don't make your visitors wait.

Fast loading web pages should be the goal of every web site creator. Usually, too much
graphics can hamper the downloading speed of your site. If you can avoid it, try to limit
16
the use of graphics, especially in your front page. As @Home's Richard Gingras said,
"the only acceptable delay is no delay." People will not wait 3 minutes for your flash
pages to load - no matter how cool it is. Make people wait, and say goodbye to them
forever.
c) Make your pages concise and short.

Web visitors love to surf, but hate to scroll. Keep your paragraphs and web pages
shorter. Most people do not have the patience to scroll all the way down. Avoid
punishing your visitors with information overload. The less work you make them do, the
greater the chances they will come back to you often. Shorter pages break-up the content
into easier bite-size pieces.
3. The Web is about Contrast.
The Web is a novel visual medium, but it does not mean that it changes the tried-and-
tested rules of design. White, the absence of color in print and the combination of all
colors in video, is still the best background for Web pages. If you prefer other
background colors, the rule is to use colors with the highest contrast from each other.
Hence, you use black type for white background. Red, the color that has sold more
magazines when used in the headlines, can be used for your captions. Different colors
elicit different reactions from people, a fact that Web creators should understand.
a. Make your pages easy on the eyes.

Catching your visitor's attention does not mean using all the colors of the
rainbow. The rule in design is to use colors with the highest contrast from
each other. Understand the elements of design. Avoid the trap of "design
before legibility." Study your color combinations and try to avoid funny
mixing up of colors. Can you imagine your reaction to a site using red
text on a dark blue background? Or, bright green text on a bright yellow
background? Not only is it difficult on the eyes, but it also doesn't make
sense to struggle reading something that is simply not readable.
b. Your pages must look cohesive and readable.

Web pages are pulled together by one or two elements. No need to run
amuck with every available font invented. Using two kinds of fonts is
ideal. Like colors, you can develop contrast by using the thin and bold
combination of your fonts. Also, do not use one set of colors and fonts in
one page, and use a totally different set in another page. You will lose the
continuity and look of your site, leaving your visitors feeling lost and
confused.
c. Big is better.
What use is your highbrow content if your fonts are microscopic?
Reading text on a computer screen is hard in itself; do not compound the
problem by using tiny letters. Leave space between the lines, make your
17
lines short, and do not use typefaces that are hard to read. If you want
your content to be read, make it easy to read.
Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation
semantics (the look and formatting) of a document written in a markup language. Its
most common application is to style web pages written in HTML and XHTML, but the
language can also be applied to any kind of XML document, including SVG and XUL.
CSS is designed primarily to enable the separation of document content (written in

HTML or a similar markup language) from document presentation, including elements
such as the layout, colors, and fonts.[citation needed] This separation can improve
content accessibility, provide more flexibility and control in the specification of
presentation characteristics, enable multiple pages to share formatting, and reduce
complexity and repetition in the structural content (such as by allowing for table less
web design). CSS can also allow the same markup page to be presented in different
styles for different rendering methods, such as on-screen, in print, by voice (when read
out by a speech-based browser or screen reader) and on Braille-based, tactile devices.
While the author of a document typically links that document to a CSS style sheet,
readers can use a different style sheet, perhaps one on their own computer, to override
the one the author has specified.
CSS specifies a priority scheme to determine which style rules apply if more than one
rule matches against a particular element. In this so-called cascade, priorities or weights
are calculated and assigned to rules, so that the results are predictable.
18
Validation Output: 10 Errors
1. Line 1, Column 1: no document type declaration; implying "<!DOCTYPE HTML

SYSTEM>"
<HTML>
The checked page did not contain a document type ("DOCTYPE") declaration.
The Validator has tried to validate with a fallback DTD, but this is quite likely to
be incorrect and will generate a large number of incorrect error messages. It is
highly recommended that you insert the proper DOCTYPE declaration in your
document -- instructions for doing this are given above -- and it is necessary to
have this declaration before the page can be declared to be valid.
2. Line 50, Column 61: document type does not allow element "LINK" here
<link href="css/styles.css" rel="stylesheet" type="text/css">
The element named above was found in a context where it is not allowed. This
could mean that you have incorrectly nested elements -- such as a "style" element
in the "body" section instead of inside "head" -- or two elements that overlap
(which is not allowed).
19
One common cause for this error is the use of XHTML syntax in HTML
documents. Due to HTML's rules of implicitly closed elements, this error can
create cascading effects. For instance, using XHTML's "self-closing" tags for
"meta" and "link" in the "head" section of a HTML document may cause the
parser to infer the end of the "head" section and the beginning of the "body"
section (where "link" and "meta" are not allowed; hence the reported error).
3. Line 51, Column 15: an attribute value must be a literal unless it contains only
name characters
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0

MARGINHEIGHT=0 ONL…
You have used a character that is not considered a "name character" in an

attribute value. Which characters are considered "name characters" varies
between the different document types, but a good rule of thumb is that unless the
value contains only lower or upper case letters in the range a-z you must put
quotation marks around the value. In fact, unless you have extreme file size
requirements it is a very very good idea to always put quote marks around your
attribute values. It is never wrong to do so, and very often it is absolutely
necessary.
4. Line 51, Column 34: there is no attribute "LEFTMARGIN"
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0

MARGINHEIGHT=0 ONL…
You have used the attribute named above in your document, but the document
type you are using does not support that attribute for this element. This error is
often caused by incorrect use of the "Strict" document type with a document that
uses frames (e.g. you must use the "Transitional" document type to get the
"target" attribute), or by using vendor proprietary extensions such as
"marginheight" (this is usually fixed by using CSS to achieve the desired effect
instead).
This error may also result if the element itself is not supported in the document
type you are using, as an undefined element will have no supported attributes; in
this case, see the element-undefined error message for further information.
How to fix: check the spelling and case of the element and attribute, (Remember
XHTML is all lower-case) and/or check that they are both allowed in the chosen
document type, and/or use CSS instead of this attribute. If you received this error
when using the <embed> element to incorporate flash media in a Web page, see
the FAQ item on valid flash.
20
5. Line 51, Column 46: there is no attribute "TOPMARGIN"
…GCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0

MARGINHEIGHT=0 ONLOAD="p…
instead).
6. Line 51, Column 60: there is no attribute "MARGINWIDTH"
… LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0

ONLOAD="preloadImages()…
instead).
7. Line 51, Column 75: there is no attribute "MARGINHEIGHT"
21
…N=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0
ONLOAD="preloadImages();"><center>
instead).
8. Line 107, Column 67: there is no attribute "BACKGROUND"
…ign="left" valign="middle" background="images/bse.gif">

<input name="textfie…
instead).
22
9. Line 214, Column 94: cannot generate system identifier for general entity
"campaign"
…tp://www.lunarpages.com/?id=webdotcom&campaign=mtt" class="l"
target="_blank">…
An entity reference was found in the document, but there is no reference by that
name defined. Often this is caused by misspelling the reference name, unencoded
ampersands, or by leaving off the trailing semicolon (;). The most common
cause of this error is unencoded ampersands in URLs as described by the
WDG in "Ampersands in URLs".
Entity references start with an ampersand (&) and end with a semicolon (;). If
you want to use a literal ampersand in your document you must encode it as
"&" (even inside URLs!). Be careful to end entity references with a
semicolon or your entity reference may get interpreted in connection with the
following text. Also keep in mind that named entity references are case-sensitive;
&Aelig; and æ are different characters.
If this error appears in some markup generated by PHP's session handling code,
this article has explanations and solutions to your problem.
Note that in most documents, errors related to entity references will trigger up to
5 separate messages from the Validator. Usually these will all disappear when the
original problem is fixed.
10. Line 214, Column 94: general entity "campaign" not defined and no default entity
…tp://www.lunarpages.com/?id=webdotcom&campaign=mtt" class="l"
target="_blank">…
This is usually a cascading error caused by a an undefined entity reference or use

of an unencoded ampersand (&) in an URL or body text. See the previous
message for further details.
11. Line 214, Column 102: reference to entity "campaign" for which no system
identifier could be generated
….lunarpages.com/?id=webdotcom&campaign=mtt" class="l"
target="_blank">LunarPag…
This is usually a cascading error caused by a an undefined entity reference or use

of an unencoded ampersand (&) in an URL or body text. See the previous
message for further details.
12. Line 214, Column 93: entity was defined here
23
…ttp://www.lunarpages.com/?id=webdotcom&campaign=mtt" class="l"
target="_blank"…
2nd web validation output
1. Line 11, Column 7: required attribute "TYPE" not specified
<style>
The attribute given above is required for an element that you've used, but you
have omitted it. For instance, in most HTML and XHTML document types the
"type" attribute is required on the "script" element and the "alt" attribute is
required for the "img" element.
Typical values for type are type="text/css" for <style> and

type="text/javascript" for <script>.
2. Line 19, Column 7: end tag for "HEAD" which is not finished
</head>
Most likely, you nested tags and closed them in the wrong order. For example
<p><em>...</p> is not acceptable, as <em> must be closed before <p>.
Acceptable nesting is: <p><em>...</em></p>
Another possibility is that you used an element which requires a child element
that you did not include. Hence the parent element is "not finished", not
complete. For instance, in HTML the <head> element must contain a <title>
child element, lists require appropriate list items (<ul> and <ol> require <li>;
<dl> requires <dt> and <dd>), and so on.
24
3. Line 66, Column 222: required attribute "ALT" not specified
…1px; padding-bottom: 1px" align="left"><span ><strong><font

color="#FFFFFF">MA…
The attribute given above is required for an element that you've used, but you
have omitted it. For instance, in most HTML and XHTML document types the
"type" attribute is required on the "script" element and the "alt" attribute is
required for the "img" element.
Typical values for type are type="text/css" for <style> and

type="text/javascript" for <script>.
REFERENCES:-
 http://en.wikipedia.org/wiki/Badminton
 http://www.badminton-information.com/rules-of-badminton.html
 http://en.wikipedia.org/wiki/Badminton game
 http://www.google.com/Badminton tutorials
25
26

Web Design

Uploaded by

Copyright:

Available Formats

Web 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 Design

Uploaded by

Copyright:

Available Formats

CONTENTS

Available Information of Badmintons Websites.

Followings are the screenshots of reference websites.

 The colors they have added is not attractive.

 The colors they have added is not attractive.

 The colors they have added is not attractive.

 The colors they have added is not attractive.

 The font size and the colors are very poor.

 The colors they have added are not attractive.

1. Visibility of system status

2. Match between system and the real world

3. User control and freedom

4. Consistency and standards

 Users should not have to wonder whether different words, situations, or

6. Recognition rather than recall

7. Flexibility and efficiency of use

 Dialogues should not contain information which is irrelevant or rarely needed.

9. Help users recognize, diagnose, and recover from errors

 Error messages should be expressed in plain language (no codes), precisely

10. Help and documentation

 Even though it is better if the system can be used without documentation, it

Principles of Interaction Design.

The following principles, taken together, offer the interaction designer

 Defaults should be easy to "blow away:" Fields containing defaults

 Efficiency of the User

 Look at the user's productivity, not the computers.

 Text that must be read should have high contrast.

SGML was developed and standardized in 1986 by International Organization for

Definition of HTML is Hyper Text Markup Language. It is a computer language which

3.2 Commercial web authoring tools

Adobe Dreamweaver is a commercial application for web development that’s available

Micro Soft Word

Rules and heuristics for good website design

1. The Web is About Content.

a) Visitors must know what your site contains.

b) Provide quality and relevant content.

2. The Web is About Skim and Surf

a) Guide your visitors well.

b) Don't make your visitors wait.

c) Make your pages concise and short.

3. The Web is about Contrast.

a. Make your pages easy on the eyes.

b. Your pages must look cohesive and readable.

Cascading Style Sheets (CSS)

CSS is designed primarily to enable the separation of document content (written in

1. Line 1, Column 1: no document type declaration; implying "<!DOCTYPE HTML

<link href="css/styles.css" rel="stylesheet" type="text/css">

<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0

You have used a character that is not considered a "name character" in an

4. Line 51, Column 34: there is no attribute "LEFTMARGIN"

<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0

…GCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0

6. Line 51, Column 60: there is no attribute "MARGINWIDTH"

… LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0

7. Line 51, Column 75: there is no attribute "MARGINHEIGHT"

8. Line 107, Column 67: there is no attribute "BACKGROUND"

…ign="left" valign="middle" background="images/bse.gif">

This is usually a cascading error caused by a an undefined entity reference or use

This is usually a cascading error caused by a an undefined entity reference or use

12. Line 214, Column 93: entity was defined here