# Summary, further reading, homework
## Learning goals

* Understand the separation between content, structure, layout and meta data
* Review HTML, CSS, XML, SVG and RDFa
* Understand what makes a clean HTML markup ("separation of concerns") vs. unclean one ("mixing responsibilities"); and implications (better or worse maintenance, better or worse personalization, better or worse accessibility)

## Script

Wget script (Linux) to download all the videos of this part Run it in a command line and it will download all the videos.
It's important while doing these challenges to not think about how the page will be displayed yet, but instead focus on creating meaningful mark-up!

## Challenge 1: Which heading to choose?

OK, let's get started! This first challenge builds on the skills you developed in What is HTML, helping you to decide when to use an <h2> heading and when to use an <h1> heading.
Open your file in a web browser and compare it to the image displayed here (you can right-click on the image to open a larger version in another window or tab).
Your challenge is to add
* headings (<h1>, <h2>, <h3> etc.)
* paragraphs (<p>)
* emphasis and strong (<em> and <strong>)
so that your page looks like the one in the image!
Note: Yes, it's true, a web browser will display the h1 heading very large, and the h6 heading quite small, and all the other headings in between! But don't get into the habit of selecting an h4 heading because it displays with the size that you're after! You can always modify the size of your elements using your stylesheet (more on that later).
The key is to use the headings to structure your information in a useful (and meaningful) way! For example, every page should only ever have one main heading - your h1 heading. An h2 heading should only ever be a sub-heading of your h1 heading. Similarly, an h3 heading should only ever be a sub-heading of an h2 heading etc.
Once you are happy with your work (and have checked it in your browser), read through Paragraphs and Headings tutorial over at Wikibooks and compare your markup! Make sure you chat about the decisions you made with someone around you if possible!
Once you're all finished, read through the following excellent snippets from HTML dog as a summary of what you've learned:
* Paragraphs and how to emphasize text!
* All about headings

## Challenge 2: Hyperlinks

For help with this challenge, you can refer to the HTML Dog's Link Tutorial.

### Local Link

Save your page as links.html and add a link to another page (if you already have an index.html page this would be a good candidate).

### Global Links

Add some links to Google.com and this HTML challenges page (don't forget the http:// bit at the beginning! Try it without and see what happens).

### Internal Links

Internal links let you link to parts of the same page, like the table of contents at the top of this page.
Create a longish page (use the Lipsum Generator to painlessly create a big block of text), add an identifier about halfway down the page, and put a link to it at the top of the page.
Now add another identifier to the top of the page, and add a 'Top of page' link at your halfway mark so you can quickly navigate from top to halfway and back again.
(For bonus points, make a link that goes straight to the Hyperlinks heading on this page! How can you find out what identifier you need to link to?)

### Creating an email hyperlink

Add a hyperlink to your email address. When a visitor clicks on the link it should open up their email software with your email address filled in and the subject line set to say "Hello".
You'll have to search to find out how to do this one! What words are best to get the information you need? Hint!.
For merit points consider:
* why email links might not be such a good idea
* how to avoid some of the problems they create

## Challenge 3: Tables for tabular data

Notes:
* If you don't have a border, check the <table> tag for an attribute you may have missed.
* You shouldn't need to add any bold to get your heading looking like a heading.
* As always, validate your page to make sure you've got everything in the right place.

## Challenge 4: Lists, lists and more lists
### Numbers, bullets and definitions

Re-create the html page shown here (click on the image to see it full size).
For this challenge, you might want to refer to Tizag's list tutorial.
There are 3 lists on the page: a definition list, an unordered list, and an odd looking ordered list. Hint: To re-create the ordered list you'll need to add a 'type' attribute to each LI tag. Note that adding this attribute will make your code not validate as HTML 4 Strict, but it can be replaced later when you start working with Cascading Style Sheets.

### Nested lists

A 'nested' list is a list that contains another list. On the web, they're commonly used for indexes or tables of contents (such as the one at the top of his page!) or menus that show all the pages inside of a section of a website.
Try recreating the nested list to the right. Use your HTML validator software to check errors as you go along -- it's better to pick up problems early on, especially with how lists must be nested in others.
Hint: To recreate the nested list from the image, you'll need to use the 'type' attribute on the UL or OL tags. Like the previous list, adding this attribute will make your code invalid, but we can correct it later by using CSS instead.

## Quiz

Web Science/Part1: Foundations of the web/Web content/Summary, further reading, homework/quiz