REFRESH THIS PAGE

I am currently updating these pages and might have made minor changes since you last viewed it in your browser.

Week 5: Elements for Content Grouping, Text Semantics and Links

In this lesson you'll learn the rest of the elements we use for content grouping and to display and format text content on a page, although I use the word "format" loosely, since generally formatting should be done with CSS. You'll learn a few more semantic and non-semantic elements used to more clearly define bits of text for accessible pages, and also a bit more details on things you can do with links. You'll also learn how to display special characters and symbols that don't appear on a standard keyboard, and even make those symbols accessible to users who might not be able to see them.

Content Grouping, Text, and Links

Notes

Resources

References:
- MDN: Anchor Tag (links)
- HTML Living Standard Section 4.4 - Content Grouping
- HTML Living Standard Section 4.5 - Text-Level Semantics
- HTML Living Standard Section 13.5 - Named Character Entities
- MDN: HTML Entities
- W3Schools: HTML Character Sets
Tools:
- HTML Validator - always validate all of your HTML.
- Lorum Ipsum Text Generator - there are other ones, I like this one. Feel free to use a different one. Generates filler text for web pages.
- &What - search for the entity codes for specific characters.
- FreeFormatter HTML Entity List is a nice list of character entities, but more importantly, check out the tools on the side! The HTML Escape/Unescape is especially useful!!

Homework

Practice/Study Questions

Complete this week's worksheet. Note that worksheets can be completed during class or after class. They can be completed using your own lecture notes or from the provided materials. Worksheets are not directly graded, but the questions might appear on exams and other evaluations. Ask the professor if you would like feedback on your worksheet (you must make an attempt on the worksheet in order to receive feedback).
Answer the following questions where you take your class notes (form your answers using YOUR OWN WORDS; you might have to search for answers in the resources above):
1. What is the difference between internal links and external links? What are "jump links"?
2. What are HTML Entities? Why do we use them? What are the different entity codes you can use to display the © symbol?

Practice Exercises

Note
In the practice exercises, elements are referred to in all-caps, e.g. FOOTER refers to the <footer></footer> element (or it could also refer to an opening <footer> tag or closing </footer> tag, you will know by the context in which it's used).

For each exercise, validate the HTML using the HTML Validator. Fix all problems until you get no errors.

Note
If you would like to make your pages "pretty", I have created a very basic stylesheet you can use (and feel free to edit, if you're feeling adventurous or already know some CSS):

In your /syst10049 directory, add a sub-directory called /css
Download the main.css file by right-clicking the link and selecting "Save As..." in the context menu. Save the main.css file to your /syst10049/css directory.
In any .html file where you want to add the styles, add the following code inside the document's <head></head> element:
```
<link rel="stylesheet" href="../../css/main.css">
```
This assumes that you're following the file/directory structure described in each week's exercises and using industry best practices. (e.g. if your .html is in /week1/exercise1, then ../../ goes back up to the syst10049 directory, then /css/main.css references the main.css file inside the /css directory inside /syst10049)

Create a new project directory called /exercise1 in this week's directory. Add an index page to your project directory. In the index page, add the minimal HTML structure. Add a standard header and footer to your page. Then add the code necessary to display the following content on the page:

Required output for question 1.

Use the references provided above to find the right character entities and codes to use for the various symbols.
Create a new project directory called /exercise2 in this week's directory. Add an index page to your project directory. In the index page, add the minimal HTML structure. Add the following to your index page:
- Download coffee images and unpack them to an appropriate location in your project directory.
- Add a header to your index page that contains:
  - The coffeeBanner image
  - A level-1 heading with the content "All About Coffee".
- Add the standard footer to your page.
- Between the header and footer, and 750 words of text in 3-5 paragraphs (lorum ipsum text is fine).
- Between the first and second paragraph, add a figure showing the coffee.png image. Include the caption "The Caffeine Molecule: " followed by the molecular formula for caffeine (see image below).
Create an index page for each of your exercise directories so far. For example, add a /week1/index.html, /week2/index.html, /week3/index.html, and /week4/index.html. On each index page, add the minimal HTML and set the page title to "Week X Exercises" where "X" is the week number. Add a HEADER with a level-1 heading "FirstName's Exercises" where "FirstName" is your first name. Add a level-2 heading to the HEADER with the content "Week X" where X is the week number. On each page, add a navigation element that contains links to all the exercises for that week. Add a second navigation element with links to each week's directory.