1

2

Introduction:

Old Lane Flowers is a little florist business entity located in UK. They have only one store and

put up for sale a range of well-liked flowers such as roses, lilies, tulips and orchids. They also

fabricate remarkable flowery design for weddings, birthdays and funerals, and for occasional

events such as Mother’s day and Christmas. Clientele can get and gather flora from the store or

can organize to have flowers deliver to location in the nearby vicinity.

No Description Page

Task 1 HTML 5

Task 2 CSS 15

Task 3 Testing of the website & writing a test report 54

Task 4 Critical Evaluation 63

3

Task 1

Introduction:

In my following task, I am going to show that my website has been developed using XHTML

version 1.0 Strict and mark a minimum of seven interlinked webpage. My website must meet the subsequent criterion: It is in working condition in both Internet Explorer and Mozilla Firefox. It is viewable on monitor with screen resolutions of 1024x768 without the user having to scroll horizontally. I have included and used a range of media properly. I have verified first-rate application of web design principle and made sure it is easy to find the way around and make use of the site.

Structure of the Website:

Navigational Plan

Old Lane Flowers

4

Fig:1.1 Structure of the Website

Page Layout:

Home Opening Times

Old Lane Flowers Delivery Rates Category Enquiry

left bar

Middle

right bar

footer

footer

footer

Fig:1.1 Page Layout

Home Opening

Times

Enquiry Category Delivery

Rates

Layout Design

5

Home: this is the main navigation page of my website. From this page it is possible to navigate to

other pages in the website. This page is the main attraction point for the users.

Opening Times: This page gives basic information about the business such as Opening Times and

the location of the shop. I wanted to give this page all information about tracing Old Lane Flowers

from anywhere in the world and its opening hours.

Delivery Rates: This page contains information about delivery rates & areas where Old Lane

Flowers could deliver to.

Category: Different types of pages for different categories are described here.

Enquiry: This page provides the users to submit any new queries make enquiries about any

possible orders and write their comments about the website.

Summary: This page is built in a well organized way and users can have a good idea about honey

and its different feature.

Here are some screenshots of the website:

Home:

6

Fig 1.3: Home

Opening Times:

7

Fig 1.4: Opening Times

Delivery Rates:

8

Fig 1.5: Delivery Rates

Category:

9

Fig 1.6: Category

Enquiry:

10

Fig 1.7: Enquiry

Cross-browser compatibility testing:

11

Fig 1.8: Cross-browser compatibility testing

Conclusion:

In my above task, I have shown that my website has been developed using XHTML version 1.0

Strict and marked using a minimum of seven interlinked webpage.

12

Task 2

Introduction:

In my following task, I am going to show that I have produced only one external CSS file that

specifies the drawing for the site. Each one of the HTML pages has been associated to this CSS

file. There has not been any use of the style attribute or the <style> element in the site.

Here is the CSS file:

@charset "utf-8"; /* CSS Document final */ img{position:absolute; left:0px; top:0px; z-index:-1; } h1,b,p{voice-family:jane, female; stress:40; richness:90;}#wholepage{width:974px; height:850px; margin-left:auto; margin-right:auto; position:inherit;}#header{ width:974px; height:200px; left:0px; right:0px; position:inherit; background-color:#009C99; background-repeat:repeat; }#font_header{color:#333033; letter-spacing:1px;}.link_header{color:#009C99; letter-spacing:1px; }#Header ul{ margin:0px; padding:0px; list-style-type:none;}/* CSS Document final */#Header li{ margin:0px;padding:0px; float:left;}#Header li a{ display:block; width:150px; background-color:#D4E09E; margin-right:5px; text-align:center;} a:link{ color:#666; }a:visited{ color:#999; }a:active{ color:#CCC; }a:hover{ color:#C78B67; }#nav_bar{ float:left; width:972px; height:50px; background-color:#D4E09E; border: 5px #7BC6B1; border-top-style:double ; border-right-style:solid;border-bottom-style:inset; border-left-style:solid; }#left_bar{ float:left; width:160px; height:450px; top:0px; left:0px; position:inherit; background-color:#CCCC99;}/* CSS Document final */#middle{ top:0px; left:0px; float:left; width:654px; height:450px; overflow:hidden; position:inherit; background-color:#D4E09E; background-repeat:repeat; }#middle, b{ text-align:center; }.font_middle{color:#ffffff;letter-spacing:1px; } #right_bar{ float:right; width:160px; height:450px; position:inherit; left:1000px; top:270px; text-align:center; background-color:#FFFFCC; } .font_right_bar{color:#000000; letter-spacing:1px; font-size:16px;}#footer{ clear:left; width:974px; height: 200px; letter-spacing:1px; position:absolute; left:auto; top:718px; text-align:center; background-color:#009c99;} #font_footer{color:#009C99; letter-spacing:1px;}p, u:first-letter{ font-size:15px; font-weight:300; color:#666666; background-color:#DFE7B4; } b:first-letter{ font-size:20px; font-weight:bold; color:#666666; }b{ font-size:20px; font-weight:bold; color:#666666; text-align:center; background-color:#ffffcc; text-transform:uppercase; }h1{ text-align:center;} /* CSS Document final */#menu * { margin: 0px; padding: 0px; list-style-type: none; text-decoration: none;}div#menu {position:relative; }#menu ul.menu { white-space: nowrap;} /* CSS Document final *//* Geometrical arrangement */#menu ul.menu li { display: inline-block; height: 40px; position: relative; }#menu ul.menu li div { position: absolute;top: 40px;left: 0px;}#menu ul.menu li div div {position: absolute; top: -6px;left: 188px;} /* Escaping style for lower levels */#menu ul.menu li div ul li {display: block;float: none;width: auto;height: auto;}/** Graphics **//* Horizontal sliding doors */ #menu ul.menu li a {padding-left: 14px;background-image:url(../Flowers/images/item1.png);background-repeat: no-repeat; background-position: left -1000px;display: inline-block; margin: 10px 2px;}#menu ul.menu li a span {padding-right: 14px; padding-left: 0px;background-image:url(../Flowers/images/item1.png);background-repeat: no-repeat; background-position: right -1000px;display: inline-block; height: 27px;line-height: 27px; cursor: pointer;}#menu ul.menu li:hover a {background-position: left -54px;}#menu ul.menu li:hover a span {background-position: right -81px;}#menu ul.menu li.active a {background-position: left 0px;}#menu ul.menu li.active a span {color: #E8F3F7;background-position: right -27px;}/* Escape Horizontal doors */#menu ul.menu li div ul li a {display: block;padding: 0px;margin: 0px;background: none;}#menu ul.menu li div ul li a span {display: block;padding: 0px;background: none;height: auto;width: 165px;line-height: 25px;padding: 7px 0 7px 9px;white-space: normal; }/* Vertical sliding doors */ #menu ul.menu li div { width: 200px; padding-top: 6px;background-image:url(../Flowers/images/submenu-top.png); background-repeat: no-repeat; background-position: 0px top;}#menu ul.menu li div ul { padding: 6px 6px 9px 6px; padding-top: 0;background-image:url(../Flowers/images/submenu-bottom.png); background-repeat: no-repeat; background-position: 0px bottom;} /* Hover Effect on Submenus */#menu ul.menu ul li:hover{}#menu ul.menu li.active ul li a span {color: #5E5E5E;width: 165px;}#menu ul.menu li.active ul li a span:hover {color:#09C6F5;}#menu ul.menu ul li a span:hover{color:#FFD473; }/* Main header line */

13

#menu {height: 46px;padding-left: 14px;text-align:center;background:transparent url(../Flowers/images/bg.png) repeat-x; }/* Text shadow */#menu span{color: #A67300;}#menu li:hover>a>span { color: #E8F3F7;}/* Fonts */#menu ul.menu li a span{ font -family: Arial;font-size: 13px;font-weight: 600;}#menu ul.menu li div ul li a span{ color:#5E5E5E;font-family: Trebuchet MS;font-size: 12px;font-weight: 400;} /* Lines between li */#menu ul.menu li div ul{padding-bottom: 8px;}#menu ul.menu li div ul li:first-child{border-top-width: 0px;}/* Menu logic( newly added from here) */ #menu li>div { visibility: hidden; }#menu li:hover>div { visibility: visible; }/* */ /* Hover Effect on Submenus */#menu ul.menu ul li:hover{background-color: #fff;}/* Lines between li */#menu ul.menu li div ul li{background-image:url(../Flowers/images/hr.gif);background-repeat: repeat-x;background-position: left bottom;}#menu ul.menu ul a.parent { background:url(../Flowers/images/arrow-left.jpg) no-repeat right center; margin-right: -1px;}

14

Fig:1.9 CSS code

Conclusion:

In my above task, I have shown that I have produced a single external CSS file that specifies the

sketch for the site. Each one of the HTML pages has been connected to this CSS file. There has

not been any use of the style attribute or the <style> element in the site.

Task 3

Introduction:

I am required to use the W3C validation service to check my HTML and CSS for any possible errors.

I should try to remove any non-compliant features that I come across. I have to write a short report

describing my testing effort.

Checking HTML using W3C validation service:

The “index.html”, “OpeningTimes.html” documents were tentatively checked as XHTML strict 1.0.

They passed without any errors with 1 warning. The reasons why they passed because:

My insertion or inclusion of a DOCTYPE declaration. Without its inclusion, the validator will never recognize which version of HTML or XHTML to validate against.

I have included a hint of the character encoding for the document. My inclusion of required rules and attributes. I haven’t inserted any non-standard elements. No mismatched tags.

No nesting errors

15

No DTD rule violations

No typos and other minor errors

I have converted special characters to entity references, for example, “ becomes &quot

I have made sure that all elements and attributes are defined in the XHTML 1.1 DTD; I have

used CSS styles to replace deprecated presentation tags.

I have enclosed all attributes values in quotations(“”)

I have replaced > with /> at the end of all empty tags

I have matched with all the start tags with an enclosing tag.

I have converted all elements and attribute name to lowercase.

I have declared XHTML 1.0 namespace in the html element that matches the DTD.

As I have already mentioned, I have added a document type declaration that declares the XHTML

1.1 DTD.

16

Figure2.0: Checking the “index.html” HTML using W3C validation service.

17

Figure2.1: Checking the “OpeningTimes.html” HTML using W3C validation service.

The “Categories.html”, “DeliveryRates.html”, “EnquiryForm.html” documents were checked as

XHTML strict 1.0. They had some very minor and insignificant errors with some warnings.

18

Figure2.2: Checking the “Categories.html” HTML using W3C validation service.

19

Figure2.3: Checking the “DeliveryRates.html” HTML using W3C validation service.

20

Figure2.4: Checking the “EnquiryForm.html” HTML using W3C validation service.

Checking CSS using W3C validation service:

21

Checking CSS using W3

C validation service:

Figure2.5: Checking the “style.css” CSS using W3C validation service.

22

The “style.css” document was tentatively checked as CSS version 2.1. It passed without any errors

with 1 warning. The reasons why it passed because:

I have tried to include all required rules and attributes. I think I haven’t tried to insert any non-standard elements. No incompatible tags.

No nesting error

No DTD rule violation

No typo and other small error

Cross-Browser compatibility testing:

Different web browsers apply slightly different formatting to each element. For example, Firefox

actually uses a CSS style sheet to format HTML tags. To see it on a Windows, we’ll find the file in the

C:\Program Files\Mozilla Firefox\res\html.css.

I have tested the website using both Internet Explorer and Mozilla Firefox. There are no significant

differences between the renderings of the mentioned browsers. I will provide a list of possible

causes why I think there were no differences:

All throughout my coding, I have applied consistent font sizes.

I have improved table borders and created consistent table cells.

I have removed or used padding and margins minimally or used it only when it was

absolutely necessary.

I have removed borders from linked images if there were any.

I have set consistent list indents and bullet types.

I have removed quote marks from quoted material where it was possible or necessary.

Conclusion:

23

I think all the above testing and documentation has clearly demonstrated that I have tried to test

the website and provided a short description of all the problems and their possible remedies.

Task 4:

Introduction:

I am required to highlight the strong and weak points, suggesting improvements, and proposing

further improvements.

Strong points:

1. Good navigation systems allow the user the full variety of pages they can check out

2. Color blending of my site is nice. All colors are carefully chosen after tinkering with several

colors. All the colors are easy with the eyes and the hexadecimal color codes work finely

with both browsers and passes with fine colors!

3. Ease of use, easy to find navigation options to locate information

4. My site is easily viewable or usable in most popular screen sizes (especially in 1024*768)

without visitor having to scroll horizontally (left to right).

5. Link pages accurately work in both IE and Mozilla Firefox.

6. Links are underlined so that they are instantly viewable to the visitor, with hovering

accessibility options for further tooltips or features.

7. All my codes are properly indented using proper conventions, with helpful hints or

comments for easy and accessible code viewing.

8. I think my page banner or header image contain appropriate motif or theme for the website

contents.

Weak points:

24

1. The location of the shop which is displayed in Google Maps in “OpenningTimes.html” page is

dependent on an Internet connection which is a problem and the map fails to load when no

Internet connection is available

2. My webpage is not a dynamic one.

3. The text which contains links is colored light blue and underlined. In some context, user

may find discomfort or difficulty in reading the text in improper or poor lighting conditions.

Further Improvements:

1. Using a single external CSS file for seven pages makes the CSS file large, complicated and

difficult to manage or maintain, so I could have used multiple CSS files or single CSS file for

every single HTML pages for the design of the site.

2. If I had used an external CSS file from the beginning of the coding, I would have saved a lot of

time and gained a lot more control over my code.

3. If I had not used the “style” attribute in inline styling from the starting of the coding, I would

have saved a lot of time & energy, especially finding and deleting inline CSS styling and

replacing it appropriate coding is hectic to say the least.

4. If I had not used the “<style>” element in embedded styling from the starting of the coding, I

would have saved a lot of time & energy.

5. I have tried to use HTML font attribute initially, but later decided to use all CSS font styling.

Deciding this in the first place would have saved me a lot of time.

Proposition for further developments:

1. Some actions or simply some JavaScript codes will do the trick for the “Enquiry.html” page

to make it more functional and interactive.

25

2. Many types of external CSS files could have been included in the website with features like

separate “print.css”, “tablet.css” files for better user navigation and more accessibility.

3. I could have embedded some HTML5, CSS3 for further developments.

Accessibility Issues:

I have included an accessibility improvement feature like in-page browsing. It’s like having an

option in the main navigation bar as a link to specific page content headings.

Figure2.6: In-page browsing in “DeliveryRates.html”.

26

By clicking on the particular link, a user with accessibility issues will move directly to the content

which also hides the header image from the view for better viewing of the content.

Figure2.7: In-page browsing in “OpeningTimes.html”.

27

On some particular web pages, specific keyboard shortcuts are assigned to special

elements on the page. To focus or highlight the cursor straightforwardly to one of these

elements, press Shift+Alt+AccessKey.

Figure2.8: Accesskey for label: “name” in “EnquiryForm.html”.

Which key AccessKey depends upon the site. It is determined by the site admin or author, not

Firefox.

28

Figure2.9: Accesskey for button: “Submit/Reset” in “EnquiryForm.html”.

Support for mobile users:

Since, I am not allowed to use more than one external CSS file, so I have resorted to use the

following technique. I have specified multiple media types (namely screen, mobile & handheld) by

separating them with commas:

29

Figure: multiple media types.

Then I have included a media specific (for mobile or handheld) style directly inside a style sheet

using the @media directive like this:

30

Figure3.0: media mobile.

Conclusion:

I think all the above analysis and critical evaluation has clearly demonstrated that I have tried to

evaluate the website and provided a short description of all the strong and weak aspects and their

possible improvements, propose ideas for further improvement.

Final Conclusion:

I think all the above testing and documentation has clearly demonstrated that I have tried to test

the website and provided a short description of all the problems and their possible remedies.

31

Bibliography B, H. (2010). HTML and CSS: The Good Parts. O'Reilly Media.

B, K. (2006). HTML and XHTML: The Definitive Guide. O'Reilly Media.

Chrisholm, W. a. (May (2008)). Universal Design for Web Applications: Web Applications for Everyone.

O’Reilly Media.

Felke-Morris. (2010). Web Development & Design Foundations. Pearson.

K, L. (2010). eCommerce 2010. Pearson.

Lawson, B. a. (2010). Introducing HTML5. Pearson.

Niederst, J. (2006). Web Design in a Nutshell. O'Reilly Media.