It's about how to develop a fully-fledged, mobile-ready ( floral ) website in easy steps... Tools used: Adobe Dreamweaver, Adobe Illustrator, Adobe Photoshop, Sublime Text, Notepad++, My most satisfactory project with the highest level of effort I've put into so far. *Got a "Distinction" mark when I submitted this project as my assignment in my regular course at my university!

1. 1

2. 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
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.
2

3. Task 1
Introduction:
In my following task, I am going to show that m y 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
3

4. Home
Opening
Times
Delivery
Rates
Category
Enquiry
Fig:1.1 Structure of the Website
Page Layout:
Layout Design
Old Lane Flowers
Home
Opening Times
left bar
footer
Delivery Rates
Category
Middle
right bar
footer
Enquiry
footer
Fig:1.1 Page Layout
4

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:
5

6. Fig 1.3: Home
Opening Times:
6

7. Fig 1.4: Opening Times
Delivery Rates:
7

8. Fig 1.5: Delivery Rates
Category:
8

9. Fig 1.6: Category
Enquiry:
9

10. Fig 1.7: Enquiry
Cross-browser compatibility testing:
10

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.
11

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-styletype: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); backgroundrepeat: no-repeat;
background-position: 0px top;}#menu ul.menu li div ul { padding: 6px 6px 9px 6px; padding-top: 0;backgroundimage: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 */
12

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;fontweight: 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;}
13

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
14

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 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 enclosed all attributes values in quotations(“”)
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.
15

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

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.
17

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

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

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

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

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 FilesMozilla Firefoxreshtml.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:
22

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:
23

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.
24

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”.
25

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”.
26

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.
27

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:
28

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:
29

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.
30

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.
31