1. Fill in the red blank with one character to open the page in a new window.
<a href="http://www.loris.com" target__"_blank">
That's correct. Well done!
The correct code:
=
Press Tab or click button to advance to next exercise.
2. Fill in the blank to open the page in a new window.
<a href="http://www.loris.com" ______="_blank">
That's correct. Well done!
The correct code:
target
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
3. Fill in the blank to open the page in a new window.
<a href="http://www.loris.com" target="______">
That's correct. Well done!
The correct code:
_blank
Press Tab or click button to advance to next exercise.
4. Fill in the blank to open the page in a new window.
<a href="http://www.loris.com" _____________>
That's correct. Well done!
The correct code:
target="_blank"
Press Tab or click button to advance to next exercise.
The next 16 exercises are a review of material you've learned in previous chapters.
5. Create a class of heading (your choice of size). Make it as bold as possible, using a word.
That's correct. Well done!
Example:
h3.black {
font-weight: bolder;
}
Press Tab or click button to advance to next exercise.
6. Create the next-smallest heading with opening and closing tags. Assign it a class. Make up the text. Italicize the whole thing, using the tags that require the most typing.
That's correct. Well done!
Example:
<h5 class="subhead"><em>A fine kettle of fish!</em></h5>
Press Tab or click button to advance to next exercise.
7. Write a paragraph including opening and closing tags. Enclose the paragraph within a span that is assigned a class.
That's correct. Well done!
Example:
<span class="formal"><p>Welcome to the Society.</p></span>
Press Tab or click button to advance to next exercise.
8. A class has been created specifying red text. Code a paragraph of more than 1 word that includes the word "red" and colors that word "red" (and only that word) red. The class name is "shocking"
That's correct. Well done!
Example:
<p>This is what <span class="shocking">red</span> looks like.</p>
Press Tab or click button to advance to next exercise.
9. Style all paragraphs with .1 em extra space between lines than the default with smooth left and right edges.
That's correct. Well done!
The correct code:
p {
line-height: 1.3em;
text-align: justify;
}
Press Tab or click button to advance to next exercise.
10. Code the opening tags only (2 opening tags in all) for a paragraph all of whose lines are indented and whose first line has additional indentation. The CSS you'll need to refer to is this:
p.indented {
text-indent: 1.25em;
}
That's correct. Well done!
The correct code:
<blockquote><p class="indented">
Press Tab or click button to advance to next exercise.
11. Create a class not tied to an element that (hideously) has two borders of two different color names (not hex), two different widths, and two different line types. Start with the top border and go clockwise. Make up the class name.
That's correct. Well done!
Example:
.hideous {
border-top: 10px solid red;
border-right: 1px dashed white;
}
Press Tab or click button to advance to next exercise.
12. Create a class of headings (your choice of size) that specifies a margin (your choice of width) on all four sides and the same amount of padding as the margin on all four sides. Make up the class name.
That's correct. Well done!
Example:
h3.special {
margin: 1.2em;
padding: 1.2em;
}
Press Tab or click button to advance to next exercise.
The next several exercises are timed. If you type slowly or dislike time pressure, feel free to increase the allotted time.
13. Time goal: 20 seconds. The body has been styled so the "normal" color for headings and paragraphs is black. Style a heading (your choice of size) that specifies a different color than "normal." Use a color name, not a hex number.
Press Tab or click button to check answer.
Example:
h3 {
color: blue;
}
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
14. Time goal: 50 seconds. Style three heading sizes (your choice of sizes), specifying default letter-spacing and roughly an extra half-line of spacing between lines.
Press Tab or click button to check answer.
Example:
h2, h3, h5 {
letter-spacing: 0;
line-height: 1.8em;
}
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
15. Time goal: 45 seconds. Create a class of div that styles all text in it as Georgia, Times, or serif. Make up the class name.
Press Tab or click button to check answer.
Example:
div.formal {
font-family: Georgia, Times, serif;
}
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
16. Time goal: 45 seconds. Group a heading id (your choice of size) and a paragraph id that make the heading and the paragraph that follows it run together. Make up a name for the ids.
Press Tab or click button to check answer.
Example:
h2#strange, p#weird {
display: inline;
}
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
17. Time goal: 50 seconds. Code an image tag, including text that may display if the image doesn't, plus display dimensions. The image is 400 pixels by 200 pixels, but is to be displayed half that size. Make up the image source, type, and text
Press Tab or click button to check answer.
Example:
<img src="pic1.jpg" alt="truck" width="200"
height="100">
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
18. Time goal: 40 seconds. Code an image, followed by a paragraph that displays on a separate line. Make up the image source. Use any of the three image types. Don't code alt text or dimensions. Include a little text in the paragraph.
Press Tab or click button to check answer.
Example:
<img src="skier.png">
<p>Hi there!</p>
Since a paragraph is a block element by
default, it automatically starts a new line
after an image
Press Tab or click button to advance to next exercise.
Press Tab or click button to advance to next exercise.
19. Code a class of image that centers and also has an em of padding all around it. Use the concise alternative way to specify margins. Code the padding specification last. Make up the class name.
That's correct. Well done!
Example:
img.featured {
display: block;
margin: 0 auto 0 auto;
padding: 1em;
}
Press Tab or click button to advance to next exercise.
20. Create an image class that floats it left and adds 2 ems of white space between the image and the text. Make up the class name. Use either way to specify the space.
That's correct. Well done!
Example:
img.special {
float: left;
margin-right: 2em;
}
Press Tab or click button to advance to next exercise.
Congratulations. You've aced all the exercises for this chapter.
Post a review on Amazon for the paperback or the Kindle edition.
Email me to give me a compliment, complaint, or correction. I'll respond.
All of my books include free interactive online exercises that make the knowledge stick.
