My html site building

The zip file above is my Html site-building. My webpage address is: http://student.athabascau.ca/~jiayingzh/  The Sample1 HTML is very unorganized and messy. Some start tags are showed in the middle of the text and then the end tags on the start of another line. You can’t tell the beginning and end of every sections unless you really need to look into it to find the start and end tag. It does not has much structure tags such as header tags, main tags, footers, or section tags article tags etcetera. It is not quit readable, and when someone else look at the code it is difficult to figure out what is going on. Moreover, it does not have a good accessibility, it is not quite suitable for users with different devices. It’s content is hard to read while accessed by mobile.  Also, the heading styles tag it was using were also inappropriate. Some of its end tag was end after the whole paragraph instead of just the title, which makes the paragraph even has the same big size and bold as the title. Moreover, its table does not havetag, and the information filling in the table was also not appropriate and confusing. In general, only limited tag and attributes was used in the sample1, and the whole webpage is very unorganized, unstructured, uncleared, and confusing.

            In contrast, my website html is very organized and structured. All my pages was divided into head, body, main, and footer. And my language is very maintainable and cleared, anyone look into my html could easy to understand my code and structure. My website is also very accessible as I use the meta tag to set the viewpoint for the users who access by mobile. There are totally 6 html pages in for my website that are complying with HTML 5 standards. And there are 6 images, 1 videos, and 2 hyperlink to external websites. You could access into every page by clicking the top menu on the homepage, and there is a “go back” button on every other page which could link back to the homepage. On the “Contact us” page, I also applied the form and input tags to allow users to submit their information to me. Under the form tags, I used a lot of attributes such as type of radio, text, tel, email and so on.

My website is also fitting with the needs of the personas and scenarios identified in Unit 1. As I designed and described in Unit 1, my website is an online store, it sells Perfume sachets and materials for DIY sachets, also provides information about the herbs that inside the sachet. On the homepage, it displays the name of my the store as a very big title, and a simple introduction. I posts 3 big beautiful sachet image on the homepage that while people take the first look on my homepage, they would immediately get interested in buying my products, and have the idea about what is the website for.  The shop page of my website showcases the products that I am selling, users could access into that page either by clicking the “shop” in the menu or by clicking the very large pretty image on the homepage. The DIY Tutorial page has a YouTube video teaching about how to make Chinese Sachet, is for those people who are passionate about hand knitting that I have mentioned in the Unit 1 Persona 1 (Self-employed handicraftsman; Housewife). On the Herbs & History page, I make two hyperlink to external websites, it provides information about the history of the Chinese sachet and introduction about different kind of herbs, which is fitting the Persona 2 Scenario in my site design (A research student who are writing an research essay about how herbs affect body, he is searching for information and my website helpful.) Overall, my website is very well designed and matching the purpose of and needs. I am looking forward to making it even more prettier and perfect!