Week 3 Practical Exercise

This blog post was made to point the interesting parts of the exercises given on week 3.
To see fullpost, don't hesitate to click "Read More" :D


Exercise 1
- What's the difference between <strong> and <b> ?
=> Doing this exercise makes me know the answer


Use the <strong> and <em> tags when the content of your page requires that certain words or phrases be stressed. Use them sparingly or your page, much as you would use exclamation points ( ! ! ! ). If you are only highlighting words for a visual effect to assist in navigation use the <b> and <i> tags (http://www.think-ink.net/html/bold.htm).

One way of working out what is semantically most appropriate is to imagine what a screen reader would do. It will read a <b> tag in a normal voice, but it will emphasise a <strong> tag with a "bigger" voice. So now we know what each tag means. (http://www.webmasterworld.com/forum21/9181.htm)


Exercise 3
I've actually installed Web Developer add-ons years ago but never use it. I've just realized that it's REALLY a great tool.

– CSS > View Style Information. This is like an "Inspect Element" in Chrome.
- CSS > Edit CSS. This menu will let you edit the CSS on-the-fly.
- Information > Display Block size. This menu will let you know dimensions (block size) for div, form, etc
- Tools > Validate CSS. A shortcut to validate your CSS code using the W3C CSS validation service.
- Tools > Display page validation. Another cool feature that automatically validates your html code. If you change your HTML on-the fly using web-developer, it will validate your code straightaway after you finish editing.


I skipped exercise 2 & 4 because it's fairly easy. For exercise 4, I think it's a good exercise that shows how to modifying DOM using raw Javascript (without framework). However, if it's easier to use jQuery to accessing harder structured DOM.