Week 5 Practical

Complete at beginning of class. Code this from scratch. Do not style the page with CSS or add any other elements. Test your work in a browser after every change in code.

  1. Create a root folder for a web page on a topic of your choice. Give it an appropriate name.
  2. Create a new HTML file called index.html and save it to your root folder.
  3. Code the basic HTML skeleton in index.html.
  4. Add the two lines of code that are required to make this an HTML5 document.
  5. Create a <section> element within the <body> element.
  6. Create four elements within the <section> element:
    • <header> with an <h1> element inside it holding a few words of text
    • <aside> with a <p> element inside it holding a paragraph of text
    • <article> with several <p> elements inside it holding paragraphs of text
    • <footer> with a <p> element inside it holding a few words of text
  7. Style the page with an external stylesheet named styles.css:
    • Set the max-width for the section selector to 1200px.
    • Set the width for the aside selector to 30%, and float it left.
    • Set the width for the article selector to 68%, set its margin-left to 2%, and float it left.
    • Clear left for the footer selector.
  8. Save everything and test the page in a browser. Try resizing the browser.
  9. ZIP the root folder and turn it in to the appropriate basket in Dropbox.

You may refer to prior lessons, your eBook, or online resources. You may ask for my help on one or two items, but I will not be guiding you through this review.

After you have had sufficient time to complete this on your own, I will demonstrate how I would do it.

Midterm Turn-In

Make sure to turn in your Midterm project today.

If you get it in at the beginning of class today, you can get some feedback on it. Then you still have time to make edits and submit it before midnight.

HTML Challenges

Each of the following HTML challenges builds on the previous one. Complete each one in turn, working with a single HTML and a single CSS file within a site folder.

HTML Challenge 1

Make a site folder called challenges. In it, create an HTML page called index.html. Give it an h1 header, an h2 subheader, and three paragraphs. It should look like this. You can get filler text here: http://www.lipsum.com/

HTML challenge 1 - headers and paragraphs

HTML Challenge 2

Create an external stylesheet in your site folder, and link to it from the HTML file. Create styles that change the look of the h1 and h2 elements; set the font family as Georgia, Times, serif and define their color and font size.

HTML challenge 2 - style the headers

HTML Challenge 3

Wrap all the content inside a wrapping section element. Give that section an ID and set the max-width to 800 pixels. Give the section a one pixel border and set the left and right margins so that it centers on the page.

HTML challenge 3 - container div

HTML Challenge 4

Create a CSS rule for the body element that sets the background color of the page to something other than white.

Add a rule to the wrapping section that sets the background color to white.

HTML challenge 4 - body and conatiner div background colors

HTML Challenge 5

Create a basic reset rule at the very top of the stylesheet that sets margins and padding to zero on all elements. REMINDER: The selector is simply the * character.

HTML challenge 5 - reset margins and paddings

HTML Challenge 6

Set some padding on the main wrapping section. Set its top and bottom margins to 20px. BONUS: Combine the top, bottom, left, and right margin declarations into a single declaration.

HTML challenge 6 - add paddings and margins

HTML Challenge 7

Create some bottom margins back for the other elements by updating the header selectors and creating a rule targeting paragraphs inside the wrapping section.

HTML challenge 7 - bottom margins

HTML Challenge 8

Add some rules to the body element that set the font-family for the whole document to Verdana, Arial, sans-serif, and set the default color of text to a dark gray. You may have to make some adjustments in other rules to make it look really good. For example, you may need to tweak the font sizes and bottom margins for the headings and paragraphs.

HTML challenge 8 - body font

HTML Challenge 9

Make some text in the document bold. Make some text italicized. Make a link.

Add rules to the styles that will make those elements look good. Remember bold should stand out in some way, and italics should stand out in a different way, from regular text.

For links, make rules for both the anchor tag (a) and for the anchor tag when you hover over it (a:hover).

HTML challenge 9 - strong, em and link

HTML Challenge 10

Add this goose picture to the page. Insert it as the first thing in the first paragraph. Include the descriptive text in the markup.

HTML challenge 10 - add an image

HTML Challenge 11

Give the image a class attribute called floatleft. Then create a CSS rule that applies to images with the .floatleft class that makes the text wrap around the image, gives an appropriate amount of padding and margin to the image, and gives it a nice looking border.

HTML challenge 11 - float picture left

HTML Challenge 12

Below the subheading and above the first paragraph, create an unordered list with these list items in it.

HTML challenge 12 - unordered list menu

HTML Challenge 13

Wrap all the paragraphs together inside an article element. Wrap the unordered list inside an aside element.

Create a rule for the article that tells it to be 65% wide and to float left, and a rule for the aside to be 30% wide and to float right.

You will need to also add a rule to the wrapping section that tells overflow to be hidden to make it contain the floated elements.

HTML challenge 13 - content and sidebar divs

HTML Challenge 14

Make each of the items in the list a link (they don’t have to link to any particular page yet. You can just use a # symbol for the path.) Then create a rule that sets the list-style-type for unordered lists in the sidebar to none.

HTML challenge 14 - menu links

HTML Challenge 15

Create some rules for the anchor tag in the sidebar to make it look nice. Be sure to set it to display as block. I also set the text-decoration, font, font-weight, color, border-left, background-color, margins, and padding, but yours can look different.

HTML challenge 15 - style the menu

HTML Challenge 16

Create a hover rule for the links in the sidebar that compliments the design of the non-hover view. I changed the color of the left border, the background-color and the color of the type.

HTML challenge 16 - menu link hover

HTML Challenge 17

Give the page a title element such as Home.

Then make each of the links in the sidebar link to real files (which will be created in a later challenge).

This is how they should link:

home -> index.html
products -> products.html
services -> services.html
about -> about.html
ontact -> contact.html

HTML challenge 16 - title and links

HTML Challenge 18

Add some meta tags for description and keywords to the head of the page.

HTML challenge 18 - meta tags

HTML Challenge 19

Change the h1 on the index.html page to say “Home” and save the page, then save the page as about.html and change the h1 to “About”. Repeat this process for each page until you have all five pages created. Go back to each page and give it an appropriate title element as well.

Test the site and be sure you named everything properly. All the links should work. If they don’t, figure out what is wrong and fix them.

HTML challenge 19 - heading 1

HTML Challenge 20

Get the goose-badge.png file.

Put it in your folder and then absolutely position it in the lower right corner of the home page. Hint: to do this you will need to change the rule for the wrapping section so that it is positioned relatively.

HTML challenge 20 - absolute positioning