Exercise 1

The following exercises will test your knowledge of HTML and CSS that you encountered through the tutorials. You can download the files for this tutorial using the following link. Be sure to extract the zip file in an appropriate location.

Files for exercises 1 and 2

There will be 2 files corresponding to each exercise below. For these exercises, you won't be required to have an external CSS file; embedding CSS in the document head will be sufficient here.

Don't be afraid to carry out your own research if you aren't sure how to do something. Looking back through the tutorial and references may help as well.

Finally, don't worry about producing an exact copy, a rough approximation is good enough. You may also need to rely on a fair amount of trial and error too.

Part 1

Open exercise-1.html in notepad++. This part is concerned solely with HTML.

  1. Create 6 headings on the page, using all 6 types of heading. These headings can be called whatever you like.

  2. Create a paragraph and fill it with a paragraph of lorem ipsum.

  3. Place a horizontal line between the paragraph and the 6 headings.

  4. Create a bulleted list with 3 list elements inside. Fill each list element with the name of each D&A College campus.

  5. Find an image of a flower (try to find one 1500 pixels wide or less) and move it to your images folder. Place it on the page below the paragraph. Make sure to give it a descriptive alt attribute.

  6. Add a link to MyLearning below the image.

  7. Create a numbered list with 8 list elements. Fill each list element with types of fruit.

  8. Create a form with a username input, email input, a comment box, and a submit button. Make sure to change the submit text to 'Send message' and to add labels describing each input (except for the submit input).

Part 2

For this part of the exercise, please place your CSS rules between the <style> tags in the document head.

  1. Make every even numbered heading right aligned.

  2. Wrap all the markup in the body in a div with a page class, give it an appropriate width and automatic margins.

  3. Fit the image to the page (if it is too big) by making it 100% wide.

  4. Give each list a dark blue, dashed border. Make it relatively thick.

  5. Give each list a top and bottom margin of 10 pixels, a top and bottom padding of 10 pixels, and a left and right padding of 30 pixels.

  6. Make each form label display as a block element.

  7. Make each form input (including the comment box) 100% wide and give them 10 pixels of padding.

  8. Make the font size of all non-header elements a little bigger.

  9. Change the font family of all the headings to something other than 'Times new roman'. W3 Schools may be a good place to start for research.

  10. Change the link colour to red and remove the underline.

  11. Add a hover effect to the link that makes the underline re-appear when you mouse over it.