Week 4 Overview | Basic Elements | Document Sectioning | Images | DOM | Worksheet

Read and Analyze

<aside> ❓ Do the exercises in the notes https://terminallearning.com/devHtml/htmlDom.html

Read https://terminallearning.com/devHtml/elsImages.html

  1. If you were creating a personal portfolio web site showing off your work and projects, and you wanted to have an image of your "head shot" in your document header, would you use the <figure> element? Why or why not?

</aside>

<aside> ❓ We use semantic elements so we can pass Level SC 1.3.1 https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html

Read https://webaim.org/techniques/semanticstructure/ and answer the following questions (we haven’t talked about lists but take notes, since you’ll be learning these later in the course):

  1. In the past, web developers avoided using the level-N headings properly. Why?
  2. What are three examples of page regions you might find in a typical document?
  3. Why does a document need page regions?
  4. Are <section> and <article> elements considered page regions?
  5. What is the proper use of the <h1> to <h6> elements in terms of the outline of the page’s content? What should <h1> be used for? What should <h2> through <h6> be used for?

</aside>

<aside> ❓ Read Elements for Document Sectioning tutorial, and answer the following:

  1. In terms of accessibility, why is it important to use semantic elements to structure a web document?
  2. Which semantic element would you use for each of the following items:
    1. The document’s footer
    2. The copyright notice inside a document footer
    3. The document’s header
    4. A larger block of content (such as a tutorial or blog post) that could also stand on it’s own in a separate page.
    5. A sidebar or block element that contains separate content that is related to the document’s main content/topic.
    6. Navigation links or menus
  3. When should you use <strong> vs. <b>? When should you use <em> vs. <i>?
  4. When is it ok to use an empty alt=”” attribute in an <img> element?
  5. What’s one reason why you should use relative paths vs. absolute paths?  What’s one reason why you should use absolute paths vs. relative paths?
  6. What should be the first child element of an <article> or <section> element?
  7. Using G130 (https://www.w3.org/WAI/WCAG21/Techniques/general/G130) as a guideline, come up with the page title for a web page that provides information and tips on a specific video game.

The page has sections for:

  1. Describing the game and its mechanics, main storyline or premise, initial choices such as character creation and other setup, etc
  2. Listing and describing the quests in the game and the rewards for completing each
  3. A list of tips, tricks, and/or cheats for the game

Come up with section headings for each section.

</aside>

<aside> ❓ In the Elements for Document Sectioning tutorial, there were two codepens that demonstrated some examples of document structure:

https://codepen.io/ProfWendi/pen/WgRKGM

https://codepen.io/ProfWendi/pen/vYpOezb

  1. For each codepen, create an HTML page (e.g. example1.html and example2.html)

In each HTML page, add the minimal HTML.

Inside each page’s <body> element, copy and paste the contents of codepen’s HTML tab (e.g copy the first one’s html into example1.html and the second codepen’s HTML into example2.html)

For each of your two pages, view the page structure using the WAVE Accessibility tool.

How many regions does each page have? What are they and how are they related (e.g. what order, what’s nested, etc)?

For each of your example1.html and example2.html pages, sketch out the DOM tree.

</aside>

<aside> ❓ 15. Create a reference list of all the HTML elements you’ve learned so far.

</aside>

Practice Exercises

Practice exercises are coding exercises you should do for practice.

Learning is done by practice, not by only doing graded assignments.

For each coded exercise:

  1. Set up a directory for this week’s exercises, e.g. /week3
  2. Add the /week3 directory to your /syst10049 directory (not in the password-protected assignments area)
  3. Create a sub-directory for each exercise e.g. /week3/ex1, /week3/ex2, etc.
  4. Publish and test each exercise. This will make it easier for me to help you with any errors or problems you might be having. I also randomly view certain exercises to make sure you’re doing the work and making an effort in this course.
  5. Validate your HTML documents and fix any validation errors. Use the WAVE extension or online tool to check the structure of your pages, and to also look for any accessibility errors that need to be fixed.

<aside> <img src="/icons/code_green.svg" alt="/icons/code_green.svg" width="40px" /> If you would like to make your pages look nicer, you can add one of the following <link> elements inside the <head> section of your document:

<link rel=”stylesheet” href=”https://jollymor.dev.fast.sheridanc.on.ca/res/css/main.css”>

This will also help you more easily see some of the document sectioning elements on your page.

</aside>

In this exercise’s project directory, add an index.html file. Add the minimal HTML.

Create an accessible page title.