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.
- Create a root folder for a web page on a topic of your choice. Give it an appropriate name.
- Create a new HTML file called index.html and save it to your root folder.
- Code the basic HTML skeleton in index.html.
- Add the two lines of code that are required to make this an HTML5 document.
- Create a <section> element within the <body> element.
- 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
- 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.
- Save everything and test the page in a browser. Try resizing the browser.
- 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.
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.
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 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 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 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 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 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 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 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 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 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 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 12
Below the subheading and above the first paragraph, create an unordered list with these list items in it.
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 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 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 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 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 18
Add some meta tags for description and keywords to the head of the page.
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 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.