Semantics, Navigation and HTML Images

Housekeeping

1. Home ergonomics with Brett
2. Schedule recap and Friday thoughts
3. CPNT 201 Assignment 1
4. Assignments 2-4

Homework

1. Page Structure
   • Document and Website structure
2. Content Images
   • Read: Images in HTML
3. Lists and Links
   • Read: Styling lists
   • Read: Styling links
4. Colour
   • Watch: Read color hex codes
   • Read: On Switching from HEX & RGB to HSL by Sara Soueidan
   • Read: Color contrast
5. Flexbox
   • Read: A Complete Guide to Flexbox

---

1. Page Structure

Learning Objectives

• Discuss common web page structures.
• Compare semantic elements to non-semantic wrappers.
• Discuss the relationship of semantic elements to ARIA roles.
• Define divitis.
• Demonstrate decendant and child combination selectors.

Materials

• MDN: Document and Website structure

---

2. Clickable links in a vertical navigation

Learning Objectives

• Use a child combination selector to target elements inside a nav element.
• Remove the default styles of an unordered list.
• Modify links to look like navigation buttons.
• Use padding to increase the clickable area of a navigation link.
• Use the display property to change the default behaviour of inline and block elements.

Materials

• Starter Code: See the Test your skills code above
• Sample Code: Basic navigation list

---

3. Pseudo-selectors

Learning Objectives

• Using the :hover pseudo-selector, change the presentation of a navigation link when the user hovers over it.
• Using the :active pseudo-selector, change the presentation of a navigation link when the user clicks on it.

Materials

• User-action pseudo classes

---

Activities

1. Structuring a page of content

Read and complete the following MDN Test your skills activity.

• Structuring a page of content

2. Duplicate a vertical navigation menu

Try to duplicate a navigation menu using the sample code supplied in the Test your skills activity.

1. Copy and paste the navigation code into a new Codepen.
2. Reset the default padding and bullets of the link list.
3. Search for an example of a vertical navigation menu online (the navigation behind hamburger menus is often vertical) that you think you can duplicate.
   • How much padding needs to be added to the a element?
   • What colours are used? How do you find this information? What elements are the colours applied to?
   • What other design elements are needed? What CSS properties are needed to create them?

---

Cleanup Time!

• Submit today’s Codepen to the Dailies section (in Assessments) in Brightspace.