# Web Design/HTML Challenges

Web Design → HTML Challenges
This page is part of the Web Design project. :
Use the following HTML Challenges to hone your decision making skills in HTML Programming. Should you use a <h2> element or a <strong> element? Hopefully, these challenges will help you figure out the right answer for each situation.
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.
Copy-n-paste the following html into a new text-file (in Notepad or your preferred text editor) and save your file with the name html_challenge1.html.
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. 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 Link Tutorial.

### Local Links

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 Lorem Generator or 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

Use the HTML Dog intermediate tutorial on tables to re-create this table.
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.

### 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 validation 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.

## Challenge 5: A simple form

For this challenge, you might want to refer to HTML Dog's Beginner tutorial for Forms.
Create a small online survey with four questions of your own. Your survey should first collect the participants details (name, address, gender, D.O.B., a password etc), followed by four questions to answer.
Ensure that your survey includes:
* Simple text inputs
* A password input.
* Select drop-down boxes (for State, or within your questions).
* Radio buttons and checkboxes (as part of your form design).
* A large text area for comments at the end.
* A submit button with your own text (such as "Send Survey")
* A reset button.

## Challenge 6: Images
### Worth 1024 Words

Find a copyright free image on Flickr using Flickr's Creative Commons section. Download the pic into an images directory and then write up a page that includes the image on the left hand side, along with a heading and some descriptive text (perhaps from Wikipedia). The text and heading should appear to the right of the image, and wrap around the picture.
For bonus marks:
* Have the picture link to the original image on flickr.
* Prevent the blue/purple border from appearing around the hyperlinked image.
* Add a 15 pixel margin around the picture using CSS.
* Add a drop shadow to the image using CSS. (There's a few ways to do this; you may like to check out the box-shadow examples at CSS3.info.)
* Add an attribution for your image and text (a link back to the original photographer, author or source of your image and text).
* Add some alt text to your image for accessibility. This will be read to people, so make sure it's accurate and descriptive.
Save your code as images.html and link to your new page from your index page.

### Creating an Image Map

Using some free third party software of your choice such as MapEdit (or Online Image Map Editor for Mediawiki or hand code it if you're really keen. You can find a tutorial on how to do that here), use the map of Australia (or your own country) as a graphical table-of-contents. When a user clicks on a state, they should be taken to a separate page just for that state.
You will need to create:
* An index.html containing your image map.
* Links to pages in the wikipedia from at least two different states (e.g. NSW, Queensland) to demonstrate that you can link the image map.
* You should be able to explain how the html for the image map works.
* And of course, all your pages should validate.

## Challenge 7: Some advanced table features

Tables can get quite a bit more stylish (and accessible) than the previous challenge! For some examples ranging from no-style to pretty tables, check out FluidMind's Styling tables with CSS.
Work through Veerle's CSS Styled Table tutorial, trying it out as you go (you'll need to download the provided images). To do this you will need to know how the basics of how to use CSS - see HTML Dog's Basic CSS tutorial for more information.
Once you've got your beautiful table working from the example,
* Open up your HTML Challenge 3 - Tables for tabular data and save it as challenge7.html.
* Add an extra column of data to your table.
* In this column add the missing city data (each row of data was for the three cities: Sydney, Melbourne and Adelaide)
* Add another row of data for Hobart, with the following temperatures: January: 24.8, February: 25.2, March: 19.8
* Apply the styles from your example to your own table (this should only require a few changes to your markup!)

## Challenge 8: An accessible form with style

Have a go at creating a new webpage that displays a form with the fields in the image. You might need to read through HTML Dog's Accessible forms tutorial for this challenge.
* Note that fieldsets are being used to group the form fields.
* Since we may not yet know how to process the information on a form, for the moment just use the form attribute action="mailto:my@emailaddy.com" to send yourself an email (modify with your own address).
* As always, ensure that your page validates!
* Oh, and you'll need to add a submit button!
Once you have your form displaying, we'll take it one step further by adding some accessibility:
* Identify all the labels for your fields using the <label> element.
* Add access keys for your fields and test them!