Landing : Athabascau University

Group members: this is the place for your learning diary. Use this to post your zipped-up site at least once each unit, and your reflections as often as you wish (at least once per unit). Please write your reflections directly in the post, not as attached files. Where you do need to attach documents, such as for unit 1 designs, use PDF, PNG or JPG formats. You can attach files using the 'Embed content' link in the editor.

QUICK COURSE LINKS:  Add blog post - Read latest group postsFAQs: Course process : Site design : HTML : CSS : JavaScript : JQuery : AJAX : Misc

Unit 2: HTML Site Building

  • Public
By Mipam Lauder in the group COMP 266 January 10, 2021 - 11:23pm

Template Critique

I wasn’t quite sure how I was going to incorporate the 2 poorly written web pages in my website, so I opted instead to correct the errors I found and create separate pages for my site.

Sample 1 didn’t include a doctype, so I put in <!doctype html> at the top of the page. The language was missing, so I set it to lang=’en’ in the html tag. The charset was missing as well, so I then set the charset to utf-8 in the head section. Any tags set to upper case (ie.

) were converted to lower case to match the rest of the page tags, and missing closing tags were added. The tag was replaced with to convey emphasis, rather than simply italicizing the text.

The first anchor tag was shortened to contain just the beginning of the sentence, rather than the entire sentence, and the second anchor tag was modified to have the href target contained between quotation marks. The image tag had its alt attribute set. The lists were a jumble, tags were mixed around, and I re-did the tags to ensure proper opening and closing tags for the lists and list items.

The table had its border field removed, as it was a style, and the tr and td tags were properly closed.

I used Notepad++ to edit the html files for this unit, and the Mozilla website was used as a reference for the html format.

 

Website pages

I’ve decided to combine the separate web pages for each island area into one webpage. I plan to hide unselected areas using javascript later on. I learned a lot on how svg images work, particularly how the image resizes automatically based on the viewport size, and I’ve decided to use a svg image as an image map on the home page. The image I used is a heavily modified version of this original image: https://commons.wikimedia.org/wiki/File:Vancouver_Island_Map-fr.svg by Arct (https://commons.wikimedia.org/wiki/User:Arct). All modern browsers can open svg images, and text is provided if the image cannot be displayed.

The MDN Web Docs at https://developer.mozilla.org/en-US/docs/Learn are my primary source as an html guide, with the html tag reference at https://www.w3schools.com/tags/default.asp used as a secondary resource.

All of the scenarios are supported by the web pages: Marinas are listed by area, safe boating resources are available, and marine weather is shown.

 

The website is visible at: http://student.athabascau.ca/~mipamla/

Template critique:  unit2templatecritique.zip

Unit 2 website files (zipped): Website Files

Unit 2 site map: Site Map

Unit 2 mockup: Mockup

Comments

These comments are moderated. Your comment will not be visible unless accepted by the content owner.

Only simple HTML formatting is allowed and any hyperlinks will be stripped away. If you need to include a URL then please simply type it so that users can copy and paste it if needed.

(Required)

(Required)