|
|
Notice the simple, centered navigation bar above. Make the code for this bar and link it to your copied pages. Make sure all of your pages are interlinked. Put a copy of this nav bar on the bottom of the page, too.
Hint: get the top nav bar working and then just copy and paste to make the bottom one.
Hint 2: The vertical lines between the links are called "pipes" and are on the same key as the backslash ( \ ). Just hit shift + backslash. Notice that these pipes are not included in either link and are not clickable.
Make this entire page including these instructions from scratch. Feel free to copy the images and use the exact images in your page. You may also copy and paste the rendered text to save some time.
You must, however, code all tags. Do not copy and paste the code from this page's source code. Anyone can do that. What's important is that you know how to code all of the effects on this page. Feel free to review the tutorials as needed. It might take a couple of attempts before you get this page right.
Begin making your test page by looking over this one and figuring out what tags and attributes were used to make the various effects. Specific values for certain attributes are included in the content of this page. Start coding one section, one line at a time and debugging as you go. If you get stuck, review the tutorials before asking for help.
There are no effects on this page that are not included in the Beginning HTML Tutorials. Below is a list of Special Characters you'll need to know for convenience:
< -- The opening angle bracket. " < ".
> -- The closing angle bracket. " > ".
& -- The ampersand. " & ". Making the & special character is tricky. Look at the code if you need to.
-- A non-breaking space, like hitting the space bar. Not used on this page, but it's referred to.
Hint: Coding the tags above is the trickiest part of this exam. What you code is far from what you see when the page is rendered. Just remember to take things on step at a time, one character at a time. Feel free to look at this page's source code to see how an effect is made if you get stuck. But, remember, it does you no good just to copy and paste whole sections of code.
This paragraph and the heading above were made by using the ALIGN="center" attribute/value pair. Remember that you can make blank "whitespace" using <br> tags for vertical space and for horizontal space. Note that I had to use "Special Characters" in that last sentence. I even had to use special characters for the special character to get the "&". These special characters were colored with the <font> tag.
The above is an image link using "winzipnow.gif" and going to http://www.winzip.com/ . The horizontal rules are centered with an ALIGN attribute in their tags. The image link is centered by being nested in <div> tags. The image link's border is three pixels thick.
The horizontal rules are stretched to 70% of the page's width, centered, and are NOSHADE. They are 3 pixels thick.
The image and text of this paragraph are aligned right. The <h3> header is alinged right, too. Feel free to snag the image "coffee.gif" for use in your exam pages. Notice the use of special characters again. If your paragraphs or other text around an image are long enough, they'll wrap around the image. This image has horizontal and vertical whitespace of 5 pixels provided by VSPACE and HSPACE. VSPACE and HSPACE are often forgotten attributes of the <img> tag.
Left alignment is the default alignment for most things like text, headers, and images. This thumbtack image has 5 pixels of vertical whitespace between it and the text and 10 pixels of horizontal space. This space is often referred to as a gutter or margin. Generally when text does not wrap around an image. It's because there's not enough text. No problem. This is the last paragraph and I want to "space it up" from the bottom of the browser window. Make this vertical whitespace with <br> tags.