Chapter X 1 Short exercises for Murach’s HTML5 and CSS (4th Edition) Short exercises for Murach’s HTML5 and CSS3 (4th edition) Each of the short exercises requires you to use just one or two web...

1 answer below »

Chapter X
1 Short exercises for Murach’s HTML5 and CSS (4th Edition)
Short exercises for
Murach’s HTML5 and CSS3
(4th edition)
Each of the short exercises requires you to use just one or two web development skills, and each
is designed so it can be done in from 5 to 45 minutes.
Guidelines for doing the short exercises
 Do the exercise steps in sequence. That way, you will work from the most important
tasks to the least important.
 Feel free to copy and paste code from the book applications, book examples, or
exercises that you’ve already done.
 Use your book as a guide to coding.
 If you are doing an exercise in class with a time limit set by your instructor, do as
much as you can in the time limit.
 Because each short exercise is independent of the others, many of the links in the
pages that you will be given to start the exercises won’t work. To provide for that, the
href attribute for each of those links is coded as a hash character (#). That way, you
won’t get a “file not found” e
or if you click the link. Instead, you’ll just stay on the
same page.
2 Short exercises for Murach’s HTML5 and CSS (4th Edition)
Short 3-1 Create an HTML page for a speaker
In this exercise, you’ll create a semantically co
ect, HTML page that looks like the one
elow. Estimated time: 20-30 minutes.
1. Open this HTML file:
short_exercises\town_hall\speakers\c03x_sorkin.html
Note that it contains a head section and all the copy for the text in the body of the
page, but the HTML tags haven’t yet been applied to that text.
2. Apply the HTML tags to the text so the text will look like it does in the page above.
Remember too that these tags should be semantically co
ect. The last two lines
should be coded within a footer element, and everything else should be within a main
element.
3. Add the image for the speaker: sorkin_desk260.jpg, which is 260 pixels wide.
4. Use character entities or inline formatting tags to add the quotation marks and italics
that this page requires.
3 Short exercises for Murach’s HTML5 and CSS (4th Edition)
Short 5-1 Apply CSS to an HTML page
In this exercise, you’ll apply the CSS skills that you learned in chapters 4 and 5 to an
existing HTML document. The resulting page should look something like the screen shot
that follows. Estimated time: 30 to 45 minutes.
1. Open the HTML and CSS files that follow, and note that the CSS file includes one
ule set:
short_exercises\town_hall\speakers\c05x_sorkin.html
short_exercises\town_hall\styles\c05x_sorkin.css
2. Add a link element to the head section of the HTML file for the normalize.css style
sheet.
3. If you want to use a reset selector, add that to the CSS file. But feel free to code the
CSS in the way that you prefer.
4 Short exercises for Murach’s HTML5 and CSS (4th Edition)
4. Code a rule set for the html element that sets the background color to yellow.
5. Enhance the rule set for the body so the width is 650 pixels, the body is centered in
the
owser window, and the body has a double blue border around it like the one
above. If you need to make any other changes to the body, do that too.
6. Code a rule set for the main element that puts padding around its contents. Then,
code a rule set for the footer that puts a blue border above it. Note that this border
doesn’t touch the border for the body.
7. Code rule sets for the h1, h2, and h3 elements. The h1 font should be 150% of the
default specified in the body, the h2 font should be 125% of the default font, and the
h3 font should be 115% of the default font. The h1 font should also be blue. Then,
apply appropriate margins or padding to the h1, h2, and h3 elements so the spacing
efore and after the headings is similar to what’s shown above.
8. Code the rule sets for the

, blockquote, ul, and li elements so the spacing before
and after the elements is similar to what’s shown above.
9. Code a rule set for the cite element that changes its color to blue and removes the
italics from the text.
10. Code a rule set for the paragraphs that contain cite elements. This rule set should
ight align the paragraphs and increase the spacing below to .75em. One way to do
this is to add a class attribute to these paragraphs and use that class as the selector for
the rule set.
11. Float the image to the left and apply appropriate margins or padding so the text flows
to its right as shown above.
12. Apply rules to the footer or the paragraphs within the footer so the font size is 90% of
the default, the font weight is bold, the paragraphs are centered, and the spacing
above and below is similar to what’s shown above.
5 Short exercises for Murach’s HTML5 and CSS (4th Edition)
Short 6-1 Use the CSS3 columns feature
In this exercise, you’ll float the speaker image to the left, adjust the formatting as needed,
and apply two-column formatting to the article. Estimated time: 5-10 minutes.
1. Open these HTML and CSS files, and run the HTML file:
short_exercises\town_hall\speakers\c06x_toobin.html
short_exercises\town_hall\styles\c06x_speaker.css
2. Float the image to the left instead of the right and adjust the space around the image.
3. Apply two-column formatting to the article using the column-count property as in
figure 6-10. If this creates any formatting problems, adjust the HTML or the CSS so
the page looks like the one above. One hint: Use CSS to set the width of the image to
275 pixels so it fits in one column.
6 Short exercises for Murach’s HTML5 and CSS (4th Edition)
Short 6-2 Switch the columns of a page
In this exercise, you’ll switch the section and aside of a speaker page so it looks like the
one below. That will demonstrate your understanding of floating, margins, and padding.
Estimated time: 5-10 minutes.
1. Open the HTML and CSS files for the page:
short_exercises\town_hall\speakers\c06x_toobin.html
short_exercises\town_hall\styles\c06x_speaker.css
2. Change the style rules for the section and aside so the columns are switched.
3. Adjust the margins and padding for the section and aside so the formatting is similar
to the formatting shown above.
7 Short exercises for Murach’s HTML5 and CSS (4th Edition)
Short 6-3 Add a third column to a page
In this exercise, you’ll add a third column to an index page. That will demonstrate your
understanding of floating, margins, and padding. Estimated time: 10-15 minutes.
1. Open the HTML and CSS files for the page:
short_exercises\town_hall\c06x_index.html
short_exercises\town_hall\styles\c06x_main.css
2. Note that another aside has been added to the HTML page. That aside contains the
heading and text shown in the third column above.
3. If necessary, rea
ange the code in the HTML file so the page can be presented in
three columns as shown above.
4. Modify the code in the CSS file so it provides for the three columns with the
approximate spacing shown above.
8 Short exercises for Murach’s HTML5 and CSS (4th Edition)
Short 7-1 Start an email
In this exercise, you’ll add a paragraph at the bottom of the speaker’s page that will start
an email. Estimated time: 5-10 minutes.
1. Open this HTML file and run it:
short_exercises\town_hall\speakers\c07x_sampson.html
2. In the HTML file, add the boldfaced paragraph at the bottom of the article (use a

element to apply the boldfacing). When the user clicks on “email us”, an email
should be started that is populated with this data:
To: XXXXXXXXXX
CC: XXXXXXXXXX
Subject: Scott Sampson luncheon
Reminder: When you populate two or more fields, you separate them with
ampersands (&).
mailto: XXXXXXXXXX
mailto: XXXXXXXXXX
9 Short exercises for Murach’s HTML5 and CSS (4th Edition)
Short 7-2 Create a vertical navigation menu
In this exercise, you’ll create a vertical navigation menu in the sidebar as shown below.
Note that each item in the menu includes a right-a
ow symbol, which is actually a
ackground image. Estimated time: 20-30 minutes.
1. Open the HTML and CSS files that follow and display the page in a
owser:
short_exercises\town_hall\speakers\c07x_sampson.html
short_exercises\town_hall\styles\c07x_speaker.css
2. Modify the HTML so the sidebar doesn’t include the speaker images and so both the
month and name for each speaker are in an element. Then, enclose the
elements within the li elements of an unordered list as shown in figure 7-14, and
enclose the ul element in a nav element that has “nav_list” as its id.
3. Add the CSS for formatting the navigation menu. To speed that up, you may want to
copy the code from the example for figure 7-13 and then make the appropriate
adjustments so the links are rectangular with a black border.
4. Add rounded corners to the links as well as box shadows with #800000 as the color.
The cu
ent link should also have #800000 as its color. As you do this, you may want
to refer to figure 5-10.
5. Add the symbols to the links. To do that, use the background-image, background-
epeat, and background-position properties as shown in figure 5-11. The symbol is in
the images file, and it is named right.jpg. In this case, you don’t want to repeat the
image, and you want to position it in the middle vertically and about 95% from the
left.
6. If necessary, adjust the margins, spacing, and font sizes for any of the elements.
10 Short exercises for Murach’s HTML5 and CSS (4th Edition)
Short 8-1 Create a fluid design
In this exercise, you’ll convert a page so it uses a fluid layout and scalable images. When
you’re done, the page will look as shown below

Answered 5 days AfterApr 03, 2022

Solution

Ankur answered on Apr 08 2022
15 Votes
SOLUTION.PDF

Answer To This Question Is Available To Download

Related Questions & Answers

More Questions »

Submit New Assignment

Copy and Paste Your Assignment Here