Overview:

This unit was about HTML Site Building. I always find it hard writing an the entire page  of simple html without using any kind of styling. It was challenge for me to write the pages that I proposed in Unit 1.  Before I jumped to writing code, I reviewed the objectives and the requirements that was asked by the instructor.

In this unit we were given two badly written pages which I corrected and after that I added 4 more pages that are related to the project that I proposed in Unit 1.

Learning Outcome:
This unit taught me how to write HTML code in a structured format ensuring it complied to XHTML standards. I learned what most tags do in html and what is metadata. I also learned how to write HTML code that is easily readable.  I also learned how to indent in unordered lists.

What went well:

It was easy for me to add the images for the time being to the website, I will be adding more images to these sites once the styling is done. Creating forms was really easy I just followed w3school tutorial and it was piece of cake.

What did not go well:

Combining the tags was a bit confusing for me as I couldn’t test the div or span tags without using the styling. Hopefully it would be sorted out in unit 3. Adding table was confusing as my site contains no Tabular Data so I decided not to add them.  I still have made a table as a sample to complete the objective.

Here is a link for this table page: http://student.athabascau.ca/~mohamedye/sample-tables.html

Explanation of how pages fit with the needs of the personas and scenarios:  

At the moment as these pages are just simple HTML the personas I have created will find it difficult to understand the page, but I have made it easier to read and accessible for them. In the upcoming units these pages will have styling so that people are more attracted to the site.

Every page is designed for every kind of device so that it can be easily viewed on different gadgets.

Homepage: Customers who are searching for cleaning services will quickly find the website more user friendly. Such as Jim who is in need of a cleaning service can read the page and will find that the company is offering a free complimentary cleaning. He can quickly click on the button that will directly take him to the booking page. For people like Jateen who wants to book services by phone, he will find a phone number of the company on the home page which he can click to call the company.

About Us:

The page talks about the history of the company. The page targets the people like carol who are looking for company’s credibility.  The page also described some of the company’s policy so that customers are satisfied with how the company deals with its employees and customers. Once she reads the whole document she will find a booking link, so she can book us for the services.  Carlos who Is more attracted to images will find this site appealing as he would get to see images on every page that is appealing to him.

Bookings or contact:

This page contains a very simple online booking form so that personas that I discussed in Unit 1 will find it really easy to book an appointment. The form has various option from which the customers can choose. In the later stages this form would restrict user from inputting wrong information. And it would be also much more responsive while a user is filling out the form.

green-cleaning.html:

This page talks about the how the company is trying to use the products that are not harmful for the environment. This page is like an article as well for people like Beata who like to read. More content will be added to this page later.

 Pages that will be included in the next unit : Services.html

Meeting the requirement:

1. a minimum of three HTML pages complying with at least XHTML 1.0 standards or (better).

Ans: I made 4 more pages that are related to Unit 1. I will add more pages later as the project progresses.

2. at least one image.

Ans:  I have added multiple images in about.html page, I have added a logo of the project on the top left position of each page.

3. hyperlinks between all the pages (using relative URLs).

Ans: Each page is linked with each other through hyperlinks.

4. at least one hyperlink to an external website.
Ans: I added a hyperlink of Wikipedia in the green-cleaning.html page.

5.sufficient text to require the use of at least two heading styles

Ans: I added description to each page using different heading styles.

6. at least one list (ordered or unordered).
Ans: Every page has an unordered list , which is supposed to by my navigation bar.

7. at least one tag(preferably more), with a specified name, to identify a section of a page (of no particular value yet, but needed later on). It would be best if this were something that you see the need to reformat later to change its appearance, position, or behaviour, for example a sidebar floated on one side of the page.
Ans: The tag has been used extensively in each page.
.
 
8. at least one tag (preferably more), with a specified name, to identify a section of text within a paragraph or other block-level element (again, no immediate value—for use later). It would be best if this were something that you see the need to reformat later to change its appearance, position, or behaviour, for example, a change in typeface or font.
Ans: The tag is used in every page extensively..

 

9.   a table. (Special note regarding tables: tables are only ever to be used for tabular data, with meaningful rows and columns of data, never to lay out things on the page—such use is common but strongly deprecated because of accessibility issues).
Ans: My website doesn’t contain any tabular data so I havnt added it to my project pages but I have made a sample page that shows table tag. 

10. a form, the contents of which are mailed to the author (you).

Ans: I created the form in contact.html page.

Critique of Sample Pages:

Sample Page 1:

1. There was no DOCTYPE Tag, so I corrected It.
2. I added meta tags for the page as there was no meta tags
3. The page had no Title, So I added the title of “sample 1:
4. Many of the tags had no closing tags.
5. Some of the closing tags were defined in wrong place
6. There was no “
   ” tag to jump to next line, due to this the whole paragraph was in one line which made it harder for readability.
7. Some of the tags were capitalized
8. The code was lacking indentation for readability.
9. The image tag had no alt attribute. I fixed the image source it is visible now in the fixed page. I added width to the page so that it is also visible in mobile devices.
10. The table was poorly structured, so I restructured it.
11. The list didn’t have the closing tag. There was also an unnecessary tag of ul defined.
12. “Making Table “The header tag was unordered, and the text was written outside the tag.
13. Removed the border as it is depreciated.

Sample Page 2:

1. The page had no content.
2. XML namespace was missing.
3. There were no meta tags defined.

Submission:

Fixed Sample Page 1:  http://student.athabascau.ca/~mohamedye/sample1.html

Fixed Sample Page 2 : http://student.athabascau.ca/~mohamedye/sample2.html

My Website : http://student.athabascau.ca/~mohamedye/

Below I have attached a zip file that contains all the pages that I have created. 

Unit2.zip